{"record":{"id":"7959fc2d27994b8a","repo":"paperclipai/paperclip","slug":"could-not-load-wireframe-viewer-styles","errorCode":null,"errorMessage":"Could not load wireframe viewer styles","messagePattern":"Could not load wireframe viewer styles","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"doc/plans/chat-adapters/generate-wireframes-v3.mjs","lineNumber":384,"sourceCode":" screen.mobileSize = \"375×1320\";\n }\n}\nwriteFileSync(join(out, \"flow.svg\"), `${flowSvg()}\\n`);\n\nconst groups = [\n [\"Start\", sharedScreens.filter((screen) => screen.group === \"Start\")],\n [\"Slack\", providerScreens.filter((screen) => screen.provider === \"Slack\")],\n [\"GitHub\", providerScreens.filter((screen) => screen.provider === \"GitHub\")],\n [\"Microsoft Teams\", providerScreens.filter((screen) => screen.provider === \"Microsoft Teams\")],\n [\"Telegram\", providerScreens.filter((screen) => screen.provider === \"Telegram\")],\n [\"Paperclip\", sharedScreens.filter((screen) => screen.group === \"Paperclip\")]\n];\nconst orderedScreens = groups.flatMap(([, screens]) => screens);\n\nfunction viewerHtml() {\n const template = readFileSync(join(root, \"../../../packages/skills-catalog/catalog/bundled/product/wireframe/assets/site-template.html\"), \"utf8\");\n const style = template.match(/
Chat adapters · v3
Jump to a screen
Paperclip · Connectors · Consolidated v3

One start. Four provider paths.

The generic connection screens appear once. Slack, GitHub, Microsoft Teams, and Telegram then own their setup, vertical settings, and plain-language conversation walkthroughs.

No duplicate setup“Invite Maya to Slack” appears only in the Slack group. Generic Channels and Behavior screens are replaced by each provider’s real settings.
Architecture planConsolidated UI specificationPlatform-specific research
21 consolidated surfaces4 provider groupsVertical settingsDesktop + mobile

Review convention: red dashed marks are annotations, not proposed UI. Conversation walkthroughs explain what people see and what Paperclip creates; they are not standalone product pages.

Navigation and product flow

Provider-specific after the shared start

Connectors, conditional purpose, and agent selection are shared. The provider then owns its external handoff, settings, and conversation semantics. Paperclip operations appear once.

flow.svg1280×900
\"Consolidated
${sections}
Review

What changed in v3

  • Grouped navigation: Slack, GitHub, Microsoft Teams, and Telegram each have their own left-navigation header and three screens.
  • No duplicate Slack handoff: the earlier generic Invite screen is removed from the viewer; Slack Setup is the only version.
  • No generic settings duplicates: the earlier generic Channels and Behavior screens are removed; provider settings own those decisions.
  • Normal settings layout: every provider uses full-width vertical sections and ordinary setting rows, with tall canvases where needed.
  • Understandable interactions: internal ingress/binding pipeline labels are replaced by the provider conversation people see beside the single Paperclip issue it creates.
  • Stable review links: provider IDs 13–24 are retained, so existing anchors such as #s15 still point to the same provider topic.
  • Paperclip base: 7b094724e65c04949706df638d497afb02c84b62, matching origin/master when generated.
Generated with Paperclip’s wireframe contract. Provider settings intentionally use long canvases so detail remains legible in a conventional vertical settings hierarchy.
×\"\"/
`;\n}\n\nwriteFileSync(join(root, \"index.html\"), `${viewerHtml()}\\n`);\nconsole.log(`Generated ${orderedScreens.length * 2 + 1} consolidated SVGs and index.html`);\n","sourceCodeStart":366,"sourceCodeEnd":395,"githubUrl":"https://github.com/paperclipai/paperclip/blob/3f1d897a7c018d76563a21c6e39c3c9b03933622/doc/plans/chat-adapters/generate-wireframes-v3.mjs#L366-L395","documentation":"The v3 wireframe generator's `viewerHtml()` extracts the shared `` section — the function throws this fixed message instead of generating a styleless viewer.","triggerScenarios":"Running `node doc/plans/chat-adapters/generate-wireframes-v3.mjs` when `packages/skills-catalog/catalog/bundled/product/wireframe/assets/site-template.html` has no literal `