Version 2 of 2 · · razie via designer-105designer · Current version

Open the page

---
description: P-1360 mockup as a signed base d2 Page, so the Focus entry's right pane runs each step's live page (razie, chat 6acce388, 2026-10-12); same parts as d2spec App:Mockup-flows-v1 (cdn designer/design/P-1360/flows/)
tags: page, mockup, wip
---
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flow view (mockup)</title>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@600;700&display=swap" rel="stylesheet"><style>
:root{--paper:#fbfaf7;--card:#fff;--ink:#1d1d1b;--soft:#6b6a66;--line:#e4e1da;--accent:#9a4b12;--accent-bg:#f5e8dc;--sun:#d99a2b;--sun-bg:#fbf1dc;--leaf:#3f7d4e;--leaf-bg:#e6f1e8;--rose:#b23a48;--rose-bg:#f8e6e6;--violet:#7b3fb8;--violet-bg:#f2eafb;--teal:#1f7a8c;--teal-bg:#e3f2f5;--slate-bg:#f3f1ec}
@media (prefers-color-scheme:dark){:root{--paper:#141413;--card:#1d1d1b;--ink:#ecebe6;--soft:#9c9a93;--line:#33322f;--accent:#e0995c;--accent-bg:#3a2a1c;--sun:#e6b456;--sun-bg:#3a321c;--leaf:#7cc28d;--leaf-bg:#1d2f22;--rose:#e57d89;--rose-bg:#3a1f23;--violet:#b48be6;--violet-bg:#2b2236;--teal:#6cc3d4;--teal-bg:#1a2e33;--slate-bg:#252422}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--accent)}
header.top{padding:12px 18px 0;border-bottom:1px solid var(--line);background:var(--card)}
header.top h1{margin:0;font-size:20px;font-family:Manrope,system-ui,sans-serif}
header.top p{margin:2px 0 8px;color:var(--soft);font-size:13px}
.mock{display:inline-block;margin-left:8px;font-size:11px;padding:1px 8px;border-radius:999px;background:var(--sun);color:#fff;vertical-align:middle;font-family:system-ui}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);border-bottom:none;background:var(--slate-bg);color:var(--ink);padding:7px 14px;border-radius:8px 8px 0 0;font:inherit;font-size:14px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--paper);font-weight:600;border-color:var(--accent)}
section.view{display:none;padding:14px 18px 40px;max-width:1100px;margin:0 auto}
section.view.on{display:block}
.crumb{font-size:13px;color:var(--soft);margin:0 0 10px}
.crumb a{text-decoration:none}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.bar h2{margin:0 12px 0 0;font-size:18px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;user-select:none}
.chip[aria-pressed=true]{border-color:currentColor}
.chip.f{color:var(--teal)}.chip.c{color:var(--violet)}.chip.t{color:var(--sun)}.chip.k{color:var(--rose)}
.legend{font-size:12px;color:var(--soft)}
/* the flow */
.flow{display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 0 4px}
.arrow{width:2px;height:22px;background:var(--line);position:relative;margin:0 auto}
.arrow::after{content:"";position:absolute;bottom:-2px;left:-4px;border:5px solid transparent;border-top-color:var(--line)}
.arrow .lbl{position:absolute;left:10px;top:2px;font-size:11px;color:var(--soft);white-space:nowrap}
.row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:flex-start;width:100%}
.branch{display:flex;flex-direction:column;align-items:center;gap:0;min-width:0}
.branch .tag{font-size:11px;color:var(--soft);margin-bottom:4px}
.node{position:relative;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;width:280px;max-width:86vw;cursor:pointer;text-align:left;font:inherit;color:inherit;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.node:hover{border-color:var(--accent)}
.node.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.node.start{border-top:3px solid var(--leaf)}.node.end{border-bottom:3px solid var(--leaf)}
.node.side{width:200px;background:var(--slate-bg)}
.node.gated{border-style:dashed}
.node .n{font-size:11px;color:var(--soft)}
.node b{display:block;font-size:14px}
.node code{font-size:11px;color:var(--soft)}
.node .counts{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.cnt{font-size:11px;padding:0 6px;border-radius:999px}
.cnt.f{background:var(--teal-bg);color:var(--teal)}.cnt.c{background:var(--violet-bg);color:var(--violet)}.cnt.t{background:var(--sun-bg);color:var(--sun)}.cnt.k{background:var(--rose-bg);color:var(--rose)}
.layer{display:none;margin-top:6px;border-top:1px dashed var(--line);padding-top:5px;font-size:12px}
.flow.show-f .layer.f,.flow.show-c .layer.c,.flow.show-t .layer.t,.flow.show-k .layer.k{display:block}
.layer span{display:inline-block;margin:1px 4px 1px 0;padding:0 6px;border-radius:6px}
.layer.f span{background:var(--teal-bg)}.layer.c span{background:var(--violet-bg)}.layer.t span{background:var(--sun-bg)}.layer.k span{background:var(--rose-bg)}
/* details below */
.below{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.below h3{margin:0 0 2px;font-size:17px}
.below .sub{color:var(--soft);font-size:13px;margin:0 0 10px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px}
.card h4{margin:0 0 6px;font-size:13px;display:flex;gap:6px;align-items:center}
.card h4 .dot{width:8px;height:8px;border-radius:50%}
.card ul{margin:0;padding-left:16px}.card li{margin:2px 0}
.card .st{font-size:11px;color:var(--soft)}
.card.f .dot{background:var(--teal)}.card.c .dot{background:var(--violet)}.card.t .dot{background:var(--sun)}.card.k .dot{background:var(--rose)}.card.p .dot{background:var(--accent)}
.note{background:var(--sun-bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;margin:14px 0}
.note b{color:var(--ink)}
/* entry: focus */
.focus{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px}
@media (max-width:820px){.focus{grid-template-columns:1fr}}
.pane{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.pane h3{margin:0 0 8px;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{border:none;background:transparent;color:var(--ink);padding:4px 12px;font:inherit;font-size:13px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--accent);color:#fff}
.brain{position:relative;height:260px;border-radius:10px;background:var(--slate-bg);overflow:hidden}
.brain .bn{position:absolute;font-size:12px;padding:3px 9px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.brain svg{position:absolute;inset:0;width:100%;height:100%}
.brain svg line{stroke:var(--line);stroke-width:1.5}
.mini .node{width:220px;padding:6px 10px}.mini .node b{font-size:13px}.mini .arrow{height:14px}
.notes .th{border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin:0 0 7px;font-size:13px;background:var(--paper)}
.notes textarea{width:100%;min-height:60px;border:1px solid var(--line);border-radius:8px;padding:7px;font:inherit;font-size:13px;background:var(--paper);color:var(--ink)}
/* entry: feature */
.feat h3{margin:12px 0 4px;font-size:16px}
.feat table{border-collapse:collapse;font-size:13px;width:100%}
.feat td{border-top:1px solid var(--line);padding:5px 6px;vertical-align:top}
.strip{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:12px;margin:6px 0}
.strip span{padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.strip span.hit{border-color:var(--teal);background:var(--teal-bg)}
.strip i{color:var(--soft);font-style:normal}
.flowcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0}
.flowcard .go{float:right;font-size:13px}
.q ol{margin:6px 0 0;padding-left:20px}.q li{margin:4px 0}
.node code{word-break:break-all}
#fflow{max-height:560px;overflow:auto}
.pghead{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;margin:0 0 6px}.pghead code{font-size:11px;color:var(--soft)}
#pgshot{max-height:560px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--paper)}#pgshot img{display:block;width:100%;height:auto}.noshot{padding:30px 16px;color:var(--soft);font-size:14px;text-align:center}
#pgshot iframe{display:block;width:100%;height:640px;border:0;background:var(--paper)}
html.live #pgshot{max-height:none}
html.live .shotnote{display:none}html:not(.live) .livenote{display:none}
</style></head><body>
<header class="top">
  <h1>Flow view <span class="mock">mockup</span></h1>
  <p>A flow is the path through an app's pages, top to bottom, drawn from the links between them. Each step shows what it touches. Real data: onboarding a Conductor project. <a href="https://d2spec.aiputty.com/pipeline/P-1360">P-1360</a></p>
  <nav class="tabs" role="tablist">
    <button role="tab" data-v="flow" aria-selected="true">1 · The flow</button>
    <button role="tab" data-v="focus" aria-selected="false">2 · From a Focus</button>
    <button role="tab" data-v="feature" aria-selected="false">3 · From a feature</button>
    <button role="tab" data-v="questions" aria-selected="false">4 · Open points</button>
  </nav>
</header>
<section class="view on" id="v-flow">
  <p class="crumb"><a href="#" data-back>← back to where you came from</a> · the flow remembers it (a Focus, a feature, a page)</p>
  <div class="bar">
    <h2>Onboarding for Conductor projects</h2>
    <span class="legend">show on each step:</span>
    <span class="chip f" data-layer="f" aria-pressed="false">features &amp; behaviours</span>
    <span class="chip c" data-layer="c" aria-pressed="false">classes</span>
    <span class="chip t" data-layer="t" aria-pressed="true">thoughts</span>
    <span class="chip k" data-layer="k" aria-pressed="true">tickets</span>
  </div>
  <div class="flow show-t show-k" id="flow"></div>
  <div class="below" id="below"></div>
</section>
<section class="view" id="v-focus">
  <p class="crumb">Thoughts › <a href="https://d2spec.aiputty.com/thoughts/focus/razie-157?project=d2spec">Focus: flows</a></p>
  <div class="note"><b>Entry 1 · the Focus brain.</b> A <b>Brain | Flow</b> switch on the brain pane. Flow replaces the brain in place: same Focus, same notes on the right. Picking a flow is remembered with the Focus, so it opens on the flow next time. Tap a step: its <b>page opens on the right</b> (Notes one tap away; <b>+ note on this page</b> starts a thought tagged with it), and <b>+ to Focus</b> adds the step as a member.</div>
  <div class="focus">
    <div class="pane">
      <h3><span>Focus: flows</span>
        <span class="seg"><button data-fv="brain" aria-pressed="false">Brain</button><button data-fv="flow" aria-pressed="true">Flow</button></span>
      </h3>
      <div id="fbrain" class="brain" hidden>
        <svg aria-hidden="true"><line x1="22%" y1="30%" x2="50%" y2="50%"/><line x1="78%" y1="28%" x2="50%" y2="50%"/><line x1="25%" y1="78%" x2="50%" y2="50%"/><line x1="76%" y1="76%" x2="50%" y2="50%"/></svg>
        <span class="bn" style="left:42%;top:45%"><b>flows</b></span>
        <span class="bn" style="left:6%;top:24%">razie-158 a flow is a diagram</span>
        <span class="bn" style="left:60%;top:22%">razie-159 flow navigation</span>
        <span class="bn" style="left:8%;top:72%">razie-160 one big mockup</span>
        <span class="bn" style="left:62%;top:70%">razie-161 #bug focus view</span>
      </div>
      <div id="fflow">
        <div class="bar"><span class="legend">flow:</span> <select id="fpick"><option>Onboarding for Conductor projects</option><option disabled>Onboarding for Pro projects</option><option disabled>Thoughts → Focus → ticket</option></select></div>
        <div class="flow mini show-k" id="miniflow"></div>
      </div>
    </div>
    <div class="pane notes">
      <h3><span class="seg"><button data-rp="notes" aria-pressed="true">Notes</button><button data-rp="page" aria-pressed="false">Page</button></span><span class="legend" id="rplbl">tap a step to see its page here</span></h3>
      <div id="rp-notes">
        <div class="th"><b>razie-158</b> a flow is a diagram: the flow of elements and associated things…</div>
        <div class="th"><b>razie-159</b> flow navigation: enter from different spots, remember where from…</div>
        <div class="th" id="fsel"><b>Step:</b> tap a step on the left</div>
        <textarea placeholder="new thought in this Focus… (e.g. “#bug Start your agents: New link should confirm”)"></textarea>
      </div>
      <div id="rp-page" hidden>
        <div class="pghead"><b id="pgtitle"></b> <code id="pgpath"></code> <a id="pgopen" target="_blank" rel="noopener">open ↗</a> <button class="chip" id="pgnote">+ note on this page</button></div>
        <div id="pgshot"></div>
        <p class="legend shotnote">This copy runs sandboxed and can't frame d2, so it shows a picture of each page. The live version is the signed page <a href="https://aiputty.com/page/Mockup-flows">Page:Mockup-flows</a>. A note written here goes into this Focus, tagged with the page.</p><p class="legend livenote">The live page, running as you: its buttons really act. A note written here goes into this Focus, tagged with the page.</p>
      </div>
    </div>
  </div>
</section>
<section class="view feat" id="v-feature">
  <p class="crumb">Features › <a href="https://aiputty.com/features">onboard</a></p>
  <div class="note"><b>Entry 2 · a feature's page.</b> A <b>Flows</b> section lists every flow that passes through a page carrying one of this feature's behaviours. Its steps that do are highlighted. <b>Open →</b> goes to the flow and remembers this feature, so <i>← back</i> returns here.</div>
  <h3>onboard · Onboarding a project</h3>
  <table>
    <tr><td>^onboard-11</td><td>The last step makes the dashboard home</td></tr>
    <tr><td>^onboard-12</td><td>Setup is the home until the dashboard step</td></tr>
    <tr><td>^onboard-13</td><td>Will other people work here?</td></tr>
    <tr><td>^onboard-14…16</td><td>Start your agents: one link per role, Copy, New link, live dot</td></tr>
  </table>
  <h3>Flows</h3>
  <div class="flowcard">
    <a class="go" href="#" data-open-flow>Open →</a>
    <b>Onboarding for Conductor projects</b> <span class="legend">· 10 steps · 3 touch this feature</span>
    <div class="strip" id="fstrip"></div>
  </div>
  <div class="flowcard" style="opacity:.55">
    <span class="go">Open →</span>
    <b>Onboarding for Pro projects</b> <span class="legend">· not drawn in this mockup</span>
    <div class="strip"><span>Landing</span><i>→</i><span>Pro landing</span><i>→</i><span>…</span><i>→</i><span class="hit">Ready to prototype</span><i>→</i><span class="hit">Start your agents</span><i>→</i><span class="hit">Dashboard</span></div>
  </div>
</section>
<section class="view q" id="v-questions">
  <h2>Open points for the review</h2>
  <ol>
    <li><b>Name clash.</b> <code>/flows</code> is already the rule engine's flow list (a Toolbox tile). My pick: call these <b>Journeys</b> at <code>/journeys</code>. Or keep <i>Flows</i> and rename the engine page <i>Runs</i>.</li>
    <li><b>Where a flow starts and ends.</b> Since a flow comes from page links, someone names its first and last page, and d2 walks the links between them. My pick: a flow is a line in the feature's Spec section, <code>flow: Onboarding for Conductor = App:Landing → Page:DashboardMaster</code>, so it has no topic of its own.</li>
    <li><b>Which links count.</b> Links in a page's body, buttons and <code>home-button</code> blocks count. Help, Toolbox and the menu don't count, or every page would link to every page. Side pages (doors A and B, Plan) show beside the step they return to.</li>
    <li><b>Behaviours per step.</b> A step shows a behaviour when its page's topic names the code (<code>^ui-doors-1</code>) or the Spec line names the page. Classes come from the Spec section's domain.</li>
    <li><b>Thoughts and tickets per step.</b> These are open thoughts and not-done tickets that link the page or one of its behaviour codes. Parked tickets show greyed.</li>
    <li><b>More entry points, later.</b> A page topic (<i>In flows</i>), a ticket (its step in the flow) and the Dashboard (a Flows tile).</li>
  </ol>
</section>
<script>
// Onboarding for a Conductor (master) project, derived from the links between base d2's pages (razwip cc6118a, 2026-10-12).
// Each step: page, what links it to the next, and what it touches. Real ids; P-n and thoughts as of 2026-10-12.
const S="https://d2spec.aiputty.com",A="https://aiputty.com",SHOT="https://cdn.aidieselapps.com/d2spec/designer/design/P-1360/flows/shots/",SHOTS=["landing","lmaster","signup","name","kind","home","doorA","doorB","setup","start","agents","dash"];
const FLOW={
 name:"Onboarding for Conductor projects",
 from:"App:Landing",
 steps:{
  landing:{n:1,title:"Landing",page:"App:Landing",path:"/",href:A+"/",kind:"start",
   why:"d2's front page; the level cards link on",
   f:[["landing","Landing pages per level"]],
   c:[],
   t:[],
   k:[["P-844","Pro and Master on the landing page","new"],["P-1346","Landing ignores d2spec/metals: last used picks d1","waiting on you"],["P-90","Landing, welcome and home pages per level","paused"]]},
  lmaster:{n:2,title:"Conductor landing",page:"App:Landing-master",path:"/app/Landing-master",href:A+"/app/Landing-master",
   why:"the Conductor card's page; Sign up →",
   f:[["landing","Landing per level"],["levels","Conductor naming (master in code)"]],
   c:[["Level","master, shown as Conductor"]],
   t:[["razie-137","Project type: Hero, Creator, Architect, Conductor names vs meaning"]],
   k:[["P-1326","Show the master level as Conductor in the UI","parked"]]},
  signup:{n:3,title:"Sign up",page:"/signup",path:"/signup",href:A+"/signup",
   why:"account, then the new-project flow",
   f:[["accounts","Sign up and log in"]],
   c:[["Person","handle, plan"]],t:[],k:[]},
  name:{n:4,title:"Name it",page:"WelcomePage",path:"/topics/WelcomePage",href:A+"/topics/WelcomePage",
   why:"new project, step 1",
   f:[["welcome","New-project flow"]],
   c:[["Project","name, owner"]],
   t:[],
   k:[["P-845","Welcome and home pages for Pro and Master","new"],["P-753","Welcome and home pages still outstanding","parked"]]},
  kind:{n:5,title:"Pick the kind",page:"WelcomeKind",path:"/topics/WelcomeKind",href:A+"/topics/WelcomeKind",
   why:"new project, step 2; Conductor needs the Monthly plan",
   f:[["welcome","New-project flow"],["plans","Plans: free, yearly, monthly"]],
   c:[["Project","level"],["Plan","monthly gates Conductor"]],
   t:[["razie-122","#bug WelcomeKind text: “It sets the menu and the home page…”"]],
   k:[["P-530","Starter topics for Pro and Master projects","waiting"]]},
  plan:{n:"5b",title:"Plan",page:"/account/plan",path:"/account/plan",href:A+"/account/plan",side:true,
   why:"only without the Monthly plan; back to Pick the kind",
   f:[["plans","Upgrade to Monthly"]],c:[["Plan",""]],t:[],k:[]},
  home:{n:6,title:"First page: Onboard your AI",page:"Template:masterHome",path:"/ (the new project)",href:A+"/topics/Template:masterHome",
   why:"connect your AI, then *How do you want to work?* — three doors",
   f:[["ai-onboarding","^aion-1 connect your AI from the home"],["ai-onboarding","^aion-9 the invite makes the onboarding token"],["onboard-doors","^ui-doors-1 the doors, greyed until the AI connects"],["onboard-doors","^ui-doors-2 Ready to get serious →"]],
   c:[["Token","one-time onboarding link, 10 min"],["Settings:PROJECT","home"]],
   t:[["razie-123","#bug onboarding a new AI: it couldn't read the onboarding page"],["razie-124","#focus onboarding members and public projects"]],
   k:[["P-1255","Docs for 10-10: signed pages, dashboard Page, onboarding","waiting on you"],["P-1219","Test bundle: onboarding pages and Settings, after deploy","in progress"]]},
  doorA:{n:"A",title:"Keep using your prompt",page:"Help:WorkWithYourPrompt",path:"/topics/Help:WorkWithYourPrompt",href:A+"/topics/Help:WorkWithYourPrompt",side:true,
   why:"door A; ends in Ready to get serious →",f:[["onboard-doors","^ui-doors-1 door A"]],c:[],t:[],k:[]},
  doorB:{n:"B",title:"Upgrade to a chat loop",page:"Help:ChatLoop",path:"/topics/Help:ChatLoop",href:A+"/topics/Help:ChatLoop",side:true,
   why:"door B; ends in Ready to get serious →",f:[["chats","Chat loop in the Claude app"]],c:[["Agent","app-chat loop"]],t:[],
   k:[["P-1297","A Claude app chat as a d2 agent loop (no install)","new"],["P-1354","Chat working line; floatie pulse; looping agent counts as listening","new"]]},
  setup:{n:7,title:"Ready to get serious",page:"Page:SetupMaster",path:"/page/SetupMaster",href:A+"/page/SetupMaster",
   why:"the project's home until the dashboard step",
   f:[["onboard","^onboard-12 Setup is home until the end"],["onboard","^onboard-13 Will other people work here?"],["onboard-doors","^ui-doors-4 members before Create your agents"]],
   c:[["Settings:PROJECT","view, join"],["Project","members"]],
   t:[],k:[["P-1219","Test bundle: onboarding pages and Settings","in progress"]]},
  start:{n:8,title:"Start your agents",page:"Page:StartAgents",path:"/page/StartAgents",href:A+"/page/StartAgents",
   why:"tick the roles; Create my agents makes one link per role",
   f:[["onboard","^onboard-14 Create your agents opens it"],["onboard","^onboard-15 one fresh link per ticked role, 1 hour"],["onboard","^onboard-16 Copy, New link, a live dot"]],
   c:[["Token","onboarding link per role"],["Agent","designer, dispatcher, coder, tester"]],
   t:[],k:[["P-852","Agent role onboarding and token rotation","parked"]]},
  agents:{n:9,title:"Run your agents in the background",page:"Page:AgentsOnboard",path:"/page/AgentsOnboard",href:A+"/page/AgentsOnboard",gated:true,
   why:"door C lands here too, once the AI is connected; where agents run",
   f:[["onboard-doors","^ui-doors-3 solo designer, always-on Mac, my own setup"],["chats","Activate the chat floatie"]],
   c:[["Agent","harness solo / full"],["Person","chat: true"]],
   t:[],
   k:[["P-1278","Installable Mac harness: solo designer, or full monitor","new"],["P-1261","Designer launcher and always-on Mac setup scripts","parked"]]},
  dash:{n:10,title:"Dashboard",page:"Page:DashboardMaster",path:"/page/DashboardMaster",href:A+"/page/DashboardMaster",kind:"end",
   why:"Open my dashboard → / Start working →: home becomes the dashboard",
   f:[["onboard","^onboard-11 the last step makes the dashboard home"],["dashboard","^dash-2 home after onboarding"]],
   c:[["Settings:PROJECT","home: dashboard"]],
   t:[],k:[["P-846","Pro and Master: Toolbox per level","new"],["P-1202","Dashboard: cache its big spec reads","parked"]]}
 },
 // the shape, top to bottom: a step, or a row of branches (each a list of steps), with the link's label
 shape:[
  ["landing"],["lmaster","Conductor card"],["signup","Sign up →"],["name"],["kind","Next"],
  {row:[{tag:"has Monthly",steps:[]},{tag:"no Monthly plan",steps:["plan"]}],label:"Create"},
  ["home","project made"],
  {row:[{tag:"door A",steps:["doorA"]},{tag:"door B",steps:["doorB"]},{tag:"door C → step 9, once the AI connects",steps:[]}],label:"How do you want to work?"},
  ["setup","Ready to get serious →"],["start","Create your agents →"],["agents","Create my agents"],["dash","Open my dashboard →"]
 ]
};
(function(){
const LIVE=!!((window.d2&&window.d2.api)||(window.D2&&window.D2.api))&&location.origin!=="null";document.documentElement.classList.toggle("live",LIVE);
const $=s=>document.querySelector(s),$$=s=>[...document.querySelectorAll(s)];
const esc=s=>String(s).replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c]));
const st=FLOW.steps;let sel=null;
const tick=k=>k[0].startsWith("P-")?`<a href="${S}/pipeline/${k[0]}">${k[0]}</a>`:k[0];
const th=t=>`<a href="${S}/thoughts?project=d2spec#${t[0]}">${t[0]}</a>`;
function node(id,mini){const s=st[id];if(!s)return"";
 const cls=["node",s.kind||"",s.side?"side":"",s.gated?"gated":"",sel===id?"sel":""].join(" ");
 const cnt=(k,l,a)=>a.length?`<span class="cnt ${k}">${a.length} ${a.length==1?l.replace(/(es|s)$/,"").replace(/behaviour$/,"behaviour").replace(/class$/,"class"):l}</span>`:"";
 const lay=(k,a,f)=>a.length?`<div class="layer ${k}">${a.map(x=>`<span>${f(x)}</span>`).join("")}</div>`:"";
 return `<button class="${cls}" data-step="${id}"><span class="n">${s.n} · <code>${esc(s.path)}</code></span><b>${esc(s.title)}</b>`+
  (mini?"":`<div class="counts">${cnt("f","behaviours",s.f)}${cnt("c","classes",s.c)}${cnt("t","thoughts",s.t)}${cnt("k","tickets",s.k)}</div>`)+
  lay("f",s.f,x=>esc(x[1]))+lay("c",s.c,x=>esc(x[0]))+lay("t",s.t,x=>x[0])+lay("k",s.k,x=>x[0])+`</button>`}
const arrow=l=>`<div class="arrow">${l?`<span class="lbl">${esc(l)}</span>`:""}</div>`;
function draw(el,mini){let h="";FLOW.shape.forEach((x,i)=>{
 if(Array.isArray(x)){if(i)h+=arrow(mini?"":x[1]);h+=node(x[0],mini)}
 else{h+=arrow(mini?"":x.label);h+=`<div class="row">`+x.row.map(b=>`<div class="branch"><span class="tag">${esc(b.tag)}</span>${b.steps.map(s=>node(s,mini)).join(arrow(""))}${b.steps.length?`<span class="tag">↩ back</span>`:`<span class="tag">↓</span>`}</div>`).join("")+`</div>`}});
 el.innerHTML=h}
function below(id){const s=st[id],b=$("#below");if(!s){b.innerHTML=`<p class="sub">Tap a step to see its page, behaviours, classes, thoughts and tickets here, as the Focus shows a member.</p>`;return}
 const card=(k,h,a,f)=>`<div class="card ${k}"><h4><span class="dot"></span>${h}</h4>${a.length?`<ul>${a.map(x=>`<li>${f(x)}</li>`).join("")}</ul>`:`<span class="st">none</span>`}</div>`;
 b.innerHTML=`<h3>${s.n} · ${esc(s.title)}</h3><p class="sub"><a href="${s.href}">${esc(s.page)}</a> · ${esc(s.why).replace(/\*(.+?)\*/g,"<i>$1</i>")}</p><div class="cards">`+
  card("p","Page",[s],x=>`<a href="${x.href}">${esc(x.page)}</a> <span class="st">${esc(x.path)}</span>`)+
  card("f","Features &amp; behaviours",s.f,x=>`<b>${esc(x[0])}</b> ${esc(x[1])}`)+
  card("c","Classes",s.c,x=>`<b>${esc(x[0])}</b> <span class="st">${esc(x[1])}</span>`)+
  card("t","Open thoughts",s.t,x=>`${th(x)} ${esc(x[1])}`)+
  card("k","Tickets, not done",s.k,x=>`${tick(x)} ${esc(x[1])} <span class="st">${esc(x[2])}</span>`)+`</div>`}
function pick(id){sel=sel===id?null:id;draw($("#flow"));draw($("#miniflow"),true);below(sel);
 const f=$("#fsel");if(f)f.innerHTML=sel?`<b>Step ${st[sel].n}: ${esc(st[sel].title)}</b> · ${st[sel].k.length} tickets, ${st[sel].t.length} thoughts <button class="chip">+ to Focus</button>`:`<b>Step:</b> tap a step on the left`}
function rp(w){$$("[data-rp]").forEach(x=>x.setAttribute("aria-pressed",String(x.dataset.rp===w)));$("#rp-notes").hidden=w!=="notes";$("#rp-page").hidden=w!=="page"}
function page(id){const s=st[id],p=s.path.startsWith("/ (")?"/":s.path;$("#pgtitle").textContent=s.n+" · "+s.title;$("#pgpath").textContent=p;$("#pgopen").href=p;
 if(LIVE){const f=$("#pgshot").querySelector("iframe")||Object.assign(document.createElement("iframe"),{title:"the step's page"});if(!f.isConnected){$("#pgshot").innerHTML="";$("#pgshot").append(f)}if(f.dataset.src!==p){f.dataset.src=p;f.src=p}}
 else $("#pgshot").innerHTML=SHOTS.includes(id)?`<img src="${SHOT}${id}.png" alt="${esc(s.title)}">`:`<div class="noshot">This page needs a signed-in person (or a project) to show; <a href="${s.href}" target="_blank" rel="noopener">open it ↗</a></div>`;$("#rplbl").textContent="step "+s.n+" of the flow";rp("page")}
document.addEventListener("click",e=>{const n=e.target.closest("[data-step]");if(n){e.preventDefault();const mini=!!n.closest("#miniflow");pick(n.dataset.step);if(mini&&sel)page(sel);return}
 const r=e.target.closest("[data-rp]");if(r){rp(r.dataset.rp);return}
 if(e.target.closest("#pgnote")){const s=st[sel];rp("notes");const t=$("#v-focus textarea");t.value="#page "+(s?s.page:"")+": ";t.focus();return}
 const t=e.target.closest("[role=tab]");if(t){show(t.dataset.v);return}
 const l=e.target.closest("[data-layer]");if(l){const on=l.getAttribute("aria-pressed")!=="true";l.setAttribute("aria-pressed",String(on));$("#flow").classList.toggle("show-"+l.dataset.layer,on);return}
 const v=e.target.closest("[data-fv]");if(v){$$("[data-fv]").forEach(x=>x.setAttribute("aria-pressed",String(x===v)));$("#fbrain").hidden=v.dataset.fv!=="brain";$("#fflow").hidden=v.dataset.fv!=="flow";return}
 if(e.target.closest("[data-open-flow]")){e.preventDefault();from="feature";show("flow");return}
 if(e.target.closest("[data-back]")){e.preventDefault();show(from);return}});
let from="focus";
function show(v){if(v!=="flow")from=v;$$("[role=tab]").forEach(t=>t.setAttribute("aria-selected",String(t.dataset.v===v)));$$("section.view").forEach(s=>s.classList.toggle("on",s.id==="v-"+v));
 const c=$("[data-back]");if(c)c.textContent="← back to "+(from==="feature"?"feature: onboard":"Focus: flows")}
const hits=["setup","start","dash"],strip=["landing","lmaster","signup","name","kind","home","setup","start","agents","dash"];
$("#fstrip").innerHTML=strip.map(id=>`<span class="${hits.includes(id)?"hit":""}">${esc(st[id].title)}</span>`).join("<i>→</i>");
draw($("#flow"));draw($("#miniflow"),true);below(null);show("flow");
})();
</script></body></html>