{"record":{"id":"64f9ef296f27e9d4","repo":"paperclipai/paperclip","slug":"could-not-load-wireframe-viewer-styles-generate-wireframes","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-v4.mjs","lineNumber":324,"sourceCode":"writeFileSync(join(out, \"flow.svg\"), `${flowSvg()}\\n`);\n\nconst groups = [\n [\"Start\", sharedScreens.filter((screen) => screen.group === \"Start\")],\n ...providers.map((provider) => [provider.name, providerScreens.filter((screen) => screen.provider === provider)]),\n [\"Paperclip\", sharedScreens.filter((screen) => screen.group === \"Paperclip\")]\n];\nconst orderedScreens = groups.flatMap(([, screens]) => screens);\n\nfunction uiDoc() {\n const inventory = orderedScreens.map((screen) => `| ${screen.id} | ${screen.group} | ${screen.title} | ${screen.desktopSize} | ${screen.mobileSize} |`).join(\"\\n\");\n const details = orderedScreens.map((screen) => `### ${screen.id} · ${screen.title}\\n\\nPurpose: ${screen.subtitle}\\n\\n${screen.annotations.map((item, index) => `${index + 1}. ${item}`).join(\"\\n\")}\\n\\nRationale: ${screen.rationale}`).join(\"\\n\\n\");\n return `# Paperclip Chat Adapters UI Surfaces — v4\\n\\nDate: 2026-09-04 \\nPaperclip base: \\`${baseSha}\\` \\nReview viewer: [\\`index.html\\`](./index.html) \\nWireframes: [\\`wireframes-v4/\\`](./wireframes-v4/)\\n\\n## Product rules represented\\n\\n- \\`/apps\\` remains the Connectors catalog. A purpose choice appears only for platforms such as GitHub that can be both a chat medium and an agent tool.\\n- Chat setup asks for the agent first, then performs a provider-owned installation handoff with reasonable defaults.\\n- Each provider endpoint has the complete existing-style detail shell: Overview, Settings, Access, Conversations, and Activity.\\n- Setup and settings use ordinary top-to-bottom sections. Desktop canvases grow to fit their content; the pages are not compressed into an 800px dashboard or bento grid.\\n- Provider capabilities are implementation guarantees, not endpoint preferences. Paperclip automatically uses the maximum safe set available to that adapter, provider installation, conversation type, and current Paperclip permission check.\\n- Settings therefore contain only genuine choices: scope, task boundaries, delivery/deployment, credentials, and explicit provider permission grants. Reactions, streaming, rich messages/cards, actions, modals, commands, files, edits, and private fallbacks are never shown as on/off settings.\\n- Overview reports the capability set as **Available automatically**. Conversation walkthroughs demonstrate it in the provider's native medium.\\n- Red dashed marks and numbers are review annotations, not proposed UI.\\n\\n## Complete tab coverage\\n\\nEvery provider group contains Setup, Overview, Settings, Access, Conversations, Activity, and a behavior walkthrough. The five tab names shown in the endpoint sidebar each have a provider-specific desktop and mobile wireframe. Shared generic Overview/Access/Conversations/Activity mockups are removed from the current viewer so they cannot be mistaken for the provider-specific designs.\\n\\n## Inventory\\n\\n| ID | Group | Surface | Desktop | Mobile |\\n|---|---|---|---|---|\\n${inventory}\\n\\n## Annotation notes\\n\\n${details}\\n\\n## Verification intent\\n\\n- Desktop SVGs use 1280px width and whatever height their ordinary vertical content requires.\\n- Mobile SVGs use 375px width, minimum 48px controls, and enough height to avoid clipping.\\n- The house palette remains white, black, \\`#e6e6e6\\`, \\`#666\\`, and annotation-only \\`#d33\\`, with 1.5px black strokes and 12/14/20/28px type.\\n- Secrets appear only as masked references. No provider feature toggle can disable a safe supported capability.\\n`;\n}\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 · v4
Jump to a screen
Paperclip · Connectors · Complete v4

Every provider. Every endpoint tab.

Slack, GitHub, Microsoft Teams, and Telegram each have a conventional vertical setup plus provider-specific Overview, Settings, Access, Conversations, and Activity pages. Capabilities are automatic implementation behavior, not switches.

Maximum safe capability is the invariantPaperclip always uses every safe feature supported by the adapter, provider installation, current conversation type, and current Paperclip permission check. Settings contain only genuine operator choices.
Architecture planUI specification v4Platform-specific research
33 product surfaces5 tabs × 4 providersTall vertical pagesDesktop + mobile

Review convention: red dashed marks are annotations, not proposed UI. Feature lists on Overview are informational; they are not settings.

Navigation and product flow

Shared start, provider setup, complete detail shell

Every activated endpoint lands in the same five-tab shell. The content is provider-specific because installation, identity, native thread boundaries, and diagnostics differ.

flow.svg1280×980
\"Complete
${sections}
Review

What changed in v4

  • No bento setup pages: screens 13, 16, 19, and 22 are now long, conventional, top-to-bottom installation flows.
  • No feature toggles: reactions, streaming, rich content, actions, modals, commands, files, edits, and private fallbacks are automatic whenever safely available.
  • Complete endpoint shells: every provider has an Overview, Settings, Access, Conversations, and Activity wireframe for desktop and mobile.
  • Provider specificity: installation, identity keys, task boundaries, permission grants, activity ledgers, and fallbacks reflect the actual platform.
  • Stable original anchors: IDs 13–24 still refer to the same provider setup/settings/walkthrough topics; new tabs use IDs 25–40.
  • Paperclip base: ${baseSha}, matching origin/master when generated.
Generated with Paperclip’s wireframe contract. Page height follows content; no provider setup or settings page is forced into an 800px dashboard.
×\"\"/
`;\n}\n\nwriteFileSync(join(root, \"2026-09-04-chat-adapters-ui-surfaces-v4.md\"), `${uiDoc()}\\n`);\nwriteFileSync(join(root, \"index.html\"), `${viewerHtml()}\\n`);\nconsole.log(`Generated ${orderedScreens.length * 2 + 1} v4 SVGs, UI specification, and index.html`);\n","sourceCodeStart":306,"sourceCodeEnd":336,"githubUrl":"https://github.com/paperclipai/paperclip/blob/3f1d897a7c018d76563a21c6e39c3c9b03933622/doc/plans/chat-adapters/generate-wireframes-v4.mjs#L306-L336","documentation":"Same contract as v3: the v4 generator's `viewerHtml()` regex-extracts the inline `` block; restore it if a refactor removed it unintentionally.","Widen the regex to `/]*>[\\s\\S]*?<\\/style>/` for attributed tags.","Point the generator at the new CSS source if styles were deliberately extracted.","Run the generator again to confirm the viewer builds."],"exampleFix":"// before\nconst style = template.match(/