/* Frames 1–3 · shaping · plan ready · building
   Areas group QUESTIONS. Tasks are the work. An epic has tasks or child epics, not both. */
const { I: Ic, Rail: R, Tree: T, Flow: F, Att: A, WorkTop: WT, Sec: S, Story: SL, TaskPanel: TP } = window;

const EPIC = { title: 'Notification preferences', id: 'ep-1094' };

/* ── frame 1 · shaping · the tree is areas of questions ── */
const treeShaping = [
  { grp: 'Tasks · 2 · running during shaping' },
  { lvl: 1, name: 'Read the existing product', state: 'you', sub: 'write-up ready · needs you', agent: 'rsch', who: 'rsch-1', flow: 4, cur: 3 },
  { lvl: 1, name: 'Map the current settings code', state: 'now', sub: 'reading · 40%', agent: 'code', who: 'code-1', flow: 3, cur: 1 },
  { grp: 'Questions · 7 areas · 5 open' },
  { kind: 'area', name: 'Quiet hours', sel: true, openCount: 2, sub: '15 questions · 13 answered', total: 15 },
  { kind: 'area', name: 'Per-channel defaults', openCount: 1, sub: '3 questions · 2 answered', total: 3 },
  { kind: 'area', name: 'Digest or immediate', sub: 'architect still writing them', total: '—' },
  { kind: 'area', name: 'Team-wide overrides', sub: 'big enough to be its own epic', total: 4 },
  { kind: 'area', name: 'Which events can notify', sub: 'settled Tue', total: 6 },
  { kind: 'area', name: 'Email or in-app', sub: 'settled Wed', total: 4 },
  { kind: 'area', name: 'Existing settings', sub: 'settled Tue', total: 3 },
  { grp: 'Documents · 3' },
  { kind: 'doc', name: 'The original ask', by: 'added by you · Mon' },
  { kind: 'doc', name: 'What competitors do', by: 'research agent' },
  { kind: 'doc', name: 'Product spec', state: 'now', by: 'architect drafting' },
];
const M1 = [['1.1M', 'tokens'], ['6h 20m', 'agent time'], ['2', 'tasks so far']];

function Frame1() {
  return (
    <div className="ep">
      <R />
      <T title={EPIC.title} id={EPIC.id} sub="grooming" stage={0} meter={M1}
        filter="All" nodes={treeShaping} filters={['All', 'Needs you', 'Open']} footNote="Pick an area to see its questions" />
      <div className="work">
        <WT crumb={['Epics', 'Notification preferences', 'Quiet hours']} right={<><span className="btn sm ghost">Ask the architect</span><span className="btn sm">Share</span></>} />
        <div className="work-body">
          <A k="Waiting on you" t="Two questions about quiet hours, then this area is settled."
            s="Five areas are settled. Two tasks are running while you decide."
            actions={<><span className="btn go">Answer the first</span><span className="btn onink">Skip for now</span></>} />

          <div className="card pad" style={{ marginBottom: 4 }}>
            <div className="k" style={{ marginBottom: 7 }}>Objective</div>
            <div className="lead" style={{ maxWidth: '58ch' }}>
              People should choose which events notify them, whether that comes by email or in the app, and set hours when nothing reaches them.
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 13, paddingTop: 12, borderTop: '1px solid var(--line)' }}>
              <span className="pill ok"><span style={{ display: 'grid' }}>{Ic.tick}</span>You confirmed this Tue</span>
              <span className="meta">3 things you attached — a spreadsheet, a PDF and a link — have been read</span>
              <span style={{ flex: 1 }} /><span className="btn sm ghost">Change it</span>
            </div>
          </div>

          <S h="Open questions" c="2 of 15 in this area" right={<span className="meta">every answer is kept as a decision</span>} />
          <div className="dq">
            <div className="qh"><span className="pill you">1 of 2</span><span className="meta">asked by the architect · 40 min ago</span></div>
            <div className="q">Quiet hours: whose clock do we go by?</div>
            <div className="why">This changes what a person sees when they travel, and it decides whether we store a timezone per person or one for the whole workspace. It is easier to settle now than after the tasks are planned.</div>
            <div className="opts">
              <div className="opt rec"><span className="rd" /><div><div className="ot">The person's own device</div><div className="oc">Quiet hours follow them when they travel. Needs a timezone stored per person.</div></div><span className="pill ok tag">architect suggests</span></div>
              <div className="opt"><span className="rd" /><div><div className="ot">One clock for the whole workspace</div><div className="oc">Simpler to build. Someone in another country gets notified at odd hours.</div></div></div>
              <div className="opt"><span className="rd" /><div><div className="ot">Ask each person when they first set it up</div><div className="oc">Most flexible, adds a step to setup.</div></div></div>
            </div>
            <div className="foot">
              <span className="btn go">Answer</span><span className="btn">Say something else</span>
              <span className="sp" /><span className="btn sm ghost">Talk to the architect about this</span>
            </div>
          </div>
          <div className="bulk" style={{ marginTop: 10 }}>
            <div className="bulk-h"><span className="chev">{Ic.chev}</span><div><div className="bt">Next: can a quiet-hours range cross midnight?</div><div className="bs">3 answers offered · asked by the architect · 40 min ago</div></div><span className="sp" /><span className="btn sm">Open</span></div>
          </div>

          <S h="Answered in quiet hours" c="13 of 15" right={<span className="btn sm ghost">See all 38 across the epic</span>} />
          <div className="bulk"><div className="bulk-h"><span className="chev">{Ic.chev}</span><div><div className="bt">13 questions you answered on Tue and Wed</div><div className="bs">Which events obey quiet hours · what happens to a queued email · whether a range can cross midnight</div></div><span className="sp" /></div></div>
        </div>
      </div>
      <SL mode="shut" count="118" />
    </div>
  );
}

