SideButton Marketing Website Knowledge Pack Files

What This Is

The integrations marketplace — a catalog of all platform integrations with their automation workflows. Shows: skill packs promo banner (install command), categories quick links (color-coded pills), and a 4-column "All Platforms" grid sorted by workflow count. Each platform card shows logo, name, and workflow count. Links to platform detail pages, categories index, and publishers index. Includes bottom CTA. Sub-pages include platform detail (with tier filter + per-platform category links), workflow detail (with install lifecycle, how-it-works steps, workflow sequence chain, solutions cross-link), categories index/detail, and publishers index/detail.

URL Patterns

Pattern	Description
/integrations	Marketplace index — all platforms grid
/integrations/{platform}	Platform detail — workflows for one platform
/integrations/{platform}/page/{page}	Paginated platform workflows
/integrations/{platform}/{workflow}	Single workflow detail via platform path
/integrations/categories	Categories index — all 11 categories
/integrations/categories/{category}	Category detail — workflows in category
/integrations/categories/{category}/page/{page}	Paginated category workflows
/integrations/categories/{category}/{workflow}	Workflow detail via category path
/integrations/publishers	Publishers index
/integrations/publishers/{id}	Publisher profile + workflows
/integrations/publishers/{id}/page/{page}	Paginated publisher workflows

Page Structure

Integrations Index (/integrations)

+--[Header]-----------------------------------------------------+
|                                                                |
|  [Hero: "Integrations" + stats + Browse by Category / View Publishers buttons] |
|                                                                |
|  [Skill Packs Banner]                                          |
|  Left: "SKILL PACKS" badge + heading + description +           |
|  Learn more / CLI Reference links                              |
|  Right: terminal widget with install command                   |
|                                                                |
|  [Browse by Category — pill links]                             |
|  Sales · Recruiting · Customer Support · Operations ·          |
|  Marketing · Finance · Research · HR & People ·                |
|  DevOps · AI Tools · Personal                                  |
|                                                                |
|  [All Platforms — 4-column grid, sorted by workflow count]     |
|  Each card: logo + name + "N workflows"                        |
|  47 platforms total (10 with workflows, 37 with 0)             |
|                                                                |
|  [CTA: "Ready to Automate?" + Get Started Free / Read the Docs] |
+--[Footer]-----------------------------------------------------+

Platform Detail (/integrations/{platform})

+--[Header]-----------------------------------------------------+
|  [Breadcrumb: Integrations > {Platform}]                       |
|                                                                |
|  [Hero: Platform logo + "{Platform} Integration" +             |
|   workflow count + description + external site link]           |
|                                                                |
|  [Skill Pack Banner — contextual]                              |
|  "Want full {Platform} automation?"                            |
|  Learn about Skill Packs link                                  |
|                                                                |
|  [Browse by Category — per-platform category links]            |
|  Only shows categories that have workflows for this platform   |
|  Each link: "{Category} {N}" → /integrations/categories/{cat}  |
|  (Section absent if platform has 0 workflows)                  |
|                                                                |
|  [Workflow List: "All {Platform} Workflows"]                   |
|  [Tier Filter Tabs: All (N) | Free (N) | Pro (N)]             |
|  Each workflow row: title + tier badge + description +         |
|  category tag, links to workflow detail                        |
|                                                                |
|  [Other Integrations — 6 related platform cards]               |
|                                                                |
|  [CTA: "Ready to Automate {Platform}?"]                        |
+--[Footer]-----------------------------------------------------+

Workflow Detail (/integrations/{platform}/{workflow})

+--[Header]-----------------------------------------------------+
|  [Breadcrumb: Integrations > {Platform} > {Workflow}]          |
|                                                                |
|  [Solutions Cross-Link — conditional]                          |
|  "Part of {Category} with SideButton AI — {workflow name}"    |
|  Links to /solutions/{role}/{job-slug}                         |
|  (Only if workflow maps to a solutions role+job)               |
|                                                                |
|  [Hero: Platform logo + workflow title + description +         |
|   tier badge + run stats + platform tag + category tag +       |
|   type badge (Task) + Install button + View Documentation]    |
|                                                                |
|  [Benefits — 3 bullet points]                                  |
|                                                                |
|  [Published by — publisher card with logo + link]              |
|                                                                |
|  [How It Works — numbered steps with icons]                    |
|  3-step visual: icon + number + title + description            |
|  Shows workflow execution flow (Extract → AI → Output, etc.)   |
|                                                                |
|  [Use Cases — persona card with role + scenario + value]       |
|                                                                |
|  [Workflow Sequence — chain visualization]                     |
|  "Current" badge + this workflow + "Then Run" + next workflow  |
|  Only shows if workflow has nextSteps in relations              |
|                                                                |
|  [More {Platform} Workflows — up to 4 cards + "View all" link] |
|                                                                |
|  [Automation Capabilities — step type list with counts]        |
|  Step cards: Navigate, Wait, Extract, Click, Stop, etc.        |
|  Category pills: Browser | AI/LLM | Control Flow | Data | Shell |
|                                                                |
|  [Related Workflows — 3 cards]                                 |
+--[Footer]-----------------------------------------------------+

Categories Index (/integrations/categories)

