<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WorkflowX Status — {TIMESTAMP}</title>
  <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=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <style>
    /* ============================================
       Huashu-Design inspired · 反 AI slop 调色板
       暖白底 (#fafaf7) + rust 橙 accent (#c04a1a)
       避免紫渐变 / 深蓝 / emoji装饰 / 圆角+左border
       ============================================ */
    :root {
      --bg: #fafaf7;
      --surface: #ffffff;
      --surface-alt: #f5f4ee;
      --ink: #1a1a1a;
      --ink-soft: #3a3a3a;
      --muted: #6b6b6b;
      --border: #e5e5e0;
      --border-strong: #c4c4bd;
      --accent: #c04a1a;
      --accent-soft: #f4e9e0;
      --pass: #2d6a4f;
      --in-progress: #b08900;
      --pending: #6c757d;
      --failed: #9d0208;
      --needs-fix: #dc6b1f;
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.6;
      padding: 48px 24px 80px;
      -webkit-font-smoothing: antialiased;
    }

    .container { max-width: 1200px; margin: 0 auto; }

    /* Typography · 衬线 display + sans body + mono data */
    h1, h2, h3, h4 {
      font-family: "Newsreader", Georgia, "Times New Roman", serif;
      font-weight: 500;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    h1 { font-size: 2.75rem; line-height: 1.1; margin-bottom: 12px; font-weight: 500; }
    h2 {
      font-size: 1.5rem;
      margin: 56px 0 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: baseline;
      gap: 16px;
    }
    h2 .count {
      font-family: "JetBrains Mono", Consolas, monospace;
      font-size: 0.85rem;
      font-weight: 400;
      color: var(--muted);
      letter-spacing: 0;
    }
    h3 { font-size: 1.15rem; margin: 0; }
    h4 {
      font-family: "JetBrains Mono", Consolas, monospace;
      font-size: 0.7rem;
      font-weight: 500;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 8px;
    }
    .mono { font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.88em; }
    .muted { color: var(--muted); }

    /* Header */
    .page-header { margin-bottom: 56px; }
    .page-header .eyebrow {
      font-family: "JetBrains Mono", Consolas, monospace;
      font-size: 0.7rem;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-bottom: 8px;
    }
    .page-header .meta {
      color: var(--muted);
      font-size: 0.88rem;
      margin-top: 16px;
      font-family: "JetBrains Mono", Consolas, monospace;
    }
    .page-header .meta span { margin-right: 24px; }
    .page-header .meta span::before { content: "·"; margin-right: 8px; color: var(--border-strong); }
    .page-header .meta span:first-child::before { content: ""; margin: 0; }

    /* Summary Cards · 用细边框，不用左border accent */
    .summary {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-bottom: 32px;
      background: var(--surface);
      border: 1px solid var(--border);
    }
    .stat {
      padding: 24px 28px;
      border-right: 1px solid var(--border);
    }
    .stat:last-child { border-right: none; }
    .stat .label {
      font-family: "JetBrains Mono", Consolas, monospace;
      font-size: 0.68rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-bottom: 12px;
    }
    .stat .value {
      font-family: "Newsreader", Georgia, serif;
      font-size: 2.25rem;
      font-weight: 500;
      line-height: 1;
      color: var(--ink);
    }
    .stat .value.failed { color: var(--failed); }
    .stat .value.accent { color: var(--accent); }

    /* Trend indicator · 完成率微趋势 */
    .trend-indicator {
      font-size: 0.9rem;
      margin-left: 4px;
      vertical-align: sub;
    }
    .trend-indicator.up { color: var(--pass); }
    .trend-indicator.down { color: var(--failed); }
    .trend-indicator.flat { color: var(--muted); }

    /* Workflow Card · 核心容器 */
    .workflow {
      background: var(--surface);
      border: 1px solid var(--border);
      margin-bottom: 20px;
    }
    .workflow-header {
      padding: 20px 28px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }
    .workflow-title { display: flex; align-items: center; gap: 16px; }
    .mode-badge {
      font-family: "JetBrains Mono", Consolas, monospace;
      font-size: 0.7rem;
      font-weight: 500;
      padding: 4px 10px;
      background: var(--ink);
      color: var(--bg);
      letter-spacing: 0.05em;
      white-space: nowrap;
      min-width: 28px;
      text-align: center;
    }
    .mode-badge.mode-a-parallel { background: var(--accent); }

    /* Progress bar · 细线，不用填充卡片 */
    .progress-group { display: flex; align-items: center; gap: 14px; }
    .progress-bar {
      width: 160px;
      height: 3px;
      background: var(--border);
      position: relative;
    }
    .progress-fill {
      height: 100%;
      background: var(--accent);
    }
    .progress-label {
      font-family: "JetBrains Mono", Consolas, monospace;
      font-size: 0.78rem;
      color: var(--muted);
      min-width: 80px;
    }
    .progress-label .num { color: var(--ink); font-weight: 500; }

    /* Children list · 不用圆角+左border，用细线分隔 */
    .children { list-style: none; }
    .child {
      display: grid;
      grid-template-columns: 32px 80px 1fr auto;
      gap: 20px;
      padding: 14px 28px;
      border-bottom: 1px solid var(--border);
      align-items: center;
    }
    .child:last-child { border-bottom: none; }
    .child:hover { background: var(--surface-alt); }

    .child .icon {
      font-family: "JetBrains Mono", Consolas, monospace;
      font-size: 1rem;
      font-weight: 500;
      text-align: center;
    }
    .child .id {
      font-family: "JetBrains Mono", Consolas, monospace;
      color: var(--muted);
      font-size: 0.78rem;
    }
    .child .name { font-weight: 500; color: var(--ink); }
    .child .name .desc {
      display: block;
      color: var(--muted);
      font-weight: 400;
      font-size: 0.85rem;
      margin-top: 2px;
    }
    .child .meta {
      font-family: "JetBrains Mono", Consolas, monospace;
      font-size: 0.78rem;
      color: var(--muted);
      text-align: right;
      white-space: nowrap;
    }

    /* Status colors · 用真实色彩，不用 emoji */
    .status-pass .icon { color: var(--pass); }
    .status-in-progress .icon { color: var(--in-progress); }
    .status-pending .icon { color: var(--pending); }
    .status-failed .icon { color: var(--failed); }
    .status-needs-fix .icon { color: var(--needs-fix); }

    .status-pass .meta strong { color: var(--pass); }
    .status-in-progress .meta strong { color: var(--in-progress); }
    .status-needs-fix .meta strong { color: var(--needs-fix); }
    .status-failed .meta strong { color: var(--failed); }

    /* Hover detail hints · 子任务元数据悬浮详情 */
    .detail-hint {
      font-size: 0.7rem;
      opacity: 0.7;
      margin-left: 6px;
      cursor: help;
    }
    .detail-hint:hover { opacity: 1; }
    .meta-enhanced:hover { background: var(--surface-alt); border-radius: 3px; }

    /* Parallel Mode · Team 状态侧栏 */
    .parallel-body {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 0;
    }
    .parallel-body .children-section { border-right: 1px solid var(--border); }
    .team-section { padding: 20px 28px; background: var(--surface-alt); }
    .team-section h4 { margin-bottom: 16px; }
    .teammate {
      padding: 12px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.88rem;
    }
    .teammate:last-child { margin-bottom: 0; }
    .teammate .role { font-weight: 500; }
    .teammate .role .num { color: var(--muted); font-weight: 400; }
    .teammate-status {
      font-family: "JetBrains Mono", Consolas, monospace;
      font-size: 0.72rem;
      padding: 2px 8px;
      letter-spacing: 0.05em;
    }
    .teammate-status.active { background: var(--in-progress); color: white; }
    .teammate-status.idle { background: var(--border); color: var(--muted); }

    /* Unit Mode · 表格风格，不用紫渐变卡片 */
    .unit-note {
      padding: 12px 28px;
      background: var(--accent-soft);
      border-bottom: 1px solid var(--border);
      color: var(--accent);
      font-size: 0.85rem;
      font-style: italic;
    }
    .unit-note::before {
      content: "⚠";
      font-style: normal;
      margin-right: 8px;
    }
    .unit-table {
      width: 100%;
      border-collapse: collapse;
    }
    .unit-table th, .unit-table td {
      text-align: left;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      font-size: 0.88rem;
    }
    .unit-table th {
      color: var(--muted);
      font-weight: 500;
      font-family: "JetBrains Mono", Consolas, monospace;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      background: var(--surface-alt);
    }
    .unit-table tr:last-child td { border-bottom: none; }
    .unit-table td.hash { font-family: "JetBrains Mono", Consolas, monospace; color: var(--accent); font-size: 0.8rem; }
    .unit-table td.time { font-family: "JetBrains Mono", Consolas, monospace; color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
    .unit-table td.files { color: var(--muted); font-size: 0.82rem; }

    /* Empty state */
    .empty {
      padding: 48px 28px;
      text-align: center;
      color: var(--muted);
      font-style: italic;
    }
    .empty-state { background: var(--surface-alt); }
    .empty-state h2 { margin-bottom: 12px; border-bottom: none; }
    .empty-state .empty { padding: 28px 0; }
    .hint {
      font-size: 0.9rem;
      color: var(--accent);
      margin-top: 12px;
      display: block;
      font-style: normal;
    }

    /* Footer */
    footer {
      margin-top: 80px;
      padding-top: 24px;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 0.78rem;
      font-family: "JetBrains Mono", Consolas, monospace;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }
    footer code {
      background: var(--surface);
      padding: 2px 6px;
      border: 1px solid var(--border);
      color: var(--accent);
    }

    /* Print */
    @media print {
      body { padding: 24px; background: white; }
      .workflow { break-inside: avoid; }
    }

    /* Responsive */
    @media (max-width: 800px) {
      .summary { grid-template-columns: repeat(2, 1fr); }
      .stat:nth-child(2) { border-right: none; }
      .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--border); }
      .parallel-body { grid-template-columns: 1fr; }
      .parallel-body .children-section { border-right: none; border-bottom: 1px solid var(--border); }
      .child { grid-template-columns: 24px 60px 1fr; }
      .child .meta { grid-column: 1 / -1; text-align: left; padding-left: 44px; }
    }
  </style>