/* ── frame 1b · a task that exists before the plan, and its own review surface ── */
const rschFlow = [
  { n: 'Scope', w: 'architect', out: 'what to look at' },
  { n: 'Read', w: 'rsch-1', out: '12 of 59 sources' },
  { n: 'Write it up', w: 'rsch-1', out: 'What competitors do' },
  { n: 'Review', w: 'you', gate: true },
];
const treeRsch = treeShaping.map(n => n.name === 'Read the existing product' ? { ...n, sel: true } : n.sel ? { ...n, sel: false } : n);
const TASK_RSCH = {
  nm: 'Read the existing product', id: 'task-3f10c8ad', state: 'needs you', pillK: 'you',
  agent: 'rsch-1', agK: 'rsch', agentName: 'Research agent', machine: 'on machine sbx-06 · 9 runs',
  flow: rschFlow, cur: 3,
  spend: [['640k', 'tokens'], ['4h 05m', 'spent'], ['~1h', 'if re-run']],
  noteK: 'What it could not reach',
  note: '11:02  49 of 59 sources unreadable\n11:02  47 files — drive folder "product/archive" is closed to me\n11:03  2 links in the original ask no longer resolve\n11:04  wrote the review from the 12 sources I could read',
  actions: <><span className="btn go">Grant access and re-run</span><span className="btn">Accept the write-up as it is</span></>,
};
const RSCH_RUNS = [
  { who: 'rsch-1', tag: 'ready', tagK: 'ok', when: '2h ago', body: 'Wrote up what six competitor products do, from the 12 sources it could read.', more: 'Open the write-up ›' },
  { who: 'rsch-1', when: '4h ago', body: 'Tried the product archive folder 47 times, once per file. Closed to it every time.', bad: true, more: 'Read the full run ›' },
  { who: 'Architect', tag: 'planned', tagK: 'ok', when: 'Mon 16:10', body: 'Created this task from your ask, before any questions existed.' },
];