+--[Header]-----------------------------------------------------+
|  [Breadcrumb: Integrations > Categories]                       |
|                                                                |
|  [Hero: "Categories" + stats]                                  |
|  "Browse 41 workflows across 11 categories."                   |
|                                                                |
|  [Category cards — sorted by workflow count]                   |
|  Each card: emoji + name + workflow count + description        |
|  11 categories including those with 0 workflows                |
|                                                                |
|  [Back link: "← Back to all integrations"]                     |
+--[Footer]-----------------------------------------------------+

Category Detail (/integrations/categories/{category})

+--[Header]-----------------------------------------------------+
|  [Breadcrumb: Integrations > Categories > {Category}]          |
|                                                                |
|  [Hero: emoji + "{Category}" + workflow count + description]   |
|                                                                |
|  [Solutions Cross-Link — conditional]                          |
|  "See {Category} with SideButton AI" → /solutions/{role}       |
|  With subtitle "Automatable jobs, use cases, and more"         |
|  (Only if category slug maps to a solutions role)              |
|                                                                |
|  [Available Platforms — cards with logo + name + count]        |
|  Only platforms that have workflows in this category            |
|                                                                |
|  [Workflow List: "All {Category} Workflows"]                   |
|  [Tier Filter Tabs: All (N) | Free (N) | Pro (N)]             |
|  Each row: workflow title + tier badge + description +          |
|  platform icon + category tag                                  |
|                                                                |
|  [Other Categories — pill links to sibling categories]         |
+--[Footer]-----------------------------------------------------+

Publishers Index (/integrations/publishers)

+--[Header]-----------------------------------------------------+
|  [Breadcrumb: Integrations > Publishers]                       |
|                                                                |
|  [Hero: "Publishers"]                                          |
|                                                                |
|  [Publisher cards — logo + name + heading]                     |
|  Currently: SideButton, AICTPO                                 |
|                                                                |
|  [Back link: "← Back to all integrations"]                     |
+--[Footer]-----------------------------------------------------+

Publisher Detail (/integrations/publishers/{id})

+--[Header]-----------------------------------------------------+
|  [Breadcrumb: Integrations > Publishers > {Publisher}]          |
|                                                                |
|  [Hero: publisher logo + name + workflow count + description]  |
|                                                                |
|  [Workflow List: "Workflows by {Publisher}"]                   |
|  Each row: workflow title + description + platform icon +      |
|  category tag, links to workflow detail                        |
|  (No tier filter on publisher page — all workflows listed flat) |
|  Workflows span multiple platforms (unlike platform page)      |
+--[Footer]-----------------------------------------------------+

Key Elements

Integrations Index

Element	Selector	Notes
Page heading	heading "Integrations"	In hero region
Stats text	text "47 platforms, 41 workflows"	Below heading
Browse by Category button	link "Browse by Category"	In hero, → /integrations/categories
View Publishers button	link "View Publishers"	In hero, → /integrations/publishers
Skill Packs heading	heading "Complete platform automation in one install"	In banner region
Learn more link	link "Learn more"	→ docs.sidebutton.com/skill-packs/overview
CLI Reference link	link "CLI Reference"	→ docs.sidebutton.com/skill-packs/cli
Browse by Category heading	heading "Browse by Category"	Section heading
Category pills	link elements in Browse by Category region	11 links, text not labeled in accessibility tree — use content text
All Platforms heading	heading "All Platforms"	Section heading
Platform cards	link with img "{Platform} logo" in All Platforms region	47 cards; Terminal, Workday, Wave have NO img (letter initial fallback)
Get Started Free	link "Get Started Free"	Bottom CTA, → docs.sidebutton.com/installation
Read the Docs	link "Read the Docs"	Bottom CTA, → docs.sidebutton.com

Platform Detail

Element	Selector	Notes
Breadcrumb	navigation > list	Integrations > {Platform}; last item is plain text
Platform logo	img "{Platform} logo"	In hero; absent for platforms using letter initial (Terminal, Workday, Wave)
Page heading	heading "{Platform} Integration"	Always present even if 0 workflows
Workflow count	text "{N} workflows available"	Below heading
External site link	link "{platform}.com"	Links to platform's website
Skill Pack promo	link "Learn about Skill Packs"	Contextual banner, always present
Browse by Category heading	heading "Browse by Category"	Only present if platform has workflows; shows relevant categories
Category links	link in Browse by Category region	Each shows "{Category} {N}"
Workflow list heading	heading "All {Platform} Workflows"	Always present even if 0 workflows
Tier filter: All	button "All"	Shows all workflows; always present even with 0 workflows
Tier filter: Free	button "Free"	Filters to free workflows
Tier filter: Pro	button "Pro"	Filters to pro workflows
Workflow cards	link containing heading in workflow list region	Each links to workflow detail
Other Integrations heading	heading "Other Integrations"	6 related platform cards
Other Integrations cards	link with img "{Platform} logo" in Other Integrations region	Static selection
CTA heading	heading "Ready to Automate {Platform}?"	Dynamic platform name

Workflow Detail (via platform: /integrations/{platform}/{workflow})

