Bristlenose · dashboard widgets

Widget gallery — the intrinsic design bench

Each widget is designed here in isolation, in its own container-query sandbox, decoupled from where it lands on a dashboard. Drag a sandbox's right edge — or hit a face preset — to feel its compact / normal / expanded faces resolve. Colour comes from the real design-system tokens; Scheme flips the shipped data-color-theme="edo" palette and Mode flips color-scheme — so the theme matrix falls out of tokens, not hand-tuning.

Phase 0 + first widget · parked exploration (post-TF)
Mode
Scheme
design in default · light — the other three cells are a regression check
Viewport
Sidebar
Zoom
Quote min
Quote max
Signal min
Clamp lines
Quote length

Assembled dashboard Phase 3 · foundation

drive Viewport / Sidebar / Zoom ↑ — the whole grid reflows ·

The settled bricks in the RAM grid. cfull bricks (stats · verbatim · sessions) are full-width row-breaks; the tiling bricks (Sections | Themes · Signals · Coverage) pack between them, so it never goes ragged-right. Each brick is its own container, so widgets adapt their faces to brick width while the grid changes column count — both at once.

Sessions
IDParticipantStartDurationInterviews
s1P1 · Parent09:1228mZoom
s2P2 · Student11:4019mTeams
s3P3 · Designer14:0524mMeet
Key quotes
Signals
Checkout & delivery
Nobody hesitated at the final step — once they reached checkout, completion was immediate.
SUCCESS
Signal0.82
Beds category
Availability wasn’t visible on the category pages — so several abandoned the task.
GAP
Signal0.68
Search & filtering
“Aftercare” read as a medical term, not delivery — the label cost people a beat of confusion.
TENSION
Signal0.54

Transcript coverage

68% In report14% Moderator18% Omitted

01 Study at a glance

Card internals MIRROR .bn-project-stat (28px display value, label, paired cards share one border). Redesign: the container goes from flex-wrap (content-sized, ragged right) to a justified grid — fixed --bn-space-md gutters, cards flex to fill, flush both edges. Singles span 1 unit, pairs span 2. Every card is conditional, so units are data-driven (1–8). width ·

07 Verbatim / quotes

driven by the tuner ↑

Card styling MIRRORS .bn-featured-quote (label-size text, bracketed context, real mono .badge footer). Measure-bound at both ends — min 390px and max 544px — so a line stays between 7.5 and ~11 words in every face (calibrated at ~45.6px/word for 13px text). Responsive at 1·2·3·4·5; text size constant throughout. width

04 Pro & contra candidate

drive Quote length + Clamp in the tuner ↑

The kudos/kvetch order book, conformed: it’s the real .bn-featured-quote card in two polarity columns — zero new elements. Dropped the order-book “spread” (false signal — the paired quotes aren’t counterparties). Length is the challenge: two columns halve the width, so a real 79-word quote is worse here than in the single row — same fix, the featured pull/clamp. Toggle Clamp → 0 to see the wall. width

Pro 11

Contra 13

06 Signals

driven by the tuner ↑

Card MIRRORS .signal-card (source eyebrow · 18px heading link · finding · pattern label), but trimmed to the Signal metric only — right-aligned, tucked under the tag. No confidence badge — hidden in the real UI. Cards are wider than quotes (~480 min), so you get 3 quotes / 2 signals, or 5 quotes / 3 signals. width

Checkout & delivery
Nobody hesitated at the final step — once they reached checkout, completion was immediate and untroubled.
SUCCESS
Signal0.82
Beds category
Availability wasn’t visible on the category pages — so several abandoned the task and searched elsewhere.
GAP
Signal0.68
Post-surgery aftercare
“Aftercare” read as both delivery and returns — splitting expectations before the task even began.
TENSION
Signal0.54

03 Sections | Themes = COMPACT face of the Signal grid

Card styling MIRRORS .bn-dashboard-pane--pair + .bn-dashboard-nav (accent links, shared border, no divider, no counts — the shipped dashboard has none). Redesign: columns are ~200px (≈30 chars, non-wrapping at 13px) and the total is split between the groups in proportion to their counts, so columns come out ~equal length even when lopsided. Stress-test the counts above; drag the sandbox to add columns. width ·

This nav-list pair is now the compact face of the Signal grid (dashboard-signal-grid.html, designed in a parallel session, 17 Jul 2026): the rows are the same section/theme labels, and the expanded face reveals a participant × cell matrix (hue = sentiment, depth = count, dot = residual). Same widget, richer with width — not a replacement. See signal-grid.md.

08 Transcript coverage

normal · faces pending chat · width

MIRRORS the shipped .bn-coverage-box — 8px bar, round legend dots. Colours are palette-specific: flip Scheme to Edo and the bar re-tones (blue→slate, ochre) while the sentiment widgets stay put.

Transcript coverage

68% In report 14% Moderator 18% Omitted
Show omitted

Session 1

[02:41]P1So I’m just going to have a look at what’s on this page first.
[06:18]P1Sorry, could you say that again? I didn’t catch it.

Session 3

[11:02]P3Right. Okay. Yeah.

05 Co-occurrence PARKED — hardest

“Where do participants agree — and disagree?” Rows = participants, columns = sections, cell hue = dominant sentiment, cell depth = quote count. Reads Scharp’s three continua at a glance. width

Pre-surgery info
Aftercare
Notifications
Top navigation
Beds category
Search results
Login & app
Checkout
p1
p2
p3
p4
p5
p6
p7
p8
hue = sentiment satisfaction frustration confusion depth = quotes
Sporadic ↔ Pervasive
column · how many participants

Beds category is pervasive (6 of 8) — everyone went, nobody agrees. Aftercare is sporadic (1) but maximum-heat.

Unbalanced ↔ Balanced
row · one theme or many

p1 is unbalanced (front-loaded, healthcare). p3 is balanced with high variance.

Consensus ↔ Conflict
column hues · agree or split

Checkout is split (p3 satisfaction, p4/p6 frustration) — live disagreement worth a rewatch.

⁺ marks an intensity-3 quote in the cell. Method after Scharp, K. (2021), J. Communication 71(4). Empty cells are information — who didn’t reach a section.

More benches land here as Phase 1 proceeds (friction heatmap → saturation → fingerprint → …). Gallery lives flat in docs/mockups/ so it stays in the dev About→Design listing.