File size: 39,675 Bytes

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Research Roadmap | Ropedia Xperience-10M Task Suite</title>
  <meta name="description" content="Focused research roadmap connecting the Xperience-10M 20-task suite, four research tracks, current sample results, Qwen3-Omni fine-tuning, and foundation-model branch selection.">
  <meta name="theme-color" content="#020502">
  <link rel="icon" href="favicon.png" type="image/png" sizes="64x64">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      color-scheme: dark;
      --ink: #f4f8ef;
      --muted: #a5afa2;
      --line: rgba(204, 255, 160, 0.24);
      --soft-line: rgba(204, 255, 160, 0.14);
      --page: #020502;
      --panel: #061006;
      --surface: #071207;
      --green: #ccffa0;
      --cyan: #7ae5c3;
      --blue: #9bdfff;
      --amber: #d8f4a5;
      --red: #ff8f7a;
      --card: rgba(5, 10, 6, 0.84);
      --pill: rgba(255, 255, 255, 0.05);
      --radius: 8px;
      --max: 1360px;
      --font-ui: "Inter Tight", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-btn: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-mono: "Space Grotesk", "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    }

    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    html { scroll-padding-top: 72px; }
    body {
      margin: 0;
      color: var(--ink);
      font-family: var(--font-ui);
      line-height: 1.5;
      background: var(--page);
      font-synthesis-weight: none;
    }
    a { color: inherit; }
    .page-progress {
      position: fixed;
      inset: 0 0 auto;
      z-index: 60;
      height: 2px;
      pointer-events: none;
      background: rgba(204, 255, 160, 0.08);
    }
    .page-progress span {
      display: block;
      width: calc(var(--scroll-progress, 0) * 100%);
      height: 100%;
      background: linear-gradient(90deg, var(--green), var(--cyan), var(--green));
      box-shadow: 0 0 18px rgba(204, 255, 160, 0.45);
      transition: width 90ms linear;
    }
    .scroll-companion {
      position: fixed;
      right: max(18px, env(safe-area-inset-right));
      bottom: max(18px, env(safe-area-inset-bottom));
      z-index: 58;
      display: grid;
      grid-template-columns: minmax(160px, auto) auto;
      gap: 8px;
      align-items: stretch;
      pointer-events: none;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 180ms ease, transform 180ms ease;
    }
    .scroll-companion.is-visible { opacity: 1; transform: translateY(0); }
    .scroll-status {
      min-height: 44px;
      display: grid;
      align-content: center;
      gap: 2px;
      padding: 8px 12px;
      border: 1px solid rgba(204, 255, 160, 0.22);
      border-radius: 14px;
      background: rgba(2, 5, 2, 0.86);
      backdrop-filter: blur(16px);
      box-shadow: 0 18px 46px rgba(0, 0, 0, 0.30);
      pointer-events: auto;
    }
    .scroll-status strong {
      color: var(--ink);
      font-family: var(--font-mono);
      font-size: 13px;
      line-height: 1;
    }
    .scroll-status span {
      max-width: 240px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .back-to-top {
      min-width: 54px;
      min-height: 44px;
      border: 1px solid rgba(204, 255, 160, 0.34);
      border-radius: 14px;
      background: var(--green);
      color: #020502;
      font-family: var(--font-btn);
      font-size: 12px;
      font-weight: 820;
      cursor: pointer;
      box-shadow: 0 18px 46px rgba(0, 0, 0, 0.30);
      pointer-events: auto;
    }
    .back-to-top:hover,
    .back-to-top:focus-visible { background: #f4f8ef; border-color: #f4f8ef; }
    .wrap { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
    .site-nav {
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid var(--soft-line);
      background: rgba(2, 5, 2, 0.88);
      backdrop-filter: blur(18px);
    }
    .nav-inner {
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      font-weight: 700;
      white-space: nowrap;
    }
    .brand img {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      border: 1px solid rgba(204, 255, 160, 0.42);
      background: #061006;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-btn);
      font-size: 13px;
    }
    .nav-links a {
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: var(--pill);
      text-decoration: none;
    }
    .nav-links a:hover,
    .nav-links a.active {
      color: var(--green);
      border-color: var(--green);
      background: rgba(255, 255, 255, 0.08);
    }
    .nav-links a.primary {
      color: #020502;
      border-color: var(--green);
      background: var(--green);
    }
    .nav-links a.primary:hover {
      color: #020502;
      background: #f4f8ef;
    }
    button, select, input { font: inherit; }
    button { color: inherit; }
    button:focus-visible, a:focus-visible {
      outline: 2px solid rgba(204, 255, 160, 0.58);
      outline-offset: 3px;
    }
    .hero {
      position: relative;
      overflow: hidden;
      padding: 86px 0 48px;
      border-bottom: 1px solid var(--soft-line);
      background:
        linear-gradient(90deg, rgba(2, 5, 2, 0.96) 0%, rgba(2, 5, 2, 0.84) 52%, rgba(2, 5, 2, 0.70) 100%),
        linear-gradient(180deg, rgba(2, 5, 2, 0.12), rgba(5, 6, 11, 0.98)),
        url("assets/qwen3_omni_lora_pipeline.png?v=qwen3-lora-v1") center right / cover no-repeat;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
      gap: 54px;
      align-items: center;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 22px;
      color: var(--green);
      font-family: var(--font-btn);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 34px;
      height: 1px;
      background: var(--green);
    }
    h1 {
      margin: 0;
      max-width: 900px;
      font-size: clamp(44px, 7vw, 86px);
      line-height: 0.98;
      letter-spacing: 0;
      text-wrap: balance;
    }
    .hero-copy {
      max-width: 820px;
      margin: 24px 0 0;
      color: #c7d1c3;
      font-size: 19px;
      line-height: 1.65;
      text-wrap: pretty;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 32px;
    }
    .button {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 18px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 999px;
      background: var(--pill);
      color: var(--ink);
      font-family: var(--font-btn);
      font-weight: 700;
      text-decoration: none;
    }
    .button.primary {
      color: #020502;
      border-color: var(--green);
      background: var(--green);
    }
    .button:hover { border-color: var(--green); }
    .hero-panel {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
      padding: 20px;
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    }
    .route {
      display: grid;
      gap: 12px;
    }
    .route-step {
      display: grid;
      grid-template-columns: 42px 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border: 1px solid var(--soft-line);
      border-radius: var(--radius);
      background: rgba(2, 8, 2, 0.78);
    }
    .route-step strong {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(204, 255, 160, 0.12);
      color: var(--green);
      font-family: var(--font-btn);
    }
    .route-step span {
      color: var(--muted);
      font-size: 12px;
      font-family: var(--font-btn);
    }
    .route-step b { display: block; }
    .route-step em {
      color: var(--green);
      font-style: normal;
      font-family: var(--font-mono);
      font-size: 13px;
    }
    main { background: #05060b; }
    .facts {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      padding: 22px 0;
    }
    .fact {
      min-height: 96px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
      padding: 16px;
    }
    .fact strong {
      display: block;
      font-family: var(--font-mono);
      font-size: 24px;
      line-height: 1;
    }
    .fact span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 13px;
    }
    .roadmap-section {
      padding: 42px 0 76px;
      border-top: 1px solid var(--soft-line);
    }
    .section-head {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.75fr);
      gap: 54px;
      align-items: start;
      padding-top: 36px;
      border-top: 1px solid rgba(255, 255, 255, 0.16);
    }
    .section-head h2 {
      margin: 0;
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1.02;
      letter-spacing: 0;
    }
    .section-head p {
      margin: 0;
      color: #c7d1c3;
      font-size: 17px;
      line-height: 1.62;
    }
    .roadmap-jump-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 26px 0 18px;
    }
    .roadmap-jump-nav a {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      border: 1px solid var(--soft-line);
      border-radius: 999px;
      background: var(--pill);
      color: #dce8d6;
      font-family: var(--font-btn);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
    }
    .roadmap-jump-nav a:first-child,
    .roadmap-jump-nav a:hover {
      color: #020502;
      border-color: var(--green);
      background: var(--green);
    }
    .roadmap-detail-flow {
      display: grid;
      gap: 30px;
    }
    #roadmap-app,
    #stage-timeline,
    #research-tracks,
    #scale-up,
    #task-coverage,
    #source-mirrors {
      scroll-margin-top: 92px;
    }
    .reader-section {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--card);
      padding: 24px;
      box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24);
    }
    .reader-section-head {
      display: grid;
      grid-template-columns: minmax(0, 0.75fr) minmax(320px, 0.55fr);
      gap: 28px;
      align-items: start;
      margin-bottom: 18px;
    }
    .reader-section-head h2 {
      margin: 6px 0 0;
      font-size: clamp(28px, 3.4vw, 46px);
      line-height: 1.04;
    }
    .reader-section-head p {
      margin: 0;
      color: #c7d1c3;
      font-size: 16px;
      line-height: 1.58;
    }
    .panel-label {
      color: var(--green);
      font-family: var(--font-btn);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .stage-timeline,
    .scale-grid,
    .track-stack,
    .task-index-grid {
      display: grid;
      gap: 10px;
    }
    .stage-timeline {
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }
    .scale-grid {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
    .track-stack {
      grid-template-columns: 1fr;
    }
    .task-index-grid {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    .phase,
    .scale-card,
    .track-card,
    .task-mini-card {
      border: 1px solid var(--soft-line);
      border-radius: var(--radius);
      background: rgba(2, 8, 2, 0.76);
    }
    .phase,
    .scale-card,
    .task-mini-card {
      padding: 14px;
    }
    .track-card {
      padding: 18px;
    }
    .phase[data-stage="now"],
    .phase[data-stage="scale_up"],
    .phase[data-stage="omni"],
    .track-card[data-status*="implemented"],
    .track-card[data-status*="current"] {
      border-color: rgba(204, 255, 160, 0.42);
    }
    .phase span {
      display: inline-flex;
      margin-bottom: 8px;
      color: var(--green);
      font-family: var(--font-btn);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
    }
    .phase strong {
      display: block;
      line-height: 1.12;
    }
    .phase p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }
    .track-card-head {
      display: grid;
      grid-template-columns: minmax(0, 0.68fr) minmax(260px, 0.42fr);
      gap: 20px;
      align-items: start;
    }
    .track-card h3,
    .scale-card h3,
    .task-mini-card h3 {
      margin: 0;
      line-height: 1.12;
    }
    .track-card h3 {
      font-size: 28px;
    }
    .track-card p,
    .scale-card p,
    .task-mini-card p,
    .track-card li {
      color: #c7d1c3;
      line-height: 1.52;
    }
    .track-card p,
    .scale-card p {
      margin: 10px 0 0;
      font-size: 15px;
    }
    .track-summary {
      display: grid;
      gap: 10px;
      align-content: start;
    }
    .track-summary strong {
      color: var(--ink);
    }
    .track-meta,
    .task-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }
    .direction-task-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 10px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--soft-line);
    }
    .task-mini-card {
      display: grid;
      gap: 9px;
      min-height: 190px;
    }
    .task-mini-card h3 {
      font-size: 17px;
    }
    .task-mini-card p {
      margin: 0;
      font-size: 13px;
    }
    .task-mini-card .task-metric {
      display: grid;
      gap: 5px;
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid var(--soft-line);
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 12px;
    }
    .track-details {
      margin-top: 16px;
      border-top: 1px solid var(--soft-line);
      padding-top: 14px;
    }
    .track-details summary {
      cursor: pointer;
      color: var(--green);
      font-family: var(--font-btn);
      font-weight: 700;
    }
    .track-details ul {
      display: grid;
      gap: 8px;
      margin: 12px 0 0;
      padding-left: 18px;
    }
    .chip {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 8px;
      border: 1px solid var(--soft-line);
      border-radius: 999px;
      color: #dce8d6;
      background: rgba(255, 255, 255, 0.04);
      font-family: var(--font-btn);
      font-size: 11px;
      font-weight: 700;
    }
    .chip.green { color: var(--green); }
    .chip.blue { color: var(--blue); }
    .chip.cyan { color: var(--cyan); }
    .chip.amber { color: var(--amber); }
    .metric-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .metric {
      border: 1px solid var(--soft-line);
      border-radius: var(--radius);
      padding: 10px;
      background: rgba(2, 8, 2, 0.72);
    }
    .metric strong {
      display: block;
      font-family: var(--font-mono);
      font-size: 18px;
      line-height: 1;
    }
    .metric span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
    }
    .artifact-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }
    .artifact-note {
      margin: 20px 0 -8px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }
    .artifact-row a {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      padding: 0 13px;
      border: 1px solid var(--soft-line);
      border-radius: 999px;
      background: var(--pill);
      color: #dce8d6;
      font-family: var(--font-btn);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
    }
    .artifact-row a:hover { border-color: var(--green); color: var(--green); }
    .loading {
      min-height: 480px;
      display: grid;
      place-items: center;
      color: var(--muted);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
    }
    .static-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 18px 0 22px;
    }
    .static-card {
      border: 1px solid var(--soft-line);
      border-radius: var(--radius);
      background: rgba(5, 10, 6, 0.74);
      padding: 16px;
    }
    .static-card small {
      display: block;
      color: var(--green);
      font-family: var(--font-btn);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .static-card strong {
      display: block;
      margin-top: 7px;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.2;
    }
    .static-card p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }
    @media (max-width: 1180px) {
      .hero-grid,
      .section-head,
      .reader-section-head,
      .track-card-head { grid-template-columns: 1fr; }
    }
    @media (max-width: 760px) {
      .wrap { width: min(100% - 28px, var(--max)); }
      .scroll-companion {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        grid-template-columns: minmax(0, 1fr) auto;
        max-width: calc(100vw - 24px);
      }
      .scroll-status { min-width: 0; padding: 7px 10px; }
      .scroll-status span { max-width: 52vw; }
      .back-to-top { min-width: 48px; padding: 0 10px; }
      .nav-links { display: none; }
      .hero { padding-top: 52px; }
      .hero-copy { font-size: 17px; }
      .facts,
      .stage-timeline,
      .scale-grid,
      .task-index-grid,
      .direction-task-grid,
      .metric-grid { grid-template-columns: 1fr; }
      .route-step { grid-template-columns: 38px 1fr; }
      .route-step em { grid-column: 2; }
      .static-summary { grid-template-columns: 1fr; }
      .section-head { gap: 18px; }
    }
  </style>
