clixad 0.0.1-beta.6 → 0.0.1-beta.7

package/dist/clixad.mjs

@@ -1504,6 +1504,10 @@ function centered(rendered, visibleW, colW) {
   const lead = Math.max(0, Math.floor((colW - visibleW) / 2));
   return cell(" ".repeat(lead) + rendered, lead + visibleW);
 }
+function bannerTip(index) {
+  const i = index ?? Math.floor(Math.random() * BANNER_TIPS.length);
+  return BANNER_TIPS[(i % BANNER_TIPS.length + BANNER_TIPS.length) % BANNER_TIPS.length];
+}
 function earnedLabel(opts) {
   return `$${opts.earnedUsdToday.toFixed(2)}/$${opts.maxRewardUsd.toFixed(2)} today`;
 }
@@ -1515,14 +1519,19 @@ function welcomeBanner(opts) {
   const cwd = opts.cwd.replace(homedir5(), "~").replace(/\\/g, "/");
   const welcome = opts.name ? `Welcome back, ${truncate(opts.name, 18)}!` : "Welcome to Clixad!";
   const duck = duckLines();
-  const model = truncate(opts.model, leftW - 4);
   const home = truncate(cwd, leftW);
+  const hint = bannerTip(opts.tipIndex);
+  const hintDesc = truncate(hint.desc, Math.max(1, leftW - 3 - hint.key.length));
   const left = [
     centered(BOLD + TEXT + welcome + R2, welcome.length, leftW),
     cell("", 0),
     ...duck.map((d) => centered(d, DUCK_W, leftW)),
     cell("", 0),
-    centered(MANGO + "\u25C6 " + R2 + TEXT + model + R2, 2 + model.length, leftW),
+    centered(
+      MANGO + "\u25C6 " + R2 + BOLD + TEXT + hint.key + R2 + FAINT + " " + hintDesc + R2,
+      2 + hint.key.length + 1 + hintDesc.length,
+      leftW
+    ),
     centered(FAINT + home + R2, home.length, leftW)
   ];
   const tip = (k, d) => cell(MANGO + k + R2 + FAINT + " " + d + R2, k.length + 1 + d.length);
@@ -1553,10 +1562,11 @@ function welcomeBanner(opts) {
 }
 function compactBanner(opts) {
   const welcome = opts.name ? `Welcome back, ${opts.name}!` : "Welcome to Clixad!";
+  const hint = bannerTip(opts.tipIndex);
   return duckLines().map((d) => "  " + d).join("\n") + `
 
   ${BOLD}${TEXT}${welcome}${R2}
-  ${MANGO}\u25C6${R2} ${opts.model}  ${FAINT}\xB7${R2} ${opts.balance.toLocaleString("en-US")} credits
+  ${MANGO}\u25C6${R2} ${BOLD}${TEXT}${hint.key}${R2} ${FAINT}${hint.desc}${R2}  ${FAINT}\xB7${R2} ${opts.balance.toLocaleString("en-US")} credits
 `;
 }
 function clearScreen() {
@@ -1568,7 +1578,7 @@ function clearScreen() {
 function visibleLength(s) {
   return s.replace(/\x1b\[[0-9;]*m/g, "").length;
 }
-var R2, BOLD, fg, bg, MANGO, TEXT, MUTED, FAINT, PAL, DUCK, DUCK_W, cell, padTo, truncate, MIN_BANNER_WIDTH, RIGHT_MAX;
+var R2, BOLD, fg, bg, MANGO, TEXT, MUTED, FAINT, PAL, DUCK, DUCK_W, cell, padTo, truncate, BANNER_TIPS, MIN_BANNER_WIDTH, RIGHT_MAX;
 var init_banner = __esm({
   "src/banner.ts"() {
     "use strict";
@@ -1610,6 +1620,15 @@ var init_banner = __esm({
     cell = (text, w) => ({ text, w });
     padTo = (c2, width) => (c2?.text ?? "") + " ".repeat(Math.max(0, width - (c2?.w ?? 0)));
     truncate = (s, max) => s.length > max ? s.slice(0, max - 1) + "\u2026" : s;
+    BANNER_TIPS = [
+      { key: "/init", desc: "make a CLIXAD.md" },
+      { key: "shift+tab", desc: "switch mode" },
+      { key: "@file", desc: "add a file to context" },
+      { key: "ctrl+o", desc: "expand tool output" },
+      { key: "esc", desc: "stop the current turn" },
+      { key: "/compact", desc: "free up context" },
+      { key: "/earn", desc: "top up credits" }
+    ];
     MIN_BANNER_WIDTH = 66;
     RIGHT_MAX = 34;
   }
@@ -2158,6 +2177,45 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function lineCount(text, cols) {
   return text.split("\n").reduce((n, line2) => n + Math.max(1, Math.ceil(visibleLength(line2) / Math.max(1, cols))), 0);
 }
+function tailRows(text, cols, max) {
+  if (max <= 0) return "";
+  const width = Math.max(1, cols);
+  const lines = text.split("\n");
+  const kept = [];
+  let used = 0;
+  for (let i = lines.length - 1; i >= 0; i--) {
+    const line2 = lines[i];
+    const h = Math.max(1, Math.ceil(visibleLength(line2) / width));
+    if (used + h <= max) {
+      kept.unshift(line2);
+      used += h;
+      continue;
+    }
+    const room = max - used;
+    if (room > 0) kept.unshift(line2.slice(-(room * width)));
+    break;
+  }
+  return kept.join("\n");
+}
+function headRows(text, cols, max) {
+  if (max <= 0) return "";
+  const width = Math.max(1, cols);
+  const lines = text.split("\n");
+  const kept = [];
+  let used = 0;
+  for (const line2 of lines) {
+    const h = Math.max(1, Math.ceil(visibleLength(line2) / width));
+    if (used + h <= max) {
+      kept.push(line2);
+      used += h;
+      continue;
+    }
+    const room = max - used;
+    if (room > 0) kept.push(line2.slice(0, room * width));
+    break;
+  }
+  return kept.join("\n");
+}
 function entryHeight(entry, cols) {
   const margin = entry.kind === "banner" ? 0 : 1;
   switch (entry.kind) {
@@ -2204,7 +2262,7 @@ function EntryView({ entry }) {
       ) });
   }
 }
-var MANGO3, MANGO_BRIGHT;
+var MANGO3, MANGO_BRIGHT, SLATE, MODE_STYLE;
 var init_views = __esm({
   "src/tui/views.tsx"() {
     "use strict";
@@ -2212,6 +2270,12 @@ var init_views = __esm({
     init_markdown();
     MANGO3 = "#f5b841";
     MANGO_BRIGHT = "#ffcf6b";
+    SLATE = "#8b98ae";
+    MODE_STYLE = {
+      normal: { color: SLATE, glyph: "\u23F5" },
+      acceptEdits: { color: "#7ee787", glyph: "\u23F5\u23F5" },
+      plan: { color: "#79c0ff", glyph: "\u23F8" }
+    };
   }
 });
 
@@ -2289,13 +2353,34 @@ function App({ client, config, wallet, session, initialTask }) {
   const lastOutputRef = useRef("");
   const runningToolRef = useRef(null);
   const pendingTaskRef = useRef(null);
+  const deltaBufRef = useRef("");
+  const deltaTimerRef = useRef(null);
   const sponsorRef = useRef(sponsorSource());
   const sponsorIdxRef = useRef(0);
   const sponsorPrevRef = useRef(void 0);
   const tallyRef = useRef(createTally());
+  const heightCacheRef = useRef(/* @__PURE__ */ new Map());
   const push = useCallback((e) => {
     setEntries((prev) => [...prev, { ...e, id: idRef.current++ }]);
   }, []);
+  const flushDelta = useCallback(() => {
+    if (deltaTimerRef.current) {
+      clearTimeout(deltaTimerRef.current);
+      deltaTimerRef.current = null;
+    }
+    const buffered = deltaBufRef.current;
+    if (!buffered) return;
+    deltaBufRef.current = "";
+    setLive((l) => ({ ...l ?? { text: "" }, text: (l?.text ?? "") + buffered }));
+  }, []);
+  const dropDelta = useCallback(() => {
+    if (deltaTimerRef.current) {
+      clearTimeout(deltaTimerRef.current);
+      deltaTimerRef.current = null;
+    }
+    deltaBufRef.current = "";
+  }, []);
+  useEffect(() => dropDelta, [dropDelta]);
   useEffect(() => {
     const files = contextRef.current.files;
     if (files.length) push({ kind: "notice", text: `  context: ${files.join(", ")}` });
@@ -2351,10 +2436,13 @@ function App({ client, config, wallet, session, initialTask }) {
   }, []);
   const handleEvent = useCallback(
     (event) => {
+      if (event.type === "delta") {
+        deltaBufRef.current += event.text;
+        if (!deltaTimerRef.current) deltaTimerRef.current = setTimeout(flushDelta, DELTA_FLUSH_MS);
+        return;
+      }
+      flushDelta();
       switch (event.type) {
-        case "delta":
-          setLive((l) => ({ ...l ?? { text: "" }, text: (l?.text ?? "") + event.text }));
-          return;
         case "message":
           push({ kind: "assistant", text: event.content });
           setLive((l) => ({ ...l ?? { text: "" }, text: "" }));
@@ -2394,7 +2482,7 @@ function App({ client, config, wallet, session, initialTask }) {
           return;
       }
     },
-    [cols, push]
+    [cols, flushDelta, push]
   );
   const runTurn2 = useCallback(
     async (task) => {
@@ -2474,12 +2562,13 @@ function App({ client, config, wallet, session, initialTask }) {
         }
       } finally {
         abortRef.current = null;
+        dropDelta();
         setLive(null);
         setBusy(false);
         setSponsor(null);
       }
     },
-    [client, contextWindow, handleEvent, model, nextSponsor, permit, push, root, session?.title]
+    [client, contextWindow, dropDelta, handleEvent, model, nextSponsor, permit, push, root, session?.title]
   );
   const stopCurrent = useCallback(() => {
     abortRef.current?.abort();
@@ -2860,62 +2949,95 @@ function App({ client, config, wallet, session, initialTask }) {
   const elapsed = busy && startedAt ? Math.floor((Date.now() - startedAt) / 1e3) : 0;
   const spinner = SPINNER[tick % SPINNER.length];
   const sponsorLine = busy && sponsor ? sponsorText(sponsor, cols) : null;
-  const liveText = live?.text ? tailLines(live.text, Math.max(4, rows - 12)) : "";
-  const liveBlock = [
-    liveText,
+  const viewport = Math.max(6, rows - 1);
+  const inputRows = Math.max(1, Math.min(MAX_INPUT_ROWS, editor.lines.length));
+  const inputFrom = windowStart(editor.row, editor.lines.length, inputRows);
+  const inputBoxHeight = 2 + inputRows;
+  const chromeHeight = inputBoxHeight + 2 + (sponsorLine ? 1 : 0);
+  let budget = Math.max(0, viewport - chromeHeight - menu.length);
+  const PICKER_CHROME = 8;
+  const pickerRows = picker ? Math.max(1, Math.min(MAX_PICKER_ROWS, picker.items.length, budget - PICKER_CHROME)) : 0;
+  const pickerFrom = picker ? windowStart(pickerSel, picker.items.length, pickerRows) : 0;
+  const pickerItems = picker ? picker.items.slice(pickerFrom, pickerFrom + pickerRows) : [];
+  const pickerHeight = picker ? pickerItems.length + PICKER_CHROME : 0;
+  const pickerLabelW = picker ? picker.items.reduce((w, i) => Math.max(w, i.label.length), 0) : 0;
+  budget -= pickerHeight;
+  const ASK_CHROME = 4;
+  const askSummaryRows = ask2 ? lineCount(ask2.req.summary, cols) : 0;
+  const askPreview = ask2?.req.preview ? headRows(ask2.req.preview, cols, Math.max(1, budget - ASK_CHROME - askSummaryRows)) : "";
+  const askHeight = ask2 ? askSummaryRows + lineCount(askPreview, cols) * (askPreview ? 1 : 0) + ASK_CHROME : 0;
+  budget -= askHeight;
+  const busyHeight = busy ? 2 : 0;
+  budget -= busyHeight;
+  const liveRaw = [
+    // Trailing blank lines are rows the clamp would spend on nothing, and a
+    // streamed answer ends on one more often than not.
+    (live?.text ?? "").replace(/\n+$/, ""),
     live?.tool ? `\u23FA ${live.tool.name} ${live.tool.summary}` : "",
     live?.tool?.output ?? ""
   ].filter(Boolean).join("\n");
-  const askBlock = ask2 ? [ask2.req.summary, ask2.req.preview ?? ""].filter(Boolean).join("\n") : "";
-  const pickerHeight = picker ? picker.items.length + 8 : 0;
-  const pickerLabelW = picker ? picker.items.reduce((w, i) => Math.max(w, i.label.length), 0) : 0;
-  const inputBoxHeight = 2 + editor.lines.length;
-  const chromeHeight = inputBoxHeight + 2 + (sponsorLine ? 1 : 0);
+  const liveBlock = tailRows(liveRaw, cols, Math.max(0, budget - 1));
   const liveHeight = liveBlock ? lineCount(liveBlock, cols) + 1 : 0;
-  const askHeight = ask2 ? lineCount(askBlock, cols) + 2 : 0;
-  const printed = useMemo(() => entries.reduce((n, e) => n + entryHeight(e, cols), 0), [entries, cols]);
-  const spacer = Math.max(
-    0,
-    rows - 1 - printed - chromeHeight - menu.length - pickerHeight - liveHeight - askHeight
-  );
+  const printed = useMemo(() => {
+    const cache = heightCacheRef.current;
+    return entries.reduce((n, e) => {
+      const key = `${e.id}:${cols}`;
+      let h = cache.get(key);
+      if (h === void 0) {
+        h = entryHeight(e, cols);
+        cache.set(key, h);
+      }
+      return n + h;
+    }, 0);
+  }, [entries, cols]);
+  const used = chromeHeight + menu.length + pickerHeight + askHeight + busyHeight + liveHeight;
+  const spacer = Math.max(0, viewport - printed - used);
   const labelW = menu.reduce((w, c2) => Math.max(w, c2.label.length), 0);
   return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx2(Static, { items: entries, children: (entry) => /* @__PURE__ */ jsx2(EntryView, { entry }, entry.id) }),
     spacer > 0 ? /* @__PURE__ */ jsx2(Box2, { height: spacer }) : null,
     liveBlock ? /* @__PURE__ */ jsx2(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx2(Text2, { children: liveBlock }) }) : null,
+    busy ? /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, children: [
+      /* @__PURE__ */ jsxs2(Text2, { color: MANGO3, children: [
+        spinner,
+        " "
+      ] }),
+      /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+        busyLabel,
+        " ",
+        elapsed,
+        "s \xB7 esc to stop"
+      ] })
+    ] }) : null,
     ask2 ? /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginTop: 1, borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [
       /* @__PURE__ */ jsx2(Text2, { bold: true, color: "yellow", children: ask2.req.summary }),
-      ask2.req.preview ? /* @__PURE__ */ jsx2(Text2, { children: ask2.req.preview }) : null,
+      askPreview ? /* @__PURE__ */ jsx2(Text2, { children: askPreview }) : null,
       /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "[y/\u23CE] once \xB7 [a] always \xB7 [n] no \xB7 esc cancels" })
     ] }) : null,
     picker ? /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginTop: 1, borderStyle: "round", borderColor: MANGO3, paddingX: 1, children: [
       /* @__PURE__ */ jsx2(Text2, { bold: true, color: MANGO_BRIGHT, children: picker.title }),
       /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: picker.subtitle }),
       /* @__PURE__ */ jsx2(Box2, { height: 1 }),
-      picker.items.map((item, i) => /* @__PURE__ */ jsxs2(Box2, { children: [
-        /* @__PURE__ */ jsxs2(Text2, { color: i === pickerSel ? MANGO_BRIGHT : void 0, bold: i === pickerSel, children: [
-          i === pickerSel ? "\u276F " : "  ",
-          `${i + 1}. `,
-          item.label.padEnd(pickerLabelW + 2)
-        ] }),
-        /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: item.hint }),
-        item.current ? /* @__PURE__ */ jsx2(Text2, { color: "green", children: "  \u2190 current" }) : null
-      ] }, item.value)),
+      pickerItems.map((item, i) => {
+        const index = pickerFrom + i;
+        return /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsxs2(Text2, { color: index === pickerSel ? MANGO_BRIGHT : void 0, bold: index === pickerSel, children: [
+            index === pickerSel ? "\u276F " : "  ",
+            `${index + 1}. `,
+            item.label.padEnd(pickerLabelW + 2)
+          ] }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: item.hint }),
+          item.current ? /* @__PURE__ */ jsx2(Text2, { color: "green", children: "  \u2190 current" }) : null
+        ] }, item.value);
+      }),
       /* @__PURE__ */ jsx2(Box2, { height: 1 }),
       /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "\u2191\u2193 choose \xB7 1-9 jump straight to a row \xB7 \u23CE confirm \xB7 esc cancel" })
     ] }) : null,
     /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginTop: 1, children: [
       sponsorLine ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: sponsorLine }) : null,
