T-UQCN-suspenders-skill-body-viewer

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

Goal

The suspenders skill detail panel shows the skill body as a raw <pre>. This task renders the body through MdViewer in both hosts (SDF and the standalone product) while the frontmatter stays a YAML <pre>.

Today

Location	Role today
`solutions/ontological/experiences/suspenders/app/components/SkillDetailPanel.vue`	Two body `<pre>` blocks (`managed.body`, `unmanaged.body`) and one frontmatter `<pre>`
`solutions/ontological/experiences/suspenders/app/types/skill.ts`	`ManagedDetail`, `SkillDetail` with string bodies
`solutions/ontological/experiences/suspenders/package.json`	Depends on `nuxt` and `vue` only
`solutions/ontological/experiences/suspenders/nuxt.config.ts`	Empty layer config
`solutions/ontological/experiences/suspenders/tests/roster.test.ts`	Unit tests for roster utilities
`solutions/ontological/products/suspenders/nuxt.config.ts`	Extends `@sksizer/app-frame`, `@sdlc/exp-suspenders`, `@determined/ui`
`solutions/ontological/products/suspenders/package.json`	Standalone product dependencies
`solutions/ontological/desktop/src-nuxt/nuxt.config.ts`	SDF host; extends `@sdlc/exp-suspenders`; gains `@sksizer/markdown-ui` in T-I4V6-sdf-entity-body-viewer

Proposed

SkillDetailPanel.vue renders managed.body and unmanaged.body with <MdViewer :source="..." />; the frontmatter <pre> is unchanged. The experience declares @sksizer/markdown-ui (workspace:*) for types and auto-import resolution; products/suspenders adds the layer to extends and its package.json; SDF inherits the layer from T-I4V6-sdf-entity-body-viewer.

Approach

experiences/suspenders/package.json: add @sksizer/markdown-ui (workspace:*); nuxt.config.ts: extends: ['@sksizer/markdown-ui'].
products/suspenders/package.json and nuxt.config.ts: declare and extend the layer between @sksizer/app-frame and @sdlc/exp-suspenders.
SkillDetailPanel.vue: swap the two body <pre> elements for MdViewer; keep the frontmatter <pre>.
Root bun install; bun install --frozen-lockfile.
Verify: bun test tests in the experience; bun run build in products/suspenders; moon run sdf:check; open a managed skill with a fence and a table in both hosts, light and dark; moon run :check :test --affected.

Files to touch

Location	Kind	Change
`solutions/ontological/experiences/suspenders/package.json`	modify	Add `@sksizer/markdown-ui`
`solutions/ontological/experiences/suspenders/nuxt.config.ts`	modify	Extend the layer
`solutions/ontological/experiences/suspenders/app/components/SkillDetailPanel.vue`	modify	Body `<pre>` blocks become `MdViewer`
`solutions/ontological/products/suspenders/package.json`	modify	Add `@sksizer/markdown-ui`
`solutions/ontological/products/suspenders/nuxt.config.ts`	modify	Extend the layer
`bun.lock`	modify	Root lockfile regen

Acceptance criteria

AC-1: SkillDetailPanel.vue has no <pre> bound to managed.body or unmanaged.body and mounts MdViewer twice; the frontmatter <pre> remains.
AC-2: bun run build in solutions/ontological/products/suspenders and moon run sdf:check pass.
AC-3: Light and dark screenshots of a skill body with a fence and a table, from both hosts, are attached to the PR.
AC-4: bun install --frozen-lockfile passes at the root.

Out of scope

Editing managed draft bodies (T-PFC2-suspenders-draft-body-editor).
Rendering the frontmatter as a properties table; it stays YAML.
Resolving wikilinks inside skill bodies.

Dependencies

T-I4V6-sdf-entity-body-viewer wires the layer into SDF, the primary host.
D-A27T-suspenders-skill-experience-module: the experience stays host-agnostic; the layer is reached through each host’s extends.
D-7VMX-markdown-ecosystem-strategy d.10: the raw <pre> body render is removed.

Discovery context

Member of milestone M-931L; wave 2b of D-K3EM-markdown-editor-chrome-and-plugin-environment.

Depends on

T-I4V6-sdf-entity-body-viewer

← Back to Tasks