Pulse / Post Figma component library

Figma components, every state.

Variant x state boards for Figma component sets, with the interaction contract under each board. Canonical source now lives in standalone HTML/CSS components; React references are legacy context while the demo app is paused.

00 Source model

Standalone HTML/CSS first

The component library is a framework-free working surface. It is designed for designer-friendly preview, Figma import, and later engineering extraction.

Component sourceEach shipped component gets components/<Name>/<Name>.html and its own local .css. Overview owners can share CSS, but directly placeable variants also get their own source folders such as ButtonPrimary or MetricCard. Shared decisions belong in components/tokens.css.
Live previewcomponents/html-component-preview.html imports every individual component into one browsable HTML preview, so reviewers can test states without opening each file manually.
Figma specimenThis page keeps full state boards, category notes, contracts, and visual examples in one file for Figma iteration and design review.
Legacy Reactdemo/pulse-react/src can still explain older behavior, but it is not the current implementation target and should not block HTML/CSS updates.
Standardization loop
Workflow checks Classify the component category before writing markup: primitive, feedback, overlay, data display, navigation, or business pattern. Define the contract first: variants, states, accessibility behavior, responsive behavior, and whether the component needs real interaction. Use tokens and local CSS ownership deliberately; promote repeated color, spacing, radius, shadow, or motion decisions into tokens.css. Ship the owner board and any directly placeable slice files, add them to components/html-component-preview.html, then mirror stable states here for Figma handoff. Mark unfinished items as Needs extraction, Token candidate, or Interaction pending instead of letting one-off controls spread.
Source model / what lives where
01 Rules Markdown contracts

Naming, taxonomy, component rules, and extraction status live in component-library.md and companion docs.

02 Source HTML/CSS components

Reusable pieces are maintained as standalone component files with shared tokens, states, and interaction behavior.

03 Review Component preview

html-component-preview.html is the browsable review surface for every source component and its state slices.

04 Figma Handoff specimen

This file mirrors stable component states for Figma iteration. It is not the engineering source.

Full slice inventory stays in Markdown and the HTML preview registry; this page only shows the visual source model and stable specimens. Designer-facing summary
00 Roadmap

Category coverage

Use mature systems as a category checklist only. Pulse keeps its own tonal hierarchy, spacing-led grouping, and calm vertical reading rhythm.

Data entry

Field owns Input, Textarea, Select, and CheckboxField basics; DateRangeControl owns calendar ranges. Normalize Combobox, Radio, Switch, single-value DateTimeField, TagInput, and Upload before more page-local forms appear.

Priority / High

Feedback / overlays

Modal, Popover, ConfirmBar, and FeedbackState are sourced; unify Toast, Banner, Drawer, Tooltip, and page-level confirmations next.

Priority / High

Data display

DataList, MetricBlock, ChartShell, Timeline, and MediaPreview now source rows, metric atoms, chart framing, event rhythm, and media frames; focus next on page adoption and chart-specific specimens.

Priority / High
Maturity order
Extraction rule First normalize components with behavior, accessibility, validation, loading, or placement complexity. Use tokens and local composition for visual-only repetition until at least two screens need the same contract. Business patterns come after primitives: signal queue, campaign pipeline, AI panel card, Campaign review card, and approval flow remain next. CommandSummary, calendar detail flow, calendar post blocks, report callouts, and source citation rows are now source components.
01 Button

Button

Figma: Component/Button -variant x state set. Primary for creation, secondary for routing, ghost for quiet actions, danger for destructive.

Variants x states
Primary
Secondary
Ghost
Danger
IconButton
Icon compact
Icon danger
Interaction demos Animated button behavior is separated from the frozen state matrix: click, loading, success, and icon feedback are proof specimens, not static slices.
Primary / publish
Secondary / open
Ghost / edit
Danger / delete
Icon / filter
chatSelected / chatbot only
Interaction Each variant row carries its own interaction slice; a single shared click-through sample is incomplete. Hover lifts -1px with shadow one step; dark and ghost arrow icons shift +2px on hover. Press returns to baseline (translateY 0, scale .985); transitions 120-180ms ease. Focus-visible shows a 3px accent ring; never remove the ring without a replacement. Disabled is opacity .42 with pointer-events none - no color change.
Data entry