Element	Selector	Notes
Breadcrumb	navigation > list	Integrations > {Platform} > {Workflow}; link "Integrations" + link "{Platform}" + plain text
Solutions cross-link	link "Part of {Category} with SideButton AI — {workflow name}"	Conditional; only if getJobForWorkflow(slug) finds a match
Platform logo	img "{Platform} logo"	In hero
Workflow title heading	heading "{Workflow Name}"	Main heading
Tier badge	TierBadge component	"Free" (emerald) or "Pro" (purple) pill
Health badge	WorkflowHealthBadge component	SSR-rendered then client-hydrated from /api/runs/{slug}; shows dot + label + stats
Run stats	text "No run data" or "{N} runs"	Inside WorkflowHealthBadge
Platform tag	link "{Platform}"	→ platform detail
Category tag	link "{Category}"	→ category detail
Type badge	text "Task" / "Process" / etc.	Level label from getLevelInfo()
Install button (via TierCTA)	TierCTA component	Free tier → InstallButton (4 states); Paid tier → "Upgrade to Pro" link to /pricing
View Documentation	link "View Documentation"	→ docs.sidebutton.com
Hero media	WorkflowHeroMedia component	Optional hero image/video panel
Benefits heading	heading "Benefits"	3 bullet points in list
Rich description	WorkflowRichDescription component	Markdown-like rich content block
Publisher card	PublisherCard (compact variant)	link with img "{Publisher}" → /integrations/publishers/{id}; shows verified badge + type label
How It Works heading	heading "How It Works"	WorkflowStepsVisual component, numbered steps with icons
Step headings	heading "{Step Title}"	Under How It Works (e.g., "Extract Profile", "AI Analysis")
Use Cases heading	heading "Use Cases"	Persona card with role, scenario, outcome
Workflow Sequence heading	heading "Workflow Sequence"	WorkflowSequence component; Prerequisites → Current → Next Steps horizontal flow; only if relations exist
Next workflow link	link in Workflow Sequence region	"Then Run" next workflow
FAQ section	WorkflowFAQ component	Expandable FAQ accordion; conditional on workflow having FAQ data
Run chart	WorkflowRunChart component	display:none at SSR; revealed client-side if /api/runs/{slug} returns data; uPlot loaded from CDN
More workflows heading	heading "More {Platform} Workflows"	Up to 4 cards
View all link	link "View all {Platform} workflows →"	→ platform detail
Automation Capabilities heading	heading "Automation Capabilities"	Step types with doc links, color-coded by category (browser=blue, llm=emerald, control=purple, data=orange, shell=slate)
Step type links	link in Automation Capabilities region	Each links to docs.sidebutton.com/workflows/steps#{type}; 22 step types defined
Related Workflows heading	heading "Related Workflows"	3 cards; uses explicit relations.relatedWorkflows first, fills remainder from same category

Workflow Detail (via category: /integrations/categories/{category}/{workflow})

Same layout as platform workflow detail above, except:

Difference	Notes
Breadcrumb	Integrations > Categories > {Category} > {Workflow}
Install button	Uses InstallButton directly (NOT TierCTA) — always shows install button regardless of tier
No TierCTA gating	Paid workflows still show install option, not "Upgrade to Pro"

Categories Index

Element	Selector	Notes
Breadcrumb	navigation > list	Integrations > Categories; last item is plain text
Page heading	heading "Categories"	In hero region
Stats text	text "Browse 41 workflows across 11 categories."	Below heading
Category cards	link containing heading "{Category}"	11 cards: emoji + name + count + description; includes 0-workflow categories
Back link	link "← Back to all integrations"	→ /integrations

Category Detail

Element	Selector	Notes
Breadcrumb	navigation > list	Integrations > Categories > {Category}; link "Integrations" + link "Categories" + plain text
Category emoji	text emoji	Before heading
Page heading	heading "{Category}"	In hero region
Workflow count	text "{N} workflows available"	Below heading
Solutions cross-link	link in cross-link region	"See {Category} with SideButton AI" + subtitle; conditional
Available Platforms heading	heading "Available Platforms"	Only platforms with workflows in this category
Platform cards	link with img "{Platform}" in Available Platforms region	Logo + name + count
Tier filter: All	button "All"	Shows all category workflows
Tier filter: Free	button "Free"	Filters to free
Tier filter: Pro	button "Pro"	Filters to pro
Workflow cards	link containing heading + img "{Platform}"	Each shows platform icon within card
Other Categories heading	heading "Other Categories"	Sibling categories
Other Categories links	link in Other Categories region	Pill-style links to sibling categories

Publishers Index

Element	Selector	Notes
Breadcrumb	navigation > list	Integrations > Publishers; last item is plain text
Page heading	heading "Publishers"	In hero region
Publisher cards	link with img "{Publisher}" + heading "{Publisher}"	Logo + name; currently SideButton + AICTPO
Back link	link "← Back to all integrations"	→ /integrations

Publisher Detail

Element	Selector	Notes
Breadcrumb	navigation > list	Integrations > Publishers > {Publisher}; link "Integrations" + link "Publishers" + plain text
Publisher logo	img "{Publisher}"	In hero
Page heading	heading "{Publisher}"	Publisher display name
Workflow count	text "{N} workflows"	Below heading
Description	paragraph	Publisher description text
Workflow list heading	heading "Workflows by {Publisher}"	Section heading
Workflow cards	link containing heading "{Workflow}" + img "{Platform}"	Each shows platform icon; spans multiple platforms

