coding-friend-cli 1.3.0 → 1.4.0

package/README.md

@@ -16,6 +16,10 @@ npm i -g coding-friend-cli
 ## Commands
 
 ```bash
+cf install           # Install the Coding Friend plugin into Claude Code
+                     # 💡 Safe to run multiple times (idempotent).
+cf uninstall         # Completely remove plugin, marketplace, statusline, completion
+                     # 💡 Interactive — asks for confirmation before acting.
 cf init              # Initialize workspace (interactive)
                      # 💡 You can run this anywhere, anytime.
 cf host [path]       # Build and serve learning docs at localhost:3333

package/dist/{chunk-CSF4FAHL.js → chunk-DDISNOEK.js}

@@ -13,7 +13,7 @@ ${MARKER_START}
 _cf_completions() {
   local cur="\${COMP_WORDS[COMP_CWORD]}"
   local prev="\${COMP_WORDS[COMP_CWORD-1]}"
-  local commands="init host mcp statusline update dev"
+  local commands="install uninstall init host mcp statusline update dev"
 
   # Subcommands for 'dev'
   if [[ "\${COMP_WORDS[1]}" == "dev" && \${COMP_CWORD} -eq 2 ]]; then
@@ -38,6 +38,8 @@ ${MARKER_START}
 _cf() {
   local -a commands
   commands=(
+    'install:Install the Coding Friend plugin into Claude Code'
+    'uninstall:Uninstall the Coding Friend plugin from Claude Code'
     'init:Initialize coding-friend in current project'
     'host:Build and serve learning docs as a static website'
     'mcp:Setup MCP server for learning docs'
@@ -94,6 +96,17 @@ function replaceBlock(content, newBlock) {
   while (sliceStart > 0 && content[sliceStart - 1] === "\n") sliceStart--;
   return content.slice(0, sliceStart) + newBlock + content.slice(endIdx + MARKER_END.length);
 }
+function removeShellCompletion() {
+  const rcPath = getShellRcPath();
+  if (!existsSync(rcPath)) return false;
+  const content = readFileSync(rcPath, "utf-8");
+  if (!content.includes(MARKER_START)) return false;
+  const updated = replaceBlock(content, "");
+  writeFileSync(rcPath, updated, "utf-8");
+  const rcName = getRcName(rcPath);
+  log.success(`Tab completion removed from ~/${rcName}`);
+  return true;
+}
 function ensureShellCompletion(opts) {
   const rcPath = getShellRcPath();
   const rcName = getRcName(rcPath);
@@ -125,5 +138,6 @@ function ensureShellCompletion(opts) {
 
 export {
   hasShellCompletion,
+  removeShellCompletion,
   ensureShellCompletion
 };

package/dist/{update-GGCBM7U4.js → chunk-F32SU5YM.js}

@@ -1,6 +1,6 @@
 import {
   ensureShellCompletion
-} from "./chunk-CSF4FAHL.js";
+} from "./chunk-DDISNOEK.js";
 import {
   commandExists,
   run,
@@ -10,7 +10,7 @@ import {
   claudeSettingsPath,
   installedPluginsPath,
   pluginCachePath
-} from "./chunk-6OI37OZX.js";
+} from "./chunk-T5KHF3RW.js";
 import {
   log
 } from "./chunk-6DUFTBTO.js";
@@ -248,6 +248,10 @@ async function updateCommand(opts) {
   console.log();
   log.dim("Restart Claude Code (or start a new session) to see changes.");
 }
+
 export {
+  semverCompare,
+  getInstalledVersion,
+  getLatestVersion,
   updateCommand
 };

package/dist/{chunk-Q4DKU5IG.js → chunk-LVI3I6EN.js}

@@ -2,7 +2,7 @@ import {
   globalConfigPath,
   localConfigPath,
   resolvePath
-} from "./chunk-6OI37OZX.js";
+} from "./chunk-T5KHF3RW.js";
 import {
   readJson
 } from "./chunk-IUTXHCP7.js";

package/dist/{chunk-6OI37OZX.js → chunk-T5KHF3RW.js}

@@ -34,6 +34,21 @@ function devStatePath() {
 function knownMarketplacesPath() {
   return join(homedir(), ".claude", "plugins", "known_marketplaces.json");
 }
+function marketplaceCachePath() {
+  return join(homedir(), ".claude", "plugins", "cache", "coding-friend-marketplace");
+}
+function marketplaceClonePath() {
+  return join(
+    homedir(),
+    ".claude",
+    "plugins",
+    "marketplaces",
+    "coding-friend-marketplace"
+  );
+}
+function globalConfigDir() {
+  return join(homedir(), ".coding-friend");
+}
 
 export {
   resolvePath,
@@ -43,5 +58,8 @@ export {
   installedPluginsPath,
   pluginCachePath,
   devStatePath,
-  knownMarketplacesPath
+  knownMarketplacesPath,
+  marketplaceCachePath,
+  marketplaceClonePath,
+  globalConfigDir
 };

package/dist/chunk-ZA4GHAJL.js

@@ -0,0 +1,27 @@
+import {
+  installedPluginsPath,
+  knownMarketplacesPath
+} from "./chunk-T5KHF3RW.js";
+import {
+  readJson
+} from "./chunk-IUTXHCP7.js";
+
+// src/lib/plugin-state.ts
+var MARKETPLACE_NAME = "coding-friend-marketplace";
+var PLUGIN_NAME = "coding-friend";
+function isPluginInstalled() {
+  const data = readJson(installedPluginsPath());
+  if (!data) return false;
+  const plugins = data.plugins ?? data;
+  return Object.keys(plugins).some((k) => k.includes(PLUGIN_NAME));
+}
+function isMarketplaceRegistered() {
+  const data = readJson(knownMarketplacesPath());
+  if (!data) return false;
+  return MARKETPLACE_NAME in data;
+}
+
+export {
+  isPluginInstalled,
+  isMarketplaceRegistered
+};

package/dist/{dev-VMN2JHA6.js → dev-WMKGIPD3.js}

@@ -1,3 +1,7 @@
+import {
+  isMarketplaceRegistered,
+  isPluginInstalled
+} from "./chunk-ZA4GHAJL.js";
 import {
   commandExists,
   run
@@ -5,10 +9,9 @@ import {
 import {
   claudeSettingsPath,
   devStatePath,
-  installedPluginsPath,
   knownMarketplacesPath,
   pluginCachePath
-} from "./chunk-6OI37OZX.js";
+} from "./chunk-T5KHF3RW.js";
 import {
   log
 } from "./chunk-6DUFTBTO.js";
@@ -35,17 +38,6 @@ var PLUGIN_ID = `${PLUGIN_NAME}@${MARKETPLACE_NAME}`;
 function getDevState() {
   return readJson(devStatePath());
 }
-function isPluginInstalled() {
-  const data = readJson(installedPluginsPath());
-  if (!data) return false;
-  const plugins = data.plugins ?? data;
-  return Object.keys(plugins).some((k) => k.includes(PLUGIN_NAME));
-}
-function isMarketplaceRegistered() {
-  const data = readJson(knownMarketplacesPath());
-  if (!data) return false;
-  return MARKETPLACE_NAME in data;
-}
 function ensureClaude() {
   if (!commandExists("claude")) {
     log.error(

package/dist/{host-2WINWEW7.js → host-D3BR75OU.js}

@@ -1,13 +1,13 @@
 import {
   getLibPath,
   resolveDocsDir
-} from "./chunk-Q4DKU5IG.js";
+} from "./chunk-LVI3I6EN.js";
 import "./chunk-HRVSKMNA.js";
 import {
   run,
   streamExec
 } from "./chunk-UFGNO6CW.js";
-import "./chunk-6OI37OZX.js";
+import "./chunk-T5KHF3RW.js";
 import {
   log
 } from "./chunk-6DUFTBTO.js";

package/dist/index.js

@@ -13,24 +13,32 @@ var program = new Command();
 program.name("cf").description(
   "coding-friend CLI \u2014 host learning docs, setup MCP, init projects"
 ).version(pkg.version, "-v, --version");
+program.command("install").description("Install the Coding Friend plugin into Claude Code").action(async () => {
+  const { installCommand } = await import("./install-3H2FZSPZ.js");
+  await installCommand();
+});
+program.command("uninstall").description("Uninstall the Coding Friend plugin from Claude Code").action(async () => {
+  const { uninstallCommand } = await import("./uninstall-ULTJA57D.js");
+  await uninstallCommand();
+});
 program.command("init").description("Initialize coding-friend in current project").action(async () => {
-  const { initCommand } = await import("./init-CTCDQKIQ.js");
+  const { initCommand } = await import("./init-KX6M4XTA.js");
   await initCommand();
 });
 program.command("host").description("Build and serve learning docs as a static website").argument("[path]", "path to docs folder").option("-p, --port <port>", "port number", "3333").action(async (path, opts) => {
-  const { hostCommand } = await import("./host-2WINWEW7.js");
+  const { hostCommand } = await import("./host-D3BR75OU.js");
   await hostCommand(path, opts);
 });
 program.command("mcp").description("Setup MCP server for learning docs").argument("[path]", "path to docs folder").action(async (path) => {
-  const { mcpCommand } = await import("./mcp-43HCE2KD.js");
+  const { mcpCommand } = await import("./mcp-SWXTVL3Q.js");
   await mcpCommand(path);
 });
 program.command("statusline").description("Setup coding-friend statusline in Claude Code").action(async () => {
-  const { statuslineCommand } = await import("./statusline-ARI7I5YM.js");
+  const { statuslineCommand } = await import("./statusline-7M4JUD7O.js");
   await statuslineCommand();
 });
 program.command("update").description("Update coding-friend plugin, CLI, and statusline").option("--cli", "Update only the CLI (npm package)").option("--plugin", "Update only the Claude Code plugin").option("--statusline", "Update only the statusline").action(async (opts) => {
-  const { updateCommand } = await import("./update-GGCBM7U4.js");
+  const { updateCommand } = await import("./update-5C5QFLIL.js");
   await updateCommand(opts);
 });
 var dev = program.command("dev").description("Development mode commands");
@@ -45,28 +53,28 @@ Dev subcommands:
   dev restart [path]  Reinstall local dev plugin (off + on)`
 );
 dev.command("on").description("Switch to local plugin source").argument("[path]", "path to local coding-friend repo (default: cwd)").action(async (path) => {
-  const { devOnCommand } = await import("./dev-VMN2JHA6.js");
+  const { devOnCommand } = await import("./dev-WMKGIPD3.js");
   await devOnCommand(path);
 });
 dev.command("off").description("Switch back to remote marketplace").action(async () => {
-  const { devOffCommand } = await import("./dev-VMN2JHA6.js");
+  const { devOffCommand } = await import("./dev-WMKGIPD3.js");
   await devOffCommand();
 });
 dev.command("status").description("Show current dev mode").action(async () => {
-  const { devStatusCommand } = await import("./dev-VMN2JHA6.js");
+  const { devStatusCommand } = await import("./dev-WMKGIPD3.js");
   await devStatusCommand();
 });
 dev.command("sync").description(
   "Copy local source files to plugin cache (no version bump needed)"
 ).action(async () => {
-  const { devSyncCommand } = await import("./dev-VMN2JHA6.js");
+  const { devSyncCommand } = await import("./dev-WMKGIPD3.js");
   await devSyncCommand();
 });
 dev.command("restart").description("Reinstall local dev plugin (off + on)").argument(
   "[path]",
   "path to local coding-friend repo (default: saved path or cwd)"
 ).action(async (path) => {
-  const { devRestartCommand } = await import("./dev-VMN2JHA6.js");
+  const { devRestartCommand } = await import("./dev-WMKGIPD3.js");
   await devRestartCommand(path);
 });
 program.parse();