function Frame1b() {
  return (
    <div className="ep drawer">
      <R />
      <T title={EPIC.title} id={EPIC.id} sub="grooming · 2 tasks" stage={0} meter={M1}
        filter="All" nodes={treeRsch} filters={['All', 'Needs you', 'Open']} footNote="Tasks can exist before the plan" />
      <div className="work">
        <WT crumb={['Epics', 'Notification preferences', 'Read the existing product']} right={<><span className="ag rsch">rsch-1</span><span className="btn sm">Share</span></>} />
        <div className="work-body">
          <A k="Waiting on you" t="The research is written, but a quarter of what it was asked to read was closed to it."
            s="It carried on with the 12 sources it could reach. Read it as it stands, or open the folder and let it run again."
            actions={<><span className="btn go">Grant access and re-run</span><span className="btn onink">Accept as it is</span></>} />
          <F steps={rschFlow} cur={3} restLabel="A research task · step 4 of 4" />

          <S h="What it read" c="12 of 59 sources" right={<span className="meta">six competitor products, our support tickets, three of your files</span>} />
          <div className="card pad">
            <div className="h4" style={{ marginBottom: 5 }}>What competitors do</div>
            <div className="prose" style={{ maxWidth: '70ch' }}>Every product in this space lets people choose per event, and most let them go quiet overnight. Five of six treat security alerts as an exception they name on the settings screen. Our own support sees roughly 40 tickets a month asking to turn something off.</div>
            <div className="actrow"><span className="btn sm">Open the write-up</span><span className="btn sm ghost">See its 9 runs</span><span className="meta">6 min read · written 2h ago</span></div>
          </div>

          <S h="What it could not reach" c="49 sources" right={<span className="meta">it carried on without them</span>} />
          <div className="note" style={{ margin: '-4px 0 11px' }}>Listed here because the write-up above was made without them, not because anything is waiting. Opening the folder and re-running is the fix; clearing a group just says you saw it.</div>
          <div className="bulk">
            <div className="bulk-h"><span className="chev" style={{ transform: 'rotate(90deg)' }}>{Ic.chev}</span><div><div className="bt">47 files in one folder it has no access to</div><div className="bs">drive · product/archive — the same refusal 47 times</div></div><span className="sp" /><span className="btn sm dark">Grant access</span></div>
            <div className="bulk-b">
              {[['spec-v2.xlsx', 'product/archive', 'no access'], ['queue-metrics.csv', 'product/archive', 'no access'], ['support-export.xlsx', 'product/archive', 'no access']].map((r, i) =>
                <div className="brow" key={i}><span className="cb" /><span className="bn">{r[0]}</span><span className="bw">{r[1]}</span><span className="bw">{r[2]}</span></div>)}
            </div>
            <div className="bulk-f"><span>44 more in the same folder</span><span style={{ color: 'var(--line-3)' }}>·</span><span style={{ color: 'var(--green-text)' }}>Show them</span><span style={{ flex: 1 }} /><span>Clear all 47 instead ›</span></div>
          </div>
          <div className="bulk">
            <div className="bulk-h"><span className="chev">{Ic.chev}</span><div><div className="bt">2 links in your original ask no longer resolve</div><div className="bs">a Figma file and a ticket that was deleted</div></div><span className="sp" /><span className="btn sm">Replace them</span></div>
          </div>
        </div>
      </div>
      <TP task={TASK_RSCH} tab="Task" days={RSCH_RUNS} />
    </div>
  );
}