-      /* @__PURE__ */ jsxs2(Box2, { borderStyle: "round", borderColor: busy ? MANGO_BRIGHT : MANGO3, paddingX: 1, children: [
-        /* @__PURE__ */ jsx2(Text2, { color: MANGO_BRIGHT, children: "\u276F " }),
-        busy ? /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
-          spinner,
-          " ",
-          busyLabel,
-          " ",
-          elapsed,
-          "s \xB7 esc to stop"
-        ] }) : /* @__PURE__ */ jsx2(Text2, { children: renderInput(editor) })
+      /* @__PURE__ */ jsxs2(Box2, { borderStyle: "round", borderColor: busy ? SLATE : MANGO3, paddingX: 1, children: [
+        /* @__PURE__ */ jsx2(Text2, { color: busy ? SLATE : MANGO_BRIGHT, children: "\u276F " }),
+        busy ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: toText(editor) }) : /* @__PURE__ */ jsx2(Text2, { children: renderInput(editor, inputFrom, inputRows) })
       ] }),
       menu.map((item, i) => /* @__PURE__ */ jsxs2(Box2, { children: [
         /* @__PURE__ */ jsxs2(Text2, { color: i === sel ? MANGO_BRIGHT : MANGO3, bold: i === sel, children: [
@@ -2924,17 +3046,20 @@ function App({ client, config, wallet, session, initialTask }) {
         ] }),
         /* @__PURE__ */ jsx2(Text2, { dimColor: i !== sel, children: item.hint })
       ] }, item.value)),
-      /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+      quitHint || menu.length > 0 ? /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
         "  ",
-        statusLine({
-          menu: menu.length > 0,
-          quitHint,
-          model,
-          balance,
-          spent,
-          mode,
-          minutes: (Date.now() - runStartedAtRef.current) / 6e4
-        })
+        quitHint ? "press ctrl+c again to quit" : "\u2191\u2193 choose \xB7 \u23CE run \xB7 tab complete \xB7 esc close"
+      ] }) : /* @__PURE__ */ jsxs2(Box2, { children: [
+        /* @__PURE__ */ jsx2(Text2, { color: MODE_STYLE[mode].color, bold: true, children: `  ${MODE_STYLE[mode].glyph} ${MODE_LABEL[mode]}` }),
+        /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+          "  ",
+          statusLine({
+            model,
+            balance,
+            spent,
+            minutes: (Date.now() - runStartedAtRef.current) / 6e4
+          })
+        ] })
       ] })
     ] })
   ] });