package/dist/{init-CTCDQKIQ.js → init-KX6M4XTA.js}

@@ -1,10 +1,10 @@
-import {
-  DEFAULT_CONFIG
-} from "./chunk-HRVSKMNA.js";
 import {
   ensureShellCompletion,
   hasShellCompletion
-} from "./chunk-CSF4FAHL.js";
+} from "./chunk-DDISNOEK.js";
+import {
+  DEFAULT_CONFIG
+} from "./chunk-HRVSKMNA.js";
 import {
   run
 } from "./chunk-UFGNO6CW.js";
@@ -13,7 +13,7 @@ import {
   globalConfigPath,
   localConfigPath,
   resolvePath
-} from "./chunk-6OI37OZX.js";
+} from "./chunk-T5KHF3RW.js";
 import {
   log
 } from "./chunk-6DUFTBTO.js";

package/dist/install-3H2FZSPZ.js

@@ -0,0 +1,89 @@
+import {
+  getInstalledVersion,
+  getLatestVersion,
+  semverCompare
+} from "./chunk-F32SU5YM.js";
+import {
+  isMarketplaceRegistered
+} from "./chunk-ZA4GHAJL.js";
+import "./chunk-DDISNOEK.js";
+import {
+  commandExists,
+  run
+} from "./chunk-UFGNO6CW.js";
+import "./chunk-T5KHF3RW.js";
+import {
+  log
+} from "./chunk-6DUFTBTO.js";
+import "./chunk-IUTXHCP7.js";
+
+// src/commands/install.ts
+import chalk from "chalk";
+async function installCommand() {
+  console.log("=== \u{1F33F} Coding Friend Install \u{1F33F} ===");
+  console.log();
+  if (!commandExists("claude")) {
+    log.error(
+      "Claude CLI not found. Install it first: https://docs.anthropic.com/en/docs/claude-code/getting-started"
+    );
+    process.exit(1);
+  }
+  if (isMarketplaceRegistered()) {
+    log.success("Marketplace already registered.");
+  } else {
+    log.step("Adding coding-friend marketplace...");
+    const result = run("claude", [
+      "plugin",
+      "marketplace",
+      "add",
+      "dinhanhthi/coding-friend"
+    ]);
+    if (result === null) {
+      log.error(
+        "Failed to add marketplace. Try manually: claude plugin marketplace add dinhanhthi/coding-friend"
+      );
+      process.exit(1);
+    }
+    log.success("Marketplace added.");
+  }
+  const installedVersion = getInstalledVersion();
+  if (!installedVersion) {
+    log.step("Installing plugin...");
+    const result = run("claude", [
+      "plugin",
+      "install",
+      "coding-friend@coding-friend-marketplace"
+    ]);
+    if (result === null) {
+      log.error(
+        "Failed to install plugin. Try manually: claude plugin install coding-friend@coding-friend-marketplace"
+      );
+      process.exit(1);
+    }
+    log.success("Plugin installed!");
+  } else {
+    log.success(`Plugin already installed (${chalk.green(`v${installedVersion}`)}).`);
+    const latestVersion = getLatestVersion();
+    if (latestVersion) {
+      const cmp = semverCompare(installedVersion, latestVersion);
+      if (cmp < 0) {
+        log.warn(
+          `Update available: ${chalk.yellow(`v${installedVersion}`)} \u2192 ${chalk.green(`v${latestVersion}`)}. Run ${chalk.cyan("cf update")} to update.`
+        );
+      } else {
+        log.success("Already on the latest version.");
+      }
+    } else {
+      log.dim("Could not check for updates (no network or GitHub rate limit).");
+    }
+  }
+  console.log();
+  log.info("Next steps:");
+  log.dim(`  ${chalk.cyan("cf init")}         Initialize workspace (docs folders, config)`);
+  log.dim(`  ${chalk.cyan("cf statusline")}   Setup statusline in Claude Code`);
+  console.log();
+  log.dim("Restart Claude Code (or start a new session) to use the plugin.");
+}
+export {
+  installCommand
+};