</head>
<body>
  <div class="container">

    <header class="page-header">
      <div class="eyebrow">WorkflowX · Status Report</div>
      <h1>工作流状态总览</h1>
      <div class="meta">
        <span>Generated {TIMESTAMP}</span>
        <span>Branch <strong>{BRANCH}</strong></span>
        <span>User {USER}</span>
        <span>Repo {REPO}</span>
      </div>
    </header>

    <!-- ============== Summary Cards ============== -->
    <section class="summary" aria-label="Overview Statistics">
      <div class="stat">
        <div class="label">Active Workflows</div>
        <div class="value">{ACTIVE_COUNT}</div>
      </div>
      <div class="stat">
        <div class="label">Total Children</div>
        <div class="value">{TOTAL_CHILDREN}</div>
      </div>
      <div class="stat">
        <div class="label">Completion</div>
        <div class="value accent">{COMPLETION_RATE}<span style="font-size:1rem">%</span>{TREND_INDICATOR}</div>
      </div>
      <div class="stat">
        <div class="label">Failed / Stalled</div>
        <div class="value failed">{FAILED_COUNT}</div>
      </div>
    </section>

    <!-- ============== Mode A · xwhole ============== -->
    {MODE_A_SECTION}

    <!-- ============== Mode B · xlocal ============== -->
    {MODE_B_SECTION}

    <!-- ============== Mode A-parallel ============== -->
    {MODE_PARALLEL_SECTION}

    <!-- ============== Mode C · xunit ============== -->
    {MODE_C_SECTION}

    <footer>
      <span>Generated by <code>xstatus</code> · WorkflowX</span>
      <span>Snapshot · no auto-refresh</span>
    </footer>
  </div>
</body>
</html>
