VS Code extension update - v1.1.6

extension/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to the **AI Stack Kit** VS Code extension are documented here.
 
+## [1.1.6] - 2026-05-18
+
+### Fixed
+
+- **Activity Bar view order** default is now Modules → Catalog → Outputs.
+- **Globe (skill browser) button** opens the hosted [skill browser](https://deb-adarsh.github.io/ai-stack-kit/) in your browser instead of re-focusing the sidebar.
+- **Show Catalog** command reveals the AI Stack Kit sidebar and Catalog panel reliably.
+
+## [1.1.5] - 2026-05-18
+
+### Fixed
+
+- **Activity Bar icon** uses separate light/dark SVGs (single-path, no `opacity`/`currentColor`) so VS Code renders stacked bars instead of a gray placeholder square.
+
 ## [1.1.4] - 2026-05-18
 
 ### Fixed

extension/package.json

@@ -2,7 +2,7 @@
   "name": "ai-stack-kit",
   "displayName": "AI Stack Kit",
   "description": "Manage AI skills, subagents, and hooks from spec.yaml — search catalogs, sync to Cursor, Copilot, and Claude.",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "publisher": "deb-adarsh",
   "license": "Apache-2.0",
   "repository": {
@@ -24,7 +24,14 @@
   "categories": ["Other", "Machine Learning"],
   "keywords": ["ai", "copilot", "cursor", "claude", "skills", "agents"],
   "icon": "media/icon.png",
-  "activationEvents": ["onView:aistack.modules", "workspaceContains:spec.yaml"],
+  "activationEvents": [
+    "onView:aistack.modules",
+    "onView:aistack.catalog",
+    "onView:aistack.outputs",
+    "onCommand:aistack.openCatalog",
+    "onCommand:aistack.openSkillBrowser",
+    "workspaceContains:spec.yaml"
+  ],
   "main": "./dist/extension.js",
   "contributes": {
     "viewsContainers": {
@@ -33,8 +40,8 @@
           "id": "aistack",
           "title": "AI Stack Kit",
           "icon": {
-            "light": "media/activity-bar-icon.svg",
-            "dark": "media/activity-bar-icon.svg"
+            "light": "media/activity-bar-icon-light.svg",
+            "dark": "media/activity-bar-icon-dark.svg"
           }
         }
       ]
@@ -45,14 +52,14 @@
           "id": "aistack.modules",
           "name": "Modules"
         },
-        {
-          "id": "aistack.outputs",
-          "name": "Outputs"
-        },
         {
           "type": "webview",
           "id": "aistack.catalog",
           "name": "Catalog"
+        },
+        {
+          "id": "aistack.outputs",
+          "name": "Outputs"
         }
       ]
     },
@@ -89,7 +96,12 @@
       },
       {
         "command": "aistack.openCatalog",
-        "title": "AI Stack Kit: Open Skill Browser",
+        "title": "AI Stack Kit: Show Catalog Panel",
+        "icon": "$(list-tree)"
+      },
+      {
+        "command": "aistack.openSkillBrowser",
+        "title": "AI Stack Kit: Open Skill Browser (Web)",
         "icon": "$(globe)"
       },
       {
@@ -135,7 +147,7 @@
           "group": "navigation@2"
         },
         {
-          "command": "aistack.openCatalog",
+          "command": "aistack.openSkillBrowser",
           "when": "view == aistack.catalog",
           "group": "navigation@1"
         }

extension/src/constants.ts

@@ -1,4 +1,7 @@
 export const EXTENSION_ID = 'deb-adarsh.ai-stack-kit';
+export const VIEW_CONTAINER = 'aistack';
 export const VIEW_MODULES = 'aistack.modules';
-export const VIEW_OUTPUTS = 'aistack.outputs';
 export const VIEW_CATALOG = 'aistack.catalog';
+export const VIEW_OUTPUTS = 'aistack.outputs';
+/** Hosted skill browser (GitHub Pages). */
+export const SKILL_BROWSER_URL = 'https://deb-adarsh.github.io/ai-stack-kit/';

extension/src/extension.ts

@@ -1,6 +1,12 @@
 import * as vscode from 'vscode';
 import * as path from 'node:path';