Field

Figma: Component/Field - labelled native controls for dense operational forms. Source: components/Field/Field.html. Business surfaces own layout; Field owns label, help/error, focus, disabled, readonly, and native control styling.

Control types
Input / labelled native control
Select / native menu
Textarea / vertical resize allowed
States
Focus / cyan ring, no blue drift
Error / amber risk tone
Help text / quiet support
CheckboxField / inline label
Inline layout
Inline label grid / consumer may set column width
Calendar create/edit adoption target
Interaction Native input, select, and textarea remain accessible; visible labels are preferred over placeholder-only fields. Focus uses the shared cyan focus ring; validation uses amber unless the data itself is declining or the action is destructive. Feature modules own placement and grid density; do not fork input chrome inside Calendar, Signal, Analytics, or Campaign local CSS.
02 SegmentedTabs

Segmented tabs

Figma: Component/SegmentedTabs - 2-5 items. Local filters only, inside the module toolbar. One label spec across every variant: 13px / 600; variants may differ in width, padding, and thumb - never in type.

States
Page tabs / Overview active
Page tabs / Signals active
Page tabs / Reports active
Analytics / Open active
Analytics / Resolved active
Signal severity / All active
Signal severity / Watch active
Signal severity / Warning active
Compact range / 1W active
Disabled group
Live - synced just now PageNavLiveStatus + PageNavSyncAction
Interaction Runtime tabs measure the active button before thumb animation starts; this Figma specimen uses static active states and no hard-coded thumb coordinates. HTML source pairs each animated tab component with its own static slice group: PageNavTabs now includes the page nav shell, live/sync action, and tab-page switcher; ReportRangeTabs, ActionRangeTabs, AnalyticsSubtabs, and SignalSeverityTabs remain direct range/state sources. Click switches the active key; active tab carries aria-pressed="true". Internal overflow keeps a single row and hides the scroll axis; tabs never wrap to two rows. Live status keeps a manual Sync action visible. The dot is a flat static marker; no glow, halo, ping, or looping pulse animation.
03 Pills + badges

Pills and badges

Metadata, never decoration. Tags are static; platform badges are fixed icon squares. Source: components/PlatformBadge/PlatformBadge.html.

Tag pill / PlatformBadge
Glow serum launchTag / static
icon badges / unknown fallback
Interaction None. Pills and platform badges are read-only metadata - no hover, no click.
04 StatusPill

Status and severity

Figma: Component/StatusPill. Status tags come in two outlined sizes — default for cards/heros/popovers and compact for dense rows — on one outlined pill scale: green means positive/active/live/approved, blue means suggested action or scheduled, amber means risk/negative/on hold, cyan means ready, purple means in progress. Generation status uses the same compact, dot-led process ladder: queued gray, scheduled blue, in progress purple, ready cyan, live/published green, and blocked/failed/on hold amber. Within StatusPill, red is reserved for declining data. Source: components/StatusPill/StatusPill.html.

Status tag semantics
LiveGreen / active or approved
ScheduledBlue / suggested or scheduled
On holdAmber / risk or negative
ReadyCyan bg + #0D7685 text
In progressPurple / machine work
Generation status
QueuedQueued / gray
ScheduledScheduled / blue
LiveLive / static dot
In progressIn progress / purple
ReadyReady / cyan dark
PublishedPublished / landed green
On holdOn hold
BlockedBlocked / amber
FailedFailed / amber
Rendering 62%With progress
Data trend labels
UpwardData trend / green
DownwardData trend / red only
StableData trend / blue
Interaction Status tags and data trends are separate systems. Red is only used when data is moving down; risk and on-hold states stay amber. Diagram color is separate again: primary cyan is neutral, green is best performance, and amber is worst performance. Status dots are always flat, solid markers. Do not add glow, halo, ping, or outward pulse effects to dots. Progress folds into the pill text ("Rendering 62%") -never a second progress row. Pills are not buttons; the parent card owns the click.
05 Cards

Content and data cards

Surface rule: cards should clarify a real object or interaction, not become the default way to divide every layer. Prefer tone, spacing, and vertical reading rhythm before adding another framed surface.

