dotfiles

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>pivi tool presentation — accepted direction (C2 canonical)</title>
<style>
  body{background:#111;margin:0;padding:24px;color-scheme:dark;font-family:system-ui,sans-serif}
  .cap{max-width:680px;margin:0 auto 12px;color:#bbb;font:13px/1.5 system-ui}
  .cap b{color:#c9b6eb}
  .t{position:relative;max-width:680px;margin:0 auto;font:13px/1.62 'JetBrains Mono',ui-monospace,monospace;background:#1b1b1b;color:#ededed;padding:10px 0;border-radius:6px;overflow:hidden;min-height:360px}
  .r{display:grid;grid-template-columns:3ch 1fr;white-space:pre;padding:0 10px}
  .sign{text-align:center}
  .head{cursor:pointer}.head:hover{background:#202020}
  .user{color:#b59ae4}.pi{color:#3ec5e3}.dim{color:#8b8b8b}.faint{color:#5d5d5d}
  .add{color:#7ba1aa}.del{color:#ec6376}.ok{color:#7ba1aa}.bad{color:#ec6376}.warn{color:#f0ee69}
  .se{color:#b59ae4}.sb{color:#3ec5e3}.sg{color:#f0ee69}.sr{color:#8b8b8b}
  .cur{background:#242424}.rail{color:#39343f}.gut{color:#5d5d5d}
  .kw{color:#b59ae4}.fn{color:#3ec5e3}.str{color:#7ba1aa}
  .hide{display:none}.cmp{color:#c9b6eb;text-decoration:underline;cursor:pointer}.file{color:#9aabae}
  .flo{position:absolute;right:12px;top:96px;width:42ch;background:#1f1f1f;border:1px solid #4f3c69;border-radius:4px;font-size:12px}
  .flo .h{color:#c9b6eb;background:#2d2440;padding:3px 9px;display:flex;justify-content:space-between}
  .flo .b{padding:5px 9px;white-space:pre}
</style>
</head>
<body>
<div class="cap">
  <b>pivi tool presentation — accepted visual direction.</b>
  Neovim transcript, nugu dark, monospace cells. One headline line per tool, collapsed by default;
  click a headline to expand detail inline; click the edit's <i>compare</i> to toggle the floating comparison.
  Terminal fidelity: border-only floats, no shadow.
</div>
<section class="t">
  <div class="r user"><span class="sign">█</span><span class="user"> you</span></div>
  <div class="r user"><span class="sign">█</span><span class="user">refactor the submission path and run tests</span></div>
  <div class="r"><span class="sign"></span><span class="pi"> pi</span></div>
  <div class="r"><span class="sign"></span><span>Reworking delivery resolution, then verifying.</span></div>

  <div class="r head cur" data-k="edit"><span class="sign se"></span><span><span class="dim">▾ edit</span> session.lua  <span class="add">+12</span> <span class="del">−3</span>  <span class="cmp" data-cmp="1">↵ compare</span></span></div>
  <div data-body="edit">
    <div class="r"><span class="sign"><span class="rail">│</span></span><span><span class="gut">38 </span><span class="del">- local busy = status.is_busy( self.status )</span></span></div>
    <div class="r"><span class="sign"><span class="rail">│</span></span><span><span class="gut">38 </span><span class="add">+ local busy, delivery = resolve( self, options )</span></span></div>
    <div class="r"><span class="sign"><span class="rail">│</span></span><span><span class="gut">39 </span><span class="add">+ if busy and not delivery then return queue(…)</span></span></div>
  </div>

  <div class="r head" data-k="bash"><span class="sign sb"></span><span><span class="dim">▸ bash</span> just test  <span class="ok">✓ 669 passed</span> <span class="faint">4.7s</span></span></div>
  <div data-body="bash" class="hide">
    <div class="r"><span class="sign"><span class="rail">│</span></span><span class="dim">Testing: tests/bugabinga/pivi/…</span></div>
    <div class="r"><span class="sign"><span class="rail">│</span></span><span><span class="ok">Success: 669</span>  Failed: 0  Errors: 0</span></div>
    <div class="r"><span class="sign"><span class="rail">│</span></span><span class="faint">… 2140 lines truncated · 󰈙 full output</span></div>
  </div>

  <div class="r head" data-k="grep"><span class="sign sg"></span><span><span class="dim">▸ grep</span> is_busy  <span class="warn">7 matches · 3 files</span> <span class="faint">→ quickfix</span></span></div>
  <div data-body="grep" class="hide">
    <div class="r"><span class="sign"><span class="rail">│</span></span><span class="file">session.lua</span></div>
    <div class="r"><span class="sign"><span class="rail">│</span></span><span><span class="gut">409 </span>local busy = <span class="warn">is_busy</span>( self.status )</span></div>
    <div class="r"><span class="sign"><span class="rail">│</span></span><span class="file">status.lua</span></div>
    <div class="r"><span class="sign"><span class="rail">│</span></span><span><span class="gut">140 </span>local function <span class="warn">is_busy</span>( state )</span></div>
  </div>

  <div class="r head" data-k="read"><span class="sign sr"></span><span><span class="dim">▸ read</span> command.lua  <span class="faint">120 lines</span></span></div>
  <div data-body="read" class="hide">
    <div class="r"><span class="sign"><span class="rail">│</span></span><span><span class="gut">1 </span><span class="kw">local</span> session = <span class="fn">require</span> <span class="str">'bugabinga.pivi.session'</span></span></div>
    <div class="r"><span class="sign"><span class="rail">│</span></span><span><span class="gut">2 </span><span class="kw">local</span> notify = <span class="fn">require</span> <span class="str">'std.notify'</span></span></div>
    <div class="r"><span class="sign"><span class="rail">│</span></span><span class="faint">… 󰈙 open file</span></div>
  </div>

  <div class="r"><span class="sign bad"></span><span><span class="dim">write</span> /etc/hosts  <span class="bad">✗ permission denied</span></span></div>

  <div class="flo hide" data-float="1"><div class="h"><span> session.lua</span><span class="faint">comparison · q close</span></div><div class="b"><span class="gut">37</span>  local options = options or {}
<span class="gut">38</span> <span class="del">- local busy = status.is_busy(self)</span>
<span class="gut">38</span> <span class="add">+ local busy, delivery =</span>
<span class="gut">39</span> <span class="add">+   resolve( self, options )</span>
<span class="gut">40</span>  if busy and not delivery then</div></div>
</section>
<script>
  (() => {
    const root = document;
    root.querySelectorAll('.head').forEach((h) => {
      h.addEventListener('click', (e) => {
        if (e.target.dataset && e.target.dataset.cmp) {
          root.querySelector('[data-float]').classList.toggle('hide');
          e.stopPropagation();
          return;
        }
        const body = root.querySelector('[data-body="' + h.dataset.k + '"]');
        const chev = h.querySelector('.dim');
        const open = !body.classList.contains('hide');
        body.classList.toggle('hide');
        chev.textContent = chev.textContent.replace(open ? '▾' : '▸', open ? '▸' : '▾');
      });
    });
  })();
</script>
</body>
</html>