Data Model

Platform

Field	Type	Required	Values	Default
id	string	Yes	Unique platform identifier (e.g., "linkedin")	—
name	string	Yes	Display name (e.g., "LinkedIn")	—
slug	string	Yes	URL-safe ID, matches id	—
description	string	Yes	One-line platform description	—
logoUrl	string	Yes	SVG/PNG path or external CDN URL	Letter initial fallback when absent/broken
color	string	Yes	Hex color code (e.g., "#0A66C2")	—
website	string	Yes	Platform's external website URL	—
category	string	Yes	Primary category id reference	—
featured	boolean	No	Show in featured sections	false
navFeatured	boolean	No	Show in header navigation dropdown	false
setupTime	string	No	Human-readable setup duration (e.g., "30 seconds", "1 minute")	—
setupSteps	string[]	No	Ordered setup instructions (shown on platform detail)	—
configFile	string	No	Config filename (e.g., "claude_desktop_config.json")	—
configCode	string	No	JSON config snippet for MCP setup	—
embedSupported	boolean	No	Whether platform supports embed buttons	false

Workflow

Field	Type	Required	Values	Default
id	string	Yes	Unique workflow identifier (e.g., "linkedin-validate-application")	—
slug	string	Yes	URL-safe ID	—
title	string	Yes	Display title (e.g., "LinkedIn: Validate Single Application")	—
version	string	Yes	Semver version (e.g., "1.0.0")	—
sourceWorkflow	string	Yes	Source YAML workflow ID	—
tier	enum	Yes	free, paid	free
comingSoon	boolean	No	Workflow not yet available	false
structural.publisher	string	Yes	Publisher id reference	—
structural.category	string	Yes	Category id reference	—
structural.platform	string	Yes	Platform id reference or "multi" for cross-platform	—
structural.level	enum	Yes	primitive, task, process, workflow, pipeline	—
structural.capabilities	string[]	Yes	Feature flags (e.g., ["ai-powered", "embed-button"])	[]
structural.allowedDomains	string[]	Yes	Domain patterns (e.g., ["*.linkedin.com"])	[]
structural.steps	string[]	Yes	Step type IDs used (e.g., ["browser.wait", "llm.generate"])	[]
structural.params	string[]	Yes	Input parameter names	[]
structural.requirements	string[]	Yes	Human-readable prerequisites	[]
structural.target	enum	Yes	browser, api	browser
marketing.tagline	string	Yes	One-line description	—
marketing.description	string	Yes	Extended description paragraph	—
marketing.benefits	string[]	Yes	3 benefit bullet points	[]
marketing.useCases	object[]	Yes	[{ persona, scenario, outcome }]	[]
marketing.workflowSteps	object[]	No	[{ step, title, description, icon }] for "How It Works"	[]
seo.targetKeyword	string	Yes	Primary SEO keyword	—
seo.secondaryKeywords	string[]	Yes	Secondary keywords	[]
seo.metaTitle	string	Yes	HTML <title> value	—
seo.metaDescription	string	Yes	Meta description	—
relations.relatedWorkflows	string[]	No	Related workflow id references	[]
relations.prerequisites	string[]	No	Prerequisite workflow id references	[]
relations.nextSteps	string[]	No	Next workflow id references (for Workflow Sequence section)	[]
yamlContent	string	No	Full YAML workflow definition (base64-encoded for install button)	—

Category

Field	Type	Required	Values	Default
id	string	Yes	Unique category identifier (e.g., "recruiting")	—
name	string	Yes	Display name (e.g., "Recruiting")	—
slug	string	Yes	URL-safe ID, matches id	—
description	string	Yes	Category tagline	—
icon	string	Yes	Icon name (e.g., "chart-line", "users", "code")	—
color	string	Yes	Hex color code for pills/badges (e.g., "#8B5CF6")	—
keywords	string[]	Yes	SEO keywords array	[]

Publisher

Field	Type	Required	Values	Default
id	string	Yes	Unique publisher identifier (e.g., "sidebutton")	—
name	string	Yes	Internal name	—
displayName	string	Yes	Display name (shown in UI)	—
tagline	string	Yes	Short tagline	—
description	string	Yes	Full description paragraph	—
avatar	string	Yes	Avatar image path (used in workflow cards)	—
logo	string	Yes	Logo image path (used in publisher hero)	—
banner	string	No	Banner image path	"" (empty = no banner)
website	string	Yes	Publisher website URL	—
github	string	No	GitHub repo URL	""
type	enum	Yes	official, partner, community	—
verified	boolean	Yes	Verified publisher badge	false
featured	boolean	Yes	Featured publisher	false
theme.primary	string	Yes	Primary brand color hex	—
theme.gradient	string	Yes	Tailwind gradient classes	—
categories	string[]	Yes	Category id references this publisher covers	[]
platforms	string[]	Yes	Platform id references this publisher covers	[]

Pagination

