npm - @sickr/cli - Versions diffs - 0.9.2 - Mend

@sickr/cli 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/render.js ADDED Viewed

@@ -0,0 +1,528 @@
+// NOTE: this local viewer is deliberately kept in visual + behavioural parity
+// with the public share page (sickr-ui/functions/r/[id].ts). Same atmosphere,
+// sticky rails, find (prev/next), jump controls and bottom bar — only the rail
+// copy differs (local context vs. public "capture your own"). If you change one,
+// change the other.
+const PLASMA = '#34e0ff';
+function esc(s) {
+    return s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+}
+// Inline Sickr wordmark (mirrors src/components/SickrLogo.tsx) — static ids.
+function wordmark(idPrefix) {
+    return `<svg viewBox="0 0 1105 395" role="img" aria-label="Sickr" class="logo" shape-rendering="geometricPrecision">
+  <defs>
+    <linearGradient id="${idPrefix}-silver" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#ffffff"/><stop offset="36%" stop-color="#f6f8fb"/>
+      <stop offset="58%" stop-color="#c7cedb"/><stop offset="78%" stop-color="#ffffff"/><stop offset="100%" stop-color="#dde3ee"/>
+    </linearGradient>
+    <filter id="${idPrefix}-fx" x="-10%" y="-12%" width="120%" height="124%">
+      <feGaussianBlur stdDeviation="5" result="b"/>
+      <feColorMatrix in="b" type="matrix" values="0 0 0 0 0.20  0 0 0 0 0.88  0 0 0 0 1  0 0 0 0.5 0" result="g"/>
+      <feMerge><feMergeNode in="g"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+    <mask id="${idPrefix}-s" maskUnits="userSpaceOnUse"><rect width="1105" height="395" fill="white"/><polygon points="101,258 270,145 202,204 161,213" fill="black"/></mask>
+    <mask id="${idPrefix}-i" maskUnits="userSpaceOnUse"><rect width="1105" height="395" fill="white"/><polygon points="361,260 396,229 396,252 361,283" fill="black"/></mask>
+    <mask id="${idPrefix}-c" maskUnits="userSpaceOnUse"><rect width="1105" height="395" fill="white"/><polygon points="458,272 493,244 504,262 469,290" fill="black"/></mask>
+    <mask id="${idPrefix}-r" maskUnits="userSpaceOnUse"><rect width="1105" height="395" fill="white"/><polygon points="888,266 920,238 920,261 888,289" fill="black"/></mask>
+  </defs>
+  <g fill="url(#${idPrefix}-silver)" filter="url(#${idPrefix}-fx)">
+    <path mask="url(#${idPrefix}-s)" d="M 70 324 L 110 296 L 221 296 C 243 296 258 282 258 260 C 258 238 247 223 224 207 L 244 188 C 272 204 286 227 286 258 C 286 297 260 324 228 324 Z M 136 213 C 109 199 96 179 96 153 C 96 109 122 77 156 77 L 296 77 L 262 106 L 158 106 C 138 106 124 125 124 153 C 124 171 134 184 157 195 Z"/>
+    <polygon points="268,146 200,203 109,256 162,211"/>
+    <circle cx="378" cy="116" r="19"/>
+    <path mask="url(#${idPrefix}-i)" d="M 366 182 L 395 155 L 395 299 L 366 324 Z"/>
+    <path mask="url(#${idPrefix}-c)" d="M 623 153 L 587 182 L 530 182 C 504 182 486 204 486 234 C 486 264 504 285 529 285 L 625 285 L 591 314 L 520 314 C 482 314 457 282 457 237 C 457 191 482 153 518 153 Z"/>
+    <path d="M 684 98 L 714 70 L 714 200 L 684 227 Z M 684 254 L 796 151 L 837 151 L 714 265 L 714 294 L 684 320 Z M 764 238 L 841 313 L 802 313 L 744 256 Z"/>
+    <path mask="url(#${idPrefix}-r)" d="M 889 321 L 889 193 C 889 168 906 153 927 153 L 1034 153 L 998 182 L 934 182 C 924 182 918 189 918 199 L 918 295 Z"/>
+  </g>
+</svg>`;
+}
+const STYLES = `
+  :root{--plasma:${PLASMA};--ink:#06080d}
+  *{box-sizing:border-box}
+  html{scroll-behavior:smooth}
+  body{margin:0;background:var(--ink);color:#e7ecf3;font-family:Sora,system-ui,Arial,sans-serif;min-height:100vh;position:relative;overflow-x:hidden}
+  .bg{position:fixed;inset:0;z-index:0;pointer-events:none}
+  .bg-grid{position:absolute;inset:0;opacity:.55;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse at 50% 0%,#000 40%,transparent 85%)}
+  .glow{position:absolute;border-radius:50%;filter:blur(120px)}
+  .glow-a{top:-200px;left:50%;transform:translateX(-50%);width:840px;height:520px;background:radial-gradient(closest-side,rgba(52,224,255,.16),transparent 70%)}
+  .glow-b{bottom:-220px;right:-140px;width:560px;height:440px;background:radial-gradient(closest-side,rgba(99,102,241,.13),transparent 70%)}
+  .wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:26px 24px 72px}
+  a{color:var(--plasma);text-decoration:none}
+  .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0 30px}
+  .logo{height:32px;width:auto;display:block}
+  .bar-cta{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--plasma)}
+  .label{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#5f6b80}
+  .layout{display:grid;gap:30px;grid-template-columns:1fr;align-items:start}
+  @media(min-width:980px){.layout{grid-template-columns:236px minmax(0,1fr) 290px}.layout aside{position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow:auto}}
+  .panel{border:1px solid #16202f;border-radius:12px;background:rgba(8,12,20,.55);padding:18px}
+  .rail h3{font-family:"Chakra Petch","Sora",sans-serif;font-weight:700;font-size:15px;color:#fff;margin:0 0 8px}
+  .rail p{font-size:13px;line-height:1.6;color:#9aa6b6;margin:0 0 10px}
+  .meta-row{display:flex;justify-content:space-between;gap:10px;font-family:"JetBrains Mono",monospace;font-size:11px;color:#6b7689;padding:6px 0;border-top:1px solid #111a27}
+  .meta-row b{color:#cdd5e1;font-weight:500;word-break:break-all;text-align:right}
+  h1.title{font-family:"Chakra Petch","Sora",sans-serif;font-weight:700;font-size:26px;line-height:1.1;letter-spacing:-.01em;color:#fff;margin:0 0 4px}
+  .title .hl{color:var(--plasma);text-shadow:0 0 22px rgba(52,224,255,.45)}
+  .sub{font-family:"JetBrains Mono",monospace;font-size:12px;color:#5f6b80;margin:0 0 22px}
+  ol.tl{list-style:none;margin:0;padding:0;position:relative}
+  ol.tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--plasma),transparent)}
+  ol.tl li{position:relative;padding:0 0 20px 30px}
+  .dot{position:absolute;left:0;top:3px;width:13px;height:13px;border-radius:50%;box-shadow:0 0 10px rgba(52,224,255,.5)}
+  .lbl{font-family:"Chakra Petch","Sora",sans-serif;font-weight:600;color:#fff}
+  .kind{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--plasma);margin-left:6px}
+  .detail{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:#cdd5e1;margin-top:5px;white-space:pre-wrap;word-break:break-word}
+  .time{font-family:"JetBrains Mono",monospace;font-size:11px;color:#5f6b80;margin-top:4px}
+  .cmd{display:flex;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;font-size:13px;background:#04060b;border:1px solid #1b2435;border-radius:8px;padding:11px 12px;color:#e7ecf3;margin:4px 0 0}
+  .cmd .dollar{color:rgba(52,224,255,.6)}
+  .btn{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:var(--plasma);color:#06080d;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:11px 16px;border-radius:6px;text-decoration:none;box-shadow:0 0 24px rgba(52,224,255,.3)}
+  .foot{margin-top:40px;border-top:1px solid #16202f;padding-top:18px;font-family:"JetBrains Mono",monospace;font-size:11px;color:#5f6b80}
+  .search{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:12px;padding:10px 0 14px;margin-bottom:6px;background:linear-gradient(var(--ink) 70%,transparent)}
+  .search input{flex:1;min-width:0;background:#04060b;border:1px solid #1b2435;border-radius:8px;padding:10px 12px;color:#e7ecf3;font-family:"JetBrains Mono",monospace;font-size:13px;outline:none}
+  .search input:focus{border-color:rgba(52,224,255,.5);box-shadow:0 0 0 3px rgba(52,224,255,.12)}
+  .search .count{font-family:"JetBrains Mono",monospace;font-size:11px;color:#5f6b80;white-space:nowrap;min-width:78px;text-align:right}
+  .search .nav{display:flex;gap:4px}
+  .search .nav button{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:#04060b;border:1px solid #1b2435;border-radius:7px;color:#9aa6b6;font-size:14px;cursor:pointer;line-height:1}
+  .search .nav button:hover:not(:disabled){border-color:rgba(52,224,255,.5);color:var(--plasma)}
+  .search .nav button:disabled{opacity:.4;cursor:default}
+  mark.hit{background:rgba(52,224,255,.18);color:#e7ecf3;border-radius:2px;padding:0 1px}
+  mark.hit.cur{background:var(--plasma);color:#06080d;box-shadow:0 0 0 2px rgba(52,224,255,.35)}
+  .jumps{display:flex;gap:14px;margin-top:12px}
+  .jumps a{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;color:#9aa6b6}
+  .jump{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:6}
+  .jump a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid #1b2435;border-radius:10px;background:rgba(8,12,20,.85);color:var(--plasma);text-decoration:none;font-size:16px;backdrop-filter:blur(6px)}
+  .jump a:hover{border-color:rgba(52,224,255,.5)}
+  .bottombar{margin-top:48px;border-top:1px solid #16202f;padding-top:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
+  .bottombar .logo{height:26px;width:auto}
+  .bottombar .pitch{font-size:13px;color:#9aa6b6;max-width:520px}
+  .session{font-family:"JetBrains Mono",monospace;font-size:11px;color:#5f6b80;margin-bottom:18px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
+  .turn{padding-bottom:10px;margin-bottom:18px;border-bottom:1px solid #0f1722}
+  .turn:last-child{border-bottom:none}
+  .msg{margin:10px 0}
+  .who{display:flex;align-items:center;gap:8px;margin-bottom:6px}
+  .ts{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:#4a5568}
+  .who .ts{margin-left:auto}
+  .copy{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:6px;color:#5f6b80;cursor:pointer;padding:0}
+  .copy:hover{color:var(--plasma);border-color:#1b2435}
+  .copy.done{color:var(--plasma);border-color:rgba(52,224,255,.4)}
+  .badge{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;padding:2px 7px;border-radius:5px}
+  .badge.h{background:rgba(255,207,107,.14);color:#ffcf6b;border:1px solid rgba(255,207,107,.3)}
+  .badge.a{background:rgba(52,224,255,.14);color:var(--plasma);border:1px solid rgba(52,224,255,.3)}
+  .msg .bubble{padding:10px 14px;border-radius:0 8px 8px 0;white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.6}
+  .msg.human .bubble{border-left:2px solid rgba(255,207,107,.55);background:rgba(255,207,107,.05);color:#f3ead7}
+  .msg.agent .bubble{border-left:2px solid rgba(52,224,255,.55);background:rgba(52,224,255,.05);color:#d7e6ee}
+  .bubble.md{white-space:normal}
+  .bubble.md p{margin:0 0 8px}.bubble.md p:last-child{margin-bottom:0}
+  .bubble.md code{font-family:"JetBrains Mono",monospace;font-size:.92em;background:rgba(255,255,255,.07);padding:1px 5px;border-radius:4px}
+  .bubble.md pre{background:#04060b;border:1px solid #1b2435;border-radius:8px;padding:10px 12px;overflow:auto;margin:8px 0}
+  .bubble.md pre code{background:none;padding:0;font-size:12.5px;line-height:1.5}
+  .bubble.md ul,.bubble.md ol{margin:6px 0;padding-left:20px}.bubble.md li{margin:3px 0}
+  .bubble.md a{color:var(--plasma);text-decoration:underline}
+  .bubble.md blockquote{margin:8px 0;padding:2px 12px;border-left:2px solid #2a3850;color:#9aa6b6}
+  .bubble.md .md-h{font-family:"Chakra Petch","Sora",sans-serif;font-weight:700;color:#fff;font-size:15px;margin:10px 0 6px}
+  .bubble.md strong{color:#fff;font-weight:700}
+  details.work{margin:10px 0;border:1px solid #16202f;border-radius:10px;background:rgba(8,12,20,.4)}
+  details.work>summary{cursor:pointer;list-style:none;padding:10px 14px;display:flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;font-size:12px;color:#9aa6b6}
+  details.work>summary::-webkit-details-marker{display:none}
+  details.work>summary::before{content:"\\25B8";color:var(--plasma);font-size:11px}
+  details.work[open]>summary::before{content:"\\25BE"}
+  details.work .peek{color:#5f6b80;font-size:11px}
+  details.work ol.tl{padding:6px 16px 14px}
+  details.work ol.tl::before{top:14px;bottom:14px}
+  .controls{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 0 14px;margin-bottom:4px;background:linear-gradient(var(--ink) 72%,transparent)}
+  .chip{font-family:"JetBrains Mono",monospace;font-size:11px;padding:4px 11px;border-radius:999px;border:1px solid #1b2435;background:#04060b;color:#9aa6b6;cursor:pointer}
+  .chip.on{border-color:rgba(52,224,255,.5);color:var(--plasma)}
+  .sortbtn{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11px;padding:4px 11px;border-radius:6px;border:1px solid #1b2435;background:#04060b;color:#9aa6b6;cursor:pointer}
+  .sortbtn:hover{border-color:rgba(52,224,255,.5);color:var(--plasma)}
+  .turnhead{margin:0 0 4px}
+  .agentchip{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;padding:2px 8px;border-radius:5px;border:1px solid #2a3850;color:#9aa6b6}
+  .agentchip.claude{color:var(--plasma);border-color:rgba(52,224,255,.4);background:rgba(52,224,255,.08)}
+  .agentchip.codex{color:#9b8cff;border-color:rgba(155,140,255,.4);background:rgba(155,140,255,.08)}
+  .turn.hide{display:none}
+`;
+const FIND_SCRIPT = `<script>
+  (function(){
+    var q=document.getElementById('q'),tl=document.getElementById('tl'),count=document.getElementById('count'),
+        prev=document.getElementById('prev'),next=document.getElementById('next');
+    if(!q||!tl)return;
+    var ORIGINAL=tl.innerHTML,total=tl.getElementsByTagName('li').length,hits=[],cur=-1;
+    function render(){
+      var on=hits.length>0, term=q.value.trim();
+      prev.disabled=!on; next.disabled=!on;
+      count.textContent=term?(on?((cur+1)+' / '+hits.length):'0 matches'):(total+' actions');
+    }
+    function setCur(i){
+      if(cur>=0&&hits[cur])hits[cur].className='hit';
+      if(!hits.length){cur=-1;render();return;}
+      cur=(i+hits.length)%hits.length;
+      hits[cur].className='hit cur';
+      var p=hits[cur].parentNode; while(p&&p!==tl){ if(p.tagName==='DETAILS')p.open=true; p=p.parentNode; }
+      hits[cur].scrollIntoView({block:'center',behavior:'smooth'});
+      render();
+    }
+    function find(term){
+      tl.innerHTML=ORIGINAL; hits=[]; cur=-1; term=term.toLowerCase();
+      if(term){
+        var walker=document.createTreeWalker(tl,NodeFilter.SHOW_TEXT,null),nodes=[];
+        while(walker.nextNode())nodes.push(walker.currentNode);
+        nodes.forEach(function(node){
+          var text=node.nodeValue,low=text.toLowerCase();
+          if(low.indexOf(term)<0)return;
+          var frag=document.createDocumentFragment(),last=0,idx;
+          while((idx=low.indexOf(term,last))>=0){
+            if(idx>last)frag.appendChild(document.createTextNode(text.slice(last,idx)));
+            var m=document.createElement('mark'); m.className='hit'; m.textContent=text.slice(idx,idx+term.length);
+            frag.appendChild(m); hits.push(m); last=idx+term.length;
+          }
+          if(last<text.length)frag.appendChild(document.createTextNode(text.slice(last)));
+          node.parentNode.replaceChild(frag,node);
+        });
+      }
+      if(hits.length)setCur(0); else render();
+    }
+    q.addEventListener('input',function(){find(q.value.trim());});
+    q.addEventListener('keydown',function(e){
+      if(e.key==='Enter'){e.preventDefault(); if(hits.length)setCur(cur+(e.shiftKey?-1:1));}
+    });
+    prev.addEventListener('click',function(){setCur(cur-1);});
+    next.addEventListener('click',function(){setCur(cur+1);});
+    document.addEventListener('click',function(e){
+      var btn=e.target.closest&&e.target.closest('.copy'); if(!btn)return;
+      var msg=btn.closest('.msg'),b=msg&&msg.querySelector('.bubble');
+      if(b&&navigator.clipboard)navigator.clipboard.writeText(b.innerText);
+      btn.classList.add('done'); setTimeout(function(){btn.classList.remove('done');},1200);
+    });
+  })();
+  </script>`;
+function dot(kind) {
+    return kind === 'tool' ? PLASMA : kind === 'prompt' ? '#8b95a7' : '#5f6b80';
+}
+function row(e) {
+    const time = e.at ? esc(e.at.replace('T', ' ').slice(0, 19) + 'Z') : '';
+    return `<li><span class="dot" style="background:${dot(e.kind)}"></span><div>
+    <span class="lbl">${esc(e.label)}</span><span class="kind">${esc(e.kind)}</span>
+    ${e.detail ? `<div class="detail">${esc(e.detail)}</div>` : ''}<div class="time">${time}</div></div></li>`;
+}
+function groupTurns(events) {
+    const pre = [];
+    const turns = [];
+    let cur = null;
+    for (const e of events) {
+        if (e.kind === 'prompt') {
+            if (cur)
+                turns.push(cur);
+            cur = { prompt: e, work: [] };
+        }
+        else if (e.kind === 'response') {
+            if (cur)
+                cur.response = e;
+        }
+        else if (e.kind === 'tool') {
+            (cur ? cur.work : pre).push(e);
+        }
+        else if (e.kind === 'start') {
+            pre.push(e);
+        }
+        // legacy 'stop' events are ignored (superseded by 'response')
+    }
+    if (cur)
+        turns.push(cur);
+    return { pre, turns };
+}
+function fmtTime(at) {
+    return at ? esc(at.replace('T', ' ').slice(0, 19) + 'Z') : '';
+}
+const COPY_ICON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>';
+// Inline markdown on an ALREADY-ESCAPED string. Code spans are protected from
+// emphasis. Only http(s) links are emitted. No raw HTML can survive (input is
+// pre-escaped), so this is XSS-safe — it only adds a fixed set of safe tags.
+function inlineMd(s) {
+    return s.split(/(`[^`]+`)/).map((p) => {
+        if (p.length >= 2 && p[0] === '`' && p[p.length - 1] === '`')
+            return `<code>${p.slice(1, -1)}</code>`;
+        return p
+            .replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" rel="noopener noreferrer" target="_blank">$1</a>')
+            .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+            .replace(/__([^_]+)__/g, '<strong>$1</strong>')
+            .replace(/\*([^*\s][^*]*)\*/g, '<em>$1</em>')
+            .replace(/(^|[^a-zA-Z0-9_])_([^_\s][^_]*)_/g, '$1<em>$2</em>');
+    }).join('');
+}
+/** Minimal, XSS-safe markdown → HTML for chat bubbles (prompt/response). */
+export function mdToHtml(raw) {
+    const lines = esc(raw).split('\n');
+    const out = [];
+    let para = [];
+    let code = [];
+    let inCode = false;
+    let list = null;
+    const flushPara = () => { if (para.length) {
+        out.push(`<p>${inlineMd(para.join('<br>'))}</p>`);
+        para = [];
+    } };
+    const flushList = () => { if (list) {
+        out.push(`</${list}>`);
+        list = null;
+    } };
+    for (const line of lines) {
+        const fence = /^```/.test(line.trim());
+        if (inCode) {
+            if (fence) {
+                out.push(`<pre><code>${code.join('\n')}</code></pre>`);
+                code = [];
+                inCode = false;
+            }
+            else
+                code.push(line);
+            continue;
+        }
+        if (fence) {
+            flushPara();
+            flushList();
+            inCode = true;
+            continue;
+        }
+        if (/^\s*$/.test(line)) {
+            flushPara();
+            flushList();
+            continue;
+        }
+        let m;
+        if ((m = line.match(/^#{1,6}\s+(.*)$/))) {
+            flushPara();
+            flushList();
+            out.push(`<div class="md-h">${inlineMd(m[1])}</div>`);
+            continue;
+        }
+        if ((m = line.match(/^\s*[-*]\s+(.*)$/))) {
+            flushPara();
+            if (list !== 'ul') {
+                flushList();
+                out.push('<ul>');
+                list = 'ul';
+            }
+            out.push(`<li>${inlineMd(m[1])}</li>`);
+            continue;
+        }
+        if ((m = line.match(/^\s*\d+\.\s+(.*)$/))) {
+            flushPara();
+            if (list !== 'ol') {
+                flushList();
+                out.push('<ol>');
+                list = 'ol';
+            }
+            out.push(`<li>${inlineMd(m[1])}</li>`);
+            continue;
+        }
+        if ((m = line.match(/^>\s?(.*)$/))) {
+            flushPara();
+            flushList();
+            out.push(`<blockquote>${inlineMd(m[1])}</blockquote>`);
+            continue;
+        }
+        para.push(line);
+    }
+    if (inCode)
+        out.push(`<pre><code>${code.join('\n')}</code></pre>`);
+    flushPara();
+    flushList();
+    return out.join('\n');
+}
+// The speaker name travels on the event label; fall back for legacy generic labels.
+function speaker(label, generic, fallback) {
+    return label && label !== generic ? label : fallback;
+}
+function bubble(kind, who, e) {
+    return `<div class="msg ${kind}">
+    <div class="who"><span class="badge ${kind === 'human' ? 'h' : 'a'}">${esc(who)}</span><span class="ts">${fmtTime(e.at)}</span><button class="copy" type="button" aria-label="Copy text" title="Copy">${COPY_ICON}</button></div>
+    <div class="bubble md">${mdToHtml(e.detail)}</div>
+  </div>`;
+}
+function workBlock(work) {
+    if (!work.length)
+        return '';
+    const peek = work.slice(0, 4).map((e) => esc(e.label)).join(' · ') + (work.length > 4 ? ` +${work.length - 4}` : '');
+    return `<details class="work">
+    <summary><span class="badge a">Agent</span> ${work.length} action${work.length === 1 ? '' : 's'} <span class="peek">${peek}</span></summary>
+    <ol class="tl">${work.map(row).join('\n')}</ol>
+  </details>`;
+}
+// Group a run into [Human prompt][Agent work, collapsed][Agent response] turns.
+// Falls back to a flat list for prompt-less (legacy) runs.
+function renderTimeline(events) {
+    const { pre, turns } = groupTurns(events);
+    if (turns.length === 0) {
+        return `<ol class="tl">${events.filter((e) => e.kind !== 'start').map(row).join('\n')}</ol>`;
+    }
+    const startEv = pre.find((e) => e.kind === 'start');
+    const preamble = startEv
+        ? `<div class="session"><span class="badge a">Session</span><span class="ts">${esc(startEv.detail || '')} · ${fmtTime(startEv.at)}</span></div>`
+        : '';
+    const preTools = workBlock(pre.filter((e) => e.kind === 'tool'));
+    const body = turns.map((t) => `<section class="turn">
+    ${t.prompt ? bubble('human', speaker(t.prompt.label, 'Prompt', 'Human'), t.prompt) : ''}
+    ${workBlock(t.work)}
+    ${t.response && t.response.detail ? bubble('agent', speaker(t.response.label, 'Response', 'Agent'), t.response) : ''}
+  </section>`).join('\n');
+    return preamble + preTools + body;
+}
+function toolCount(events) {
+    return events.filter((e) => e.kind === 'tool').length;
+}
+/**
+ * Self-contained, redacted-in audit-timeline HTML for one local run — in full
+ * visual + behavioural parity with the public sickr.ai/r/<id> page.
+ */
+export function renderRunHtml(run) {
+    return `<!doctype html><html lang="en"><head><meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>SICKR Replay — ${esc(run.id)}</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&family=Sora:wght@300;400;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+<style>${STYLES}</style></head>
+<body>
+<div class="bg"><div class="bg-grid"></div><div class="glow glow-a"></div><div class="glow glow-b"></div></div>
+<div class="wrap">
+  <span id="tl-top"></span>
+  <header class="bar">
+    <a href="https://sickr.ai">${wordmark('lg')}</a>
+    <a class="bar-cta" href="https://sickr.ai">sickr.ai →</a>
+  </header>
+  <div class="layout">
+    <aside class="rail">
+      <p class="label">Local replay</p>
+      <h3 style="margin-top:10px">What is this?</h3>
+      <p>A timeline of every action your AI coding agent took in this session — captured on your machine, secrets redacted.</p>
+      <div style="margin-top:14px">
+        <div class="meta-row"><span>id</span><b>${esc(run.id)}</b></div>
+        <div class="meta-row"><span>workspace</span><b>${esc(run.cwd || '—')}</b></div>
+        <div class="meta-row"><span>actions</span><b>${run.events.length}</b></div>
+      </div>
+      <div class="jumps"><a href="#tl-top">↑ top</a><a href="#tl-bottom">↓ end</a></div>
+    </aside>
+    <main>
+      <h1 class="title">What this agent <span class="hl">actually did</span>.</h1>
+      <p class="sub">captured locally with npx @sickr/cli · secrets redacted</p>
+      <div class="search">
+        <input id="q" type="search" autocomplete="off" placeholder="Search this run — tool, command, file, prompt…" aria-label="Search this run"/>
+        <div class="nav"><button id="prev" type="button" aria-label="Previous match" title="Previous (Shift+Enter)" disabled>‹</button><button id="next" type="button" aria-label="Next match" title="Next (Enter)" disabled>›</button></div>
+        <span class="count" id="count">${toolCount(run.events)} actions</span>
+      </div>
+      <div id="tl">${renderTimeline(run.events)}</div>
+    </main>
+    <aside class="rail panel">
+      <p class="label" style="margin-bottom:12px">Beyond this run</p>
+      <h3>Govern your whole team</h3>
+      <p>This is one agent on your machine. SICKR adds gates, approvals, multi-agent hand-offs and a full, signed-off audit trail across humans and agents.</p>
+      <a class="btn" href="https://sickr.ai">Explore SICKR →</a>
+      <p style="margin-top:16px;font-size:12px">Share this run as a public link:</p>
+      <div class="cmd"><span class="dollar">$</span><code>npx @sickr/cli replay share</code></div>
+    </aside>
+  </div>
+  <span id="tl-bottom"></span>
+  <div class="bottombar">
+    <a href="https://sickr.ai">${wordmark('lg2')}</a>
+    <p class="pitch">One agent, audited. <span style="color:#fff">Govern your whole team</span> — gates, approvals, multi-agent hand-offs and a full audit trail.</p>
+    <a class="btn" href="https://sickr.ai">Explore SICKR →</a>
+  </div>
+  <div class="foot">Captured locally with npx @sickr/cli · <a href="#tl-top">back to top ↑</a> · sickr.ai</div>
+  <nav class="jump" aria-label="scroll"><a href="#tl-top" aria-label="Scroll to top" title="Top">↑</a><a href="#tl-bottom" aria-label="Scroll to bottom" title="Bottom">↓</a></nav>
+  ${FIND_SCRIPT}
+</div></body></html>`;
+}
+// Filter (by agent) + sort (prompt vs response time) + copy. Kept in sync with /r.
+const COMBINED_SCRIPT = `<script>
+  (function(){
+    var tl=document.getElementById('tl'); if(!tl) return;
+    var turns=[].slice.call(tl.getElementsByClassName('turn'));
+    var chips=[].slice.call(document.getElementsByClassName('chip'));
+    chips.forEach(function(c){c.addEventListener('click',function(){
+      chips.forEach(function(x){x.classList.remove('on')}); c.classList.add('on');
+      var f=c.getAttribute('data-f');
+      turns.forEach(function(t){ t.className='turn'+((f==='All'||t.getAttribute('data-agent')===f)?'':' hide'); });
+    });});
+    var sb=document.getElementById('sortbtn'), byResp=false;
+    if(sb) sb.addEventListener('click',function(){
+      byResp=!byResp; sb.textContent=byResp?'sort: response time':'sort: prompt time';
+      var key=byResp?'data-rt':'data-pt';
+      turns.slice().sort(function(a,b){var x=a.getAttribute(key)||'',y=b.getAttribute(key)||'';return x<y?-1:x>y?1:0;}).forEach(function(t){tl.appendChild(t)});
+    });
+    document.addEventListener('click',function(e){
+      var b=e.target.closest&&e.target.closest('.copy'); if(!b)return;
+      var m=b.closest('.msg'),bb=m&&m.querySelector('.bubble');
+      if(bb&&navigator.clipboard)navigator.clipboard.writeText(bb.innerText);
+      b.classList.add('done'); setTimeout(function(){b.classList.remove('done');},1200);
+    });
+  })();
+  </script>`;
+function combinedSection(agent, t) {
+    const pt = t.prompt?.at || t.work[0]?.at || t.response?.at || '';
+    const rt = t.response?.at || t.work[t.work.length - 1]?.at || pt;
+    const cls = agent === 'Codex' ? 'codex' : agent === 'Claude' ? 'claude' : '';
+    return `<section class="turn" data-agent="${esc(agent)}" data-pt="${esc(pt)}" data-rt="${esc(rt)}">
+    <div class="turnhead"><span class="agentchip ${cls}">${esc(agent)}</span></div>
+    ${t.prompt ? bubble('human', speaker(t.prompt.label, 'Prompt', 'Human'), t.prompt) : ''}
+    ${workBlock(t.work)}
+    ${t.response && t.response.detail ? bubble('agent', speaker(t.response.label, 'Response', agent), t.response) : ''}
+  </section>`;
+}
+/** A combined, interleaved timeline across multiple runs/agents, sorted by prompt time. */
+export function renderCombinedHtml(runs, window) {
+    const items = [];
+    for (const r of runs) {
+        for (const t of groupTurns(r.events).turns) {
+            items.push({ agent: r.agent, t, pt: t.prompt?.at || t.work[0]?.at || t.response?.at || '' });
+        }
+    }
+    items.sort((a, b) => (a.pt < b.pt ? -1 : a.pt > b.pt ? 1 : 0));
+    const agents = Array.from(new Set(runs.map((r) => r.agent)));
+    const chips = ['All', ...agents].map((a) => `<button class="chip${a === 'All' ? ' on' : ''}" type="button" data-f="${esc(a)}">${esc(a)}</button>`).join('');
+    const sections = items.length ? items.map((it) => combinedSection(it.agent, it.t)).join('\n') : '<p class="sub">No turns in this window yet.</p>';
+    return `<!doctype html><html lang="en"><head><meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>SICKR Replay — combined (${esc(window)})</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&family=Sora:wght@300;400;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+<style>${STYLES}</style></head>
+<body>
+<div class="bg"><div class="bg-grid"></div><div class="glow glow-a"></div><div class="glow glow-b"></div></div>
+<div class="wrap">
+  <span id="tl-top"></span>
+  <header class="bar">
+    <a href="https://sickr.ai">${wordmark('lg')}</a>
+    <a class="bar-cta" href="https://sickr.ai">sickr.ai →</a>
+  </header>
+  <div class="layout">
+    <aside class="rail">
+      <p class="label">Combined replay</p>
+      <h3 style="margin-top:10px">All your agents, one timeline</h3>
+      <p>Every turn from every agent in this window, interleaved by time.</p>
+      <div style="margin-top:14px">
+        <div class="meta-row"><span>window</span><b>${esc(window)}</b></div>
+        <div class="meta-row"><span>runs</span><b>${runs.length}</b></div>
+        <div class="meta-row"><span>turns</span><b>${items.length}</b></div>
+        <div class="meta-row"><span>agents</span><b>${esc(agents.join(', ') || '—')}</b></div>
+      </div>
+      <div class="jumps"><a href="#tl-top">↑ top</a><a href="#tl-bottom">↓ end</a></div>
+    </aside>
+    <main>
+      <h1 class="title">What <span class="hl">all your agents</span> did.</h1>
+      <p class="sub">${items.length} turns · ${runs.length} runs · ${esc(window)} · captured locally</p>
+      <div class="controls">${chips}<button id="sortbtn" type="button" class="sortbtn">sort: prompt time</button></div>
+      <div id="tl" class="turns">${sections}</div>
+    </main>
+    <aside class="rail panel">
+      <p class="label" style="margin-bottom:12px">Beyond your machine</p>
+      <h3>Govern your whole team</h3>
+      <p>This is your agents on one machine. SICKR adds gates, approvals, multi-agent hand-offs and a full, signed-off audit trail across humans and agents.</p>
+      <a class="btn" href="https://sickr.ai">Explore SICKR →</a>
+    </aside>
+  </div>
+  <span id="tl-bottom"></span>
+  <div class="bottombar">
+    <a href="https://sickr.ai">${wordmark('lg2')}</a>
+    <p class="pitch">All your agents, audited in one place. <span style="color:#fff">Govern the whole team</span> — gates, approvals, full audit trail.</p>
+    <a class="btn" href="https://sickr.ai">Explore SICKR →</a>
+  </div>
+  <div class="foot">Captured locally with npx @sickr/cli · <a href="#tl-top">back to top ↑</a> · sickr.ai</div>
+  <nav class="jump" aria-label="scroll"><a href="#tl-top" aria-label="Scroll to top" title="Top">↑</a><a href="#tl-bottom" aria-label="Scroll to bottom" title="Bottom">↓</a></nav>
+  ${COMBINED_SCRIPT}
+</div></body></html>`;
+}

package/dist/share.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { gzipSync } from 'node:zlib';
+/** Strip the local id; events are already redacted at capture time. */
+export function buildSharePayload(run) {
+    return { run: { cwd: run.cwd, startedAt: run.startedAt, events: run.events } };
+}
+/** Combined multi-agent payload: tagged runs + the window label. */
+export function buildCombinedPayload(runs, window) {
+    return { window, runs: runs.map((r) => ({ agent: r.agent, events: r.events })) };
+}
+export class PublishError extends Error {
+    status;
+    constructor(status) {
+        super(`publish failed: ${status}`);
+        this.status = status;
+        this.name = 'PublishError';
+    }
+}
+export async function publish(payload, endpoint, opts = {}) {
+    // Gzip the JSON body: ~5-10x smaller for typical sessions, comfortably fits
+    // the worker's 4 MB cap even for combined multi-day windows.
+    const raw = JSON.stringify(payload);
+    const gz = gzipSync(raw);
+    const headers = { 'Content-Type': 'application/json', 'Content-Encoding': 'gzip' };
+    if (opts.token)
+        headers.Authorization = `Bearer ${opts.token}`;
+    const res = await fetch(endpoint, { method: 'POST', headers, body: gz });
+    if (!res.ok)
+        throw new PublishError(res.status);
+    return (await res.json());
+}

package/dist/ui.js ADDED Viewed

@@ -0,0 +1,63 @@
+// Tiny inline ANSI + box helper. No deps — chalk/ora would balloon the install
+// and clash with the "npx and forget" wedge. One place that decides when to
+// down-grade to plain `sickr: ...` lines: noColor() — NO_COLOR / CI / non-TTY /
+// dumb terminals / legacy cmd.exe. Every other code path goes through ui.enabled().
+//
+// Brand: Sickr wordmark cyan (51), plasma accent magenta (201), dim chrome
+// gray (240/245), values bright white (255), amber (214) for anon-link
+// urgency, green (42) for the redacted check. Matches the existing /r/<id>
+// dark/plasma palette without hard-coding hex (terminals translate 256-color).
+const ESC = '\x1b[';
+function isStdoutTTY() {
+    return process.stdout && typeof process.stdout.isTTY === 'boolean' && process.stdout.isTTY;
+}
+function noColor() {
+    if (process.env.NO_COLOR != null || process.env.SICKR_NO_COLOR != null)
+        return true;
+    if (process.env.CI === 'true')
+        return true;
+    if (process.env.TERM === 'dumb')
+        return true;
+    // Legacy cmd.exe: claims TTY but mangles 256-color SGR. Modern Windows
+    // Terminal sets WT_SESSION; VS Code sets TERM_PROGRAM; both safe.
+    if (process.platform === 'win32' && !process.env.WT_SESSION && !process.env.TERM_PROGRAM)
+        return true;
+    return !isStdoutTTY();
+}
+const c = (code) => (s) => noColor() ? s : `${ESC}${code}m${s}${ESC}0m`;
+const c256 = (n) => (s) => noColor() ? s : `${ESC}38;5;${n}m${s}${ESC}0m`;
+export const ui = {
+    enabled() { return !noColor(); },
+    bold: c(1),
+    dim: c256(245),
+    border: c256(240),
+    brand: c256(51), // cyan — Sickr wordmark
+    accent: c256(201), // magenta — plasma glyphs / Pro tag
+    ok: c256(42), // green — redacted check
+    warn: c256(214), // amber — anon-link urgency
+    white: c256(255),
+    underline(s) { return noColor() ? s : `${ESC}4m${s}${ESC}24m`; },
+    glyph: { tip: '▸', check: '✓', tag: '⌗' },
+};
+function stripAnsi(s) { return s.replace(/\x1b\[[0-9;]*m/g, ''); }
+/** "label   value" with the label dim-gray padded to a fixed column. */
+export function kv(label, value, labelWidth = 10) {
+    return ui.dim(label.padEnd(labelWidth)) + value;
+}
+/** Render a Sickr-titled box around pre-formatted rows. Caller should gate on
+ *  ui.enabled() — in plain mode emit `sickr: ...` lines directly instead. */
+export function card(title, rows) {
+    const widths = rows.map((r) => stripAnsi(r).length);
+    const inner = Math.max(56, ...widths) + 2; // +2 = one space pad each side inside the border
+    const dash = (n) => '─'.repeat(Math.max(1, n));
+    // Title bar: "╭─ sickr ─ <title> ─────────╮"
+    const titleTextLen = 'sickr '.length + 2 + title.length + 1; // "sickr " + "─ " + title + " "
+    const tailLen = Math.max(1, inner - titleTextLen - 1);
+    const top = ui.border('╭─ ') + ui.brand(ui.bold('sickr')) + ui.border(' ─ ') + ui.dim(title) + ' ' + ui.border(dash(tailLen) + '╮');
+    const bot = ui.border('╰' + dash(inner) + '╯');
+    const body = rows.map((r, i) => {
+        const pad = ' '.repeat(Math.max(0, inner - widths[i] - 2));
+        return ui.border('│ ') + r + pad + ui.border(' │');
+    }).join('\n');
+    return `${top}\n${body}\n${bot}\n`;
+}