Fixes

Author: MelbourneDeveloper

website/eleventy.config.js

@@ -54,7 +54,7 @@ export default function(eleventyConfig) {
     return content.replace(original, replacement);
   });
 
-  const blogHeroBanner = [
+  const blogHeroDefault = [
     '<div class="blog-hero-banner">',
     '  <div class="blog-hero-glow"></div>',
     '  <img src="/assets/images/logo.png" alt="CommandTree logo" class="blog-hero-logo">',
@@ -66,6 +66,33 @@ export default function(eleventyConfig) {
     '</div>',
   ].join("\n");
 
+  const blogHeroImages = {
+    "/blog/ai-summaries-hover/": '/assets/images/ai-summary-banner.png',
+  };
+
+  const makeBanner = (href) => {
+    const img = blogHeroImages[href];
+    if (!img) { return blogHeroDefault; }
+    return '<div class="blog-hero-banner">\n'
+      + `  <img src="${img}" alt="Blog post banner" class="blog-hero-screenshot">\n`
+      + '</div>';
+  };
+
+  const ARTICLE_TAG = '<article class="blog-post">';
+
+  const addBannersToCards = (content) => {
+    const parts = content.split(ARTICLE_TAG);
+    return parts.map((part, i) => {
+      if (i === 0) { return part; }
+      const hrefStart = part.indexOf('href="/blog/');
+      const hrefEnd = hrefStart >= 0 ? part.indexOf('"', hrefStart + 6) : -1;
+      const href = hrefStart >= 0 && hrefEnd >= 0
+        ? part.substring(hrefStart + 6, hrefEnd)
+        : "";
+      return ARTICLE_TAG + "\n" + makeBanner(href) + part;
+    }).join("");
+  };
+
   eleventyConfig.addTransform("blogHero", function(content) {
     if (!this.page.outputPath?.endsWith(".html")) {
       return content;
@@ -74,14 +101,14 @@ export default function(eleventyConfig) {
       return content;
     }
     if (this.page.url === "/blog/") {
-      return content.replaceAll(
-        '<article class="blog-post">',
-        '<article class="blog-post">\n' + blogHeroBanner
-      );
+      return addBannersToCards(content);
+    }
+    if (content.includes('blog-hero-banner')) {
+      return content;
     }
     return content.replace(
       '<div class="blog-post-content">',
-      '<div class="blog-post-content">\n' + blogHeroBanner
+      '<div class="blog-post-content">\n' + makeBanner(this.page.url)
     );
   });
 

website/src/assets/css/styles.css

@@ -704,6 +704,15 @@ li::marker { color: var(--color-primary); }
   overflow: hidden;
   min-height: 220px;
 }
+.blog-hero-banner img.blog-hero-screenshot {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: var(--radius-lg);
+}
 .blog-hero-glow {
   position: absolute;
   top: 50%;

website/src/blog/ai-summaries-hover.md

@@ -0,0 +1,43 @@
+---
+layout: layouts/blog.njk
+title: AI Summaries on Hover - Know What Every Command Does Before You Run It
+description: CommandTree now shows AI-generated summaries when you hover over any command. Powered by GitHub Copilot, every tooltip tells you exactly what a script does.
+date: 2026-02-08
+author: Christian Findlay
+tags: posts
+excerpt: Hover over any command in CommandTree and see a plain-language summary of what it does, powered by GitHub Copilot. Security warnings included.
+---
+
+<div class="blog-hero-banner">
+  <img src="/assets/images/ai-summary-banner.png" alt="CommandTree AI summary tooltip showing a plain-language description of a build command" class="blog-hero-screenshot">
+</div>
+
+You found the script. But what does it actually *do*?
+
+Shell scripts rarely explain themselves. Makefile targets are cryptic. Even npm scripts chain together enough flags and pipes that you have to read the source to know what happens when you hit run.
+
+**CommandTree 0.5.0 fixes that.** Hover over any command and a tooltip tells you exactly what it does, in plain language.
+
+## How It Works
+
+When [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) is installed, CommandTree reads the content of every discovered command and asks Copilot for a one-to-two sentence summary. These summaries appear instantly when you hover:
+
+> *Compiles the TypeScript extension, packages it as a .vsix file, and installs it into VS Code in one step.*
+
+No reading source code. No guessing. Just hover and know.
+
+## Security Warnings
+
+Copilot also flags dangerous operations. If a script runs `rm -rf`, force-pushes to a remote, or handles credentials, the tooltip includes a security warning and the command label shows a warning indicator. You know the risk before you run.
+
+## Stored Locally, Updated Automatically
+
+Summaries are cached in a local SQLite database at `.commandtree/commandtree.sqlite3` in your workspace. They persist across sessions and only regenerate when the underlying script content changes, so there is no repeated API overhead.
+
+## Works Without Copilot
+
+Every core feature of CommandTree, including discovery, execution, tagging, and filtering, works without Copilot. AI summaries are a bonus layer. If Copilot is unavailable, the extension behaves exactly as before.
+
+## Get Started
+
+Update to CommandTree 0.5.0 from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=nimblesite.commandtree), make sure [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) is installed, and hover over any command in the tree. For full details, see the [AI Summaries documentation](/docs/ai-summaries/).