Field	Value	Notes
Items per page	24	ITEMS_PER_PAGE constant in lib/pagination.ts
Max pages (SSG)	10	Static path generation capped at 10 pages
Visible page numbers	7	Smart ellipsis window; mobile shows "n / total" instead
Page 1 URL	/{basePath}	No /page/1 suffix
Page 2+ URL	/{basePath}/page/{n}	Full page navigation (SSR)

Public API Endpoints

Method	Path	Description
GET	/api/runs/{slug}	Run history + health for a workflow; 60s public cache; powers WorkflowRunChart and WorkflowHealthBadge
POST	/api/runs/report	Ingests run telemetry from extension; recomputes health score
GET	/api/browse	Full-text search + filter; params: category, platform, publisher, level, capability, q, page, sort, order
GET	/api/home	Homepage data (stats, categories, featured, recent, top platforms)
GET	/api/c/{slug}	Category page data
GET	/api/p/{slug}	Platform page data
GET	/api/pub/{id}	Publisher page data
GET	/api/w/{slug}	Single workflow data
GET	/api/workflows/{id}.json	Single workflow JSON (for extension consumption)

WorkflowHealthBadge Thresholds (marketplace)

Score Range	Label	Dot Color
>= 0.9	Healthy	Green
>= 0.6	Degraded	Yellow
< 0.6	Issues	Red
0 runs	No run data	Grey

Note: These thresholds differ from the portal WorkflowTable health badges (which use >=0.9/0.7/0.5/0 → Healthy/Good/Fair/Poor/No data).

Key Components

Component	File	Purpose
TierCTA	components/TierCTA.astro	Gates between InstallButton (free tier) and "Upgrade to Pro" pricing link (paid tier); used on platform workflow detail
InstallButton	components/InstallButton.astro	4-state install lifecycle; extension relay via postMessage; 30s cache; YAML as base64 in data-yaml attribute
TierFilter	components/TierFilter.astro	Client-side DOM filter on data-tier attribute; only on page 1 (not paginated pages 2+)
TierBadge	components/ui/TierBadge.astro	Pill badge: Free (emerald) / Pro (purple); sm/md size variants
WorkflowHealthBadge	components/ui/WorkflowHealthBadge.astro	SSR-rendered then client-hydrated from /api/runs/{slug}; dot + label + stats
WorkflowRunChart	components/WorkflowRunChart.astro	display:none at SSR; loads uPlot 1.6.31 from CDN lazily; success=green/failure=red points; tooltip shows run ID, status, duration, step count
WorkflowGrid	components/WorkflowGrid.astro	Card grid with data-tier for TierFilter compat; publisher avatar link, platform/category badge links, comingSoon tag
WorkflowSequence	components/WorkflowSequence.astro	Prerequisites → Current → Next Steps horizontal flow
WorkflowStepsVisual	components/WorkflowStepsVisual.astro	"How It Works" numbered steps with icons
WorkflowRichDescription	components/WorkflowRichDescription.astro	Markdown-like rich content block
WorkflowHeroMedia	components/WorkflowHeroMedia.astro	Hero image/video panel
WorkflowFAQ	components/WorkflowFAQ.astro	Expandable FAQ accordion
PublisherCard	components/PublisherCard.astro	default (full) and compact variants; verified badge; type label (Official/Partner/Community)
Pagination	components/Pagination.astro	Smart ellipsis, 7-page window, mobile "n/total" format

States

Integrations Index

State	Trigger	Visual Indicator
Default	Page load	All 47 platform cards in 4-column grid (md:grid-cols-2 lg:grid-cols-4), sorted by workflow count descending
Cookie Notice	First visit	dialog "Cookie Notice" overlay at bottom with button "Accept" / button "Reject"
Responsive — mobile	Viewport < 768px	Grid collapses to 1 column; hero buttons stack vertically; category pills wrap
Responsive — tablet	768px-1023px	Grid becomes 2 columns (md:grid-cols-2)
Responsive — desktop	1024px+	Full 4-column grid (lg:grid-cols-4)

Platform Detail

State	Trigger	Visual Indicator
Default (All)	Page load	"All" tab active (dark bg), all workflows listed
Filtered — Free	Click button "Free"	"Free" tab active, only Free-tier workflows shown
Filtered — Pro	Click button "Pro"	"Pro" tab active, only Pro-tier workflows shown
Filtered — Empty	Click tab with 0 count (e.g., Pro=0)	Active tab shown, workflow list empty — no "No workflows found" message
Empty Platform (0 workflows)	Platform has 0 workflows	No platform logo img (if letter-initial platform); no description text; no "Browse by Category" section; tier filter buttons present but empty list; "Other Integrations" and CTA still visible
Has Pagination	Platform has >20 workflows	Pagination links at bottom: page/2, page/3, etc.
Has Browse by Category	Platform has workflows with categories	"Browse by Category" section shows relevant category links with counts
No Browse by Category	Platform has 0 workflows	Section absent entirely

Workflow Detail

