npm - koneck - Versions diffs - 2.25.76 → 2.26.0 - Mend

koneck 2.25.76 → 2.26.0

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 (26) hide show

package/dist/index.d.ts.map +1 -1
package/dist/index.js +51 -4
package/dist/index.js.map +1 -1
package/dist/ink-chat.d.ts +10 -0
package/dist/ink-chat.d.ts.map +1 -1
package/dist/ink-chat.js +29 -4
package/dist/ink-chat.js.map +1 -1
package/dist/types.d.ts +4 -0
package/dist/types.d.ts.map +1 -1
package/dist/web/api.d.ts +31 -0
package/dist/web/api.d.ts.map +1 -0
package/dist/web/api.js +261 -0
package/dist/web/api.js.map +1 -0
package/dist/web/events.d.ts +172 -0
package/dist/web/events.d.ts.map +1 -0
package/dist/web/events.js +52 -0
package/dist/web/events.js.map +1 -0
package/dist/web/sessions.d.ts +74 -0
package/dist/web/sessions.d.ts.map +1 -0
package/dist/web/sessions.js +188 -0
package/dist/web/sessions.js.map +1 -0
package/dist/web/ui.d.ts +14 -0
package/dist/web/ui.d.ts.map +1 -0
package/dist/web/ui.js +586 -0
package/dist/web/ui.js.map +1 -0
package/package.json +1 -1

package/dist/web/ui.js ADDED Viewed

