// On-Demand Karaoke — Watch Mode User Flow
// Render: dot -Tsvg docs/karaoke-ondemand.dot -o docs/karaoke-ondemand.dot.svg
digraph karaoke_ondemand {
    rankdir=TB;
    node [shape=box, style="rounded,filled", fontname="monospace", fontsize=10];
    edge [fontname="monospace", fontsize=9];

    click [label="User clicks 🎤\n(watch.js)", fillcolor="#e0f2f1"];
    check [label="Has tracks?", shape=diamond, fillcolor="#fff8e1"];
    cycle [label="cycleKaraoke()\nOriginal → Instrumentals → Vocals", fillcolor="#e8f5e9"];
    post [label="POST /karaoke/{id}\n(fetch, non-blocking)", fillcolor="#e8eaf6"];
    fork [label="Server forks\ndetached grandchild", fillcolor="#e8eaf6"];
    process [label="process_karaoke()\n(~30-120s)", fillcolor="#fce4ec"];
    hourglass [label="Button shows ⌛\nkaraokeProcessing=true", fillcolor="#e0f2f1"];
    refresh [label="10s URL refresh\nfetchWatchData()", fillcolor="#e0f2f1"];
    detect [label="instrumentals_url\nappears in JSON?", shape=diamond, fillcolor="#fff8e1"];
    autoswitch [label="Auto-switch to\ninstrumentals 🎤", fillcolor="#e8f5e9"];

    click -> check;
    check -> cycle [label="yes"];
    check -> post [label="no (eligible)"];
    post -> fork [label="200 {status: processing}"];
    post -> hourglass;
    fork -> process;
    hourglass -> refresh [label="every 10s"];
    refresh -> detect;
    detect -> refresh [label="not yet"];
    detect -> autoswitch [label="tracks ready"];
    process -> detect [label="DB updated", style=dashed];
}