State	Trigger	Visual Indicator
Has Solutions Link	Workflow maps to a solutions role+job via getJobForWorkflow()	Top cross-link: "Part of {Category} with SideButton AI — {workflow name}" linking to /solutions/{role}/{job}
No Solutions Link	No matching solutions mapping	Cross-link absent
Has How It Works	Workflow has marketing.workflowSteps data	WorkflowStepsVisual numbered steps with icons
Has Workflow Sequence	Workflow has relations.nextSteps or relations.prerequisites	WorkflowSequence horizontal flow: Prerequisites → Current → Next Steps
No Workflow Sequence	Empty nextSteps and prerequisites	Section absent
Has FAQ	Workflow has FAQ data	WorkflowFAQ expandable accordion
No FAQ	No FAQ data	Section absent
Has Rich Description	Workflow has rich description content	WorkflowRichDescription block rendered
Has Hero Media	Workflow has hero image/video	WorkflowHeroMedia panel rendered
Free Tier (platform path)	tier: "free" on /integrations/{platform}/{wf}	Green "Free" badge; TierCTA shows InstallButton
Pro Tier (platform path)	tier: "paid" on /integrations/{platform}/{wf}	Purple "Pro" badge; TierCTA shows "Upgrade to Pro" link to /pricing
Free/Pro (category path)	Any tier on /integrations/categories/{cat}/{wf}	Badge shown; BUT InstallButton used directly (no TierCTA gating) — paid workflows also get install button
Health: Healthy	health_score >= 0.9	Green dot + "Healthy" label in WorkflowHealthBadge
Health: Degraded	0.6 <= health_score < 0.9	Yellow dot + "Degraded" label
Health: Issues	health_score < 0.6	Red dot + "Issues" label
Health: No data	0 runs	Grey dot + "No run data" label
Run chart visible	/api/runs/{slug} returns run data	WorkflowRunChart section revealed; uPlot chart rendered with green (success) / red (failure) points
Run chart hidden	No run data or API unavailable	WorkflowRunChart section stays display:none

Install Button Lifecycle (Workflow Detail)

State	Condition	Button Text	Button Style	Action
Coming Soon	comingSoon: true	"Coming Soon"	Gray, disabled (install-btn disabled)	None (button disabled)
Get SideButton	Extension not installed OR no YAML content	"Get SideButton"	Green gradient (install-btn primary)	Opens GitHub repo in new tab
Add to SideButton	Extension installed + has YAML + not yet installed	"Add to SideButton"	Green gradient with + icon	POSTs YAML to localhost:9876/api/actions/install; shows "Installing..." during request
Installed	Extension installed + workflow installed (checked via localhost:9876/api/actions)	"Installed"	Light green border (install-btn installed)	Links to localhost:9876 dashboard
Install Error	Install POST fails	"Add to SideButton" (reverted)	Original style + red error text	Shows "Install failed. Is SideButton running?" for 5 seconds

Categories Index

State	Trigger	Visual Indicator
Default	Page load	All 11 category cards sorted by workflow count descending; categories with 0 workflows still shown

Category Detail

State	Trigger	Visual Indicator
Default	Page load	All category workflows listed, "All" tab active
Filtered — Free	Click button "Free"	Only free workflows shown
Filtered — Pro	Click button "Pro"	Only pro workflows shown
Has Solutions Link	Category matches a solutions role	"See {Category} with SideButton AI" cross-link visible with subtitle
No Solutions Link	Category has no matching role	Cross-link section absent
Empty Category (0 workflows)	Category has 0 workflows	Empty state message: "No workflows found." with icon (from WorkflowGrid component)

Publishers Index / Detail

State	Trigger	Visual Indicator
Default (index)	Page load	Publisher cards shown, sorted by workflow count descending; verified badge shown if verified: true
Default (detail)	Page load	Workflow list sorted by total run count descending (via SQL join on workflow_health), NOT alphabetical
Publisher has banner	banner field non-empty	Banner image in hero background
Publisher no banner	banner field empty	No banner, plain hero

Paginated Pages (Page 2+)

State	Trigger	Visual Indicator
No tier filter	Pages 2+ for platform/category/publisher	TierFilter component is NOT included; all workflows shown without filtering
No solutions cross-link	Category pages 2+	Solutions role cross-link banner is NOT included
No JSON-LD	Pagination pages	No structured data on paginated pages
Pagination controls	Any paginated page	Pagination component with smart ellipsis, Previous/Next, "Page n of m"

Common Tasks

1. Browse All Platforms

1. Navigate to /integrations
2. Scroll past Skill Packs banner and Category pills to "All Platforms" section
3. Platform cards sorted by workflow count (highest first)
4. Click any platform card to view its workflows

2. Browse by Category

1. Navigate to /integrations
2. Click link "Browse by Category" in hero OR scroll to "Browse by Category" pill section
3. Click a category pill (e.g., "Marketing")
4. View category detail page with filtered workflows

3. Filter Workflows by Tier (Platform Detail)

1. Navigate to /integrations/{platform}
2. Locate heading "All {Platform} Workflows"
3. Click tier filter tab: button "All", button "Free", or button "Pro"
4. Workflow list updates instantly (client-side filter, no page reload)
5. Tab counts show number of workflows per tier

4. Filter Workflows by Tier (Category Detail)

1. Navigate to /integrations/categories/{category}
2. Locate heading "All {Category} Workflows"
3. Click tier filter tab: button "All", button "Free", or button "Pro"
4. Same client-side filter behavior as platform detail

