koneck 2.25.76 → 2.27.0

package/dist/web/ui-css.js

@@ -0,0 +1,284 @@
+/**
+ * The stylesheet, and the three themes.
+ *
+ * Every colour is a token defined once on `:root`, so a theme is a list of token values rather
+ * than a second stylesheet. Three states, which is what "light, dark and system" actually needs:
+ * an explicit choice writes `data-theme` on the root and wins; with nothing written, the browser's
+ * own preference decides.
+ *
+ * Contrast was asked for specifically — "font visible well in dark theme". The dark palette's body
+ * text is #e6f1f5 on #0d1418, which is about 14:1, and the muted tone is #93aab5 at about 7:1;
+ * both clear WCAG AA for body text with room to spare. The first version used #7f9aa6 for anything
+ * secondary, which measures 4.6:1 — passable on paper and genuinely hard to read on a dim screen.
+ */
+export function css(markUrl) {
+    return `
+:root{
+  /* light, and the default when nothing has been chosen */
+  --bg:#f7f9fa; --panel:#ffffff; --panel-2:#eef2f4; --line:#d5dee2; --line-2:#c3d0d6;
+  --ink:#0f1c22; --muted:#4a606b; --dim:#6b8390;
+  --cyan:#0d7f92; --cyan-ink:#ffffff; --amber:#8a5a00; --green:#0f7a4a; --red:#b4232a;
+  --violet:#6d4bc4;
+  --add-bg:#e4f6ea; --add-ink:#0d5c37; --del-bg:#fdeaea; --del-ink:#8f1c22;
+  --shadow:0 1px 2px rgba(15,28,34,.07), 0 8px 24px rgba(15,28,34,.05);
+  --radius:10px; --mono:ui-monospace,'SF Mono',Menlo,Consolas,'DejaVu Sans Mono',monospace;
+  --mark:url("${markUrl}");
+}
+@media (prefers-color-scheme: dark){
+  :root:not([data-theme="light"]){
+    --bg:#0d1418; --panel:#131e24; --panel-2:#1a2932; --line:#24363f; --line-2:#2f454f;
+    --ink:#e6f1f5; --muted:#93aab5; --dim:#6f8894;
+    --cyan:#4dd6e8; --cyan-ink:#04181c; --amber:#e8b04d; --green:#57d99a; --red:#ef767b;
+    --violet:#b39cfb;
+    --add-bg:#0f2a1e; --add-ink:#7ee0a7; --del-bg:#2b1416; --del-ink:#f4a3a6;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
+  }
+}
+:root[data-theme="dark"]{
+  --bg:#0d1418; --panel:#131e24; --panel-2:#1a2932; --line:#24363f; --line-2:#2f454f;
+  --ink:#e6f1f5; --muted:#93aab5; --dim:#6f8894;
+  --cyan:#4dd6e8; --cyan-ink:#04181c; --amber:#e8b04d; --green:#57d99a; --red:#ef767b;
+  --violet:#b39cfb;
+  --add-bg:#0f2a1e; --add-ink:#7ee0a7; --del-bg:#2b1416; --del-ink:#f4a3a6;
+  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
+}
+
+*{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,'Helvetica Neue',sans-serif;
+  display:flex;overflow:hidden;-webkit-font-smoothing:antialiased}
+button,input,textarea,select{font:inherit;color:inherit}
+button{background:none;border:0;cursor:pointer}
+::-webkit-scrollbar{width:10px;height:10px}
+::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:2px solid var(--bg)}
+::-webkit-scrollbar-track{background:transparent}
+:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
+
+/* The mark, in whatever colour it inherits. */
+.mark{display:block;background:currentColor;
+  -webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
+
+/* ── sidebar ─────────────────────────────────────────────── */
+aside{width:272px;flex:0 0 272px;background:var(--panel);border-right:1px solid var(--line);
+  display:flex;flex-direction:column;min-height:0}
+aside.hide{display:none}
+.brand{display:flex;align-items:center;gap:10px;padding:15px 15px 12px}
+.brand .mark{width:26px;height:25px;color:var(--cyan)}
+.brand b{font-size:13px;letter-spacing:.15em;font-weight:600}
+.brand .tag{font-size:9px;letter-spacing:.12em;color:var(--dim);
+  border:1px solid var(--line);border-radius:4px;padding:2px 5px}
+.newbtn{margin:0 12px 12px;padding:9px;border:1px solid var(--line);background:var(--panel-2);
+  border-radius:var(--radius);display:flex;align-items:center;justify-content:center;gap:7px;
+  transition:border-color .14s,color .14s;font-weight:500}
+.newbtn:hover{border-color:var(--cyan);color:var(--cyan)}
+.shead{padding:9px 15px 5px;font-size:10px;letter-spacing:.12em;color:var(--dim);
+  text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
+.slist{overflow-y:auto;flex:1;min-height:0;padding:0 8px 10px}
+.srow{padding:8px 10px;border-radius:8px;margin-bottom:2px;border:1px solid transparent;
+  cursor:pointer;width:100%;text-align:left;display:block}
+.srow:hover{background:var(--panel-2)}
+.srow.on{background:var(--panel-2);border-color:var(--line-2)}
+.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;
+  white-space:nowrap;overflow:hidden}
+.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}
+.dot.past{background:var(--dim)}
+@keyframes pulse{50%{opacity:.3}}
+.foot{border-top:1px solid var(--line);padding:9px 12px;font-size:10.5px;color:var(--dim);
+  display:flex;justify-content:space-between;align-items:center;gap:8px}
+.themebtn{border:1px solid var(--line);border-radius:7px;padding:3px 8px;font-size:10.5px;
+  color:var(--muted)}
+.themebtn:hover{border-color:var(--cyan);color:var(--cyan)}
+
+/* ── main ────────────────────────────────────────────────── */
+main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
+header{height:47px;flex:0 0 47px;border-bottom:1px solid var(--line);display:flex;
+  align-items:center;gap:8px;padding:0 14px;background:var(--panel);font-size:12px}
+.iconbtn{width:28px;height:28px;border-radius:7px;border:1px solid transparent;color:var(--muted);
+  display:grid;place-items:center;font-size:15px}
+.iconbtn:hover{background:var(--panel-2);color:var(--ink)}
+.tabs{display:flex;gap:2px;background:var(--panel-2);border-radius:8px;padding:2px}
+.tab{padding:4px 12px;border-radius:6px;font-size:12px;color:var(--muted)}
+.tab.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
+.tab .n{color:var(--dim);margin-left:5px;font-variant-numeric:tabular-nums}
+.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;max-width:230px}
+.pill:hover{border-color:var(--cyan);color:var(--ink)}
+.pill b{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.spacer{flex:1}
+.stat{color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
+.stat b{color:var(--muted);font-weight:500}
+.stopbtn{border:1px solid var(--red);color:var(--red);border-radius:999px;padding:4px 11px}
+
+.view{flex:1;overflow-y:auto;min-height:0}
+.view[hidden]{display:none}
+.wrap{max-width:840px;margin:0 auto;padding:24px}
+.hero{text-align:center;padding:12vh 0 0;color:var(--muted)}
+.hero .mark{width:64px;height:63px;color:var(--cyan);margin:0 auto 14px}
+.hero h1{font-size:22px;margin:0;color:var(--ink);font-weight:600}
+.hero p{font-size:13px;margin:8px 0 0}
+.hero .ex{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
+.hero .ex button{border:1px solid var(--line);border-radius:999px;padding:5px 13px;
+  font-size:12px;color:var(--muted);background:var(--panel)}
+.hero .ex button:hover{border-color:var(--cyan);color:var(--cyan)}
+
+/* ── transcript ──────────────────────────────────────────── */
+.msg{margin-bottom:18px}
+.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:7px;font-size:10.5px;letter-spacing:.11em;
+  color:var(--dim);text-transform:uppercase;margin-bottom:7px}
+.who .mark{width:13px;height:13px;color:var(--cyan)}
+.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:14.5px;margin:16px 0 6px}
+.reply strong{font-weight:600}
+.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);font-weight:600}
+
+.tool{border:1px solid var(--line);border-left:3px 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;font-size:12.5px;width:100%;
+  text-align:left}
+.tool .th:hover{background:var(--panel-2)}
+.tool .nm{font-family:var(--mono);color:var(--cyan);font-size:12px}
+.tool .dt{color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  font-family:var(--mono);font-size:11.5px}
+.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:320px;overflow:auto}
+.think{border:1px solid var(--line);border-left:3px solid var(--violet);border-radius:8px;
+  padding:9px 12px;margin:8px 0;color:var(--violet);font-size:12.5px;white-space:pre-wrap;
+  max-height:210px;overflow:auto;background:var(--panel)}
+.notice{border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:8px;
+  padding:10px 13px;margin:9px 0;font-size:12.5px;color:var(--muted);white-space:pre-wrap;
+  background:var(--panel)}
+.notice.info{border-left-color:var(--cyan)}
+.err{border:1px solid var(--red);border-left:3px solid var(--red);border-radius:8px;
+  padding:10px 13px;margin:9px 0;font-size:12.5px;color:var(--red);white-space:pre-wrap;
+  background:var(--panel)}
+
+.plan{border:1px solid var(--line);border-radius:8px;background:var(--panel);margin:9px 0;
+  padding:11px 13px;font-size:12.5px}
+.plan h4{margin:0 0 8px;font-size:10.5px;letter-spacing:.11em;color:var(--dim);
+  text-transform:uppercase;display:flex;justify-content:space-between}
+.step{display:flex;gap:9px;padding:2px 0;color:var(--muted)}
+.step .bx{width:14px;color:var(--dim);flex:0 0 14px;text-align:center;font-family:var(--mono)}
+.step.done{color:var(--dim);text-decoration:line-through} .step.done .bx{color:var(--green)}
+.step.doing{color:var(--ink);font-weight:500} .step.doing .bx{color:var(--amber)}
+.step.blocked .bx{color:var(--red)}
+
+.ask{border:1px solid var(--amber);border-radius:var(--radius);background:var(--panel);
+  padding:12px 14px;margin:11px 0;box-shadow:var(--shadow)}
+.ask .q{font-size:13px;margin-bottom:5px;font-weight:500}
+.ask .a{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-bottom:11px;
+  white-space:pre-wrap;max-height:140px;overflow:auto;background:var(--panel-2);
+  border-radius:6px;padding:7px 9px}
+.ask .btns{display:flex;gap:8px}
+.ask .btns button{padding:6px 15px;border-radius:7px;border:1px solid var(--line)}
+.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)}}
+
+/* ── changes ─────────────────────────────────────────────── */
+.chead{display:flex;align-items:center;gap:14px;margin-bottom:14px;font-size:12.5px;
+  color:var(--muted);flex-wrap:wrap}
+.chead .plus{color:var(--green);font-variant-numeric:tabular-nums}
+.chead .minus{color:var(--red);font-variant-numeric:tabular-nums}
+.file{border:1px solid var(--line);border-radius:8px;background:var(--panel);margin-bottom:10px;
+  overflow:hidden}
+.file .fh{display:flex;align-items:center;gap:10px;padding:9px 12px;width:100%;text-align:left;
+  font-size:12.5px}
+.file .fh:hover{background:var(--panel-2)}
+.file .kind{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;
+  border-radius:4px;border:1px solid var(--line);color:var(--muted);flex:0 0 auto}
+.file .kind.added{color:var(--green);border-color:var(--green)}
+.file .kind.deleted{color:var(--red);border-color:var(--red)}
+.file .fp{font-family:var(--mono);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  direction:rtl;text-align:left}
+.file .cnt{font-size:11px;font-variant-numeric:tabular-nums;flex:0 0 auto}
+.diff{border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px;line-height:1.45;
+  overflow-x:auto;max-height:520px;overflow-y:auto}
+.diff div{padding:0 12px;white-space:pre}
+.diff .a{background:var(--add-bg);color:var(--add-ink)}
+.diff .d{background:var(--del-bg);color:var(--del-ink)}
+.diff .c{color:var(--muted)}
+.diff .h{color:var(--dim);background:var(--panel-2);padding:2px 12px}
+
+/* ── timing ──────────────────────────────────────────────── */
+.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;
+  margin-bottom:18px}
+.card{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:11px 13px}
+.card .k{font-size:10px;letter-spacing:.11em;color:var(--dim);text-transform:uppercase}
+.card .v{font-size:19px;margin-top:3px;font-variant-numeric:tabular-nums;font-weight:600}
+.card .s{font-size:11px;color:var(--muted);margin-top:2px}
+.bars{border:1px solid var(--line);border-radius:8px;background:var(--panel);overflow:hidden}
+.brow{display:flex;align-items:center;gap:10px;padding:6px 12px;font-size:12px;
+  border-bottom:1px solid var(--line)}
+.brow:last-child{border-bottom:0}
+.brow .lbl{width:118px;flex:0 0 118px;color:var(--muted);font-family:var(--mono);font-size:11px;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.brow .track{flex:1;height:15px;background:var(--panel-2);border-radius:4px;overflow:hidden;
+  display:flex;min-width:60px}
+.brow .seg{height:100%}
+.brow .seg.wait{background:var(--violet);opacity:.55}
+.brow .seg.gen{background:var(--cyan)}
+.brow .seg.tool{background:var(--amber)}
+.brow .val{width:74px;flex:0 0 74px;text-align:right;color:var(--dim);
+  font-variant-numeric:tabular-nums;font-size:11px}
+.legend{display:flex;gap:16px;margin:10px 0 0;font-size:11px;color:var(--muted)}
+.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px}
+.empty{text-align:center;padding:12vh 0;color:var(--dim);font-size:13px}
+
+/* ── composer ────────────────────────────────────────────── */
+footer{flex:0 0 auto;border-top:1px solid var(--line);background:var(--panel);padding:11px 0 13px}
+footer[hidden]{display:none}
+.cbox{max-width:840px;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:border-color .14s}
+.cin:focus-within{border-color:var(--cyan)}
+textarea{flex:1;background:none;border:0;outline:0;resize:none;max-height:200px;
+  line-height:1.5;font-size:14px}
+textarea::placeholder{color:var(--dim)}
+.send{width:31px;height:31px;flex:0 0 31px;border-radius:50%;
+  background:var(--cyan);color:var(--cyan-ink);font-size:15px;display:grid;place-items:center}
+.send:disabled{background:var(--line);color:var(--dim);cursor:not-allowed}
+.chint{display:flex;gap:13px;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)}
+.readonly{max-width:840px;margin:0 auto;padding:0 24px;font-size:12px;color:var(--dim);
+  display:flex;gap:9px;align-items:center}
+
+dialog{border:1px solid var(--line);background:var(--panel);color:var(--ink);
+  border-radius:var(--radius);padding:0;max-width:450px;width:92%;box-shadow:var(--shadow)}
+dialog::backdrop{background:rgba(0,0,0,.5)}
+.dlg{padding:18px}
+.dlg h3{margin:0 0 5px;font-size:15px}
+.dlg p{margin:0 0 14px;color:var(--muted);font-size:12.5px}
+.dlg label{display:block;font-size:10.5px;letter-spacing:.09em;color:var(--dim);
+  text-transform:uppercase;margin:0 0 4px}
+.dlg input,.dlg select{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--line);
+  background:var(--panel-2);margin-bottom:11px}
+.dlg .row{display:flex;gap:8px;justify-content:flex-end}
+.dlg .row button{padding:7px 15px;border-radius:8px;border:1px solid var(--line)}
+.dlg .go{border-color:var(--cyan);color:var(--cyan)}
+
+@media (max-width:820px){
+  aside{position:absolute;z-index:5;height:100%;box-shadow:var(--shadow)}
+  .wrap,.cbox{padding-left:16px;padding-right:16px}
+}
+`;
+}
+//# sourceMappingURL=ui-css.js.map