@@ -2951,9 +3076,10 @@ function sleep2(ms, signal) {
     signal.addEventListener("abort", done, { once: true });
   });
 }
-function renderInput(state) {
-  return state.lines.map((line2, row) => {
-    const prefix = row === 0 ? "" : "\n";
+function renderInput(state, from, rows) {
+  return state.lines.slice(from, from + rows).map((line2, i) => {
+    const row = from + i;
+    const prefix = i === 0 ? "" : "\n";
     if (row !== state.row) return /* @__PURE__ */ jsx2(Text2, { children: prefix + line2 }, row);
     const before = line2.slice(0, state.col);
     const at = line2.slice(state.col, state.col + 1) || " ";
@@ -2966,19 +3092,20 @@ function renderInput(state) {
   });
 }
 function statusLine(o) {
-  if (o.quitHint) return "press ctrl+c again to quit";
-  if (o.menu) return "\u2191\u2193 choose \xB7 \u23CE run \xB7 tab complete \xB7 esc close";
   const burn = o.spent > 0 && o.minutes >= 1 ? `${Math.round(o.spent / o.minutes).toLocaleString("en-US")} cr/min` : void 0;
   const parts = [
     o.model,
     `${o.balance.toLocaleString("en-US")} cr`,
-    o.spent > 0 ? `\u2212${o.spent.toLocaleString("en-US")} this session` : void 0,
+    o.spent > 0 ? `\u2212${o.spent.toLocaleString("en-US")}` : void 0,
     burn,
-    MODE_LABEL[o.mode],
     "/help"
   ].filter(Boolean);
   return parts.join(" \xB7 ");
 }
+function windowStart(sel, total, size) {
+  if (total <= size) return 0;
+  return Math.max(0, Math.min(total - size, sel - Math.floor(size / 2)));
+}
 function toEditorKey(ch, key) {
   const name = key.leftArrow ? "left" : key.rightArrow ? "right" : key.upArrow ? "up" : key.downArrow ? "down" : key.backspace ? "backspace" : key.delete ? "delete" : void 0;
   return {
@@ -3011,7 +3138,7 @@ function tailLines(text, max) {
   const lines = text.split("\n");
   return lines.length <= max ? text : lines.slice(-max).join("\n");
 }
-var SPINNER, WORKING, WAITING_FOR_REWARD, LOADING, COMPACTING, SIGNING_IN, NOT_SIGNED_IN, LIVE_OUTPUT_LINES, COMMITTED_OUTPUT_LINES;
+var SPINNER, WORKING, WAITING_FOR_REWARD, LOADING, COMPACTING, SIGNING_IN, NOT_SIGNED_IN, LIVE_OUTPUT_LINES, COMMITTED_OUTPUT_LINES, DELTA_FLUSH_MS, MAX_INPUT_ROWS, MAX_PICKER_ROWS;
 var init_app = __esm({
   "src/tui/app.tsx"() {
     "use strict";
@@ -3044,6 +3171,9 @@ var init_app = __esm({
     NOT_SIGNED_IN = "  Not signed in, or the stored token isn't valid for this gateway.\n  Run /login to sign in.";
     LIVE_OUTPUT_LINES = 5;
     COMMITTED_OUTPUT_LINES = 4;
+    DELTA_FLUSH_MS = 50;
+    MAX_INPUT_ROWS = 10;
+    MAX_PICKER_ROWS = 12;
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clixad",
-  "version": "0.0.1-beta.6",
+  "version": "0.0.1-beta.7",
   "description": "Free AI coding agent in your terminal, funded by rewarded ads.",
   "license": "UNLICENSED",
   "type": "module",