Spaces:

trace-commons
/

web

Running

File size: 32,646 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trace Commons · An open dataset for code agent traces</title>
<meta name="description" content="Donate your coding-agent sessions, anonymized on your own machine, to one open public dataset anyone can study, learn from, and build on. The data behind how coding agents work should be a commons, not a moat.">
<link rel="canonical" href="https://trace-commons-web.hf.space/">
<meta name="theme-color" content="#ffffff">
<!-- Open Graph / social preview -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="Trace Commons">
<meta property="og:url" content="https://trace-commons-web.hf.space/">
<meta property="og:title" content="Trace Commons · An open commons for code agent traces">
<meta property="og:description" content="An open commons for understanding how coding agents work. Donate your coding-agent sessions — anonymized locally, reviewed by you — to one open public dataset anyone can study and build on.">
<meta property="og:image" content="https://trace-commons-web.hf.space/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Trace Commons · An open commons for code agent traces">
<meta name="twitter:description" content="An open commons for understanding how coding agents work. Donate your coding-agent sessions to one open public dataset anyone can study and build on.">
<meta name="twitter:image" content="https://trace-commons-web.hf.space/og.png">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1.5' y='1.5' width='21' height='21' rx='4' fill='%23ffffff' stroke='%232563eb' stroke-width='1.5'/%3E%3Cline x1='6' y1='9' x2='18' y2='9' stroke='%232563eb' stroke-width='1.6'/%3E%3Cline x1='6' y1='12.5' x2='14.5' y2='12.5' stroke='%23f5b50c' stroke-width='1.6'/%3E%3Cline x1='6' y1='16' x2='16' y2='16' stroke='%230b1f3a' stroke-width='1.6'/%3E%3C/svg%3E">
<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=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Spline+Sans:wght@400;500;600&family=Spline+Sans+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  :root{
    --ink:#0b1f3a;        /* deep navy — text on color + dark code blocks */
    --surface:#ffffff;    /* white page */
    --panel:#eef4ff;      /* faint blue panel */
    --panel-edge:#cfe0fb; /* light blue border */
    --paper-pure:#0b1f3a; /* primary text (navy) */
    --paper-dim:#52607d;  /* muted slate-blue secondary text */
    --signal:#2563eb;     /* the blue — primary actions & accents */
    --signal-soft:#4b8bf5;/* lighter blue — hovers */
    --gold:#f5b50c;       /* the yellow — accent */
    --gold-soft:rgba(245,181,12,.34); /* yellow highlighter wash */
    --leaf:#2f6fe0;       /* secondary blue — small labels */
    --line:rgba(11,31,58,0.10);
    --line-strong:rgba(11,31,58,0.20);
    --mono:'Spline Sans Mono',ui-monospace,monospace;
    --sans:'Spline Sans',system-ui,sans-serif;
    --display:'Fraunces',Georgia,serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--surface);
    color:var(--paper-pure);
    font-family:var(--sans);
    font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body{background:
    radial-gradient(900px 500px at 82% -8%, rgba(37,99,235,0.07), transparent 60%),
    radial-gradient(700px 500px at 5% 8%, rgba(245,181,12,0.10), transparent 55%),
    var(--surface);
  }
  .wrap{max-width:1080px;margin:0 auto;padding:0 28px}
  a{color:inherit}
  ::selection{background:var(--gold);color:var(--ink)}
  :focus-visible{outline:2px solid var(--signal-soft);outline-offset:3px;border-radius:5px}

  /* ---------- nav ---------- */
  nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:22px 28px;max-width:1080px;margin:0 auto;
    position:relative;z-index:5;
  }
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--mono);
    font-weight:500;letter-spacing:.02em;font-size:15px}
  .brand .mark{
    width:24px;height:24px;border:1.5px solid var(--signal);border-radius:4px;
    display:grid;place-items:center;position:relative;flex:none;
  }
  .brand .mark::before{content:"";position:absolute;inset:5px 4px;
    background:
      linear-gradient(var(--signal),var(--signal)) 0 0/100% 1.5px no-repeat,
      linear-gradient(var(--gold),var(--gold)) 0 4px/70% 1.5px no-repeat,
      linear-gradient(var(--paper-dim),var(--paper-dim)) 0 8px/85% 1.5px no-repeat;
  }
  .nav-right{display:flex;gap:18px;align-items:center}
  .nav-dataset{font-family:var(--mono);font-size:14px;color:var(--paper-dim);text-decoration:none;transition:color .2s}
  .nav-dataset:hover{color:var(--paper-pure)}
  .nav-cta{padding:10px 18px;font-size:14px}
  @media(max-width:520px){.nav-dataset{display:none}}

  /* ---------- hero ---------- */
  header{padding:60px 0 30px;position:relative}
  .eyebrow{
    font-family:var(--mono);font-size:13px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--leaf);margin-bottom:26px;
    display:flex;align-items:center;gap:12px;
  }
  .eyebrow::before{content:"";width:34px;height:1px;background:var(--leaf);opacity:.6}
  h1{
    font-family:var(--display);font-weight:400;
    font-size:clamp(44px,7.2vw,82px);line-height:1.02;
    letter-spacing:-0.02em;margin-bottom:26px;
    font-optical-sizing:auto;text-wrap:balance;
  }
  h1 em{font-style:italic;color:var(--signal);
    background:linear-gradient(180deg,transparent 62%,var(--gold-soft) 62%);
    padding:0 .04em;border-radius:2px}
  .lede{
    font-size:clamp(18px,2.1vw,21px);line-height:1.55;
    color:var(--paper-dim);max-width:720px;margin-bottom:38px;
  }
  .lede strong{color:var(--paper-pure);font-weight:500}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .btn{
    font-family:var(--mono);font-size:15px;font-weight:500;
    padding:14px 22px;border-radius:8px;text-decoration:none;
    display:inline-flex;align-items:center;gap:10px;cursor:pointer;
    border:1px solid transparent;transition:transform .15s, background .2s, border-color .2s;
  }
  .btn-primary{background:var(--signal);color:#fff}
  .btn-primary:hover{transform:translateY(-2px);background:var(--signal-soft)}
  .btn-ghost{border-color:var(--line-strong);color:var(--paper-pure)}
  .btn-ghost:hover{border-color:var(--paper-dim);transform:translateY(-2px)}

  /* ---------- hero install command ---------- */
  .hero-install{max-width:560px}
  .hero-code{
    padding:16px 16px 16px 18px;font-size:14px;
    border-color:var(--panel-edge);
    box-shadow:0 16px 40px -24px rgba(0,0,0,.7);
  }
  .hero-code code{overflow-x:auto;scrollbar-width:none}
  .hero-code code::-webkit-scrollbar{display:none}
  .hero-code .copy{font-size:13px;padding:8px 15px}
  .oss-pledge{
    display:flex;gap:11px;align-items:flex-start;margin-top:22px;max-width:520px;
    border:1px solid rgba(245,181,12,.45);border-radius:10px;padding:13px 15px;
    background:rgba(245,181,12,.10);font-size:14px;line-height:1.5;color:var(--paper-pure);
  }
  .oss-pledge .oss-ic{color:#c8920a;flex:none;font-size:12px;margin-top:3px}

  .hero-how{margin-top:16px;max-width:560px;font-size:15px;line-height:1.6;color:var(--paper-dim)}
  .hero-how code{font-family:var(--mono);font-size:13px;color:var(--signal);
    background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.18);border-radius:5px;padding:1px 6px}

  /* ---------- section scaffold ---------- */
  section{padding:90px 0;position:relative}
  .sec-label{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--leaf);margin-bottom:18px;display:flex;align-items:center;gap:12px}
  .sec-label .ix{color:var(--panel-edge)}
  h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,46px);
    line-height:1.08;letter-spacing:-.018em;margin-bottom:18px;max-width:20ch;text-wrap:balance}
  h2 em{font-style:italic;color:var(--signal);
    background:linear-gradient(180deg,transparent 62%,var(--gold-soft) 62%);
    padding:0 .04em;border-radius:2px}
  .sec-intro{color:var(--paper-dim);max-width:560px;font-size:18px;margin-bottom:46px}

  /* ---------- why / argument ---------- */
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  @media(max-width:860px){.why-grid{grid-template-columns:1fr}}
  .card{
    border:1px solid var(--line);border-radius:13px;padding:28px 26px;
    background:linear-gradient(180deg,rgba(37,99,235,.05),transparent);
    transition:border-color .25s,transform .25s;
  }
  .card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
  .card .ic{width:38px;height:38px;border-radius:9px;border:1px solid var(--panel-edge);
    display:grid;place-items:center;margin-bottom:20px;color:var(--signal);font-family:var(--mono)}
  .card h3{font-family:var(--display);font-size:22px;font-weight:500;margin-bottom:10px;letter-spacing:-.01em}
  .card p{font-size:15.5px;color:var(--paper-dim);line-height:1.55}
  .inline-link{color:var(--signal);text-decoration:none;border-bottom:1px solid rgba(37,99,235,.4);transition:border-color .2s}
  .inline-link:hover{border-color:var(--signal)}

  /* ---------- install ---------- */
  .install-shell{
    border:1px solid var(--panel-edge);border-radius:16px;overflow:hidden;
    background:linear-gradient(180deg,var(--panel),var(--surface));
  }
  .panel-body{padding:30px 30px 34px}
  .step{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:none}
  .step .num{font-family:var(--mono);color:var(--signal);font-size:14px;flex:none;width:26px;
    border:1px solid var(--panel-edge);height:26px;border-radius:6px;display:grid;place-items:center}
  .step .body{flex:1}
  .step .body h4{font-size:16px;font-weight:600;margin-bottom:9px}
  .step .body p{font-size:14.5px;color:var(--paper-dim);margin-bottom:12px}
  .code{
    display:flex;align-items:center;gap:14px;background:var(--ink);
    border:1px solid var(--ink);border-radius:9px;padding:13px 15px;
    font-family:var(--mono);font-size:13.5px;color:#e9f1ff;
    overflow-x:auto;white-space:nowrap;
    box-shadow:0 14px 34px -22px rgba(11,31,58,.55);
  }
  .code .pmt{color:var(--gold);flex:none}
  .code code{flex:1}
  .copy{
    flex:none;font-family:var(--mono);font-size:12px;color:var(--paper-dim);
    border:1px solid var(--line-strong);background:none;border-radius:6px;
    padding:6px 11px;cursor:pointer;transition:all .2s
  }
  .code .copy{color:#9fb2d6;border-color:rgba(255,255,255,.22)}
  .copy:hover{color:var(--ink);background:var(--gold);border-color:var(--gold)}
  .copy.done{color:#fff;background:var(--signal);border-color:var(--signal)}
  .install-note{font-size:13.5px;color:var(--paper-dim);margin-top:22px;font-family:var(--mono);
    display:flex;gap:10px;align-items:flex-start}
  .install-note .b{color:var(--leaf);flex:none}

  /* ---------- agent target buttons ---------- */
  .agent-targets{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
  .at-label{font-family:var(--mono);font-size:12px;color:var(--paper-dim);letter-spacing:.04em;margin-right:4px}
  .agent-btn{
    font-family:var(--mono);font-size:12.5px;color:var(--paper-dim);
    border:1px solid var(--line-strong);background:none;border-radius:7px;
    padding:7px 13px;cursor:pointer;transition:all .18s;
  }
  .agent-btn:hover{color:var(--paper-pure);border-color:var(--paper-dim)}
  .agent-btn.active{background:var(--gold);color:var(--ink);border-color:var(--gold)}

  /* ---------- explorer ---------- */
  .explore-actions{margin-top:28px;text-align:center}

  /* ---------- growth chart ---------- */
  .growth{border:1px solid var(--panel-edge);border-radius:16px;overflow:hidden;
    background:linear-gradient(180deg,var(--panel),var(--surface));margin-bottom:28px;padding:24px 26px 20px}
  .growth-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
  .growth-label{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim)}
  .growth-total{font-family:var(--display);font-size:38px;font-weight:500;letter-spacing:-.02em;color:var(--signal);line-height:1.1;margin-top:6px}
  .growth-unit{font-family:var(--mono);font-size:14px;color:var(--paper-dim);margin-left:8px;letter-spacing:0}
  .growth-range{display:flex;gap:6px}
  .rbtn{font-family:var(--mono);font-size:12.5px;color:var(--paper-dim);border:1px solid var(--line-strong);
    background:none;border-radius:7px;padding:6px 13px;cursor:pointer;transition:all .18s}
  .rbtn:hover{color:var(--paper-pure);border-color:var(--paper-dim)}
  .rbtn.active{background:var(--gold);color:var(--ink);border-color:var(--gold)}
  .growth-chart{position:relative;width:100%;height:300px}
  .growth-chart svg{width:100%;height:100%;display:block;overflow:visible}
  .growth-tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-100%);
    background:var(--ink);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:8px 11px;
    font-family:var(--mono);font-size:12px;white-space:nowrap;transition:opacity .15s;color:#e9f1ff;z-index:3}
  .growth-tip .tipn{color:var(--gold);font-weight:500}
  .growth-tip .tipd{color:#9fb2d6;font-size:11px;margin-top:2px}
  .growth-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;
    color:var(--paper-dim);margin-top:10px;letter-spacing:.03em}
  .final{text-align:center;padding:100px 0 90px}
  .final h2{margin:0 auto 22px;max-width:18ch}
  .final .cta-row{justify-content:center}

  footer{border-top:1px solid var(--line);padding:40px 0;color:var(--paper-dim);font-family:var(--mono);font-size:13px}
  .foot-grid{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
  .foot-links{display:flex;gap:22px}
  .foot-links a{text-decoration:none;transition:color .2s}
  .foot-links a:hover{color:var(--paper-pure)}

  .growth-empty{
    position:absolute;inset:0;display:none;align-items:center;justify-content:center;
    text-align:center;padding:0 24px;font-family:var(--mono);font-size:14px;
    color:var(--paper-dim);letter-spacing:.02em;pointer-events:none;
  }
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
</style>
</head>
<body>

<nav>
  <div class="brand"><span class="mark"></span>trace&nbsp;commons</div>
  <div class="nav-right">
    <a href="#" class="nav-dataset js-dataset">Dataset ↗</a>
    <a href="#install" class="btn btn-primary nav-cta">Donate a trace</a>
  </div>
</nav>

<header>
  <div class="wrap">
    <div class="hero-lead">
      <div class="eyebrow">An open commons for code agent traces</div>
      <h1>The data behind coding agents should belong to <em>everyone</em>.</h1>
      <p class="lede">Every coding-agent session is a record of how these tools really work — and today that data goes to a few companies. Donate yours instead, anonymized on your machine, to an open dataset <strong>anyone can study and build on</strong>.</p>
      <div class="hero-install">
        <div class="code hero-code">
          <span class="pmt">$</span><code id="heroCmd">npx skills add trace-commons-ai/donate-trace</code>
          <button class="copy" data-copy="heroCmd">copy</button>
        </div>
        <p class="hero-how">Then run <code>/donate-trace</code> after an open-source session. It anonymizes locally, shows what it removed, and sends only when you confirm.</p>
        <div class="oss-pledge">
          <span class="oss-ic">◆</span>
          <span>Public, openly-licensed repos only — never private, proprietary, or client code.</span>
        </div>
      </div>
    </div>
  </div>
</header>

<!-- WHY -->
<section id="why">
  <div class="wrap">
    <div class="sec-label"><span class="ix">01</span> Why donate</div>
    <h2>An open commons breaks the <em>cycle</em>.</h2>
    <p class="sec-intro">Coding agents improve on data their makers can see. A shared, openly-licensed dataset opens that up to everyone — researchers, builders, and the open-source community.</p>
    <div class="why-grid">
      <div class="card">
        <div class="ic">⌘</div>
        <h3>Level the field</h3>
        <p>A diff shows where you landed; a trace shows how you got there. That reasoning is what's locked inside a few companies today.</p>
      </div>
      <div class="card">
        <div class="ic">◇</div>
        <h3>A commons, not a moat</h3>
        <p>One openly-licensed <a href="#" class="inline-link js-dataset">dataset on Hugging Face</a> anyone can download, study, and build on. It belongs to the community that fills it.</p>
      </div>
      <div class="card">
        <div class="ic">⛉</div>
        <h3>Cleaned before it leaves</h3>
        <p>Paths, usernames, and secrets are stripped on your own machine — and you review what's left before anything sends.</p>
      </div>
    </div>
  </div>
</section>

<!-- INSTALL -->
<section id="install">
  <div class="wrap">
    <div class="sec-label"><span class="ix">02</span> Install</div>
    <h2>One command. <em>Every</em> agent.</h2>
    <p class="sec-intro">One installer for every agent. No Hugging Face account needed.</p>

    <div class="install-shell">
      <div class="panel-body">
        <div class="step">
          <div class="num">1</div>
          <div class="body">
            <h4>Add the skill</h4>
            <p>Auto-detects and installs into each agent you use — Claude Code, Codex, pi, opencode, and 50+ more.</p>
            <div class="code">
              <span class="pmt">$</span><code id="installCmd">npx skills add trace-commons-ai/donate-trace</code>
              <button class="copy" data-copy="installCmd">copy</button>
            </div>
            <div class="agent-targets">
              <span class="at-label">target one agent:</span>
              <button class="agent-btn active" data-agent="all" data-cmd="npx skills add trace-commons-ai/donate-trace">all detected</button>
              <button class="agent-btn" data-agent="claude-code" data-cmd="npx skills add trace-commons-ai/donate-trace -a claude-code">Claude Code</button>
              <button class="agent-btn" data-agent="codex" data-cmd="npx skills add trace-commons-ai/donate-trace -a codex">Codex</button>
              <button class="agent-btn" data-agent="pi" data-cmd="npx skills add trace-commons-ai/donate-trace -a pi">pi</button>
              <button class="agent-btn" data-agent="opencode" data-cmd="npx skills add trace-commons-ai/donate-trace -a opencode">opencode</button>
            </div>
          </div>
        </div>
        <div class="step">
          <div class="num">2</div>
          <div class="body">
            <h4>Run it after a session</h4>
            <p>After a session on open-source work, run <code style="color:var(--paper-pure)">/donate-trace</code> (pi: <code style="color:var(--paper-pure)">/skill:donate-trace</code>). It confirms the repo is public first.</p>
            <div class="code">
              <span class="pmt">›</span><code id="runCmd">/donate-trace</code>
              <button class="copy" data-copy="runCmd">copy</button>
            </div>
          </div>
        </div>
        <div class="step">
          <div class="num">3</div>
          <div class="body">
            <h4>Review, then send</h4>
            <p>See exactly what was removed, then confirm. It opens as a pull request a maintainer reviews before anything goes public — anonymous, or attributed if you're logged in.</p>
          </div>
        </div>
        <div class="install-note">
          <span class="b">↳</span>
          <span>Prefer hands-off? Paste a setup prompt and your agent installs the skill, then walks you through your first donation.
            <button class="copy" data-copy="setupPrompt" style="margin-left:6px">copy setup prompt</button>
            <span id="setupPrompt" style="display:none">Install the Trace Commons donation skill by running: npx skills add trace-commons-ai/donate-trace. Then, only if my current project is an open-source public repository, help me anonymize and donate my most recent session.</span>
          </span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- EXPLORE -->
<section id="explore">
  <div class="wrap">
    <div class="sec-label"><span class="ix">03</span> Explore the commons</div>
    <h2>Browse the <em>commons</em>.</h2>
    <p class="sec-intro">Every donation is one public row. Open the full dataset on Hugging Face to read, search, and download what's been contributed.</p>

    <!-- Growth chart hidden for now while counts are early; restore by removing the display:none below. -->
    <div class="growth" style="display:none">
      <div class="growth-head">
        <div>
          <div class="growth-label">Cumulative traces donated</div>
          <div class="growth-total"><span id="growthTotal">0</span><span class="growth-unit">total</span></div>
        </div>
        <div class="growth-range" id="growthRange">
          <button class="rbtn" data-r="30">30d</button>
          <button class="rbtn active" data-r="90">90d</button>
          <button class="rbtn" data-r="all">all</button>
        </div>
      </div>
      <div class="growth-chart">
        <svg id="growthSvg" viewBox="0 0 880 300" preserveAspectRatio="none" aria-label="Cumulative contributions over time"></svg>
        <div class="growth-empty" id="growthEmpty"></div>
        <div class="growth-tip" id="growthTip"></div>
      </div>
      <div class="growth-axis" id="growthAxis"></div>
    </div>

    <div class="explore-actions" style="display:flex;justify-content:center;margin-top:8px">
      <a href="#" class="btn btn-primary js-dataset" style="font-size:16px;padding:16px 28px">Open the dataset on Hugging Face ↗</a>
    </div>
  </div>
</section>

<!-- FINAL -->
<section class="final">
  <div class="wrap">
    <h2>The commons only exists if <em>we</em> build it.</h2>
    <p class="sec-intro" style="margin:0 auto 38px">Open infrastructure is built, not given — one session at a time. Donate a trace and keep the data behind coding agents open.</p>
    <div class="cta-row">
      <a href="#install" class="btn btn-primary">Install the skill →</a>
      <a href="#" class="btn btn-ghost js-dataset">Browse the dataset ↗</a>
    </div>
  </div>
</section>

<footer>
  <div class="wrap foot-grid">
    <div class="brand"><span class="mark"></span>trace&nbsp;commons</div>
    <div class="foot-links">
      <a href="#why">Why donate</a>
      <a href="#install">Install</a>
      <a href="#explore">Explore</a>
      <a href="#" class="js-dataset">Dataset ↗</a>
      <a href="https://github.com/trace-commons-ai/donate-trace" class="js-github" target="_blank" rel="noopener">GitHub ↗</a>
    </div>
    <div>Open data · public commons</div>
  </div>
  <div class="wrap" style="max-width:1080px;margin:22px auto 0;padding:0 28px;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--paper-dim);border-top:1px solid var(--line);padding-top:20px">
    <p style="margin:0 0 10px"><strong>Independent project.</strong> Trace Commons is not affiliated with, endorsed by, or sponsored by Anthropic, OpenAI, Cursor, or any agent or model vendor. Product names are trademarks of their respective owners, used only to identify which tool produced a session.</p>
    <p style="margin:0 0 10px">Traces come only from public, open-source repositories, are anonymized on the contributor's machine, and are reviewed before publication — but anonymization is best-effort and this data is <strong>not guaranteed free of personal data or secrets</strong>, nor certified anonymous. Individual traces may carry their own code licenses; reusers are responsible for checking them. Contributors are responsible for only sharing what they have the right to publish and for complying with their agent provider's terms.</p>
    <p style="margin:0"><a href="https://huggingface.co/datasets/trace-commons/agent-traces/discussions" target="_blank" rel="noopener" style="color:var(--signal)">Found something that shouldn't be here, or personal data you want removed (incl. GDPR erasure)? Request removal on the dataset's Community tab →</a></p>
  </div>
</footer>

<script>
  /* ---- single source for the dataset URL: change DATASET_URL to point everywhere ---- */
  const DATASET_URL = "https://huggingface.co/datasets/trace-commons/agent-traces";
  const DATASET_API = "https://huggingface.co/api/datasets/trace-commons/agent-traces";
  document.querySelectorAll('.js-dataset').forEach(a=>{
    a.setAttribute('href', DATASET_URL);
    if(DATASET_URL!=="#"){a.setAttribute('target','_blank');a.setAttribute('rel','noopener')}
  });

  /* ---- agent target buttons: swap displayed command ---- */
  const targets=document.querySelector('.agent-targets');
  if(targets){
    targets.addEventListener('click',e=>{
      const b=e.target.closest('.agent-btn'); if(!b)return;
      targets.querySelectorAll('.agent-btn').forEach(x=>x.classList.remove('active'));
      b.classList.add('active');
      document.getElementById('installCmd').textContent=b.dataset.cmd;
      document.getElementById('runCmd').textContent = b.dataset.agent==='pi' ? '/skill:donate-trace' : '/donate-trace';
    });
  }

  /* ---- copy buttons ---- */
  document.querySelectorAll('.copy').forEach(b=>{
    b.addEventListener('click',()=>{
      const txt=document.getElementById(b.dataset.copy).textContent;
      navigator.clipboard.writeText(txt).then(()=>{
        const o=b.textContent;b.textContent='copied ✓';b.classList.add('done');
        setTimeout(()=>{b.textContent=o;b.classList.remove('done')},1400);
      });
    });
  });

  /* ---- live data from the HF dataset (real tree + commit history) ---- */
  let TRACES = [];   // [{harness, file}] — actual donated session files
  let SERIES = [];   // [{t:Date, n}] cumulative donations from commit history
  let currentRange = '90';

  async function loadDataset(){
    try{
      const [treeR, commitsR] = await Promise.all([
        fetch(DATASET_API + "/tree/main?recursive=true"),
        fetch(DATASET_API + "/commits/main")
      ]);
      if(treeR.ok){
        const tree = await treeR.json();
        TRACES = tree
          .filter(f=>f.type==='file' && f.path.indexOf('sessions/')===0 && !f.path.endsWith('.gitkeep'))
          .map(f=>{const p=f.path.split('/');return {harness:p[1], file:p.slice(2).join('/')};});
      }
      if(commitsR.ok){
        const commits = await commitsR.json();
        // count commits that add a trace: anonymous path -> "Donate ...",
        // attributed path (hf upload) -> "Upload sessions/...". Exclude infra
        // commits ("Create ... folder", "Add dataset card", README, etc.).
        const dates = commits
          .filter(c=>/^(donate|upload)\b/i.test(c.title||''))
          .map(c=>new Date(c.date))
          .sort((a,b)=>a-b);
        let n=0; SERIES = dates.map(d=>({t:d, n:++n}));
      }
    }catch(e){/* offline / API down — keep the honest empty state */}
    draw(currentRange);
  }

  /* ---- growth chart: real cumulative donations from commit history ---- */
  const svg=document.getElementById('growthSvg');
  const tip=document.getElementById('growthTip');
  const axisEl=document.getElementById('growthAxis');
  const emptyEl=document.getElementById('growthEmpty');
  const NS='http://www.w3.org/2000/svg';
  const VW=880,VH=300,PAD=8;
  let series=[];
  function fmt(n){return n.toLocaleString()}
  function fmtDate(d){return d.toLocaleDateString('en-US',{month:'short',day:'numeric'})}
  function seriesForRange(range){
    if(!SERIES.length) return [];
    if(range==='all') return SERIES.slice();
    const days=+range; const cutoff=new Date(); cutoff.setDate(cutoff.getDate()-days);
    const within=SERIES.filter(p=>p.t>=cutoff);
    return within.length>=2 ? within : SERIES.slice();
  }
  function drawEmpty(){
    svg.innerHTML='';
    axisEl.innerHTML='';
    emptyEl.textContent = SERIES.length===1 ? 'First donation in — the commons has begun.' : 'No donations yet — be the first to contribute.';
    emptyEl.style.display='flex';
  }
  function draw(days){
    document.getElementById('growthTotal').textContent=fmt(TRACES.length);
    series = seriesForRange(days);
    if(series.length<2){ drawEmpty(); return; }
    emptyEl.style.display='none';
    svg.innerHTML='';
    const xs=series.length-1;
    const maxN=series[series.length-1].n, minN=series[0].n;
    const X=i=>PAD + (i/xs)*(VW-2*PAD);
    const Y=n=>VH-PAD - ((n-minN)/((maxN-minN)||1))*(VH-2*PAD-10);
    // gradient + defs
    const defs=document.createElementNS(NS,'defs');
    defs.innerHTML=`<linearGradient id="gfill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="rgba(245,181,12,0.34)"/>
      <stop offset="100%" stop-color="rgba(245,181,12,0)"/></linearGradient>`;
    svg.appendChild(defs);
    // gridlines
    for(let g=0;g<=3;g++){
      const y=PAD+ (g/3)*(VH-2*PAD-10);
      const ln=document.createElementNS(NS,'line');
      ln.setAttribute('x1',PAD);ln.setAttribute('x2',VW-PAD);
      ln.setAttribute('y1',y);ln.setAttribute('y2',y);
      ln.setAttribute('stroke','rgba(11,31,58,0.08)');ln.setAttribute('stroke-width','1');
      svg.appendChild(ln);
    }
    // build path
    let dLine='M '+X(0)+' '+Y(series[0].n);
    series.forEach((p,i)=>{if(i>0)dLine+=' L '+X(i)+' '+Y(p.n)});
    const dArea=dLine+` L ${X(xs)} ${VH-PAD} L ${X(0)} ${VH-PAD} Z`;
    const area=document.createElementNS(NS,'path');
    area.setAttribute('d',dArea);area.setAttribute('fill','url(#gfill)');
    svg.appendChild(area);
    const line=document.createElementNS(NS,'path');
    line.setAttribute('d',dLine);line.setAttribute('fill','none');
    line.setAttribute('stroke','var(--signal)');line.setAttribute('stroke-width','2.5');
    line.setAttribute('stroke-linejoin','round');line.setAttribute('vector-effect','non-scaling-stroke');
    svg.appendChild(line);
    // draw-on animation
    const len=line.getTotalLength();
    line.style.strokeDasharray=len;line.style.strokeDashoffset=len;
    line.getBoundingClientRect();
    line.style.transition='stroke-dashoffset 1.1s ease-out';line.style.strokeDashoffset=0;
    area.style.opacity=0;area.style.transition='opacity 1s ease-out .3s';requestAnimationFrame(()=>area.style.opacity=1);
    // endpoint dot — sits exactly on the final line point
    const dot=document.createElementNS(NS,'circle');
    dot.setAttribute('cx',X(xs)-1.5);dot.setAttribute('cy',Y(maxN));dot.setAttribute('r','4.5');
    dot.setAttribute('fill','var(--gold)');dot.setAttribute('stroke','var(--surface)');dot.setAttribute('stroke-width','2');
    dot.setAttribute('vector-effect','non-scaling-stroke');
    svg.appendChild(dot);
    // axis labels
    axisEl.innerHTML=`<span>${fmtDate(series[0].t)}</span><span>${fmtDate(series[(series.length/2)|0].t)}</span><span>${fmtDate(series[series.length-1].t)}</span>`;
    // headline total stays the true trace count (set at top of draw)
    // hover
    svg._X=X;svg._Y=Y;svg._xs=xs;
  }
  function onMove(ev){
    if(!series.length)return;
    const rect=svg.getBoundingClientRect();
    const rel=(ev.clientX-rect.left)/rect.width;
    const i=Math.round(rel*svg._xs);
    if(i<0||i>svg._xs){tip.style.opacity=0;return}
    const p=series[i];
    const px=(svg._X(i)/VW)*rect.width;
    const py=(svg._Y(p.n)/VH)*rect.height;
    tip.style.left=px+'px';tip.style.top=(py-12)+'px';tip.style.opacity=1;
    tip.innerHTML=`<span class="tipn">${fmt(p.n)} traces</span><div class="tipd">${fmtDate(p.t)}</div>`;
  }
  svg.addEventListener('mousemove',onMove);
  svg.addEventListener('mouseleave',()=>tip.style.opacity=0);
  document.getElementById('growthRange').addEventListener('click',e=>{
    const b=e.target.closest('.rbtn');if(!b)return;
    document.querySelectorAll('#growthRange .rbtn').forEach(x=>x.classList.remove('active'));
    b.classList.add('active');currentRange=b.dataset.r;draw(currentRange);
  });
  // initial render (empty/honest state) then hydrate from the live dataset
  draw(currentRange);
  loadDataset();
</script>
</body>
</html>