Figma: Component/Card -white, ink, action, metric, media. One ink anchor per page; zero or one saturated action card.

Post action card (content queue)
01
Quiet Confidence Uniform · 9:00 AM
Quiet outfits: 5 days, muted tones
Opening carousel proves the full look in real life.
ScheduledReview carousel
Rest - number badge, image-only thumb, status top-right, one dark CTA
03
Quiet Confidence Uniform · 12:00 PM
Texture try-on credibility
Campaign is rendering the texture proof reel.
Rendering 62%Track render
Rendering - progress folded into the status pill
Brief / action
Formation status / in progressThree content decisions are waiting before the publishing window.
Brief / ink anchor
Ship competitor response before 3 PMSend a response post to Campaign now.
Action / urgent (max one per page)
Confirm Thursday slotBest window: 19:00-21:00.
Action / routine white
Metric tones
Ready7posts can move
White / default
Same-day risk1response due 4 PM
Ink / reframes the page
Response lift+18.7%vs last week
Positive / accent soft
Needs response1before 4 PM window
Urgent / amber soft
MetricBlock source slices
Save rate 31% +18% vs prior
MetricBlock / positive delta
Delivery trust 74pts -6 pts today
MetricBlock / data decline uses red only here
Qualified signal lift 2.4x Fit proof carrying the week
MetricBlockHero / large value, no card ownership
Report confidence 92% stable
MetricBlockInline / dense row summary
DataList source slices
01 Texture try-on credibilityRendering - Campaign post - ETA 18m 62%Creative render
02 Quiet outfits: 5 daysApproved - Ready to publish Live
03 Caption variantsScheduled - Needs review Scheduled
DataList / DataRow selected and compact status side
ScheduleJun 12, 11:00 AM
CampaignQuiet Confidence Uniform
FormatCarousel - 4 cards
OwnerStudio
DescriptionList / detail metadata
SourceSignalAction
Delivery-time comments47 comments in ~5mReply in Studio
Fit-proof saves+18%Keep proof card
TableLite / row rhythm, no heavy grid frame
ChartShell source slices
Share of conversationDelivery and fit-proof topics Open report
DeliveryFit proof
ChartShell / header, action, legend, body slot
Report activityCompiling source rows.
ChartShellLoading / stable reserved height
Source liftNo qualifying posts yet.
No chartable data
Widen the range or add campaign posts.
ChartShellEmpty / clear recovery copy
Timeline source slices
Trend fit lockedCompleted - Studio
Creative renderDraft 01 rendering; ETA 18m.
Caption variantsThree hooks and one delivery-safe alt.
Timeline / vertical sequence, current state uses tonal fill
Shot planTexture cue locked.
Rendering now62% complete.
ScheduleJun 11, 12 PM.
TimelineHorizontal / compact milestone rhythm
MediaPreview source slices
Ready1 / 4
Fit with confidenceInstagram carousel - Quiet Confidence
MediaPreview / image frame and thumbnail stack
Rendering0:18 Play
Texture try-on credibilityTikTok short video - ETA 18m
MediaPreviewVideoPoster / wide frame
No media attached
Add a product frame or creator clip.
Wrong type
MediaPreviewEmpty / invalid thumbnail treatment
Interaction Cards rest flat (border + hairline shadow); hover lifts -1px with the aligned shadow and zooms media to 1.05. Media card: image only in the preview; status sits top-right; one primary CTA in the body. Metric ink tone is reserved for the one KPI that changes how the page reads. Use tone, spacing, and vertical grouping before adding nested borders. Light dividers can separate content inside one container; repeated framed sub-cards should be reserved for independently interactive items. Avoid rows of many equal-weight cards unless comparison is the task. Prefer a calmer top-to-bottom reading path for dense operational information.
06 Campaign

CommandSummary + CampaignRow

Figma: Pattern/CommandSummary, Pattern/CampaignRow, Component/PostChip. CommandSummary sets the single next move before the campaign row/pipeline detail. Sources: components/CommandSummary/ and components/PostChip/PostChip.html.

