@modelstatus/cli 0.1.1 → 0.1.26

package/src/tui/signin.js

@@ -0,0 +1,142 @@
+/* TUI sign-in screen — shown by the Bootstrap wrapper (app.js) when the user
+ * has no saved API key. Replaces the old text-only "Waiting for authorization…"
+ * polling loop with an actual interactive TUI: verification code is BIG, the
+ * URL is visible, a spinner animates, and the user can quit or skip without
+ * waiting for the browser auth. */
+import React from "react";
+import { Box, Text, useApp, useInput } from "ink";
+import { createClient } from "../api.js";
+import { loadConfig, saveConfig } from "../config.js";
+import { openUrl } from "../openUrl.js";
+import { h } from "./ui.js";
+
+const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+export function SignIn({ apiBase, onSuccess, onSkip }) {
+  const { exit } = useApp();
+  const [phase, setPhase] = React.useState("starting"); // starting | polling | error
+  const [code, setCode] = React.useState(null);
+  const [url, setUrl] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const [tick, setTick] = React.useState(0);
+
+  // Spinner animation (80ms tick).
+  React.useEffect(() => {
+    const t = setInterval(() => setTick((i) => (i + 1) % SPINNER.length), 80);
+    return () => clearInterval(t);
+  }, []);
+
+  // Device-auth flow: start → poll until approved/denied/expired.
+  React.useEffect(() => {
+    let cancelled = false;
+    let pollTimer = null;
+    const client = createClient({ apiBase });
+
+    const start = async () => {
+      try {
+        const s = await client.authStart({ client_name: "mm CLI" });
+        if (cancelled) return;
+        setCode(s.user_code);
+        setUrl(s.verification_url);
+        setPhase("polling");
+        openUrl(s.verification_url); // best-effort, no error if it fails
+
+        const interval = Math.max(1, s.interval || 3) * 1000;
+        const deadline = Date.now() + (s.expires_in || 600) * 1000;
+
+        const poll = async () => {
+          if (cancelled) return;
+          if (Date.now() > deadline) {
+            setError("The login request expired. Press q and run mm login again.");
+            setPhase("error");
+            return;
+          }
+          let res = null;
+          try {
+            res = await client.authPoll(s.device_code);
+          } catch {
+            /* transient network — keep polling */
+          }
+          if (cancelled) return;
+          if (res?.status === "approved") {
+            const cfg = loadConfig();
+            cfg.apiKey = res.api_key;
+            cfg.apiBase = apiBase;
+            saveConfig(cfg);
+            onSuccess(res.api_key);
+            return;
+          }
+          if (res?.status === "denied") {
+            setError("Authorization was denied. Press q to quit.");
+            setPhase("error");
+            return;
+          }
+          if (res?.status === "expired") {
+            setError("The login request expired. Press q and run mm login again.");
+            setPhase("error");
+            return;
+          }
+          pollTimer = setTimeout(poll, interval);
+        };
+        poll();
+      } catch (e) {
+        if (cancelled) return;
+        setError(e?.message || String(e));
+        setPhase("error");
+      }
+    };
+    start();
+    return () => {
+      cancelled = true;
+      if (pollTimer) clearTimeout(pollTimer);
+    };
+  }, [apiBase, onSuccess]);
+
+  useInput((input, key) => {
+    if (key.ctrl && input === "c") return exit();
+    if (input === "q") return exit();
+    if (input === "s" && onSkip) return onSkip();
+    if (input === "o" && url) openUrl(url); // re-open the browser if it didn't fire
+  });
+
+  if (phase === "starting") {
+    return h(
+      Box,
+      { padding: 1 },
+      h(Text, { color: "cyan" }, `${SPINNER[tick]} starting sign-in…`),
+    );
+  }
+  if (phase === "error") {
+    return h(
+      Box,
+      { flexDirection: "column", padding: 1 },
+      h(Text, { color: "red", bold: true }, "  ✕ Sign-in failed"),
+      h(Text, { color: "gray" }, `  ${error}`),
+      h(Text, { color: "gray", dimColor: true }, ""),
+      h(Text, { color: "gray", dimColor: true }, "  press q to quit"),
+    );
+  }
+  // polling
+  return h(
+    Box,
+    { flexDirection: "column", padding: 1 },
+    h(Text, { bold: true, color: "cyan" }, "  LLM Status — Sign in"),
+    h(Text, {}, ""),
+    h(Text, { color: "gray" }, "  Open this URL in your browser:"),
+    h(Text, { color: "white" }, `    ${url}`),
+    h(Text, {}, ""),
+    h(Text, { color: "gray" }, "  Or enter this code there:"),
+    h(
+      Box,
+      { paddingLeft: 4, marginTop: 0, marginBottom: 1 },
+      h(Text, { bold: true, color: "cyan", backgroundColor: "blackBright" }, ` ${code} `),
+    ),
+    h(Text, { color: "yellow" }, `  ${SPINNER[tick]} Waiting for authorization…`),
+    h(Text, {}, ""),
+    h(
+      Text,
+      { color: "gray", dimColor: true },
+      "  press o to re-open the browser · q to quit",
+    ),
+  );
+}

