coding-friend-cli 1.5.1 → 1.6.0

package/README.md

@@ -37,6 +37,7 @@ cf dev off           # Switch back to remote marketplace
 cf dev status        # Show current dev mode (local or remote)
 cf dev sync          # Sync local changes to cache (no version bump needed)
 cf dev restart       # Reinstall local dev plugin (off + on)
+cf dev update        # Update local dev plugin to latest version (off + on)
 cf help              # Show all commands
 ```
 

package/dist/{chunk-DDISNOEK.js → chunk-4PLV2ENL.js}

@@ -17,12 +17,12 @@ _cf_completions() {
 
   # Subcommands for 'dev'
   if [[ "\${COMP_WORDS[1]}" == "dev" && \${COMP_CWORD} -eq 2 ]]; then
-    COMPREPLY=($(compgen -W "on off status restart sync" -- "$cur"))
+    COMPREPLY=($(compgen -W "on off status restart sync update" -- "$cur"))
     return
   fi
 
-  # Path completion for 'dev on'
-  if [[ "\${COMP_WORDS[1]}" == "dev" && "$prev" == "on" ]]; then
+  # Path completion for 'dev on|restart|update'
+  if [[ "\${COMP_WORDS[1]}" == "dev" && ("$prev" == "on" || "$prev" == "restart" || "$prev" == "update") ]]; then
     COMPREPLY=($(compgen -d -- "$cur"))
     return
   fi
@@ -58,9 +58,10 @@ _cf() {
       'status:Show current dev mode'
       'restart:Restart dev mode (re-apply local plugin)'
       'sync:Sync local plugin files without restarting'
+      'update:Update local dev plugin to latest version'
     )
     _describe 'subcommand' subcommands
-  elif (( CURRENT == 4 )) && [[ "\${words[2]}" == "dev" && "\${words[3]}" == "on" ]]; then
+  elif (( CURRENT == 4 )) && [[ "\${words[2]}" == "dev" && ("\${words[3]}" == "on" || "\${words[3]}" == "restart" || "\${words[3]}" == "update") ]]; then
     _path_files -/
   fi
 }

package/dist/{chunk-GTTSBOHM.js → chunk-ESIIWKPD.js}

@@ -1,26 +1,27 @@
+import {
+  ensureStatusline,
+  getInstalledVersion
+} from "./chunk-FWHEMJS3.js";
 import {
   ensureShellCompletion
-} from "./chunk-DDISNOEK.js";
+} from "./chunk-4PLV2ENL.js";
 import {
   commandExists,
   run,
   sleepSync
 } from "./chunk-UFGNO6CW.js";
 import {
-  claudeSettingsPath,
-  installedPluginsPath,
-  pluginCachePath
+  claudeSettingsPath
 } from "./chunk-WHCJT7E2.js";
 import {
   log
 } from "./chunk-6DUFTBTO.js";
 import {
-  readJson,
-  writeJson
+  readJson
 } from "./chunk-IUTXHCP7.js";
 
 // src/commands/update.ts
-import { existsSync, readFileSync, readdirSync } from "fs";
+import { readFileSync } from "fs";
 import { dirname, join } from "path";
 import { fileURLToPath } from "url";
 import chalk from "chalk";
@@ -43,22 +44,6 @@ function getCliVersion() {
 function getLatestCliVersion() {
   return run("npm", ["view", "coding-friend-cli", "version"]);
 }
-function getInstalledVersion() {
-  const data = readJson(installedPluginsPath());
-  if (!data) return null;
-  const plugins = data.plugins ?? data;
-  for (const [key, value] of Object.entries(plugins)) {
-    if (!key.includes("coding-friend")) continue;
-    if (Array.isArray(value) && value.length > 0) {
-      const entry = value[0];
-      if (typeof entry.version === "string") return entry.version;
-    }
-    if (typeof value === "object" && value !== null && "version" in value) {
-      return value.version;
-    }
-  }
-  return null;
-}
 function getLatestVersion() {
   let tag = run("gh", [
     "api",
@@ -92,28 +77,6 @@ function getStatuslineVersion() {
   );
   return match?.[1] ?? null;
 }
-function findLatestCacheVersion() {
-  const cachePath = pluginCachePath();
-  if (!existsSync(cachePath)) return null;
-  const versions = readdirSync(cachePath, { withFileTypes: true }).filter((e) => e.isDirectory()).map((e) => e.name).sort().reverse();
-  return versions[0] ?? null;
-}
-function updateStatusline(version) {
-  const cachePath = pluginCachePath();
-  const hookPath = `${cachePath}/${version}/hooks/statusline.sh`;
-  if (!existsSync(hookPath)) {
-    log.warn(`Statusline hook not found for v${version}`);
-    return false;
-  }
-  const settingsPath = claudeSettingsPath();
-  const settings = readJson(settingsPath) ?? {};
-  settings.statusLine = {
-    type: "command",
-    command: `bash ${hookPath}`
-  };
-  writeJson(settingsPath, settings);
-  return true;
-}
 async function updateCommand(opts) {
   const updateAll = !opts.cli && !opts.plugin && !opts.statusline;
   const doCli = updateAll || !!opts.cli;
@@ -232,16 +195,12 @@ async function updateCommand(opts) {
     }
   }
   if (doStatusline) {
-    const targetVersion = findLatestCacheVersion();
-    if (targetVersion) {
-      log.step("Updating statusline...");
-      if (updateStatusline(targetVersion)) {
-        log.success(
-          `Statusline updated to ${chalk.green(`v${targetVersion}`)}`
-        );
-      }
+    log.step("Updating statusline...");
+    const updatedVersion = ensureStatusline();
+    if (updatedVersion) {
+      log.success(`Statusline updated to ${chalk.green(`v${updatedVersion}`)}`);
     } else {
-      log.warn("No cached plugin version found for statusline update.");
+      log.dim("Statusline already up-to-date.");
     }
   }
   ensureShellCompletion({ silent: false });
@@ -251,7 +210,6 @@ async function updateCommand(opts) {
 
 export {
   semverCompare,
-  getInstalledVersion,
   getLatestVersion,
   updateCommand
 };

package/dist/{chunk-5OALHHKR.js → chunk-FWHEMJS3.js}

@@ -5,6 +5,7 @@ import {
 import {
   claudeSettingsPath,
   globalConfigPath,
+  installedPluginsPath,
   pluginCachePath
 } from "./chunk-WHCJT7E2.js";
 import {
@@ -16,6 +17,22 @@ import {
 // src/lib/statusline.ts
 import { existsSync, readdirSync } from "fs";
 import { checkbox } from "@inquirer/prompts";
+function getInstalledVersion() {
+  const data = readJson(installedPluginsPath());
+  if (!data) return null;
+  const plugins = data.plugins ?? data;
+  for (const [key, value] of Object.entries(plugins)) {
+    if (!key.includes("coding-friend")) continue;
+    if (Array.isArray(value) && value.length > 0) {
+      const entry = value[0];
+      if (typeof entry.version === "string") return entry.version;
+    }
+    if (typeof value === "object" && value !== null && "version" in value) {
+      return value.version;
+    }
+  }
+  return null;
+}
 function findLatestVersion() {
   const cachePath = pluginCachePath();
   if (!existsSync(cachePath)) return null;
@@ -23,11 +40,17 @@ function findLatestVersion() {
   return versions[0] ?? null;
 }
 function findStatuslineHookPath() {
-  const version = findLatestVersion();
-  if (!version) return null;
-  const hookPath = `${pluginCachePath()}/${version}/hooks/statusline.sh`;
+  const cachePath = pluginCachePath();
+  const installed = getInstalledVersion();
+  if (installed) {
+    const hookPath2 = `${cachePath}/${installed}/hooks/statusline.sh`;
+    if (existsSync(hookPath2)) return { hookPath: hookPath2, version: installed };
+  }
+  const latest = findLatestVersion();
+  if (!latest) return null;
+  const hookPath = `${cachePath}/${latest}/hooks/statusline.sh`;
   if (!existsSync(hookPath)) return null;
-  return { hookPath, version };
+  return { hookPath, version: latest };
 }
 function loadStatuslineComponents() {
   const config = readJson(globalConfigPath());
@@ -61,6 +84,18 @@ function writeStatuslineSettings(hookPath) {
   };
   writeJson(settingsPath, settings);
 }
+function ensureStatusline() {
+  const info = findStatuslineHookPath();
+  if (!info) return null;
+  const settingsPath = claudeSettingsPath();
+  const settings = readJson(settingsPath) ?? {};
+  const current = settings.statusLine?.command;
+  const expected = `bash ${info.hookPath}`;
+  if (current === expected) return null;
+  settings.statusLine = { type: "command", command: expected };
+  writeJson(settingsPath, settings);
+  return info.version;
+}
 function isStatuslineConfigured() {
   const settings = readJson(claudeSettingsPath());
   if (!settings) return false;
@@ -69,9 +104,11 @@ function isStatuslineConfigured() {
 }
 
 export {
+  getInstalledVersion,
   findStatuslineHookPath,
   selectStatuslineComponents,
   saveStatuslineConfig,
   writeStatuslineSettings,
+  ensureStatusline,
   isStatuslineConfigured
 };

package/dist/{dev-WINMWRZK.js → dev-EWSTIVM7.js}

@@ -2,12 +2,18 @@ import {
   isMarketplaceRegistered,
   isPluginInstalled
 } from "./chunk-MRTR7TJ4.js";
+import {
+  ensureStatusline
+} from "./chunk-FWHEMJS3.js";
+import {
+  ensureShellCompletion
+} from "./chunk-4PLV2ENL.js";
+import "./chunk-JWAJ4XPK.js";
 import {
   commandExists,
   run
 } from "./chunk-UFGNO6CW.js";
 import {
-  claudeSettingsPath,
   devStatePath,
   knownMarketplacesPath,
   pluginCachePath
@@ -56,28 +62,6 @@ function runClaude(args, label) {
   }
   return true;
 }
-function updateSettingsCachePaths() {
-  const cachePath = pluginCachePath();
-  if (!existsSync(cachePath)) return;
-  const versions = readdirSync(cachePath, { withFileTypes: true }).filter((e) => e.isDirectory()).map((e) => e.name).sort().reverse();
-  const latest = versions[0];
-  if (!latest) return;
-  const settingsPath = claudeSettingsPath();
-  const settings = readJson(settingsPath);
-  if (!settings) return;
-  const statusLine = settings.statusLine;
-  if (!statusLine?.command) return;
-  const prefix = cachePath + "/";
-  if (!statusLine.command.includes(prefix)) return;
-  const updated = statusLine.command.replace(
-    new RegExp(`${prefix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}[^/]+/`),
-    `${prefix}${latest}/`
-  );
-  if (updated === statusLine.command) return;
-  settings.statusLine = { ...statusLine, command: updated };
-  writeJson(settingsPath, settings);
-  log.info(`Updated statusline path to ${chalk.green(`v${latest}`)}`);
-}
 async function devOnCommand(path) {
   const state = getDevState();
   if (state) {
@@ -131,7 +115,8 @@ async function devOnCommand(path) {
     savedAt: (/* @__PURE__ */ new Date()).toISOString()
   };
   writeJson(devStatePath(), devState);
-  updateSettingsCachePaths();
+  ensureStatusline();
+  ensureShellCompletion({ silent: true });
   console.log();
   log.success(
     `Dev mode ${chalk.green("ON")} \u2014 using local plugin from ${chalk.cyan(localPath)}`
@@ -260,12 +245,12 @@ async function devSyncCommand() {
     `Synced ${chalk.green(fileCount.n)} files. Restart Claude Code to apply changes.`
   );
 }
-async function devRestartCommand(path) {
+async function devReinstall(path, label) {
   const state = getDevState();
   if (!ensureClaude()) return;
   const localPath = path ?? state?.localPath;
   console.log(`