/* ── frame 2 · plan ready · areas are done, tasks appear ── */
const TASKS = [
  ['Preferences API', 'code', 'code-1', 5, '~6h', '820k', '$11'],
  ['Preferences data model', 'code', 'code-1', 5, '~3h', '410k', '$6'],
  ['Event type registry', 'code', 'code-2', 5, '~3h', '380k', '$6'],
  ['Preferences screen', 'code', 'code-3', 5, '~8h', '1.1M', '$14'],
  ['Channel routing', 'code', 'code-3', 5, '~5h', '560k', '$8'],
  ['Quiet-hours scheduler', 'code', 'code-4', 5, '~5h', '640k', '$9'],
  ['Timezone handling', 'code', 'code-4', 5, '~4h', '470k', '$7'],
  ['Migrate existing settings', 'code', 'code-5', 5, '~4h', '520k', '$7'],
  ['Security-alert exception', 'code', 'code-5', 5, '~2h', '240k', '$4'],
  ['Backfill defaults', 'code', 'code-6', 5, '~2h', '190k', '$3'],
  ['Settings screen design', 'dsgn', 'dsgn-1', 4, '~1 day', '150k', '$3'],
  ['Help centre page', 'docs', 'docs-1', 3, '~2h', '120k', '$2'],
  ['Release note', 'docs', 'docs-1', 3, '~1h', '80k', '$1'],
  ['Check against the objective', 'rsch', 'rsch-1', 2, '~2h', '210k', '$3'],
];
const treePlan = [
  { grp: 'Tasks · 14 · 9 agents' },
  ...TASKS.map(t => ({ lvl: 1, name: t[0], state: 'idle', sub: 'not started', agent: t[1], who: t[2], flow: t[3], cur: 0 })),
  { grp: 'Questions · closed' },
  { kind: 'area', name: '7 areas · 38 questions answered', sub: 'shaping closed Thu', total: 38 },
  { grp: 'Documents · 4' },
  { kind: 'doc', name: 'Product spec', by: 'architect · you approved Thu' },
  { kind: 'doc', name: 'Technical design', by: 'architect' },
  { kind: 'doc', name: 'What competitors do', by: 'research agent' },
  { kind: 'doc', name: 'The original ask', by: 'added by you · Mon' },
];
const M2 = [['1.4M', 'tokens'], ['9h 05m', 'agent time'], ['~3 days', 'est. left']];

function Frame2() {
  return (
    <div className="ep">
      <R hot={1} />
      <T title={EPIC.title} id={EPIC.id} sub="14 tasks planned" stage={1} meter={M2}
        nodes={treePlan} filters={['All', 'Needs you', 'By agent']} footNote="9 agents will work on these" />
      <div className="work">
        <WT crumb={['Epics', 'Notification preferences']} right={<><span className="btn sm ghost">Ask the architect</span><span className="btn sm">Share</span></>} />
        <div className="work-body">
          <A k="Waiting on you" t="14 tasks planned across 9 agents. Nothing is built until you approve."
            s="About 3 days if they run together · 5.9M tokens estimated · $84 of agent time."
            actions={<><span className="btn go">Approve shape, cost and time</span><span className="btn onink">Change something</span></>} />

          <S h="Tasks" c="14 · 9 agents" right={<span className="meta">every row is yours to change or reassign</span>} />
          <div className="tbl">
            <div className="thd"><span>Task</span><span>Agent</span><span>Its workflow</span><span>Est. time</span><span>Est. tokens</span><span>Cost</span></div>
            {TASKS.map((p, i) => (
              <div className="tr" key={i}>
                <div className="nm"><span className="g idle" /><span className="t">{p[0]}</span></div>
                <span className="v dim" style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span className={'ag ' + p[1]}>{p[2]}</span>{Ic.down}</span>
                <span className="v"><span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><window.Micro n={p[3]} cur={0} />{p[3]} steps</span></span>
                <span className="v">{p[4]}</span><span className="v dim">{p[5]}</span><span className="v">{p[6]}</span>
              </div>
            ))}
            <div className="tfoot">
              <span className="tot"><b>14</b> tasks · <b>9</b> agents</span>
              <span style={{ color: 'var(--line-3)' }}>·</span>
              <span className="tot">About <b>3 days</b> together</span>
              <span style={{ color: 'var(--line-3)' }}>·</span>
              <span className="tot"><b>5.9M</b> tokens · <b>$84</b></span>
              <span className="sp" />
              <span className="btn sm">Reassign</span><span className="btn sm">Split a task</span><span className="btn sm">Push back</span>
              <span className="btn go">Approve all 14</span>
            </div>
          </div>
          <div className="note" style={{ marginTop: 10 }}>Approving accepts the tasks, the cost and the time in one action. Anything you change here is re-costed before you approve.</div>

          <S h="Where the tasks came from" c="23 answered questions across 7 areas" right={<span className="btn sm ghost">See the decisions behind this plan</span>} />
          <div className="card pad">
            <div className="prose">
              Areas were how the architect grouped its questions while shaping — quiet hours, per-channel defaults, existing settings. They are not the work. Once the questions in an area were answered, the architect wrote the spec and turned the whole thing into 14 tasks, which do not line up one-to-one with the areas: timezone handling came out of one answer inside quiet hours, and the security-alert exception came out of one answer inside per-channel defaults.
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 12 }}><span className="pill ok">7 areas closed</span><span className="pill">23 questions answered</span><span className="pill">14 tasks</span></div>
          </div>
        </div>
      </div>
      <SL mode="shut" count="126" />
    </div>
  );
}

