C
Storybook
T2ShippedExtension template

Extension Side Panel

Full Chrome side panel shell: header with platform badge, **Generate / Agent / Library** tabs, and tab bodies composed from shared templates.

Implementation: charply-extension/src/sidepanel/SidePanelApp.tsx`, `charply-extension/src/components/ReplyAssistant.tsx

Package: @charply/design/templates

Live preview

Rendered from @charply/design/templates — same components used in Storybook and intended for the extension.

CCharplylinkedin

Context ready

Post detected on LinkedIn feed

Professional
Medium

Guidelines

docs/design/templates/extension-sidepanel.md

Do

  • ✓Tabs: Generate, Agent, Library (+ Trends when enabled).
  • ✓Resolve platform from active tab URL (Twitter/X vs LinkedIn).
  • ✓Header shows platform badge and settings entry points.

Don't

  • ✗Do not block side panel on auth for read-only views without explaining why.
  • ✗Do not mix popup-only layout classes inside the side panel.

Interactive variant in Storybook → Templates.