prototype/public/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light">
  <meta name="theme-color" content="#f7f6f2">
  <title>Slow Triage · A thoughtful first pass</title>
  <link rel="icon" href="data:,">
  <link rel="stylesheet" href="/style.css">
  <script src="/app.js" defer></script>
</head>
<body>
  <a class="skip-link" href="#workspace">Skip to workspace</a>
  <div class="page-shell">
    <header class="site-header">
      <a class="brand" href="/" aria-label="Slow Triage home"><span class="brand-mark" aria-hidden="true"><span></span><span></span><span></span></span>slow triage<span class="brand-dot">.</span></a>
      <div class="header-right"><span class="private-badge"><span class="status-dot"></span>Private, by design</span><span class="prototype-badge">DEV / WEEK 03</span></div>
    </header>

    <main>
      <section class="hero" aria-labelledby="page-title">
        <div class="hero-copy">
          <div class="eyebrow"><span class="tiny-line"></span>A THOUGHTFUL FIRST PASS</div>
          <h1 id="page-title">Less sorting.<br>More <span>solving.</span></h1>
          <p>A little local AI for your issue queue. Find a starting label, spot possible duplicates, and keep the final say.</p>
          <div class="hero-notes"><span><span class="note-dot"></span>Open-model inference</span><span><span class="note-dot"></span>Human-reviewed changes</span></div>
        </div>
        <div class="hero-visual" aria-hidden="true">
          <div class="visual-caption">SMALL STEPS. CLEARER QUEUES.</div>
          <div class="orbit orbit-one"></div><div class="orbit orbit-two"></div>
          <div class="floating-tag tag-bug"><span class="tag-glyph">◉</span>bug</div>
          <div class="floating-tag tag-question"><span class="tag-glyph">?</span>question</div>
          <div class="floating-tag tag-feature"><span class="tag-glyph">✧</span>feature</div>
          <div class="floating-tag tag-docs"><span class="tag-glyph">≡</span>documentation</div>
          <div class="visual-core"><span class="core-icon">✳</span><span>A useful<br>second look.</span></div>
          <div class="visual-footnote">Suggestions, with room for judgment.</div>
        </div>
      </section>

      <div class="workflow-strip" aria-label="How it works">
        <div><span class="step-number">01</span><span><strong>Bring a small queue</strong><small>Start with synthetic issue JSON</small></span></div>
        <span class="step-arrow" aria-hidden="true">↗</span>
        <div><span class="step-number">02</span><span><strong>Take a closer look</strong><small>Review labels and similar issues</small></span></div>
        <span class="step-arrow" aria-hidden="true">↗</span>
        <div><span class="step-number">03</span><span><strong>Make a reversible change</strong><small>Apply locally, export, or undo</small></span></div>
      </div>

      <section id="workspace" class="workspace" aria-labelledby="workspace-title">
        <div class="section-heading"><div><div class="eyebrow">YOUR WORKSPACE</div><h2 id="workspace-title">A calmer queue starts here.</h2></div><span class="session-label"><span class="status-dot"></span>Local session</span></div>
        <div id="notice" class="notice" role="status" aria-live="polite" hidden></div>
        <div class="workspace-grid">
          <div class="queue-column">
            <div class="metrics" aria-label="Run summary">
              <div class="metric"><span class="metric-label">Issues in this run</span><strong id="metric-total">—</strong><small>A manageable starting point</small></div>
              <div class="metric"><span class="metric-label"><i class="dot-lavender"></i>Ready to review</span><strong id="metric-ready">—</strong><small>Clearer label suggestions</small></div>
              <div class="metric"><span class="metric-label"><i class="dot-amber"></i>Needs a closer look</span><strong id="metric-review">—</strong><small>Ambiguous or low similarity</small></div>
            </div>

            <section class="queue-panel panel" aria-labelledby="queue-title">
              <div class="panel-heading"><div><h3 id="queue-title">The review queue</h3><p id="queue-subtitle">Your judgment belongs in the loop.</p></div><span id="run-pill" class="soft-badge">Awaiting a run</span></div>
              <div class="queue-toolbar"><div class="filter-group" role="group" aria-label="Filter issues"><button class="filter active" type="button" data-filter="all" aria-pressed="true">All issues <span id="count-all">0</span></button><button class="filter" type="button" data-filter="review" aria-pressed="false">Needs review <span id="count-review">0</span></button><button class="filter" type="button" data-filter="duplicates" aria-pressed="false">Duplicates <span id="count-duplicates">0</span></button></div></div>
              <div id="issue-list" class="issue-list" aria-live="polite"></div>
              <div id="empty-state" class="empty-state"><div class="empty-art" aria-hidden="true"><span></span><span></span><span></span><i>✧</i></div><h4>A fresh perspective, one issue at a time.</h4><p>Load the synthetic sample or add your own synthetic JSON. Run a first pass to see suggestions here.</p><button id="empty-sample" type="button" class="text-button">Try the sample queue <span aria-hidden="true">↗</span></button></div>
              <div class="selection-bar"><div><strong id="selected-count">0 issues selected</strong><small>Only your checked choices will be applied.</small></div><button id="apply-button" type="button" class="button button-dark" disabled>Apply selected <span aria-hidden="true">↗</span></button></div>
            </section>

            <div class="version-panel"><div class="version-icon" aria-hidden="true">↶</div><div class="version-copy"><strong>A change you can take back.</strong><p id="version-status">Selections update this local copy. Your GitHub repository is never touched.</p></div><div class="version-actions"><button id="undo-button" type="button" class="button button-light button-small" disabled>Undo last apply</button><button id="export-button" type="button" class="button button-light button-small" disabled>JSON <span aria-hidden="true">↓</span></button><button id="csv-button" type="button" class="button button-light button-small" disabled>CSV <span aria-hidden="true">↓</span></button></div></div>
          </div>

          <aside class="sidebar">
            <section class="input-panel panel" aria-labelledby="input-title">
              <div class="panel-heading"><div><span class="mini-label">01 / INPUT</span><h3 id="input-title">Bring your issues</h3></div><span class="input-icon" aria-hidden="true">{ }</span></div>
              <p class="panel-description">Try the demo queue, paste JSON, or open a local file. Use synthetic data for this private prototype.</p>
              <div class="input-actions"><button id="sample-button" type="button" class="button button-lavender">Load sample <span aria-hidden="true">✧</span></button><button id="file-button" type="button" class="button button-light">Open JSON <span aria-hidden="true">↑</span></button><input id="file-input" type="file" accept=".json,application/json" hidden></div>
              <label class="editor-label" for="json-input"><span>ISSUE EXPORT</span><span id="input-count">JSON</span></label>
              <textarea id="json-input" spellcheck="false" aria-describedby="input-help" placeholder='{
  "issues": [
    {
      "id": 1,
      "title": "An issue to explore",
      "body": "What happened?",
      "labels": []
    }
  ]
}'></textarea>
              <p id="input-help" class="input-help">1–100 issues, as an array or an “issues” object. Use a unique positive id (or number) and a title. Only id, title, body, and label names are retained.</p>
              <button id="run-button" type="button" class="button button-dark run-button"><span class="run-glyph" aria-hidden="true">✳</span><span id="run-button-label">Run local triage</span><span aria-hidden="true">↗</span></button>
              <div class="local-footnote"><svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14" fill="none"><rect x="3" y="7" width="10" height="7" rx="2" stroke="currentColor"/><path d="M5 7V4a3 3 0 0 1 6 0v3" stroke="currentColor"/></svg><span>Local after setup. Initial model setup may need a download.</span></div>
            </section>

            <section class="how-panel" aria-labelledby="evidence-title"><div class="mini-label">A SUGGESTION, WITH CONTEXT</div><h3 id="evidence-title">See the reason. Keep the choice.</h3><p>Each label comes with a nearby reference example. Similarity is a comparison score, not a probability or a guarantee.</p><div class="how-divider"></div><p>Possible duplicates are clues to investigate. Nothing is merged or closed automatically.</p></section>

            <section class="benchmark-panel panel" aria-labelledby="benchmark-title"><div class="benchmark-heading"><h3 id="benchmark-title">The honest benchmark</h3><span class="benchmark-symbol" aria-hidden="true">↗</span></div><p id="benchmark-status">Checking for a saved evaluation…</p><div id="benchmark-data" class="benchmark-data" hidden></div><p class="benchmark-disclaimer">Developer-made synthetic cases, not an independent holdout. These results do not establish performance on real repositories.</p><button id="benchmark-toggle" type="button" class="text-button" hidden>View evaluation details <span aria-hidden="true">↗</span></button><pre id="benchmark-details" class="benchmark-details" hidden></pre></section>
          </aside>
        </div>
        <div id="run-details" class="run-details" hidden><span class="mini-label">LAST RUN</span><p id="model-details"></p><ol id="workflow-details"></ol></div>
      </section>
    </main>
    <footer class="site-footer"><div class="footer-brand">slow triage<span>.</span></div><span>Small queues. Thoughtful decisions.</span><span>Private prototype · DEV Week 3</span></footer>
  </div>
</body>
</html>