5. View Workflow Detail

1. Navigate to /integrations/{platform} (or category/publisher page)
2. Click a workflow card (link containing heading)
3. View: hero with badges, benefits, publisher, how-it-works, use cases, workflow sequence, automation capabilities, related workflows
4. Check install button state (Get SideButton / Add to SideButton / Installed / Coming Soon)

6. Install Workflow via Workflow Detail

1. Navigate to workflow detail page
2. If extension not installed: "Get SideButton" button → opens GitHub repo
3. If extension installed + workflow has YAML + not installed: "Add to SideButton" button → click to install directly
4. Button shows "Installing..." during install, then switches to "Installed" on success
5. If install fails: error message "Install failed. Is SideButton running?" appears for 5 seconds
6. If already installed: "Installed" button (green border, checkmark) → links to localhost:9876

7. Check Install Status

1. Navigate to any workflow detail page
2. Install button auto-detects extension + installed state on page load (checks localhost:9876/api/actions)
3. Switching tabs and returning triggers re-check (visibilitychange listener)
4. Installed actions are cached for 30 seconds

8. Navigate Breadcrumbs

1. On any sub-page, breadcrumb trail appears below header in navigation > list
2. Pattern: Integrations > {Platform} > {Workflow} or Integrations > Categories > {Category}
3. Click any breadcrumb segment to navigate up — last item is plain text (current page, not clickable)

9. View Publisher Profile

1. Navigate to /integrations/publishers OR click publisher link from workflow detail
2. Click publisher card (contains img + heading)
3. View: publisher logo, name, workflow count, description, full workflow list
4. Publisher workflows span multiple platforms (e.g., SideButton publisher has 22 workflows across SideButton, Terminal, Wikipedia platforms)

10. Cross-Navigate Integrations → Solutions

1. On category detail: if category maps to a solutions role, click "See {Category} with SideButton AI"
2. On workflow detail: if workflow maps to a solutions job, click "Part of {Category} with SideButton AI" at top
3. Both navigate to the solutions section for deeper role/job context

11. View How It Works (Workflow Detail)

1. Navigate to workflow detail page
2. Scroll to heading "How It Works" section
3. View numbered step-by-step visualization of workflow execution
4. Each step shows: icon + step number + title + description

12. View Workflow Sequence Chain

1. Navigate to workflow detail page
2. If workflow has a next step, scroll to heading "Workflow Sequence" section
3. Shows: current workflow (with "Current" badge) → "Then Run" → next workflow card
4. Click next workflow card to navigate to its detail page

13. Navigate Paginated Workflows

1. On platform/category/publisher pages with >24 workflows (24 per page)
2. Pagination controls appear at bottom: Previous/Next + page numbers with smart ellipsis
3. Click page number to load /integrations/{platform}/page/{N}
4. This is SSR (server-side) — full page navigation, not client-side
5. Note: Pages 2+ do NOT have tier filter tabs — only page 1 has TierFilter

14. View Platform Setup Instructions

1. Navigate to platform detail for a platform with setupSteps (e.g., ChatGPT, Claude Code, Cursor)
2. Setup steps are rendered conditionally — only if the platform data includes them
3. Shows ordered list of setup instructions

Tips

• Platform grid on index is sorted by workflow count descending — platforms with most workflows appear first
• Category pills on index page have unique hex colors per category — color-coded for visual distinction via color field in categories.json
• Tier filter is client-side — no page reload, instant filtering; URL does NOT change
• Tier filter count badges (e.g., "Free (5)") show per platform/category — useful for quickly assessing available content
• Breadcrumb navigation is consistent across all sub-pages — always starts with link "Integrations"; last item is always plain text
• Category detail pages show "Available Platforms" section — only platforms that have workflows in that category
• Publisher detail pages do NOT have tier filter tabs — all workflows listed flat
• "Other Integrations" section on platform detail shows 6 related platforms — selection is static, not based on category similarity
• "Other Categories" section on category detail shows all sibling categories as pill links (excludes current category)
• Workflow detail "Automation Capabilities" section shows the actual step types used in that workflow's YAML with links to docs
• Workflow level maps to display labels: primitive → "Quick Action", task → "Task", process → "Process", workflow → "Workflow", pipeline → "Pipeline"
• Install button state is checked on page load AND on tab visibility change — switching away and back triggers a re-check
• Publisher displayName is used in UI (not name) — e.g., a publisher named "aictpo" displays as "AICTPO"
• Publisher type determines badge display: official = SideButton team, partner = verified third-party, community = community contributor
• verified: true publishers have a verified badge next to their name
• Platform category field is the primary category — but a platform can have workflows in multiple categories (shown in per-platform "Browse by Category" section)
• Publisher detail page sorts workflows by total run count descending (SQL join on workflow_health), NOT alphabetically — most-used workflows appear first
• WorkflowHealthBadge is SSR-rendered at build time, then immediately re-fetched client-side from /api/runs/{slug} — the initial state may differ from the live state
• WorkflowRunChart loads uPlot 1.6.31 lazily from CDN (cdn.jsdelivr.net) — not bundled; if CDN is unreachable, chart silently fails to render
• Category workflow detail (/integrations/categories/{cat}/{wf}) uses InstallButton directly, NOT TierCTA — paid workflows get an install button instead of "Upgrade to Pro"
• getSameFunctionWorkflows() exists in marketplace.ts (maps cross-platform equivalents like HubSpot/Salesforce lead enrichment) but is NOT rendered on any current page
• getExploreLinks() exists in marketplace.ts but is NOT rendered on any current page
• SEO JSON-LD: index has CollectionPage + BreadcrumbList; platform detail has BreadcrumbList + SoftwareApplication; workflow detail has BreadcrumbList + optional HowTo; category/publisher pages have no JSON-LD

