// Scenes — each is the BODY of the macOS window for one beat.
// Designs are matched to the real RalphX app screenshots (pixel-faithful).
// Made-up Graph/Kanban/Ideation-debate scenes have been removed.

const TASKS_BY_SCENE = {
  agents: [
    { id: "t1", title: "Replace chat focus pills with…", time: "1d ago", status: "done" },
    { id: "t2", title: "Restyle agents chat subhead…",   time: "1d ago", status: "active" },
    { id: "t3", title: "Add execution bar to Agents…",  time: "1d ago", status: "open" },
    { id: "t4", title: "Update Codex models and certs",  time: "4d ago", status: "open" },
    { id: "t5", title: "Start my RalphX conversation",   time: "5d ago", status: "open" },
    { id: "t6", title: "Start my RalphX conversation",   time: "6d ago", status: "open" },
  ],
  launcher: [
    { id: "l1", title: "Refactor MCP content adapter",   time: "14m", status: "active", runState: "running" },
    { id: "l2", title: "Audit response schemas",         time: "14m", status: "open",   runState: "queued"  },
    { id: "l3", title: "Backfill unit tests for adapter", time: "1h", status: "open",   runState: "queued"  },
  ],
  kanban:   [{ id: "k1", title: "Fix non-monotonic font scale…", time: "1/4", status: "active" }],
  terminal: [{ id: "tm1", title: "Update Codex models and centralize", time: "now", status: "active" }],
  artifacts: [{ id: "ar1", title: "Replace chat focus pills with…", time: "4h ago", status: "active" }],
  settings:  [],
};

// =========================================================================
// SCENE: LAUNCHER — v27 "Start new" with preset chips + Open PR toggle.
// Matches designs/v27/.screenshots/index@1440.png.
// =========================================================================
const LAUNCHER_PRESETS = [
  { id: "feature",  label: "Plan a feature" },
  { id: "bug",      label: "Fix a bug"      },
  { id: "refactor", label: "Refactor"       },
  { id: "tests",    label: "Write tests"    },
];

