lazy-skill 0.4.0 → 0.5.0

package/dist/commands/connect.js

@@ -5,9 +5,11 @@ import { detectAgents } from "../adapters/index.js";
 import { THEMES, style } from "../ui/theme.js";
 import { boxWidth, visibleWidth } from "../ui/layout.js";
 import { renderQr } from "../ui/qr.js";
-import { blank, box, centre, fail, hint, line, muted, ok, status, welcome } from "../ui/layout.js";
+import { blank, box, centre, fail, hint, line, muted, ok, status } from "../ui/layout.js";
+import { banner, mascot } from "../ui/banner.js";
 import { messages } from "../ui/messages.js";
 import { Spinner } from "../ui/spinner.js";
+const VERSION = "0.5.0";
 function friendlyPlatform() {
     const p = platform();
     return p === "darwin" || p === "win32" || p === "linux" ? p : "unknown";
@@ -24,7 +26,8 @@ export async function connectCommand(options) {
     const config = readConfig();
     const theme = THEMES[config.theme];
     blank();
-    welcome(theme, "Welcome to Lazy Skill!");
+    for (const row of banner(theme, VERSION))
+        console.log(row);
     blank();
     hint("See it. Search it. Install it.");
     blank();
@@ -64,10 +67,18 @@ export async function connectCommand(options) {
     hint("Open Lazy Skill on your phone and scan this.");
     blank();
     // The QR is the one thing to act on, so it gets the box. Its own quiet zone
-    // sits inside the border, untouched.
+    // sits inside the border, untouched — nothing is drawn over the modules.
     const plate = await renderQr(session.pairUrl);
     const width = plate.length ? visibleWidth(plate[0]) + 4 : boxWidth();
     box(theme, plate.map((row) => centre(row, width)), width);
+    // Bit sits under the code rather than over it: anything overlapping the
+    // module area would cost scan reliability for decoration.
+    blank();
+    const bit = mascot(theme, false);
+    for (let i = 0; i < bit.length; i++) {
+        const caption = i === 2 ? `  ${style.gray("waiting for your phone")}` : "";
+        console.log(`  ${centre(bit[i], width - 18)}${caption}`);
+    }
     blank();
     muted(session.pairUrl);
     blank();

package/dist/commands/theme.js

@@ -1,14 +1,14 @@
-import { createInterface } from "node:readline/promises";
 import { readConfig, updateConfig } from "../lib/config.js";
 import { THEMES, THEME_IDS, rgb, style } from "../ui/theme.js";
-import { blank, box, muted, ok, welcome } from "../ui/layout.js";
+import { banner, mascot } from "../ui/banner.js";
+import { pointer, select } from "../ui/select.js";
+import { blank, muted, ok } from "../ui/layout.js";
 /**
  * Theme picker. The choice is stored locally and travels with the next
  * pairing, so the phone ends up on the same colour.
  */
-export async function themeCommand(requested) {
+export async function themeCommand(requested, version) {
     const current = readConfig().theme;
-    const theme = THEMES[current];
     if (requested) {
         const match = THEME_IDS.find((id) => id === requested);
         if (!match) {
@@ -25,41 +25,35 @@ export async function themeCommand(requested) {
         blank();
         return 0;
     }
+    const chosen = await select({
+        choices: THEME_IDS.map((id) => ({ value: id, label: THEMES[id].label })),
+        initial: THEME_IDS.indexOf(current),
+        render: (index) => {
+            const theme = THEMES[THEME_IDS[index]];
+            const bit = mascot(theme, true);
+            const out = [""];
+            out.push(...banner(theme, version));
+            out.push("");
+            THEME_IDS.forEach((themeId, i) => {
+                const t = THEMES[themeId];
+                const active = i === index;
+                const mark = themeId === current ? style.green("●") : style.gray("○");
+                // Pad before colouring: padEnd counts escape codes as characters, so
+                // padding a coloured string leaves the column ragged.
+                const padded = t.label.padEnd(14);
+                const label = active ? style.bold(padded) : style.gray(padded);
+                const beside = i >= 1 && i <= 5 ? "  " + bit[i - 1] : "";
+                out.push(`  ${pointer(active)} ${mark} ${rgb(t.accent, "████")}  ${label}${beside}`);
+            });
+            out.push("");
+            out.push(`  ${style.gray("↑ ↓ to move · enter to choose")}`);
+            out.push("");
+            return out;
+        },
+    });
+    updateConfig({ theme: chosen });
+    ok(`Theme set to ${rgb(THEMES[chosen].accent, THEMES[chosen].label)}.`);
+    muted("Connect again to carry it to your phone.");
     blank();
-    welcome(theme, "Pick a colour");
-    blank();
-    box(theme, THEME_IDS.map((id, i) => {
-        const t = THEMES[id];
-        const marker = id === current ? style.green("●") : style.gray("○");
-        return `${marker} ${style.gray(String(i + 1))}  ${rgb(t.accent, "████")}  ${t.label}`;
-    }));
-    blank();
-    if (!process.stdin.isTTY) {
-        muted("Not a terminal — pass an id, e.g. lazy-skill theme matrix-green");
-        blank();
-        return 0;
-    }
-    const rl = createInterface({ input: process.stdin, output: process.stdout });
-    try {
-        const answer = (await rl.question(`  Number ${style.gray("(enter to keep)")} `)).trim();
-        if (!answer)
-            return 0;
-        const index = Number(answer) - 1;
-        if (!Number.isInteger(index) || index < 0 || index >= THEME_IDS.length) {
-            blank();
-            muted("Not one of those. Theme unchanged.");
-            blank();
-            return 1;
-        }
-        const chosen = THEME_IDS[index];
-        updateConfig({ theme: chosen });
-        blank();
-        ok(`Theme set to ${rgb(THEMES[chosen].accent, THEMES[chosen].label)}.`);
-        muted("Connect again to carry it to your phone.");
-        blank();
-        return 0;
-    }
-    finally {
-        rl.close();
-    }
+    return 0;
 }

package/dist/index.js

@@ -10,7 +10,7 @@ import { installCommand } from "./commands/install.js";
 import { themeCommand } from "./commands/theme.js";
 import { listenCommand } from "./commands/listen.js";
 import { warnIfOutdated } from "./lib/version-check.js";
-const VERSION = "0.4.0";
+const VERSION = "0.5.0";
 function help() {
     const theme = THEMES[readConfig().theme];
     const cmd = (name) => rgb(theme.accent, name.padEnd(26));
@@ -66,7 +66,7 @@ async function main() {
     // when it pairs a moment later. Only on a genuinely first run, and never
     // for `theme`, which asks on its own.
     if (isFirstRun() && command !== "theme") {
-        updateConfig({ theme: await chooseTheme() });
+        updateConfig({ theme: await chooseTheme(VERSION) });
     }
     if (longRunning)
         await warnIfOutdated(VERSION, THEMES[readConfig().theme]);
@@ -91,7 +91,7 @@ async function main() {
         case "skills":
             return skillsCommand();
         case "theme":
-            return themeCommand(positional[1]);
+            return themeCommand(positional[1], VERSION);
         case "install": {
             const agentFlag = argv.find((a) => a.startsWith("--agent="))?.split("=")[1];
             const yes = flags.has("-y") || flags.has("--yes");

package/dist/ui/banner.js

@@ -0,0 +1,61 @@
+import { rgb, style } from "./theme.js";
+/**
+ * The wordmark, drawn as blocks.
+ *
+ * Only the seven letters in LAZY SKILL are defined — a full alphabet would be
+ * dead weight for a name that never changes. Five rows tall, which reads as a
+ * logo without eating half the terminal.
+ */
+const GLYPHS = {
+    L: ["█   ", "█   ", "█   ", "█   ", "████"],
+    A: [" ██ ", "█  █", "████", "█  █", "█  █"],
+    Z: ["████", "   █", " ██ ", "█   ", "████"],
+    Y: ["█  █", "█  █", " ██ ", " █  ", " █  "],
+    S: [" ███", "█   ", " ██ ", "   █", "███ "],
+    K: ["█  █", "█ █ ", "██  ", "█ █ ", "█  █"],
+    I: ["███", " █ ", " █ ", " █ ", "███"],
+    " ": ["  ", "  ", "  ", "  ", "  "],
+};
+const ROWS = 5;
+function render(word) {
+    const lines = Array.from({ length: ROWS }, () => "");
+    for (const char of word.toUpperCase()) {
+        const glyph = GLYPHS[char];
+        if (!glyph)
+            continue;
+        for (let r = 0; r < ROWS; r++)
+            lines[r] += glyph[r] + " ";
+    }
+    return lines;
+}
+/**
+ * `LAZY` in the terminal's own ink and `SKILL` in the theme accent, matching
+ * the two-tone split the web app uses.
+ */
+export function banner(theme, version) {
+    const left = render("LAZY");
+    const right = render("SKILL");
+    const lines = left.map((row, i) => `  ${style.bold(row)} ${rgb(theme.accent, style.bold(right[i]))}`);
+    // The version sits on the last row, trailing the mark like a signature.
+    lines[ROWS - 1] += `  ${style.gray("v" + version)}`;
+    return lines;
+}
+/**
+ * Bit, in blocks, for sitting beside things.
+ *
+ * A deliberately small silhouette — the hood, the closed eyes, the muzzle.
+ * Anything more detailed turns to mush at terminal resolution.
+ */
+export function mascot(theme, awake = false) {
+    const hood = (t) => rgb(theme.accent, t);
+    // Every row is exactly ten cells wide. Ragged rows shear the silhouette,
+    // and the colour codes make it impossible to eyeball.
+    const eyes = awake ? `${style.bold("o")}  ${style.bold("o")}` : "-  -";
+    return [
+        hood("  ▄████▄  "),
+        hood(" ██") + style.gray("‾‾‾‾") + hood("██ "),
+        hood(" █ ") + eyes + hood(" █ "),
+        hood(" █  ") + style.gray("‿‿") + hood("  █ "),
+        hood("  ▀████▀  "),
+    ];
+}

package/dist/ui/onboarding.js

@@ -1,47 +1,44 @@
-import { createInterface } from "node:readline/promises";
 import { THEMES, THEME_IDS, rgb, style } from "./theme.js";
-import { blank, box, hint, line, muted, welcome } from "./layout.js";
+import { banner, mascot } from "./banner.js";
+import { pointer, select } from "./select.js";
 /**
- * First-run theme choice.
+ * First-run theme choice, with live preview.
  *
- * Asked once, before anything else, because the answer applies to both halves
- * of the product: the terminal colours itself, and the phone adopts the same
- * theme the moment it pairs. Choosing later in two places would be two
- * chances to end up mismatched.
+ * The whole screen — wordmark, mascot, pointer — repaints in whichever theme
+ * is under the cursor, so the choice is made by looking rather than by
+ * imagining. It is asked once because it applies to both halves of the
+ * product: the terminal colours itself, and the phone adopts the same theme
+ * the moment it pairs.
  */
-export async function chooseTheme() {
-    const fallback = "cyber-purple";
-    const theme = THEMES[fallback];
-    blank();
-    welcome(theme, "Welcome to Lazy Skill!");
-    blank();
-    hint("Pick a colour. Your phone will match it when you connect.");
-    blank();
-    box(theme, THEME_IDS.map((id, i) => {
-        const t = THEMES[id];
-        return `${style.gray(String(i + 1))}  ${rgb(t.accent, "████")}  ${t.label}`;
-    }));
-    blank();
-    // A pipe or a CI job has nobody to ask.
-    if (!process.stdin.isTTY) {
-        muted("Not a terminal — using Purple Night. Change it with: lazy-skill theme");
-        blank();
-        return fallback;
-    }
-    const rl = createInterface({ input: process.stdin, output: process.stdout });
-    try {
-        const answer = (await rl.question(`  Number ${style.gray("(enter for 1)")} `)).trim();
-        if (!answer)
-            return fallback;
-        const index = Number(answer) - 1;
-        if (!Number.isInteger(index) || index < 0 || index >= THEME_IDS.length) {
-            // Not worth a re-prompt: the choice is cosmetic and changeable.
-            line(style.gray("  Not one of those — using Purple Night."));
-            return fallback;
-        }
-        return THEME_IDS[index];
-    }
-    finally {
-        rl.close();
-    }
+export async function chooseTheme(version) {
+    const rows = (index) => {
+        const id = THEME_IDS[index];
+        const theme = THEMES[id];
+        const bit = mascot(theme, true);
+        const out = [""];
+        out.push(...banner(theme, version));
+        out.push("");
+        out.push(`  ${style.gray("Pick a colour. Your phone will match it when you connect.")}`);
+        out.push("");
+        THEME_IDS.forEach((themeId, i) => {
+            const t = THEMES[themeId];
+            const active = i === index;
+            const swatch = rgb(t.accent, "████");
+            // Pad before colouring: padEnd counts escape codes as characters, so
+            // padding a coloured string leaves the column ragged.
+            const padded = t.label.padEnd(14);
+            const label = active ? style.bold(padded) : style.gray(padded);
+            // The mascot sits beside the list, aligned to its middle rows.
+            const beside = i >= 1 && i <= 5 ? "  " + bit[i - 1] : "";
+            out.push(`  ${pointer(active)} ${swatch}  ${label}${beside}`);
+        });
+        out.push("");
+        out.push(`  ${style.gray("↑ ↓ to move · enter to choose")}`);
+        out.push("");
+        return out;
+    };
+    return select({
+        choices: THEME_IDS.map((id) => ({ value: id, label: THEMES[id].label })),
+        render: rows,
+    });
 }

package/dist/ui/select.js

@@ -0,0 +1,86 @@
+import { emitKeypressEvents } from "node:readline";
+import { style, hasColor } from "./theme.js";
+/**
+ * Arrow-key selection with live redraw.
+ *
+ * Raw mode rather than a prompt library: the whole dependency would exist to
+ * read four escape sequences. Cursor state is restored in a `finally` and on
+ * SIGINT — leaving a terminal with a hidden cursor and no echo is a genuinely
+ * hostile thing to do to someone who pressed Ctrl-C.
+ */
+export async function select({ choices, initial = 0, render, }) {
+    const stdin = process.stdin;
+    // No TTY means nobody to ask; a pipe or CI takes the default.
+    if (!stdin.isTTY || !hasColor) {
+        for (const row of render(initial))
+            console.log(row);
+        return choices[initial].value;
+    }
+    let index = Math.max(0, Math.min(initial, choices.length - 1));
+    let painted = 0;
+    const paint = () => {
+        // Move back over what was drawn last time and overwrite it, so the list
+        // updates in place instead of scrolling.
+        if (painted > 0)
+            process.stdout.write(`\x1b[${painted}A`);
+        const rows = render(index);
+        for (const row of rows)
+            process.stdout.write(`\r\x1b[K${row}\n`);
+        painted = rows.length;
+    };
+    emitKeypressEvents(stdin);
+    const wasRaw = stdin.isRaw;
+    stdin.setRawMode(true);
+    stdin.resume();
+    process.stdout.write("\x1b[?25l"); // hide cursor
+    const restore = () => {
+        process.stdout.write("\x1b[?25h");
+        stdin.setRawMode(Boolean(wasRaw));
+        stdin.pause();
+    };
+    return new Promise((resolve) => {
+        const onKey = (_chunk, key) => {
+            if (!key)
+                return;
+            if (key.name === "up" || key.name === "k") {
+                index = (index - 1 + choices.length) % choices.length;
+                paint();
+                return;
+            }
+            if (key.name === "down" || key.name === "j") {
+                index = (index + 1) % choices.length;
+                paint();
+                return;
+            }
+            if (key.name === "return" || key.name === "space") {
+                cleanup();
+                resolve(choices[index].value);
+                return;
+            }
+            // Ctrl-C and Escape both accept the highlighted value rather than
+            // throwing: this choice is cosmetic, and refusing to continue over it
+            // would be worse than picking the one under the cursor.
+            if ((key.ctrl && key.name === "c") || key.name === "escape") {
+                cleanup();
+                resolve(choices[index].value);
+                return;
+            }
+            // Number keys jump straight to a row.
+            const digit = Number(key.name);
+            if (Number.isInteger(digit) && digit >= 1 && digit <= choices.length) {
+                index = digit - 1;
+                paint();
+            }
+        };
+        const cleanup = () => {
+            stdin.off("keypress", onKey);
+            restore();
+        };
+        stdin.on("keypress", onKey);
+        paint();
+    });
+}
+/** The pointer column for a row. */
+export function pointer(active) {
+    return active ? style.bold("❯") : " ";
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lazy-skill",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Found an AI skill while scrolling? Install it to your computer from your phone.",
   "type": "module",
   "bin": {