/* Frames 4–6 · document · split · shipped (dark) · narrow screens */
const { I: Ic2, Rail: R2, Tree: T2, Flow: F2, Att: A2, WorkTop: WT2, Sec: S2, Story: SL2 } = window;

/* ── frame 4 · reading and arguing with a document ── */
const treeDoc = [
  { grp: 'Documents · 5' },
  { kind: 'doc', name: 'Product spec', state: 'you', sel: true, by: 'architect · 1 reply to read' },
  { kind: 'doc', name: 'Technical design', state: 'now', by: 'architect · rewriting now' },
  { kind: 'doc', name: 'What competitors do', by: 'research agent' },
  { kind: 'doc', name: 'Design brief', by: 'design agent' },
  { kind: 'doc', name: 'The original ask', by: 'added by you · Mon' },
  { grp: 'Questions · 7 areas · 1 open' },
  { kind: 'area', name: 'Per-channel defaults', sel: true, openCount: 1, sub: 'the one this spec is about', total: 3 },
  { kind: 'area', name: 'Quiet hours', sub: 'settled Thu', total: 15 },
  { 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: 'Digest or immediate', sub: 'settled Thu', total: 3 },
  { kind: 'area', name: 'Existing settings', sub: 'settled Tue', total: 3 },
  { kind: 'area', name: 'Team-wide overrides', sub: 'moved to its own epic', total: 4 },
];

function Frame4() {
  return (
    <div className="ep">
      <R2 hot={1} />
      <T2 title={window.EPIC.title} id={window.EPIC.id} sub="grooming · spec in review" stage={0}
        meter={[['1.3M', 'tokens'], ['8h 15m', 'agent time'], ['2', 'tasks so far']]} nodes={treeDoc} filters={['All', 'Needs you', 'Open']} footNote="A document is an artifact, not a task" />
      <div className="work">
        <WT2 crumb={['Epics', 'Notification preferences', 'Product spec']} right={<><span className="pill warn">3 open comments</span><span className="btn sm">Share</span></>} />
        <div className="work-body">
          <A2 k="Waiting on you" t="The architect answered your objection and rewrote the paragraph."
            s="Read the change, then approve the spec or push back again. Two other comments are still open."
            actions={<><span className="btn go">Approve the spec</span><span className="btn onink">Reply again</span></>} />
          <div className="docrow">
            <div className="doc">
              <h1>Product spec — notification preferences</h1>
              <div className="dm"><span>written by the architect</span><span>·</span><span>rewritten 12 min ago</span><span>·</span><span>4 min read</span></div>
              <h2 className="k">What people need</h2>
              <p>People are told about too many things and cannot say which ones matter. Support sees roughly 40 tickets a month asking to turn something off. The write-up on what competitors do found that every product in this space lets people choose per event, and most also let them go quiet overnight.</p>
              <h2 className="k">What we will build</h2>
              <ul>
                <li>A list of events a person can turn on or off, one by one.</li>
                <li>A choice of email or in-app for each event.</li>
                <li>A window of hours when nothing reaches them.</li>
              </ul>
              <h2 className="k">Security alerts <span className="chg">changed 12 min ago</span></h2>
              <p className="was">If a person turns off every channel, we send nothing. Their choice is final.</p>
              <p className="hl">If a person turns off every channel, sign-in alerts from a device we have not seen before still reach them by email. This is the only exception, it is named on the settings screen, and it cannot be switched off. Everything else obeys their choice.</p>
              <h2 className="k">What we are not doing</h2>
              <p>Team-wide policy moved to its own epic. Digest emails are out of scope for the first release.</p>
            </div>
            <div>
              <div className="thread">
                <div className="th-h"><span style={{ color: 'var(--ink-4)', display: 'grid' }}>{Ic2.doc}</span><span className="tq">“…we send nothing. Their choice is final.”</span></div>
                <div className="th-b">
                  <div className="cm"><div className="cw"><span className="cn">You</span><span className="cr">on this passage</span><span className="ct">1h ago</span></div><div className="cb">This will get someone's account taken over. If a stranger signs in from a new device we have to tell them, whatever they turned off.</div></div>
                  <div className="cm"><div className="cw"><span className="cn">Research agent</span><span className="cr">joined</span><span className="ct">55m ago</span></div><div className="cb">Checked what others do: 5 of 6 products treat sign-in alerts as an exception and say so on the settings screen. One sends them in the app only.</div></div>
                  <div className="cm"><div className="cw"><span className="cn">Architect</span><span className="cr">replied</span><span className="ct">12m ago</span></div><div className="cb">Agreed. Narrowed it to sign-ins from a device we have not seen, by email only, named on the settings screen so nobody is surprised.</div></div>
                  <div className="cm out"><div className="cw"><span className="cn">The document changed</span><span className="ct">12m ago</span></div><div className="cb">One paragraph replaced. The technical design is being rewritten to match.</div><div style={{ display: 'flex', gap: 7, marginTop: 8 }}><span className="btn sm">See the change</span><span className="btn sm go">Accept</span></div></div>
                </div>
                <div className="th-c"><span className="inp">Reply, or say what is still wrong…</span><span className="btn sm dark">Send</span></div>
              </div>
              <div className="card pad" style={{ marginTop: 11 }}>
                <div className="k" style={{ marginBottom: 9 }}>Still open</div>
                {[['“roughly 40 tickets a month”', 'you asked where the number comes from'], ['“out of scope for the first release”', 'you asked when digest emails happen']].map((o, i) =>
                  <div key={i} style={{ padding: '9px 0', borderTop: i ? '1px solid var(--line)' : 0 }}>
                    <div className="sub" style={{ fontStyle: 'italic' }}>{o[0]}</div>
                    <div className="sub2" style={{ marginTop: 3 }}>{o[1]}</div>
                  </div>)}
              </div>
              <div className="card pad" style={{ marginTop: 11 }}>
                <div className="k" style={{ marginBottom: 8 }}>Talk to</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                  <span className="btn sm" style={{ justifyContent: 'flex-start' }}><span className="ag arch">ARCH</span>the architect, about this spec</span>
                  <span className="btn sm" style={{ justifyContent: 'flex-start' }}><span className="ag">RSCH</span>the research agent, about its write-up</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <SL2 mode="shut" count="126" />
    </div>
  );
}

