Show webview about missing installation dependencies

package.json

@@ -47,7 +47,6 @@
   },
   "pnpm": {
     "patchedDependencies": {
-      "@docusaurus/theme-search-algolia": "patches/@[email protected]",
       "@types/[email protected]": "patches/@[email protected]",
       "[email protected]": "patches/[email protected]"
     },

packages/common/src/cursorlessCommandIds.ts

@@ -47,6 +47,7 @@ export const cursorlessCommandIds = [
   "cursorless.recordScopeTests.saveActiveDocument",
   "cursorless.showCheatsheet",
   "cursorless.showDocumentation",
+  "cursorless.showInstallationDependencies",
   "cursorless.showQuickPick",
   "cursorless.takeSnapshot",
   "cursorless.toggleDecorations",
@@ -89,6 +90,9 @@ export const cursorlessCommandDescriptions: Record<
     "Bulk save scope tests for the active document",
   ),
   ["cursorless.showDocumentation"]: new VisibleCommand("Show documentation"),
+  ["cursorless.showInstallationDependencies"]: new VisibleCommand(
+    "Show installation dependencies",
+  ),
   ["cursorless.showScopeVisualizer"]: new VisibleCommand(
     "Show the scope visualizer",
   ),

packages/cursorless-neovim/src/registerCommands.ts

@@ -87,6 +87,7 @@ export async function registerCommands(
     // Other commands
     ["cursorless.showQuickPick"]: dummyCommandHandler,
     ["cursorless.showDocumentation"]: dummyCommandHandler,
+    ["cursorless.showInstallationDependencies"]: dummyCommandHandler,
     ["cursorless.private.logQuickActions"]: dummyCommandHandler,
 
     // Hats

packages/cursorless-vscode/package.json

@@ -104,6 +104,10 @@
         "command": "cursorless.showDocumentation",
         "title": "Cursorless: Show documentation"
       },
+      {
+        "command": "cursorless.showInstallationDependencies",
+        "title": "Cursorless: Show installation dependencies"
+      },
       {
         "command": "cursorless.showScopeVisualizer",
         "title": "Cursorless: Show the scope visualizer"
@@ -1275,6 +1279,7 @@
     "@cursorless/node-common": "workspace:*",
     "@cursorless/test-case-recorder": "workspace:*",
     "@cursorless/vscode-common": "workspace:*",
+    "glob": "^11.0.0",
     "itertools": "^2.3.2",
     "lodash-es": "^4.17.21",
     "nearley": "2.20.1",

packages/cursorless-vscode/resources/installationDependencies.js

@@ -0,0 +1,99 @@
+const vscode = acquireVsCodeApi();
+
+const root = document.getElementById("root");
+
+const header = document.createElement("h2");
+header.textContent = "Cursorless extension is now running!";
+
+const description = document.createElement("p");
+const aDocs = link(
+  "https://www.cursorless.org/docs/user/installation",
+  "Click here to learn how to install Cursorless",
+);
+description.innerHTML = `<p>Lets check if all dependencies are installed.</p>${aDocs}`;
+
+const messages = document.createElement("div");
+
+root.append(header, description, messages);
+
+const keyboardUserMessage =
+  "<p><i>If you're using Cursorless by keyboard you can ignore this message.</i></p>";
+
+window.addEventListener("message", (event) => {
+  const { dontShow, dependencies } = event.data;
+  const children = [];
+
+  if (!dependencies.talon) {
+    const a = link("https://talonvoice.com", "talonvoice.com");
+    children.push(
+      getChild(
+        "Talon not installed",
+        `Cursorless requires Talon to function by voice.</br>You can download Talon from ${a}.${keyboardUserMessage}`,
+      ),
+    );
+  } else if (!dependencies.cursorlessTalon) {
+    const a = link(
+      "https://github.com/cursorless-dev/cursorless-talon",
+      "github.com/cursorless-dev/cursorless-talon",
+    );
+    children.push(
+      getChild(
+        "Cursorless Talon scripts missing",
+        `Cursorless requires Talon user scripts to function by voice.</br>The scripts are available at ${a}.`,
+      ),
+    );
+  }
+
+  if (!dependencies.commandServer) {
+    const a = link(
+      "https://marketplace.visualstudio.com/items?itemName=pokey.command-server",
+      "vscode marketplace",
+    );
+    children.push(
+      getChild(
+        "Command server extension not installed",
+        `Cursorless requires the command server extension to function by voice.</br>The extension is available at the ${a}.${keyboardUserMessage}`,
+      ),
+    );
+  }
+
+  if (children.length === 0) {
+    children.push(getChild("All dependencies are installed!"));
+  }
+
+  const dontShowCheckbox = getDontShowCheckbox(dontShow);
+
+  messages.replaceChildren(...children, dontShowCheckbox);
+});
+
+function link(href, text) {
+  return `<a href="${href}">${text}</a>`;
+}
+
+function getChild(title, body) {
+  const child = document.createElement("div");
+  const titleElement = document.createElement("h4");
+  titleElement.textContent = title;
+  child.append(titleElement);
+  if (body != null) {
+    const bodyElement = document.createElement("p");
+    bodyElement.innerHTML = body;
+    child.append(bodyElement);
+  }
+  return child;
+}
+
+function getDontShowCheckbox(dontShow) {
+  const checkbox = document.createElement("input");
+  checkbox.type = "checkbox";
+  checkbox.checked = dontShow;
+  checkbox.onchange = () => {
+    const command = { type: "dontShow", checked: checkbox.checked };
+    vscode.postMessage(command);
+  };
+  const label = document.createElement("label");
+  label.style.marginTop = "1rem";
+  const text = document.createTextNode("Don't show again");
+  label.append(checkbox, text);
+  return label;
+}

packages/cursorless-vscode/src/InstallationDependencies.ts

@@ -0,0 +1,141 @@
+import { COMMAND_SERVER_EXTENSION_ID } from "@cursorless/vscode-common";
+import { globSync } from "glob";
+import * as fs from "node:fs";
+import * as os from "node:os";
+import * as path from "node:path";
+import * as vscode from "vscode";
+
+const STATE_KEY = "dontShowInstallationDependencies";
+
+export class InstallationDependencies {
+  private panel: vscode.WebviewPanel | undefined;
+
+  constructor(private extensionContext: vscode.ExtensionContext) {
+    this.show = this.show.bind(this);
+    this.maybeShow = this.maybeShow.bind(this);
+  }
+
+  /**
+   * Shows the installation dependencies webview.
+   */
+  show() {
+    this.createWebview();
+  }
+
+  /**
+   * Shows the installation dependencies webview if there are missing dependencies.
+   */
+  maybeShow() {
+    const state = this.getState();
+    if (!state.dontShow && hasMissingDependencies(state.dependencies)) {
+      this.createWebview();
+    }
+  }
+
+  private getState() {
+    return {
+      dontShow: !!this.extensionContext.globalState.get<boolean>(STATE_KEY),
+      dependencies: getDependencies(),
+    };
+  }
+
+  private createWebview() {
+    if (this.panel != null) {
+      this.panel.reveal();
+      return;
+    }
+
+    this.panel = vscode.window.createWebviewPanel(
+      "cursorless.installationDependencies",
+      "Cursorless dependencies",
+      {
+        viewColumn: vscode.ViewColumn.Active,
+      },
+      {
+        enableScripts: true,
+      },
+    );
+
+    const jsUri = this.panel.webview.asWebviewUri(
+      vscode.Uri.joinPath(
+        this.extensionContext.extensionUri,
+        "resources",
+        "installationDependencies.js",
+      ),
+    );
+
+    this.panel.webview.html = getWebviewContent(this.panel.webview, jsUri);
+
+    const updateWebview = () => {
+      this.panel?.webview.postMessage(this.getState());
+    };
+
+    this.panel.onDidChangeViewState(updateWebview);
+
+    this.panel.webview.onDidReceiveMessage((message) => {
+      if (message.type === "dontShow") {
+        const checked = message.checked;
+        this.extensionContext.globalState.update(STATE_KEY, checked);
+      } else {
+        console.error(`Unknown message: ${message}`);
+      }
+    });
+
+    const interval = setInterval(updateWebview, 5000);
+
+    this.panel.onDidDispose(() => {
+      clearInterval(interval);
+      this.panel = undefined;
+    });
+
+    this.panel.webview.postMessage(this.getState());
+  }
+}
+
+function getDependencies(): Record<string, boolean> {
+  return {
+    talon: talonHomeExists(),
+    cursorlessTalon: cursorlessTalonExists(),
+    commandServer: commandServerInstalled(),
+  };
+}
+
+function hasMissingDependencies(dependencies: Record<string, boolean>) {
+  return Object.values(dependencies).some((value) => !value);
+}
+
+function talonHomeExists() {
+  return fs.existsSync(getTalonHomePath());
+}
+
+function cursorlessTalonExists() {
+  const talonUserPath = path.join(getTalonHomePath(), "user");
+  const files = globSync("*/src/cursorless.talon", { cwd: talonUserPath });
+  return files.length > 0;
+}
+
+function commandServerInstalled() {
+  const extension = vscode.extensions.getExtension(COMMAND_SERVER_EXTENSION_ID);
+  return extension != null;
+}
+
+function getTalonHomePath() {
+  return os.platform() === "win32"
+    ? `${os.homedir()}\\AppData\\Roaming\\talon`
+    : `${os.homedir()}/.talon`;
+}
+
+function getWebviewContent(webview: vscode.Webview, jsUri: vscode.Uri) {
+  return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Security-Policy" content="script-src ${webview.cspSource};" />
+</head>
+
+<body>
+    <div id="root"></div>
+    <script src="${jsUri}"></script>
+</body>
+</html>`;
+}

packages/cursorless-vscode/src/extension.ts

@@ -38,6 +38,7 @@ import * as crypto from "crypto";
 import * as os from "node:os";
 import * as path from "node:path";
 import * as vscode from "vscode";
+import { InstallationDependencies } from "./InstallationDependencies";
 import { ReleaseNotes } from "./ReleaseNotes";
 import { ScopeTreeProvider } from "./ScopeTreeProvider";
 import type {
@@ -165,6 +166,8 @@ export async function activate(
     commandServerApi != null,
   );
 
+  const installationDependencies = new InstallationDependencies(context);
+
   context.subscriptions.push(storedTargetHighlighter(vscodeIDE, storedTargets));
 
   const vscodeTutorial = createTutorial(
@@ -189,11 +192,14 @@ export async function activate(
     keyboardCommands,
     hats,
     vscodeTutorial,
+    installationDependencies,
     storedTargets,
   );
 
   void new ReleaseNotes(vscodeApi, context, normalizedIde.messages).maybeShow();
 
+  installationDependencies.maybeShow();
+
   return {
     testHelpers:
       normalizedIde.runMode === "test"

packages/cursorless-vscode/src/registerCommands.ts

@@ -17,6 +17,7 @@ import type {
   TestCaseRecorder,
 } from "@cursorless/test-case-recorder";
 import * as vscode from "vscode";
+import type { InstallationDependencies } from "./InstallationDependencies";
 import type { ScopeVisualizer } from "./ScopeVisualizerCommandApi";
 import type { VscodeTutorial } from "./VscodeTutorial";
 import { showDocumentation, showQuickPick } from "./commands";
@@ -36,6 +37,7 @@ export function registerCommands(
   keyboardCommands: KeyboardCommands,
   hats: VscodeHats,
   tutorial: VscodeTutorial,
+  installationDependencies: InstallationDependencies,
   storedTargets: StoredTargetMap,
 ): void {
   const runCommandWrapper = async (run: () => Promise<unknown>) => {
@@ -82,6 +84,7 @@ export function registerCommands(
     // Other commands
     ["cursorless.showQuickPick"]: showQuickPick,
     ["cursorless.showDocumentation"]: showDocumentation,
+    ["cursorless.showInstallationDependencies"]: installationDependencies.show,
 
     ["cursorless.private.logQuickActions"]: logQuickActions,
 

packages/cursorless-vscode/src/scripts/populateDist/assets.ts

@@ -42,6 +42,10 @@ export const assets: Asset[] = [
     source: "resources/font_measurements.js",
     destination: "resources/font_measurements.js",
   },
+  {
+    source: "resources/installationDependencies.js",
+    destination: "resources/installationDependencies.js",
+  },
   { source: "../../schemas", destination: "schemas" },
   {
     source: "../../third-party-licenses.csv",

packages/vscode-common/src/getExtensionApi.ts

@@ -38,6 +38,8 @@ export async function getExtensionApiStrict<T>(extensionId: string) {
 }
 
 export const EXTENSION_ID = "pokey.cursorless";
+export const COMMAND_SERVER_EXTENSION_ID = "pokey.command-server";
+
 export const getCursorlessApi = () =>
   getExtensionApiStrict<CursorlessApi>(EXTENSION_ID);
 
@@ -49,4 +51,4 @@ export const getParseTreeApi = () =>
  * @returns Command server API or null if not installed
  */
 export const getCommandServerApi = () =>
-  getExtensionApi<CommandServerApi>("pokey.command-server");
+  getExtensionApi<CommandServerApi>(COMMAND_SERVER_EXTENSION_ID);