vkusvill 0.0.0-dev.0 → 0.0.0-dev.1

package/src/main.js

@@ -29,6 +29,12 @@ export const VIEWS = {
     app.switchTab("catalog");
     app.stacks.catalog[0].search(q);
   },
+  signIn: (app) => {
+    app.stacks.profile.length = 1;
+    app.switchTab("profile");
+    app.page.openSignIn();
+  },
+  signOut: (app) => app.stacks.profile[0].signOut(),
   searchRecipes: (app, q) => {
     app.stacks.recipes.length = 1;
     app.switchTab("recipes");
@@ -40,14 +46,14 @@ export const VIEWS = {
 };
 
 const HELP = `
-  ВкусВилл в терминале · vkusvill-cli ${"$VERSION"}
+  ВкусВилл в терминале · vkusvill ${"$VERSION"}
 
-  npx vkusvill-cli            полноэкранный интерфейс
-  npx vkusvill-cli <запрос>   открыть интерфейс сразу с поиском
+  npx vkusvill                полноэкранный интерфейс
+  npx vkusvill <запрос>       открыть интерфейс сразу с поиском
 
   Команды с обычным выводом (для скриптов, --json — сырые данные):
     vv search <запрос>        поиск товаров   [--sort price_asc|price_desc|rating|new] [--page N]
-    vv deals                  скидки по карте [--quantity — «от N штук»]
+    vv deals                  скидки по карте [--quantity — «от N штук»] [--personal — «6 скидок для меня»]
     vv product <id>           карточка товара
     vv barcode <EAN-13>       товар по штрихкоду
     vv recipes <запрос>       рецепты
@@ -57,12 +63,20 @@ const HELP = `
     vv cart link              ссылка на корзину ВкусВилла и QR-код
     vv cart clear             очистить корзину
 
+  Вход (заказы, любимый продукт, 6 скидок, персональная выдача):
+    vv login                  войти; client_id — из письма ВкусВилла после регистрации клиента
+                              [--client-id ID] [--client-secret S] [--redirect URI] [--no-browser]
+                              [--scope all] — заново запросить все права (если отметили новые на сайте)
+    vv auth                   статус входа и права
+    vv orders                 заказы за 30 дней [--page N]
+    vv logout                 выйти и отозвать токены [--forget — стереть и клиента с секретом]
+
   Флаги: --json  --no-splash  --version  --help
-  Окружение: VV_TOKEN (заказы и персональные скидки), VV_COLOR=256|truecolor, NO_COLOR
+  Окружение: VV_TOKEN (готовый токен вместо входа), VV_COLOR=256|truecolor, NO_COLOR
 `;
 
-const VALUE_FLAGS = new Set(["--sort", "--page"]);
-const BOOL_FLAGS = new Set(["--json", "--quantity", "--no-splash", "--version", "--help"]);
+const VALUE_FLAGS = new Set(["--sort", "--page", "--client-id", "--client-secret", "--redirect", "--scope"]);
+const BOOL_FLAGS = new Set(["--json", "--quantity", "--personal", "--no-splash", "--version", "--help", "--no-browser", "--forget"]);
 const SORTS = ["popularity", "rating", "price_asc", "price_desc", "new"];
 
 // Splits argv into positional words, boolean flags and flag values (`--page 2` or `--page=2`)
@@ -94,12 +108,16 @@ export async function main(argv) {
   const cmd = args[0];
   const commands = {
     search: () => cli.search(args.slice(1).join(" "), { json, sort: values.sort, page: +(values.page ?? 1) }),
-    deals: () => cli.deals({ json, type: flags.has("--quantity") ? "quantity" : "card" }),
+    deals: () => cli.deals({ json, type: flags.has("--quantity") ? "quantity" : "card", personal: flags.has("--personal") }),
+    orders: () => cli.orders({ json, page: +(values.page ?? 1) }),
     product: () => cli.product(args[1], { json }),
     barcode: () => cli.barcode(args[1], { json }),
     recipes: () => cli.recipes(args.slice(1).join(" "), { json }),
     shops: () => cli.shops(args.slice(1).join(" "), { json }),
     cart: () => cli.cart(args.slice(1), { json }),
+    login: () => cli.login({ clientId: values["client-id"], clientSecret: values["client-secret"], redirect: values.redirect, scope: values.scope, noBrowser: flags.has("--no-browser") }),
+    logout: () => cli.logout({ forget: flags.has("--forget") }),
+    auth: () => cli.authStatus({ json }),
   };
   if (commands[cmd]) return commands[cmd]();
   if (!process.stdout.isTTY || !process.stdin.isTTY) {

package/src/paths.js

@@ -0,0 +1,20 @@
+// Where vkusvill keeps its files. Config (state, sign-in) is private to the user; the cache is disposable.
+
+import { homedir } from "node:os";
+import path from "node:path";
+
+function configBase() {
+  if (process.env.XDG_CONFIG_HOME) return process.env.XDG_CONFIG_HOME;
+  if (process.platform === "win32" && process.env.APPDATA) return process.env.APPDATA;
+  return path.join(homedir(), ".config");
+}
+
+function cacheBase() {
+  if (process.env.XDG_CACHE_HOME) return process.env.XDG_CACHE_HOME;
+  if (process.platform === "darwin") return path.join(homedir(), "Library", "Caches");
+  if (process.platform === "win32" && process.env.LOCALAPPDATA) return process.env.LOCALAPPDATA;
+  return path.join(homedir(), ".cache");
+}
+
+export const CONFIG_DIR = process.env.VV_CONFIG_DIR ?? path.join(configBase(), "vv-cli");
+export const CACHE_DIR = process.env.VV_CACHE_DIR ?? path.join(cacheBase(), "vv-cli");

package/src/product.js

@@ -62,7 +62,8 @@ export function normalize(item) {
   const { title, pack, whole } = splitName(name);
   return {
     __vv: true,
-    id: item.id,
+    // The favourite-product tool sends ids as numeric strings
+    id: typeof item.id === "string" && /^\d+$/.test(item.id) ? Number(item.id) : item.id,
     name,
     title,
     pack: pack || (grams && whole && !/\d\s*(г|кг|мл|л)(?![а-яё])/iu.test(name) ? (grams >= 1000 ? `${+(grams / 1000).toFixed(2)} кг` : `${grams} г`) : ""),
@@ -79,8 +80,9 @@ export function normalize(item) {
     per100: grams ? Math.round((price / grams) * 1000) / 10 : null,
     rating: item.rating?.average ? Math.round(item.rating.average * 10) / 10 : 0,
     votes: item.rating?.count ?? 0,
-    images: (item.images ?? []).map((i) => i.medium ?? i.small ?? i.large).filter(Boolean),
-    thumb: item.images?.[0]?.small ?? item.images?.[0]?.medium ?? null,
+    // Most tools send `images` with sizes; the favourite-product tool sends a single `img`
+    images: item.images?.length ? item.images.map((i) => i.medium ?? i.small ?? i.large).filter(Boolean) : typeof item.img === "string" ? [item.img] : [],
+    thumb: item.images?.[0]?.small ?? item.images?.[0]?.medium ?? (typeof item.img === "string" ? item.img : null),
     category: (item.category ?? []).map((c) => c.name).reverse(),
     props,
     comp,

package/src/secrets.js

@@ -0,0 +1,133 @@
+// Where the client secret and the tokens live: the OS credential store when there is one, a private
+// file otherwise — the same trade-off as gh or docker, never less safe than npm's ~/.npmrc.
+//
+// - macOS: the login Keychain through `security -i`. The commands go to its stdin and the secret is
+//   passed hex-encoded (-X), so it never appears in process arguments (visible to others in `ps`).
+// - Windows: a file encrypted with DPAPI for the current Windows user (the mechanism behind the
+//   Credential Manager), through PowerShell; data on stdin, no native modules.
+// - Linux desktop: the Secret Service (GNOME Keyring, KWallet) through `secret-tool`, secret on stdin.
+//   Only tried with a D-Bus session: over SSH, in containers or WSL it would only stall.
+// - Anything else, or a store that refuses: auth.json, owner-only (0600; %APPDATA% on Windows).
+// VV_SECRETS=file|keychain|dpapi|secret-service forces a backend.
+
+import { spawnSync } from "node:child_process";
+import { existsSync, readFileSync, writeFileSync, renameSync, unlinkSync, mkdirSync } from "node:fs";
+import path from "node:path";
+import { CONFIG_DIR } from "./paths.js";
+
+const SERVICE = process.env.VV_KEYCHAIN_SERVICE ?? "vkusvill-cli";
+const ACCOUNT = "auth";
+const LABEL = "ВкусВилл в терминале";
+
+const run = (cmd, args, input, timeout = 10e3) => {
+  try {
+    return spawnSync(cmd, args, { input, encoding: "utf8", timeout, windowsHide: true, stdio: ["pipe", "pipe", "pipe"] });
+  } catch {
+    return { status: -1, stdout: "", stderr: "", error: true };
+  }
+};
+
+// PowerShell one-liners for DPAPI; base64 in and out keeps code pages out of the way
+const PS = ["-NoLogo", "-NoProfile", "-NonInteractive", "-ExecutionPolicy", "Bypass", "-Command"];
+const dpapi = (op) => `Add-Type -AssemblyName System.Security; $d = [Convert]::FromBase64String([Console]::In.ReadToEnd().Trim()); `
+  + `$r = [Security.Cryptography.ProtectedData]::${op}($d, $null, [Security.Cryptography.DataProtectionScope]::CurrentUser); `
+  + `[Console]::Out.Write([Convert]::ToBase64String($r))`;
+const DPAPI_FILE = path.join(CONFIG_DIR, "secrets.dpapi");
+
+const hasDbus = () => !!process.env.DBUS_SESSION_BUS_ADDRESS || (!!process.env.XDG_RUNTIME_DIR && existsSync(path.join(process.env.XDG_RUNTIME_DIR, "bus")));
+
+const BACKENDS = {
+  keychain: {
+    label: "связка ключей macOS",
+    available: () => process.platform === "darwin" && !run("security", ["help"]).error,
+    get() {
+      const r = run("security", ["find-generic-password", "-a", ACCOUNT, "-s", SERVICE, "-w"]);
+      return r.status === 0 ? r.stdout.trim() : null;
+    },
+    set(text) {
+      const hex = Buffer.from(text, "utf8").toString("hex");
+      const r = run("security", ["-i"], `add-generic-password -U -a ${ACCOUNT} -s ${SERVICE} -l "${LABEL}" -X ${hex}\n`);
+      // `security -i` exits 0 even when a command fails; read the value back to be sure
+      return r.status === 0 && this.get() === text;
+    },
+    remove() { run("security", ["delete-generic-password", "-a", ACCOUNT, "-s", SERVICE]); },
+  },
+  dpapi: {
+    label: "файл, зашифрованный Windows (DPAPI)",
+    available: () => process.platform === "win32" && !run("powershell.exe", [...PS, "exit 0"], "", 15e3).error,
+    get() {
+      let blob;
+      try { blob = readFileSync(DPAPI_FILE, "utf8").trim(); } catch { return null; }
+      const r = run("powershell.exe", [...PS, dpapi("Unprotect")], blob, 15e3);
+      return r.status === 0 && r.stdout ? Buffer.from(r.stdout.trim(), "base64").toString("utf8") : null;
+    },
+    set(text) {
+      const r = run("powershell.exe", [...PS, dpapi("Protect")], Buffer.from(text, "utf8").toString("base64"), 15e3);
+      if (r.status !== 0 || !r.stdout) return false;
+      mkdirSync(CONFIG_DIR, { recursive: true, mode: 0o700 });
+      const tmp = `${DPAPI_FILE}.${process.pid}.tmp`;
+      writeFileSync(tmp, r.stdout.trim(), { mode: 0o600 });
+      renameSync(tmp, DPAPI_FILE);
+      return this.get() === text;
+    },
+    remove() { try { unlinkSync(DPAPI_FILE); } catch {} },
+  },
+  "secret-service": {
+    label: "Secret Service (связка ключей)",
+    available: () => process.platform === "linux" && hasDbus() && !run("secret-tool", ["--version"], "", 3e3).error,
+    get() {
+      const r = run("secret-tool", ["lookup", "service", SERVICE, "account", ACCOUNT]);
+      return r.status === 0 && r.stdout ? r.stdout.trim() : null;
+    },
+    set(text) {
+      const r = run("secret-tool", ["store", `--label=${LABEL}`, "service", SERVICE, "account", ACCOUNT], text);
+      return r.status === 0 && this.get() === text;
+    },
+    remove() { run("secret-tool", ["clear", "service", SERVICE, "account", ACCOUNT]); },
+  },
+};
+
+const NATIVE = { darwin: "keychain", win32: "dpapi", linux: "secret-service" };
+let chosen; // undefined: not decided yet; null: the file
+
+function vault() {
+  if (chosen !== undefined) return chosen;
+  const forced = process.env.VV_SECRETS;
+  if (forced === "file") return (chosen = null);
+  const name = forced && BACKENDS[forced] ? forced : NATIVE[process.platform];
+  chosen = name && BACKENDS[name].available() ? BACKENDS[name] : null;
+  return chosen;
+}
+
+export function storageLabel() { return vault()?.label ?? "файл auth.json (только для вас)"; }
+
+// Why the secrets are in a file, and what would move them to a store; null when nothing can be done
+export function fileHint() {
+  if (process.env.VV_SECRETS === "file") return "так задано в VV_SECRETS=file";
+  if (process.platform === "linux") {
+    if (!hasDbus()) return "без сеанса рабочего стола (SSH, WSL, контейнер) связки ключей нет — файл 0600, как ~/.npmrc у npm";
+    if (run("secret-tool", ["--version"], "", 3e3).error) return "поставьте secret-tool (пакет libsecret-tools), чтобы хранить секреты в связке ключей";
+  }
+  if (process.platform === "win32") return "PowerShell с DPAPI недоступен — файл в %APPDATA%, доступный только вам";
+  return null;
+}
+
+// The secrets as an object, or null when the store holds none
+export function load() {
+  const v = vault();
+  if (!v) return null;
+  const text = v.get();
+  if (!text) return null;
+  try { return JSON.parse(text); } catch { return null; }
+}
+
+// True when the store took them; false means the caller keeps them in the file
+export function save(secrets) {
+  const v = vault();
+  if (!v) return false;
+  if (v.set(JSON.stringify(secrets))) return true;
+  chosen = null; // a store that refuses once (locked, no session) is not retried in this process
+  return false;
+}
+
+export function remove() { vault()?.remove(); }

package/src/store.js

@@ -7,12 +7,11 @@
 // - Another process (a second TUI, `vv cart add`) may change the file: the TUI watches it and reloads.
 
 import { mkdirSync, readFileSync, writeFileSync, renameSync, statSync, chmodSync, watchFile, unwatchFile } from "node:fs";
-import { homedir } from "node:os";
 import path from "node:path";
+import { CONFIG_DIR as DIR } from "./paths.js";
 import { snapshot, fromSnapshot, lineTotal, qtyStep } from "./product.js";
 
 const VERSION = 2;
-const DIR = process.env.VV_CONFIG_DIR ?? path.join(process.env.XDG_CONFIG_HOME ?? (process.platform === "win32" && process.env.APPDATA ? process.env.APPDATA : path.join(homedir(), ".config")), "vv-cli");
 const FILE = path.join(DIR, "state.json");
 
 export const CART_MAX = 100;

package/src/sys.js

@@ -31,6 +31,18 @@ export function copy(text) {
   });
   const osc = () => { if (process.stdout.isTTY) process.stdout.write(`\x1b]52;c;${Buffer.from(text).toString("base64")}\x07`); return true; };
   if (process.platform === "darwin") return tryCmd("pbcopy", []).then((ok) => ok || osc());
-  if (process.platform === "win32") return tryCmd("clip", []).then((ok) => ok || osc());
+  // clip.exe reads the console code page and garbles Cyrillic; PowerShell gets UTF-8 as base64
+  if (process.platform === "win32") {
+    const ps = "$t = [Text.Encoding]::UTF8.GetString([Convert]::FromBase64String([Console]::In.ReadToEnd().Trim())); Set-Clipboard -Value $t";
+    const viaPs = () => new Promise((resolve) => {
+      try {
+        const p = spawn("powershell.exe", ["-NoLogo", "-NoProfile", "-NonInteractive", "-Command", ps], { stdio: ["pipe", "ignore", "ignore"], windowsHide: true });
+        p.on("error", () => resolve(false));
+        p.on("close", (code) => resolve(code === 0));
+        p.stdin.end(Buffer.from(text, "utf8").toString("base64"));
+      } catch { resolve(false); }
+    });
+    return viaPs().then((ok) => ok || tryCmd("clip", [])).then((ok) => ok || osc());
+  }
   return tryCmd("wl-copy", []).then((ok) => ok || tryCmd("xclip", ["-selection", "clipboard"])).then((ok) => ok || osc());
 }

package/src/ui/product-ui.js

@@ -7,6 +7,14 @@ import { image } from "../image.js";
 import { richWrap, drawRich } from "./widgets.js";
 import { store } from "../store.js";
 
+// Stock at the signed-in user's address; null when unknown (signed out, or the tool did not say)
+export function stock(p) {
+  if (p.available == null) return null;
+  if (p.available <= 0) return { text: "нет в наличии", fg: T.red, out: true };
+  const n = p.unit === "кг" ? `${+Number(p.available).toFixed(1)} кг` : `${p.available} шт`;
+  return { text: `в наличии ${n}`, fg: T.green, out: false };
+}
+
 export const perKg = (p) => (p.unit === "кг" ? null : p.grams ? Math.round((p.price / p.grams) * 1000) : null);
 
 // Composition flags → pills
@@ -85,8 +93,10 @@ export function productRow(g, p, x, y, w, { selected, focused = true, mark, bg:
   // Columns, right to left
   let rx = x + w - 1;
   const cartW = 6;
+  const st = stock(p);
   if (q) g.textR(rx, y, p.unit === "кг" ? `${+q.toFixed(1)}кг` : `×${q}`, { fg: T.lime, bg, bold: true });
   else if (mark) g.textR(rx, y, mark, { fg: T.violet, bg, bold: true });
+  else if (st?.out) g.textR(rx, y, "нет", { fg: T.red, bg });
   rx -= cartW;
   g.textR(rx, y, rub(p.price) + (p.unit === "кг" ? "/кг" : ""), { fg: p.old ? T.orange : T.white, bg, bold: true });
   rx -= 12;
@@ -108,7 +118,7 @@ export function productRow(g, p, x, y, w, { selected, focused = true, mark, bg:
   const nameW = rx - cx;
   if (nameW > 4) {
     const t = truncate(p.title, nameW);
-    cx = g.text(cx, y, t, { fg: selected ? T.white : T.text, bg, bold: selected });
+    cx = g.text(cx, y, t, { fg: st?.out ? T.dim : selected ? T.white : T.text, bg, bold: selected });
     if (p.pack && strWidth(t) < nameW - 2 && t === p.title) g.textW(cx + 1, y, p.pack, nameW - strWidth(t) - 1, { fg: T.dim, bg });
   }
 }
@@ -138,6 +148,8 @@ export function productPane(g, app, p, x, y, w, h, { compact = false } = {}) {
   cy += g.para(x + 1, cy, iw, 2, p.title, { fg: T.white, bold: true, bg: T.panel });
   const meta = [p.pack, p.category?.at(-1)].filter(Boolean).join(" · ");
   if (meta && left() > 0) g.textW(x + 1, cy++, meta, iw, { fg: T.dim, bg: T.panel });
+  const st = stock(p);
+  if (st && left() > 0) g.text(x + 1, cy++, `${st.out ? "○" : "●"} ${st.text}`, { fg: st.fg, bg: T.panel });
   cy++;
   // Big price
   if (left() > 7) {

package/src/ui/widgets.js

@@ -77,7 +77,10 @@ export class ListView {
     this.top = Math.max(0, Math.min(this.top, Math.max(0, n - this.height)));
   }
 
+  // Returns false for a move up from the first row: the key goes on to whatever sits above the list
   key(k, n) {
+    const up = ["up", "pageup", "home"].includes(k.name) || (k.hot === "k" && !k.ctrl);
+    if (up && this.sel <= 0) return false;
     switch (k.name) {
       case "up": this.sel--; break;
       case "down": this.sel++; break;
@@ -234,3 +237,101 @@ export function drawRich(g, x, y, w, maxLines, lines, base) {
   }
   return n;
 }
+
+// Modal form: one or more text fields, Tab moves between them, Enter submits.
+// fields: [{ label, placeholder, hidden, value }]; onSubmit(values) may return an error string.
+export class Prompt {
+  constructor({ title, note = [], fields, onSubmit, onCancel }) {
+    this.title = title;
+    this.note = note;
+    this.fields = fields.map((f) => ({ ...f, input: new TextInput({ placeholder: f.placeholder ?? "", value: f.value ?? "" }) }));
+    this.focus = 0;
+    this.onSubmit = onSubmit;
+    this.onCancel = onCancel;
+    this.error = null;
+    this.animated = true; // blinking cursor
+  }
+
+  key(k, app) {
+    if (k.name === "escape") { app.closeOverlay(this); this.onCancel?.(); return; }
+    if (k.name === "tab" || k.name === "down") { this.focus = (this.focus + 1) % this.fields.length; return; }
+    if (k.name === "backtab" || k.name === "up") { this.focus = (this.focus + this.fields.length - 1) % this.fields.length; return; }
+    if (k.name === "enter") {
+      if (this.focus < this.fields.length - 1 && !this.fields[this.focus + 1].optional) { this.focus++; return; }
+      const values = this.fields.map((f) => f.input.value.trim());
+      const err = this.onSubmit?.(values);
+      if (err) { this.error = err; return; }
+      app.closeOverlay(this);
+      return;
+    }
+    this.error = null;
+    this.fields[this.focus].input.key(k);
+  }
+
+  hints() { return [["⏎", "готово"], ...(this.fields.length > 1 ? [["Tab", "следующее поле"]] : []), ["esc", "отмена"]]; }
+
+  draw(g, app) {
+    const w = Math.min(g.w - 4, 76);
+    // border, blank, notes (+ blank), fields as label/input/blank (the last blank holds an error), border
+    const h = 3 + this.note.length + (this.note.length ? 1 : 0) + this.fields.length * 3;
+    const x = Math.floor((g.w - w) / 2), y = Math.max(1, Math.floor((g.h - h) / 2));
+    shadow(g, x, y, w, h);
+    g.box(x, y, w, h, { fg: T.lineHi, bg: T.panel2, title: this.title, titleFg: T.lime });
+    app.hit(x, y, w, h, { click: () => {} });
+    let cy = y + 2;
+    if (!this.note.length) cy = y + 1;
+    for (const line of this.note) g.textW(x + 3, cy++, line, w - 6, { fg: T.sub, bg: T.panel2 });
+    if (this.note.length) cy++;
+    this.fields.forEach((f, i) => {
+      const active = i === this.focus;
+      g.text(x + 3, cy, f.label, { fg: active ? T.lime : T.dim, bold: active, bg: T.panel2 });
+      g.fill(x + 3, cy + 1, w - 6, 1, active ? T.raise : T.panel);
+      // A hidden field shows bullets with the real cursor position
+      const shown = f.hidden ? new TextInput({ value: "•".repeat([...f.input.value].length), placeholder: f.input.placeholder }) : f.input;
+      if (f.hidden) shown.cursor = f.input.cursor;
+      shown.draw(g, x + 4, cy + 1, w - 8, { focused: active, bg: active ? T.raise : T.panel, blink: app.frame % 10 < 7 });
+      app.hit(x + 3, cy, w - 6, 2, { click: () => { this.focus = i; } });
+      cy += 3;
+    });
+    if (this.error) g.textW(x + 3, cy - 1, `⚠ ${this.error}`, w - 6, { fg: T.red, bg: T.panel2 });
+  }
+}
+
+// A row of pills the keyboard can walk: ← → move, Enter or space presses. The page supplies the
+// items on every draw ({ label, run, fg, bg, bold, prefix }) and tells whether the row has the focus.
+// Only pills that fit on screen can be selected.
+export class ChipBar {
+  constructor() { this.sel = 0; this.shown = null; }
+
+  key(k, items) {
+    const n = Math.min(items.length, this.shown ?? items.length);
+    if (!n) return false;
+    this.sel = Math.min(this.sel, n - 1);
+    if (k.name === "left") { this.sel = Math.max(0, this.sel - 1); return true; }
+    if (k.name === "right") { this.sel = Math.min(n - 1, this.sel + 1); return true; }
+    if (k.name === "home") { this.sel = 0; return true; }
+    if (k.name === "end") { this.sel = n - 1; return true; }
+    if (k.name === "enter" || k.name === "space") { items[this.sel]?.run(); return true; }
+    return false;
+  }
+
+  // Draws the pills from x on row y up to maxX; returns the x after the last one drawn
+  draw(g, app, x, y, maxX, items, { focused = false } = {}) {
+    this.shown = 0;
+    for (const [i, it] of items.entries()) {
+      const pre = it.prefix ? strWidth(it.prefix) : 0;
+      const w = strWidth(it.label) + 2;
+      if (x + pre + w > maxX) break;
+      if (it.prefix) x = g.text(x, y, it.prefix, { fg: T.dim });
+      this.shown = i + 1;
+      const active = focused && i === Math.min(this.sel, items.length - 1);
+      // The keyboard's pill looks like a focused header tab: bright and underlined
+      g.pill(x, y, it.label, { fg: active ? T.bg : it.fg ?? T.sub, bg: active ? T.lime : it.bg ?? T.raise, bold: active || it.bold });
+      if (active) g.s.put(x + 1, y, it.label, { fg: T.bg, bg: T.lime, bold: true, underline: true });
+      app.hit(x, y, w, 1, { click: () => { this.sel = i; it.run(); } });
+      x += w + 1;
+    }
+    this.sel = Math.min(this.sel, Math.max(0, this.shown - 1));
+    return x;
+  }
+}

package/src/views/browser.js

@@ -227,7 +227,7 @@ export class ProductBrowser {
       else if (this.loading) loader(g, r.x + Math.floor(listW / 2) - 6, ly + Math.floor(lh / 2) + 1, app.frame);
     } else {
       this.list.draw(g, app, lx - 1, ly, listW - 1, lh, vis, (p, i, ry, sel) => {
-        productRow(g, p, lx - 1, ry, listW - 1, { selected: sel, focused: this.focus !== "search", mark: app.compare.has(p.id) ? "⇄" : "" });
+        productRow(g, p, lx - 1, ry, listW - 1, { selected: sel, focused: !["search", "chips"].includes(this.focus) && !app.headerFocus, mark: app.compare.has(p.id) ? "⇄" : "" });
       }, { onPick: (p) => this.open(p) });
       if (this.loading) g.textC(r.x, listW, r.y + r.h - 1, ` ${"⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏"[app.frame % 10]} подгружаю… `, { fg: T.lime, bg: T.panel });
     }

package/src/views/cart.js

@@ -31,7 +31,13 @@ class CartView {
   key(k) {
     if (k.type !== "key") return false;
     const lines = this.lines;
-    if (this.list.key(k, lines.length)) { this.confirmClear = false; return true; }
+    // The checkout button is the zone below the last line: ↓ reaches it, ↑ comes back
+    if (this.focus === "checkout") {
+      if (k.name === "up" || k.name === "escape") { this.focus = "list"; return true; }
+      if (k.name === "enter" || k.name === "space") { this.checkout(); return true; }
+      if (k.name === "down") return true;
+    } else if (k.name === "down" && lines.length && this.list.sel >= lines.length - 1) { this.focus = "checkout"; return true; }
+    if (this.focus !== "checkout" && this.list.key(k, lines.length)) { this.confirmClear = false; return true; }
     const line = lines[this.list.sel];
     const h = k.hot ?? k.name;
     if (line && (h === "+" || h === "=" || k.name === "right")) { store.add(line.p, qtyStep(line.p)); return true; }
@@ -51,6 +57,7 @@ class CartView {
 
   hints() {
     if (!this.lines.length) return [["1", "в каталог"], ["2", "акции"], ["3", "рецепты"]];
+    if (this.focus === "checkout") return [["⏎", "оформить: ссылка и QR"], ["↑", "к товарам"]];
     return [["↑↓", "выбор"], ["← →", "кол-во"], ["d", "убрать"], ["⏎", "товар"], ["o", "оформить"], ["u", "обновить цены"], ["D", "очистить"]];
   }
 
@@ -103,16 +110,28 @@ class CartView {
     g.spans(r.x + 2, r.y, [["Корзина", { fg: T.lime, bold: true, bg: T.panel }], [`  ${n} ${plural(n, "позиция", "позиции", "позиций")} · до ${CART_MAX}`, { fg: T.dim, bg: T.panel }]]);
     g.hline(r.x, r.y + 1, lw, T.line);
     // Table: product | − qty + | sum
-    const rowH = 2;
+    // Wide enough: one line per item, the price details in a column of their own; otherwise two lines
+    const right = 30, DETAILS = 30;
+    const oneLine = lw - 4 - right - DETAILS >= 24;
+    const rowH = oneLine ? 1 : 2;
     this.list.draw(g, app, r.x, r.y + 2, lw - 1, r.h - 2 - (sideW ? 0 : 1), lines, (l, i, y, sel) => {
-      const bg = sel ? T.selHi : T.panel;
+      const bg = sel ? (this.focus === "checkout" ? T.sel : T.selHi) : T.panel;
       g.fill(r.x, y, lw - 1, rowH, bg);
-      if (sel) { g.text(r.x, y, "▌", { fg: T.lime, bg }); g.text(r.x, y + 1, "▌", { fg: T.lime, bg }); }
+      for (let j = 0; j < rowH; j++) if (sel) g.text(r.x, y + j, "▌", { fg: T.lime, bg });
       const p = l.p;
-      const right = 30;
-      g.textW(r.x + 2, y, p.title, lw - right - 4, { fg: T.white, bold: sel, bg });
-      const sub = [p.pack, p.unit === "кг" ? `${rub(p.price)}/кг` : rub(p.price), p.old ? `было ${rub(p.old)}` : ""].filter(Boolean).join(" · ");
-      g.textW(r.x + 2, y + 1, sub, lw - right - 4, { fg: p.old ? T.orange : T.dim, bg });
+      const details = [p.unit === "кг" ? `${rub(p.price)}/кг` : rub(p.price), p.old ? `было ${rub(p.old)}` : ""].filter(Boolean).join(" · ");
+      // Stock at the user's address is known once prices were checked while signed in
+      const stock = p.available === 0 ? ["нет в наличии", T.red] : p.available != null && p.available < l.q ? [`в наличии только ${p.available}`, T.orange] : null;
+      if (oneLine) {
+        const dx = r.x + lw - right - DETAILS;
+        const tx = g.textW(r.x + 2, y, p.title, dx - r.x - 4, { fg: T.white, bold: sel, bg });
+        if (p.pack) g.textW(tx + 1, y, p.pack, dx - tx - 2, { fg: T.dim, bg });
+        g.textW(dx, y, stock ? stock[0] : details, DETAILS - 2, { fg: stock ? stock[1] : p.old ? T.orange : T.dim, bg });
+      } else {
+        g.textW(r.x + 2, y, p.title, lw - right - 4, { fg: T.white, bold: sel, bg });
+        const sx2 = g.textW(r.x + 2, y + 1, [p.pack, details].filter(Boolean).join(" · "), lw - right - 4, { fg: p.old ? T.orange : T.dim, bg });
+        if (stock) g.textW(sx2 + 2, y + 1, stock[0], Math.max(0, r.x + lw - right - 2 - sx2), { fg: stock[1], bg });
+      }
       // Stepper
       const sx = r.x + lw - right;
       g.text(sx, y, " − ", { fg: T.white, bg: sel ? T.orange : T.raise, bold: true });
@@ -121,9 +140,11 @@ class CartView {
       g.textC(sx + 3, 10, y, qt, { fg: T.white, bold: true, bg });
       g.text(sx + 13, y, " + ", { fg: T.bg, bg: sel ? T.lime : T.green, bold: true });
       app.hit(sx + 13, y, 3, 1, { click: () => store.add(p, qtyStep(p)) });
-      g.textR(r.x + lw - 2, y, rub(lineTotal(p, l.q)), { fg: T.lime, bold: true, bg });
-      g.text(r.x + lw - 3, y + 1, "×", { fg: T.mute, bg });
-      app.hit(r.x + lw - 3, y + 1, 1, 1, { click: () => store.remove(p.id) });
+      // The remove cross sits under the total on two lines, after it on one
+      g.textR(r.x + lw - (oneLine ? 4 : 2), y, rub(lineTotal(p, l.q)), { fg: T.lime, bold: true, bg });
+      const xy = oneLine ? y : y + 1;
+      g.text(r.x + lw - 3, xy, "×", { fg: T.mute, bg });
+      app.hit(r.x + lw - 3, xy, 1, 1, { click: () => store.remove(p.id) });
     }, { rowH, onPick: (l, i) => this.openLine(i) });
     if (sideW) this.drawSummary(g, { x: r.x + lw + 1, y: r.y, w: sideW - 1, h: r.h });
     else {
@@ -131,7 +152,7 @@ class CartView {
       g.fill(r.x, y, r.w, 1, T.panel2);
       g.spans(r.x + 2, y, [["Итого ", { fg: T.sub, bg: T.panel2 }], [rub(store.total), { fg: T.lime, bold: true, bg: T.panel2 }], [store.savings ? `  экономия ${rub(store.savings)}` : "", { fg: T.orange, bg: T.panel2 }]]);
       const label = " o  ОФОРМИТЬ ▶ ";
-      g.textR(r.x + r.w - 1, y, label, { fg: T.bg, bg: T.lime, bold: true });
+      g.textR(r.x + r.w - 1, y, label, { fg: T.bg, bg: T.lime, bold: true, underline: this.focus === "checkout" && !app.headerFocus });
       app.hit(r.x + r.w - 1 - strWidth(label), y, strWidth(label), 1, { click: () => this.checkout() });
     }
   }
@@ -150,9 +171,10 @@ class CartView {
     // Checkout button
     const label = "  ОФОРМИТЬ ВО ВКУСВИЛЛЕ  ▶ ";
     const bw = Math.min(w, strWidth(label));
-    const pulse = mix(T.green, T.lime, (Math.sin(app.frame / 4) + 1) / 4);
+    const onBtn = this.focus === "checkout" && !app.headerFocus;
+    const pulse = onBtn ? T.lime : mix(T.green, T.lime, (Math.sin(app.frame / 4) + 1) / 4);
     g.fill(x, y, bw, 3, pulse);
-    g.textC(x, bw, y + 1, label.trim(), { fg: T.bg, bg: pulse, bold: true });
+    g.textC(x, bw, y + 1, label.trim(), { fg: T.bg, bg: pulse, bold: true, underline: onBtn });
     app.hit(x, y, bw, 3, { click: () => this.checkout() });
     this.animated = true;
     y += 4;
@@ -269,7 +291,7 @@ class Checkout {
     const h = Math.min(g.h - 2, compact ? qs.h + 4 : qs.h + 10);
     const x = Math.floor((g.w - w) / 2), y = Math.max(1, Math.floor((g.h - h) / 2));
     shadow(g, x, y, w, h);
-    g.box(x, y, w, h, { fg: T.lineHi, bg: T.panel2, title: "Корзина во ВкусВилле", titleFg: T.lime, style: "round" });
+    g.box(x, y, w, h, { fg: T.lineHi, bg: T.panel2, title: "Оформление", titleFg: T.lime, style: "round" });
     app.hit(x, y, w, h, { click: () => {} });
     if (this.error) {
       g.textC(x, w, y + Math.floor(h / 2) - 1, "⚠ Не получилось создать корзину", { fg: T.red, bold: true, bg: T.panel2 });