/* ── frame 5 · split approved, children running on their own ── */
const treeSplit = [
  { grp: 'Child epics · 3 · no tasks of its own' },
  { lvl: 1, name: 'Per-person preferences', kind: 'child', state: 'now', sel: true, sub: '14 tasks · 9 agents', flow: 7, cur: 4 },
  { lvl: 1, name: 'Team-wide policy', kind: 'child', state: 'you', sub: '5 tasks planned · needs you', flow: 7, cur: 3 },
  { lvl: 1, name: 'Delivery reliability', kind: 'child', state: 'now', sub: 'still shaping · no tasks yet', flow: 8, cur: 1 },
  { 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: 'Why this split', by: 'architect' },
  { kind: 'doc', name: 'What competitors do', by: 'research agent' },
  { kind: 'doc', name: 'The original ask', by: 'added by you · Mon' },
];

const CHILDREN = [
  { nm: 'Per-person preferences', ob: 'One person choosing what reaches them, by email or in the app, with quiet hours.', st: 'Building', pill: 'run', flow: 11, cur: 6, next: '14 tasks · 6 of 9 agents working · nothing needs you', who: '3.8M tokens · 26h', when: '~1.5 days left' },
  { nm: 'Team-wide policy', ob: 'An admin setting a floor for the whole workspace that people cannot go below.', st: 'Waiting on you', pill: 'you', flow: 11, cur: 5, next: 'Approve the plan — 5 tasks, 3 agents, 1.8M tokens, $21', who: '0.9M tokens · 5h', when: 'ready since 1h ago' },
  { nm: 'Delivery reliability', ob: 'The email queue drops messages under load. Found during research, fixed separately.', st: 'Shaping', pill: 'run', flow: 8, cur: 1, next: 'Research agent reading the queue logs · no tasks yet', who: '0.4M tokens · 2h', when: '~4h left' },
];