-=== ${chalk.cyan("Restarting dev mode")} ===
+=== ${chalk.cyan(label)} ===
 `);
   if (state) {
     await devOffCommand();
@@ -274,7 +259,10 @@ async function devRestartCommand(path) {
     log.info("Dev mode was OFF \u2014 skipping off step.");
   }
   await devOnCommand(localPath);
+  ensureShellCompletion({ silent: true });
 }
+var devRestartCommand = (path) => devReinstall(path, "Restarting dev mode");
+var devUpdateCommand = (path) => devReinstall(path, "Updating dev plugin");
 async function devStatusCommand() {
   const state = getDevState();
   const source = getMarketplaceSource();
@@ -302,5 +290,6 @@ export {
   devOnCommand,
   devRestartCommand,
   devStatusCommand,
-  devSyncCommand
+  devSyncCommand,
+  devUpdateCommand
 };

package/dist/index.js

@@ -14,15 +14,15 @@ 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-BEFMUMKE.js");
+  const { installCommand } = await import("./install-RZFSIPFD.js");
   await installCommand();
 });
 program.command("uninstall").description("Uninstall the Coding Friend plugin from Claude Code").action(async () => {
-  const { uninstallCommand } = await import("./uninstall-BHYS52L3.js");
+  const { uninstallCommand } = await import("./uninstall-KOAJFPD6.js");
   await uninstallCommand();
 });
 program.command("init").description("Initialize coding-friend in current project").action(async () => {
-  const { initCommand } = await import("./init-K4EVPAHK.js");
+  const { initCommand } = await import("./init-HX5T5DBV.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) => {
@@ -34,11 +34,11 @@ program.command("mcp").description("Setup MCP server for learning docs").argumen
   await mcpCommand(path);
 });
 program.command("statusline").description("Setup coding-friend statusline in Claude Code").action(async () => {
-  const { statuslineCommand } = await import("./statusline-3MQQDRCI.js");
+  const { statuslineCommand } = await import("./statusline-WGPSURDC.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-TALQ7TAO.js");
+  const { updateCommand } = await import("./update-VAFEWOLA.js");
   await updateCommand(opts);
 });
 var dev = program.command("dev").description("Development mode commands");
@@ -50,31 +50,39 @@ Dev subcommands:
   dev off             Switch back to remote marketplace
   dev status          Show current dev mode
   dev sync            Copy local source to plugin cache
-  dev restart [path]  Reinstall local dev plugin (off + on)`
+  dev restart [path]  Reinstall local dev plugin (off + on)
+  dev update [path]   Update local dev plugin to latest version`
 );
 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-WINMWRZK.js");
+  const { devOnCommand } = await import("./dev-EWSTIVM7.js");
   await devOnCommand(path);
 });
 dev.command("off").description("Switch back to remote marketplace").action(async () => {
-  const { devOffCommand } = await import("./dev-WINMWRZK.js");
+  const { devOffCommand } = await import("./dev-EWSTIVM7.js");
   await devOffCommand();
 });
 dev.command("status").description("Show current dev mode").action(async () => {
-  const { devStatusCommand } = await import("./dev-WINMWRZK.js");
+  const { devStatusCommand } = await import("./dev-EWSTIVM7.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-WINMWRZK.js");
+  const { devSyncCommand } = await import("./dev-EWSTIVM7.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-WINMWRZK.js");
+  const { devRestartCommand } = await import("./dev-EWSTIVM7.js");
   await devRestartCommand(path);
 });
+dev.command("update").description("Update local dev plugin to latest version (off + on)").argument(
+  "[path]",
+  "path to local coding-friend repo (default: saved path or cwd)"
+).action(async (path) => {
+  const { devUpdateCommand } = await import("./dev-EWSTIVM7.js");
+  await devUpdateCommand(path);
+});
 program.parse();

package/dist/{init-K4EVPAHK.js → init-HX5T5DBV.js}

@@ -4,11 +4,11 @@ import {
   saveStatuslineConfig,
   selectStatuslineComponents,
   writeStatuslineSettings
-} from "./chunk-5OALHHKR.js";
+} from "./chunk-FWHEMJS3.js";
 import {
   ensureShellCompletion,
   hasShellCompletion
-} from "./chunk-DDISNOEK.js";
+} from "./chunk-4PLV2ENL.js";
 import {
   DEFAULT_CONFIG
 } from "./chunk-JWAJ4XPK.js";

package/dist/{install-BEFMUMKE.js → install-RZFSIPFD.js}

@@ -1,12 +1,15 @@
 import {
-  getInstalledVersion,
   getLatestVersion,
   semverCompare
-} from "./chunk-GTTSBOHM.js";
+} from "./chunk-ESIIWKPD.js";
 import {
   isMarketplaceRegistered
 } from "./chunk-MRTR7TJ4.js";
-import "./chunk-DDISNOEK.js";
+import {
+  getInstalledVersion
+} from "./chunk-FWHEMJS3.js";
+import "./chunk-4PLV2ENL.js";
+import "./chunk-JWAJ4XPK.js";
 import {
   commandExists,
   run

package/dist/postinstall.js

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

package/dist/{statusline-3MQQDRCI.js → statusline-WGPSURDC.js}

@@ -4,7 +4,7 @@ import {
   saveStatuslineConfig,
   selectStatuslineComponents,
   writeStatuslineSettings
-} from "./chunk-5OALHHKR.js";
+} from "./chunk-FWHEMJS3.js";
 import {
   ALL_COMPONENT_IDS
 } from "./chunk-JWAJ4XPK.js";

package/dist/{uninstall-BHYS52L3.js → uninstall-KOAJFPD6.js}

@@ -5,7 +5,7 @@ import {
 import {
   hasShellCompletion,
   removeShellCompletion
-} from "./chunk-DDISNOEK.js";
+} from "./chunk-4PLV2ENL.js";
 import {
   commandExists,
   run

package/dist/{update-TALQ7TAO.js → update-VAFEWOLA.js}

@@ -1,16 +1,16 @@
 import {
-  getInstalledVersion,
   getLatestVersion,
   semverCompare,
   updateCommand
-} from "./chunk-GTTSBOHM.js";
-import "./chunk-DDISNOEK.js";
+} from "./chunk-ESIIWKPD.js";
+import "./chunk-FWHEMJS3.js";
+import "./chunk-4PLV2ENL.js";
+import "./chunk-JWAJ4XPK.js";
 import "./chunk-UFGNO6CW.js";
 import "./chunk-WHCJT7E2.js";
 import "./chunk-6DUFTBTO.js";
 import "./chunk-IUTXHCP7.js";
 export {
-  getInstalledVersion,
   getLatestVersion,
   semverCompare,
   updateCommand

package/lib/learn-host/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog (Learn Host)
 
+## v0.2.0 (2026-03-03)
+
+- Add dedicated tag pages for filtering docs by tag ([#06f5847](https://github.com/dinhanhthi/coding-friend/commit/06f5847))
+- Style improvements across website and learn-host ([#0029522](https://github.com/dinhanhthi/coding-friend/commit/0029522))
+
 ## v0.1.0 (2026-03-03)
 
 - Add copy button to code blocks ([#ac47c74](https://github.com/dinhanhthi/coding-friend/commit/ac47c74))

package/lib/learn-host/package.json

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

package/lib/learn-host/src/app/[category]/[slug]/page.tsx

@@ -51,7 +51,7 @@ export default async function DocPage({
           {doc.frontmatter.tags.length > 0 && (
             <div className="mt-3 flex flex-wrap gap-1.5">
               {doc.frontmatter.tags.map((tag) => (
-                <TagBadge key={tag} tag={tag} />
+                <TagBadge key={tag} tag={tag} size="sm" />
               ))}
             </div>
           )}

package/lib/learn-host/src/app/[category]/page.tsx

@@ -21,7 +21,7 @@ export default async function CategoryPage({
     <div>
       <Breadcrumbs crumbs={[{ label: displayName }]} />
       <h1 className="mb-1 text-2xl font-bold capitalize">{displayName}</h1>
-      <p className="mb-6 text-slate-500 dark:text-slate-400">
+      <p className="mb-6 pl-0.5 text-slate-500 dark:text-slate-400">
         {docs.length} {docs.length === 1 ? "doc" : "docs"}
       </p>
 

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

@@ -33,7 +33,7 @@ export default function RootLayout({
           rel="stylesheet"
         />
       </head>
-      <body className="dark:bg-navy-900 bg-white text-slate-900 antialiased dark:text-slate-50">
+      <body className="dark:bg-navy-950 bg-white text-slate-900 antialiased dark:text-slate-50">
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <Header categories={categories} />
           <div data-pagefind-ignore className="md:hidden">

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

@@ -47,7 +47,7 @@ export default function HomePage() {
             <Link
               key={cat.name}
               href={`/${cat.name}/`}
-              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"
+              className="group dark:bg-navy-900/80 dark:hover:bg-navy-800/60 hover:border-navy-400 relative cursor-pointer overflow-hidden rounded-xl border border-slate-200 bg-slate-50 p-4 transition-all duration-200 hover:-translate-y-0.5 dark:border-[#a0a0a01c]"
             >
               <div className="mb-1 font-medium text-slate-900 capitalize dark:text-slate-100">
                 {cat.name.replace(/[_-]/g, " ")}
@@ -55,7 +55,7 @@ export default function HomePage() {
               <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">
+              <div className="absolute right-3 bottom-3 flex h-7 w-7 items-center justify-center rounded-full bg-slate-200 text-xs font-semibold text-slate-500 dark:bg-slate-600/50 dark:text-slate-400">
                 {cat.docCount}
               </div>
             </Link>

package/lib/learn-host/src/app/tag/[tag]/page.tsx

@@ -0,0 +1,39 @@
+import { getAllTags, getDocsByTag } from "@/lib/docs";
+import DocCard from "@/components/DocCard";
+import Breadcrumbs from "@/components/Breadcrumbs";
+import { notFound } from "next/navigation";
+
+export async function generateStaticParams() {
+  return getAllTags().map((t) => ({ tag: t.tag }));
+}
+
+export const dynamicParams = true;
+
+export default async function TagPage({
+  params,
+}: {
+  params: Promise<{ tag: string }>;
+}) {
+  const { tag } = await params;
+  const docs = getDocsByTag(tag);
+  if (docs.length === 0) notFound();
+
+  return (
+    <div>
+      <Breadcrumbs crumbs={[{ label: `# ${tag}` }]} />
+      <h1 className="mb-1 flex items-center gap-2 text-2xl font-bold">
+        <span className="text-slate-400 dark:text-slate-500">#</span>
+        {tag}
+      </h1>
+      <p className="mb-6 pl-0.5 text-slate-500 dark:text-slate-400">
+        {docs.length} {docs.length === 1 ? "doc" : "docs"}
+      </p>
+
+      <div className="grid gap-3">
+        {docs.map((doc) => (
+          <DocCard key={`${doc.category}/${doc.slug}`} doc={doc} />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -2,7 +2,6 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import TagBadge from "./TagBadge";
 import type { DocMeta } from "@/lib/types";
 
 export default function DocCard({ doc }: { doc: DocMeta }) {
@@ -17,21 +16,25 @@ 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 duration-200 hover:border-amber-300 hover:shadow-sm dark:border-[#a0a0a01c] dark:hover:border-amber-500/40"
+      className="hover:border-navy-400 dark:bg-navy-900/80 dark:hover:bg-navy-800/60 block cursor-pointer rounded-xl border border-slate-300 p-4 transition-all duration-200 hover:-translate-y-0.5 dark:border-[#a0a0a01c]"
     >
-      <h3 className="mb-2 font-semibold text-slate-900 dark:text-slate-100">
+      <h3 className="mb-2 font-medium text-slate-900 dark:text-slate-100">
         <Link href={href}>{doc.frontmatter.title}</Link>
       </h3>
-      <p className="mb-3 line-clamp-2 text-sm text-slate-500 dark:text-slate-400">
+      <p className="mb-3 line-clamp-2 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
         {doc.excerpt}
       </p>
       <div className="flex items-center justify-between">
-        <div
-          className="flex flex-wrap items-center gap-2"
-          onClick={(e) => e.stopPropagation()}
-        >
+        <div className="flex flex-wrap items-center gap-2">
           {doc.frontmatter.tags.slice(0, 3).map((tag) => (
-            <TagBadge key={tag} tag={tag} />
+            <Link
+              key={tag}
+              href={`/tag/${encodeURIComponent(tag)}/`}
+              onClick={(e) => e.stopPropagation()}
+              className="inline-flex items-center justify-center rounded-full border border-slate-200 bg-slate-100 px-2.5 py-0.5 text-xs text-slate-600 dark:border-slate-600 dark:bg-slate-600/50 dark:text-slate-300"
+            >
+              {tag}
+            </Link>
           ))}
           {doc.frontmatter.tags.length > 3 && (
             <span className="text-xs text-slate-400">

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

@@ -1,10 +1,10 @@
 "use client";
 
-import { useState, useEffect, useRef, useCallback } from "react";
+import { DialogDescription, DialogTitle } from "@radix-ui/react-dialog";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { Command } from "cmdk";
 import { useRouter } from "next/navigation";
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { DialogTitle, DialogDescription } from "@radix-ui/react-dialog";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 interface PagefindResult {
   id: string;
@@ -41,7 +41,7 @@ function normalizePagefindUrl(url: string): string {
 function ExcerptMarkup({ html }: { html: string }) {
   return (
     <p
-      className="mt-0.5 line-clamp-2 text-sm text-slate-500 dark:text-slate-400 [&_mark]:bg-transparent [&_mark]:!text-yellow-600 dark:[&_mark]:!text-yellow-200"
+      className="mt-0.5 line-clamp-2 text-sm text-slate-500 dark:text-slate-400 [&_mark]:bg-transparent [&_mark]:text-yellow-600!"
       dangerouslySetInnerHTML={{ __html: html }}
     />
   );
@@ -162,9 +162,6 @@ export default function PagefindSearch() {
             d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
           />
         </svg>
-        <kbd className="dark:bg-navy-800/80 hidden items-center gap-0.5 rounded border border-slate-300 px-1.5 py-0.5 text-[10px] font-medium text-slate-400 sm:inline-flex dark:border-[#a0a0a01c]">
-          <span className="text-xs">&#8984;</span>K
-        </kbd>
       </button>
 
       {/* cmdk dialog */}

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

@@ -12,9 +12,9 @@ export default function Sidebar({
   const pathname = usePathname();
 
   return (
-    <aside className="dark:bg-navy-950 fixed top-14 left-0 z-10 hidden h-[calc(100vh-3.5rem)] w-64 shrink-0 border-r border-slate-200 bg-slate-50 md:flex md:flex-col lg:w-[300px] dark:border-[#a0a0a01c]">
+    <aside className="dark:bg-navy-900/80 fixed top-14 left-0 z-10 hidden h-[calc(100vh-3.5rem)] w-64 shrink-0 border-r border-slate-200 bg-slate-50 md:flex md:flex-col lg:w-[300px] dark:border-[#a0a0a01c]">
       <nav
-        className="scrollbar-none flex-1 space-y-1 overflow-y-auto p-4"
+        className="scrollbar-none flex-1 space-y-1 overflow-y-auto px-2 py-4"
         style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
       >
         {categories.map((cat) => {
@@ -23,14 +23,14 @@ export default function Sidebar({
             <Link
               key={cat.name}
               href={`/${cat.name}/`}
-              className={`flex items-center justify-between rounded-full px-3 py-2 text-sm capitalize transition-colors duration-200 ${
+              className={`flex items-center justify-between rounded-full py-1.5 pr-2 pl-4 text-sm capitalize transition-colors duration-200 ${
                 isActive
                   ? "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"
+                  : "dark:hover:bg-navy-800/70 text-slate-600 hover:bg-slate-200/50 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
               }`}
             >
               <span>{cat.name.replace(/[_-]/g, " ")}</span>
-              <span className="dark:bg-navy-800 rounded-full border border-slate-200 bg-slate-200 px-1.5 py-0.5 text-xs text-slate-500 dark:border-[#a0a0a01c] dark:text-slate-400">
+              <span className="flex h-7 w-7 scale-85 items-center justify-center rounded-full border border-slate-200 bg-slate-200/60 text-xs font-semibold text-slate-400 dark:border-slate-600/50 dark:bg-slate-600/40 dark:text-slate-400/80">
                 {cat.docCount}
               </span>
             </Link>

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 border-b border-slate-600 pb-2 text-xs font-semibold tracking-wider text-slate-400 uppercase">
+        <h4 className="mb-3 border-b border-slate-300 pb-2 text-xs font-medium tracking-wider text-slate-500 uppercase dark:border-slate-600">
           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-amber-700 dark:text-amber-400"
+                    ? "text-slate-900 dark:text-white"
                     : "text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
                 }`}
               >

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

@@ -1,10 +1,18 @@
 import Link from "next/link";
 
-export default function TagBadge({ tag }: { tag: string }) {
+export default function TagBadge({
+  tag,
+  size = "md",
+}: {
+  tag: string;
+  size?: "sm" | "md";
+}) {
+  const sizeClass = size === "sm" ? "text-xs" : "text-sm";
+  const paddingClass = size === "sm" ? "px-2 py-0.5" : "px-2.5 py-0.5";
   return (
     <Link
-      href={`/search/?q=${encodeURIComponent(tag)}`}
-      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"
+      href={`/tag/${encodeURIComponent(tag)}/`}
+      className={`hover:border-navy-400 dark:bg-navy-900/80 dark:hover:bg-navy-800/80 inline-block cursor-pointer rounded-full border border-slate-200 bg-slate-50 ${paddingClass} ${sizeClass} text-slate-700 duration-200 hover:-translate-y-0.5 hover:text-slate-800 dark:border-[#a0a0a01c] dark:text-slate-400 dark:hover:text-slate-200`}
     >
       {tag}
     </Link>

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

@@ -20,7 +20,7 @@ export default function ThemeToggle() {
   return (
     <button
       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-      className="dark:hover:bg-navy-800 cursor-pointer rounded-lg p-2 transition-colors hover:bg-slate-100"
+      className="cursor-pointer rounded-lg p-2 text-slate-500 transition-colors duration-200 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
       aria-label="Toggle theme"
     >
       {theme === "dark" ? (

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

@@ -7,7 +7,7 @@ export default function Footer({ isHome = false }: { isHome?: boolean }) {
         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 flex-row flex-wrap items-center gap-1 px-6 py-3 text-center text-xs text-slate-600 dark:text-slate-400">
         <div className="flex items-center gap-2">
           <Image src="/logo.svg" alt="Coding Friend" width={20} height={20} />
           <span>
@@ -16,7 +16,7 @@ export default function Footer({ isHome = false }: { isHome?: boolean }) {
               href="https://github.com/dinhanhthi/coding-friend"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300"
+              className="text-sky-600 hover:text-orange-500 dark:text-sky-300 dark:hover:text-orange-400"
             >
               Coding Friend
             </a>
@@ -25,7 +25,7 @@ export default function Footer({ isHome = false }: { isHome?: boolean }) {
               href="https://dinhanhthi.com"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300"
+              className="text-sky-600 hover:text-orange-500 dark:text-sky-300 dark:hover:text-orange-400"
             >
               Anh-Thi Dinh
             </a>

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

@@ -22,7 +22,7 @@ export default function Header({ categories }: { categories: CategoryInfo[] }) {
         </Link>
 
         {/* Right */}
-        <div className="flex items-center gap-1 md:gap-3">
+        <div className="flex items-center gap-1">
           {/* Search */}
           <PagefindSearch />
 

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

@@ -199,6 +199,10 @@ export function extractHeadings(content: string): TocItem[] {
   return headings;
 }
 
+export function getDocsByTag(tag: string): DocMeta[] {
+  return getAllDocs().filter((d) => d.frontmatter.tags.includes(tag));
+}
+
 export function getAllTags(): { tag: string; count: number }[] {
   const tagMap = new Map<string, number>();
   for (const doc of getAllDocs()) {

package/package.json

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