CommandSummary / command center summary
Morning command Quiet confidence launch is ready for approval. Creative is complete, two posts are queued, and the only blocker is final approval before the noon publishing window.
Ready Due today
Posts ready2of 3 complete
Publish window12 PMslot held
Proof score94%fit language approved
DoneTrend fitAngle locked.
DoneShot planCards complete.
NextApproveOwner review.
QueuedPublishSlot opens next.
Approve the carousel set Open the approval queue, check final copy, and release the slot. Open approval queue
CommandSummary / default with metric strip and stage rail
Risk / compact / empty states
Calendar command Delivery reply needs a calm response today. Queued comments can clear with one approved reply template.
Needs attention
Queued47comments
Reply time5mafter approval
Respond in Studio Open response
CommandSummaryRisk / compact action
No command needed Nothing needs operator attention. Scheduled posts, approvals, and report sources are clear.
CommandSummaryEmpty
Contract CommandSummary owns one decision sentence, MetricBlock-style metrics, current / done / queued stage rail, loading and empty states, and one primary next action. Use it before CampaignRow, Calendar, Home, or Strategy details when the operator needs a single next move instead of scanning many equal cards.
PostChip states (.section-campaigns scope)
Default
Hover / lift -1px
Active / cyan wash + solid dot
Keyboard focus (cyan ring)
+N more
Campaign anatomy map
Campaign identityCampaignMeta
Product launchIn pipeline
Quiet Confidence Uniform

Prove the look in real life before asking shoppers to buy.

Shop-look taps
Jun 10 - Jun 28
Post railPostChipRail / overflow
Right stateRightState / ProgressMeter
62%ETA 18m
Creative render 62%
Watch progress
Disclosure headerPipelineHeader
Selected post#2 - Texture try-on credibilityBuilding
Texture try-on credibility - generation pipeline Specific production path for the selected post above. Creative render is active; captions queue next.
Open campaign
Current stepTaskStep / active
Visual editCreative render is 62% complete.
Row flow
Rest row
Product launchIn pipeline
Quiet Confidence Uniform

Prove the look in real life before asking shoppers to buy.

Shop-look taps
Jun 10 - Jun 28
62%ETA 18m
Creative render 62%
Watch progress
Pipeline opened from active post
Selected post#2 - Texture try-on credibilityBuilding
Texture try-on credibility - generation pipeline Specific production path for the selected post above. Creative render is active; captions queue next.
Open campaign
01Done
Trend fit lockedMood-edit angle matched to Quiet Confidence Uniform.
02Done
Shot planTexture macro, fit cue, and movement proof locked.
03Building now
Creative renderDraft 01 rendering; 62% complete.
04Queued
Caption variants3 hooks, 1 delivery-safe alt.
05Needs you
Approve and scheduleTarget slot: Jun 11, 12:00 PM.
Interaction Chip click switches the row's right state; a second click on a chip with a pipeline key toggles the pipeline panel below. Post chips keep a stable readable width; as the rail narrows, lower-priority work moves into +N more instead of compressing the whole row. +N more expands the hidden-task strip; hidden work opens the shared pipeline with task-specific steps. Pipeline is closed by default, five steps, with an Open campaign CTA and a close button; it restores the campaign view after a task closes. Chips activate with Enter/Space and carry aria-expanded; inline task fitting uses a ResizeObserver. All motion is transform/opacity only and respects prefers-reduced-motion. Token note: active borders and focus rings use cyan or semantic status tokens; no gradient progress, legacy state color, or decorative dot rings.
ApprovalChain (plan / brief / content / inbox) — avatar identity + status badge, rail fills green on approve, changes are amber not red
MR
Maya R.
Content lead
Approved · 9:12 AM
DO
Devin O.You
Brand admin
Needs your review
PN
Priya N.
Org owner
Waiting
Full chain
DO!
Devin O.You
Brand admin
Requested changes
Changes requested (amber)
PN
Priya N.
Org owner
Reviewing · SLA 24h left
Reviewing (someone else)
NodeGenerationMap — generation DAG frozen mid-run: queued / running / done nodes on a dotted stage, with a progress bar and step pipeline. Cyan neutral, amber running, green done. Source: components/NodeGenerationMap/NodeGenerationMap.html.
Reference frame
Clip 01
running
Video editor
queued
15 of 30 steps~4 min left
Brief
Generating
Render
QA
Content review
Interaction In product the diagram animates: running edges flow, the running node's dot glows, and the progress bar advances. This frame is frozen at 50%. Node label / wait text uses the 8.5px diagram-internal type exception — not product UI type. Reduced motion: edges, dots, and spinner stop animating; queued / running / done stay legible.
PlatformPreview — channel-accurate post mock so the team sees how a post reads before it ships. The tonal switcher drives the channel (Instagram shown). Brand colors are intentional fixtures, not Pulse surface tokens. Source: components/PlatformPreview/PlatformPreview.html.
Platform switcher — active channel uses a white raised pill
aurelia.skin
Sponsored
aurelia.skin What is a ceramide? — the education drop your routine was missing.
View all 47 comments
Instagram feed post — channel-accurate chrome
07 Calendar