function Frame5() {
  return (
    <div className="ep">
      <R2 hot={1} />
      <T2 title="Notification preferences" id="ep-1094" sub="parent of 3 epics" stage={2}
        meter={[['5.1M', 'tokens'], ['33h', 'agent time'], ['~2 days', 'est. left']]} nodes={treeSplit} filters={['All', 'Needs you', 'Running']} footNote="Rolled up from all three child epics" />
      <div className="work">
        <WT2 crumb={['Epics', 'Notification preferences']} right={<><span className="pill">parent epic</span><span className="btn sm">Share</span></>} />
        <div className="work-body">
          <A2 tone="calm" k="One thing waiting on you" t="Team-wide policy has 5 tasks planned. The other two are running on their own."
            s="This epic has no tasks of its own — it split into three, and each child has its own tasks, agents and page."
            actions={<><span className="btn go">Open Team-wide policy</span><span className="btn onink">See the split</span></>} />

          <S2 h="Three epics, each running on its own" c="split approved Thu" right={<span className="meta">a child epic is a full epic — its own questions, tasks and page</span>} />
          {CHILDREN.map((c, i) => (
            <div className="card pad" key={i} style={{ marginBottom: 10 }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <span className={'g sq ' + (c.pill === 'you' ? 'you' : 'now')} style={{ marginTop: 5 }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                    <span className="h3">{c.nm}</span>
                    <span className={'pill ' + c.pill}>{c.st}</span>
                    <span style={{ flex: 1 }} />
                    <span className="btn sm">Open{Ic2.ext}</span>
                  </div>
                  <div className="sub" style={{ marginTop: 5, maxWidth: '70ch' }}>{c.ob}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginTop: 12, paddingTop: 11, borderTop: '1px solid var(--line)' }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><window.Micro n={c.flow} cur={c.cur} /><span className="meta">step {c.cur + 1} of {c.flow}</span></span>
                    <span style={{ color: 'var(--line-3)' }}>·</span>
                    <span className="sub2">{c.next}</span>
                    <span style={{ flex: 1 }} /><span className="meta">{c.who}</span><span className="meta">{c.when}</span>
                  </div>
                </div>
              </div>
            </div>
          ))}

          <S2 h="Why it split" c="the decision, kept" right={<span className="btn sm ghost">Find this in decisions</span>} />
          <div className="card pad">
            <div className="prose" style={{ maxWidth: '74ch' }}>
During shaping, team-wide overrides turned out to need a permission model, an admin screen and its own release — enough work to hold up everything else. The architect proposed splitting it out rather than planning it as tasks here. Delivery reliability came from the research write-up and is not part of this feature at all.
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 13 }}>
              <span className="pill ok">you approved · Thu 16:20</span><span className="pill">3 epics</span><span className="pill">cost re-estimated after the split</span>
              <span style={{ flex: 1 }} /><span className="btn sm ghost">Read the storyline from that day</span>
            </div>
          </div>
        </div>
      </div>
      <SL2 mode="shut" count="212" />
    </div>
  );
}

/* ── frame 6 · shipped · the storyline is the page (dark) ── */
const treeShipped = [
  { grp: 'Tasks · 14 · all shipped' },
  ...window.TASKS.map(t => ({ lvl: 1, name: t[0], state: 'done', sub: 'shipped', agent: t[1], who: t[2], flow: t[3], cur: t[3] })),
  { grp: 'Questions · closed' },
  { kind: 'area', name: '7 areas · 38 questions answered', sub: 'shaping closed Thu', total: 38 },
  { grp: 'Documents · 5' },
  { kind: 'doc', name: 'Product spec', by: 'architect' },
  { kind: 'doc', name: 'Technical design', by: 'architect' },
  { kind: 'doc', name: 'Release note', by: 'docs agent' },
  { kind: 'doc', name: 'What competitors do', by: 'research agent' },
  { kind: 'doc', name: 'The original ask', by: 'added by you · Mon' },
];

const SHIPPED_DAYS = [
  { day: 'Friday · shipped', events: [
    { who: 'Docs agent', tag: 'announced', tagK: 'ok', when: '17:10', body: 'Published the help centre page and posted the release note to the workspace.', more: 'Read the full run ›' },
    { who: 'Build agent', tag: 'shipped', tagK: 'ok', when: '16:24', body: 'Turned the flag on for everyone after the checks passed. 4 machines, 61 files changed across the week.', more: 'Read the full run ›' },
    { who: 'You', tag: 'approved', tagK: 'ok', when: '15:58', body: 'Reviewed the working feature and approved the release.', dec: 'Ship to everyone, no staged rollout.' },
  ] },
  { day: 'Thursday', events: [
    { who: 'Build agent', when: '14:30', body: 'Retried Preferences API once the event table existed. Passed on the first try and shipped behind a flag.', more: 'Read the full run ›' },
    { who: 'You', tag: 'decided', tagK: 'ok', when: '11:05', body: 'Answered the architect on security alerts, after arguing with the spec.', dec: 'Sign-in alerts from a new device always reach people by email, whatever else they turn off.' },
  ] },
];

