vibn-agent-runner/design-templates/VIBN (2)/onboarding-app.jsx

// Root onboarding app — owns the route state and the answers dict.
// Routes: fork → <path> → build → ready. A floating debug navigator (toggle
// in the lower-right) lets reviewers jump between any screen without
// filling out the form.

function OnboardingApp() {
  const initialName = React.useMemo(() => {
    try { return localStorage.getItem("vibn:firstName") || ""; } catch { return ""; }
  }, []);

  const [stage, setStage] = React.useState("fork"); // fork | path | build | ready
  const [path, setPath] = React.useState(null);     // entrepreneur | owner | consultant
  const [forkChoice, setForkChoice] = React.useState(null);
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({});

  const [debugOpen, setDebugOpen] = React.useState(false);

  const update = (patch) => setData((d) => ({ ...d, ...patch }));

  // ── transitions ──────────────────────────────────────────────────────
  const confirmFork = () => {
    if (!forkChoice) return;
    setPath(forkChoice);
    setStep(0);
    setStage("path");
  };
  const backToFork = () => { setStage("fork"); setStep(0); };
  const completePath = () => setStage("build");
  const openWorkspace = () => setStage("ready");
  const close = () => { window.location.href = "index.html"; };
  const openChat = () => { window.location.href = "index.html"; };

  // ⌘↵ advances on whatever the current primary action is
  React.useEffect(() => {
    const handler = (e) => {
      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
        const btn = document.querySelector(".btn-primary:not([disabled])");
        if (btn) btn.click();
      }
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, []);

  // ── render ───────────────────────────────────────────────────────────
  let body;
  if (stage === "fork") {
    body = (
      <ForkScreen
        name={initialName}
        value={forkChoice}
        onChange={setForkChoice}
        onClose={close}
        onNext={confirmFork}
      />
    );
  } else if (stage === "path") {
    const props = {
      data, onUpdate: update,
      onBack: backToFork,
      onClose: close,
      onComplete: completePath,
      onJumpToStep: setStep,
      step,
    };
    if (path === "entrepreneur") body = <EntrepreneurPath {...props} />;
    else if (path === "owner")   body = <OwnerPath {...props} />;
    else                          body = <ConsultantPath {...props} />;
  } else if (stage === "build") {
    body = (
      <BuildScreen
        path={path} data={data}
        onBack={() => setStage("path")}
        onClose={close}
        onOpen={openWorkspace}
      />
    );
  } else {
    body = <ReadyScreen path={path} data={data} onClose={close} onOpenChat={openChat} />;
  }

  return (
    <div className="app">
      {body}
      <DebugNav
        open={debugOpen} setOpen={setDebugOpen}
        stage={stage} path={path} step={step}
        onJump={(s, p, idx) => {
          if (s === "fork") setStage("fork");
          else if (s === "build") { setPath(p); setStage("build"); }
          else if (s === "ready") { setPath(p); setStage("ready"); }
          else { setPath(p); setStep(idx); setStage("path"); }
        }}
      />
    </div>
  );
}

// ── Debug navigator ──────────────────────────────────────────────────────
function DebugNav({ open, setOpen, stage, path, step, onJump }) {
  const groups = [
    { title: "Start", rows: [
      { label: "01 · Fork", active: stage === "fork", go: () => onJump("fork") },
    ]},
    { title: "Entrepreneur", rows: [
      { label: "02 · Idea",     active: stage === "path" && path === "entrepreneur" && step === 0, go: () => onJump("path", "entrepreneur", 0) },
      { label: "03 · Audience", active: stage === "path" && path === "entrepreneur" && step === 1, go: () => onJump("path", "entrepreneur", 1) },
      { label: "04 · Goal",     active: stage === "path" && path === "entrepreneur" && step === 2, go: () => onJump("path", "entrepreneur", 2) },
      { label: "05 · Vibe",     active: stage === "path" && path === "entrepreneur" && step === 3, go: () => onJump("path", "entrepreneur", 3) },
    ]},
    { title: "Owner", rows: [
      { label: "02 · Business",  active: stage === "path" && path === "owner" && step === 0, go: () => onJump("path", "owner", 0) },
      { label: "03 · Stack",     active: stage === "path" && path === "owner" && step === 1, go: () => onJump("path", "owner", 1) },
      { label: "04 · First fix", active: stage === "path" && path === "owner" && step === 2, go: () => onJump("path", "owner", 2) },
      { label: "05 · Scale",     active: stage === "path" && path === "owner" && step === 3, go: () => onJump("path", "owner", 3) },
    ]},
    { title: "Consultant", rows: [
      { label: "02 · Client",  active: stage === "path" && path === "consultant" && step === 0, go: () => onJump("path", "consultant", 0) },
      { label: "03 · Brief",   active: stage === "path" && path === "consultant" && step === 1, go: () => onJump("path", "consultant", 1) },
      { label: "04 · Scope",   active: stage === "path" && path === "consultant" && step === 2, go: () => onJump("path", "consultant", 2) },
      { label: "05 · Handoff", active: stage === "path" && path === "consultant" && step === 3, go: () => onJump("path", "consultant", 3) },
    ]},
    { title: "Finish", rows: [
      { label: "Build · entrepreneur", active: stage === "build" && path === "entrepreneur", go: () => onJump("build", "entrepreneur") },
      { label: "Build · owner",        active: stage === "build" && path === "owner",        go: () => onJump("build", "owner") },
      { label: "Build · consultant",   active: stage === "build" && path === "consultant",   go: () => onJump("build", "consultant") },
      { label: "Ready",                active: stage === "ready",                            go: () => onJump("ready", path || "entrepreneur") },
    ]},
  ];

  return (
    <div className="debug">
      {open && (
        <div className="debug-panel">
          {groups.map((g) => (
            <React.Fragment key={g.title}>
              <div style={{
                fontFamily: "var(--font-mono)",
                fontSize: 9.5,
                color: "var(--fg-faint)",
                letterSpacing: "0.14em",
                textTransform: "uppercase",
                padding: "8px 8px 4px",
              }}>{g.title}</div>
              {g.rows.map((r) => (
                <button
                  key={r.label}
                  type="button"
                  className={"debug-row" + (r.active ? " active" : "")}
                  onClick={r.go}
                >
                  {r.active && <b>▸ </b>}{r.label}
                </button>
              ))}
            </React.Fragment>
          ))}
          <button
            type="button"
            className="debug-row"
            onClick={() => setOpen(false)}
            style={{ marginTop: 8, justifyContent: "center", color: "var(--fg-mute)" }}
          >
            Close
          </button>
        </div>
      )}
      <button
        type="button"
        className="debug-toggle"
        onClick={() => setOpen((o) => !o)}
        title="Designer navigator"
      >
        <span style={{ color: "var(--accent)", marginRight: 6 }}>◉</span>
        {stage === "path" ? `${path} · step ${step + 1}` : stage}
      </button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<OnboardingApp />);