CalendarPostBlock

Calendar scheduling block with StatusPill, PlatformBadge, compact slot states, drag state, and drop preview. Source: components/CalendarPostBlock/CalendarPostBlock.html.

CalendarPostBlock source variants
Quiet Confidence Uniform Scheduled
Quiet outfits: 5 days Muted styling proof before launch. 9:00 AM - 10:30 AMCarousel
Quiet Confidence Uniform Ready
Fit-note carousel reminder Final proof can move into the approved slot. 11:00 AM - 12:30 PMPost
Creator proof Rendering
Morning reel cut Try-on edit needs a tighter opening. 6:00 PM - 6:30 PMReel
Community try-on - Mia cutdown 2:00 PM - 2:30 PMShort slot
Launch hero review overlaps slot 2:00 PM - 2:30 PMConflict
Launch follow-up Failed
Delivery reply story Publish failed and needs a slot check. 4:00 PM - 4:30 PMStory
CalendarEventBlock / Drop preview
Internal Scheduled
Creator review sync Walk the proof sequence before handoff. 1:00 PM - 1:45 PMEvent
Drop to reschedule 7:00 PM
Loading Loading meta
Interaction Post blocks drag to reschedule: the block dims to .78 while dragging and a drop preview marks the target slot. Click opens the CalendarPopover detail flow; edit and create reuse DateRangeControl for schedule changes. Calendar uses generation/page status only. Data labels such as Risk / Action / Highlight stay in the StatusPill data-label set, not calendar state.
DateRangeControl / CalendarPopover
Schedule Jun 12, 11:00 AM - 12:30 PM
Start date Jun 12
Start time 11:00 AM
End date Jun 12
End time 12:30 PM
90 min Next day Best evening
DateRangeControl / default + quick slot
Post detail Fit with confidence
Ready
Schedule Jun 12, 11:00 AM - 12:30 PM
Campaign Quiet Confidence Uniform
Format Carousel - 4 cards
Owner Studio
Brief Ready carousel explains how the pieces fit and keeps the CTA calm.
Move next day Pick slot Remove
CalendarDetailView / Modal shell + metadata grid
Edit and create slices
Edit post Fit with confidence
Ready
Title Fit with confidence
Status Ready in Studio
Start Jun 12, 11:00
End Jun 12, 12:30
Cancel Save changes
CalendarDetailEdit / field + date range composition
Create New calendar item
Event Task Out of office
Title Add title
Repeat Does not repeat
Guests Add people
Campaign Optional campaign
More options Save
CalendarCreateForm / kind tabs + reusable fields
Contract CalendarPopover owns the visible detail, edit, create, loading, and footer action anatomy; runtime owns placement, focus trap, and persistence. DateRangeControl owns start/end, all-day, quick slot, invalid, readonly, and compact date-time states.
08 Signals + trends

SignalRow and TrendCard

Queue rows carry severity; trend cards carry a heat score ladder. Source: components/SignalRow/SignalRow.html.

Signal cards - severity-tinted
Watch the brand trust window now. Delivery-time complaints need a calm response 8 posts in 4 hours are naming slow cross-border delivery. Use clear fit + delivery expectations. 4h ago Open signal
Risk / amber watch wash + severity banner pill
Mood-based shopping is surging on TikTok
24K monthly convosTikTok
2h ago
Watch / amber wash + metric tags