/* ── frame 3 · building · a task is selected, its detail is on the right ── */
const treeBuild = [
  { grp: 'Tasks · 14 · 9 agents' },
  { lvl: 1, name: 'Preferences API', state: 'fail', sel: true, sub: 'stopped · 4 tries', agent: 'code', who: 'code-1', flow: 5, cur: 1 },
  { lvl: 1, name: 'Preferences data model', state: 'done', sub: 'shipped', agent: 'code', who: 'code-1', flow: 5, cur: 5 },
  { lvl: 1, name: 'Event type registry', state: 'done', sub: 'shipped', agent: 'code', who: 'code-2', flow: 5, cur: 5 },
  { lvl: 1, name: 'Preferences screen', state: 'now', sub: 'building · 62%', agent: 'code', who: 'code-3', flow: 5, cur: 1 },
  { lvl: 1, name: 'Channel routing', state: 'now', sub: 'building · 30%', agent: 'code', who: 'code-3', flow: 5, cur: 1 },
  { lvl: 1, name: 'Quiet-hours scheduler', state: 'now', sub: 'checking', agent: 'code', who: 'code-4', flow: 5, cur: 2 },
  { lvl: 1, name: 'Timezone handling', state: 'now', sub: 'building · 45%', agent: 'code', who: 'code-4', flow: 5, cur: 1 },
  { lvl: 1, name: 'Migrate existing settings', state: 'now', sub: 'building · 18%', agent: 'code', who: 'code-5', flow: 5, cur: 1 },
  { lvl: 1, name: 'Security-alert exception', state: 'idle', sub: 'queued', agent: 'code', who: 'code-5', flow: 5, cur: 0 },
  { lvl: 1, name: 'Backfill defaults', state: 'idle', sub: 'waits on the API', agent: 'code', who: 'code-6', flow: 5, cur: 0 },
  { lvl: 1, name: 'Settings screen design', state: 'you', sub: 'approved design due back', agent: 'dsgn', who: 'dsgn-1', flow: 4, cur: 2 },
  { lvl: 1, name: 'Help centre page', state: 'now', sub: 'drafting', agent: 'docs', who: 'docs-1', flow: 3, cur: 0 },
  { lvl: 1, name: 'Release note', state: 'idle', sub: 'waits for ship', agent: 'docs', who: 'docs-1', flow: 3, cur: 0 },
  { lvl: 1, name: 'Check against the objective', state: 'idle', sub: 'waits for ship', agent: 'rsch', who: 'rsch-1', flow: 2, cur: 0 },
];
const taskFlow = [
  { n: 'Plan', w: 'architect', out: 'scope · 1 run' },
  { n: 'Build', w: 'code-1' }, { n: 'Check', w: 'code-1' }, { n: 'Review', w: 'you', gate: true }, { n: 'Ship', w: 'code-1' }];
const M3 = [['3.8M', 'tokens'], ['26h', 'agent time'], ['~1.5 days', 'est. left']];