function Frame6() {
  return (
    <div className="ep" data-theme="dark">
      <R2 hot={0} />
      <T2 title="Notification preferences" id="ep-1094" sub="shipped Fri · 3 days ago" stage={4} stageDone
        meter={[['6.2M', 'tokens'], ['41h', 'agent time'], ['5 days', 'start to ship']]} nodes={treeShipped} filters={['All', 'By agent', 'Decisions']} footNote="Everything here stays readable after shipping" />
      <div className="work">
        <WT2 crumb={['Epics', 'Notification preferences', 'Storyline']} right={<><span className="pill ok">shipped</span><span className="btn sm">Share</span></>} />
        <div className="work-body">
          <A2 tone="calm" k="Nothing waiting on you" t="Shipped on Friday. 14 tasks, 9 agents, 6.2M tokens, 5 days from ask to release."
            s="41 hours of agent time and 23 answered questions, of which 14 became decisions."
            actions={<><span className="btn go">See it in the product</span><span className="btn onink">Open the release note</span></>} />

          <div className="docrow">
            <div>
              <div className="card pad" style={{ marginBottom: 18 }}>
                <div className="q2" style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 12 }}>
                  <span style={{ color: 'var(--ink-4)', display: 'grid' }}>{Ic2.search}</span>
                  <span className="h4" style={{ fontWeight: 500 }}>Why do security alerts ignore the quiet-hours setting?</span>
                  <span style={{ flex: 1 }} /><span className="kbd">asked 1 min ago</span>
                </div>
                <div className="prose" style={{ maxWidth: '74ch' }}>
                  Because you decided it on Thursday. You commented on the spec saying an account could be taken over; the research agent checked six competitor products and found five treat sign-in alerts as an exception; the architect narrowed it to sign-ins from an unrecognised device, by email only, and said so on the settings screen. The build agent implemented that on Thursday afternoon.
                </div>
                <div className="src">
                  <span className="pill">your comment · Thu 09:20</span><span className="pill">research run · Thu 10:40</span><span className="pill ok">decision · Thu 11:05</span><span className="pill">build run · Thu 14:30</span>
                </div>
              </div>

              <S2 h="What happened" c="118 runs · 5 days" right={<div className="tabs"><b className="on">Everything</b><b>Only decisions</b><b>Only yours</b></div>} />
              <div className="card" style={{ padding: '4px 16px 12px' }}>
                {SHIPPED_DAYS.map((d, i) => (
                  <React.Fragment key={i}>
                    <div className="sday">{d.day}</div>
                    {d.events.map((e, j) => <window.Ev e={e} key={j} />)}
                  </React.Fragment>
                ))}
                <div className="ev" style={{ paddingLeft: 19 }}>
                  <span className="dot" />
                  <div className="eh"><span className="en">Build agent</span><span className="pill">expanded</span><span className="ew">Wed 09:12</span></div>
                  <div className="eb">Built the preferences screen: the event list, the email or in-app choice per event, and the quiet-hours window.</div>
                  <div className="log" style={{ marginTop: 9 }}>09:12  read the product spec and the technical design{'\n'}09:31  wrote the settings screen · 11 files{'\n'}10:04  <b>asked: should quiet hours accept a range crossing midnight?</b>{'\n'}10:06  architect answered from your decision — yes{'\n'}11:47  checks passed · shipped behind a flag</div>
                  <div className="decd" style={{ marginTop: 9 }}><span className="kk">Decision used here</span>Quiet hours follow the person's own device, not the workspace.</div>
                  <span className="more">Collapse ›</span>
                </div>
                <div style={{ padding: '12px 2px 4px', borderTop: '1px solid var(--line)', marginTop: 8 }}><span className="meta">108 earlier runs · Mon to Wed</span><span className="btn sm ghost" style={{ marginLeft: 10 }}>Show them</span></div>
              </div>
            </div>
            <div>
              <div className="card pad">
                <div className="k" style={{ marginBottom: 10 }}>Decisions made here</div>
                {[['Quiet hours follow the person\'s own device', 'Thu'], ['Sign-in alerts from a new device always get through', 'Thu'], ['Team-wide policy became its own epic', 'Thu'], ['Ship to everyone, no staged rollout', 'Fri']].map((d, i) =>
                  <div key={i} style={{ display: 'flex', gap: 9, padding: '8px 0', borderTop: i ? '1px solid var(--line)' : 0 }}>
                    <span className="g done" style={{ marginTop: 4 }} />
                    <div><div className="sub2">{d[0]}</div><div className="meta" style={{ marginTop: 2 }}>{d[1]}</div></div>
                  </div>)}
                <span className="btn sm ghost" style={{ marginTop: 8 }}>All 14 decisions</span>
              </div>
              <div className="card pad" style={{ marginTop: 11 }}>