-import { VIEW_CATALOG, VIEW_MODULES, VIEW_OUTPUTS } from './constants.js';
+import {
+  SKILL_BROWSER_URL,
+  VIEW_CATALOG,
+  VIEW_CONTAINER,
+  VIEW_MODULES,
+  VIEW_OUTPUTS,
+} from './constants.js';
 import { ModulesTreeProvider, ModuleTreeItem } from './views/modulesTreeProvider.js';
 import { OutputsTreeProvider } from './views/outputsTreeProvider.js';
 import { CatalogWebviewProvider } from './views/catalogWebviewProvider.js';
@@ -80,9 +86,8 @@ export function activate(context: vscode.ExtensionContext): void {
   register('aistack.search', () => runSearch());
   register('aistack.add', () => runAdd());
   register('aistack.switchClient', () => runSwitchClient());
-  register('aistack.openCatalog', async () => {
-    await vscode.commands.executeCommand(`${VIEW_CATALOG}.focus`);
-  });
+  register('aistack.openCatalog', () => focusCatalogPanel());
+  register('aistack.openSkillBrowser', () => openSkillBrowserWeb());
   register('aistack.refreshCatalog', () => runRefreshCatalogList());
   register('aistack.openSpec', () => openSpec());
   register('aistack.modules.refresh', () => refreshAll());
@@ -142,6 +147,20 @@ async function updateStatusBar(): Promise<void> {
   }
 }
 
+async function focusCatalogPanel(): Promise<void> {
+  try {
+    await vscode.commands.executeCommand(`workbench.view.extension.${VIEW_CONTAINER}`);
+    await vscode.commands.executeCommand(`${VIEW_CATALOG}.focus`);
+  } catch (e) {
+    log('error', e instanceof Error ? e.message : String(e));
+    void vscode.window.showErrorMessage('Could not open the Catalog panel.');
+  }
+}
+
+function openSkillBrowserWeb(): void {
+  void vscode.env.openExternal(vscode.Uri.parse(SKILL_BROWSER_URL));
+}
+
 function asModuleTreeItem(item: unknown): ModuleTreeItem | undefined {
   return item instanceof ModuleTreeItem ? item : undefined;
 }

extension/src/views/catalogWebviewProvider.ts

@@ -1,6 +1,7 @@
 import * as vscode from 'vscode';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
+import { SKILL_BROWSER_URL } from '../constants.js';
 import { requireWorkspace } from '../services/workspaceService.js';
 import { applyGithubTokenFromSettings } from '../services/configService.js';
 import { prepareWebviewHtml } from '../utils/webview.js';
@@ -30,6 +31,10 @@ export class CatalogWebviewProvider implements vscode.WebviewViewProvider {
     }
 
     webviewView.webview.onDidReceiveMessage(async (msg: { type: string; id?: string; text?: string }) => {
+      if (msg.type === 'openSkillBrowser') {
+        await vscode.env.openExternal(vscode.Uri.parse(SKILL_BROWSER_URL));
+        return;
+      }
       if (msg.type === 'copy' && msg.text) {
         await vscode.env.clipboard.writeText(msg.text);
         void webviewView.webview.postMessage({ type: 'toast', text: 'Copied!' });

extension/webview-ui/main.ts

@@ -57,6 +57,22 @@ app.innerHTML = `
       border-color: var(--vscode-focusBorder, #007fd4);
     }
     select { min-width: 7.5rem; }
+    .header-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      margin-bottom: 4px;
+    }
+    .header-row a {
+      font-size: 0.85em;
+      color: var(--vscode-textLink-foreground);
+      text-decoration: none;
+      white-space: nowrap;
+    }
+    .header-row a:hover {
+      text-decoration: underline;
+    }
     .meta {
       display: flex;
       justify-content: space-between;
@@ -128,7 +144,10 @@ app.innerHTML = `
       box-shadow: 0 2px 8px rgba(0,0,0,0.25);
     }
   </style>
-  <h2>Catalog</h2>
+  <div class="header-row">
+    <h2>Catalog</h2>
+    <a href="#" id="open-web">Full skill browser ↗</a>
+  </div>
   <div class="toolbar">
     <div class="search-row">
       <input type="search" id="q" placeholder="Search by name, publisher, description…" autocomplete="off" spellcheck="false" />
@@ -267,6 +286,11 @@ document.getElementById('q')!.addEventListener('input', () => {
 });
 document.getElementById('type')!.addEventListener('change', render);
 
+document.getElementById('open-web')!.addEventListener('click', (e) => {
+  e.preventDefault();
+  vscode.postMessage({ type: 'openSkillBrowser' });
+});
+
 window.addEventListener('message', (e) => {
   if (e.data?.type === 'toast') {
     const t = document.getElementById('toast')!;