{"record":{"id":"ca4cdfa4b753d4ca","repo":"paperclipai/paperclip","slug":"could-not-read-viewer-styles-from-templatepath","errorCode":null,"errorMessage":"Could not read viewer styles from ${templatePath}","messagePattern":"Could not read viewer styles from (.+?)","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"doc/plans/chat-adapters/generate-wireframes-v2.mjs","lineNumber":294,"sourceCode":"function taskMobile(screen) {\n return baseSvg(375,812,`${mobileHeader(\"PAP-1842\")}${multiline(16,96,wrap(screen.title,32,2),20,\"#000\",24,'font-weight=\"700\"')}${tx(16,150,\"Created from Slack\",12,\"#666\")}${rc(16,174,343,96,'fill=\"#e6e6e6\"')}${tx(36,206,\"#customer-support · Refund\",14,\"#000\",'font-weight=\"700\"')}${tx(36,234,\"Assigned to Maya · Open Slack\",12,\"#666\")}${rc(16,286,343,104)}${tx(36,316,\"Ari S. · External · Linked\",12,\"#666\",'font-weight=\"600\"')}${tx(36,352,\"The refund step is timing out again.\",14,\"#000\")}${rc(16,406,343,120,'fill=\"#e6e6e6\"')}${tx(36,436,\"Maya · Agent\",12,\"#666\",'font-weight=\"600\"')}${multiline(36,470,[\"I found the failing retry boundary\", \"and prepared a patch.\"],14,\"#000\",22)}${tx(36,514,\"Delivered to Slack\",12,\"#666\")}${rc(16,542,343,168)}${tx(36,574,\"Internal note\",12,\"#666\")}${ln(36,598,339,598,'stroke=\"#666\"')}${tx(36,638,\"□ Send to channel\",14,\"#000\",'font-weight=\"600\"')}${button(207,650,132,\"Comment\",true)}${annotations([{x:8,y:166,w:359,h:112},{x:8,y:278,w:359,h:120},{x:8,y:398,w:359,h:136},{x:8,y:534,w:359,h:184}],true)}`);\n}\n\nfunction agentChannelsMobile(screen) {\n return baseSvg(375,812,`${mobileHeader(\"Maya\")}${tx(16,96,\"Channels\",20,\"#000\",'font-weight=\"700\"')}${tx(16,124,\"Every place people can reach Maya.\",12,\"#666\")}${rc(16,158,343,48)}${tx(32,188,\"Channels\",14,\"#000\",'font-weight=\"600\"')}${tx(335,188,\"⌄\",14,\"#666\",'text-anchor=\"end\"')}${button(16,222,343,\"Connect a channel\",true)}${[[\"Slack · @maya\",\"Acme · 2 channels · Healthy\"],[\"Telegram · @maya_helper_bot\",\"Support + DMs · Needs attention\"]].map((r,i)=>{const y=294+i*112;return `${rc(16,y,343,96,i===0?'fill=\"#e6e6e6\"':'fill=\"#fff\"')}${tx(36,y+32,r[0],14,\"#000\",'font-weight=\"700\"')}${tx(36,y+62,r[1],12,\"#666\")}${tx(335,y+48,\"›\",14,\"#000\",'text-anchor=\"end\"')}`;}).join(\"\\n\")}${tx(16,546,\"Recent channel tasks\",14,\"#000\",'font-weight=\"700\"')}${rc(16,566,343,120)}${tx(36,600,\"PAP-1842 · Refund workflow\",14,\"#000\",'font-weight=\"600\"')}${tx(335,600,\"Slack\",12,\"#666\",'text-anchor=\"end\"')}${ln(32,622,343,622,'stroke=\"#e6e6e6\"')}${tx(36,656,\"PAP-1839 · Customer question\",14,\"#000\",'font-weight=\"600\"')}${annotations([{x:8,y:150,w:359,h:64},{x:8,y:214,w:359,h:64},{x:8,y:286,w:359,h:224},{x:8,y:538,w:359,h:156}],true)}`);\n}\n\nfunction flowSvg() {\n const node = (x,y,w,title,sub,fill=false) => `${rc(x,y,w,88,fill?'fill=\"#e6e6e6\"':'fill=\"#fff\"')}${tx(x+16,y+32,title,14,\"#000\",'font-weight=\"700\"')}${tx(x+16,y+58,sub,12,\"#666\")}`;\n const arrow = (x1,y1,x2,y2,dashed=false) => `${ln(x1,y1,x2,y2,dashed?'stroke-dasharray=\"6 4\"':'')}`;\n return baseSvg(1280,800,`${tx(48,48,\"Chat connectors · simplified Paperclip product flow\",28,\"#000\",'font-weight=\"700\"')}${tx(48,76,\"The provider handoff completes setup; all policy editing happens later in the existing connector-detail shell.\",14,\"#666\")}${node(48,128,176,\"/apps\",\"Choose connector\",true)}${arrow(224,172,264,172)}${node(264,128,192,\"Purpose?\",\"Only when ambiguous\")}${arrow(456,172,496,172)}${node(496,128,184,\"Choose agent\",\"Exactly one\")}${arrow(680,172,720,172)}${node(720,128,184,\"Invite bot\",\"Provider handoff\")}${arrow(904,172,944,172)}${node(944,128,240,\"Connector overview\",\"Connected with defaults\",true)}${arrow(360,216,360,290,true)}${node(264,290,192,\"Existing tool flow\",\"Credential + access\")}${tx(48,258,\"CHAT PATH\",12,\"#666\",'font-weight=\"700\"')}${tx(264,274,\"TOOL BRANCH\",12,\"#666\",'font-weight=\"700\"')}${node(48,402,168,\"Channels\",\"Reach + threads\")}${node(232,402,168,\"Access\",\"People + authority\")}${node(416,402,168,\"Behavior\",\"Output + overlap\")}${node(600,402,184,\"Conversations\",\"Thread ↔ issue\",true)}${node(800,402,168,\"Activity\",\"Delivery ledger\")}${node(984,402,200,\"Agent · Channels\",\"Endpoint summary\")}${``}${arrow(692,490,692,558)}${node(600,558,184,\"Bound task\",\"Normal task UI\",true)}${arrow(784,602,896,602)}${node(896,558,224,\"Provider thread\",\"Safe publication\")}${node(48,650,168,\"Identity link\",\"From Access\")}${node(232,650,168,\"Relay drawer\",\"When private\")}${node(416,650,168,\"Detach/rebind\",\"From conversation\")}${arrow(416,694,592,626,true)}${annotations([{x:40,y:120,w:1152,h:184},{x:256,y:282,w:208,h:104},{x:40,y:394,w:1152,h:104},{x:40,y:542,w:1096,h:204}])}`);\n}\n\nfunction viewerHtml() {\n const templatePath = join(root, \"../../../packages/skills-catalog/catalog/bundled/product/wireframe/assets/site-template.html\");\n const template = readFileSync(templatePath, \"utf8\");\n const style = template.match(/
Chat adapters · v2
Jump to a screen
Paperclip · Connectors · Provider planning

Connect simply. Configure precisely.

Chat connectors live in the existing /apps catalog. The shared path asks for an agent and provider invite; detailed Slack, GitHub, Teams, and Telegram setup and behavior stay provider-specific.

Minimum chat pathConnectors → purpose only if ambiguous → agent → provider handoff → connected.
Architecture planShared UI specificationPlatform-specific specificationv1 requirements inventory
24 focused surfaces4 provider deep divesSetup + settings + interactionsDesktop + mobile

Review convention: red dashed marks and numbered circles are annotations only. They are not proposed Paperclip interface elements.

Navigation and product flow

Setup ends at the provider handoff

The tool branch returns to the existing tool-connection flow. The chat branch creates a default endpoint, then uses the ordinary connector-detail shell. Screens 13–24 detail the external setup, settings, and native interaction model for each launch provider.

flow.svg1280×800
\"Simplified

Annotations

  • 1 — Primary chat path from the existing catalog through provider invite.
  • 2 — Conditional tool-purpose branch into the existing setup flow.
  • 3 — Connector detail navigation and the agent-summary route.
  • 4 — Bound task, publication, identity, relay, and detach branches.
${sections}
Decisions and coverage

What this version resolves

  • One catalog: Connectors remains the only discovery, setup, and management entry point.
  • Minimal shared wizard: chat-only providers ask for agent and provider handoff; dual-purpose providers add one direction choice.
  • Real external handoffs: each provider setup separates Paperclip-owned fields from provider app registration, policy, consent, installation, and verification.
  • Provider-native task boundaries: Slack thread, GitHub object/review thread, Teams post/conversation, and Telegram active chat/topic behavior are explicit.
  • Least privilege: GitHub code/tool access, Teams RSC/Graph access, Slack optional rich scopes, and Telegram topic administration are never implied by basic chat setup.
  • Exact fallbacks: unsupported streaming, files, buttons, modals, ephemeral replies, history, or ambient visibility degrade to a named behavior.
  • Research pins: Paperclip b84964e5a2fa8b1e6498a1ccb471f6adba97d470; Vercel Chat SDK 51322dde8f4aafd8a7fc7a20cbfd7ae45cafaa5c; OpenTag 6a770d862349f8e996c23c145aef6d6275914a23.
Generated from Paperclip's bundled wireframe skill viewer template. Wires use black 1.5 strokes, white surfaces, grayscale placeholders, an 8px rhythm, and 12/14/20/28 type sizes. Red is reserved for review annotations.
×\"\"/
`;\n}\n\nfor (const screen of screens) {\n const desktop = screen.kind === \"catalog\" ? catalogDesktop(screen)\n : screen.kind === \"purpose\" ? purposeDesktop(screen)\n : screen.kind === \"agent\" ? chooseAgentDesktop(screen)\n : screen.kind === \"invite\" ? inviteDesktop(screen)\n : screen.kind === \"detail\" ? detailDesktop(screen)\n : screen.kind === \"task\" ? taskDesktop(screen)\n : agentChannelsDesktop(screen);\n const mobile = screen.kind === \"catalog\" ? catalogMobile(screen)","sourceCodeStart":276,"sourceCodeEnd":312,"githubUrl":"https://github.com/paperclipai/paperclip/blob/3f1d897a7c018d76563a21c6e39c3c9b03933622/doc/plans/chat-adapters/generate-wireframes-v2.mjs#L276-L312","documentation":"The v2 wireframe generator builds the HTML viewer by reading the shared site template and extracting its `` block with the regex `/