</head>
<body>
  <div class="page-progress" aria-hidden="true"><span></span></div>
  <div class="scroll-companion" id="scrollCompanion" aria-live="polite">
    <div class="scroll-status" aria-label="Reading progress">
      <strong id="scrollPercent">0%</strong>
      <span id="scrollSection">Top</span>
    </div>
    <button class="back-to-top" id="backToTop" type="button" aria-label="Back to top">Top</button>
  </div>
  <nav class="site-nav">
    <div class="wrap nav-inner">
      <a class="brand" href="index.html" aria-label="Ropedia Xperience-10M Task Suite home">
        <img src="assets/brand/xperience10m-logo-mark-192.png" alt="" aria-hidden="true" width="38" height="38">
        <span>Ropedia Xperience-10M Task Suite</span>
      </a>
      <div class="nav-links" aria-label="Page navigation">
        <a href="index.html">Project</a>
        <a class="active" href="research_roadmap.html">Roadmap</a>
        <a href="index.html#suite">Tasks</a>
        <a href="index.html#takeaways">Results</a>
        <a href="https://github.com/ChaoYue0307/ropedia-xperience-10m-task-suite/blob/main/THREE_FOUNDATION_PIPELINES.md">Scale-up note</a>
        <a href="index.html#glossary">Glossary</a>
        <a href="single_episode_explorer.html">Explorer</a>
        <a class="primary" href="https://huggingface.co/spaces/cy0307/ropedia-xperience-10m-task-suite">HF</a>
        <a class="primary" href="https://github.com/ChaoYue0307/ropedia-xperience-10m-task-suite">Repo</a>
      </div>
    </div>
  </nav>

  <header class="hero">
    <div class="wrap hero-grid">
      <div>
        <div class="eyebrow">20 tasks / 4 tracks / scale-up path</div>
        <h1>Research Roadmap Details.</h1>
        <p class="hero-copy">
          A focused roadmap page for the project path: current public-sample task
          evidence, four research tracks, the selected-episode Qwen3-Omni scale-up
          path, Cosmos 3 / policy-model branch choices, and the future
          Xperience-native foundation-model pretraining goal. The page is generated
          from the same artifact data as the public matrix and uses simple anchors
          instead of nested controls.
        </p>
        <div class="hero-actions">
          <a class="button primary" href="#stage-timeline">Stage timeline</a>
          <a class="button" href="#research-tracks">Research tracks</a>
          <a class="button" href="#task-coverage">20-task coverage</a>
          <a class="button" href="index.html#roadmap">Back to main roadmap</a>
        </div>
      </div>
      <aside class="hero-panel" aria-label="Roadmap route">
        <div class="route">
          <div class="route-step">
            <strong>01</strong>
            <div><b>Public sample</b><span>20 task contracts and current baselines</span></div>
            <em id="routeSample">1 episode</em>
          </div>
          <div class="route-step">
            <strong>02</strong>
            <div><b>Data preparation</b><span>episode-level split and missing-view manifest</span></div>
            <em id="routeData">32 target</em>
          </div>
          <div class="route-step">
            <strong>03</strong>
            <div><b>Omni + branches</b><span>Qwen3-Omni first, Cosmos 3 and policy models next, native pretraining later</span></div>
            <em id="routeOmni">pending data</em>
          </div>
        </div>
      </aside>
    </div>
  </header>

  <main>
    <div class="wrap facts" id="facts" aria-label="Roadmap facts"></div>

    <section class="roadmap-section" id="roadmap-app">
      <div class="wrap">
        <div class="section-head">
          <h2>From one public sample to multi-episode embodied-AI experiments.</h2>
          <p>
            The roadmap keeps stage timing, research
            tracks, linked tasks, scale-up gates, and source mirrors visible without
            a separate track selector.
          </p>
        </div>

        <div class="roadmap-jump-nav" aria-label="Roadmap detail sections">
          <a href="#stage-timeline">Stage timeline</a>
          <a href="#research-tracks">Research tracks</a>
          <a href="#scale-up">Scale-up gates</a>
          <a href="#task-coverage">20-task coverage</a>
          <a href="#source-mirrors">Source mirrors</a>
        </div>

        <div class="static-summary" aria-label="Roadmap quick read">
          <article class="static-card"><small>Stage status</small><strong>Implementation state before task detail.</strong><p>Shipped, active, planned, and future stages stay separate from ambition.</p></article>
          <article class="static-card"><small>Then compare</small><strong>Four tracks reuse the same 20 tasks.</strong><p>Human motion, 3D/4D reconstruction, egocentric interaction, and world modeling are research views over the shared task suite.</p></article>
          <article class="static-card"><small>Source mirrors</small><strong>Structured data remains attached below.</strong><p>JSON mirrors and GitHub notes support validation, reproduction, and citation checks.</p></article>
        </div>
        <noscript>
          <div class="loading">JavaScript is disabled, so the generated task cards are not expanded here. The quick summary, navigation links, and structured roadmap mirrors below remain available.</div>
        </noscript>
        <div id="loading" class="loading">Loading roadmap artifacts...</div>

        <div class="roadmap-detail-flow" id="app" hidden>
          <section class="reader-section" id="stage-timeline" aria-label="Stage timeline">
            <div class="reader-section-head">
              <div>
                <div class="panel-label">01 / Stage timeline</div>
                <h2>What has shipped, what is active, and what remains future work.</h2>
              </div>
              <p>The timeline keeps implementation state separate from ambition: public-sample task work, selected-episode baselines, Qwen3-Omni diagnostics, branch experiments, and the long-range pretraining goal.</p>
            </div>
            <div class="stage-timeline" id="phaseTimeline"></div>
          </section>

          <section class="reader-section" id="research-tracks" aria-label="Research tracks and linked tasks">
            <div class="reader-section-head">
              <div>
                <div class="panel-label">02 / Research tracks</div>
                <h2>Four tracks with their task evidence kept together.</h2>
              </div>
              <p>Each track lists the linked 20-task-suite heads, current evidence state, next steps, and extension probes in one card. Nothing is hidden behind a selected-track side panel.</p>
            </div>
            <div class="track-stack" id="trackStack"></div>
          </section>

          <section class="reader-section" id="scale-up" aria-label="Scale-up and model branch gates">
            <div class="reader-section-head">
              <div>
                <div class="panel-label">03 / Scale-up gates</div>
                <h2>Data preparation and model-branch decisions.</h2>
              </div>
              <p>This section keeps the selected-episode gate, Qwen3-Omni pilot contract, and foundation-model branch matrix separate from the task cards so the training route stays clear.</p>
            </div>
            <div class="scale-grid" id="scaleCards"></div>
          </section>

          <section class="reader-section" id="task-coverage" aria-label="All 20 task coverage">
            <div class="reader-section-head">
              <div>
                <div class="panel-label">04 / 20-task coverage</div>
                <h2>All task contracts in one index.</h2>
              </div>
              <p>The compact task index is for scanning. It shows each task’s output, metric, and direction roles without forcing another navigation layer.</p>
            </div>
            <div class="task-index-grid" id="taskIndex"></div>
          </section>
        </div>

        <p class="artifact-note" id="source-mirrors">Structured mirrors for scripts and validators are attached here. The sections above summarize the roadmap before these records.</p>
        <div class="artifact-row" aria-label="Structured roadmap mirrors">
          <a href="data/research_roadmap_interactive.json">Roadmap detail data</a>
          <a href="data/foundation_model_plan.json">Foundation-plan mirror</a>
          <a href="data/research_directions.json">Research-track mirror</a>
          <a href="data/task_walkthroughs.json">Task walkthrough mirror</a>
          <a href="data/summary_metrics.json">Summary-metric mirror</a>
          <a href="https://github.com/ChaoYue0307/ropedia-xperience-10m-task-suite/blob/main/RESEARCH_ROADMAP.md">Roadmap document</a>
        </div>
      </div>
    </section>
  </main>

  <script>
    const roadmapPrefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");

    function currentRoadmapSection() {
      const candidates = Array.from(document.querySelectorAll(".reader-section[id], .hero"));
      let current = "Top";
      for (const section of candidates) {
        const rect = section.getBoundingClientRect();
        if (rect.top <= 112) {
          const heading = section.querySelector("h1, h2");
          current = (heading?.textContent || section.id || "Top").replace(/\.$/, "").trim();
        } else {
          break;
        }
      }
      return current;
    }

    function updateRoadmapProgress() {
      const maxScroll = Math.max(1, document.documentElement.scrollHeight - window.innerHeight);
      const progress = Math.min(1, Math.max(0, window.scrollY / maxScroll));
      const percent = Math.round(progress * 100);
      document.documentElement.style.setProperty("--scroll-progress", progress.toFixed(4));
      document.getElementById("scrollCompanion")?.classList.toggle("is-visible", window.scrollY > 360);
      const percentLabel = document.getElementById("scrollPercent");
      const sectionLabel = document.getElementById("scrollSection");
      if (percentLabel) percentLabel.textContent = `${percent}%`;
      if (sectionLabel) sectionLabel.textContent = currentRoadmapSection();
    }

    window.addEventListener("scroll", updateRoadmapProgress, { passive: true });
    window.addEventListener("resize", updateRoadmapProgress);
    document.getElementById("backToTop")?.addEventListener("click", () => {
      window.scrollTo({ top: 0, behavior: roadmapPrefersReducedMotion.matches ? "auto" : "smooth" });
    });
    updateRoadmapProgress();

    function esc(value) {
      if (value === null || value === undefined || value === "") return "-";
      return String(value).replace(/[&<>"']/g, (char) => ({
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        '"': "&quot;",
        "'": "&#39;"
      }[char]));
    }

    function fmt(value) {
      if (value === null || value === undefined || value === "") return "-";
      if (typeof value === "number") return new Intl.NumberFormat("en-US").format(value);
      return String(value);
    }

    function humanize(value) {
      return fmt(value).replace(/_/g, " ");
    }

    function metricText(metric) {
      if (!metric || !metric.name) return "metric pending";
      const left = metric.minimal !== null && metric.minimal !== undefined ? metric.minimal : "-";
      const right = metric.neural_mlp !== null && metric.neural_mlp !== undefined ? metric.neural_mlp : "-";
      return `${metric.name}: minimal ${left} / neural ${right}`;
    }

    function cssRole(role) {
      if (role === "direct") return "green";
      if (role === "proxy") return "cyan";
      if (role === "diagnostic") return "amber";
      return "blue";
    }

    function roleChips(roles = {}) {
      return Object.entries(roles).map(([code, role]) => (
        `<span class="chip ${cssRole(role)}">${esc(code)}: ${esc(role)}</span>`
      )).join("");
    }

    function evidenceDetails(links = []) {
      if (!links.length) return "";
      return `
        <details class="track-details">
          <summary>Evidence links</summary>
          <div class="artifact-row">
            ${links.map((link) => `<a href="${esc(link.href)}">${esc(link.label)}</a>`).join("")}
          </div>
        </details>
      `;
    }

    function setFacts(data) {
      const scope = data.scope;
      const scale = data.scale_up;
      const facts = [
        ["Sample episodes", scope.sample_episode_count],
        ["Aligned windows", scope.num_windows],
        ["Feature dimensions", scope.feature_dim],
        ["Research tasks", data.tasks.length],
        ["Pilot target episodes", scale.target_episodes]
      ];
      document.getElementById("facts").innerHTML = facts.map(([label, value]) => (
        `<div class="fact"><strong>${esc(fmt(value))}</strong><span>${esc(label)}</span></div>`
      )).join("");
      document.getElementById("routeSample").textContent = `${fmt(scope.sample_episode_count)} episode`;
      document.getElementById("routeData").textContent = `${fmt(scale.target_episodes)} target`;
      document.getElementById("routeOmni").textContent = data.omni_plan.backbone.replace("Qwen/", "");
    }

    function renderPhases(data) {
      document.getElementById("phaseTimeline").innerHTML = data.phases.map((phase) => `
        <article class="phase" data-stage="${esc(phase.stage)}">
          <span>${esc(humanize(phase.status))}</span>
          <strong>${esc(phase.name)}</strong>
          <p>${esc(phase.reader_takeaway || phase.entry_condition || "")}</p>
        </article>
      `).join("");
    }

    function renderTaskCard(task, directionCode = null) {
      const role = directionCode ? task.direction_roles?.[directionCode] : null;
      return `
        <article class="task-mini-card">
          <div>
            <h3>${esc(task.display_name)}</h3>
            <p>${esc(task.why || task.research_name || "Task contract in the unified suite.")}</p>
          </div>
          <p><strong>Input:</strong> ${esc(task.input_short || task.input || "see task walkthrough")}</p>
          <p><strong>Output:</strong> ${esc(task.output_short || task.research_name || "task target")}</p>
          <div class="task-meta">
            ${role ? `<span class="chip ${cssRole(role)}">${esc(role)}</span>` : roleChips(task.direction_roles)}
            <span class="chip">${esc(task.family || "task")}</span>
          </div>
          <div class="task-metric">
            <span>${esc(metricText(task.metric))}</span>
            <span>${esc(task.current_limit || "")}</span>
          </div>
          ${evidenceDetails(task.evidence_links || [])}
        </article>
      `;
    }

    function renderTracks(data) {
      document.getElementById("trackStack").innerHTML = data.directions.map((direction) => {
        const extensions = (direction.extension_tasks || []).map((item) => (
          `<li><strong>${esc(item.name)}:</strong> ${esc(item.metric_name)}; ${esc(item.current_limit)}</li>`
        )).join("");
        const nextSteps = (direction.next_steps || []).map((step) => `<li>${esc(step)}</li>`).join("");
        const tasks = (direction.tasks || []).map((task) => renderTaskCard(task, direction.code)).join("");
        return `
          <article class="track-card" id="track-${esc(direction.code.toLowerCase())}" data-status="${esc(direction.current_status)}">
            <div class="track-card-head">
              <div>
                <div class="panel-label">Track ${esc(direction.code)}</div>
                <h3>${esc(direction.name)}</h3>
                <p>${esc(direction.current_readout || direction.focus)}</p>
                <div class="track-meta">
                  <span class="chip green">${esc(humanize(direction.current_status))}</span>
                  <span class="chip">${esc(fmt(direction.counts?.direct || 0))} direct</span>
                  <span class="chip cyan">${esc(fmt(direction.counts?.proxy || 0))} proxy</span>
                  <span class="chip amber">${esc(fmt(direction.counts?.diagnostic || 0))} diagnostic</span>
                </div>
              </div>
              <div class="track-summary">
                <p><strong>Focus:</strong> ${esc(direction.focus)}</p>
                <p><strong>Useful background:</strong> ${esc(direction.preferred_background || "embodied AI and multimodal learning")}</p>
              </div>
            </div>
            <div class="direction-task-grid">${tasks}</div>
            <details class="track-details" open>
              <summary>Next steps and extension probes</summary>
              <ul>${nextSteps || "<li>No next step is currently mapped.</li>"}</ul>
              <ul>${extensions || "<li>No extension probe is currently mapped to this track.</li>"}</ul>
            </details>
          </article>
        `;
      }).join("");
    }

    function renderScaleCards(data) {
      const scope = data.scope;
      const scale = data.scale_up;
      const omni = data.omni_plan;
      const foundation = data.foundation_model_plan;
      const execution = (foundation.execution_order || []).map((item) => (
        `<li><strong>${esc(item.step)}. ${esc(item.name)}:</strong> ${esc(item.action)}</li>`
      )).join("");
      document.getElementById("scaleCards").innerHTML = `
        <article class="scale-card">
          <div class="panel-label">Current public sample</div>
          <h3>Task lab evidence</h3>
          <p>${esc(data.baseline_summary.current_use)}</p>
          <div class="metric-grid">
            <div class="metric"><strong>${esc(fmt(scope.num_windows))}</strong><span>windows</span></div>
            <div class="metric"><strong>${esc(fmt(scope.feature_dim))}</strong><span>feature dimensions</span></div>
            <div class="metric"><strong>${esc(fmt(data.baseline_summary.task_count))}</strong><span>task contracts</span></div>
            <div class="metric"><strong>${esc(fmt(scope.feature_blocks))}</strong><span>feature blocks</span></div>
          </div>
        </article>
        <article class="scale-card">
          <div class="panel-label">Selected-episode gate</div>
          <h3>Multi-episode data preparation</h3>
          <p>${esc(scale.access_status)}</p>
          <div class="metric-grid">
            <div class="metric"><strong>${esc(fmt(scale.target_episodes))}</strong><span>target episodes</span></div>
            <div class="metric"><strong>${esc(fmt(scale.valid_candidates))}</strong><span>valid candidates</span></div>
            <div class="metric"><strong>${esc(fmt(scale.candidate_scan_top_level_sessions))}</strong><span>sessions scanned</span></div>
            <div class="metric"><strong>${esc(fmt(Math.round((scale.estimated_bytes || 0) / 1e9)))} GB</strong><span>estimated selected data</span></div>
          </div>
        </article>
        <article class="scale-card">
          <div class="panel-label">First model pilot</div>
          <h3>Qwen3-Omni LoRA branch</h3>
          <p>Backbone ${esc(omni.backbone)} with ${esc(omni.adapter)} over ${esc(omni.training_unit)}.</p>
          <p><strong>First pilot:</strong> ${esc(omni.first_pilot)}</p>
          <p><strong>Evaluation:</strong> ${esc(omni.evaluation)}</p>
        </article>
        <article class="scale-card">
          <div class="panel-label">Foundation-model branch order</div>
          <h3>What scales after the pilot</h3>
          <p>${esc(foundation.decision?.long_term_native_pretraining_goal || "Xperience-native pretraining remains a later stage.")}</p>
          <details class="track-details" open>
            <summary>Execution order</summary>
            <ul>${execution}</ul>
          </details>
        </article>
      `;
    }

    function renderTaskIndex(data) {
      document.getElementById("taskIndex").innerHTML = data.tasks.map((task) => renderTaskCard(task)).join("");
    }

    fetch("data/research_roadmap_interactive.json", { cache: "no-cache" })
      .then((response) => {
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return response.json();
      })
      .then((data) => {
        setFacts(data);
        renderPhases(data);
        renderTracks(data);
        renderScaleCards(data);
        renderTaskIndex(data);
        document.getElementById("loading").hidden = true;
        document.getElementById("app").hidden = false;
      })
      .catch((error) => {
        document.getElementById("loading").textContent = `Roadmap data could not be loaded: ${error.message}`;
      });
  </script>
</body>
</html>