Gotchas

• Tier filter is client-side only: Clicking filter tabs does NOT change the URL or cause navigation — take a fresh snapshot of the same page after click to see filtered state
• Platform logo fallback: Platforms without a logoUrl (Terminal, Workday, Wave) render a colored letter initial using color hex + first character of name — img selector will be absent for these
• Install button has 4 states, not 2: The button is not just "Installed" vs "Install" — it cycles through: Coming Soon → Get SideButton → Add to SideButton → Installing... → Installed (or Error). Extension detection happens via document.documentElement.dataset.sidebutton === 'ready'
• Install check uses extension relay: The install button checks localhost:9876/api/actions via the Chrome extension's message relay (SIDEBUTTON_FETCH), NOT a direct fetch — this bypasses Private Network Access restrictions in Chrome
• No empty state message on tier filter: When tier filter shows 0 results on platform/category detail, the workflow list simply disappears — no "No workflows found" message. But when the WorkflowGrid component renders with 0 workflows initially, it shows a centered "No workflows found." message with icon
• Cookie consent dialog: Shows on first visit as dialog "Cookie Notice" at bottom — button "Accept" / button "Reject" + link "Privacy Policy" — may overlay bottom-of-page elements
• Pagination is SSR: Unlike tier filter (client-side), pagination is server-side — clicking page 2 navigates to a new URL (/page/2), full page reload
• Breadcrumb last item is not a link: The current page in breadcrumb is plain text, not clickable — only parent segments are links
• Solutions cross-link is conditional on both category AND workflow detail: Category detail shows "See {Category} with SideButton AI" → /solutions/{role}; workflow detail shows "Part of {Category} with SideButton AI — {name}" → /solutions/{role}/{job}. Not all categories/workflows have this
• Run stats depend on server: "No run data" vs "{N} runs" — the count comes from SideButton server API; if server is not running, shows "No run data" even for executed workflows
• Publisher workflow count differs from platform count: SideButton publisher shows 22 workflows (spans Terminal, Wikipedia) while SideButton platform shows 20 workflows — publisher pages aggregate cross-platform
• comingSoon workflows are hidden from counts: availableWorkflows excludes comingSoon workflows; they only show in WorkflowGrid with an amber "Coming Soon" badge and a disabled install button
• Banner fallback: Publisher banner field can be empty string — hero renders without a banner background image in that case
• SideButton extension FAB: Bottom-right corner has a floating button "Click" + green "S" circle injected by the Chrome extension — can overlap with page content and appear in snapshots; this is NOT part of the website
• Responsive breakpoints: Platform grid uses Tailwind md:grid-cols-2 lg:grid-cols-4; workflow grids use md:grid-cols-2 lg:grid-cols-3. Mobile (<768px) is single column
• Category emoji rendering: Categories use emoji in the icon field name (e.g., "users" -> rendered emoji) but the actual emoji is rendered by the component, not stored as emoji in the data — the rendered emoji may vary by OS
• Tier filter absent on paginated pages: Pages 2+ (/page/{n}) do NOT include the TierFilter component — all workflows are shown unfiltered; only page 1 has tier filtering
• Category workflow detail tier bypass: Workflows accessed via /integrations/categories/{cat}/{wf} use InstallButton directly (not TierCTA), so paid workflows show an install button instead of "Upgrade to Pro" — this is inconsistent with the platform path behavior
• Health badge thresholds differ by context: Marketplace WorkflowHealthBadge uses >=0.9/>=0.6/<0.6 (Healthy/Degraded/Issues); portal WorkflowTable uses >=0.9/>=0.7/>=0.5/>0 (Healthy/Good/Fair/Poor) — same underlying score, different labels and cutoffs
• WorkflowRunChart hidden until data: The chart section has display:none at SSR time; it only becomes visible if the client-side fetch to /api/runs/{slug} returns run data — this means the chart may never appear for unexecuted workflows
• WorkflowHealthBadge double-fetch: The badge is SSR-rendered from build-time DB data, then immediately re-fetched client-side — there can be a brief flash where the label changes if the live data differs from the build-time snapshot
• Health score penalty: Health score = base success rate, penalized by -0.05 per failure in the last 5 runs — recent failures disproportionately hurt the score
• Publisher sorting is by runs, not alphabet: Publisher detail page uses getWorkflowsByPublisherSortedByRuns() which sorts by workflow_health.total_runs DESC — workflows with more runs appear first
• Full-text search API exists: /api/browse supports q parameter for full-text search via workflows_fts SQLite virtual table — but there is no search UI in the marketplace pages