lazy-skill 0.3.0 → 0.4.0

package/dist/commands/connect.js

@@ -3,8 +3,9 @@ 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, welcome } from "../ui/layout.js";
 import { messages } from "../ui/messages.js";
 import { Spinner } from "../ui/spinner.js";
 function friendlyPlatform() {
@@ -23,8 +24,9 @@ export async function connectCommand(options) {
     const config = readConfig();
     const theme = THEMES[config.theme];
     blank();
-    brand(theme);
-    muted("See it. Search it. Install it.");
+    welcome(theme, "Welcome to Lazy Skill!");
+    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 +61,13 @@ 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.
+    const plate = await renderQr(session.pairUrl);
+    const width = plate.length ? visibleWidth(plate[0]) + 4 : boxWidth();
+    box(theme, plate.map((row) => centre(row, width)), width);
     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,47 +1,62 @@
 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";
 /**
  * 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) {
     const current = readConfig().theme;
+    const theme = THEMES[current];
     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) => {
+    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("○");
-        console.log(`  ${marker} ${i + 1}. ${rgb(t.accent, "████")} ${t.label}`);
-    });
-    console.log();
+        return `${marker} ${style.gray(String(i + 1))}  ${rgb(t.accent, "████")}  ${t.label}`;
+    }));
+    blank();
     if (!process.stdin.isTTY) {
-        console.log(`  ${style.gray("Not a terminal — pass a theme id instead, e.g. lazy-skill theme matrix-green")}\n`);
+        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 (enter to keep current): ")).trim();
+        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) {
-            console.log(`\n  ${style.yellow("!")} Not one of the options. Theme unchanged.\n`);
+            blank();
+            muted("Not one of those. Theme unchanged.");
+            blank();
             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`);
+        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 {

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.4.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() });
+    }
     if (longRunning)
         await warnIfOutdated(VERSION, THEMES[readConfig().theme]);
     if (!command) {

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/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,47 @@
+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";
+/**
+ * First-run theme choice.
+ *
+ * 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.
+ */
+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();
+    }
+}

package/package.json

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