koneck 2.37.0 → 2.38.1

package/dist/web/ui-css.js

@@ -22,6 +22,9 @@ export function css(markUrl) {
   --add-bg:#e4f6ea; --add-ink:#0d5c37; --del-bg:#fdeaea; --del-ink:#8f1c22;
   /* The region a tool is reading, and the exact text it matched inside that region. */
   --attn-bg:#e8f4fb; --attn-hit:#bde4f7;
+  /* Syntax. Light theme. */
+  --syn-com:#6a7d8c; --syn-str:#0a6b4f; --syn-num:#9a4b00; --syn-key:#8a2be2;
+  --syn-typ:#0b6ca8; --syn-fun:#0a5ea8; --syn-pun:#6b7785;
   --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}");
@@ -34,7 +37,11 @@ export function css(markUrl) {
     --violet:#b39cfb;
     --add-bg:#0f2a1e; --add-ink:#7ee0a7; --del-bg:#2b1416; --del-ink:#f4a3a6;
   --attn-bg:#10222c; --attn-hit:#1c3f52;
+  --syn-com:#6b8296; --syn-str:#7ee0a7; --syn-num:#f0b166; --syn-key:#c792ea;
+  --syn-typ:#63c8f0; --syn-fun:#82aaff; --syn-pun:#7a8899;
     --attn-bg:#10222c; --attn-hit:#1c3f52;
+    --syn-com:#6b8296; --syn-str:#7ee0a7; --syn-num:#f0b166; --syn-key:#c792ea;
+    --syn-typ:#63c8f0; --syn-fun:#82aaff; --syn-pun:#7a8899;
     --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
   }
 }
@@ -264,7 +271,9 @@ header{height:47px;flex:0 0 47px;border-bottom:1px solid var(--line);display:fle
 .empty{text-align:center;padding:12vh 0;color:var(--dim);font-size:13px}
 
 /* ── file tree ───────────────────────────────────────────── */
-.split{display:flex;height:100%;min-height:0}
+/* Like #chatview: the tab itself does not scroll, so the panes inside it can. */
+#filesview{overflow:hidden;display:flex}
+.split{display:flex;flex:1;min-height:0;min-width:0}
 .tree{width:300px;flex:0 0 300px;border-right:1px solid var(--line);overflow-y:auto;padding:8px 0}
 .tnode{display:flex;align-items:center;gap:6px;padding:3px 12px;width:100%;text-align:left;
   font-size:12.5px;font-family:var(--mono);color:var(--muted);white-space:nowrap}
@@ -273,7 +282,7 @@ header{height:47px;flex:0 0 47px;border-bottom:1px solid var(--line);display:fle
 .tnode .ic{width:13px;flex:0 0 13px;color:var(--dim);text-align:center}
 .tnode.d .ic{color:var(--cyan)}
 .tnode .sz{margin-left:auto;font-size:10.5px;color:var(--dim)}
-.fileview{flex:1;min-width:0;overflow:auto;display:flex;flex-direction:column}
+.fileview{flex:1;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column}
 .fvhead{position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--line);
   padding:8px 14px;font-family:var(--mono);font-size:12px;display:flex;gap:12px;align-items:center}
 .fvhead .fsz{color:var(--dim);font-size:11px}
@@ -360,7 +369,16 @@ footer[hidden]{display:none}
   background:var(--panel-2);border-radius:var(--radius);padding:9px 10px;
   transition:border-color .14s,box-shadow .14s}
 .cin:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(77,214,232,.13)}