Delivery risk window is open. Response due before 4 PM.

WatchBanner / page-level
TrendCard - image-backed + heat ladder
#1 1.3M views "Y2K revival" aesthetic
HEAT92
IG · Quiet Confidence edithigh
Rest -rank index, media bg, heat score, tag chips
9274584126 Heat ladder: hot amber 90+ / orange 70+ / yellow 50+ / green 35+ / blue <35
Interaction Signal cards: the whole card is a click target opening the signal detail; risk cards carry the severity banner pill, watch cards carry metric tag chips. TrendCard hover lifts -1px and reveals the route CTA; click routes to Strategy with the trend preselected. WatchBanner appears at page level while a watch window is open; View signal jumps to the card, dismiss hides until the next escalation.
09 Report

Report module

Sentiment header, KPI strip, channel mix, readiness donut, and callouts -restrained data surfaces, cyan only for the active series.

Sentiment + period tabs + KPI strip
Sentiment · this week+72%↑ +4pt vs last week · stable
Headline metric / cyan owns the number
Period tabs / ink thumb flavor
Reach94k->18%
Engagement3.2%->0.4pt
Followers+218->12%
Impressions412k->22%
Avg CPO$0.18->12%
KPI strip - five columns, hairline dividers, cyan deltas
Instagram52%
TikTok31%
Pinterest17%
Channel mix bars
68% Launch readiness donut
ReportCallout variants
Delivery clarity is the loudest riskRiskRespond before the 4 PM window
Creator proof posts are convertingOpportunity+18.7% response lift
Schedule the fit-note carouselActionBest slot Thursday evening
SourceCitationRow variants
Delivery-time complaints need a calm response Signal thread47 commentsUpdated 4h ago
Confidence 92% Open source
Creator try-on proof is lifting qualified saves Campaign post set24K monthly convos
Confidence 76% Open source
Static post fatigue may be isolated to one channel Attribution readoutsample still thin
Confidence 48% Open source
Loading source title Loading metadata
Open
Interaction The whole callout may route to the source view (signal, report chapter, or scheduler); do not add a trailing arrow affordance. Variants: risk/watch uses amber, opportunity uses success green, and action uses suggested-action blue. No left rail stripe, no stacked colors.
10 Overlays

ConfirmBar, popover, and modal

Inline decisions show their motion states; Calendar Create/Detail popovers anchor to their trigger; confirm dialogs sit on a scrim.

ConfirmBar state split
Does this look like your brand?
Default / OK is cyan, edit is plain white
Checking brand fit...
Processing / OK stays in the right slot with spinner
Brand direction saved.
Confirmed / final state is success green, not cyan
Opening edit controls...
Edit selected / edit owns the focus ring
FeedbackState slices Popover / modal
Post
Quiet Confidence Uniform
Quiet outfits: 5 days, muted tonesScheduled
Schedule06-10 · 9:00 AM
CampaignQuiet Confidence
FormatCarousel · 6 cards
OwnerCampaign
DetailPopover - kicker, campaign label, pill, field tiles
June 2026
3112345678910111213
DatePicker - Popover source slice adopted by Calendar
Report frequency

How often should the daily report regenerate?

FreqModal / on scrim
Interaction Popovers anchor to the trigger, flip when near the viewport edge, and close on outside click or Esc. Modals trap focus on the scrim layer; Esc cancels, the primary button confirms; confirm buttons disable while pending. Animated components must show both the interactive specimen and static split states: rest, in-flight, success, alternate action, compact container, and reduced-motion behavior when relevant.
11 Shell

Shell and navigation

SectionHeader with handoff and Sidebar rail states. Sidebar buckets are Brand, Workspace, and Recent chat; the full chat thread remains an AI panel component.

SectionHeader + SectionHandoff

Action Items

Posts to review, publish, or route today.