package/dist/web/ui-css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-css.js","sourceRoot":"","sources":["../../src/web/ui-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,GAAG,CAAC,OAAe;IACjC,OAAO;;;;;;;;;;gBAUO,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiQtB,CAAC;AACF,CAAC"}

package/dist/web/ui.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The page, assembled.
+ *
+ * One HTML document with its styles and script inline, served from memory. No build step and
+ * nothing fetched from the network: KONECK is installed with `npm i -g koneck`, so anything needing
+ * a second toolchain would be broken for most people on the day they first tried it — and a page
+ * that pulls a font from a CDN does not work on the machine most likely to be running a local
+ * model, which is one that is offline.
+ */
+export declare function page(): string;
+//# sourceMappingURL=ui.d.ts.map

package/dist/web/ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/web/ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH,wBAAgB,IAAI,IAAI,MAAM,CAsG7B"}

package/dist/web/ui.js

@@ -0,0 +1,116 @@
+/**
+ * The page, assembled.
+ *
+ * One HTML document with its styles and script inline, served from memory. No build step and
+ * nothing fetched from the network: KONECK is installed with `npm i -g koneck`, so anything needing
+ * a second toolchain would be broken for most people on the day they first tried it — and a page
+ * that pulls a font from a CDN does not work on the machine most likely to be running a local
+ * model, which is one that is offline.
+ */
+import { MARK_MASK } from './mark.js';
+import { css } from './ui-css.js';
+import { clientScript } from './ui-client.js';
+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">
+<meta name="color-scheme" content="light dark">
+<title>KONECK</title>
+<style>${css(MARK_MASK)}</style>
+</head><body>
+
+<aside id="side">
+  <div class="brand">
+    <div class="mark"></div>
+    <b>KONECK</b>
+    <span class="tag">web</span>
+  </div>
+  <button class="newbtn" id="new">New session</button>
+  <div class="slist" id="slist"></div>
+  <div class="foot">
+    <span id="wsname" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">&mdash;</span>
+    <button class="themebtn" id="theme">system</button>
+    <span id="conn">offline</span>
+  </div>
+</aside>
+
+<main>
+  <header>
+    <button class="iconbtn" id="sidebtn" title="Show or hide the sidebar">&#9776;</button>
+    <div class="tabs">
+      <button class="tab on" id="tab-chat">Chat</button>
+      <button class="tab" id="tab-changes">Changes</button>
+      <button class="tab" id="tab-timing">Timing</button>
+    </div>
+    <div class="spacer"></div>
+    <button class="pill" id="pprov">provider <b>&mdash;</b></button>
+    <button class="pill" id="pmodel">model <b>&mdash;</b></button>
+    <div class="stat" id="stat">&mdash;</div>
+    <button class="stopbtn" id="stop" hidden>stop</button>
+  </header>
+
+  <div class="view" id="chatview">
+    <div class="wrap" id="stream">
+      <div class="hero">
+        <div class="mark"></div>
+        <h1>Into the workspace</h1>
+        <p>Everything the CLI does, from here. Ask for a change and watch it happen.</p>
+        <div class="ex">
+          <button>What is in this project?</button>
+          <button>Find the slowest test and explain why</button>
+          <button>Add a README with real usage examples</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="view" id="changesview" hidden></div>
+  <div class="view" id="timingview" hidden></div>
+
+  <footer id="composer">
+    <div class="cbox">
+      <div class="cin">
+        <textarea id="ta" rows="1" placeholder="Describe what you want to build&hellip;"></textarea>
+        <button class="send" id="send" disabled title="Send">&uarr;</button>
+      </div>
+      <div class="chint">
+        <span><kbd>Enter</kbd> send</span>
+        <span><kbd>Shift</kbd>+<kbd>Enter</kbd> newline</span>
+      </div>
+    </div>
+  </footer>
+  <footer id="readonlybar" hidden>
+    <div class="readonly">
+      <span>Finished session, read only &mdash;</span>
+      <b id="readonlywhat" style="font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></b>
+    </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>
+  <label for="tokin">Token</label>
+  <input id="tokin" placeholder="paste it here" 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>
+  <label for="mprov">Provider</label>
+  <select id="mprov"></select>
+  <label for="mmodel">Model</label>
+  <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>`;
+}
+//# sourceMappingURL=ui.js.map

package/dist/web/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../../src/web/ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,UAAU,IAAI;IAClB,OAAO;;;;;;;SAOA,GAAG,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2FrB,YAAY,EAAE;;eAED,CAAC;AAChB,CAAC"}

package/package.json

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