const TASK_API = {
  nm: 'Preferences API', id: 'task-a5bbd71e', state: 'stopped', pillK: 'bad',
  agent: 'code-1', agK: 'code', agentName: 'Build agent', machine: 'on machine sbx-04 · 4 tries',
  flow: taskFlow, cur: 1, fail: true,
  spend: [['410k', 'tokens'], ['2h 10m', 'spent'], ['~6h', 'est.']],
  noteK: 'Why it stopped',
  note: '14:02  run 4 of 4 · writing preferences endpoint\n14:04  failed — table "event_types" does not exist\n14:04  nothing shipped; no change to your product',
  actions: <><span className="btn go">Wait for the event table, then retry</span><span className="btn">Hand it to me</span><span className="btn">Stop this task</span></>,
};
const TASK_RUNS = [
  { who: 'code-1', tag: 'stopped', tagK: 'bad', when: '2h ago', body: 'Fourth try failed the same way. Stopped rather than burn more tokens.', bad: true, more: 'Read the full run ›' },
  { who: 'code-1', when: '3h ago', body: 'Tries 2 and 3 — rewrote the query, then the migration order. Same failure both times.', more: 'Read the full run ›' },
  { who: 'code-1', when: '5h ago', body: 'Read the technical design and started the endpoint. 6 files written before the first failure.', more: 'Read the full run ›' },
  { who: 'Architect', tag: 'planned', tagK: 'ok', when: 'Thu 18:40', body: 'Planned this task from the spec and handed it to code-1.' },
];

function Frame3() {
  return (
    <div className="ep drawer">
      <R hot={2} />
      <T title={EPIC.title} id={EPIC.id} sub="building · 1 stopped" stage={2} meter={M3}
        filter="All" nodes={treeBuild} filters={['All', 'Needs you', 'Running']} footNote="Click a task to open it on the right" />
      <div className="work">
        <WT crumb={['Epics', 'Notification preferences', 'Preferences API']} right={<><span className="pill run"><span className="live" />6 agents working</span><span className="btn sm">Share</span></>} />
        <div className="work-body">
          <A k="Waiting on you" t="Preferences API stopped after four tries. Everything else is still moving."
            s="It needs the event table, which ships in about an hour. Two other tasks will need you today."
            actions={<><span className="btn go">Wait and retry</span><span className="btn onink">Hand it to me</span></>} />
          <F steps={taskFlow} cur={1} restLabel="A code task · step 2 of 5" />

          <S h="Running now" c="6 agents · 4 machines" right={<span className="meta">picked up automatically</span>} />
          {[['Preferences screen', 'code-3 · sbx-01', 62, '~50 min left', '780k'], ['Quiet-hours scheduler', 'code-4 · sbx-02 · checking', 88, '~10 min left', '600k'], ['Timezone handling', 'code-4 · sbx-02', 45, '~2h left', '260k'], ['Migrate existing settings', 'code-5 · sbx-03', 18, '~2h left', '110k'], ['Channel routing', 'code-3 · sbx-01', 30, '~3h left', '180k'], ['Help centre page', 'docs-1 · sbx-05 · drafting', 40, '~1h left', '70k']].map((e, i) => (
            <div className="eng" key={i}>
              <span className="live" />
              <div><div className="et">{e[0]}</div><div className="em"><span>{e[1]}</span><span style={{ color: 'var(--line-3)' }}>·</span><span>{e[4]} tokens</span></div><div className="bar"><i style={{ width: e[2] + '%' }} /></div></div>
              <div className="rt">{e[3]}</div>
            </div>
          ))}
          <div className="eng bad" style={{ marginTop: 8 }}>
            <span className="g fail" />
            <div><div className="et">Preferences API</div><div className="em"><span>code-1 · sbx-04</span><span style={{ color: 'var(--red)' }}>stopped after 4 tries</span><span style={{ color: 'var(--line-3)' }}>·</span><span>410k tokens</span></div></div>
            <div className="rt">2h ago</div>
          </div>

          <S h="Done" c="2 of 14" />
          {[['Preferences data model', 'code-1 · 9 files · 380k tokens', '6h ago'], ['Event type registry', 'code-2 · 14 files · 340k tokens', '4h ago']].map((d, i) =>
            <div className="eng" key={i}><span className="g done" /><div><div className="et">{d[0]}</div><div className="em"><span>{d[1]}</span></div></div><div className="rt">{d[2]}</div></div>)}
        </div>
      </div>
      <TP task={TASK_API} tab="Task" days={TASK_RUNS} />
    </div>
  );
}

Object.assign(window, { Frame1, Frame1b, Frame2, Frame3, EPIC, treeBuild, taskFlow, TASKS });