The addressable tour
Tour panel iterations

Source: c125 × c123 — the tour layer's panel, dialled in · 2026-10-29 · notes cycles/c125.operations-wizard/tour-layer.md § 6

The same tour, the same steps, five panels. v1 is the first build, kept as it was. v2 and v3 answer Mark's review of it: the dark panel may not survive a theme change, and the panel is information overload, colliding with its own controls. Each iteration opens on the same step (Source health · Watch); switch between them at any step from the iteration switch in the mock bar's tour row.

The tours

Five tours, in the order a customer meets them (c123 tours-plan.md). Each opens from its first step in v5 · Panel, the design going forward (Mark, 2026-10-29). Demo opens it with the lab's chrome hidden and an empty Policy Config draft, for recording (Shift+D toggles it on any lab page). Earlier iterations stay a click away. Every stop and step: Tours.

Tour
Steps
Open
Start here
Install on one machine and watch it report.
6
Common AI risks
What could go wrong with AI here, and what Qpoint does about each.
11
Observe, then enforce
Turn protection on without breaking anyone's work.
8
AI spend
Who's spending what on AI, and where to save.
6
OWASP® Agentic Top 10
Your agents against the paper, and your evidence.
22
Simulation · Phishing for financial records
A story of AI going wrong, played as a simulation on synthetic data.
8
Simulation · The server that phones home
A story of AI going wrong, played as a simulation on synthetic data.
7
Simulation · The secrets stealer
A story of AI going wrong, played as a simulation on synthetic data.
8
Simulation · The public link
A story of AI going wrong, played as a simulation on synthetic data.
7
Simulation · Card numbers to a stranger
A story of AI going wrong, played as a simulation on synthetic data.
6
Simulation · The runaway loop
A story of AI going wrong, played as a simulation on synthetic data.
8

The iterations

v1 · Grape

2026-10-27

The first build: a dark grape panel, the whole step in it, the switches in its header.

  • Stop bar, beats and risk IDs in the header
  • Lede, numbers, mitigations, lists and settings in the body
  • Panel (Float · Split) and Focus (Ring · Dim · Fade) in the header

Opens with Float · Ring.

v2 · Cyan

2026-10-29

v1's panel, light, with every word in cyan, so the narrator reads as meta text in light and dark mode alike.

  • The page's own surface for the panel; cyan 600 to 800 type (cyan 100 to 400 in dark mode)
  • Content and controls as v1, plus Ring + Dim
  • Rings, callouts, Examples and the pill in cyan

Opens with Split · Ring + Dim.

v3 · Brief

2026-10-29

v2's material, cut to a title and a description. The controls move to the mock bar.

  • Panel: the stop's name, the question, the step's lede (a drill: its "what if" and what happens today)
  • The step's one action, then Back and Next
  • Mock bar: stop and its bar, beats, risk IDs, Panel, Focus, minimize, end

Opens with Split · Ring + Dim.

v4 · Tuned

2026-10-29

v3 as Mark redrew it in Illustrator: one blue-cyan, a tinted overlay, no ring, a bigger callout.

  • #0099ff for every word and fill, white type on fills, on white (black in dark mode)
  • Overlay #73858f at 60%, laid over the sticky band and the tray too; the highlighted section is the cut-out, with no ring and 12 px more room
  • Callout: 13 px semibold, a big numbered disc, a pointer toward the section

Opens with Split · Dim.

v5 · Panel

2026-10-29

v4 with an Example's controls in the panel: numbered like its card, with Simulate and the scenario to simulate.

  • The card on the page keeps only its number
  • In the panel: the number, the card's name, a Simulate box and a scenario (the lab's five drills)
  • Ticking, or picking a scenario, shows the example on the card

Opens with Split · Dim.

The callout: TourMarker

One piece for every callout the tour draws (v4 and v5), from Mark's 2026-10-29 sheet: a number, an optional title and description, a size (lg, sm) and a pointer (left, center, none; on the bottom edge, or the top when it sits below what it marks). With neither title nor description it's a pin. Extra content (v4's Simulate box) goes in its slot.

title
1Findings card
1Findings card
title + description
1Findings cardpostmark-mcp-server has a look-alike name and is changed since review.
1Findings cardpostmark-mcp-server has a look-alike name and is changed since review.
description · pointer center
1postmark-mcp-server has a look-alike name and is changed since review.
1postmark-mcp-server has a look-alike name and is changed since review.
pin
1
1
pointer on top (below what it marks)
2Open findings
2
no pointer
3Findings cardpostmark-mcp-server has a look-alike name and is changed since review.

Across v2 and v3

  • Cyan is the tour's material, not grape: the panel, ring, callouts, Example frames, top edge and pill. Grape is the product's primary, so a grape narrator reads as product. v3 and the marks use pure cyan (#00FFFF) on a white ground, black in dark mode; light-mode type is a deep cyan, since pure cyan can't be read on white. v2's panel keeps the Tailwind cyan it was built with. No token yet.
  • Ring + Dim, a fourth Focus: the scrim with the ring at full strength (Dim alone keeps the ring quiet). The default for v2 and v3.
  • A slow scroll to each step's region: an eased glide (0.7 to 1.6 s by distance) that centres it under the sticky band, and stays put when it's already in view. A wheel or touch stops it. v1 keeps its quick jump.
  • The tour's in-page marks sit under the sticky band (z 15 to 18; the band is 20 to 40), in every iteration.

Qpoint Brand Style Guide