Minder01
Six decisions the role cuts and the first-run walk were built on. Each names where it was borrowed from.
RULE 01
Builder, manager and operator see subsets of one navigation. Nothing is rebuilt per role; items carry the roles that may see them, and the shell filters.
From: Linear's member vs guest; Notion's workspace roles.RULE 02
A screen the rail never offered does not open by address either — the shell sends you home. Otherwise a link in a chat can lead a manager into the SQL workbench.
From: Retool's end-user mode.RULE 03
A manager's rail is chat, production and artifacts. A fourth item is a fourth thing to explain on day one; the walk below has three or four steps because the rail has three or four places.
From: Superhuman's onboarding; ChatGPT's sidebar.RULE 04
Canvas, board and chat answer from the same fixture. A walk that changes factory between steps teaches that the screens are unrelated, which is the one thing they are not.
From: Stripe's test-mode data; Palantir's demo ontologies.RULE 05
The walk is a checklist with links into the real screens. Someone who knows the board skips to the chat; someone interrupted sees where they were. No step blocks the next.
From: Slack's setup checklist; GitHub's first-repo guide.RULE 06
Each step is a short list of real elements on the screen. The screen dims, a hole is left around the element, and the click on it is what moves the walk on — there is no Next button to press instead of doing the thing.
From: Intercom product tours; Pendo's spotlight; Apple's coach marks.02
One rail, three subsets. Items carry the roles that may see them; a heading with nothing under it is dropped; a parent whose first child is hidden points at the next.
composed · workspace-navigation.tsBuilderThe whole product. Lands on databases.
Production
Data
Tools
Footer
ManagerChat, production, artifacts. Edits the plant model. Lands on the walk, then chat.
Production
OperatorThe same, minus the canvas. Reads the plant, never draws it.
Production
composed · the same list, unfilteredManagerChat, production, artifacts. Edits the plant model. Lands on the walk, then chat.
Production
Data
Tools
Footer
03
The walk as a list. One plant named at the top, a progress line, and each step a link into the real screen. Three states: untouched, midway, finished.
composed · badge + progress + itemEverything here reads from one plant: its lines on a canvas, its shifts on a board, and a chat that answers from the same numbers. This walk takes about five minutes.
The canvas is the plant as its people describe it: areas, stations, and the machines at each. Everything else hangs off it.
The board is the plant today, machine by machine: what ran, what it drew, and what that cost. Every chart on it came out of a question.
Ask in plain language. The answer arrives with its chart or table beside it, and the query behind it one click away.
Charts and tables from a conversation can be kept, so next week starts from this week rather than from nothing.
composed · badge + progress + itemEverything here reads from your plant: its shifts on a board, and a chat that answers from the same numbers. This walk takes about three minutes.
The board is the plant today, machine by machine: what ran, what it drew, and what that cost. Every chart on it came out of a question.
Ask in plain language. The answer arrives with its chart or table beside it, and the query behind it one click away.
Charts and tables from a conversation can be kept, so next week starts from this week rather than from nothing.
composed · badge + progress + itemEverything here reads from one plant: its lines on a canvas, its shifts on a board, and a chat that answers from the same numbers. This walk takes about five minutes.
From here the rail is yours. Come back to any step to take it again.
The canvas is the plant as its people describe it: areas, stations, and the machines at each. Everything else hangs off it.
The board is the plant today, machine by machine: what ran, what it drew, and what that cost. Every chart on it came out of a question.
Ask in plain language. The answer arrives with its chart or table beside it, and the query behind it one click away.
Charts and tables from a conversation can be kept, so next week starts from this week rather than from nothing.
04
The screen is asked to bring the subject forward, the camera travels, then the light lands: one sheet of 62% ink cut by an SVG mask, a hole that opens 28px wide and settles in 500ms, a halo that breathes, and a card that slides in beside it. Clicking the element is the step forward — nothing else on the screen takes a click until it is.
composed · card + progress + buttonone masked sheet · hole · halo + hairline · card beside, below, or abovecomposedcomposedcomposedspotlight-tour.tsxHOLE 01
The dim is a single masked rectangle that takes no pointer events. Clicks outside the hole are refused in the capture phase, so the sheet never has to catch them and the hole can travel.
HOLE 02
Several elements share an anchor. The hole goes around the first one in view and on top; a chip behind the sidebar or off a panned canvas is skipped.
HOLE 03
Canvases paint late, panes slide in, people scroll. The hole follows, and moves rather than jumps: 500ms on a (0.2, 0.8, 0.2, 1) curve, the same curve the card arrives on.
HOLE 04
When the target is a link to the next screen, the walk lets it navigate and picks up there. State lives in the store; ?tour= opens a step and is taken straight back out of the address.
HOLE 05
A target may name something for the screen to bring into view. The plant canvas frames that station at 1.35× over 700ms, holds it while a panel opens, and glides back to the whole plant when the walk moves on. The hole waits a full second rather than chasing a moving canvas.
HOLE 06
With a station framed, the anchor is searched within that node first. Otherwise the light lands on whichever chip happens to be first in the document — correct, and useless to look at.
05
Each step has a title, one sentence of what the screen is, and one line per target. A target line names the element and what clicking it does, in both languages.
app/_i18n · welcome.step.*| Step | Targets, in order |
|---|---|
| Meet the plantGặp nhà máy | 1 Click a machine chip to open its card.Bấm một chip máy để mở thẻ của nó. 2 From here to the board, with this machine already in mind.Từ đây sang bảng theo dõi, mang theo đúng máy này. |
| Watch a shiftXem một ca | 1 A chart already on the board. Click it to select it.Một biểu đồ có sẵn trên bảng. Bấm để chọn nó. 2 Ask the board for a chart of your own.Hỏi bảng một biểu đồ của riêng anh. |
| Ask a questionHỏi một câu | 1 The question is already typed. Send it.Câu hỏi đã gõ sẵn. Gửi đi. 2 The answer carries a chart. Click the card to open it beside the chat.Câu trả lời mang theo một biểu đồ. Bấm thẻ để mở nó bên cạnh. |
| Keep what mattersGiữ lại điều quan trọng | 1 This is where kept answers will live. Click it to finish the walk.Đây là nơi các câu trả lời đã giữ sẽ nằm. Bấm để kết thúc hành trình. |