feat: simplify to primary platform status with optional additional platforms

njb90 · njb90 · commit 596ae4c9ebce · 2026-04-02T16:24:10.000+01:00
diff --git a/src/webview/client/homescreen.ts b/src/webview/client/homescreen.ts
@@ -14,11 +14,19 @@ interface McpServerInfo {
   description: string;
 }
 
+interface AdditionalPlatform {
+  id: string;
+  label: string;
+  sublabel?: string;
+  locked: boolean;
+}
+
 interface AiToolsDataMessage {
   command: "aiToolsData";
   skills: SkillInfo[];
-  installedByPlatform: Record<string, string[]>; // platformId → array of dirNames
-  activePlatforms: string[];
+  primaryPlatform: string;
+  installedOnPrimary: string[];
+  additionalPlatforms: AdditionalPlatform[];
   mcpServers: McpServerInfo[];
   configuredMcpKeys: string[];
   error?: string;
@@ -78,87 +86,44 @@ function showPanelState(state: "loading" | "ready" | "done" | "error"): void {
 
 // ── Helper functions ──────────────────────────────────────────────────────────
 
-function getCheckedPlatforms(): string[] {
-  return [...document.querySelectorAll<HTMLInputElement>(".hs-ai-platform-cb")]
-    .filter((c) => c.checked)
-    .map((c) => c.dataset.platform!);
-}
-
-function computeSkillStatus(
-  dirName: string,
-  installedByPlatform: Record<string, string[]>,
-  checkedPlatforms: string[]
-): "installed" | "partial" | "none" {
-  if (checkedPlatforms.length === 0) { return "none"; }
-  const installedCount = checkedPlatforms.filter(
-    (pid) => (installedByPlatform[pid] ?? []).includes(dirName)
-  ).length;
-  if (installedCount === checkedPlatforms.length) { return "installed"; }
-  if (installedCount > 0) { return "partial"; }
-  return "none";
-}
-
-// ── Platform definitions and rendering ───────────────────────────────────────
+// ── Platform rendering ────────────────────────────────────────────────────────
 
-const PLATFORM_DEFS = [
-  { id: "universal",      label: "Universal",        sublabel: "Cursor, Codex, Amp, Warp + more" },
-  { id: "claude-code",    label: "Claude Code" },
-  { id: "vscode-copilot", label: "VS Code (Copilot)" },
-  { id: "windsurf",       label: "Windsurf" },
-];
+const PLATFORM_LABELS: Record<string, string> = {
+  "universal":      "Universal",
+  "claude-code":    "Claude Code",
+  "vscode-copilot": "VS Code (Copilot)",
+  "windsurf":       "Windsurf",
+};
 
-function renderPlatformRows(
-  activePlatforms: string[],
-  installedByPlatform: Record<string, string[]>
-): void {
+function renderAdditionalPlatformRows(platforms: AdditionalPlatform[]): void {
   const list = el("hs-ai-platform-list");
   if (!list) { return; }
-  const activeSet = new Set(activePlatforms);
-  list.innerHTML = PLATFORM_DEFS.map((p) => {
-    const hasInstalls = (installedByPlatform[p.id] ?? []).length > 0;
-    const checked = activeSet.has(p.id) ? "checked" : "";
-    const disabled = hasInstalls ? "disabled" : "";
+  list.innerHTML = platforms.map((p) => {
     const sublabel = p.sublabel
       ? `<span class="hs-ai-platform-sub">${escapeHtml(p.sublabel)}</span>`
       : "";
     return `<label class="hs-ai-item hs-ai-platform-row">
-      <input type="checkbox" class="hs-ai-cb hs-ai-platform-cb" data-platform="${escapeHtml(p.id)}" ${checked} ${disabled}>
+      <input type="checkbox" class="hs-ai-cb hs-ai-platform-cb" data-platform="${escapeHtml(p.id)}" ${p.locked ? "checked disabled" : ""}>
       <span class="hs-ai-item-name">${escapeHtml(p.label)}${sublabel}</span>
     </label>`;
   }).join("");
   list.querySelectorAll<HTMLInputElement>(".hs-ai-platform-cb").forEach((cb) => {
-    cb.addEventListener("change", onPlatformChange);
+    cb.addEventListener("change", updateApplyButton);
   });
 }
 
-function onPlatformChange(): void {
-  if (!_cachedData) { return; }
-  const checkedPlatforms = getCheckedPlatforms();
-  renderSkillRows(_cachedData.skills, _cachedData.installedByPlatform, checkedPlatforms);
-  updateApplyButton();
-}
-
 // ── Checklist rendering ───────────────────────────────────────────────────────
 
-function renderSkillRows(
-  skills: SkillInfo[],
-  installedByPlatform: Record<string, string[]>,
-  checkedPlatforms: string[]
-): void {
+function renderSkillRows(skills: SkillInfo[], installedOnPrimary: string[]): void {
   const list = el("hs-ai-skills-list");
   if (!list) { return; }
+  const installedSet = new Set(installedOnPrimary);
   list.innerHTML = skills.map((s) => {
-    const status = computeSkillStatus(s.dirName, installedByPlatform, checkedPlatforms);
-    const statusClass = status === "installed" ? "hs-ai-item-status--ok"
-                      : status === "partial"   ? "hs-ai-item-status--partial"
-                      : "hs-ai-item-status--none";
-    const statusText = status === "installed" ? "installed"
-                     : status === "partial"   ? "partial"
-                     : "—";
-    const checked = "checked";
-    const disabled = status === "installed" ? "disabled" : "";
+    const isInstalled = installedSet.has(s.dirName);
+    const statusClass = isInstalled ? "hs-ai-item-status--ok" : "hs-ai-item-status--none";
+    const statusText = isInstalled ? "installed" : "—";
     return `<label class="hs-ai-item">
-      <input type="checkbox" class="hs-ai-cb" data-skill="${escapeHtml(s.dirName)}" ${checked} ${disabled}>
+      <input type="checkbox" class="hs-ai-cb" data-skill="${escapeHtml(s.dirName)}" ${isInstalled ? "checked disabled" : ""}>
       <span class="hs-ai-item-name" title="${escapeHtml(s.description)}">${escapeHtml(s.name)}</span>
       <span class="hs-ai-item-status ${statusClass}">${statusText}</span>
     </label>`;
@@ -195,10 +160,9 @@ function renderMcpRows(
 function updateApplyButton(): void {
   const applyBtn = el<HTMLButtonElement>("hs-ai-apply");
   if (!applyBtn) { return; }
-  const anyItemChecked = [...document.querySelectorAll<HTMLInputElement>(".hs-ai-cb[data-skill], .hs-ai-cb[data-mcp]")]
+  const anyActionable = [...document.querySelectorAll<HTMLInputElement>(".hs-ai-cb")]
     .some((c) => c.checked && !c.disabled);
-  const anyPlatformChecked = getCheckedPlatforms().length > 0;
-  applyBtn.disabled = !(anyItemChecked && anyPlatformChecked);
+  applyBtn.disabled = !anyActionable;
 }
 
 // ── Accordion toggle ──────────────────────────────────────────────────────────
@@ -230,9 +194,12 @@ function handleApply(): void {
   const skillCheckboxes = document.querySelectorAll<HTMLInputElement>(".hs-ai-cb[data-skill]");
   const mcpCheckboxes = document.querySelectorAll<HTMLInputElement>(".hs-ai-cb[data-mcp]");
 
+  const platformCheckboxes = document.querySelectorAll<HTMLInputElement>(".hs-ai-cb[data-platform]");
+
   const selectedSkills = [...skillCheckboxes].filter((c) => c.checked).map((c) => c.dataset.skill!);
   const selectedMcpKeys = [...mcpCheckboxes].filter((c) => c.checked).map((c) => c.dataset.mcp!);
-  const selectedPlatforms = getCheckedPlatforms();
+  const additionalPlatforms = [...platformCheckboxes].filter((c) => c.checked).map((c) => c.dataset.platform!);
+  const platforms = [_cachedData.primaryPlatform, ...additionalPlatforms];
 
   document.querySelectorAll<HTMLInputElement>(".hs-ai-cb").forEach((c) => { c.disabled = true; });
   const applyBtn = el<HTMLButtonElement>("hs-ai-apply");
@@ -244,7 +211,7 @@ function handleApply(): void {
   getVSCode()?.postMessage({
     command: "installAiTools",
     skills: selectedSkills,
-    platforms: selectedPlatforms,
+    platforms,
     mcpServers: selectedMcpKeys,
   });
 }
@@ -261,15 +228,18 @@ function handleAiToolsData(msg: AiToolsDataMessage): void {
 
   _cachedData = {
     skills: msg.skills,
-    installedByPlatform: msg.installedByPlatform,
-    activePlatforms: msg.activePlatforms,
+    primaryPlatform: msg.primaryPlatform,
+    installedOnPrimary: msg.installedOnPrimary,
+    additionalPlatforms: msg.additionalPlatforms,
     mcpServers: msg.mcpServers,
     configuredMcpKeys: msg.configuredMcpKeys,
   };
 
-  const checkedPlatforms = msg.activePlatforms;
-  renderPlatformRows(checkedPlatforms, msg.installedByPlatform);
-  renderSkillRows(msg.skills, msg.installedByPlatform, checkedPlatforms);
+  const platformLabel = el("hs-ai-skills-platform");
+  if (platformLabel) { platformLabel.textContent = `(${PLATFORM_LABELS[msg.primaryPlatform] ?? msg.primaryPlatform})`; }
+
+  renderAdditionalPlatformRows(msg.additionalPlatforms);
+  renderSkillRows(msg.skills, msg.installedOnPrimary);
   renderMcpRows(msg.mcpServers, msg.configuredMcpKeys);
   showPanelState("ready");
   updateApplyButton();
diff --git a/src/webview/homescreenView.ts b/src/webview/homescreenView.ts
@@ -9,6 +9,7 @@ import { createWebviewDocument, getScriptUri } from "./webviewUtils";
 import { escapeHtml } from "./utils/helpers";
 import {
   PlatformId,
+  PLATFORMS,
   SkillInfo,
   MCP_SERVERS,
   detectEditor,
@@ -23,6 +24,7 @@ import {
   installForWindsurf,
   installMcpServers,
   detectActivePlatforms,
+  detectEditorPlatform,
 } from "../aiToolsService";
 
 export class HomescreenViewProvider implements vscode.WebviewViewProvider {
@@ -549,7 +551,12 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
         }
         .hs-ai-item-status--ok::before   { background: #4ade80; }
         .hs-ai-item-status--none::before { background: rgba(255,255,255,0.15); }
-        .hs-ai-item-status--partial::before { background: rgba(250,204,21,0.7); }
+        .hs-ai-platform-badge {
+          font-size: 9px;
+          font-weight: 400;
+          color: var(--vscode-descriptionForeground);
+          margin-left: 4px;
+        }
         .hs-ai-platform-sub {
           display: block;
           font-size: 9px;
@@ -711,10 +718,10 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
             <!-- Ready / applying state -->
             <div class="hs-ai-panel-inner hidden" id="hs-ai-state-ready">
               <div>
-                <div class="hs-ai-section-head">Skills</div>
+                <div class="hs-ai-section-head">Skills <span class="hs-ai-platform-badge" id="hs-ai-skills-platform"></span></div>
                 <div id="hs-ai-skills-list"></div>
                 <div class="hs-ai-hint">Installed skills are locked. Delete files to uninstall.</div>
-                <div class="hs-ai-section-head" style="margin-top:8px">Install for</div>
+                <div class="hs-ai-section-head" style="margin-top:8px">Also install for</div>
                 <div id="hs-ai-platform-list"></div>
               </div>
               <div>
@@ -770,16 +777,20 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
       }
       const skills = this._cachedSkills;
 
-      const platformIds: PlatformId[] = ["universal", "claude-code", "vscode-copilot", "windsurf"];
-      const installedByPlatform: Record<string, string[]> = {};
-      await Promise.all(
-        platformIds.map(async (pid) => {
-          const set = await readInstalledSkillDirNames(rootUri, pid, skills);
-          installedByPlatform[pid] = [...set];
-        })
-      );
-
-      const activePlatforms = await detectActivePlatforms(rootUri);
+      const primaryPlatform = detectEditorPlatform();
+      const [installedOnPrimarySet, activePlatforms] = await Promise.all([
+        readInstalledSkillDirNames(rootUri, primaryPlatform, skills),
+        detectActivePlatforms(rootUri),
+      ]);
+
+      const additionalPlatforms = PLATFORMS
+        .filter((p) => p.id !== primaryPlatform)
+        .map((p) => ({
+          id: p.id,
+          label: p.label,
+          sublabel: p.sublabel,
+          locked: activePlatforms.includes(p.id as PlatformId),
+        }));
 
       const editor = detectEditor();
       const mcpFilePath = getMcpFilePath(editor);
@@ -789,8 +800,9 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
       view.webview.postMessage({
         command: "aiToolsData",
         skills: skills.map((s) => ({ name: s.name, description: s.description, dirName: s.dirName })),
-        installedByPlatform,
-        activePlatforms,
+        primaryPlatform,
+        installedOnPrimary: [...installedOnPrimarySet],
+        additionalPlatforms,
         mcpServers: MCP_SERVERS.map((s) => ({ key: s.key, label: s.label, description: s.description })),
         configuredMcpKeys: [...configuredMcpSet],
       });
