Graph component system

The reusable kit behind the Context Map and every graph surface after it. Classes are the gc-* hand-off contract for @relay/ui; the canvas specs (shape, stroke, motion) are the drawing contract for the map renderer. Prototype source of truth: concepts/map-v35.html.

Shape is the typeObject types read from shape and glyph, never colour. The map must work in black and white first.
Teal is stateSelection, links, Codes, and live motion only. #00D9C8 appears exclusively in motion, never as a static fill.
Absence is visibilityOnly envelopes the viewer can resolve are drawn. What they cannot see is absent, never a redacted ghost (fail closed).
Time is honestRelative times tick and are seconds-accurate; the exact timestamp is always one hover away.

Nodes

Canvas drawing spec. Fill --panel, stroke --border-hi (1.3px); selected: --accent-tint fill + --ring stroke (2.2px); locked: 3/3 dashed stroke; outside the activity window: 50% opacity. Live pulse: expanding --pulse ring, motion only, reduced-motion gets a static teal dot.

gc-node — five types · Stream ◉ circle r17 · Relay ⇄ rect · Session ▭ diamond · Series ❏ rounded rect · Resource ⛁ hexagon
◉Q3 Launch
⇄BBF6FE
▭Session
❏weekly-standup
⛁runbook.md
states — selected · live (motion) · locked (claim-gated) · outside window · cross-workspace tag
⇄TQ2WENselected
◉Infra & Deploylive · last hour
⇄QW8PLClocked until claim
◉EAP Onboardingoutside window
⇄MRD4X2M · Meridian

Relation lines

Line style is the relation; weight varies slightly so contains reads structural. Stroke --border-hi, emphasized to --text-muted with a direction tick at the target end on hover or selection. Never coloured.

gc-line — the four styles (SPEC.context-graph.md §3.1 vocabulary)
containsholds it — solid, 2px
referencesmentions or uses it — dotted, 1.4px
derived fromwas made from it — long dash, 1.6px
continuespicks up where it left off — dash-dot, 1.6px

Object chips & relation groups

The chip is the atom of graph navigation: glyph + live title + Code or type tag. Shipped in the web app (objectref.ts + related.ts); groups cap at 6 with a “+N more” expander. Tombstoned targets render struck-through and inert.

gc-relgroup + gc-chip + gc-more

References 8

Envelope overlay

The hover tooltip is envelope-only and exact: type + status, title or Code, workspace + visibility + claims, and a precise, call-time-computed timestamp. Inverted surface for contrast over any canvas.

gc-tip
RELAY · locked
QW8PLC — Rollout checklist
Meridian · guest · org · claims 0/3
last activity 20m 04s ago · 16:42:11

Envelope spec

The detail view is the full envelope: everything the substrate knows without ever touching content. Exact times carry a hover title with the full timestamp.

gc-spec
From
kt
Workspace
Meridian · guest
Visibility
org · content locked until claim
Region
eu
Claims
0/3
Tags
pilot, rollout
Created
5h 00m ago
Last activity
20m 04s ago
Connections
3

Workspace rows & org tags

Workspaces are a filter dimension, not a colour. The org tag is a bordered mono initial; on the canvas it appears under labels only while more than one workspace is visible.

gc-orgrow + gc-orgtag


List row (ranked view)

The List view is the ranked twin of the map: same set, sorted by last activity. Anatomy is the ratified v3.5 list (unify-v35 .m-li): neutral glyph tile, title + muted sub-line (Code in teal mono), mono-uppercase badge whose LABEL carries the status (neutral-first: never color alone). Selection is a ring; the tile flips to tint.

gc-list + gc-li + gc-badge

Activity feed

Rows carry a ticking, compact relative time (now → 42s → 4m → 2h) and the exact timestamp on hover. Codes are teal mono; object names bold. Clicking a row focuses the object on the map.

gc-feed
  • nowHAVVPX received — Standup #28
  • 42sSession graph substrate saved an item to Infra & Deploy
  • 8mA4K9R2 received by dev — Deploy runbook handoff

Mobile: type chips

On phones the type filter floats over the map as a thumb-first chip row; the rail becomes a bottom sheet behind a three-tab bar (Filters · Activity · Help).

gc-tchip

Guided tour card

The help layer: spotlight ring + card, pointer-transparent scrim (the map stays interactive), arrow keys step, always skippable, replayable from the legend under ?.

gc-tour (spotlight ring: 2px --ring border + page-tint box-shadow scrim)
4 / 7

Workspaces, one map

Every org you belong to is here; toggle any of them off. What you cannot see is absent, never a redacted ghost.

←→