@modelstatus/cli 0.1.76 → 0.1.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelstatus/cli",
-  "version": "0.1.76",
+  "version": "0.1.77",
   "description": "Track which AI models you use, where, and never get surprised by a retirement. Free offline model-health for any repo (mm status), browser sign-in for cloud inventory + alerts.",
   "keywords": [
     "llm",

package/src/tui/app.js

@@ -4,6 +4,7 @@ import { render, Box, Text, useInput, useApp, useStdout } from "ink";
 import { createClient } from "../api.js";
 import { track } from "../telemetry.js";
 import { BUILD_VERSION } from "../version.js";
+import { feedbackEligible, recordFeedbackShown, recordFeedbackSubmitted, submitFeedback, FeedbackStrip, FeedbackCard, ACTION_THRESHOLD } from "./feedback.js";
 import {
   h, C, GLYPH, useAsync, Window, TrafficLights, TabStrip, StatusBar, legendSegments,
   KeyBar, EmptyCard,
@@ -146,6 +147,12 @@ export function App({ apiBase, apiKey, dir, initialView, onSignedIn, fresh }) {
   // changes (reset below). Keeps the keybar honest for tabbed views (What's New,
   // Alerts) where the active keys depend on which sub-tab you're on.
   const [dynKeys, setDynKeys] = React.useState(null);
+  // Feedback: null | {stage:"strip"} | {stage:"card", score, comment, sending}.
+  // The strip auto-shows once ACTION_THRESHOLD real actions happen (30-day
+  // cooldown, never after a submit); `!` opens the card from anywhere, always.
+  const [feedback, setFeedback] = React.useState(null);
+  const actionsRef = React.useRef(0);
+  const fbEligibleRef = React.useRef(feedbackEligible());
   const me = useAsync(async () => (apiKey ? client.me() : null), [apiKey]);
 
   const { outer, termRows } = useTermDims();
@@ -187,6 +194,21 @@ export function App({ apiBase, apiKey, dir, initialView, onSignedIn, fresh }) {
   useInput(
     (input, key) => {
       if (key.ctrl && input === "c") return exit();
+      if (input === "!") {
+        setFeedback({ stage: "card", score: null, comment: "", sending: false });
+        return;
+      }
+      // Count "real" actions (letter/symbol keys that do work — not tab digits,
+      // not bare navigation, not q). Arrows/enter arrive with empty input, so
+      // pure browsing never trips the ask.
+      if (fbEligibleRef.current && !feedback && input && !key.ctrl && !key.meta && !/^[0-9]$/.test(input) && input !== "q") {
+        actionsRef.current += 1;
+        if (actionsRef.current >= ACTION_THRESHOLD) {
+          fbEligibleRef.current = false;
+          recordFeedbackShown();
+          setFeedback({ stage: "strip" });
+        }
+      }
       // Ctrl-L: hard redraw. Clears screen + scrollback, then bumps `redraw` so
       // the frame string changes (ink skips writing identical output) and ink
       // repaints from a clean top. Fixes a display knocked askew by a resize /
@@ -219,7 +241,37 @@ export function App({ apiBase, apiKey, dir, initialView, onSignedIn, fresh }) {
       }
       if (input === "q") return exit();
     },
-    { isActive: !prompt && !capturing },
+    { isActive: !prompt && !capturing && feedback?.stage !== "card" },
+  );
+  // Feedback card is modal: digits score it (until a comment starts), printable
+  // chars build the comment, ←→ nudges the score, ↵ sends, esc closes.
+  useInput(
+    (input, key) => {
+      const fb = feedback;
+      if (!fb || fb.sending) return;
+      if (key.escape) return setFeedback(null);
+      if (key.return) {
+        if (!fb.score) return showToast("pick a score first (1-5)", "#d97706");
+        setFeedback({ ...fb, sending: true });
+        submitFeedback({ apiBase, score: fb.score, comment: fb.comment }).then((ok) => {
+          if (ok) {
+            recordFeedbackSubmitted();
+            setFeedback(null);
+            showToast("🙏 thanks — feedback sent to the humans");
+          } else {
+            setFeedback((f) => (f ? { ...f, sending: false } : f));
+            showToast("couldn't send feedback — check your connection, try again", "#dc2626");
+          }
+        });
+        return;
+      }
+      if (key.leftArrow) return setFeedback({ ...fb, score: Math.max(1, (fb.score || 4) - 1) });
+      if (key.rightArrow) return setFeedback({ ...fb, score: Math.min(5, (fb.score || 2) + 1) });
+      if (key.backspace || key.delete) return setFeedback({ ...fb, comment: fb.comment.slice(0, -1) });
+      if (/^[1-5]$/.test(input) && !fb.comment) return setFeedback({ ...fb, score: Number(input) });
+      if (input && !key.ctrl && !key.meta) return setFeedback({ ...fb, comment: (fb.comment + input).slice(0, 500) });
+    },
+    { isActive: feedback?.stage === "card" },
   );
   useInput(
     (input, key) => {
@@ -257,9 +309,13 @@ export function App({ apiBase, apiKey, dir, initialView, onSignedIn, fresh }) {
     });
     keys = GATE_KEYS;
   } else {
-    body = h(View, { client, me: account, refreshMe: me.reload, dir, apiBase, ui, width: W, height: bodyRows, active: !prompt, fresh });
+    body = h(View, { client, me: account, refreshMe: me.reload, dir, apiBase, ui, width: W, height: bodyRows, active: !prompt && feedback?.stage !== "card", fresh });
     keys = dynKeys || (current2.meta && current2.meta.keys) || [];
   }
+  if (feedback?.stage === "card") {
+    body = h(FeedbackCard, { score: feedback.score, comment: feedback.comment, sending: feedback.sending, width: W });
+    keys = [{ k: "1-5", label: "score" }, { k: "↵", label: "send" }, { k: "esc", label: "close" }];
+  }
 
   // Status bar segments.
   const live = status && status.forKey === current2.key ? status : null;
@@ -282,7 +338,7 @@ export function App({ apiBase, apiKey, dir, initialView, onSignedIn, fresh }) {
     h(Text, {}, ""),
     h(Box, { flexDirection: "column", width: W, minHeight: bodyRows }, body),
     h(PromptRow, { prompt }),
-    h(Text, {}, ""),
+    feedback?.stage === "strip" ? h(FeedbackStrip, null) : h(Text, {}, ""),
     toast ? h(Text, { color: toast.color }, ` ${toast.msg}`) : h(Text, {}, ""),
     h(StatusBar, { segsLeft, segsRight, width: W }),
     h(KeyBar, { keys: keys.some((k) => k.k === "P") ? keys : [...keys, { k: "P", label: "play 🦍" }], width: W }),

package/src/tui/feedback.js

@@ -0,0 +1,121 @@
+/* In-TUI feedback: a quiet "♥ enjoying mm? press ! to rate it" strip appears
+ * once the user has taken a handful of real actions, and `!` (always available
+ * on the Account tab too) opens a modal card — score 1–5 (1 = hot garbage,
+ * 5 = best thing since sliced bread) + optional comment. Submission goes to
+ * POST /api/v1/feedback on our API (works signed-out); the SERVER forwards to
+ * PostHog + the ops Slack channel — the public binary never holds a secret.
+ *
+ * Nag policy (user-chosen): auto-show at most once per 30 days; submitting
+ * means never auto-show again. The `!` key keeps working regardless.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { h, C } from "./ui.js";
+import { loadConfig, setConfigValue } from "../config.js";
+import { BUILD_VERSION } from "../version.js";
+
+const COOLDOWN_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
+export const ACTION_THRESHOLD = 5; // strip appears after this many real actions
+
+/** Should the auto-strip show this session? (The `!` key is always allowed.) */
+export function feedbackEligible(cfg = loadConfig(), now = Date.now()) {
+  const f = cfg.feedback || {};
+  if (f.submittedAt) return false; // they already told us — never auto-nag again
+  if (f.shownAt && now - f.shownAt < COOLDOWN_MS) return false;
+  return true;
+}
+
+/** Record that the strip was shown (ignoring it counts as dismissal). */
+export function recordFeedbackShown(now = Date.now()) {
+  try {
+    setConfigValue("feedback", { ...(loadConfig().feedback || {}), shownAt: now });
+  } catch { /* best effort */ }
+}
+
+export function recordFeedbackSubmitted(now = Date.now()) {
+  try {
+    setConfigValue("feedback", { ...(loadConfig().feedback || {}), submittedAt: now });
+  } catch { /* best effort */ }
+}
+
+/** POST to our API. Returns true on success; never throws. */
+export async function submitFeedback({ apiBase, score, comment }) {
+  try {
+    const cfg = loadConfig();
+    const res = await fetch(`${(apiBase || "https://llmstatus.ai").replace(/\/$/, "")}/api/v1/feedback`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        score,
+        thumbs: score >= 4 ? "up" : score <= 2 ? "down" : undefined,
+        comment: comment || undefined,
+        version: typeof BUILD_VERSION === "string" ? BUILD_VERSION : "",
+        platform: `${process.platform}-${process.arch}`,
+        distinct_id: cfg.anonId || undefined,
+      }),
+      signal: AbortSignal.timeout(5_000),
+    });
+    return res.ok;
+  } catch {
+    return false;
+  }
+}
+
+const SCORE_LABELS = {
+  1: "hot garbage",
+  2: "rough",
+  3: "it's fine",
+  4: "really good",
+  5: "best thing since sliced bread",
+};
+
+/** The one-line invite, rendered by app.js above the keybar. */
+export function FeedbackStrip() {
+  return h(
+    Text,
+    {},
+    h(Text, { color: "#fb7185" }, " ♥ "),
+    h(Text, { color: C.FG }, "enjoying mm? "),
+    h(Text, { color: C.ACCENT, bold: true }, "press ! to rate it"),
+  );
+}
+
+/** The modal card. Pure render — app.js owns the state + key handling. */
+export function FeedbackCard({ score, comment, sending, width = 78 }) {
+  const cells = [];
+  for (let n = 1; n <= 5; n++) {
+    const active = n === score;
+    cells.push(
+      h(
+        Text,
+        { key: `s${n}` },
+        h(Text, { color: active ? C.ACCENT : C.FG_DIM, bold: active }, active ? ` ▸${n}◂ ` : `  ${n}  `),
+      ),
+    );
+  }
+  const label = score ? SCORE_LABELS[score] : "pick a number";
+  return h(
+    Box,
+    { flexDirection: "column", paddingX: 1 },
+    h(Text, {}, h(Text, { color: C.ACCENT, bold: true }, " ✦ feedback "), h(Text, { color: C.FG_DIM }, "— 30 seconds, straight to the humans")),
+    h(Text, {}, ""),
+    h(Text, { color: C.FG }, "  How do you like mm?  (1 = hot garbage · 5 = best thing since sliced bread)"),
+    h(Text, {}, ""),
+    h(Box, {}, h(Text, {}, "   "), ...cells, h(Text, { color: C.FG_DIM }, `   ${label}`)),
+    h(Text, {}, ""),
+    h(Text, { color: C.FG }, "  anything we should know? (optional)"),
+    h(
+      Text,
+      {},
+      h(Text, { color: C.FG_DIM }, "  │ "),
+      h(Text, { color: C.FG }, comment || ""),
+      h(Text, { color: C.ACCENT }, "▌"),
+    ),
+    h(Text, {}, ""),
+    h(
+      Text,
+      { color: C.FG_DIM },
+      sending ? "  sending…" : "  ←→ or 1-5 score · type to comment · ↵ send · esc close",
+    ),
+  );
+}

package/src/tui/views/account.js

@@ -8,7 +8,7 @@ const FREE_LIMITS = { projects: 1, usages: 15, channels: 1 };
 // Background paint only when colors are on (mirrors ui.js BG_ON gate; ui handles the rest).
 const BG_ON = process.env.MM_ASCII !== "1" && process.env.TERM !== "dumb" && process.env.NO_COLOR == null;
 
-export const meta = { keys: [{ k: "u", label: "upgrade" }, { k: "g", label: "refresh" }] };
+export const meta = { keys: [{ k: "u", label: "upgrade" }, { k: "g", label: "refresh" }, { k: "!", label: "feedback" }] };
 
 /** label/value row: padded accent label + value. */
 function Row({ label, value, color = C.FG, bold = false }) {