Planner Inspector Rail
The Planner's right column when nothing is selected: energy, coach suggestions, and who else is in the room.
When to Use
Use when:
You need the Planner's right column in its default, whole-agenda state — three fixed sections, each optional. It's the counterpart to Planner Activity Inspector, which takes over when an item is selected.
Don't use when:
An activity is selected — swap to the activity inspector. And don't reach for it if you need sections beyond these three; the anatomy is deliberately fixed.
Variants
Canonical — all three sections
Note the energy section's title and meta sit outside the card: the rail auto-sets showHeader => false on the wrapped Energy Arc Card and defaults its score badge to the note variant, so the badge sits beside the score without dominating.
<?= ws_planner_inspector_rail([
'energy' => [
'title' => 'Energy arc',
'meta' => '8 of 4h used · 0m over',
'card' => [ /* forwarded to ws_energy_arc_card */ ],
],
'coach' => [
'title' => 'Coach suggests',
'meta' => '3 notes',
'items' => [
['icon' => 'schedule', 'pre' => 'TIMING',
'line' => 'Five Whys runs long — budget <em>45 min</em>, not 40.',
'meta' => 'Based on 142 prior runs', 'action' => 'apply'],
],
],
'facilitators' => [
'title' => 'Facilitators',
'avatars' => [['initials' => 'PS', 'bg' => '…']],
'presence' => ['name' => 'Priya Sundararajan', 'status' => 'editing · 2 others viewing'],
],
]) ?>Energy only
Omit a section and it disappears. Use this when the rail only needs to surface the arc — a solo facilitator with no coach notes.
<?= ws_planner_inspector_rail(['energy' => ['title' => 'Energy arc', 'card' => $arc]]) ?>
States
| State | Behavior |
|---|---|
| Section present | Rendered with a divider above it. The last section takes --section--last and drops its trailing rule. |
| Section omitted | Passing null or leaving the key out removes it entirely — no heading, no divider. |
| Suggestion emphasis | Inline <em> inside a coach line renders in the phase colour. It's the one place markup is honoured, so escape any user data before it goes in. |
| Suggestion icons | Defaulted from pre when no icon is given: TIMING→schedule, ENERGY→monitoring, CLOSE→chat_bubble. |
| Presence | Static text as passed. The rail doesn't poll or subscribe — supply fresh values from your own presence layer. |
| Phase theming | Accents read --wpir-phase. Override it on the container through attrs to retheme the rail for another app. |
warning
When overriding
--wpir-phase, pass a token reference — style="--wpir-phase: var(--phase-facilitate);" — not a literal hex. Earlier guidance here suggested #7C4DFF, which is the retired pre-unification purple; every phase token now resolves to Learn Red.
Real-World Usage
The Planner's right column, swapping between this rail and the activity inspector on selection. Energy comes from the scorer; suggestions from the Coach; presence from the live layer.
<?php if ($selectedItem): ?>
<?= ws_planner_activity_inspector($selectedItem) ?>
<?php else: ?>
<?= ws_planner_inspector_rail([
'energy' => [
'title' => 'Energy arc',
'meta' => formatDuration($used) . ' of ' . formatDuration($total) . ' used',
'card' => $energyScorer->cardOptions($planId),
],
'coach' => $suggestions ? [
'title' => 'Coach suggests',
'meta' => count($suggestions) . ' notes',
'items' => array_map(fn($s) => [
'pre' => strtoupper($s['category']),
'line' => $s['html'], // pre-escaped, may contain <em>
'meta' => $s['evidence'],
'action' => $s['action_label'],
], $suggestions),
] : null,
'facilitators' => $collaborators ? [
'title' => 'Facilitators',
'meta' => count($collaborators) . ' collaborating',
'avatars' => array_map(fn($c) => ['initials' => $c['initials'], 'bg' => $c['color']],
$collaborators),
'presence' => ['name' => $activeEditor['name'], 'status' => $activeEditor['status']],
] : null,
]) ?>
<?php endif; ?>Options
| Option | Type | Purpose |
|---|---|---|
energy | array|null | ['title', 'meta', 'card']. card is forwarded to ws_energy_arc_card(); the rail sets showHeader => false and defaults the score badge to note. |
coach | array|null | ['title', 'meta', 'items'], each item ['icon?', 'pre', 'line', 'meta', 'action', 'href?']. line honours inline <em>. |
facilitators | array|null | ['title', 'meta', 'avatars', 'presence']. avatars is [['initials', 'bg']] where bg takes any CSS background including gradients; presence is ['name', 'status']. |
id | string | Element ID |
class | string | Additional CSS classes |
attrs | array | Extra HTML attributes — where the --wpir-phase override goes |
info
The avatar stack uses an initials pattern rather than Avatar. That's intentional for density at this size — don't substitute
<img> avatars here.
Accessibility
| Concern | Behavior |
|---|---|
| Decorative icons | Suggestion icons and dividers carry aria-hidden="true", so they aren't read as stray text. |
| Section headings | Rendered as text rather than heading elements, so the rail doesn't pollute the page outline. The trade-off is that screen-reader users can't jump between sections by heading — acceptable in a fixed three-section rail. |
| Suggestion actions | Action labels are short verbs ("apply", "preview", "add 3m"). Out of context those are ambiguous — give each an aria-label naming what it applies to. |
| Emphasis | Inline <em> is semantic emphasis, announced as such. Good — the phase colour reinforces rather than replaces it. |
| Presence | Changes to who's editing aren't announced; the text is rendered once. If presence matters live, add a polite live region. |
| Avatar initials | Initials alone are near-meaningless to a screen reader. The presence line names the active editor, which covers the common case — but the other avatars are unnamed. Add a title or visually-hidden name per avatar if the roster matters. |
| Energy chart | Owned by Energy Arc Card — see that page for its text-alternative behaviour. |
Tokens
The rail resolves the shared scales into a local --wpir-* set, so its internal rules reference one variable per role and the whole rail can be rethemed from the container.
| Token | Used for |
|---|---|
--wpir-phase | Accent for the score, chart line, suggestion icons, and inline <em>. The override point. |
--wpir-surface / --wpir-paper-edge | Rail surface and its section dividers |
--wpir-ink / -soft / -quiet / -whisper | The four text weights, from title down to meta |
--wpir-display / --wpir-mono | Resolved display and mono faces |
--color-surface / --gray-200 | Source surfaces and borders |
--color-ink / -secondary / -muted / -faint | Source ink scale |
--font-display / --font-sans / --font-mono | Source faces — Fraunces titles, Inter body, mono eyebrows |
--planner-exercise-color | Activity accent where a suggestion references one |
--text-nano / --text-caption / --text-meta / --text-h4 | Type scale across the rail |
--text-inverse | Initials on the avatar gradients |
CSS Classes
| Class | Purpose |
|---|---|
.ws-planner-inspector-rail | Rail container — where --wpir-* is defined and can be overridden |
.ws-planner-inspector-rail__section | A section block |
.ws-planner-inspector-rail__section--last | Final section; drops the trailing divider |
.ws-planner-inspector-rail__title | Section title and its meta |
.ws-planner-inspector-rail__energy | Energy slot wrapping the arc card |
.ws-planner-inspector-rail__suggestions | Coach suggestion list |
.ws-planner-inspector-rail__sugg | One suggestion |
.ws-planner-inspector-rail__sugg-icon / -pre / -line / -meta | Suggestion internals |
.ws-planner-inspector-rail__avatars | Facilitator initials stack |
.ws-planner-inspector-rail__presence / -meta | Active-editor line |
Files
| File | Purpose |
|---|---|
includes/components/helpers.php | ws_planner_inspector_rail() helper function |
includes/components/planner-inspector-rail.php | Template — the three sections and the energy-card forwarding |
includes/components/energy-arc-card.php | Renders the energy slot |
includes/components/components.css | Styles and the --wpir-* definitions |
css/planner/components/_sidebar.css | Planner-side rail styling |