function SceneLauncher() {
  const { progress } = useStage();
  const [activePreset, setActivePreset] = React.useState("refactor");
  const [openPr, setOpenPr] = React.useState(true);

  return (
      <div className="ws-main">
        <div className="launcher-stage launcher-stage-v27">
        <div className="launcher-center" style={{ opacity: range(progress, 0, 0.2, Easing.apple) }}>
          <h2 className="launcher-title-v27">Start new</h2>
          <p className="launcher-sub">What should the agent build, fix, or ship?</p>
        </div>

        <div className="launcher-composer launcher-composer-v27" style={{ opacity: range(progress, 0.1, 0.3, Easing.apple), transform: `translate3d(0, ${lerp(20, 0, range(progress, 0.1, 0.3, Easing.apple))}px, 0)` }}>
          <div className="launcher-presets">
            {LAUNCHER_PRESETS.map((p) => (
              <button key={p.id}
                onClick={() => setActivePreset(p.id)}
                className={`launcher-preset ${activePreset === p.id ? "is-active" : ""}`}>
                {p.label}
              </button>
            ))}
          </div>

          <div className="launcher-textarea launcher-textarea-v27">
            Describe what you want the agent to build, fix, or refactor. Reference files, paste error messages, link issues — the more context, the better the result.
          </div>

          <div className="launcher-config">
            <div className="launcher-config-cell">
              <span className="launcher-config-key">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" /></svg>
                PROJECT
              </span>
              <span className="launcher-config-val">
                reefagent-mcp-content
                <svg className="chev" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
              </span>
            </div>
            <div className="launcher-config-cell">
              <span className="launcher-config-key">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="6" r="2" /><circle cx="18" cy="18" r="2" /><path d="M8 6h8a4 4 0 0 1 0 8H8" /></svg>
                BRANCH
              </span>
              <span className="launcher-config-val">
                master
                <svg className="chev" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
              </span>
            </div>
            <div className="launcher-config-cell">
              <span className="launcher-config-key">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3" /><path d="M12 3v3M12 18v3M3 12h3M18 12h3" /></svg>
                MODE
              </span>
              <span className="launcher-config-val">
                Agent
                <svg className="chev" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
              </span>
            </div>
            <div className="launcher-config-cell">
              <span className="launcher-config-key">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" /></svg>
                MODEL
              </span>
              <span className="launcher-config-val">
                Codex · gpt-5.4
                <svg className="chev" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
              </span>
            </div>
          </div>

          <div className="launcher-foot-bar">
            <span className="launcher-attach">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21.4 11.05l-9 9a5 5 0 0 1-7-7l9-9a3.5 3.5 0 0 1 5 5l-9 9a2 2 0 0 1-3-3l8.5-8.5" /></svg>
            </span>
            <span className="launcher-attach">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="14" rx="2" /><path d="M3 9h18" /></svg>
            </span>
            <button
              className={`pr-toggle ${openPr ? "is-on" : ""}`}
              onClick={() => setOpenPr((v) => !v)}
              aria-pressed={openPr}>
              <span className="pr-toggle-track"><span className="pr-toggle-thumb" /></span>
              Open PR when done
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="pr-toggle-info"><circle cx="12" cy="12" r="9" /><path d="M12 8v4M12 16v0.01" /></svg>
            </button>
            <span className="launcher-foot-spacer" />
            <span className="launcher-foot-meta">
              <span className="key">↵</span> new line
            </span>
            <button className="launcher-start launcher-start-v27">
              Start agent
              <span className="kbd">⇧↵</span>
            </button>
          </div>
        </div>

        <div className="launcher-stripe" style={{ opacity: range(progress, 0.15, 0.3, Easing.apple) }}>
          <span className="launcher-stripe-item">
            <span className="key">Avg run</span>
            <strong>~14m</strong>
          </span>
          <span className="dot-sep">·</span>
          <span className="launcher-stripe-item">
            <span className="key">PR target</span>
            <strong>master</strong>
          </span>
          <span className="dot-sep">·</span>
          <span className="launcher-stripe-item">
            <span className="key">Sandbox</span>
            <strong>isolated</strong>
          </span>
          <span className="launcher-foot-spacer" />
          <span className="launcher-stripe-item launcher-stripe-ok">
            <span className="dot dot-ok" />
            All systems normal
          </span>
        </div>
      </div>
    </div>
  );
}

// =========================================================================
// SCENE: AGENTS — main conversation thread (matches the real screenshots)
// =========================================================================
function SceneAgents() {
  const { progress } = useStage();

  const entries = [
    { kind: "user",     body: "The work is attached under \"Add execution bar to Agents screen layout\". I've already pushed the issue ID into the chat run; it's still in scanning mode, so I'm giving it one more concrete direction to treat the issue as our source of truth rather than leaving placement open-ended." },
    { kind: "ideation", title: "Ideation Session", body: "Add execution bar to Agents screen layout" },
    { kind: "user",     body: "I started an attached implementation run for this as `add-execution-bar-to-Agents-screen-layout` and pushed the placement constraints into it." },
    { kind: "user",     body: "The difference is the right scope: where the Ideation execution bar actions, place it below the chat box and tasks region in the Agents screen, and keep the left sidebar fixed in place on the left." },
    { kind: "system",   tag: "codex", body: "Verification started for the attached ideation run." },
    { kind: "system",   tag: "codex", body: "Verification agent assumed for the attached ideation run." },
    { kind: "system",   tag: "codex", body: "Plan is ready: Add ExecutionBar to Agents Screen…" },
    { kind: "system",   tag: "codex", body: "Plan ran. First for the attached ideation run (1)." },
  ];

  const start = 0.05, end = 0.85;
  const per = (end - start) / entries.length;

  return (
    <div className="ws-main">
      <div className="ws-main-header">
        <div className="ws-main-title">Add execution bar to Agents screen layout</div>
        <div className="ws-main-actions">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12h18M3 6h18M3 18h18" /></svg>
          <span className="agent-tag">
            <span className="dot" style={{ background: "var(--accent)" }} />
            agent-453fbabe-d
          </span>
        </div>
      </div>
      <div className="ws-subtabs">
        <span className="ws-subtab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /></svg>Plan</span>
        <span className="ws-subtab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" /><path d="M22 4l-10 10-3-3" /></svg>Verification</span>
        <span className="ws-subtab">Proposals <span className="num">3</span></span>
        <span className="ws-subtab is-active">Tasks</span>
        <span className="ws-subtab">Commit & Publish</span>
      </div>
      <div className="ws-thread thread-agents">
        {entries.map((e, i) => {
          const localStart = start + i * per;
          const p = range(progress, localStart, localStart + per * 0.7, Easing.apple);
          const opacity = p;
          const y = lerp(20, 0, p);
          const blur = lerp(8, 0, p);
          return (
            <div key={i} className={`thread-entry thread-${e.kind}`}
                 style={{ opacity, transform: `translate3d(0, ${y}px, 0)`, filter: `blur(${blur}px)` }}>
              {e.kind === "ideation" ? (
                <div className="ideation-card">
                  <span className="badge-mini">
                    <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A7 7 0 0 0 12 2z" /></svg>
                    {e.title}
                  </span>
                  <div className="ideation-card-body">{e.body}</div>
                  <div className="ideation-card-tags">
                    <span className="tag tag-ideation">ideation</span>
                    <span className="tag tag-open">Open Sub</span>
                  </div>
                </div>
              ) : e.kind === "system" ? (
                <div className="thread-system">
                  <span className="thread-tag">{e.tag}</span>
                  <span className="thread-text">{e.body}</span>
                  <span className="thread-time">1 day ago</span>
                </div>
              ) : (
                <div className="thread-user">
                  <span className="thread-text">{e.body}</span>
                  <span className="thread-time">1 day ago</span>
                </div>
              )}
            </div>
          );
        })}
        <div className="thread-scroll-pill">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
          Scroll to bottom
        </div>
      </div>
    </div>
  );
}

