@modelstatus/cli 0.1.0

package/src/tui/ui.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { Text } from "ink";
+
+export const h = React.createElement;
+
+export const HEALTH_COLOR = {
+  ok: "green",
+  deprecating: "yellow",
+  retiring: "magenta",
+  retired: "red",
+  custom: "gray",
+};
+export const HEALTH_GLYPH = {
+  ok: "●",
+  deprecating: "●",
+  retiring: "▲",
+  retired: "■",
+  custom: "○",
+};
+
+export const healthColor = (hh) => HEALTH_COLOR[hh] || "white";
+export const healthGlyph = (hh) => HEALTH_GLYPH[hh] || "·";
+
+/** Truncate + pad to a fixed width for column alignment. */
+export const cell = (s, w) => String(s ?? "").slice(0, w).padEnd(w);
+
+/** Data-fetching hook: { loading, data, error, reload, setData }. */
+export function useAsync(fn, deps = []) {
+  const [state, setState] = React.useState({ loading: true, data: null, error: null });
+  const ref = React.useRef(fn);
+  ref.current = fn;
+  const reload = React.useCallback(() => {
+    setState((s) => ({ ...s, loading: true, error: null }));
+    ref.current().then(
+      (data) => setState({ loading: false, data, error: null }),
+      (error) => setState({ loading: false, data: null, error: error?.message || String(error) }),
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+  React.useEffect(() => {
+    reload();
+  }, [reload]);
+  return { ...state, reload, setData: (data) => setState((s) => ({ ...s, data })) };
+}
+
+/** Clamp a cursor index into [0, len). */
+export const clampCursor = (i, len) => (len <= 0 ? 0 : Math.max(0, Math.min(len - 1, i)));

package/src/tui/views/account.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { h } from "../ui.js";
+import { loadConfig, configFilePath } from "../../config.js";
+import { openUrl } from "../../openUrl.js";
+
+const FREE_LIMITS = { projects: 1, usages: 15, channels: 1 };
+
+export function AccountView({ client, me, refreshMe, apiBase, ui, active }) {
+  const [status, setStatus] = React.useState(null);
+  const cfg = loadConfig();
+  const keyPrefix = cfg.apiKey ? `${cfg.apiKey.slice(0, 12)}…` : "(none)";
+
+  async function upgrade() {
+    if (me?.plan && me.plan !== "free") return ui.showToast(`already on ${me.plan}`, "yellow");
+    setStatus("Starting checkout…");
+    try {
+      const { url } = await client.checkout();
+      openUrl(url);
+      setStatus("Complete checkout in your browser… (polling /me)");
+      const deadline = Date.now() + 10 * 60 * 1000;
+      const tick = async () => {
+        if (Date.now() > deadline) return setStatus("Timed out — press u to retry.");
+        try {
+          const m = await client.me();
+          if (m?.account?.plan && m.account.plan !== "free") {
+            setStatus(null);
+            ui.showToast(`upgraded to ${m.account.plan}!`);
+            refreshMe();
+            return;
+          }
+        } catch {
+          /* keep polling */
+        }
+        setTimeout(tick, 4000);
+      };
+      setTimeout(tick, 4000);
+    } catch (e) {
+      setStatus(e.status === 503 ? "Billing isn't configured on this server." : e.message);
+    }
+  }
+
+  useInput(
+    (input) => {
+      if (!active) return;
+      if (input === "u") return upgrade();
+      if (input === "g") return refreshMe();
+    },
+    { isActive: active },
+  );
+
+  const plan = me?.plan ?? "…";
+  const isFree = plan === "free";
+  return h(
+    Box,
+    { flexDirection: "column" },
+    h(Text, { bold: true }, me?.name ?? "Account"),
+    h(Text, {}, h(Text, { color: "cyan" }, "plan      "), h(Text, { color: isFree ? "gray" : "green" }, plan)),
+    h(Text, {}, h(Text, { color: "cyan" }, "retiring  "), `${me?.retiring_window_days ?? 90} day window`),
+    h(Text, {}, h(Text, { color: "cyan" }, "endpoint  "), apiBase || cfg.apiBase || "https://llmstatus.ai"),
+    h(Text, {}, h(Text, { color: "cyan" }, "key       "), keyPrefix),
+    h(Text, { color: "gray" }, `config: ${configFilePath}`),
+    h(Text, {}, ""),
+    isFree
+      ? h(
+          Box,
+          { flexDirection: "column" },
+          h(Text, { color: "yellow" }, `Free plan · up to ${FREE_LIMITS.projects} project, ${FREE_LIMITS.usages} usages, email+in-app alerts.`),
+          h(Text, { color: "gray" }, "Press u to upgrade to Pro ($5/yr): unlimited usages + Slack/Discord/SMS/webhook alerts."),
+        )
+      : h(Text, { color: "green" }, "Pro features unlocked. Thanks for supporting LLM Status!"),
+    status ? h(Text, { color: "cyan", marginTop: 1 }, status) : null,
+    h(Text, {}, ""),
+    h(Text, { color: "gray" }, "u upgrade · g refresh · (mm logout from the shell to sign out)"),
+  );
+}

package/src/tui/views/add.js

@@ -0,0 +1,84 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { h, useAsync, cell, clampCursor } from "../ui.js";
+
+const ENV_ORDER = ["prod", "staging", "dev", "other"];
+
+export function AddView({ client, ui, active }) {
+  const projQ = useAsync(async () => (await client.listProjects()).data || [], []);
+  const [modelStr, setModelStr] = React.useState("");
+  const [resolved, setResolved] = React.useState(null); // { model_id, display, match_confidence }
+  const [projectIdx, setProjectIdx] = React.useState(0);
+  const [envIdx, setEnvIdx] = React.useState(0);
+  const [busy, setBusy] = React.useState(false);
+
+  const projects = projQ.data || [];
+  const project = projects[clampCursor(projectIdx, projects.length)] || null;
+
+  async function setModel(value) {
+    setModelStr(value);
+    setResolved(null);
+    if (!value?.trim()) return;
+    try {
+      const r = (await client.resolve([value.trim()])).data?.[0] || null;
+      setResolved(r);
+    } catch (e) {
+      ui.showToast(e.message, "red");
+    }
+  }
+
+  async function submit() {
+    if (!modelStr.trim()) return ui.showToast("enter a model string first", "yellow");
+    setBusy(true);
+    try {
+      let projectId = project?.id;
+      if (!projectId) projectId = (await client.createProject("Manual")).id;
+      await client.createUsage({
+        project_id: projectId,
+        model_id: resolved?.model_id ?? undefined,
+        custom_model_name: resolved?.model_id ? undefined : modelStr.trim(),
+        environment: ENV_ORDER[envIdx],
+        location_label: "manual",
+        discovered_by: "manual",
+      });
+      ui.showToast(`added "${modelStr.trim()}"`);
+      setModelStr("");
+      setResolved(null);
+      ui.switchTo("inventory");
+    } catch (e) {
+      ui.showToast(e.message, "red");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  useInput(
+    (input, key) => {
+      if (!active || busy) return;
+      if (input === "m") return ui.askPrompt("Model string", { initial: modelStr, onSubmit: setModel });
+      if (input === "p") return setProjectIdx((i) => (projects.length ? (i + 1) % projects.length : 0));
+      if (input === "e") return setEnvIdx((i) => (i + 1) % ENV_ORDER.length);
+      if (key.return || input === "s") return submit();
+    },
+    { isActive: active },
+  );
+
+  const match = resolved?.model_id
+    ? h(Text, { color: "green" }, `→ ${resolved.display} (registry match)`)
+    : modelStr
+      ? h(Text, { color: "gray" }, "→ will be tracked as a custom model")
+      : null;
+
+  return h(
+    Box,
+    { flexDirection: "column" },
+    h(Text, { bold: true }, "Add a usage manually"),
+    h(Text, {}, ""),
+    h(Text, {}, h(Text, { color: "cyan" }, "model "), modelStr || h(Text, { color: "gray" }, "(press m to enter)")),
+    match,
+    h(Text, {}, h(Text, { color: "cyan" }, "project "), project ? project.name : h(Text, { color: "gray" }, "(new: Manual)")),
+    h(Text, {}, h(Text, { color: "cyan" }, "env "), ENV_ORDER[envIdx]),
+    h(Text, {}, ""),
+    h(Text, { color: "gray" }, "m model · p project · e env · enter/s save"),
+  );
+}

package/src/tui/views/alerts.js

@@ -0,0 +1,160 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { h, useAsync, cell, clampCursor } from "../ui.js";
+
+const DELIVERY = ["immediate", "daily", "weekly"];
+const DEFAULT_EVENTS = ["model_deprecated", "model_retired", "replacement_set", "price_changed", "new_model"];
+const CHANNEL_KINDS = ["slack", "discord", "teams", "webhook", "sms"];
+
+export function AlertsView({ client, ui, active }) {
+  const [tab, setTab] = React.useState(0); // 0 rules, 1 channels
+  const [cursor, setCursor] = React.useState(0);
+  const rules = useAsync(async () => (await client.listRules()).data || [], []);
+  const channels = useAsync(async () => (await client.listChannels()).data || [], []);
+
+  const ruleList = rules.data || [];
+  const chanList = channels.data || [];
+  const list = tab === 0 ? ruleList : chanList;
+  const cur = list[clampCursor(cursor, list.length)] || null;
+
+  async function newRule() {
+    try {
+      await client.createRule({
+        name: "All lifecycle changes",
+        scope: "mine",
+        events: DEFAULT_EVENTS,
+        lead_times: [90, 30, 7, 1],
+        channels: ["inapp", "email"],
+        delivery: "immediate",
+        min_severity: "info",
+        enabled: true,
+      });
+      ui.showToast("rule created");
+      rules.reload();
+    } catch (e) {
+      ui.showToast(e.message, "red");
+    }
+  }
+
+  function addChannel() {
+    ui.askPrompt(`Channel kind (${CHANNEL_KINDS.join("/")})`, {
+      onSubmit: (kind) => {
+        const k = (kind || "").trim().toLowerCase();
+        if (!CHANNEL_KINDS.includes(k)) return ui.showToast("unknown kind", "red");
+        ui.askPrompt(k === "sms" ? "Phone (+15555550123)" : "Webhook URL", {
+          onSubmit: async (value) => {
+            if (!value?.trim()) return;
+            try {
+              await client.createChannel({ kind: k, value: value.trim() });
+              ui.showToast(`${k} channel added`);
+              channels.reload();
+            } catch (e) {
+              if (e.status === 402) ui.showToast("Channels are a Pro feature — press 6 → u to upgrade", "yellow");
+              else ui.showToast(e.message, "red");
+            }
+          },
+        });
+      },
+    });
+  }
+
+  async function testChannel(c) {
+    try {
+      await client.testChannel({ kind: c.kind, value: c.value });
+      ui.showToast("test sent");
+    } catch (e) {
+      if (e.status === 402) ui.showToast("Channels are a Pro feature", "yellow");
+      else ui.showToast(e.message, "red");
+    }
+  }
+
+  useInput(
+    (input, key) => {
+      if (!active) return;
+      if (key.leftArrow || key.rightArrow) {
+        setTab((t) => (t + 1) % 2);
+        setCursor(0);
+        return;
+      }
+      if (key.downArrow || input === "j") return setCursor((c) => clampCursor(c + 1, list.length));
+      if (key.upArrow || input === "k") return setCursor((c) => clampCursor(c - 1, list.length));
+      if (input === "g") return tab === 0 ? rules.reload() : channels.reload();
+      if (tab === 0) {
+        if (input === "n") return newRule();
+        if (!cur) return;
+        if (input === " ")
+          return client.patchRule(cur.id, { enabled: !cur.enabled }).then(() => rules.reload()).catch((e) => ui.showToast(e.message, "red"));
+        if (input === "c")
+          return client
+            .patchRule(cur.id, { delivery: DELIVERY[(DELIVERY.indexOf(cur.delivery) + 1) % 3] })
+            .then(() => rules.reload())
+            .catch((e) => ui.showToast(e.message, "red"));
+        if (input === "d")
+          return client.deleteRule(cur.id).then(() => {
+            ui.showToast("rule deleted");
+            rules.reload();
+          }).catch((e) => ui.showToast(e.message, "red"));
+      } else {
+        if (input === "n") return addChannel();
+        if (input === "t" && cur) return testChannel(cur);
+      }
+    },
+    { isActive: active },
+  );
+
+  const tabs = h(
+    Box,
+    {},
+    h(Text, { color: tab === 0 ? "black" : "gray", backgroundColor: tab === 0 ? "cyan" : undefined }, " Rules "),
+    h(Text, { color: tab === 1 ? "black" : "gray", backgroundColor: tab === 1 ? "cyan" : undefined }, " Channels "),
+    h(Text, { color: "gray" }, "  (←/→ switch)"),
+  );
+
+  let body;
+  if (tab === 0) {
+    if (rules.loading) body = h(Text, { color: "gray" }, "Loading rules…");
+    else if (!ruleList.length) body = h(Text, { color: "gray" }, "No alert rules. Press n to create one.");
+    else
+      body = h(
+        Box,
+        { flexDirection: "column" },
+        ...ruleList.slice(0, 12).map((r, i) =>
+          h(
+            Text,
+            { key: r.id, inverse: i === clampCursor(cursor, ruleList.length), color: r.enabled ? "white" : "gray" },
+            `${r.enabled ? "✓" : "·"} ${cell(r.name || "(unnamed)", 26)} ${cell(r.delivery, 10)} ${(r.channels || []).join(",")}`,
+          ),
+        ),
+      );
+  } else {
+    if (channels.loading) body = h(Text, { color: "gray" }, "Loading channels…");
+    else if (!chanList.length) body = h(Text, { color: "gray" }, "No channels. Press n to add one (Pro).");
+    else
+      body = h(
+        Box,
+        { flexDirection: "column" },
+        ...chanList.slice(0, 12).map((c, i) =>
+          h(
+            Text,
+            { key: c.id, inverse: i === clampCursor(cursor, chanList.length) },
+            `${cell(c.kind, 10)} ${cell(c.label || c.value, 40)}`,
+          ),
+        ),
+      );
+  }
+
+  const footer =
+    tab === 0
+      ? "←/→ tab · ↑↓ move · n new · space enable · c cadence · d delete · g refresh"
+      : "←/→ tab · ↑↓ move · n add · t test · g refresh";
+
+  return h(
+    Box,
+    { flexDirection: "column" },
+    tabs,
+    h(Text, {}, ""),
+    body,
+    h(Text, {}, ""),
+    h(Text, { color: "gray" }, footer),
+  );
+}

package/src/tui/views/inventory.js

@@ -0,0 +1,102 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { h, useAsync, healthColor, healthGlyph, cell, clampCursor } from "../ui.js";
+
+const ENV_ORDER = ["prod", "staging", "dev", "other"];
+
+export function InventoryView({ client, ui, active }) {
+  const q = useAsync(async () => {
+    const [u, p] = await Promise.all([client.listUsages(), client.listProjects()]);
+    return { usages: u.data || [], projects: p.data || [] };
+  }, []);
+  const [cursor, setCursor] = React.useState(0);
+
+  const usages = q.data?.usages || [];
+  const projects = q.data?.projects || [];
+  const projName = (id) => projects.find((p) => p.id === id)?.name || "—";
+  const cur = usages[clampCursor(cursor, usages.length)] || null;
+
+  async function patch(u, body, label) {
+    try {
+      await client.patchUsage(u.id, body);
+      ui.showToast(label);
+      q.reload();
+    } catch (e) {
+      ui.showToast(e.message, "red");
+    }
+  }
+
+  useInput(
+    (input, key) => {
+      if (!active) return;
+      if (key.downArrow || input === "j") return setCursor((c) => clampCursor(c + 1, usages.length));
+      if (key.upArrow || input === "k") return setCursor((c) => clampCursor(c - 1, usages.length));
+      if (input === "g") return q.reload();
+      if (input === "r") return ui.switchTo("scan");
+      if (input === "n") return ui.switchTo("add");
+      if (!cur) return;
+      if (input === "e") return patch(cur, { environment: ENV_ORDER[(ENV_ORDER.indexOf(cur.environment) + 1) % 4] }, "env updated");
+      if (input === "c") return patch(cur, { is_critical: !cur.is_critical }, "critical toggled");
+      if (input === "d")
+        return client
+          .deleteUsage(cur.id)
+          .then(() => {
+            ui.showToast("deleted");
+            setCursor((c) => clampCursor(c, usages.length - 1));
+            q.reload();
+          })
+          .catch((e) => ui.showToast(e.message, "red"));
+    },
+    { isActive: active },
+  );
+
+  if (q.loading) return h(Text, { color: "gray" }, "Loading inventory…");
+  if (q.error) return h(Text, { color: "red" }, `Error: ${q.error}`);
+  if (!usages.length)
+    return h(
+      Box,
+      { flexDirection: "column" },
+      h(Text, { color: "gray" }, "No tracked usages yet."),
+      h(Text, { color: "gray" }, "Press 2 to Scan a repo, or n to Add one manually."),
+    );
+
+  const view = usages.slice(0, 16);
+  return h(
+    Box,
+    {},
+    // List
+    h(
+      Box,
+      { flexDirection: "column", width: 64 },
+      h(Text, { color: "gray" }, `${cell("MODEL", 24)} ${cell("ENV", 8)} PROJECT`),
+      ...view.map((u, i) =>
+        h(
+          Text,
+          { key: u.id, inverse: i === clampCursor(cursor, usages.length), color: healthColor(u.health) },
+          `${healthGlyph(u.health)} ${cell(u.model_display || u.custom_model_name || "?", 22)} ${cell(u.environment, 8)} ${projName(u.project_id)}`,
+        ),
+      ),
+      usages.length > 16 ? h(Text, { color: "gray" }, `…and ${usages.length - 16} more`) : null,
+    ),
+    // Detail
+    h(
+      Box,
+      { flexDirection: "column", marginLeft: 2, borderStyle: "round", borderColor: "gray", paddingX: 1, minWidth: 36 },
+      cur
+        ? h(
+            Box,
+            { flexDirection: "column" },
+            h(Text, { bold: true }, cur.model_display || cur.custom_model_name || "?"),
+            h(Text, { color: healthColor(cur.health) }, `health: ${cur.health}`),
+            h(Text, {}, `env: ${cur.environment}${cur.is_critical ? "  ·  ⚑ critical" : ""}`),
+            h(Text, { color: "gray" }, `project: ${projName(cur.project_id)}`),
+            h(Text, { color: "gray" }, `where: ${cur.location_label || cur.source_path || "—"}`),
+            cur.retires_date ? h(Text, { color: "magenta" }, `retires: ${cur.retires_date}`) : null,
+            h(Text, { color: "gray" }, `via: ${cur.discovered_by}`),
+          )
+        : h(Text, { color: "gray" }, "—"),
+    ),
+  );
+}
+
+export const inventoryFooter = "↑↓ move · e env · c critical · d delete · r rescan · n new · g refresh";

package/src/tui/views/scan.js

@@ -0,0 +1,125 @@
+import React from "react";
+import path from "node:path";
+import { Box, Text, useInput } from "ink";
+import { h, useAsync, cell, clampCursor } from "../ui.js";
+import { collectFrom } from "../../sources/index.js";
+
+export function ScanView({ client, dir, ui, active }) {
+  const load = useAsync(async () => {
+    const patterns = await client.detectionPatterns();
+    const cands = await collectFrom(["filesystem"], { root: dir }, patterns);
+    const uniq = [...new Set(cands.map((c) => c.model_string))];
+    const resolved = uniq.length ? (await client.resolve(uniq)).data || [] : [];
+    const byStr = new Map(resolved.map((r) => [r.input.toLowerCase(), r]));
+    const seen = new Set();
+    const rows = [];
+    for (const c of cands) {
+      const r = byStr.get(c.model_string.toLowerCase());
+      const model_id = r?.model_id ?? null;
+      const k = `${model_id ?? "custom:" + c.model_string}|${c.location_label}`;
+      if (seen.has(k)) continue;
+      seen.add(k);
+      rows.push({ ...c, model_id, display: model_id ? r.display : c.model_string, selected: true });
+    }
+    const projects = (await client.listProjects()).data || [];
+    return { rows, projects };
+  }, [dir]);
+
+  const [items, setItems] = React.useState([]);
+  const [cursor, setCursor] = React.useState(0);
+  const [projectIdx, setProjectIdx] = React.useState(0);
+  const [busy, setBusy] = React.useState(false);
+
+  React.useEffect(() => {
+    if (load.data) setItems(load.data.rows.map((r) => ({ ...r })));
+  }, [load.data]);
+
+  const projects = load.data?.projects || [];
+  const project = projects[projectIdx] || null;
+  const selCount = items.filter((i) => i.selected).length;
+
+  async function createProject(name) {
+    if (!name?.trim()) return;
+    try {
+      await client.createProject(name.trim());
+      ui.showToast(`project "${name.trim()}" created`);
+      load.reload();
+    } catch (e) {
+      ui.showToast(e.message, "red");
+    }
+  }
+
+  async function upload() {
+    const selected = items.filter((r) => r.selected);
+    if (!selected.length) return ui.showToast("nothing selected", "yellow");
+    setBusy(true);
+    try {
+      let projectId = project?.id;
+      if (!projectId) projectId = (await client.createProject(path.basename(path.resolve(dir)))).id;
+      const usages = selected.map((r) => ({
+        model_id: r.model_id ?? undefined,
+        custom_model_name: r.model_id ? undefined : r.model_string,
+        environment: r.environment,
+        location_label: r.location_label,
+        source_path: r.source_path,
+        source_line: r.source_line,
+      }));
+      const res = await client.bulkUpload(projectId, usages);
+      ui.showToast(`uploaded ${usages.length} → ${res.created} new, ${res.updated} updated`);
+    } catch (e) {
+      ui.showToast(e.message, "red");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  useInput(
+    (input, key) => {
+      if (!active || busy) return;
+      if (key.downArrow || input === "j") return setCursor((c) => clampCursor(c + 1, items.length));
+      if (key.upArrow || input === "k") return setCursor((c) => clampCursor(c - 1, items.length));
+      if (input === " ")
+        return setItems((its) => its.map((it, i) => (i === clampCursor(cursor, items.length) ? { ...it, selected: !it.selected } : it)));
+      if (input === "a") return setItems((its) => its.map((it) => ({ ...it, selected: true })));
+      if (input === "x") return setItems((its) => its.map((it) => ({ ...it, selected: false })));
+      if (input === "p") return setProjectIdx((i) => (projects.length ? (i + 1) % projects.length : 0));
+      if (input === "P") return ui.askPrompt("New project name", { onSubmit: createProject });
+      if (input === "g") return load.reload();
+      if (input === "u") return upload();
+    },
+    { isActive: active },
+  );
+
+  if (load.loading) return h(Text, { color: "gray" }, `Scanning ${dir} …`);
+  if (load.error) return h(Text, { color: "red" }, `Error: ${load.error}`);
+  if (!items.length)
+    return h(
+      Box,
+      { flexDirection: "column" },
+      h(Text, { color: "gray" }, `No model usage found in ${dir}.`),
+      h(Text, { color: "gray" }, "Press g to re-scan."),
+    );
+
+  const view = items.slice(0, 16);
+  return h(
+    Box,
+    { flexDirection: "column" },
+    h(
+      Text,
+      { color: "gray" },
+      `${items.length} found · ${selCount} selected · target project: `,
+      h(Text, { color: "cyan" }, project ? project.name : `(new: ${path.basename(path.resolve(dir))})`),
+    ),
+    h(Text, {}, ""),
+    ...view.map((it, i) =>
+      h(
+        Text,
+        { key: i, inverse: i === clampCursor(cursor, items.length), color: it.model_id ? "green" : "gray" },
+        `${it.selected ? "◉" : "○"} ${cell(it.display || it.model_string, 26)} ${cell(it.location_label, 28)} ${it.environment}`,
+      ),
+    ),
+    items.length > 16 ? h(Text, { color: "gray" }, `…and ${items.length - 16} more`) : null,
+    h(Text, {}, ""),
+    h(Text, { color: "gray" }, "space toggle · a all · x none · p project · P new-project · u upload · g rescan"),
+  );
+}