lazy-skill 0.2.1 → 0.4.0

package/dist/commands/connect.js

@@ -2,9 +2,10 @@ import { hostname, platform, release } from "node:os";
 import { api, ApiError } from "../lib/api.js";
 import { readConfig, updateConfig } from "../lib/config.js";
 import { detectAgents } from "../adapters/index.js";
-import { THEMES, rgb, style } from "../ui/theme.js";
-import { bottom, centered, mascot, row, statusLine, top, wordmark } from "../ui/box.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 { messages } from "../ui/messages.js";
 import { Spinner } from "../ui/spinner.js";
 function friendlyPlatform() {
@@ -14,43 +15,34 @@ function friendlyPlatform() {
 function deviceName() {
     return hostname().replace(/\.local$/, "").slice(0, 80) || "This computer";
 }
-function printHeader(theme) {
-    console.log();
-    console.log(top(theme));
-    console.log(row(theme));
-    for (const line of wordmark(theme))
-        console.log(centered(theme, line));
-    console.log(centered(theme, style.dim("Too lazy to install manually? Same.")));
-    console.log(row(theme));
-}
-function printAgents(theme, agents) {
-    console.log(row(theme, style.bold("Detected AI tools")));
-    console.log(row(theme));
+function printAgents(agents) {
     for (const agent of agents) {
-        console.log(row(theme, statusLine(agent.label, agent.detected ? true : null)));
+        status(agent.label, agent.detected ? "ok" : "off");
     }
 }
 export async function connectCommand(options) {
     const config = readConfig();
     const theme = THEMES[config.theme];
-    // Detection runs before the card is drawn. A spinner writes to the current
-    // line, so anything transient printed between two card rows tears the frame.
-    const detectSpinner = new Spinner(theme, messages.booting()[0]).start();
+    blank();
+    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.
+    const spinner = new Spinner(theme, "looking for your AI tools").start();
     const agents = await detectAgents();
     const detectedIds = agents.filter((a) => a.detected).map((a) => a.id);
-    detectSpinner.stop();
-    printHeader(theme);
-    console.log(row(theme, `${style.gray(">")} ${messages.humanFound()} ${style.green("✓")}`));
-    console.log(row(theme, `${style.gray(">")} ${messages.generating()}`));
-    console.log(row(theme));
+    spinner.stop();
+    printAgents(agents);
     if (options.verbose) {
+        blank();
         for (const agent of agents) {
             if (agent.evidence)
-                console.log(row(theme, style.gray(`  ${agent.label}: ${agent.evidence}`)));
+                muted(`  ${agent.label}: ${agent.evidence}`);
         }
-        console.log(row(theme));
     }
-    // --- open a pairing session -----------------------------------------
+    blank();
     let session;
     try {
         session = await api("/api/pairing/start", {
@@ -64,26 +56,24 @@ export async function connectCommand(options) {
         });
     }
     catch (err) {
-        console.log(bottom(theme));
-        console.log();
-        const message = err instanceof ApiError ? err.message : messages.failed();
-        console.error(`  ${style.red("✗")} ${message}`);
-        console.error(`  ${style.gray("Set LAZY_SKILL_API_URL if you are pointing at a local server.")}`);
-        console.log();
+        fail(err instanceof ApiError ? err.message : messages.failed());
+        muted("Set LAZY_SKILL_API_URL to point at a different server.");
+        blank();
         return 1;
     }
-    console.log(bottom(theme));
-    console.log();
-    const qrLines = await renderQr(session.pairUrl);
-    for (const line of qrLines)
-        console.log(line);
-    console.log(`  ${style.bold("Scan with the Lazy Skill app")}`);
-    console.log(`  ${style.gray(session.pairUrl)}`);
-    console.log();
-    // --- wait for the phone ---------------------------------------------
+    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.
+    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();
     const deadline = Date.now() + session.expiresInMs;
-    const waitSpinner = new Spinner(theme, messages.waiting()).start();
-    let lastNudge = Date.now();
+    const waiting = new Spinner(theme, "waiting for scan").start();
+    let nudgedAt = Date.now();
     let result = { status: "waiting" };
     while (Date.now() < deadline) {
         await sleep(1500);
@@ -97,13 +87,12 @@ export async function connectCommand(options) {
         }
         if (result.status !== "waiting")
             break;
-        // Rotate the waiting line occasionally so a long wait stays alive.
-        if (Date.now() - lastNudge > 12_000) {
-            waitSpinner.update(messages.waiting());
-            lastNudge = Date.now();
+        if (Date.now() - nudgedAt > 15_000) {
+            waiting.update(messages.waiting());
+            nudgedAt = Date.now();
         }
     }
-    waitSpinner.stop();
+    waiting.stop();
     if (result.status === "paired" && result.deviceToken) {
         updateConfig({
             deviceToken: result.deviceToken,
@@ -111,41 +100,25 @@ export async function connectCommand(options) {
             deviceName: result.device?.name ?? deviceName(),
             connectedAt: new Date().toISOString(),
         });
-        console.log(`  ${style.gray(">")} ${messages.scanned()} ${rgb(theme.support, "📱")}`);
-        console.log(`  ${style.gray(">")} ${messages.authenticating()} ${style.green("✓")}`);
-        console.log();
-        console.log(top(theme));
-        console.log(row(theme));
-        for (const line of mascot(theme, true))
-            console.log(centered(theme, line));
-        console.log(row(theme));
-        console.log(centered(theme, rgb(theme.accent, style.bold(messages.connected()))));
-        console.log(row(theme));
-        printAgents(theme, agents);
-        console.log(row(theme));
-        console.log(centered(theme, style.dim(messages.signOff())));
-        console.log(row(theme));
-        console.log(bottom(theme));
-        console.log();
-        console.log(`  ${style.gray("Credential stored in ~/.lazyskill/config.json (0600).")}`);
-        // Keep listening by default. Someone who has just paired a computer and
-        // reached for their phone wants an install to land, not a second command
-        // to remember — a queued job with nothing polling for it just looks broken.
+        ok(style.bold("Connected"));
+        line(style.gray(result.device?.name ?? deviceName()));
+        blank();
         if (options.listen === false) {
-            console.log(`  ${style.gray("Run")} ${rgb(theme.accent, "lazy-skill listen")} ${style.gray("when you want to install from your phone.")}`);
-            console.log();
+            muted("Run lazy-skill when you want to install from your phone.");
+            blank();
             return 0;
         }
-        console.log();
         const { listenCommand } = await import("./listen.js");
         return listenCommand();
     }
-    const reason = result.status === "consumed"
-        ? "That code was already used."
-        : messages.expired();
-    console.log(`  ${style.yellow("!")} ${reason}`);
-    console.log(`  ${style.gray("Run")} ${rgb(theme.accent, "npx lazy-skill connect")} ${style.gray("for a fresh one.")}`);
-    console.log();
+    if (result.status === "consumed") {
+        fail("That code was already used.");
+    }
+    else {
+        fail(messages.expired());
+    }
+    muted("Run lazy-skill for a fresh one.");
+    blank();
     return 1;
 }
 function sleep(ms) {

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 { bottom, centered, mascot, row, top } from "../ui/box.js";
+import { blank, fail, line, muted, ok, status, welcome } from "../ui/layout.js";
 import { messages } from "../ui/messages.js";
 const STAGE_LABEL = {
     starting: "Preparing",
@@ -86,18 +86,15 @@ export async function installCommand(ref, options = { yes: false }) {
         return 1;
     }
     // Show exactly what will run, before it runs.
-    console.log();
-    console.log(top(theme));
-    console.log(row(theme));
-    console.log(row(theme, style.bold(`Install ${ref}`)));
-    console.log(row(theme, `for ${targets.map((t) => t.label).join(", ")}`));
-    console.log(row(theme, style.gray(options.project ? "scope: this project" : "scope: global")));
-    console.log(row(theme));
-    console.log(row(theme, style.gray("This will run:")));
-    console.log(row(theme, rgb(theme.accent, describePlan(plan).slice(0, 48))));
-    console.log(row(theme));
-    console.log(bottom(theme));
-    console.log();
+    blank();
+    welcome(theme, "Lazy Skill");
+    blank();
+    line(`${style.bold(ref)}`);
+    muted(`for ${targets.map((t) => t.label).join(", ")} · ${options.project ? "this project" : "global"}`);
+    blank();
+    muted("This will run:");
+    line(rgb(theme.accent, describePlan(plan)));
+    blank();
     if (!options.yes && !(await confirm("Continue?"))) {
         console.log(`  ${style.gray("Cancelled. Nothing was installed.")}\n`);
         return 1;
@@ -111,7 +108,7 @@ export async function installCommand(ref, options = { yes: false }) {
         if (progress.stage === "done" || progress.stage === "failed")
             return;
         const label = STAGE_LABEL[progress.stage] ?? progress.stage;
-        console.log(`  ${label.padEnd(12)} ${progressBar(theme, progress.stage)}`);
+        line(`${style.gray(label.padEnd(12))} ${progressBar(theme, progress.stage)}`);
     };
     // One adapter at a time, so a failure names the agent it belongs to.
     const failures = [];
@@ -124,28 +121,20 @@ export async function installCommand(ref, options = { yes: false }) {
     }
     console.log();
     if (failures.length > 0) {
-        console.log(`  ${style.red("✗")} ${messages.failed()}`);
+        fail(messages.failed());
         for (const failure of failures)
-            console.log(`  ${style.gray(failure)}`);
-        console.log(`  ${style.gray("We haven't blamed you yet.")}\n`);
+            muted(failure);
+        blank();
         return 1;
     }
-    console.log(top(theme));
-    console.log(row(theme));
-    for (const line of mascot(theme, true))
-        console.log(centered(theme, line));
-    console.log(row(theme));
-    console.log(centered(theme, rgb(theme.accent, style.bold("INSTALLED!"))));
-    console.log(row(theme));
-    console.log(row(theme, `${ref}`));
-    for (const target of targets) {
-        console.log(row(theme, `${target.label.padEnd(12)} ${style.green("✓")}`));
-    }
-    console.log(row(theme));
-    console.log(row(theme, `${style.gray("You contributed")}   ${style.bold("0% effort")}`));
-    console.log(row(theme, `${style.gray("Lazy Skill")}        ${rgb(theme.accent, "100% effort")}`));
-    console.log(row(theme));
-    console.log(bottom(theme));
-    console.log();
+    blank();
+    ok(style.bold("Installed"));
+    line(style.gray(ref));
+    blank();
+    for (const target of targets)
+        status(target.label, "ok", "installed");
+    blank();
+    muted("You contributed 0% effort. Lazy Skill did the rest.");
+    blank();
     return 0;
 }

package/dist/commands/skills.js

@@ -4,10 +4,10 @@ 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 { bottom, centered, row, top, wordmark } from "../ui/box.js";
+import { blank, line, muted, status, welcome } from "../ui/layout.js";
 /**
- * Where each agent keeps installed skills. These are read-only lookups — the
- * CLI lists what is on disk and never infers a skill that is not there.
+ * 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.
  */
 const SKILL_DIRS = {
     claude: [homePath(".claude", "skills")],
@@ -39,36 +39,30 @@ function listSkillDirs(paths) {
 export async function skillsCommand() {
     const theme = THEMES[readConfig().theme];
     const agents = await detectAgents();
-    console.log();
-    console.log(top(theme));
-    console.log(row(theme));
-    for (const line of wordmark(theme))
-        console.log(centered(theme, line));
-    console.log(row(theme));
-    console.log(row(theme, style.bold("Installed skills on this computer")));
-    console.log(row(theme));
+    blank();
+    welcome(theme, "Lazy Skill");
+    blank();
     let total = 0;
     for (const agent of agents) {
         if (!agent.detected) {
-            console.log(row(theme, `${agent.label.padEnd(10)} ${style.gray("not detected")}`));
+            status(agent.label, "off");
             continue;
         }
         const skills = listSkillDirs(SKILL_DIRS[agent.id] ?? []);
         total += skills.length;
-        console.log(row(theme, `${style.bold(agent.label.padEnd(10))} ${skills.length ? style.green(`${skills.length}`) : style.gray("none found")}`));
-        for (const skill of skills.slice(0, 20)) {
-            console.log(row(theme, style.gray(`  · ${skill}`)));
+        status(agent.label, "ok", skills.length ? `${skills.length} installed` : "none installed");
+        for (const skill of skills.slice(0, 12)) {
+            line(style.gray(`     ${skill}`));
         }
-        if (skills.length > 20) {
-            console.log(row(theme, style.gray(`  … and ${skills.length - 20} more`)));
+        if (skills.length > 12) {
+            line(style.gray(`     and ${skills.length - 12} more`));
         }
     }
-    console.log(row(theme));
-    if (total === 0) {
-        console.log(row(theme, style.gray("Nothing installed yet. You haven't been lazy enough.")));
-        console.log(row(theme));
-    }
-    console.log(bottom(theme));
-    console.log();
+    blank();
+    if (total === 0)
+        muted("Nothing installed yet. You haven't been lazy enough.");
+    else
+        muted(`${total} skill${total === 1 ? "" : "s"} across your tools.`);
+    blank();
     return 0;
 }

package/dist/commands/status.js

@@ -2,54 +2,46 @@ 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 { bottom, centered, row, statusLine, top, wordmark } from "../ui/box.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();
-    console.log();
-    console.log(top(theme));
-    console.log(row(theme));
-    for (const line of wordmark(theme))
-        console.log(centered(theme, line));
-    console.log(row(theme));
+    blank();
+    welcome(theme, "Lazy Skill");
+    blank();
     if (!config.deviceToken) {
-        console.log(row(theme, style.gray("Not connected.")));
-        console.log(row(theme));
-        console.log(row(theme, `Run ${style.bold("npx lazy-skill connect")}`));
-        console.log(row(theme));
-        console.log(bottom(theme));
-        console.log();
+        status("computer", "off", "not connected");
+        blank();
+        muted("Run lazy-skill to pair.");
+        blank();
         return 1;
     }
-    // Detection is local and always shown. The server round trip only confirms
-    // the credential is still good, so a network failure downgrades the report
-    // rather than hiding what we do know.
-    let remote = null;
+    // Detection is local and always shown. The round trip only confirms the
+    // credential still works, so a network failure downgrades the report rather
+    // than hiding what we already know.
+    let reachable = false;
     let remoteError = null;
     try {
-        remote = await api("/api/cli/status", {
+        await api("/api/cli/status", {
             authed: true,
             body: { detectedAgents: agents.filter((a) => a.detected).map((a) => a.id) },
         });
+        reachable = true;
     }
     catch (err) {
         remoteError = err instanceof ApiError ? err.message : "Could not reach the server.";
     }
-    console.log(row(theme, `${style.bold(config.deviceName ?? "This computer")}`));
-    console.log(row(theme, remote
-        ? `${style.green("●")} Connected`
-        : `${style.yellow("●")} Credential stored, server unreachable`));
-    console.log(row(theme));
+    line(style.bold(config.deviceName ?? "This computer"));
+    status("connection", reachable ? "ok" : "pending", reachable ? "connected" : "stored, server unreachable");
+    blank();
     for (const agent of agents) {
-        console.log(row(theme, statusLine(agent.label, agent.detected ? true : null)));
+        status(agent.label, agent.detected ? "ok" : "off");
     }
-    console.log(row(theme));
-    console.log(bottom(theme));
+    blank();
     if (remoteError) {
-        console.log();
-        console.log(`  ${style.gray(remoteError)}`);
+        muted(remoteError);
+        blank();
     }
-    console.log();
     return 0;
 }

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.2.1";
+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

@@ -0,0 +1,80 @@
+import { rgb, style, visibleWidth } from "./theme.js";
+/**
+ * The CLI's visual language.
+ *
+ * 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.
+ */
+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();
+}
+export function line(text = "") {
+    console.log(text ? `${PAD}${text}` : "");
+}
+export function muted(text) {
+    console.log(`${PAD}${style.gray(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)}`);
+}
+/** An indented hint under the welcome. */
+export function hint(text) {
+    console.log(`${PAD}  ${style.gray(text)}`);
+}
+const DOT = {
+    ok: style.green("●"),
+    pending: style.yellow("●"),
+    off: style.gray("○"),
+    fail: style.red("●"),
+};
+export function status(label, tone, detail = "") {
+    const width = 10;
+    const name = label.length >= width ? label : label + " ".repeat(width - label.length);
+    const text = tone === "ok"
+        ? style.green(detail || "ready")
+        : tone === "fail"
+            ? style.red(detail || "failed")
+            : style.gray(detail || "not found");
+    console.log(`${PAD}${DOT[tone]} ${name} ${text}`);
+}
+export function ok(text) {
+    console.log(`${PAD}${style.green("✓")} ${text}`);
+}
+export function warn(text) {
+    console.log(`${PAD}${style.yellow("!")} ${text}`);
+}
+export function fail(text) {
+    console.log(`${PAD}${style.red("✗")} ${text}`);
+}
+/**
+ * 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/dist/ui/qr.js

@@ -2,6 +2,18 @@ import QRCode from "qrcode";
 /** The terminal renderer paints black modules on a white background. */
 const QR_OPEN = "\x1b[47m\x1b[30m";
 const QR_CLOSE = "\x1b[0m";
+// eslint-disable-next-line no-control-regex
+const ANSI = /\x1b\[[0-9;]*m/g;
+function stripAnsi(text) {
+    return text.replace(ANSI, "");
+}
+/** Visible cell count, ignoring escape sequences. */
+export function visibleLength(text) {
+    return stripAnsi(text).length;
+}
+function escapeRe(text) {
+    return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
 /**
  * Renders the pairing QR.
  *
@@ -10,12 +22,12 @@ const QR_CLOSE = "\x1b[0m";
  * reliability is not negotiable for decoration (§10).
  *
  * The quiet zone is added here rather than passed as an option: node-qrcode's
- * terminal renderer ignores `margin` when `small` is set, and ships only a
- * single module of padding. The standard wants four, and without it the finder
- * patterns sit flush against surrounding terminal text, which measurably hurts
- * scanning. Each rendered row is two modules tall (half-blocks), so two blank
- * rows above and below give the four modules vertically, and three extra
- * columns each side top up the one already present.
+ * terminal renderer ignores `margin` when `small` is set and ships only a
+ * single module of padding, where the standard wants four. Without it the
+ * finder patterns sit flush against surrounding text, which measurably hurts
+ * scanning. Each rendered row is two modules tall, so two blank rows above and
+ * below give four modules vertically, and three extra columns per side top up
+ * the one already present.
  */
 export async function renderQr(url) {
     const art = await QRCode.toString(url, {
@@ -25,11 +37,11 @@ export async function renderQr(url) {
     });
     const rows = art
         .split("\n")
-        .filter((line) => stripAnsi(line).length > 0)
+        .filter((row) => stripAnsi(row).length > 0)
         // Drop only the wrapper this renderer adds. Interior codes are left alone:
         // the final half-row recolours per cell, and rewriting that would corrupt
         // the modules themselves.
-        .map((line) => line.replace(new RegExp(`^${escapeRe(QR_OPEN)}`), "").replace(/\x1b\[0m$/, ""));
+        .map((row) => row.replace(new RegExp(`^${escapeRe(QR_OPEN)}`), "").replace(/\x1b\[0m$/, ""));
     if (rows.length === 0)
         return [];
     const SIDE = 3;
@@ -45,15 +57,15 @@ export async function renderQr(url) {
     });
     return [blank, blank, ...padded, blank, blank];
 }
-// eslint-disable-next-line no-control-regex
-const ANSI = /\x1b\[[0-9;]*m/g;
-function stripAnsi(text) {
-    return text.replace(ANSI, "");
-}
-/** Visible cell count, ignoring escape sequences. */
-export function visibleLength(text) {
-    return stripAnsi(text).length;
-}
-function escapeRe(text) {
-    return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+/**
+ * The QR, indented to sit with the rest of the output.
+ *
+ * No frame. The white plate is already a clean, high-contrast rectangle with
+ * its own quiet zone — drawing rails around it added a border glyph to every
+ * single row and made the densest thing on screen denser still. Indentation
+ * places it; nothing else is needed.
+ */
+export async function renderFramedQr(url) {
+    const plate = await renderQr(url);
+    return plate.map((row) => `  ${row}`);
 }

package/package.json

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

package/dist/ui/box.js

@@ -1,56 +0,0 @@
-import { rgb, style, visibleWidth } from "./theme.js";
-/**
- * The framed card the CLI draws. Rounded corners and a themed border, to match
- * the cards on the brand board.
- */
-const B = {
-    tl: "╭", tr: "╮", bl: "╰", br: "╯", h: "─", v: "│",
-};
-export const CARD_WIDTH = 56;
-export function rule(theme, width = CARD_WIDTH) {
-    return rgb(theme.accent, B.h.repeat(width - 2));
-}
-export function top(theme, width = CARD_WIDTH) {
-    return rgb(theme.accent, B.tl + B.h.repeat(width - 2) + B.tr);
-}
-export function bottom(theme, width = CARD_WIDTH) {
-    return rgb(theme.accent, B.bl + B.h.repeat(width - 2) + B.br);
-}
-/** A content row, padded to the card width using visible (not raw) length. */
-export function row(theme, content = "", width = CARD_WIDTH) {
-    const inner = width - 4;
-    const pad = Math.max(0, inner - visibleWidth(content));
-    const edge = rgb(theme.accent, B.v);
-    return `${edge} ${content}${" ".repeat(pad)} ${edge}`;
-}
-export function centered(theme, content, width = CARD_WIDTH) {
-    const inner = width - 4;
-    const len = visibleWidth(content);
-    const left = Math.max(0, Math.floor((inner - len) / 2));
-    return row(theme, " ".repeat(left) + content, width);
-}
-/**
- * The wordmark, in the same two-tone split the web app uses: LAZY in the
- * terminal's default ink, SKILL in the theme accent.
- */
-export function wordmark(theme) {
-    return [
-        `${style.bold("LAZY")} ${rgb(theme.accent, style.bold("SKILL"))}${rgb(theme.support, " Zz")}`,
-    ];
-}
-/** Bit, small enough to sit inside a card. */
-export function mascot(theme, awake = false) {
-    const hood = (t) => rgb(theme.accent, t);
-    const eyes = awake ? "o o" : "- -";
-    return [
-        hood("  ▄███▄  "),
-        hood(" █") + `\x1b[0m${eyes}` + hood("█ "),
-        hood(" █ ") + "‿" + hood(" █ "),
-        hood("  ▀███▀  "),
-    ];
-}
-export function statusLine(label, ok) {
-    const mark = ok === null ? style.gray("○") : ok ? style.green("✓") : style.gray("○");
-    const text = ok === null ? style.gray("Not detected") : ok ? style.green("Ready") : style.gray("Not detected");
-    return `${label.padEnd(12)} ${mark} ${text}`;
-}