// =========================================================================
// SCENE: KANBAN — Tasks board for the agent fleet (matches v29a).
// Five columns, DONE has Escalated + Completed sub-buckets, execution bar
// pinned to the bottom.
// =========================================================================
const KB_COLUMNS = [
  { id: "draft",    label: "DRAFT",       count: 0 },
  { id: "ready",    label: "READY",       count: 0 },
  { id: "progress", label: "IN PROGRESS", count: 0 },
  { id: "review",   label: "IN REVIEW",   count: 0 },
];
const KB_DONE_ESCALATED = [
  { id: "merge-plan", title: "Merge plan into main", body: "Auto-created merge task: merges feature branch into main", tag: "Plan Merge" },
];
const KB_DONE_COMPLETED = [
  { id: "smoke",   title: "Add visual and Tauri smoke ver…",  body: "Add focused visual/runtime proof that the Settings font-size mapping renders…",  rating: 4 },
  { id: "audit",   title: "Define and verify intended glob…", body: "Audit representative app typography after the root-scale fix and convert any drift…", rating: 4 },
  { id: "fontfix", title: "Fix root font-scale mapping wit…", body: "Lock and fix the non-monotonic font-scale regression. The current scale dips…",         rating: 4 },
];

function SceneKanban() {
  const { progress } = useStage();
  const reveal = range(progress, 0.05, 0.30, Easing.apple);

  return (
    <div className="ws-main ws-main-kanban">
      <div className="kb-toolbar" style={{ opacity: reveal }}>
        <div className="kb-search">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" /></svg>
          Search tasks…
        </div>
        <span className="kb-tab is-active">
          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7" /></svg>
          Fix non-monotonic font scale… <span className="kb-tab-count">1/4</span>
        </span>
        <span className="kb-tab">Archived <span className="num">2</span></span>
        <span className="kb-toolbar-spacer" />
        <span className="kb-icon-btn">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3v18h18" /><path d="M7 14l4-4 4 3 5-7" /></svg>
        </span>
      </div>

      <div className="kb-board kb-board-v29">
        {KB_COLUMNS.map((col, ci) => {
          const colReveal = range(progress, 0.05 + ci * 0.04, 0.25 + ci * 0.04, Easing.apple);
          return (
            <div key={col.id} className="kb-col kb-col-v29"
                 style={{ opacity: colReveal, transform: `translate3d(0, ${lerp(10, 0, colReveal)}px, 0)` }}>
              <div className="kb-col-head-v29">
                <span className="kb-col-title">{col.label}</span>
                <span className="kb-col-count">({col.count})</span>
              </div>
              <div className="kb-col-empty">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="7" width="18" height="13" rx="2" /><path d="M3 11h18" /></svg>
                <span>No tasks</span>
              </div>
              {col.id === "draft" && (
                <button className="kb-add-task">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
                  Add task
                </button>
              )}
            </div>
          );
        })}

        {/* DONE column — has escalated + completed groups */}
        <div className="kb-col kb-col-v29 kb-col-done"
             style={{ opacity: range(progress, 0.20, 0.45, Easing.apple) }}>
          <div className="kb-col-head-v29">
            <span className="kb-col-title">DONE</span>
            <span className="kb-col-count">(4 · 8h)</span>
          </div>

          <div className="kb-group">
            <div className="kb-group-head">
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
              <span className="kb-group-label kb-group-escalated">⚠ Escalated</span>
              <span className="kb-group-num">(1)</span>
            </div>
            {KB_DONE_ESCALATED.map((c, i) => {
              const p = range(progress, 0.30 + i * 0.04, 0.50 + i * 0.04, Easing.apple);
              return (
                <div key={c.id} className="kb-card-v29 kb-card-escalated"
                     style={{ opacity: p, transform: `translate3d(0, ${lerp(8, 0, p)}px, 0)` }}>
                  <div className="kb-card-v29-title">{c.title}</div>
                  <div className="kb-card-v29-body">{c.body}</div>
                  <span className="kb-tag kb-tag-warn">{c.tag}</span>
                </div>
              );
            })}
          </div>

          <div className="kb-group">
            <div className="kb-group-head">
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
              <span className="kb-group-label">Completed</span>
              <span className="kb-group-num">(3)</span>
            </div>
            {KB_DONE_COMPLETED.map((c, i) => {
              const p = range(progress, 0.40 + i * 0.05, 0.60 + i * 0.05, Easing.apple);
              return (
                <div key={c.id} className="kb-card-v29"
                     style={{ opacity: p, transform: `translate3d(0, ${lerp(8, 0, p)}px, 0)` }}>
                  <div className="kb-card-v29-title">{c.title}
                    <svg className="kb-card-check" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M8 12l3 3 5-6" /></svg>
                  </div>
                  <div className="kb-card-v29-body">{c.body}</div>
                  <div className="kb-card-rating">
                    <span className="kb-stars">{Array.from({length: c.rating}, (_, j) => <span key={j} className="kb-star kb-star-on" />)}{Array.from({length: 4 - c.rating}, (_, j) => <span key={`o${j}`} className="kb-star" />)}</span>
                    <span className="kb-card-progress">
                      <span className="kb-card-progress-bar"><span className="kb-card-progress-fill" style={{ width: "100%" }} /></span>
                      <span className="kb-card-progress-pct">100%</span>
                    </span>
                  </div>
                  <div className="kb-card-meta-row">
                    <span className="kb-tag kb-tag-mini">Regular</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Execution bar */}
      <div className="exec-bar" style={{ opacity: range(progress, 0.55, 0.80, Easing.apple) }}>
        <span className="exec-stat exec-stat-running">
          <span className="dot dot-accent" />
          Running <strong>0/10</strong>
        </span>
        <span className="dot-sep">·</span>
        <span className="exec-stat">Queued <strong>0</strong></span>
        <span className="dot-sep">·</span>
        <span className="exec-stat">Ideation <strong>0/2</strong></span>
        <span className="dot-sep">·</span>
        <span className="exec-stat exec-stat-warn">⚠ Escalated <strong>1</strong></span>
        <span className="exec-bar-spacer" />
        <button className="exec-btn">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="5" width="4" height="14" /><rect x="14" y="5" width="4" height="14" /></svg>
          Pause
        </button>
        <button className="exec-btn exec-btn-stop">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="5" width="14" height="14" rx="1" /></svg>
          Stop
        </button>
      </div>
    </div>
  );
}

// =========================================================================
// SCENE: TERMINAL — bottom slide-up panel showing live agent terminal.
// Mirrors Screenshot 2026-04-26 at 13.50.09 lower region.
// =========================================================================
function SceneTerminal() {
  const { progress } = useStage();

  // Lines reveal sequentially.
  const TERM_LINES = [
    { kind: "prompt", t: "you are not compatible with the \"npmconfig.prefix\" environment variable; currently set to \"/opt/homebrew\"" },
    { kind: "prompt", t: "Run `unset npm_config_prefix` to unset it." },
    { kind: "branch", t: "agent-conversation-9cdc272eeb700a0f3df6a0a8 git:(ralphx/ralphx/agent-746b0fa7) gst" },
    { kind: "info",   t: "/Users/lazabogdan/Code/ralphx-worktrees/master-1903fb7b/dabb1c4670a87e/3a89/agent-conversation-9cdc272eeb700a0f3df6a0a8" },
    { kind: "branch", t: "agent-conversation-9cdc272eeb700a0f3df6a0a8 git:(ralphx/ralphx/agent-746b0fa7)" },
  ];
  const start = 0.05, end = 0.80;
  const per = (end - start) / TERM_LINES.length;

  // Background thread fades behind terminal slide-up
  const dim = range(progress, 0.0, 0.3, Easing.apple);

  return (
    <div className="ws-main">
      {/* Faded thread underneath */}
      <div className="ws-main-header">
        <div className="ws-main-title">Update Codex models and centralize model registry</div>
        <div className="ws-main-actions">
          <span className="agent-tag"><span className="dot" style={{ background: "var(--accent)" }} />agent-746b0fa7 · Active</span>
        </div>
      </div>
      <div className="ws-subtabs">
        <span className="ws-subtab is-active">Plan</span>
        <span className="ws-subtab">Verification</span>
        <span className="ws-subtab">Proposals <span className="num">3</span></span>
        <span className="ws-subtab">Tasks</span>
        <span className="ws-subtab">Commit & Publish</span>
      </div>
      <div className="ws-thread thread-terminal-host" style={{ opacity: 1 - dim * 0.55 }}>
        <div className="term-thread-fade">
          <div className="art-section">Files changed</div>
          <div className="art-bullet">• <a className="art-link">frontend/src/components/agents/AgentChatHeader.tsx</a></div>
          <div className="art-bullet">• <a className="art-link">frontend/src/components/agents/AgentChatHeader.test.tsx</a></div>
          <div className="art-bullet">• <a className="art-link">frontend/src/components/settings/IdeationHarness.tsx</a></div>
          <div className="art-bullet">• <a className="art-link">frontend/src/components/agents/AgentsView.tsx</a></div>
          <div className="art-section">Key decisions</div>
          <div className="art-bullet">• Added a named <code>AGENT_MODEL_CATALOG</code> with canonical Codex models, including:</div>
          <pre className="art-code">{"  - gpt-5.5\n  - gpt-5.4\n  - gpt-5.4-mini\n  - gpt-5.3-codex\n  - gpt-5.4-codex-agent"}</pre>
        </div>
      </div>

      {/* Terminal slide-up panel */}
      <div className="term-panel" style={{
        transform: `translate3d(0, ${lerp(100, 0, range(progress, 0.05, 0.30, Easing.apple))}%, 0)`,
        opacity: range(progress, 0.05, 0.30, Easing.apple),
      }}>
        <div className="term-panel-head">
          <span className="term-panel-title">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 9l4 3-4 3M11 15h8" /></svg>
            Terminal
            <span className="term-running">· Running</span>
            <span className="term-agent-id"><code>agent-746b0fa7</code></span>
            <span className="term-worktree">~/ralphx-worktrees/master-1003fb7b/d28015f0c81f9eb38/agent-conversation-9cdc272eeb700a0f3df6a0a8</span>
          </span>
          <div className="term-panel-actions">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3" /></svg>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></svg>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
          </div>
        </div>
        <div className="term-panel-body">
          {TERM_LINES.map((l, i) => {
            const localStart = start + i * per;
            const p = range(progress, localStart, localStart + per * 0.6, Easing.apple);
            return (
              <div key={i} className={`term-line term-${l.kind}`} style={{ opacity: p, transform: `translate3d(0, ${lerp(6, 0, p)}px, 0)` }}>
                {l.kind === "branch" && <span className="term-prompt">→</span>}
                <span className="term-text">{l.t}</span>
              </div>
            );
          })}
          {progress > 0.85 && <span className="term-cursor">▌</span>}
        </div>
      </div>
    </div>
  );
}

// =========================================================================
// SCENE: ARTIFACTS / COMMIT & PUBLISH
// Matches Screenshot 2026-04-29 at 15.07.51 (left thread + right slide-over).
// =========================================================================
function SceneArtifacts() {
  const { progress } = useStage();
  const items = [
    { kind: "head", title: "Replace chat focus pills with compact dropdown", body: "Swapped the four-up \"focus\" pill row above the composer for a single compact dropdown. Behaviour kept identical (same enum, same telemetry event), but it reclaims roughly 40px of vertical space per thread and stops drawing the eye away from the message body." },
    { kind: "section", title: "Key decisions" },
    { kind: "bullet", body: "Used the existing FocusMode enum unchanged so server-side filters and analytics stay valid." },
    { kind: "bullet", body: "Dropdown uses the shared <Menu> primitive — no new component, no new bundle weight." },
    { kind: "bullet", body: "Default value reads from the last-used mode in localStorage; old pill pressed-state migrated 1:1 on first paint." },
    { kind: "bullet", body: "Kept the keyboard shortcut F, for cycling — it now opens and steps through the dropdown instead of pressing the next pill." },
    { kind: "section", title: "Validation" },
    { kind: "bullet", body: "Manual: dark / light / hc themes. Compose flow with focus=plan and focus=debug both round-trip the value to the API." },
    { kind: "bullet", body: "Snapshot: compose-header.spec.ts updated; old pill-row snapshot deleted." },
    { kind: "bullet", body: "Telemetry: confirmed focus_changed event still fires with { from, to } payload." },
    { kind: "section", title: "Remaining risks" },
    { kind: "bullet", body: "No functional risk found. The only visual regression is that long mode names (\"Plan with research\") now truncate inside the trigger — falls back to a tooltip on hover." },
  ];
  const start = 0.05, end = 0.85;
  const per = (end - start) / items.length;

  return (
    <div className="ws-main">
      <div className="ws-main-header">
        <div className="ws-main-title">Replace chat focus pills with compact dropdown</div>
        <div className="ws-main-actions">
          <span className="agent-tag">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="6" r="2" /><circle cx="18" cy="18" r="2" /><path d="M8 6h8a4 4 0 0 1 0 8H8" /></svg>
            agent-c81ce308 · Behind Base
          </span>
        </div>
      </div>
      <div className="ws-subtabs">
        <span className="ws-subtab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /></svg>Plan</span>
        <span className="ws-subtab">Verification</span>
        <span className="ws-subtab">Proposals <span className="num">3</span></span>
        <span className="ws-subtab">Tasks</span>
        <span className="ws-subtab is-active">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6" /></svg>
          Commit & Publish
        </span>
      </div>
      <div className="ws-thread thread-artifacts">
        {items.map((it, i) => {
          const p = range(progress, start + i * per, start + i * per + per * 0.7, Easing.apple);
          const style = { opacity: p, transform: `translate3d(0, ${lerp(20, 0, p)}px, 0)`, filter: `blur(${lerp(8, 0, p)}px)` };
          if (it.kind === "head")    return <div key={i} className="art-head"    style={style}><h3>{it.title}</h3><p>{it.body}</p></div>;
          if (it.kind === "section") return <div key={i} className="art-section" style={style}>{it.title}</div>;
          if (it.kind === "bullet")  return <div key={i} className="art-bullet"  style={style}>• {it.body}</div>;
          if (it.kind === "code")    return <pre key={i} className="art-code"    style={style}>{it.body}</pre>;
          return null;
        })}
      </div>
    </div>
  );
}

function SceneArtifactsRight() {
  const { progress } = useStage();
  const visible = range(progress, 0.4, 0.7, Easing.apple);
  return (
    <>
      <div className="ws-rightpanel-header">
        <div className="ws-rightpanel-title">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6" /></svg>
          Commit & Publish
        </div>
        <div className="ws-rightpanel-sub-block">
          <div className="ws-rightpanel-subtitle">Review Changes</div>
          <div className="ws-rightpanel-sub">Review this agent's workspace before publishing as draft PR.</div>
        </div>
      </div>
      <div className="ws-rightpanel-body" style={{ opacity: visible, transform: `translate3d(0, ${lerp(16, 0, visible)}px, 0)`, transition: "opacity 600ms var(--ease-apple), transform 600ms var(--ease-apple)" }}>
        <div className="rp-grid">
          <div className="rp-cell"><div className="rp-key">BRANCH</div><div className="rp-val">ralphx/ralphx/agent-c81ce308</div></div>
          <div className="rp-cell"><div className="rp-key">BASE</div><div className="rp-val">Current branch (feature/agent-screen)</div></div>
          <div className="rp-cell"><div className="rp-key">PULL REQUEST</div><div className="rp-val">No PR yet</div></div>
          <div className="rp-cell"><div className="rp-key">MODE</div><div className="rp-val">Edit agent</div></div>
        </div>
        <div className="rp-warn">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10.3 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" /></svg>
          Base branch <strong>feature/agent-screen</strong> has new commits.
        </div>
        <div className="rp-section">
          <div className="rp-section-row">
            <div>
              <div className="rp-section-title">Commit & Publish</div>
              <div className="rp-section-sub">5 changed files ready for review.</div>
            </div>
            <div className="rp-action-row">
              <button className="rp-btn rp-btn-ghost"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6" /></svg>Review Changes</button>
              <button className="rp-btn rp-btn-primary"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5M5 12l7-7 7 7" /></svg>Update from feature/agent-screen</button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

// =========================================================================
// SCENE: SETTINGS — Ideation Agents (matches v31).
// Modal-style sheet over the workspace; left settings nav + main settings body.
// =========================================================================
const SETTINGS_NAV = [
  { group: "WORKSPACE", items: [
    { id: "repo",    label: "Repository" },
    { id: "setup",   label: "Setup & Validation" },
  ]},
  { group: "GENERAL", items: [
    { id: "exec",    label: "Execution" },
    { id: "execag",  label: "Execution Agents" },
    { id: "cap",     label: "Global Capacity" },
    { id: "review",  label: "Review Policy" },
  ]},
  { group: "IDEATION", items: [
    { id: "plan",    label: "Planning & Verification" },
    { id: "agents",  label: "Ideation Agents", active: true },
  ]},
  { group: "ACCESS", items: [
    { id: "keys",    label: "API Keys" },
    { id: "mcp",     label: "External MCP" },
  ]},
  { group: "PREFERENCES", items: [
    { id: "a11y",    label: "Accessibility" },
  ]},
];

const SETTINGS_AGENTS = [
  { id: "primary",  title: "Primary Ideation",   role: "LEAD",       sub: "Orchestrator and ideation lead lane",          model: "gpt-5.4 (Current)", effort: "Maximum" },
  { id: "verifier", title: "Verification",        role: "VERIFIER",   sub: "Plan verifier lane",                            model: "gpt-5.4-mini",      effort: "Medium" },
  { id: "subs",     title: "Ideation Subagents",  role: "SPECIALISTS", sub: "Specialist subagents for retrieval, code, and structured analysis", model: "gpt-5.4-mini", effort: "Low" },
];

function SettingsModal({ reveal = 1 }) {
  const sheet = range(reveal, 0, 1, Easing.apple);

  return (
    <div className="settings-modal-root" style={{ opacity: sheet, pointerEvents: sheet > 0.5 ? "auto" : "none" }}>
      <div className="settings-modal-backdrop" />

      <div className="settings-sheet"
           style={{ transform: `translate3d(0, ${lerp(14, 0, sheet)}px, 0) scale(${lerp(0.985, 1, sheet)})` }}>
        <div className="settings-header">
          <span className="settings-breadcrumb">Settings <span className="chev">›</span> Ideation Agents</span>
          <span className="settings-close">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18M6 6l12 12" /></svg>
          </span>
        </div>

        <div className="settings-body">
          <aside className="settings-nav">
            {SETTINGS_NAV.map((g) => (
              <div key={g.group} className="settings-nav-group">
                <div className="settings-nav-label">{g.group}</div>
                {g.items.map((it) => (
                  <div key={it.id} className={`settings-nav-item ${it.active ? "is-active" : ""}`}>
                    {it.label}
                  </div>
                ))}
              </div>
            ))}
          </aside>

          <div className="settings-main">
            <div className="settings-main-header">
              <div className="settings-main-icon">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" /></svg>
              </div>
              <div className="settings-main-title-block">
                <div className="settings-main-title">Ideation Agents</div>
                <div className="settings-main-sub">Choose Claude or Codex for ideation leads, verification, and specialist lanes. Codex ideation still runs in solo mode, so these settings mainly control planning and verifier routing.</div>
              </div>
            </div>

            <div className="settings-tabs">
              <span className="settings-tab is-active">Global Defaults</span>
              <span className="settings-tab">Project Overrides</span>
              <span className="settings-tab-spacer" />
              <span className="settings-tab-meta">Default harness policy for ideation leads, verification, and specialist lanes.</span>
              <span className="settings-tab-collapse">
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
                Collapse all
              </span>
            </div>

            <div className="settings-status-row">
              <div className="settings-status-card">
                <span className="status-tick">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M8 12l3 3 5-6" /></svg>
                </span>
                <div>
                  <div className="settings-status-title">codex available</div>
                  <div className="settings-status-sub">/opt/homebrew/bin/codex</div>
                </div>
              </div>
              <div className="settings-status-card">
                <span className="status-lock">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></svg>
                </span>
                <div>
                  <div className="settings-status-title">Codex lanes locked</div>
                  <div className="settings-status-sub">Approval Never · Sandbox Danger Full Access</div>
                </div>
              </div>
            </div>

            <div className="settings-callout">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10.3 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" /></svg>
              RalphX MCP tools require these settings on Codex — switch a lane to <strong>Claude</strong> to override.
            </div>

            <div className="settings-agents">
              {SETTINGS_AGENTS.map((a, i) => {
                const p = range(reveal, 0.20 + i * 0.10, 0.55 + i * 0.10, Easing.apple);
                return (
                  <div key={a.id} className="settings-agent-card"
                       style={{ opacity: p, transform: `translate3d(0, ${lerp(10, 0, p)}px, 0)` }}>
                    <div className="settings-agent-head">
                      <div className="settings-agent-title-block">
                        <div className="settings-agent-title">
                          {a.title}
                          <span className={`settings-agent-role role-${a.role.toLowerCase()}`}>{a.role}</span>
                        </div>
                        <div className="settings-agent-sub">{a.sub}</div>
                      </div>
                      <span className="settings-agent-provider">
                        Codex
                        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
                      </span>
                    </div>
                    <div className="settings-agent-grid">
                      <div className="settings-field">
                        <span className="settings-field-key">Model</span>
                        <span className="settings-field-val">
                          {a.model}
                          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
                        </span>
                      </div>
                      <div className="settings-field">
                        <span className="settings-field-key">Effort</span>
                        <span className="settings-field-val">
                          {a.effort}
                          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
                        </span>
                      </div>
                      <div className="settings-field">
                        <span className="settings-field-key">Approval</span>
                        <span className="settings-field-val settings-field-locked">
                          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></svg>
                          Never
                          <span className="locked-tag">CODEX-LOCKED</span>
                        </span>
                      </div>
                      <div className="settings-field">
                        <span className="settings-field-key">Sandbox</span>
                        <span className="settings-field-val settings-field-locked">
                          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></svg>
                          Danger Full Access
                          <span className="locked-tag">CODEX-LOCKED</span>
                        </span>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  TASKS_BY_SCENE,
  SceneLauncher,
  SceneAgents,
  SceneKanban,
  SceneTerminal,
  SceneArtifacts,
  SceneArtifactsRight,
  SettingsModal,
});