-textarea{flex:1;background:none;border:0;outline:0;resize:none;max-height:200px;
+/*
+ * The composer's textarea, scoped to the composer.
+ *
+ * This was a bare element selector, so its max-height applied to every textarea on the page —
+ * including the file editor, which is why a 21K file was shown 200 pixels tall with 570 pixels of
+ * empty panel under it. A broad element selector setting a property that a later class does not
+ * happen to override is the same trap as [hidden]: measured 766px of panel, 200px of editor, and
+ * flex-grow reading 1 the whole time.
+ */
+.cin 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%;
@@ -468,6 +486,9 @@ textarea::placeholder{color:var(--dim)}
 .setrow .si{flex:1;min-width:0}
 .setrow .sl{font-size:13px;font-weight:500}
 .setrow .sd{font-size:11.5px;color:var(--muted);margin-top:2px}
+/* A type row is a label and a control, side by side. */
+.setrow select{flex:0 0 auto;max-width:52%;padding:6px 9px;border-radius:7px;
+  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-size:12px}
 .setrow .sc{flex:0 0 200px;display:flex;gap:6px;align-items:center}
 .setrow input[type=text],.setrow input[type=number],.setrow select{width:100%;padding:6px 9px;
   border-radius:7px;border:1px solid var(--line);background:var(--panel-2);font-size:12.5px}
@@ -642,6 +663,122 @@ dialog:has(.dlg.wide){max-width:560px}
 .resumed .ri{color:var(--muted);font-family:var(--mono);font-size:12px}
 .resumed .rn{font-size:12px;color:var(--dim);margin-top:7px}
 
+/*
+ * Typography you choose.
+ *
+ * Held as variables on :root so the whole page follows one setting, rather than a font size that
+ * changes the body text and leaves the code at 12.5px. Every size below is relative to --ui so a
+ * single number moves the lot proportionally.
+ */
+:root{--ui:14px; --uifam:system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,sans-serif;
+  --monofam:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; --uihue:none}
+body{font-size:var(--ui);font-family:var(--uifam)}
+/* Applied as a filter so it tints the interface without needing a value per token. */
+body[data-tint="warm"]{filter:sepia(.14) saturate(1.08)}
+body[data-tint="cool"]{filter:hue-rotate(-12deg) saturate(1.06)}
+body[data-tint="high"]{filter:contrast(1.14)}
+body[data-tint="soft"]{filter:contrast(.92) brightness(1.04)}
+
+/* ── a terminal ───────────────────────────────────────────────────────────────────────────── */
+.termwrap{display:flex;flex-direction:column;height:100%;min-height:0}
+.termbar{display:flex;gap:9px;align-items:center;padding:11px 14px;background:var(--panel);
+  border-bottom:1px solid var(--line);flex:0 0 auto}
+.termbar .tprompt{color:var(--cyan);font-family:var(--mono);font-size:14px}
+.termbar input#tcmd{flex:1;min-width:0;padding:8px 11px;border-radius:8px;
+  border:1px solid var(--line);background:var(--panel-2);font-family:var(--mono);font-size:12.5px}
+.termbar .tbg{display:flex;gap:5px;align-items:center;font-size:11.5px;color:var(--muted);
+  white-space:nowrap;cursor:pointer}
+.termbar .trun{padding:8px 15px;border-radius:8px;border:1px solid var(--cyan);color:var(--cyan);
+  background:transparent;cursor:pointer;font-size:12.5px}
+.termbar .trun:hover{background:var(--panel-2)}
+.termsplit{flex:1;display:flex;min-height:0}
+.tjobs{flex:0 0 250px;overflow-y:auto;border-right:1px solid var(--line);background:var(--panel)}
+.tout{flex:1;min-width:0;overflow:auto;padding:12px 14px;font-family:var(--mono);font-size:11.5px;
+  line-height:1.55;white-space:pre-wrap;word-break:break-word}
+.jrow{padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;font-size:12px}
+.jrow:hover{background:var(--panel-2)}
+.jrow.on{background:var(--panel-2);box-shadow:inset 2px 0 0 var(--cyan)}
+.jrow .jc{font-family:var(--mono);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;
+  white-space:nowrap;color:var(--ink)}
+.jrow .jm{display:flex;gap:7px;align-items:center;margin-top:4px;font-size:10.5px;color:var(--dim)}
+.jrow .js{padding:1px 6px;border-radius:999px;border:1px solid var(--line)}
+.jrow .js.running{color:var(--cyan);border-color:var(--cyan)}
+.jrow .js.exited{color:var(--green)}
+.jrow .js.failed,.jrow .js.killed{color:var(--red)}
+.jrow .jk{margin-left:auto;background:none;border:0;color:var(--dim);cursor:pointer;font-size:11px}
+.jrow .jk:hover{color:var(--red)}
+.tout .oe{color:var(--red)}
+
+/* ── the page, as it really renders ───────────────────────────────────────────────────────── */
+.pvwrap{display:flex;flex-direction:column;height:100%;min-height:0}
+.pvbar{display:flex;gap:8px;align-items:center;padding:11px 14px;background:var(--panel);
+  border-bottom:1px solid var(--line);flex:0 0 auto}
+.pvbar input{flex:1;min-width:0;padding:8px 11px;border-radius:8px;border:1px solid var(--line);
+  background:var(--panel-2);font-family:var(--mono);font-size:12.5px}
+.pvbar .pvgo{padding:8px 15px;border-radius:8px;border:1px solid var(--cyan);color:var(--cyan);
+  background:transparent;cursor:pointer;font-size:12.5px}
+.pvbar .pvbtn{padding:8px 12px;border-radius:8px;border:1px solid var(--line);color:var(--muted);
+  background:transparent;cursor:pointer;font-size:12px}
+.pvbar .pvbtn:hover{color:var(--ink)}
+.pvinfo{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+  max-width:24%}
+.pvbody{flex:1;overflow:auto;min-height:0;display:flex;flex-direction:column;align-items:center;
+  padding:16px;background:var(--panel-2)}
+/* The screenshot is the page. Clicking it clicks the page at the same point. */
+.pvshot{max-width:100%;border:1px solid var(--line);border-radius:8px;cursor:crosshair;
+  background:#fff;box-shadow:var(--shadow)}
+.pvhint{margin-top:11px;font-size:11.5px;color:var(--dim);text-align:center;line-height:1.6}
+.pvnone{padding:40px 20px;color:var(--dim);font-size:13px;text-align:center;line-height:1.7;
+  max-width:520px}
+
+/* ── an editable file ─────────────────────────────────────────────────────────────────────── */
+.edbar{display:flex;gap:9px;align-items:center;padding:8px 14px;background:var(--panel);
+  border-bottom:1px solid var(--line);flex:0 0 auto;font-size:11.5px}
+.edbar .ebtn{padding:5px 11px;border-radius:7px;border:1px solid var(--line);background:transparent;
+  color:var(--muted);cursor:pointer;font-size:11.5px}
+.edbar .ebtn:hover{color:var(--ink)}
+.edbar .ebtn.save{border-color:var(--cyan);color:var(--cyan)}
+.edbar .ebtn:disabled{opacity:.45;cursor:default}
+.edbar .est{margin-left:auto;color:var(--dim);white-space:nowrap}
+.edbar .est.dirty{color:var(--amber)}
+.edbar .est.bad{color:var(--red)}
+/*
+ * An editor that is coloured and numbered, and still a real textarea.
+ *
+ * The textarea sits on top with transparent text and a visible caret; the coloured copy is a <pre>
+ * directly behind it, and the line numbers are a third column. All three share the same font,
+ * size, line height and padding, and the textarea's scroll drives the other two — if any of those
+ * differ by a pixel the colours drift off the characters they belong to.
+ *
+ * Done this way so undo and redo stay the browser's own. A contenteditable div with syntax colours
+ * would look the same and break every shortcut a person already knows.
+ */
+.ed{flex:1;display:flex;min-height:0;background:var(--bg)}
+.ed .egut{flex:0 0 auto;overflow:hidden;padding:12px 10px 12px 14px;text-align:right;
+  color:var(--dim);background:var(--panel);border-right:1px solid var(--line);user-select:none;
+  font-family:var(--mono);font-size:12.5px;line-height:1.5;font-variant-numeric:tabular-nums;
+  white-space:pre}
+.estack{position:relative;flex:1;min-width:0}
+.ehl,.edit{position:absolute;inset:0;margin:0;padding:12px 14px;border:0;
+  font-family:var(--mono);font-size:12.5px;line-height:1.5;tab-size:2;
+  white-space:pre;overflow:auto;word-break:normal;overflow-wrap:normal}
+.ehl{pointer-events:none;color:var(--ink)}
+/* Transparent text over the coloured copy, with the caret and the selection still visible. */
+.edit{background:transparent;color:transparent;caret-color:var(--cyan);resize:none;outline:none;
+  max-height:none}
+.edit::selection{background:var(--attn-hit);color:transparent}
+
+/* The colours. Chosen to read at 12.5px in both themes rather than to look like a screenshot. */
+.tk-com{color:var(--syn-com);font-style:italic}
+.tk-str{color:var(--syn-str)}
+.tk-num{color:var(--syn-num)}
+.tk-key{color:var(--syn-key)}
+.tk-typ{color:var(--syn-typ)}
+.tk-fun{color:var(--syn-fun)}
+.tk-pun{color:var(--syn-pun)}
+.tk-tag{color:var(--syn-key)}
+.tk-att{color:var(--syn-fun)}
+
 /* Carrying on from a transcript, offered in the bar that says it is read only. */
 .readonly .rgap{flex:1}
 .readonly .rwhy{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;

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

@@ -1 +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;;;;;;;;;;;;gBAYO,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8nBtB,CAAC;AACF,CAAC"}
+{"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;;;;;;;;;;;;;;;gBAeO,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAowBtB,CAAC;AACF,CAAC"}

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

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

package/dist/web/ui.js

@@ -45,6 +45,8 @@ export function page() {
       <button class="tab" id="tab-changes">Changes</button>
       <button class="tab" id="tab-timing">Timing</button>
       <button class="tab" id="tab-files">Files</button>
+      <button class="tab" id="tab-terminal">Terminal</button>
+      <button class="tab" id="tab-preview">Preview</button>
       <button class="tab" id="tab-search">Search</button>
       <button class="tab" id="tab-review">Review</button>
       <button class="tab" id="tab-refactor">Refactor</button>
@@ -108,6 +110,39 @@ export function page() {
     </div>
   </div>
 
+  <!-- A terminal. Commands you run yourself, in the foreground or left running behind. -->
+  <div class="view" id="terminalview" hidden>
+    <div class="termwrap">
+      <div class="termbar">
+        <span class="tprompt">$</span>
+        <input id="tcmd" placeholder="npm test, git status, npm run dev&hellip;"
+               autocomplete="off" spellcheck="false">
+        <label class="tbg" title="Leave it running — for a dev server, or anything that does not exit">
+          <input type="checkbox" id="tbackground"> background
+        </label>
+        <button class="trun" id="trun">Run</button>
+      </div>
+      <div class="termsplit">
+        <div class="tjobs" id="tjobs"></div>
+        <div class="tout" id="tout"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- The same browser the agent drives, so watching it and reaching in mean the same page. -->
+  <div class="view" id="previewview" hidden>
+    <div class="pvwrap">
+      <div class="pvbar">
+        <input id="pvurl" placeholder="http://localhost:3000" autocomplete="off" spellcheck="false">
+        <button class="pvgo" id="pvgo">Open</button>
+        <button class="pvbtn" id="pvrefresh" title="Read the page again">Refresh</button>
+        <button class="pvbtn" id="pvclose" title="Shut the browser down">Close</button>
+        <span class="pvinfo" id="pvinfo"></span>
+      </div>
+      <div class="pvbody" id="pvbody"></div>
+    </div>
+  </div>
+
   <div class="view" id="reviewview" hidden></div>
   <div class="view" id="refactorview" hidden></div>
   <div class="view" id="restoreview" hidden></div>

package/dist/web/ui.js.map

@@ -1 +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,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA6OF,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;EAC7C,YAAY,EAAE;;eAED,CAAC;AAChB,CAAC"}
+{"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,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAgRF,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;EAC7C,YAAY,EAAE;;eAED,CAAC;AAChB,CAAC"}

package/package.json

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