feat(web): integrate MarkdownEditor + AI drawer into skills-tab system-prompt editor #916

New issue

Closed

opened 2026-05-06 23:26:48 +00:00 by claude-desktop · 0 comments

claude-desktop commented

2026-05-06 23:26:48 +00:00

Collaborator

Context

apps/web/src/features/agent-config/skills-tab.tsx contains a private MarkdownEditor component (CodeMirror only, split-pane preview) used in the SystemPromptEditorDrawer. Now that the shared MarkdownEditor (Milkdown Crepe, #915) exists, replace the local implementation.

AC

In SystemPromptEditorDrawer replace the local MarkdownEditor + adjacent Markdown preview pane with <MarkdownEditor> from @/components/markdown-editor.
Remove the private MarkdownEditor component and its now-unused CodeMirror imports from skills-tab.tsx.
Wire an Assistant button through MarkdownEditor's toolbar prop that opens a MarkdownAssistantDrawer (same pattern as agent-db-skills-tab.tsx).
Build the assistant message with context: skill kind (system-prompt), agent type / instance, current draft.
Use useArchitectDefaultRepo for the repo context.
Update skills-tab.test.tsx and skills-tab.preview.test.tsx — swap the existing EditorView mock for the @/components/markdown-editor mock already used in those files.

Depends on

#915 (visual-only MarkdownEditor)

## Context `apps/web/src/features/agent-config/skills-tab.tsx` contains a private `MarkdownEditor` component (CodeMirror only, split-pane preview) used in the `SystemPromptEditorDrawer`. Now that the shared `MarkdownEditor` (Milkdown Crepe, `#915`) exists, replace the local implementation. ## AC - In `SystemPromptEditorDrawer` replace the local `MarkdownEditor` + adjacent `Markdown` preview pane with `<MarkdownEditor>` from `@/components/markdown-editor`. - Remove the private `MarkdownEditor` component and its now-unused CodeMirror imports from `skills-tab.tsx`. - Wire an **Assistant** button through `MarkdownEditor`'s `toolbar` prop that opens a `MarkdownAssistantDrawer` (same pattern as `agent-db-skills-tab.tsx`). - Build the assistant message with context: skill kind (`system-prompt`), agent type / instance, current draft. - Use `useArchitectDefaultRepo` for the repo context. - Update `skills-tab.test.tsx` and `skills-tab.preview.test.tsx` — swap the existing `EditorView` mock for the `@/components/markdown-editor` mock already used in those files. ## Depends on #915 (visual-only MarkdownEditor)