<div className="k" style={{ marginBottom: 10 }}>Who did the work</div>
                {[['code', '6 build agents · 10 tasks', '84 runs · 4.9M'], ['arch', 'Architect · planning', '19 runs · 0.8M'], ['rsch', 'rsch-1 · 1 task', '9 runs · 0.3M'], ['docs', 'docs-1 · 2 tasks', '6 runs · 0.15M'], ['dsgn', 'dsgn-1 · 1 task', '4 runs · 0.1M'], ['you', 'You', '14 decisions']].map((a, i) =>
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '7px 0', borderTop: i ? '1px solid var(--line)' : 0 }}>
                    <span className={'ag ' + a[0]}>{window.AG[a[0]]}</span>
                    <span className="sub2">{a[1]}</span>
                    <span style={{ flex: 1 }} /><span className="meta">{a[2]}</span>
                  </div>)}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── narrow screens ── */
function FrameNarrow({ w }) {
  const cls = w === 1180 ? 'ep w1180' : 'ep w860';
  return (
    <div className={cls}>
      <R2 hot={2} />
      {w === 1180 && <T2 title="Notification preferences" id="ep-1094" sub="building · 14 tasks" stage={2} meter={[['3.8M', 'tokens'], ['26h', 'time'], ['~1.5d', 'left']]} nodes={window.treeBuild.slice(0, 10)} />}
      <div className="work">
        <WT2 crumb={w === 1180 ? ['Notification preferences', 'Preferences API'] : ['Preferences API']}
          right={w === 860 ? <div className="tabs"><b>Tree</b><b className="on">Work</b><b>Story</b></div> : <span className="pill run"><span className="live" />6 working</span>} />
        <div className="work-body">
          <A2 k="Waiting on you" t="Preferences API stopped after four tries."
            s={w === 860 ? 'Everything else is still moving.' : 'It needs the event table, which ships in about an hour.'}
            actions={<span className="btn go">Wait and retry</span>} />
          <F2 steps={window.taskFlow} cur={1} showPast={1} restLabel={w === 860 ? 'step 2 of 5' : 'A code task · step 2 of 5'} />
          <div className="fail-c">
            <div className="fail-h"><span style={{ color: 'var(--red)', display: 'grid' }}>{Ic2.warn}</span><div><div className="ft">Same failure four times, so the agent stopped</div><div className="fs">code-1 · sbx-04 · 410k tokens · 2h ago</div></div></div>
            <div className="fail-b"><div className="log">14:04  <b>failed — table "event_types" does not exist</b>{'\n'}14:04  nothing was shipped</div>
              <div className="actrow"><span className="btn go">Retry when ready</span><span className="btn">Hand it to me</span></div></div>
          </div>
          <S2 h="Running now" c="6 of 9 agents" />
          {[['Preferences screen', 'code-3 · sbx-01', 62], ['Quiet-hours scheduler', 'code-4 · sbx-02', 88]].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></div><div className="bar"><i style={{ width: e[2] + '%' }} /></div></div><div className="rt">{e[2]}%</div></div>)}
        </div>
      </div>
      {w === 1180 && <SL2 mode="shut" count="126" />}
    </div>
  );
}

Object.assign(window, { Frame4, Frame5, Frame6, FrameNarrow });