kandev/docs/plans/native-html-preview/task-07-responsive-preview-surfaces.md

id, title, status, wave, depends_on, plan, requirements, acceptance_criteria, system_design

id	title	status	wave	depends_on	plan	requirements	acceptance_criteria	system_design
07-responsive-preview-surfaces	Wire responsive preview surfaces	cancelled	3	06-preview-state-and-renderer	plan.md	REQ-UI-NATIVE-HTML-PREVIEW-001	AC-UI-NATIVE-HTML-PREVIEW-001.1 AC-UI-NATIVE-HTML-PREVIEW-001.2 AC-UI-NATIVE-HTML-PREVIEW-001.7 AC-UI-NATIVE-HTML-PREVIEW-001.8 AC-UI-NATIVE-HTML-PREVIEW-001.10	../../specs/ui/system-design/native-html-preview.md

Task 07: Wire responsive preview surfaces

Summary

Connect the runtime-backed renderer to every existing HTML preview entry point. Reuse the Markdown toolbar and focused mobile viewer composition without creating a second execution path or changing unrelated file actions.

In scope

• Monaco, CodeMirror, Dockview, center-panel, and mobile file-viewer preview entry points.
• Localized preview, source, runtime-failure, and unsupported-capability copy in all shipped locales.
• Mobile touch sizing, full-height layout, identity reset, and overflow containment.
• Component coverage for source restoration, dirty buffers, Markdown parity, and runtime failure recovery.

Out of scope

• Runtime engine or virtual-DOM implementation.
• Public documentation.
• Review-diff preview and Browser-panel behavior.

Acceptance

• Every eligible text-file surface uses the same runtime-backed HTML preview, and returning to source preserves buffer and dirty state.
• Mobile exposes a touch-sized action and the scriptless preview surface does not add page-level horizontal overflow.
• Markdown, binary, unsupported-file, download, delete, comment, and external editor behavior remains unchanged.

Verification

cd apps/web
pnpm exec vitest run components/task/file-editor-content.test.tsx components/task/file-tab-content.test.tsx components/task/mobile/mobile-file-viewer-panel.test.tsx components/editors/monaco/monaco-editor-toolbar.test.tsx components/editors/codemirror/codemirror-code-editor.preview.test.tsx
pnpm run typecheck
pnpm run i18n:check
pnpm run i18n:ratchet

Files likely touched

• apps/web/components/task/file-editor-content.tsx
• apps/web/components/task/file-editor-panel.tsx
• apps/web/components/task/file-tab-content.tsx
• apps/web/components/task/task-center-panel.tsx
• apps/web/components/task/mobile/mobile-file-viewer-panel.tsx
• Monaco and CodeMirror toolbar files and tests.
• Five shipped locale files and generated pseudo-locale data.

Dependencies

Task 06 supplies the runtime-backed renderer and stable failure contract.

Risks

• Multiple desktop file-editor paths can accidentally create independent worker generations or omit disposal on unmount.
• Mobile and Dockview may mount duplicate preview controls, so selectors and lifecycle ownership must remain scoped to the active surface.

Parallelism

sequential

Inputs

• The responsive contract in the system design.
• Existing Markdown preview toolbar and mobile file-viewer tests.
• /mobile-parity guidance for native mobile interaction patterns.

Results

Verified that Monaco, CodeMirror, Dockview, center-panel tabs, and the focused mobile file viewer all select the same runtime-backed HTML component. Touch controls retain 44-pixel targets, preview state resets on file identity changes, and the existing Markdown and file action paths remain separate.

Verification completed:

pnpm exec vitest run components/task/file-editor-content.test.tsx components/task/file-tab-content.test.tsx components/task/mobile/mobile-file-viewer-panel.test.tsx components/editors/monaco/monaco-editor-toolbar.test.tsx components/editors/codemirror/codemirror-code-editor.preview.test.tsx
pnpm exec tsc --noEmit --pretty false
pnpm run i18n:check
pnpm run i18n:ratchet