lazy-skill 0.3.0 → 0.5.0

package/dist/commands/connect.js

@@ -3,10 +3,13 @@ import { api, ApiError } from "../lib/api.js";
 import { readConfig, updateConfig } from "../lib/config.js";
 import { detectAgents } from "../adapters/index.js";
 import { THEMES, style } from "../ui/theme.js";
-import { renderFramedQr } from "../ui/qr.js";
-import { blank, brand, fail, heading, line, muted, ok, status } from "../ui/layout.js";
+import { boxWidth, visibleWidth } from "../ui/layout.js";
+import { renderQr } from "../ui/qr.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";
@@ -23,8 +26,10 @@ export async function connectCommand(options) {
     const config = readConfig();
     const theme = THEMES[config.theme];
     blank();
-    brand(theme);
-    muted("See it. Search it. Install it.");
+    for (const row of banner(theme, VERSION))
+        console.log(row);
+    blank();
+    hint("See it. Search it. Install it.");
     blank();
     // Detection runs before anything is drawn: a spinner writes to the current
     // line, and anything transient printed mid-layout tears it.
@@ -59,11 +64,21 @@ export async function connectCommand(options) {
         blank();
         return 1;
     }
-    heading(theme, "Scan to connect");
-    muted("Open Lazy Skill on your phone and point the camera here.");
+    hint("Open Lazy Skill on your phone and scan this.");
     blank();
-    for (const row of await renderFramedQr(session.pairUrl))
-        console.log(row);
+    // The QR is the one thing to act on, so it gets the box. Its own quiet zone
+    // 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/install.js

@@ -2,7 +2,7 @@ import { createInterface } from "node:readline/promises";
 import { readConfig } from "../lib/config.js";
 import { adapterFor, createInstallPlan, describePlan, detectAgents, InvalidPlanError, } from "../adapters/index.js";
 import { THEMES, rgb, style } from "../ui/theme.js";
-import { blank, brand, fail, line, muted, ok, status } from "../ui/layout.js";
+import { blank, fail, line, muted, ok, status, welcome } from "../ui/layout.js";
 import { messages } from "../ui/messages.js";
 const STAGE_LABEL = {
     starting: "Preparing",
@@ -87,7 +87,7 @@ export async function installCommand(ref, options = { yes: false }) {
     }
     // Show exactly what will run, before it runs.
     blank();
-    brand(theme);
+    welcome(theme, "Lazy Skill");
     blank();
     line(`${style.bold(ref)}`);
     muted(`for ${targets.map((t) => t.label).join(", ")} · ${options.project ? "this project" : "global"}`);

package/dist/commands/skills.js

@@ -4,7 +4,7 @@ import { homePath } from "../adapters/detect.js";
 import { detectAgents } from "../adapters/index.js";
 import { readConfig } from "../lib/config.js";
 import { THEMES, style } from "../ui/theme.js";
-import { blank, brand, line, muted, status } from "../ui/layout.js";
+import { blank, line, muted, status, welcome } from "../ui/layout.js";
 /**
  * Where each agent keeps installed skills. Read-only lookups — the CLI lists
  * what is on disk and never infers a skill that is not there.
@@ -40,7 +40,7 @@ export async function skillsCommand() {
     const theme = THEMES[readConfig().theme];
     const agents = await detectAgents();
     blank();
-    brand(theme);
+    welcome(theme, "Lazy Skill");
     blank();
     let total = 0;
     for (const agent of agents) {

package/dist/commands/status.js

@@ -2,13 +2,13 @@ import { api, ApiError } from "../lib/api.js";
 import { readConfig } from "../lib/config.js";
 import { detectAgents } from "../adapters/index.js";
 import { THEMES, style } from "../ui/theme.js";
-import { blank, brand, line, muted, status } from "../ui/layout.js";
+import { blank, line, muted, status, welcome } from "../ui/layout.js";
 export async function statusCommand() {
     const config = readConfig();
     const theme = THEMES[config.theme];
     const agents = await detectAgents();
     blank();
-    brand(theme);
+    welcome(theme, "Lazy Skill");
     blank();
     if (!config.deviceToken) {
         status("computer", "off", "not connected");

package/dist/commands/theme.js

@@ -1,50 +1,59 @@
-import { createInterface } from "node:readline/promises";
 import { readConfig, updateConfig } from "../lib/config.js";
 import { THEMES, THEME_IDS, rgb, style } from "../ui/theme.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 adopts the same look.
+ * 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;
     if (requested) {
         const match = THEME_IDS.find((id) => id === requested);
         if (!match) {
-            console.error(`\n  ${style.red("✗")} Unknown theme "${requested}".`);
-            console.error(`  ${style.gray("Options:")} ${THEME_IDS.join(", ")}\n`);
+            blank();
+            muted(`Unknown theme "${requested}".`);
+            muted(THEME_IDS.join(", "));
+            blank();
             return 1;
         }
         updateConfig({ theme: match });
-        console.log(`\n  ${style.green("✓")} Theme set to ${rgb(THEMES[match].accent, THEMES[match].label)}.\n`);
+        blank();
+        ok(`Theme set to ${rgb(THEMES[match].accent, THEMES[match].label)}.`);
+        muted("Connect again to carry it to your phone.");
+        blank();
         return 0;
     }
-    console.log(`\n  ${style.bold("Pick a theme")}\n`);
-    THEME_IDS.forEach((id, i) => {
-        const t = THEMES[id];
-        const marker = id === current ? style.green("●") : style.gray("○");
-        console.log(`  ${marker} ${i + 1}. ${rgb(t.accent, "████")} ${t.label}`);
+    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;
+        },
     });
-    console.log();
-    if (!process.stdin.isTTY) {
-        console.log(`  ${style.gray("Not a terminal — pass a theme id instead, e.g. lazy-skill theme matrix-green")}\n`);
-        return 0;
-    }
-    const rl = createInterface({ input: process.stdin, output: process.stdout });
-    try {
-        const answer = (await rl.question("  Number (enter to keep current): ")).trim();
-        if (!answer)
-            return 0;
-        const index = Number(answer) - 1;
-        if (!Number.isInteger(index) || index < 0 || index >= THEME_IDS.length) {
-            console.log(`\n  ${style.yellow("!")} Not one of the options. Theme unchanged.\n`);
-            return 1;
-        }
-        const chosen = THEME_IDS[index];
-        updateConfig({ theme: chosen });
-        console.log(`\n  ${style.green("✓")} Theme set to ${rgb(THEMES[chosen].accent, THEMES[chosen].label)}.\n`);
-        return 0;
-    }
-    finally {
-        rl.close();
-    }
+    updateConfig({ theme: chosen });
+    ok(`Theme set to ${rgb(THEMES[chosen].accent, THEMES[chosen].label)}.`);
+    muted("Connect again to carry it to your phone.");
+    blank();
+    return 0;
 }

package/dist/index.js

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
-import { readConfig } from "./lib/config.js";
+import { isFirstRun, readConfig, updateConfig } from "./lib/config.js";
+import { chooseTheme } from "./ui/onboarding.js";
 import { THEMES, rgb, style } from "./ui/theme.js";
 import { connectCommand } from "./commands/connect.js";
 import { disconnectCommand } from "./commands/disconnect.js";
@@ -9,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.3.0";
+const VERSION = "0.5.0";
 function help() {
     const theme = THEMES[readConfig().theme];
     const cmd = (name) => rgb(theme.accent, name.padEnd(26));
@@ -60,6 +61,13 @@ async function main() {
     // Only for the long-running commands: a stale copy matters most when the
     // user is about to sit and wait for something that will never work.
     const longRunning = !command || command === "connect" || command === "listen";
+    // Ask for a colour before anything is drawn, so the first thing the user
+    // sees is already in their theme — and so the phone has something to adopt
+    // 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(VERSION) });
+    }
     if (longRunning)
         await warnIfOutdated(VERSION, THEMES[readConfig().theme]);
     if (!command) {
@@ -83,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/lib/config.js

@@ -8,6 +8,10 @@ const DEFAULTS = { theme: DEFAULT_THEME };
 export function configPath() {
     return FILE;
 }
+/** True before the user has ever been asked anything. */
+export function isFirstRun() {
+    return !existsSync(FILE);
+}
 export function readConfig() {
     try {
         if (!existsSync(FILE))

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/layout.js

@@ -2,30 +2,33 @@ import { rgb, style, visibleWidth } from "./theme.js";
 /**
  * The CLI's visual language.
  *
- * No frames. The old design wrapped everything in a box, which meant every
- * line carried two border glyphs and a fixed width, and the content had to
- * fight for the space between them. Indentation and blank lines do the same
- * grouping work without the noise, and they reflow on any terminal size.
+ * One box, around the thing the user is meant to act on — the QR, a prompt, a
+ * result. Everything else is indented text. Framing every line was the
+ * problem before: two border glyphs per row, a fixed width, and content
+ * squeezed between them.
  */
-const PAD = "  ";
+export const PAD = "  ";
+/** Box width, clamped so it stays readable in a narrow terminal. */
+export function boxWidth() {
+    const columns = process.stdout.columns ?? 80;
+    return Math.max(44, Math.min(72, columns - 4));
+}
 export function blank() {
     console.log();
 }
-/** The wordmark. Two-tone, matching the web app. */
-export function brand(theme) {
-    console.log(`${PAD}${style.bold("LAZY")} ${rgb(theme.accent, style.bold("SKILL"))}${rgb(theme.support, " Zz")}`);
+export function line(text = "") {
+    console.log(text ? `${PAD}${text}` : "");
 }
-/** A quiet line of supporting text. */
 export function muted(text) {
     console.log(`${PAD}${style.gray(text)}`);
 }
-/** A normal line. */
-export function line(text = "") {
-    console.log(text ? `${PAD}${text}` : "");
+/** The welcome line. The mark, then the product, then a greeting. */
+export function welcome(theme, text) {
+    console.log(`${PAD}${rgb(theme.accent, "✻")} ${style.bold(text)}`);
 }
-/** A heading, used sparingly — one per screen at most. */
-export function heading(theme, text) {
-    console.log(`${PAD}${rgb(theme.accent, style.bold(text))}`);
+/** An indented hint under the welcome. */
+export function hint(text) {
+    console.log(`${PAD}  ${style.gray(text)}`);
 }
 const DOT = {
     ok: style.green("●"),
@@ -33,7 +36,6 @@ const DOT = {
     off: style.gray("○"),
     fail: style.red("●"),
 };
-/** `● Claude    ready` — the dot carries the state, the word confirms it. */
 export function status(label, tone, detail = "") {
     const width = 10;
     const name = label.length >= width ? label : label + " ".repeat(width - label.length);
@@ -44,18 +46,6 @@ export function status(label, tone, detail = "") {
             : style.gray(detail || "not found");
     console.log(`${PAD}${DOT[tone]} ${name} ${text}`);
 }
-/** A step in a sequence, numbered so the order is obvious. */
-export function step(theme, n, text) {
-    console.log(`${PAD}${rgb(theme.accent, String(n))}  ${text}`);
-}
-/** Something the user is meant to type or scan. */
-export function emphasis(theme, text) {
-    console.log(`${PAD}${rgb(theme.accent, text)}`);
-}
-/** A short rule, only where a real break is needed. */
-export function divider(width = 34) {
-    console.log(`${PAD}${style.gray("─".repeat(width))}`);
-}
 export function ok(text) {
     console.log(`${PAD}${style.green("✓")} ${text}`);
 }
@@ -65,4 +55,26 @@ export function warn(text) {
 export function fail(text) {
     console.log(`${PAD}${style.red("✗")} ${text}`);
 }
-export { PAD, visibleWidth };
+/**
+ * The one box.
+ *
+ * Rows are padded to a common width using their *visible* length, so colour
+ * codes inside the content cannot push the right border out of alignment.
+ */
+export function box(theme, rows, width = boxWidth()) {
+    const edge = (left, right) => console.log(`${PAD}${rgb(theme.accent, left + "─".repeat(width - 2) + right)}`);
+    const bar = rgb(theme.accent, "│");
+    edge("╭", "╮");
+    for (const row of rows) {
+        const pad = Math.max(0, width - 4 - visibleWidth(row));
+        console.log(`${PAD}${bar} ${row}${" ".repeat(pad)} ${bar}`);
+    }
+    edge("╰", "╯");
+}
+/** Centres a row inside the box. */
+export function centre(text, width = boxWidth()) {
+    const inner = width - 4;
+    const left = Math.max(0, Math.floor((inner - visibleWidth(text)) / 2));
+    return " ".repeat(left) + text;
+}
+export { visibleWidth };

package/dist/ui/onboarding.js

@@ -0,0 +1,44 @@
+import { THEMES, THEME_IDS, rgb, style } from "./theme.js";
+import { banner, mascot } from "./banner.js";
+import { pointer, select } from "./select.js";
+/**
+ * First-run theme choice, with live preview.
+ *
+ * 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(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.3.0",
+  "version": "0.5.0",
   "description": "Found an AI skill while scrolling? Install it to your computer from your phone.",
   "type": "module",
   "bin": {