Open Signals
Rest - title 42px Manrope Medium
Open Signals Handoff hover / chevron +2px
Sidebar rail states
Brand
Workspace
ASAurelia Skin
Recent chat +
Summer launch guardrailsCampaign planning - 12m
Delivery-time risk responseSignal follow-up - 1h
Q2 creator proof readoutAnalytics - Yesterday
Quiet confidence post setCampaign draft - Tue
MRMaya R.
SidebarExpandedRail / recent chat expanded
SidebarCollapsedRail / recent chat collapsed
Edge toggle / expanded rail interior
Edge toggle / collapsed rail exterior
Sidebar workspace item states
Workspace item / active route
Workspace item / hover
Workspace item / disabled
Recent chat +
Active conversationClicked while the assistant is open
New chat createdJust now
Recent chat / active only while the assistant is open
Recent chat
Delivery-time responseSelected conversation
Creator proof readoutNot selected
1 selectedDelete
Recent chat / manage + multi-delete CTA
Interaction Sidebar collapse toggles between 220px and 56px and persists; Brand and Workspace stay fixed, while Recent chat scrolls independently. Text fades out during rail resize instead of being display-toggled. Collapsed rail shows page icons and compact recent-chat dot affordances, not compressed history dash rows. Edge toggle is flush with the rail edge: collapse sits inside the expanded rail; expand attaches outside the collapsed rail with no gap. Recent chat rows switch the active conversation with tonal selection, not an edge border. Manage mode enables multi-select and a delete CTA; the plus action inserts a new chat row. Full message thread rendering still belongs to #ai.
12 AI panel

AI panel states

Figma: Pattern/AIPanel. A floating inset card on the right that compresses the main view. Source: components/AIPanel/AIPanel.html. The assistant has no separate "Ask Pulse" launcher — the dialog is the assistant itself (you message Pulse directly; app entry is the dock + Sidebar recent chat).

Panel open state
P PulsePerception - Risk signal
A new risk signal is spreading faster than usual and needs your attention.
Turn this into a campaign note.
Signal - Delivery-time risk
Reply to Pulse, or drop a file...
Panel open / white panel body — the dialog is the assistant
Panel anatomy slices
Panel frame / AIPanelFrame
P PulsePerception - Risk signal
A new risk signal needs your attention.
Draft a calm reply.
Signal - Delivery-time risk
Reply to Pulse...
Header / AIPanelHeader
P PulsePerception - Risk signal
Message thread / AIThread
What should we draft next?
Build the campaign note.
Rich reply / RichReplyAction
Delivery complaints are accelerating

A calm response in the next 24 hours can keep the thread from hardening.

Velocity+145% Window24h ToneCalm
Draft responseBuild campaign
Compose dock / AIComposeDock Signal - Delivery-time risk
Reply to Pulse...
Conversation selection slices
Panel header / close only
P PulsePerception - Risk signal
Sidebar recent chat / conversation list
Recent conversations
Delivery risk2
Campaign review1
Context chip + compose Signal - Delivery-time risk
Reply to Pulse...
Chat interaction slices
AIConversationSelectInteraction / row selected
Delivery risk2
Campaign review1
AIContextClearInteraction / chip cleared No context attached
Reply to Pulse...
AIComposeInputInteraction / typed input
Draft a calm delivery reply
AISendInteraction / streaming reply
Draft a calm delivery reply
AIRichReplyActionInteraction / CTA selected
I will keep the reply direct and specific.
Draft response
Message + input states
Draft a calm reply for the delivery thread.
User message
Here's a response that acknowledges the delay and offers the restock date.
Assistant message
Typing / streaming
Thinking / generating (4-dot orbit)
Send / enabled
Send / empty input
Interaction Panel states: CTA rest -> opening -> chat. When the panel is open, the launcher is hidden; conversation switching happens from Sidebar recent chat, not a header menu CTA. The CTA sets aria-expanded and the panel expands from the launcher using opacity, transform, and clip-path; the page context stays visible. Streaming shows the typing indicator, then progressive text; send is disabled while the input is empty or a reply is streaming. Rich cards (plans, reports, signal actions) render inline in the thread and own their CTAs.
13 Icons

Icon set

components/Icon - 16px frames, 1.6 stroke, rounded joins, currentColor. Decorative by default; aria-label opt-in.

chevronRight
chevronLeft
chevronDown
close
plus
check
archive
export
edit
more
filter
sync
settings
clock
calendar
trendDown