package/src/tui/snippet.js

@@ -0,0 +1,127 @@
+/* Lightweight, dependency-free syntax highlighter for the detail-panel code
+ * preview. Per-extension keyword sets; tokenizes strings / comments / keywords /
+ * numbers and tags the matched model string. Returns colored segment arrays the
+ * ink renderer (CodeSnippet in ui.js) can paint — good enough for a few-line
+ * preview without pulling in highlight.js (which bloats the bun-compiled binary). */
+import fs from "node:fs";
+import path from "node:path";
+import { C } from "./ui.js";
+
+const KW = (s) => new Set(s.split(/\s+/));
+const JS = {
+  line: "//", block: ["/*", "*/"],
+  kw: KW("const let var function return if else for while do switch case break continue new class extends implements import export from default async await yield typeof instanceof in of try catch finally throw this super null undefined true false void delete static get set public private readonly type interface enum namespace as satisfies"),
+};
+const PY = { line: "#", block: null, kw: KW("def class return if elif else for while import from as with try except finally raise lambda None True False and or not in is global nonlocal yield await async pass break continue assert del print self") };
+const GO = { line: "//", block: ["/*", "*/"], kw: KW("func return if else for range var const type struct interface map chan go defer package import nil true false switch case break continue default select make new") };
+const CSTYLE = { line: "//", block: ["/*", "*/"], kw: KW("public private protected class struct interface enum return if else for while do switch case break continue new void int string bool true false null var let const fn impl pub use mod match async await namespace using") };
+const GENERIC = { line: "#", block: null, kw: KW("true false null") };
+
+function langFor(ext) {
+  ext = (ext || "").toLowerCase();
+  if ([".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs"].includes(ext)) return JS;
+  if (ext === ".py" || ext === ".ipynb") return PY;
+  if (ext === ".go") return GO;
+  if ([".java", ".rs", ".php", ".cs"].includes(ext)) return CSTYLE;
+  if ([".rb"].includes(ext)) return { ...PY, kw: KW("def class module return if elsif else end for while do begin rescue ensure raise yield nil true false and or not require") };
+  return GENERIC;
+}
+
+const TOK_COLOR = { string: "#a3e635", comment: C.FG_FAINT, keyword: "#c084fc", number: "#fbbf24", ident: C.FG, plain: C.FG };
+
+function tokenize(line, lang) {
+  const out = [];
+  let i = 0;
+  while (i < line.length) {
+    const rest = line.slice(i);
+    if (lang.line && rest.startsWith(lang.line)) { out.push([rest, "comment"]); break; }
+    if (lang.block && rest.startsWith(lang.block[0])) {
+      const end = rest.indexOf(lang.block[1], lang.block[0].length);
+      const t = end >= 0 ? rest.slice(0, end + lang.block[1].length) : rest;
+      out.push([t, "comment"]); i += t.length; continue;
+    }
+    const ch = line[i];
+    if (ch === '"' || ch === "'" || ch === "`") {
+      let j = i + 1;
+      while (j < line.length) { if (line[j] === "\\") { j += 2; continue; } if (line[j] === ch) { j++; break; } j++; }
+      out.push([line.slice(i, j), "string"]); i = j; continue;
+    }
+    const w = rest.match(/^[A-Za-z_$][\w$]*/);
+    if (w) { out.push([w[0], lang.kw.has(w[0]) ? "keyword" : "ident"]); i += w[0].length; continue; }
+    const num = rest.match(/^\d[\d_.xXa-fA-F]*/);
+    if (num) { out.push([num[0], "number"]); i += num[0].length; continue; }
+    out.push([ch, "plain"]); i += 1;
+  }
+  return out;
+}
+
+/** line → [{ text, color, bold?, bg? }]; if matchStr is set, its first occurrence
+ * on the FULL line is accent-highlighted. The match is located over the whole
+ * line (not per-token) so UNQUOTED hyphenated/dotted ids — gpt-4o, claude-opus-4-1,
+ * `model: gpt-4o` in yaml/env/k8s — highlight too, not just quoted strings. */
+function highlightLine(line, ext, matchStr) {
+  const lang = langFor(ext);
+  const segs = [];
+  for (const [text, type] of tokenize(line, lang)) segs.push({ text, color: TOK_COLOR[type] || C.FG });
+  if (!matchStr) return segs;
+  const at = line.toLowerCase().indexOf(matchStr.toLowerCase());
+  if (at < 0) return segs;
+  const mEnd = at + matchStr.length;
+  // Overlay the accent range [at, mEnd) onto the token segs, splitting any seg
+  // that straddles a boundary. Offsets use .length (UTF-16) consistently with
+  // indexOf, so they line up; display-width clipping happens later in ui.js.
+  const out = [];
+  let col = 0;
+  for (const s of segs) {
+    const sStart = col, sEnd = col + s.text.length;
+    col = sEnd;
+    if (sEnd <= at || sStart >= mEnd) { out.push(s); continue; }
+    const a = Math.max(at, sStart) - sStart;
+    const b = Math.min(mEnd, sEnd) - sStart;
+    if (a > 0) out.push({ text: s.text.slice(0, a), color: s.color });
+    out.push({ text: s.text.slice(a, b), color: C.ACCENT_INK, bg: C.ACCENT, bold: true });
+    if (b < s.text.length) out.push({ text: s.text.slice(b), color: s.color });
+  }
+  return out;
+}
+
+/**
+ * Read ±ctx lines around `line` of `absPath` and syntax-highlight them, tagging
+ * the matched model string on the match line. Returns { path, line, rows } where
+ * each row is { num, isMatch, segs }; null if the file can't be read.
+ */
+export function readSnippet(absPath, line, matchStr, ctx = 3) {
+  let content;
+  try {
+    const st = fs.statSync(absPath); // size-gate BEFORE reading so a huge file is never slurped
+    if (!st.isFile() || st.size > 2_000_000) return null;
+    content = fs.readFileSync(absPath, "utf8");
+  } catch {
+    return null;
+  }
+  const lines = content.split(/\r?\n/);
+  let idx = Math.max(0, Math.min((line || 1) - 1, lines.length - 1));
+  // Re-anchor: a cross-run cached line can be stale (file edited since the scan).
+  // If the recorded line no longer contains the model string, search nearby for
+  // it so the caret + highlight mark the right code instead of confidently lying.
+  if (matchStr) {
+    const m = matchStr.toLowerCase();
+    if (!(lines[idx] || "").toLowerCase().includes(m)) {
+      let best = -1;
+      for (let d = 1; d <= 40 && best < 0; d++) {
+        if (idx - d >= 0 && (lines[idx - d] || "").toLowerCase().includes(m)) best = idx - d;
+        else if (idx + d < lines.length && (lines[idx + d] || "").toLowerCase().includes(m)) best = idx + d;
+      }
+      if (best >= 0) idx = best;
+    }
+  }
+  const start = Math.max(0, idx - ctx);
+  const end = Math.min(lines.length, idx + ctx + 1);
+  const ext = path.extname(absPath);
+  const rows = [];
+  for (let i = start; i < end; i++) {
+    const text = (lines[i] || "").replace(/\t/g, "  ");
+    rows.push({ num: i + 1, isMatch: i === idx, segs: highlightLine(text, ext, i === idx ? matchStr : null) });
+  }
+  return { path: absPath, line: idx + 1, rows };
+}