SC-8 Skills + system-prompt editor UI (CodeMirror, scope ladder, diff, reset) #630

Closed
opened 2026-05-01 10:35:07 +00:00 by claude-desktop · 1 comment
Collaborator

User story

As an operator, I want a full-fidelity skills + system-prompts editor with a CodeMirror authoring pane, live markdown preview, a visual scope-ladder navigator, "Reset to factory" with a unified diff confirm, and a per-artifact revision history, so that the existing raw Record<string, string> <SkillsSection> is replaced by something I can actually use to evolve agent behaviour.

Acceptance criteria

Route + shell

  • New route /settings/agent-config (or /agents/{type}/config).
  • Tab bar at top: Skills | System prompts | Plugins | MCP | Marketplaces | Secrets | History. Tabs use the <Tabs> primitive per apps/web/CLAUDE.md.
  • Left pane: scope filter dropdown (All | Builtin | Global | Agent type ▾ | Instance ▾) + free-text search.
  • Center pane: list of artifacts in the active tab. Each row shows name + effective scope chip (Builtin muted, Override accent, Instance override warning) + last-edited-at + a row-action menu (Edit, Fork to..., Reset to factory, View history).

Skills + System prompts editor

  • CodeMirror markdown editor (left) + live <Markdown> preview (right), reusing the spec-editor primitive at apps/web/src/components/spec-editor/spec-editor.tsx.
  • Scope ladder visualiser at the top of the editor: 4 chips (Builtin → Global → Agent type → Instance). Active chip highlighted; clicking a parent chip navigates to that scope's row, or shows an inline "Create override here" CTA when no row exists at that layer.
  • Top toolbar: Builtin diff toggle that opens a unified-diff modal vs. the factory body; Save + Reset to factory buttons.
  • Reset to factory: confirm dialog (apps/web/CLAUDE.md patterns) showing the unified diff and explicit copy: "This deletes the override and falls back to the factory copy. The current edit cannot be recovered unless revision history was kept."

History tab

  • Paginated list of config_revision rows. Columns: kind, name, scope, agent_type / instance, created_by, created_at, comment, action menu (View body, View diff vs. now, Restore).

Cleanup

  • Existing <SkillsSection> raw key-value editor is removed from the agent-instance page; a "Customize skills →" link replaces it, deep-linked to the new route filtered to the instance.

Tests

  • Existing apps/web/src/features/agents/sections.test.tsx cases for <SkillsSection> are migrated or deleted.
  • New apps/web/src/features/agent-config/skills-tab.test.tsx: renders the list, opens the editor, saves, falls back on reset, navigates via the scope ladder.
  • New apps/web/src/features/agent-config/history-tab.test.tsx: lists revisions, restores a revision.

Out of scope

  • Plugin / MCP / Secret tab UIs (SC-9).
  • Per-instance scope affordances (SC-11; this story focuses on type + global + builtin).

References

  • specs/agent-config-customization.md §Dashboard surface and §Story SC-8
  • apps/web/src/features/agents/sections.tsx::SkillsSection — replaced by this story
  • apps/web/src/components/spec-editor/spec-editor.tsx — reusable CodeMirror + preview primitive
  • apps/web/src/components/planner/markdown.tsx — token-styled <Markdown> renderer
  • apps/web/CLAUDE.md — primitives + a11y baseline + density rules
  • Depends on SC-7 for the API surface.
## User story As an operator, I want a full-fidelity skills + system-prompts editor with a CodeMirror authoring pane, live markdown preview, a visual scope-ladder navigator, "Reset to factory" with a unified diff confirm, and a per-artifact revision history, so that the existing raw `Record<string, string>` `<SkillsSection>` is replaced by something I can actually use to evolve agent behaviour. ## Acceptance criteria ### Route + shell - [ ] New route `/settings/agent-config` (or `/agents/{type}/config`). - [ ] Tab bar at top: `Skills | System prompts | Plugins | MCP | Marketplaces | Secrets | History`. Tabs use the `<Tabs>` primitive per `apps/web/CLAUDE.md`. - [ ] Left pane: scope filter dropdown (`All | Builtin | Global | Agent type ▾ | Instance ▾`) + free-text search. - [ ] Center pane: list of artifacts in the active tab. Each row shows name + effective scope chip (`Builtin` muted, `Override` accent, `Instance override` warning) + last-edited-at + a row-action menu (`Edit`, `Fork to...`, `Reset to factory`, `View history`). ### Skills + System prompts editor - [ ] CodeMirror markdown editor (left) + live `<Markdown>` preview (right), reusing the spec-editor primitive at `apps/web/src/components/spec-editor/spec-editor.tsx`. - [ ] Scope ladder visualiser at the top of the editor: 4 chips (`Builtin → Global → Agent type → Instance`). Active chip highlighted; clicking a parent chip navigates to that scope's row, or shows an inline "Create override here" CTA when no row exists at that layer. - [ ] Top toolbar: `Builtin diff` toggle that opens a unified-diff modal vs. the factory body; `Save` + `Reset to factory` buttons. - [ ] `Reset to factory`: confirm dialog (`apps/web/CLAUDE.md` patterns) showing the unified diff and explicit copy: "This deletes the override and falls back to the factory copy. The current edit cannot be recovered unless revision history was kept." ### History tab - [ ] Paginated list of `config_revision` rows. Columns: kind, name, scope, agent_type / instance, created_by, created_at, comment, action menu (`View body`, `View diff vs. now`, `Restore`). ### Cleanup - [ ] Existing `<SkillsSection>` raw key-value editor is removed from the agent-instance page; a "Customize skills →" link replaces it, deep-linked to the new route filtered to the instance. ### Tests - [ ] Existing `apps/web/src/features/agents/sections.test.tsx` cases for `<SkillsSection>` are migrated or deleted. - [ ] New `apps/web/src/features/agent-config/skills-tab.test.tsx`: renders the list, opens the editor, saves, falls back on reset, navigates via the scope ladder. - [ ] New `apps/web/src/features/agent-config/history-tab.test.tsx`: lists revisions, restores a revision. ## Out of scope - Plugin / MCP / Secret tab UIs (SC-9). - Per-instance scope affordances (SC-11; this story focuses on type + global + builtin). ## References - `specs/agent-config-customization.md` §Dashboard surface and §Story SC-8 - `apps/web/src/features/agents/sections.tsx::SkillsSection` — replaced by this story - `apps/web/src/components/spec-editor/spec-editor.tsx` — reusable CodeMirror + preview primitive - `apps/web/src/components/planner/markdown.tsx` — token-styled `<Markdown>` renderer - `apps/web/CLAUDE.md` — primitives + a11y baseline + density rules - Depends on **SC-7** for the API surface.
Collaborator

🦵 @charles kicked the queue — re-running implement on @dev.

🦵 @charles kicked the queue — re-running implement on @dev.
Sign in to join this conversation.
No project
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
charles/claude-hooks#630
No description provided.