T-FQ5M-agent-pants-adopts-markdown-ui

State: closed/done · Impact: high · Complexity: small

Goal

The agent-pants experience already hosts obsidian-editor through SkillBodyEditor.vue, which makes it the second wave-1 reference integration. This task mounts MdSurface at both call sites and deletes the experience-local editor wrapper.

Today

Location	Role today
solutions/determined/experiences/agent-pants/package.json	Depends on @sksizer/obsidian-editor, @sksizer/obsidian-md; @determined/ui as a devDependency
solutions/determined/experiences/agent-pants/nuxt.config.ts	Empty defineNuxtConfig({})
solutions/determined/experiences/agent-pants/app/components/SkillBodyEditor.vue	useObsidianEditor wrapper with CodeMirror :deep() styling
solutions/determined/experiences/agent-pants/app/components/ApNewComponentWizard.vue	Mounts SkillBodyEditor
solutions/determined/experiences/agent-pants/app/pages/apps/agent-pants/notes/	Catch-all note page mounts SkillBodyEditor
solutions/determined/experiences/agent-pants/app/composables/useAgentPantsEditorProvider.ts	agentPantsEditorProvider() returns an EditorIndexProvider
solutions/determined/products/agent-pants/nuxt.config.ts	Extends shell, vaults and the agent-pants experience
solutions/determined/products/agent-pants/tests/e2e/authoring.e2e.ts	Playwright authoring project over the skill body editor
packages/ts/ui/docs/design-system.md	Cites SkillBodyEditor.vue as the :deep()-into-CodeMirror example

Proposed

Both call sites mount:

<MdSurface v-model="body" :provider="agentPantsEditorProvider(...)" mode="live" :modes="['live','source']" toolbar="fixed" frontmatter-panel="hidden" :find="false" @save>

SkillBodyEditor.vue is deleted. The experience declares @sksizer/markdown-ui and extends it. The design-system doc cites the layer’s MdSurface.vue as its :deep() example.

Approach

1. package.json: add @sksizer/markdown-ui (workspace:*); remove @sksizer/obsidian-editor.
2. nuxt.config.ts: extends: ['@sksizer/markdown-ui'].
3. useAgentPantsEditorProvider.ts: type the return as the layer’s MarkdownProvider (the object already satisfies it).
4. Swap SkillBodyEditor for MdSurface in ApNewComponentWizard.vue and notes/[...path].vue, keeping their save handling.
5. Delete SkillBodyEditor.vue; update the citation in packages/ts/ui/docs/design-system.md.
6. Root bun install; bun install --frozen-lockfile passes.
7. Verify: moon run product-agent-pants:check; bunx playwright test --project authoring from solutions/determined/products/agent-pants; just ci-guards; moon run :check :test --affected. Byte-diff an unedited save.

Files to touch

Location	Kind	Change
solutions/determined/experiences/agent-pants/package.json	modify	Add @sksizer/markdown-ui; drop @sksizer/obsidian-editor
solutions/determined/experiences/agent-pants/nuxt.config.ts	modify	Extend the layer
solutions/determined/experiences/agent-pants/app/composables/useAgentPantsEditorProvider.ts	modify	Return type MarkdownProvider
solutions/determined/experiences/agent-pants/app/components/ApNewComponentWizard.vue	modify	Mount MdSurface
solutions/determined/experiences/agent-pants/app/pages/apps/agent-pants/notes/	modify	Catch-all note page mounts MdSurface
solutions/determined/experiences/agent-pants/app/components/SkillBodyEditor.vue	delete	Replaced by MdSurface
packages/ts/ui/docs/design-system.md	modify	Replace the SkillBodyEditor.vue citation
solutions/determined/products/agent-pants/tests/e2e/authoring.e2e.ts	modify	Selectors that targeted the old wrapper
bun.lock	modify	Root lockfile regen

Acceptance criteria

• AC-1: SkillBodyEditor.vue no longer exists and grep -rn SkillBodyEditor solutions packages docs returns nothing.
• AC-2: ApNewComponentWizard.vue and notes/[...path].vue each mount MdSurface.
• AC-3: The experience package.json lists @sksizer/markdown-ui and not @sksizer/obsidian-editor.
• AC-4: moon run product-agent-pants:check and the Playwright authoring project pass.
• AC-5: Saving an unedited skill body leaves the file’s sha unchanged (recorded in the PR).
• AC-6: bun install --frozen-lockfile passes at the root.

Out of scope

• The standalone apps/agentpants viewer (T-HY7N-agentpants-drop-mdc).
• SkillFieldsForm.vue and the typed-frontmatter form; frontmatter stays outside the editor.
• Toolbar, bubble and slash chrome; they arrive through the layer’s later tasks.

Dependencies

• T-A0HT-md-ui-layer-skeleton supplies MdSurface.
• D-4QGN-markdown-dialect-and-compatibility-profile: body-only editing.
• D-7VMX-markdown-ecosystem-strategy d.10: the migration deletes SkillBodyEditor.vue.
• S-0010-design-language-consumption.

Discovery context

Member of milestone M-931L; the wave-1 agent-pants migration of D-K3EM-markdown-editor-chrome-and-plugin-environment.

Depends on

T-A0HT-md-ui-layer-skeleton

---

← Back to Tasks