{"record":{"id":"15fa11d425d944e1","repo":"paperclipai/paperclip","slug":"could-not-load-wireframe-viewer-styles-15fa11","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-v5.mjs","lineNumber":341,"sourceCode":" [\"Start\", sharedScreens.filter((screen) => screen.group === \"Start\")],\n ...providers.map((provider) => [provider.name, [\n ...setupScreens.filter((screen) => screen.provider === provider.name),\n ...detailScreens.filter((screen) => screen.provider === provider.name)\n ]]),\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.tab} | ${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\\n${screen.actions ? `Actions:\\n\\n${screen.actions.map(([label, behind]) => `- **${label}:** ${behind}`).join(\"\\n\")}\\n\\n` : \"\"}Rationale: ${screen.rationale}`).join(\"\\n\\n\");\n return `# Paperclip Chat Adapters UI Surfaces — v5\\n\\nDate: 2026-09-04 \\nPaperclip base: \\`${baseSha}\\` \\nReview viewer: [\\`index.html\\`](./index.html) \\nWireframes: [\\`wireframes-v5/\\`](./wireframes-v5/) \\nSetup audit: [\\`2026-09-04-chat-adapters-setup-audit-v5.md\\`](./2026-09-04-chat-adapters-setup-audit-v5.md)\\n\\n## What changed\\n\\n- The purpose choice now says **Use this connection as an agent tool** and applies to every provider that exposes both chat and tool connection surfaces.\\n- Agent selection is one-way. Setup shows the chosen agent as **Locked**; connecting another agent means creating another connection.\\n- Every provider setup is a persistent step-rail wizard. Each SVG represents one real phase, including the advanced custom/existing-app branches.\\n- Normal setup never asks for direct webhook, relay, Socket Mode, or polling. Paperclip chooses delivery from the instance deployment and reports it after the fact.\\n- Authenticated provider handoffs keep credentials invisible. Only customer-owned flows expose irreducible secrets: two for a custom Slack app, an App ID/private key/webhook secret for an existing GitHub App, Microsoft bot identity values for Teams, and the BotFather token for Telegram.\\n- Every button is documented below with the state change or external handoff behind it.\\n- Provider detail tabs and maximal-safe capability behavior from v4 remain unchanged.\\n- Red dashed marks and numbers are review annotations, not proposed UI.\\n\\n## Inventory\\n\\n| ID | Group | Surface | Title | Desktop | Mobile |\\n|---|---|---|---|---|---|\\n${inventory}\\n\\n## Annotation and action notes\\n\\n${details}\\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 · v5
Jump to a screen
Paperclip · Connectors · Setup v5

One decision per step. Everything else automatic.

Provider setup is now a persistent step-rail wizard. It shows the immutable agent, sends provider-owned approvals to the provider, hides credentials when an authenticated handoff can return them, and documents the exact effect behind every action.

Setup is not infrastructure configurationPaperclip chooses delivery and maximal safe capabilities. Users see only actions the provider requires them to perform.
Architecture planRow-by-row setup auditUI specification v5
45 product surfaces16 setup phasesEvery action explainedDesktop + mobile

Review convention: red dashed marks are annotations, not proposed UI. The step-rail layout is informed by the supplied reference image; none of its text or functionality is copied.

Navigation and product flow

Minimal default paths with honest advanced branches

Agent selection happens once. Provider setup contains one focused phase at a time; transport mechanics are selected by the deployment.

flow.svg1280×1040
\"Chat
${sections}
Review

What changed in v5

  • Generic purpose copy: “Use this connection as an agent tool” applies to every dual-purpose connector.
  • Immutable agent: no setup screen offers Change agent; another agent means another connection.
  • Stepped setup: Slack has two default phases plus a three-phase custom-app branch; GitHub has three default phases plus an existing-App branch; Teams has four phases; Telegram has three.
  • Automatic delivery: webhook, relay, Socket Mode, and polling are not endpoint-wizard choices.
  • Credential minimization: secrets appear only where a provider cannot return or provision them for Paperclip.
  • Complete review: all prior provider endpoint tabs and conversation walkthroughs remain in the same grouped viewer.
  • Paperclip base: ${baseSha}, matching origin/master when generated.
Generated with Paperclip’s wireframe contract. Setup canvases grow with their focused phase; no wizard is forced into an 800px dashboard.
×\"\"/
`;\n}\n\nwriteFileSync(\n join(root, \"2026-09-04-chat-adapters-ui-surfaces-v5.md\"),\n `${uiDoc().replace(\n \"Provider detail tabs and maximal-safe capability behavior from v4 remain unchanged.\",\n \"Provider detail tabs remain complete. Capability inventories live on Overview and the native walkthroughs; feature toggles are absent from Settings.\"\n )}\\n`\n);\nwriteFileSync(join(root, \"index.html\"), `${viewerHtml()}\\n`);\nconsole.log(`Generated ${orderedScreens.length * 2 + 1} v5 SVGs, UI specification, and index.html`);","sourceCodeStart":323,"sourceCodeEnd":359,"githubUrl":"https://github.com/paperclipai/paperclip/blob/3f1d897a7c018d76563a21c6e39c3c9b03933622/doc/plans/chat-adapters/generate-wireframes-v5.mjs#L323-L359","documentation":"The v5 generator's `viewerHtml()` throws this when the shared site template, though readable, yields no ``.","solutions":["Inspect the template for the inline style block and restore it if accidentally removed.","Broaden the match to `/]*>[\\s\\S]*?<\\/style>/` if the tag carries attributes.","If styles moved to CSS, read that file in the generator and inline it into the viewer head.","Re-run the generator."],"exampleFix":"// before\nconst style = template.match(/