docs/tui_vs_pencil.html - codex/rag-codegraph-patterns - ncit/coderagsystem

docs/tui_vs_pencil.html
206 строк5 MB
ncit
TUI: lock fixed heights, add multi-row QPM bar widget
25 май 2026, 19:15
25 май 2026, 19:15d92b838
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RAG TUI — Pencil vs Build (v2: locked layout)</title>
<style>
  :root {
    --bg: #0a0e14;
    --surface: #12161e;
    --surface2: #1a1f2a;
    --border: rgba(94, 230, 208, 0.14);
    --text: #c8d6e5;
    --text-dim: #5a6a7a;
    --accent: #5ee6d0;
    --violet: #b084eb;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; }
  body { padding: 48px clamp(24px, 6vw, 80px) 120px; }
  header.top { margin-bottom: 64px; }
  h1 { font-size: 48px; font-weight: 800; letter-spacing: -1.5px; color: var(--text); }
  h1 .accent { color: var(--accent); }
  .lede { color: var(--text-dim); margin-top: 12px; font-size: 18px; max-width: 60ch; }
  .row { margin-bottom: 96px; }
  .row > header { margin-bottom: 20px; }
  .row h2 {
    font-family: 'Geist Mono', monospace; font-size: 28px; font-weight: 700;
    color: var(--accent); letter-spacing: -0.5px;
  }
  .row .note { color: var(--text-dim); margin-top: 6px; font-size: 14px; line-height: 1.6; }
  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  figure { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  figcaption {
    padding: 12px 16px;
    font-family: 'Geist Mono', monospace; font-size: 12px;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text-dim); background: var(--surface2);
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
  }
  figcaption .tag { padding: 2px 8px; border-radius: 4px; background: rgba(94, 230, 208, 0.12); color: var(--accent); font-size: 10px; }
  figcaption .tag.tui { background: rgba(176, 132, 235, 0.14); color: var(--violet); }
  img { width: 100%; display: block; }
  @media (max-width: 980px) { .grid { grid-template-columns: 1fr; } }
  footer.bottom { color: var(--text-dim); font-size: 13px; margin-top: 80px; line-height: 1.7; }
  footer.bottom code { background: var(--surface); padding: 2px 6px; border-radius: 3px; color: var(--accent); font-family: 'Geist Mono', monospace; }
</style>
</head>
<body>

<header class="top">
  <h1>RAG TUI — <span class="accent">v2: locked layout</span></h1>
  <p class="lede">Side-by-side comparison after layout-lock pass: fixed-height KPI cards, multi-row QPM bar widget, tighter status bar, fixed heights across every screen.</p>
</header>


    <section class="row">
      <header>
        <h2>Home</h2>
        <p class="note">Locked: KPI cards h=5, panels h=1fr, QPM bar widget h=8. Multi-row bars now render via _bars() once /queries/recent returns data.</p>
      </header>
      <div class="grid">
        <figure>
          <figcaption>Pencil mock <span class="tag">design</span></figcaption>
          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACWAAAAZACAYAAAD9qXmxAAAABHNCSVQICAgIfAhkiAAAAAFzUkdCAK7OHOkAACAASURBVHic7N13eFRl3sbxO70nJKR3QhJq6D0oAvYVEF1ArOsuWLCXtXfXuvra1l17A0QUpU … [Строка слишком длинная. Вы можете скачать файл]
        </figure>
        <figure>
          <figcaption>Textual TUI <span class="tag tui">build</span></figcaption>
          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACKYAAAT2CAYAAAASijnWAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAIpqADAAQAAAABAAAE9g … [Строка слишком длинная. Вы можете скачать файл]
        </figure>
      </div>
    </section>
    

    <section class="row">
      <header>
        <h2>Search</h2>
        <p class="note">Locked: input row h=3, plan inspector h=5. Empty panes are honest — no query has run.</p>
      </header>
      <div class="grid">
        <figure>
          <figcaption>Pencil mock <span class="tag">design</span></figcaption>
          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACWAAAAZACAYAAAD9qXmxAAAABHNCSVQICAgIfAhkiAAAAAFzUkdCAK7OHOkAACAASURBVHic7N13lJ5XfS7se/poqupo1LssS3KXe8OAC7YxAYLBFAOBkxAwAQKHUJJASEgO4X … [Строка слишком длинная. Вы можете скачать файл]
        </figure>
        <figure>
          <figcaption>Textual TUI <span class="tag tui">build</span></figcaption>
          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACKYAAAT2CAYAAAASijnWAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAIpqADAAQAAAABAAAE9g … [Строка слишком длинная. Вы можете скачать файл]
        </figure>
      </div>
    </section>
    

    <section class="row">
      <header>
        <h2>Ask</h2>
        <p class="note">Locked: input row h=3, citations rail width=1fr. Empty until /ask completes.</p>
      </header>
      <div class="grid">
        <figure>
          <figcaption>Pencil mock <span class="tag">design</span></figcaption>
          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACWAAAAZACAYAAAD9qXmxAAAABHNCSVQICAgIfAhkiAAAAAFzUkdCAK7OHOkAACAASURBVHic7N13mJbVmT/wewrTmaEODEMXEAvd3mNvgEZTTdtsYnqMKbtpxmyym8Rkf7tr2s … [Строка слишком длинная. Вы можете скачать файл]
        </figure>
        <figure>
          <figcaption>Textual TUI <span class="tag tui">build</span></figcaption>
          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACKYAAAT2CAYAAAASijnWAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAIpqADAAQAAAABAAAE9g … [Строка слишком длинная. Вы можете скачать файл]
        </figure>
      </div>
    </section>
    

    <section class="row">
      <header>
        <h2>Index</h2>
        <p class="note">Locked: input row h=3, status row h=3, progress h=1.</p>
      </header>
      <div class="grid">
        <figure>
          <figcaption>Pencil mock <span class="tag">design</span></figcaption>
          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACWAAAAZACAYAAAD9qXmxAAAABHNCSVQICAgIfAhkiAAAAAFzUkdCAK7OHOkAACAASURBVHic7N13dFVV3sbx5+am3xTSeyEQeuglCEi3oUixoM7o2BuKDGNFbKjj2Mvo+I5dxz … [Строка слишком длинная. Вы можете скачать файл]