@@ -0,0 +1,586 @@
+/**
+ * The single page, as a string.
+ *
+ * No build step and no dependencies: one HTML document with its styles and script inline, served
+ * from memory. A web UI that needs bundling is a web UI that rots — and KONECK is installed with
+ * `npm i -g koneck`, so anything requiring a second toolchain would be broken for most people on
+ * the day they first tried it.
+ *
+ * Nothing is fetched from the network either. A page that pulls a font or a script from a CDN does
+ * not work on a machine that is offline, which is the machine most likely to be running a local
+ * model in the first place.
+ */
+/** The mark, drawn as the terminal draws it: a K facing its own reflection. */
+const MARK = `<svg viewBox="0 0 34 12" class="mark" aria-hidden="true">
+  <g fill="currentColor">
+    <rect x="0" y="0" width="5" height="12"/><rect x="29" y="0" width="5" height="12"/>
+    <path d="M5 6 L11 0 L14 0 L7 7 Z"/><path d="M5 6 L11 12 L14 12 L7 5 Z"/>
+    <path d="M29 6 L23 0 L20 0 L27 7 Z"/><path d="M29 6 L23 12 L20 12 L27 5 Z"/>
+  </g></svg>`;
+/** The mirrored K, as a character reference so no source file needs the glyph itself. */
+const KK = '<span class="kk">K&#42200;</span>';
+export function page() {
+    return `<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="referrer" content="no-referrer">
+<title>KONECK</title>
+<style>
+:root{
+  --bg:#0b1013; --panel:#111a1f; --panel-2:#16232a; --line:#1e3038;
+  --ink:#d7e6ec; --muted:#7f9aa6; --dim:#4f6874;
+  --cyan:#4dd6e8; --amber:#e8b04d; --green:#57d99a; --red:#ef6d72; --violet:#a78bfa;
+  --radius:10px; --mono:ui-monospace,'SF Mono',Menlo,Consolas,'DejaVu Sans Mono',monospace;
+}
+*{box-sizing:border-box}
+html,body{height:100%}
+body{margin:0;background:var(--bg);color:var(--ink);
+  font:14px/1.55 ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
+  display:flex;overflow:hidden}
+button,input,textarea,select{font:inherit;color:inherit}
+::-webkit-scrollbar{width:9px;height:9px}
+::-webkit-scrollbar-thumb{background:#24373f;border-radius:9px}
+::-webkit-scrollbar-track{background:transparent}
+.kk{color:var(--cyan);font-family:var(--mono)}
+aside{width:264px;flex:0 0 264px;background:var(--panel);border-right:1px solid var(--line);
+  display:flex;flex-direction:column;min-height:0}
+.brand{display:flex;align-items:center;gap:9px;padding:16px 16px 13px;color:var(--cyan)}
+.mark{width:30px;height:11px;display:block}
+.brand b{font-size:13px;letter-spacing:.16em;font-weight:600;color:var(--ink)}
+.brand span{font-size:9px;letter-spacing:.14em;color:var(--dim);
+  border:1px solid var(--line);border-radius:4px;padding:2px 5px}
+.newbtn{margin:0 12px 14px;padding:9px;border:1px solid var(--line);background:var(--panel-2);
+  border-radius:var(--radius);color:var(--ink);cursor:pointer;display:flex;align-items:center;
+  justify-content:center;gap:7px;transition:.14s}
+.newbtn:hover{border-color:var(--cyan);color:var(--cyan)}
+.shead{padding:6px 16px;font-size:10px;letter-spacing:.13em;color:var(--dim);text-transform:uppercase}
+.slist{overflow-y:auto;flex:1;min-height:0;padding:0 8px 10px}
+.srow{padding:8px 10px;border-radius:8px;cursor:pointer;margin-bottom:2px;border:1px solid transparent}
+.srow:hover{background:var(--panel-2)}
+.srow.on{background:var(--panel-2);border-color:var(--line)}
+.srow .t{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.srow .m{font-size:10.5px;color:var(--dim);margin-top:2px;display:flex;gap:7px;align-items:center}
+.dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 6px}
+.dot.busy{background:var(--amber);animation:pulse 1.1s infinite}
+@keyframes pulse{50%{opacity:.28}}
+.foot{border-top:1px solid var(--line);padding:10px 14px;font-size:10.5px;color:var(--dim);
+  display:flex;justify-content:space-between;align-items:center}
+main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
+header{height:46px;flex:0 0 46px;border-bottom:1px solid var(--line);display:flex;
+  align-items:center;gap:10px;padding:0 16px;background:var(--panel);font-size:12px}
+.pill{border:1px solid var(--line);background:var(--panel-2);border-radius:999px;
+  padding:4px 11px;color:var(--muted);display:flex;gap:6px;align-items:center;cursor:pointer}
+.pill:hover{border-color:var(--cyan);color:var(--ink)}
+.pill b{color:var(--ink);font-weight:500}
+.spacer{flex:1}
+.stat{color:var(--dim);font-variant-numeric:tabular-nums}
+.stat b{color:var(--muted);font-weight:500}
+#feed{flex:1;overflow-y:auto;padding:26px 0 8px;min-height:0}
+.wrap{max-width:820px;margin:0 auto;padding:0 24px}
+.hero{text-align:center;padding:13vh 0 0;color:var(--muted)}
+.hero .big{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--cyan);
+  margin-bottom:8px}
+.hero .big .mark{width:52px;height:19px}
+.hero h1{font-size:21px;margin:0;color:var(--ink);font-weight:600;letter-spacing:.01em}
+.hero p{font-size:13px;margin:7px 0 0}
+.msg{margin-bottom:20px}
+.you{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
+  padding:11px 14px;white-space:pre-wrap;word-break:break-word}
+.who{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.12em;
+  color:var(--dim);text-transform:uppercase;margin-bottom:7px}
+.reply{white-space:pre-wrap;word-break:break-word}
+.reply code{background:var(--panel-2);border:1px solid var(--line);border-radius:4px;
+  padding:1px 5px;font-family:var(--mono);font-size:12.5px}
+.reply pre{background:var(--panel);border:1px solid var(--line);border-radius:8px;
+  padding:12px 14px;overflow-x:auto;margin:10px 0;white-space:pre}
+.reply pre code{background:none;border:0;padding:0;font-size:12.5px;line-height:1.5}
+.reply h3{font-size:14px;margin:16px 0 6px}
+.reply strong{color:#eaf4f8}
+.reply table{border-collapse:collapse;margin:10px 0;font-size:12.5px;display:block;overflow-x:auto}
+.reply th,.reply td{border:1px solid var(--line);padding:5px 9px;text-align:left}
+.reply th{background:var(--panel-2);color:var(--muted)}
+.tool{border:1px solid var(--line);border-left:2px solid var(--dim);border-radius:8px;
+  background:var(--panel);margin:8px 0;overflow:hidden}
+.tool.ok{border-left-color:var(--green)} .tool.bad{border-left-color:var(--red)}
+.tool.run{border-left-color:var(--amber)}
+.tool .th{display:flex;align-items:center;gap:9px;padding:8px 12px;cursor:pointer;font-size:12.5px}
+.tool .nm{font-family:var(--mono);color:var(--cyan)}
+.tool .dt{color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.tool .ms{color:var(--dim);font-variant-numeric:tabular-nums;font-size:11px}
+.tool .body{border-top:1px solid var(--line);padding:9px 12px;font-family:var(--mono);
+  font-size:11.5px;color:var(--muted);white-space:pre-wrap;max-height:280px;overflow:auto}
+.think{border:1px dashed var(--line);border-radius:8px;padding:9px 12px;margin:8px 0;
+  color:var(--violet);font-size:12.5px;white-space:pre-wrap;max-height:200px;overflow:auto}
+.notice{border:1px solid var(--line);border-left:2px solid var(--amber);border-radius:8px;
+  padding:10px 13px;margin:9px 0;font-size:12.5px;color:var(--muted);white-space:pre-wrap}
+.notice.info{border-left-color:var(--cyan)}
+.err{border:1px solid #4a2226;border-left:2px solid var(--red);background:#180f11;
+  border-radius:8px;padding:10px 13px;margin:9px 0;font-size:12.5px;color:#f4b8ba;white-space:pre-wrap}
+.plan{border:1px solid var(--line);border-radius:8px;background:var(--panel);margin:9px 0;
+  padding:10px 13px;font-size:12.5px}
+.plan h4{margin:0 0 7px;font-size:10.5px;letter-spacing:.12em;color:var(--dim);
+  text-transform:uppercase;display:flex;gap:8px}
+.step{display:flex;gap:9px;padding:2px 0;color:var(--muted)}
+.step .bx{width:13px;color:var(--dim);flex:0 0 13px}
+.step.done{color:var(--dim)} .step.done .bx{color:var(--green)}
+.step.doing{color:var(--ink)} .step.doing .bx{color:var(--amber)}
+.step.blocked .bx{color:var(--red)}
+.ask{border:1px solid var(--amber);border-radius:var(--radius);background:#1a1508;
+  padding:12px 14px;margin:11px 0}
+.ask .q{font-size:13px;margin-bottom:4px}
+.ask .a{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-bottom:10px;
+  white-space:pre-wrap;max-height:130px;overflow:auto}
+.ask .btns{display:flex;gap:8px}
+.ask button{padding:6px 14px;border-radius:7px;border:1px solid var(--line);cursor:pointer;
+  background:var(--panel-2)}
+.ask .yes{border-color:var(--green);color:var(--green)}
+.ask .no{border-color:var(--red);color:var(--red)}
+.busy{display:flex;align-items:center;gap:10px;color:var(--amber);font-size:12.5px;margin:8px 0}
+.sp{width:11px;height:11px;border:2px solid var(--amber);border-right-color:transparent;
+  border-radius:50%;animation:spin .8s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+footer{flex:0 0 auto;border-top:1px solid var(--line);background:var(--panel);padding:12px 0 14px}
+.cbox{max-width:820px;margin:0 auto;padding:0 24px}
+.cin{display:flex;align-items:flex-end;gap:10px;border:1px solid var(--line);
+  background:var(--panel-2);border-radius:var(--radius);padding:9px 11px;transition:.14s}
+.cin:focus-within{border-color:var(--cyan)}
+textarea{flex:1;background:none;border:0;outline:0;resize:none;max-height:190px;
+  line-height:1.5;font-size:14px}
+textarea::placeholder{color:var(--dim)}
+.send{width:31px;height:31px;flex:0 0 31px;border-radius:50%;border:0;cursor:pointer;
+  background:var(--cyan);color:#04181c;font-size:15px;display:grid;place-items:center}
+.send:disabled{background:var(--line);color:var(--dim);cursor:not-allowed}
+.chint{display:flex;gap:12px;margin-top:7px;font-size:10.5px;color:var(--dim)}
+.chint kbd{border:1px solid var(--line);border-radius:4px;padding:0 4px;font-family:var(--mono)}
+dialog{border:1px solid var(--line);background:var(--panel);color:var(--ink);
+  border-radius:var(--radius);padding:0;max-width:440px;width:92%}
+dialog::backdrop{background:rgba(0,0,0,.66)}
+.dlg{padding:18px}
+.dlg h3{margin:0 0 4px;font-size:15px}
+.dlg p{margin:0 0 14px;color:var(--muted);font-size:12.5px}
+.dlg input,.dlg select{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--line);
+  background:var(--panel-2);margin-bottom:10px}
+.dlg .row{display:flex;gap:8px;justify-content:flex-end}
+.dlg button{padding:7px 15px;border-radius:8px;border:1px solid var(--line);cursor:pointer;
+  background:var(--panel-2)}
+.dlg .go{border-color:var(--cyan);color:var(--cyan)}
+</style>
+</head><body>
+<aside>
+  <div class="brand">${MARK}<b>KONECK</b><span>web</span></div>
+  <button class="newbtn" id="new">+ New session</button>
+  <div class="shead">Sessions</div>
+  <div class="slist" id="slist"></div>
+  <div class="foot"><span id="wsname">&mdash;</span><span id="conn">offline</span></div>
+</aside>
+<main>
+  <header>
+    <div class="pill" id="pprov">provider <b>&mdash;</b></div>
+    <div class="pill" id="pmodel">model <b>&mdash;</b></div>
+    <div class="spacer"></div>
+    <div class="stat" id="stok">&mdash;</div>
+    <div class="pill" id="pabort" style="display:none;border-color:var(--red);color:var(--red)">stop</div>
+  </header>
+  <div id="feed"><div class="wrap" id="stream">
+    <div class="hero">
+      <div class="big">${MARK}<h1>Into the workspace</h1></div>
+      <p>Describe what you want built. Everything the CLI does, from here.</p>
+    </div>
+  </div></div>
+  <footer><div class="cbox">
+    <div class="cin">
+      <textarea id="ta" rows="1" placeholder="Describe what you want to build..."></textarea>
+      <button class="send" id="send" disabled>&uarr;</button>
+    </div>
+    <div class="chint">
+      <span><kbd>Enter</kbd> send</span><span><kbd>Shift</kbd>+<kbd>Enter</kbd> newline</span>
+      <span id="hintstate"></span>
+    </div>
+  </div></footer>
+</main>
+<dialog id="tokdlg"><form class="dlg" method="dialog">
+  <h3>Token needed</h3>
+  <p>Anything that starts a run needs the token KONECK printed when it started. It is in the
+     terminal you launched it from.</p>
+  <input id="tokin" placeholder="paste the token" autocomplete="off">
+  <div class="row"><button class="go" id="toksave">Use it</button></div>
+</form></dialog>
+<dialog id="mdlg"><form class="dlg" method="dialog">
+  <h3>Model</h3><p>Applies from your next message.</p>
+  <select id="mprov"></select>
+  <input id="mmodel" placeholder="model name" autocomplete="off">
+  <div class="row"><button>Cancel</button><button class="go" id="msave">Switch</button></div>
+</form></dialog>
+<script>
+${clientScript()}
+</script>
+</body></html>`;
+}
+/**
+ * The client.
+ *
+ * Plain DOM. A framework would be more code than the page it renders, and this has one job: turn a
+ * stream of typed events into a transcript that reads well.
+ */
+function clientScript() {
+    return String.raw `
+const $ = (id) => document.getElementById(id);
+const state = {
+  token: new URLSearchParams(location.search).get('token') || localStorage.getItem('koneck.token') || '',
+  session: null, provider: '-', model: '-', busy: false, es: null,
+  // The element currently being appended to, so streamed text lands in one bubble rather than
+  // producing a new one per chunk.
+  replyEl: null, thinkEl: null, toolEls: new Map(), planEl: null, lastTool: null,
+};
+if (state.token) localStorage.setItem('koneck.token', state.token);
+// The token does not belong in the address bar, where it survives in history and in a screenshot.
+if (location.search.indexOf('token=') !== -1) history.replaceState({}, '', location.pathname);
+const api = async (path, opts) => {
+  opts = opts || {};
+  const sep = path.indexOf('?') === -1 ? '?' : '&';
+  const res = await fetch(path + sep + 'token=' + encodeURIComponent(state.token), {
+    method: opts.method || 'GET',
+    body: opts.body,
+    headers: { 'content-type': 'application/json' },
+  });
+  if (res.status === 401) { $('tokdlg').showModal(); throw new Error('token required'); }
+  if (!res.ok) {
+    let msg = res.statusText;
+    try { msg = (await res.json()).error || msg; } catch (e) {}
+    throw new Error(msg);
+  }
+  return res.status === 204 ? null : res.json();
+};
+const stream = () => $('stream');
+const atBottom = () => {
+  const f = $('feed');
+  return f.scrollHeight - f.scrollTop - f.clientHeight < 90;
+};
+const stick = (was) => { if (was) $('feed').scrollTop = $('feed').scrollHeight; };
+const el = (tag, cls, text) => {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text !== undefined) n.textContent = text;
+  return n;
+};
+const add = (node) => { const was = atBottom(); stream().appendChild(node); stick(was); return node; };
+const clearHero = () => { const h = stream().querySelector('.hero'); if (h) h.remove(); };
+/**
+ * Enough markdown to read a reply: fences, inline code, bold, headings, tables.
+ *
+ * Everything is escaped before any tag is inserted, and fenced blocks are lifted out first so
+ * their contents can never be interpreted. Model output is untrusted text — it routinely contains
+ * HTML, because it is often writing HTML.
+ */
+function md(src) {
+  const esc = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const blocks = [];
+  let text = src.replace(/` + '```' + String.raw `([a-zA-Z0-9_+-]*)\n([\s\S]*?)` + '```' + String.raw `/g, function (m, lang, code) {
+    blocks.push('<pre><code>' + esc(code.replace(/\n$/, '')) + '</code></pre>');
+    return '' + (blocks.length - 1) + '';
+  });
+  text = esc(text);
+  text = text.replace(/(^\|.+\|\n\|[ :|-]+\|\n(?:\|.*\|\n?)*)/gm, function (t) {
+    const rows = t.trim().split('\n').filter(function (r) { return !/^\|[ :|-]+\|$/.test(r.trim()); });
+    const cells = (r, tag) => '<tr>' + r.split('|').slice(1, -1)
+      .map((c) => '<' + tag + '>' + c.trim() + '</' + tag + '>').join('') + '</tr>';
+    return '<table>' + cells(rows[0], 'th') +
+      rows.slice(1).map((r) => cells(r, 'td')).join('') + '</table>';
+  });
+  text = text
+    .replace(/^#{2,3} (.*)$/gm, '<h3>$1</h3>')
+    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+    .replace(/` + '`' + String.raw `([^` + '`' + String.raw `\n]+)` + '`' + String.raw `/g, '<code>$1</code>');
+  return text.replace(/(\d+)/g, (m, i) => blocks[Number(i)]);
+}
+const ms = (n) => n >= 1000 ? (n / 1000).toFixed(n >= 10000 ? 0 : 1) + 's' : Math.round(n) + 'ms';
+const num = (n) => n.toLocaleString();
+function renderTool(e) {
+  const box = el('div', 'tool run');
+  const th = el('div', 'th');
+  th.appendChild(el('span', 'nm', e.name));
+  th.appendChild(el('span', 'dt', e.detail || ''));
+  th.appendChild(el('span', 'ms', '...'));
+  const body = el('div', 'body');
+  body.style.display = 'none';
+  th.onclick = () => { body.style.display = body.style.display === 'none' ? 'block' : 'none'; };
+  box.appendChild(th); box.appendChild(body);
+  const entry = { box: box, th: th, body: body };
+  state.toolEls.set(e.callId, entry);
+  state.lastTool = entry;
+  return add(box);
+}
+function finishTool(e) {
+  const found = state.toolEls.get(e.callId) || state.lastTool;
+  if (!found) return;
+  found.box.className = 'tool ' + (e.ok ? 'ok' : 'bad');
+  found.th.children[2].textContent = ms(e.ms);
+  if (e.detail) found.th.children[1].textContent = e.detail;
+}
+function renderPlan(steps) {
+  const done = steps.filter((s) => s.state === 'done').length;
+  const box = el('div', 'plan');
+  const h = el('h4');
+  h.appendChild(el('span', null, 'Plan'));
+  h.appendChild(el('span', null, done + '/' + steps.length));
+  box.appendChild(h);
+  for (const s of steps) {
+    const row = el('div', 'step ' + s.state);
+    const mark = s.state === 'done' ? 'v' : s.state === 'doing' ? '>' : s.state === 'blocked' ? 'x' : '.';
+    row.appendChild(el('span', 'bx', mark));
+    row.appendChild(el('span', null, s.text));
+    box.appendChild(row);
+  }
+  if (state.planEl && state.planEl.parentNode) {
+    state.planEl.replaceWith(box); state.planEl = box; return box;
+  }
+  state.planEl = box;
+  return add(box);
+}
+function renderAsk(e) {
+  const box = el('div', 'ask');
+  box.appendChild(el('div', 'q', 'Allow ' + e.tool + '?'));
+  box.appendChild(el('div', 'a', e.args));
+  const btns = el('div', 'btns');
+  const answer = async (allow) => {
+    const all = btns.querySelectorAll('button');
+    for (let i = 0; i < all.length; i++) all[i].disabled = true;
+    await api('/api/answer', { method: 'POST',
+      body: JSON.stringify({ session: state.session, ask: e.askId, allow: allow }) });
+    box.appendChild(el('div', 'a', allow ? 'allowed' : 'refused'));
+  };
+  const yes = el('button', 'yes', 'Allow'); yes.onclick = () => answer(true);
+  const no = el('button', 'no', 'Refuse'); no.onclick = () => answer(false);
+  btns.appendChild(yes); btns.appendChild(no);
+  box.appendChild(btns);
+  return add(box);
+}
+let spinner = null;
+function setBusy(on) {
+  state.busy = on;
+  $('send').disabled = on || !$('ta').value.trim();
+  $('pabort').style.display = on ? 'flex' : 'none';
+  $('hintstate').textContent = on ? 'working...' : '';
+  if (on && !spinner) {
+    spinner = el('div', 'busy');
+    spinner.appendChild(el('div', 'sp'));
+    spinner.appendChild(el('span', null, 'working'));
+    add(spinner);
+  } else if (!on && spinner) { spinner.remove(); spinner = null; }
+}
+function onEvent(e) {
+  switch (e.t) {
+    case 'session':
+      state.provider = e.provider; state.model = e.model;
+      setPills(e.provider, e.model);
+      $('wsname').textContent = e.cwd.split('/').pop() || e.cwd;
+      break;
+    case 'user': {
+      clearHero();
+      const box = el('div', 'msg');
+      box.appendChild(el('div', 'who', 'you'));
+      box.appendChild(el('div', 'you', e.text));
+      add(box); state.replyEl = null; state.thinkEl = null;
+      setBusy(true);
+      break;
+    }
+    case 'chunk': {
+      if (!state.replyEl) {
+        const box = el('div', 'msg');
+        const who = el('div', 'who');
+        who.appendChild(el('span', 'kk', 'koneck'));
+        const body = el('div', 'reply');
+        box.appendChild(who); box.appendChild(body); add(box);
+        state.replyEl = body; state.replyEl.dataset.raw = '';
+      }
+      state.replyEl.dataset.raw += e.text;
+      const was = atBottom();
+      state.replyEl.innerHTML = md(state.replyEl.dataset.raw);
+      stick(was);
+      break;
+    }
+    case 'thinking':
+      if (!state.thinkEl) state.thinkEl = add(el('div', 'think', ''));
+      state.thinkEl.textContent = (state.thinkEl.textContent + e.text).slice(-1400);
+      break;
+    case 'tool': clearHero(); renderTool(e); break;
+    case 'tool-output': {
+      const any = state.lastTool;
+      if (any) any.body.textContent = (any.body.textContent + e.line + '\n').slice(-4000);
+      break;
+    }
+    case 'tool-done': finishTool(e); break;
+    case 'plan': renderPlan(e.steps); break;
+    case 'tokens':
+      $('stok').innerHTML = '<b>' + num(e.total) + '</b> tokens' +
+        (e.cost > 0 ? ' &middot; $' + e.cost.toFixed(4) : '');
+      break;
+    case 'ask': renderAsk(e); break;
+    case 'notice': add(el('div', 'notice ' + (e.level === 'info' ? 'info' : ''), e.text)); break;
+    case 'error': add(el('div', 'err', e.text)); setBusy(false); break;
+    case 'turn-end':
+      setBusy(false);
+      state.replyEl = null; state.thinkEl = null;
+      break;
+  }
+}
+function setPills(provider, model) {
+  $('pprov').innerHTML = 'provider <b>' + escHtml(provider) + '</b>';
+  $('pmodel').innerHTML = 'model <b>' + escHtml(model) + '</b>';
+}
+function escHtml(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+function listen() {
+  if (state.es) state.es.close();
+  const es = new EventSource('/api/events?session=' + encodeURIComponent(state.session) +
+    '&token=' + encodeURIComponent(state.token));
+  state.es = es;
+  es.onopen = () => { $('conn').textContent = 'live'; $('conn').style.color = 'var(--green)'; };
+  es.onerror = () => { $('conn').textContent = 'reconnecting'; $('conn').style.color = 'var(--amber)'; };
+  es.onmessage = (m) => { try { onEvent(JSON.parse(m.data)); } catch (err) {} };
+}
+async function refreshSessions() {
+  let data = null;
+  try { data = await api('/api/sessions'); } catch (e) { return; }
+  const list = $('slist');
+  list.innerHTML = '';
+  for (const s of data.live) {
+    const row = el('div', 'srow' + (s.id === state.session ? ' on' : ''));
+    row.appendChild(el('div', 't', s.title));
+    const meta = el('div', 'm');
+    meta.appendChild(el('span', 'dot' + (s.busy ? ' busy' : '')));
+    meta.appendChild(el('span', null, s.model));
+    meta.appendChild(el('span', null, s.turns + ' turns'));
+    row.appendChild(meta);
+    row.onclick = () => { openSession(s.id); };
+    list.appendChild(row);
+  }
+  if (!data.live.length) list.appendChild(el('div', 'shead', 'none yet'));
+}
+function resetView() {
+  stream().innerHTML = '';
+  state.planEl = null; state.replyEl = null; state.thinkEl = null; state.lastTool = null;
+  state.toolEls = new Map();
+}
+function openSession(id) {
+  state.session = id;
+  resetView();
+  listen();
+  refreshSessions();
+}
+async function newSession() {
+  const s = await api('/api/sessions', { method: 'POST', body: JSON.stringify({}) });
+  openSession(s.id);
+}
+async function send() {
+  const ta = $('ta');
+  const text = ta.value.trim();
+  if (!text || state.busy) return;
+  if (!state.session) await newSession();
+  ta.value = ''; ta.style.height = 'auto';
+  $('send').disabled = true;
+  try {
+    await api('/api/send', { method: 'POST',
+      body: JSON.stringify({ session: state.session, text: text }) });
+  } catch (e) { add(el('div', 'err', e.message)); setBusy(false); }
+}
+$('ta').addEventListener('input', (ev) => {
+  const ta = ev.target;
+  ta.style.height = 'auto';
+  ta.style.height = Math.min(ta.scrollHeight, 190) + 'px';
+  $('send').disabled = state.busy || !ta.value.trim();
+});
+$('ta').addEventListener('keydown', (ev) => {
+  if (ev.key === 'Enter' && !ev.shiftKey) { ev.preventDefault(); send(); }
+});
+$('send').onclick = send;
+$('new').onclick = newSession;
+$('pabort').onclick = () => {
+  api('/api/abort', { method: 'POST', body: JSON.stringify({ session: state.session }) })
+    .catch(() => {});
+};
+$('toksave').onclick = () => {
+  const v = $('tokin').value.trim();
+  if (v) { localStorage.setItem('koneck.token', v); location.reload(); }
+};
+$('pmodel').onclick = async () => {
+  let info = null;
+  try { info = await api('/api/workspaces'); } catch (e) { return; }
+  const sel = $('mprov');
+  sel.innerHTML = '';
+  for (const p of info.providers) {
+    const o = document.createElement('option');
+    o.value = p.name;
+    o.textContent = p.label + (p.keyless ? ' - local' : '');
+    if (p.name === state.provider) o.selected = true;
+    sel.appendChild(o);
+  }
+  $('mmodel').value = state.model === '-' ? info.model : state.model;
+  $('mdlg').showModal();
+};
+$('msave').onclick = async () => {
+  const provider = $('mprov').value, model = $('mmodel').value.trim();
+  if (!state.session) await newSession();
+  let info = null;
+  try {
+    info = await api('/api/model', { method: 'POST',
+      body: JSON.stringify({ session: state.session, provider: provider, model: model }) });
+  } catch (e) { return; }
+  state.provider = info.provider; state.model = info.model;
+  setPills(info.provider, info.model);
+};
+(async function start() {
+  let hello = null;
+  try { hello = await fetch('/api/hello').then((r) => r.json()); } catch (e) {}
+  if (hello && hello.needsToken && !state.token) $('tokdlg').showModal();
+  let info = null;
+  try { info = await api('/api/workspaces'); } catch (e) {}
+  if (info) {
+    state.provider = info.provider; state.model = info.model;
+    setPills(info.provider, info.model);
+    $('wsname').textContent = info.cwd.split('/').pop() || info.cwd;
+  }
+  await refreshSessions();
+  setInterval(refreshSessions, 4000);
+})();
+`;
+}
+//# sourceMappingURL=ui.js.map

package/dist/web/ui.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ui.js","sourceRoot":"","sources":["../../src/web/ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,+EAA+E;AAC/E,MAAM,IAAI,GAAG;;;;;aAKA,CAAC;AAEd,yFAAyF;AACzF,MAAM,EAAE,GAAG,mCAAmC,CAAC;AAE/C,MAAM,UAAU,IAAI;IAClB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA+Jc,IAAI;;;;;;;;;;;;;;;;;;yBAkBF,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiC3B,YAAY,EAAE;;eAED,CAAC;AAChB,CAAC;AAED;;;;;GAKG;AACH,SAAS,YAAY;IACnB,OAAO,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAuDQ,GAAG,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA,+BAA+B,GAAG,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;eAerF,GAAG,GAAG,GAAG,MAAM,CAAC,GAAG,CAAA,KAAK,GAAG,GAAG,GAAG,MAAM,CAAC,GAAG,CAAA,OAAO,GAAG,GAAG,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QnF,CAAC;AACF,CAAC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "koneck",
-  "version": "2.25.76",
+  "version": "2.26.0",
   "description": "Kinetically Orchestrated Neural Execution Engine for Code",
   "type": "module",
   "bin": {