package/dist/{mcp-43HCE2KD.js → mcp-SWXTVL3Q.js}

@@ -1,12 +1,12 @@
 import {
   getLibPath,
   resolveDocsDir
-} from "./chunk-Q4DKU5IG.js";
+} from "./chunk-LVI3I6EN.js";
 import "./chunk-HRVSKMNA.js";
 import {
   run
 } from "./chunk-UFGNO6CW.js";
-import "./chunk-6OI37OZX.js";
+import "./chunk-T5KHF3RW.js";
 import {
   log
 } from "./chunk-6DUFTBTO.js";

package/dist/postinstall.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   ensureShellCompletion
-} from "./chunk-CSF4FAHL.js";
+} from "./chunk-DDISNOEK.js";
 import "./chunk-6DUFTBTO.js";
 
 // src/postinstall.ts

package/dist/{statusline-ARI7I5YM.js → statusline-7M4JUD7O.js}

@@ -1,7 +1,7 @@
 import {
   claudeSettingsPath,
   pluginCachePath
-} from "./chunk-6OI37OZX.js";
+} from "./chunk-T5KHF3RW.js";
 import {
   log
 } from "./chunk-6DUFTBTO.js";

package/dist/uninstall-ULTJA57D.js

@@ -0,0 +1,191 @@
+import {
+  isMarketplaceRegistered,
+  isPluginInstalled
+} from "./chunk-ZA4GHAJL.js";
+import {
+  hasShellCompletion,
+  removeShellCompletion
+} from "./chunk-DDISNOEK.js";
+import {
+  commandExists,
+  run
+} from "./chunk-UFGNO6CW.js";
+import {
+  claudeSettingsPath,
+  devStatePath,
+  globalConfigDir,
+  marketplaceCachePath,
+  marketplaceClonePath
+} from "./chunk-T5KHF3RW.js";
+import {
+  log
+} from "./chunk-6DUFTBTO.js";
+import {
+  readJson,
+  writeJson
+} from "./chunk-IUTXHCP7.js";
+
+// src/commands/uninstall.ts
+import { existsSync, rmSync } from "fs";
+import { confirm } from "@inquirer/prompts";
+import chalk from "chalk";
+var MARKETPLACE_NAME = "coding-friend-marketplace";
+var PLUGIN_NAME = "coding-friend";
+var PLUGIN_ID = `${PLUGIN_NAME}@${MARKETPLACE_NAME}`;
+function hasStatuslineReference() {
+  const settings = readJson(claudeSettingsPath());
+  if (!settings) return false;
+  const statusLine = settings.statusLine;
+  return !!statusLine?.command?.includes(PLUGIN_NAME);
+}
+function removeStatuslineReference() {
+  const settingsPath = claudeSettingsPath();
+  const settings = readJson(settingsPath);
+  if (!settings) return false;
+  const statusLine = settings.statusLine;
+  if (!statusLine?.command?.includes(PLUGIN_NAME)) return false;
+  delete settings.statusLine;
+  writeJson(settingsPath, settings);
+  return true;
+}
+function detect() {
+  return {
+    pluginInstalled: isPluginInstalled(),
+    marketplaceRegistered: isMarketplaceRegistered(),
+    cacheExists: existsSync(marketplaceCachePath()),
+    cloneExists: existsSync(marketplaceClonePath()),
+    statuslineConfigured: hasStatuslineReference(),
+    shellCompletionExists: hasShellCompletion(),
+    globalConfigExists: existsSync(globalConfigDir()),
+    devModeActive: existsSync(devStatePath())
+  };
+}
+function displayDetection(d) {
+  const check = (v) => v ? chalk.green("\u2714") : chalk.dim("\u2013");
+  console.log();
+  console.log("  Detected components:");
+  console.log(`    ${check(d.pluginInstalled)} Plugin registration`);
+  console.log(`    ${check(d.marketplaceRegistered)} Marketplace registration`);
+  console.log(`    ${check(d.cacheExists)} Plugin cache`);
+  console.log(`    ${check(d.cloneExists)} Marketplace clone`);
+  console.log(`    ${check(d.statuslineConfigured)} Statusline reference`);
+  console.log(`    ${check(d.shellCompletionExists)} Shell tab completion`);
+  console.log(`    ${check(d.globalConfigExists)} Global config (~/.coding-friend/)`);
+  console.log();
+}
+function nothingToRemove(d) {
+  return !d.pluginInstalled && !d.marketplaceRegistered && !d.cacheExists && !d.cloneExists && !d.statuslineConfigured && !d.shellCompletionExists && !d.globalConfigExists;
+}
+async function uninstallCommand() {
+  console.log(`
+=== ${chalk.red("Coding Friend Uninstall")} ===`);
+  if (!commandExists("claude")) {
+    log.error(
+      "Claude CLI not found. Cannot uninstall plugin without it."
+    );
+    log.dim("Install Claude CLI first: https://docs.anthropic.com/en/docs/claude-code");
+    return;
+  }
+  const detection = detect();
+  if (detection.devModeActive) {
+    log.warn("Dev mode is currently active.");
+    log.dim(`Run ${chalk.bold("cf dev off")} first, then try again.`);
+    return;
+  }
+  if (nothingToRemove(detection)) {
+    log.info("Nothing to uninstall \u2014 Coding Friend is not installed.");
+    return;
+  }
+  displayDetection(detection);
+  const proceed = await confirm({
+    message: "This will remove Coding Friend from Claude Code. Continue?",
+    default: false
+  });
+  if (!proceed) {
+    log.info("Uninstall cancelled.");
+    return;
+  }
+  let removeConfig = false;
+  if (detection.globalConfigExists) {
+    removeConfig = await confirm({
+      message: "Also remove ~/.coding-friend/ config directory? (global config, custom skills)",
+      default: false
+    });
+  }
+  console.log();
+  let errors = 0;
+  if (detection.pluginInstalled) {
+    log.step("Uninstalling plugin...");
+    const result = run("claude", ["plugin", "uninstall", PLUGIN_ID]);
+    if (result === null) {
+      const fallback = run("claude", ["plugin", "uninstall", PLUGIN_NAME]);
+      if (fallback === null) {
+        log.warn("Could not uninstall plugin via CLI (may already be removed).");
+        errors++;
+      }
+    }
+  }
+  if (detection.marketplaceRegistered) {
+    log.step("Removing marketplace...");
+    const result = run("claude", ["plugin", "marketplace", "remove", MARKETPLACE_NAME]);
+    if (result === null) {
+      log.warn("Could not remove marketplace via CLI (may already be removed).");
+      errors++;
+    }
+  }
+  if (detection.cacheExists) {
+    log.step("Removing plugin cache...");
+    try {
+      rmSync(marketplaceCachePath(), { recursive: true, force: true });
+    } catch {
+      log.warn("Could not remove plugin cache directory.");
+      errors++;
+    }
+  }
+  if (detection.cloneExists) {
+    log.step("Removing marketplace clone...");
+    try {
+      rmSync(marketplaceClonePath(), { recursive: true, force: true });
+    } catch {
+      log.warn("Could not remove marketplace clone directory.");
+      errors++;
+    }
+  }
+  if (detection.statuslineConfigured) {
+    log.step("Cleaning statusline...");
+    if (!removeStatuslineReference()) {
+      log.warn("Could not clean statusline from settings.");
+      errors++;
+    }
+  }
+  if (detection.shellCompletionExists) {
+    log.step("Removing shell completion...");
+    if (!removeShellCompletion()) {
+      log.warn("Could not remove shell completion.");
+      errors++;
+    }
+  }
+  if (removeConfig) {
+    log.step("Removing global config...");
+    try {
+      rmSync(globalConfigDir(), { recursive: true, force: true });
+    } catch {
+      log.warn("Could not remove ~/.coding-friend/ directory.");
+      errors++;
+    }
+  }
+  console.log();
+  if (errors === 0) {
+    log.success("Coding Friend has been completely uninstalled.");
+  } else {
+    log.warn(`Uninstalled with ${errors} warning(s). Check messages above.`);
+  }
+  if (!removeConfig && detection.globalConfigExists) {
+    log.dim("Global config kept at ~/.coding-friend/");
+  }
+  console.log();
+  log.dim("Restart Claude Code to complete the uninstall.");
+}
+export {
+  uninstallCommand
+};

package/dist/update-5C5QFLIL.js

@@ -0,0 +1,17 @@
+import {
+  getInstalledVersion,
+  getLatestVersion,
+  semverCompare,
+  updateCommand
+} from "./chunk-F32SU5YM.js";
+import "./chunk-DDISNOEK.js";
+import "./chunk-UFGNO6CW.js";
+import "./chunk-T5KHF3RW.js";
+import "./chunk-6DUFTBTO.js";
+import "./chunk-IUTXHCP7.js";
+export {
+  getInstalledVersion,
+  getLatestVersion,
+  semverCompare,
+  updateCommand
+};

package/lib/learn-host/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog (Learn Host)
 
+## v0.1.0 (2026-03-03)
+
+- Add copy button to code blocks ([#ac47c74](https://github.com/dinhanhthi/coding-friend/commit/ac47c74))
+- Redesign home page with elegant layout and updated color scheme ([#2d53836](https://github.com/dinhanhthi/coding-friend/commit/2d53836))
+- Improve TableOfContents heading styling with border ([#2267508](https://github.com/dinhanhthi/coding-friend/commit/2267508))
+
 ## v0.0.2 (2026-03-01)
 
 - Update header styling for consistency with ecosystem redesign

package/lib/learn-host/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coding-friend-learn-host",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3333",

package/lib/learn-host/src/app/globals.css

@@ -11,10 +11,10 @@
   --color-navy-900: #2a2d38;
   --color-navy-950: #23262e;
 
-  /* Violet accent (from website) */
-  --color-accent: #7c3aed;
-  --color-accent-light: #a78bfa;
-  --color-accent-dark: #6d28d9;
+  /* Amber accent (matching logo gradient) */
+  --color-accent: #f59e0b;
+  --color-accent-light: #fbbf24;
+  --color-accent-dark: #d97706;
 
   --color-surface: #2a2d38;
   --color-surface-secondary: #31353f;
@@ -78,6 +78,36 @@ pre {
   background: #0d1117;
 }
 
+/* Code block copy button */
+.code-block-wrapper {
+  position: relative;
+}
+
+.code-copy-btn {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 10;
+  cursor: pointer;
+  border-radius: 0.375rem;
+  padding: 0.375rem;
+  color: #94a3b8;
+  opacity: 0;
+  transition:
+    opacity 0.2s,
+    color 0.2s,
+    background-color 0.2s;
+}
+
+.code-block-wrapper:hover .code-copy-btn {
+  opacity: 1;
+}
+
+.code-copy-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #e2e8f0;
+}
+
 :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   font-weight: 500;
 }

package/lib/learn-host/src/app/layout.tsx

@@ -2,8 +2,7 @@ import type { Metadata } from "next";
 import { ThemeProvider } from "next-themes";
 import { getAllCategories } from "@/lib/docs";
 import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-import Sidebar from "@/components/Sidebar";
+import LayoutShell from "@/components/LayoutShell";
 import MobileNav from "@/components/MobileNav";
 import "./globals.css";
 import "highlight.js/styles/github-dark.css";
@@ -40,17 +39,7 @@ export default function RootLayout({
           <div data-pagefind-ignore className="md:hidden">
             <MobileNav categories={categories} />
           </div>
-          <div className="flex">
-            <div data-pagefind-ignore>
-              <Sidebar categories={categories} />
-            </div>
-            <div className="flex min-w-0 flex-1 justify-center md:pl-64 lg:pl-[300px]">
-              <main className="min-h-screen w-full max-w-5xl p-6 pb-24 md:p-8 md:pb-24">
-                {children}
-              </main>
-            </div>
-          </div>
-          <Footer />
+          <LayoutShell categories={categories}>{children}</LayoutShell>
         </ThemeProvider>
       </body>
     </html>

package/lib/learn-host/src/app/page.tsx

@@ -1,6 +1,7 @@
 import { getAllCategories, getAllDocs, getAllTags } from "@/lib/docs";
 import DocCard from "@/components/DocCard";
 import TagBadge from "@/components/TagBadge";
+import Image from "next/image";
 import Link from "next/link";
 
 export default function HomePage() {
@@ -10,28 +11,53 @@ export default function HomePage() {
   const recentDocs = docs.slice(0, 10);
 
   return (
-    <div>
-      <h1 className="mb-2 text-3xl font-bold">Learning Notes</h1>
-      <p className="mb-8 text-slate-500 dark:text-slate-400">
-        {docs.length} docs across {categories.length} categories
-      </p>
+    <div className="mx-auto">
+      {/* Hero */}
+      <section className="mb-12 flex flex-col items-center pt-8 text-center md:pt-14">
+        <Image
+          src="/logo.svg"
+          alt="Learning Notes"
+          width={64}
+          height={64}
+          className="mb-5"
+        />
+        <h1 className="mb-3 text-4xl font-bold tracking-tight text-slate-900 md:text-5xl dark:text-white">
+          Learning Notes
+        </h1>
+        <p className="max-w-lg text-lg text-slate-500 dark:text-slate-400">
+          A personal knowledge base with{" "}
+          <span className="font-semibold text-amber-600 dark:text-amber-400">
+            {docs.length}
+          </span>{" "}
+          docs across{" "}
+          <span className="font-semibold text-amber-600 dark:text-amber-400">
+            {categories.length}
+          </span>{" "}
+          categories
+        </p>
+      </section>
 
       {/* Categories */}
-      <section className="mb-8">
-        <h2 className="mb-3 text-lg font-semibold">Categories</h2>
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+      <section className="mb-12">
+        <h2 className="mb-5 text-xl font-semibold text-slate-900 dark:text-white">
+          Categories
+        </h2>
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
           {categories.map((cat) => (
             <Link
               key={cat.name}
               href={`/${cat.name}/`}
-              className="rounded-lg border border-slate-200 p-3 transition-colors hover:border-violet-400/50 dark:border-[#a0a0a01c] dark:hover:border-violet-400/50"
+              className="group dark:bg-navy-800/50 relative cursor-pointer overflow-hidden rounded-xl border border-slate-200 bg-white p-4 transition-all duration-200 hover:-translate-y-0.5 hover:border-amber-300 hover:shadow-md hover:shadow-amber-100/50 dark:border-[#a0a0a01c] dark:hover:border-amber-500/40 dark:hover:shadow-amber-900/20"
             >
-              <div className="font-medium text-slate-900 capitalize dark:text-slate-100">
+              <div className="mb-1 font-medium text-slate-900 capitalize dark:text-slate-100">
                 {cat.name.replace(/[_-]/g, " ")}
               </div>
               <div className="text-sm text-slate-500 dark:text-slate-400">
                 {cat.docCount} {cat.docCount === 1 ? "doc" : "docs"}
               </div>
+              <div className="dark:bg-navy-950 absolute right-3 bottom-3 flex h-7 w-7 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-500 dark:text-slate-400">
+                {cat.docCount}
+              </div>
             </Link>
           ))}
         </div>
@@ -39,10 +65,12 @@ export default function HomePage() {
 
       {/* Tags */}
       {tags.length > 0 && (
-        <section className="mb-8">
-          <h2 className="mb-3 text-lg font-semibold">Tags</h2>
+        <section className="mb-12">
+          <h2 className="mb-5 text-xl font-semibold text-slate-900 dark:text-white">
+            Tags
+          </h2>
           <div className="flex flex-wrap gap-2">
-            {tags.slice(0, 20).map(({ tag }) => (
+            {tags.slice(0, 24).map(({ tag }) => (
               <TagBadge key={tag} tag={tag} />
             ))}
           </div>
@@ -51,8 +79,10 @@ export default function HomePage() {
 
       {/* Recent Docs */}
       <section>
-        <h2 className="mb-3 text-lg font-semibold">Recently Updated</h2>
-        <div className="grid gap-3">
+        <h2 className="mb-5 text-xl font-semibold text-slate-900 dark:text-white">
+          Recently Updated
+        </h2>
+        <div className="grid gap-3 sm:grid-cols-2">
           {recentDocs.map((doc) => (
             <DocCard key={`${doc.category}/${doc.slug}`} doc={doc} />
           ))}

package/lib/learn-host/src/components/Breadcrumbs.tsx

@@ -8,10 +8,7 @@ interface Crumb {
 export default function Breadcrumbs({ crumbs }: { crumbs: Crumb[] }) {
   return (
     <nav className="mb-4 flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
-      <Link
-        href="/"
-        className="hover:text-violet-600 dark:hover:text-violet-400"
-      >
+      <Link href="/" className="hover:text-amber-600 dark:hover:text-amber-400">
         Home
       </Link>
       {crumbs.map((crumb, i) => (
@@ -20,7 +17,7 @@ export default function Breadcrumbs({ crumbs }: { crumbs: Crumb[] }) {
           {crumb.href ? (
             <Link
               href={crumb.href}
-              className="capitalize hover:text-violet-600 dark:hover:text-violet-400"
+              className="capitalize hover:text-amber-600 dark:hover:text-amber-400"
             >
               {crumb.label}
             </Link>

package/lib/learn-host/src/components/CodeBlock.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useRef, useState } from "react";
+
+export default function CodeBlock(props: React.ComponentProps<"pre">) {
+  const preRef = useRef<HTMLPreElement>(null);
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    const text = preRef.current?.querySelector("code")?.textContent ?? "";
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="code-block-wrapper">
+      <button
+        onClick={handleCopy}
+        className="code-copy-btn"
+        aria-label="Copy to clipboard"
+      >
+        {copied ? (
+          <svg
+            className="h-4 w-4 text-emerald-400"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M5 13l4 4L19 7"
+            />
+          </svg>
+        ) : (
+          <svg
+            className="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+            />
+          </svg>
+        )}
+      </button>
+      <pre ref={preRef} {...props} />
+    </div>
+  );
+}

package/lib/learn-host/src/components/DocCard.tsx

@@ -17,14 +17,12 @@ export default function DocCard({ doc }: { doc: DocMeta }) {
       onKeyDown={(e) => {
         if (e.key === "Enter") router.push(href);
       }}
-      className="dark:bg-navy-800/50 block cursor-pointer rounded-lg border border-slate-200 bg-white p-4 transition-all hover:border-violet-400/50 dark:border-[#a0a0a01c] dark:hover:border-violet-400/50"
+      className="dark:bg-navy-800/50 block cursor-pointer rounded-lg border border-slate-200 bg-white p-4 transition-all duration-200 hover:border-amber-300 hover:shadow-sm dark:border-[#a0a0a01c] dark:hover:border-amber-500/40"
     >
-      <h3 className="mb-1 font-semibold text-slate-900 dark:text-slate-100">
-        <Link href={href} className="hover:underline">
-          {doc.frontmatter.title}
-        </Link>
+      <h3 className="mb-2 font-semibold text-slate-900 dark:text-slate-100">
+        <Link href={href}>{doc.frontmatter.title}</Link>
       </h3>
-      <p className="mb-2 line-clamp-2 text-sm text-slate-500 dark:text-slate-400">
+      <p className="mb-3 line-clamp-2 text-sm text-slate-500 dark:text-slate-400">
         {doc.excerpt}
       </p>
       <div className="flex items-center justify-between">

package/lib/learn-host/src/components/LayoutShell.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import type { CategoryInfo } from "@/lib/types";
+import Sidebar from "@/components/Sidebar";
+import Footer from "@/components/layout/Footer";
+
+export default function LayoutShell({
+  categories,
+  children,
+}: {
+  categories: CategoryInfo[];
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  const isHome = pathname === "/";
+
+  return (
+    <>
+      <div className="flex">
+        {!isHome && (
+          <div data-pagefind-ignore>
+            <Sidebar categories={categories} />
+          </div>
+        )}
+        <div
+          className={`flex min-w-0 flex-1 justify-center ${!isHome ? "md:pl-64 lg:pl-[300px]" : ""}`}
+        >
+          <main
+            className={`min-h-screen w-full p-6 pb-24 md:p-8 md:pb-24 ${isHome ? "max-w-6xl" : "max-w-5xl"}`}
+          >
+            {children}
+          </main>
+        </div>
+      </div>
+      <Footer isHome={isHome} />
+    </>
+  );
+}

package/lib/learn-host/src/components/MarkdownRenderer.tsx

@@ -2,6 +2,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
 import rehypeSlug from "rehype-slug";
+import CodeBlock from "./CodeBlock";
 
 export default function MarkdownRenderer({ content }: { content: string }) {
   return (
@@ -9,6 +10,7 @@ export default function MarkdownRenderer({ content }: { content: string }) {
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[rehypeHighlight, rehypeSlug]}
+        components={{ pre: CodeBlock }}
       >
         {content}
       </ReactMarkdown>

package/lib/learn-host/src/components/MobileNav.tsx

@@ -46,7 +46,7 @@ export default function MobileNav({
                 onClick={() => setOpen(false)}
                 className={`flex items-center justify-between rounded-md px-3 py-1.5 text-sm capitalize ${
                   isActive
-                    ? "font-medium text-violet-600 dark:text-violet-400"
+                    ? "font-medium text-amber-700 dark:text-amber-400"
                     : "text-slate-600 dark:text-slate-400"
                 }`}
               >

package/lib/learn-host/src/components/Sidebar.tsx

@@ -25,7 +25,7 @@ export default function Sidebar({
               href={`/${cat.name}/`}
               className={`flex items-center justify-between rounded-full px-3 py-2 text-sm capitalize transition-colors duration-200 ${
                 isActive
-                  ? "font-medium text-violet-600 dark:text-violet-400"
+                  ? "font-medium text-amber-700 dark:text-amber-400"
                   : "dark:hover:bg-navy-800/50 text-slate-600 hover:bg-slate-200/50 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
               }`}
             >

package/lib/learn-host/src/components/TableOfContents.tsx

@@ -35,7 +35,7 @@ export default function TableOfContents({ headings }: Props) {
   return (
     <aside className="sticky top-16 hidden h-[calc(100vh-4rem)] w-56 shrink-0 overflow-y-auto lg:block">
       <div className="p-4">
-        <h4 className="mb-3 text-xs font-semibold tracking-wider text-slate-500 uppercase dark:text-slate-400">
+        <h4 className="mb-3 border-b border-slate-600 pb-2 text-xs font-semibold tracking-wider text-slate-400 uppercase">
           On this page
         </h4>
         <ul className="space-y-1.5">
@@ -47,7 +47,7 @@ export default function TableOfContents({ headings }: Props) {
                   h.level === 3 ? "pl-3" : ""
                 } ${
                   activeId === h.id
-                    ? "font-medium text-violet-600 dark:text-violet-400"
+                    ? "font-medium text-amber-700 dark:text-amber-400"
                     : "text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
                 }`}
               >

package/lib/learn-host/src/components/TagBadge.tsx

@@ -4,7 +4,7 @@ export default function TagBadge({ tag }: { tag: string }) {
   return (
     <Link
       href={`/search/?q=${encodeURIComponent(tag)}`}
-      className="inline-block rounded-full border border-slate-300 px-2.5 py-0.5 text-xs text-violet-600 transition-colors hover:border-violet-400 hover:bg-violet-50 dark:border-slate-600 dark:text-violet-400 dark:hover:border-violet-500 dark:hover:bg-violet-900/20"
+      className="dark:bg-navy-950 inline-block cursor-pointer rounded-full bg-slate-200 px-2.5 py-0.5 text-xs text-slate-600 transition-colors duration-200 hover:bg-slate-300 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-200"
     >
       {tag}
     </Link>

package/lib/learn-host/src/components/layout/Footer.tsx

@@ -1,8 +1,12 @@
 import Image from "next/image";
 
-export default function Footer() {
+export default function Footer({ isHome = false }: { isHome?: boolean }) {
   return (
-    <footer className="dark:bg-navy-950 fixed right-0 bottom-0 left-0 z-40 border-t border-slate-200 bg-slate-50 md:left-64 lg:left-[300px] dark:border-[#a0a0a01c]">
+    <footer
+      className={`dark:bg-navy-950 fixed right-0 bottom-0 z-40 border-t border-slate-200 bg-slate-50 dark:border-[#a0a0a01c] ${
+        isHome ? "left-0" : "left-0 md:left-64 lg:left-[300px]"
+      }`}
+    >
       <div className="flex flex-row flex-wrap items-center gap-1 px-6 py-3 text-center text-xs text-slate-500 dark:text-slate-500">
         <div className="flex items-center gap-2">
           <Image src="/logo.svg" alt="Coding Friend" width={20} height={20} />
@@ -12,7 +16,7 @@ export default function Footer() {
               href="https://github.com/dinhanhthi/coding-friend"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-violet-600 hover:text-violet-500 dark:text-violet-400 dark:hover:text-violet-300"
+              className="text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300"
             >
               Coding Friend
             </a>
@@ -21,7 +25,7 @@ export default function Footer() {
               href="https://dinhanhthi.com"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-violet-600 hover:text-violet-500 dark:text-violet-400 dark:hover:text-violet-300"
+              className="text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300"
             >
               Anh-Thi Dinh
             </a>

package/lib/learn-host/src/components/layout/Header.tsx

@@ -89,7 +89,7 @@ export default function Header({ categories }: { categories: CategoryInfo[] }) {
               key={cat.name}
               href={`/${cat.name}/`}
               onClick={() => setMobileOpen(false)}
-              className="flex items-center justify-between px-3 py-2 text-sm font-medium text-slate-600 capitalize hover:text-violet-600 dark:text-slate-400 dark:hover:text-violet-400"
+              className="flex items-center justify-between px-3 py-2 text-sm font-medium text-slate-600 capitalize hover:text-amber-600 dark:text-slate-400 dark:hover:text-amber-400"
             >
               <span>{cat.name.replace(/[_-]/g, " ")}</span>
               <span className="text-xs text-slate-400 dark:text-slate-500">
@@ -102,7 +102,7 @@ export default function Header({ categories }: { categories: CategoryInfo[] }) {
               href="https://github.com/dinhanhthi/coding-friend"
               target="_blank"
               rel="noopener noreferrer"
-              className="flex cursor-pointer items-center gap-2 text-sm font-medium text-slate-500 hover:text-violet-600 dark:text-slate-400 dark:hover:text-violet-400"
+              className="flex cursor-pointer items-center gap-2 text-sm font-medium text-slate-500 hover:text-amber-600 dark:text-slate-400 dark:hover:text-amber-400"
             >
               <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
                 <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />

package/lib/learn-host/src/lib/docs.ts

@@ -102,8 +102,17 @@ function parseFrontmatter(raw: matter.GrayMatterFile<string>): DocFrontmatter {
 
 function makeExcerpt(content: string, maxLen = 160): string {
   const text = content
-    .replace(/^#+\s.*/gm, "")
-    .replace(/```[\s\S]*?```/g, "")
+    .replace(/^#+\s.*/gm, "") // headings
+    .replace(/```[\s\S]*?```/g, "") // fenced code blocks
+    .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1") // [text](url) → text
+    .replace(/!\[([^\]]*)\]\([^)]*\)/g, "") // images
+    .replace(/(\*\*|__)(.*?)\1/g, "$2") // bold
+    .replace(/(\*|_)(.*?)\1/g, "$2") // italic
+    .replace(/~~(.*?)~~/g, "$1") // strikethrough
+    .replace(/`([^`]+)`/g, "$1") // inline code
+    .replace(/^>\s?/gm, "") // blockquotes
+    .replace(/^[-*+]\s/gm, "") // unordered list markers
+    .replace(/^\d+\.\s/gm, "") // ordered list markers
     .replace(/\n{2,}/g, " ")
     .replace(/\n/g, " ")
     .trim();

package/lib/learn-mcp/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog (Learn MCP)
 
+## v0.0.3 (2026-03-03)
+
+- Add Claude Desktop config documentation for compiled output ([#d37a6b9](https://github.com/dinhanhthi/coding-friend/commit/d37a6b9))
+
 ## v0.0.2 (2026-03-01)
 
 - Add support for coding-friend-cli integration

package/lib/learn-mcp/README.md

@@ -93,6 +93,24 @@ npm run build
 node dist/index.js /path/to/docs/learn
 ```
 
+For Claude Desktop with the compiled version:
+
+```json
+{
+  "mcpServers": {
+    "coding-friend-learn": {
+      "command": "node",
+      "args": [
+        "/path/to/coding-friend/cli/lib/learn-mcp/dist/index.js",
+        "/path/to/your/docs/learn"
+      ]
+    }
+  }
+}
+```
+
+> **Note:** The path must include `/cli/lib/learn-mcp/`, not `/lib/learn-mcp/`. Run `npm run build` first to generate `dist/`.
+
 ## Docs Directory Structure
 
 ```

package/lib/learn-mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coding-friend-learn-mcp",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": true,
   "type": "module",
   "bin": {

package/lib/learn-mcp/src/index.ts

@@ -8,7 +8,7 @@ const docsDir = path.resolve(rawDir);
 
 const server = new McpServer({
   name: "coding-friend-learn",
-  version: "0.0.1",
+  version: "0.0.3",
 });
 
 registerAllTools(server, docsDir);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coding-friend-cli",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "CLI for coding-friend — host learning docs, setup MCP server, initialize projects",
   "type": "module",
   "bin": {

package/lib/learn-host/next-env.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.