Merge pull request #1277 from github/v1.6.3

v1.6.3

.github/dependabot.yml

@@ -0,0 +1,22 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "extensions/ql-vscode"
+    schedule:
+      interval: "weekly"
+      day: "thursday" # Thursday is arbitrary
+    labels:
+      - "Update dependencies"
+    ignore:
+      - dependency-name: "*"
+        update-types: ["version-update:semver-minor", "version-update:semver-patch"]
+  - package-ecosystem: "github-actions"
+    directory: ".github"
+    schedule:
+      interval: "weekly"
+      day: "thursday" # Thursday is arbitrary
+    labels:
+      - "Update dependencies"
+    ignore:
+      - dependency-name: "*"
+        update-types: ["version-update:semver-minor", "version-update:semver-patch"]

.github/pull_request_template.md

@@ -9,4 +9,4 @@ Replace this with a description of the changes your pull request makes.
 
 - [ ] [CHANGELOG.md](https://github.com/github/vscode-codeql/blob/main/extensions/ql-vscode/CHANGELOG.md) has been updated to incorporate all user visible changes made by this pull request.
 - [ ] Issues have been created for any UI or other user-facing changes made by this pull request.
-- [ ] `@github/docs-content-codeql` has been cc'd in all issues for UI or other user-facing changes made by this pull request.
+- [ ] _[Maintainers only]_ If this pull request makes user-facing changes that require documentation changes, open a corresponding docs pull request in the [github/codeql](https://github.com/github/codeql/tree/main/docs/codeql/codeql-for-visual-studio-code) repo and add the `ready-for-doc-review` label there.

.github/workflows/codeql.yml

@@ -26,6 +26,7 @@ jobs:
         with:
             languages: javascript
             config-file: ./.github/codeql/codeql-config.yml
+            tools: latest
 
       - name: Perform CodeQL Analysis
         uses: github/codeql-action/analyze@main

.github/workflows/dependency-review.yml

@@ -0,0 +1,17 @@
+name: 'Dependency Review'
+on: 
+  - pull_request
+  - workflow_dispatch
+
+permissions:
+  actions: read
+  pull-requests: read
+
+jobs:
+  dependency-review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'Checkout Repository'
+        uses: actions/checkout@v3
+      - name: 'Dependency Review'
+        uses: dsp-testing/dependency-review-action@main

.github/workflows/main.yml

@@ -22,7 +22,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: '14.14.0'
+          node-version: '16.13.0'
 
       - name: Install dependencies
         working-directory: extensions/ql-vscode
@@ -82,7 +82,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: '14.14.0'
+          node-version: '16.13.0'
 
       - name: Install dependencies
         working-directory: extensions/ql-vscode
@@ -135,7 +135,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest]
-        version: ['v2.3.3', 'v2.4.6', 'v2.5.9', 'v2.6.3', 'v2.7.2', 'nightly']
+        version: ['v2.3.3', 'v2.4.6', 'v2.5.9', 'v2.6.3', 'v2.7.6', 'v2.8.4', 'nightly']
     env:
       CLI_VERSION: ${{ matrix.version }}
       NIGHTLY_URL: ${{ needs.find-nightly.outputs.url }}
@@ -147,7 +147,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: '14.14.0'
+          node-version: '16.13.0'
 
       - name: Install dependencies
         working-directory: extensions/ql-vscode

.github/workflows/release.yml

@@ -22,7 +22,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: '10.18.1'
+          node-version: '16.13.0'
 
       - name: Install dependencies
         run: |
@@ -147,11 +147,13 @@ jobs:
                   If this was an authentication problem, please make sure the \
                   auth token hasn't expired."
 
+  # TODO This job is currently broken and is blocked on https://github.com/github/vscode-codeql/issues/1085
   open-vsx-publish:
     name: Publish to Open VSX Registry
     needs: build
     environment: publish-open-vsx
     runs-on: ubuntu-latest
+    if: 1 == 0
     env:
       OPEN_VSX_TOKEN: ${{ secrets.OPEN_VSX_TOKEN }}
     steps:

.vscode/launch.json

@@ -59,7 +59,9 @@
       "runtimeExecutable": "${execPath}",
       "args": [
         "--extensionDevelopmentPath=${workspaceRoot}/extensions/ql-vscode",
-        "--extensionTestsPath=${workspaceRoot}/extensions/ql-vscode/out/vscode-tests/no-workspace/index"
+        "--extensionTestsPath=${workspaceRoot}/extensions/ql-vscode/out/vscode-tests/no-workspace/index",
+        "--disable-extensions",
+        "--disable-gpu"
       ],
       "stopOnEntry": false,
       "sourceMaps": true,
@@ -75,6 +77,8 @@
       "args": [
         "--extensionDevelopmentPath=${workspaceRoot}/extensions/ql-vscode",
         "--extensionTestsPath=${workspaceRoot}/extensions/ql-vscode/out/vscode-tests/minimal-workspace/index",
+        "--disable-extensions",
+        "--disable-gpu",
         "${workspaceRoot}/extensions/ql-vscode/test/data"
       ],
       "stopOnEntry": false,
@@ -91,8 +95,16 @@
       "args": [
         "--extensionDevelopmentPath=${workspaceRoot}/extensions/ql-vscode",
         "--extensionTestsPath=${workspaceRoot}/extensions/ql-vscode/out/vscode-tests/cli-integration/index",
+        "--disable-gpu",
+        "--disable-extension",
+        "eamodio.gitlens",
+        "--disable-extension",
+        "github.codespaces",
+        "--disable-extension",
+        "github.copilot",
         "${workspaceRoot}/extensions/ql-vscode/src/vscode-tests/cli-integration/data",
-        // Add a path to a checked out instance of the codeql repository so the libraries are
+        // Uncomment the last line and modify the path to a checked out 
+        // instance of the codeql repository so the libraries are
         // available in the workspace for the tests.
         // "${workspaceRoot}/../codeql"
       ],

CODEOWNERS

@@ -1 +1,2 @@
 **/* @github/codeql-vscode-reviewers
+/extensions/ql-vscode/src/remote-queries/ @github/code-scanning-secexp-reviewers

CONTRIBUTING.md

@@ -81,7 +81,7 @@ You can use VS Code to debug the extension without explicitly installing it. Jus
 
 Unit tests and many integration tests do not require a copy of the CodeQL CLI.
 
-Outside of vscode, run:
+Outside of vscode, in the `extensions/ql-vscode` directory, run:
 
 ```shell
 npm run test && npm run integration
@@ -124,6 +124,7 @@ From inside of VSCode, open the `launch.json` file and in the _Launch Integratio
 1. Download the VSIX from the draft GitHub release at the top of [the releases page](https://github.com/github/vscode-codeql/releases) that is created when the release build finishes.
 1. Unzip the `.vsix` and inspect its `package.json` to make sure the version is what you expect,
    or look at the source if there's any doubt the right code is being shipped.
+1. Install the `.vsix` file into your vscode IDE and ensure the extension can load properly. Run a single command (like run query, or add database).
 1. Go to the actions tab of the vscode-codeql repository and select the [Release workflow](https://github.com/github/vscode-codeql/actions?query=workflow%3ARelease).
     - If there is an authentication failure when publishing, be sure to check that the authentication keys haven't expired. See below.
 1. Approve the deployments of the correct Release workflow. This will automatically publish to Open VSX and VS Code Marketplace.
@@ -143,12 +144,7 @@ To regenerate the Open VSX token:
 1. Go to the [Access Tokens](https://open-vsx.org/user-settings/tokens) page and generate a new token.
 1. Update the secret in the `publish-open-vsx` environment in the project settings.
 
-To regenerate the VSCode Marketplace token:
-
-1. Follow the instructions on [getting a PAT for Azure DevOps](https://code.visualstudio.com/api/working-with-extensions/publishing-extension#get-a-personal-access-token).
-1. Update the secret in the `publish-vscode-marketplace` environment in the project settings.
-
-Not that Azure DevOps PATs expire yearly and must be regenerated.
+To regenerate the VSCode Marketplace token, please see our internal documentation. Note that Azure DevOps PATs expire every 90 days and must be regenerated.
 
 ## Resources
 

extensions/ql-vscode/CHANGELOG.md

@@ -1,5 +1,50 @@
 # CodeQL for Visual Studio Code: Changelog
 
+## [UNRELEASED]
+
+## 1.6.3 - 4 April 2022
+
+No user facing changes.
+
+## 1.6.2 - 4 April 2022
+
+- Fix a bug where the AST viewer was not synchronizing its selected node when the editor selection changes. [#1230](https://github.com/github/vscode-codeql/pull/1230)
+- Avoid synchronizing the `codeQL.cli.executablePath` setting. [#1252](https://github.com/github/vscode-codeql/pull/1252)
+- Open the directory in the finder/explorer (instead of just highlighting it) when running the "Open query directory" command from the query history view. [#1235](https://github.com/github/vscode-codeql/pull/1235)
+- Ensure query label in the query history view changes are persisted across restarts. [#1235](https://github.com/github/vscode-codeql/pull/1235)
+- Prints end-of-query evaluator log summaries to the Query Server Console. [#1264](https://github.com/github/vscode-codeql/pull/1264)
+
+## 1.6.1 - 17 March 2022
+
+No user facing changes.
+
+## 1.6.0 - 7 March 2022
+
+- Fix a bug where database upgrades could not be resolved if some of the target pack's dependencies are outside of the workspace. [#1138](https://github.com/github/vscode-codeql/pull/1138)
+- Open the query server logs for query errors (instead of the extension log). This will make it easier to track down query errors. [#1158](https://github.com/github/vscode-codeql/pull/1158)
+- Fix a bug where queries took a long time to run if there are no folders in the workspace. [#1157](https://github.com/github/vscode-codeql/pull/1157)
+- [BREAKING CHANGE] The `codeQL.runningQueries.customLogDirectory` setting is deprecated and no longer has any function. Instead, all query log files will be stored in the query history directory, next to the query results. [#1178](https://github.com/github/vscode-codeql/pull/1178)
+- Add a _Open query directory_ command for query items. This command opens the directory containing all artifacts for a query. [#1179](https://github.com/github/vscode-codeql/pull/1179)
+- Add options to display evaluator logs for a given query run. Some information that was previously found in the query server output may now be found here. [#1186](https://github.com/github/vscode-codeql/pull/1186)
+
+## 1.5.11 - 10 February 2022
+
+- Fix a bug where invoking _View AST_ from the file explorer would not view the selected file. Instead it would view the active editor. Also, prevent the _View AST_ from appearing if the current selection includes a directory or multiple files. [#1113](https://github.com/github/vscode-codeql/pull/1113)
+- Add query history items as soon as a query is run, including new icons for each history item. [#1094](https://github.com/github/vscode-codeql/pull/1094)
+- Save query history items across restarts. Items will be saved for 30 days and can be overwritten by setting the `codeQL.queryHistory.ttl` configuration setting. [#1130](https://github.com/github/vscode-codeql/pull/1130)
+- Allow in-progress query items to be cancelled from the query history view. [#1105](https://github.com/github/vscode-codeql/pull/1105)
+
+## 1.5.10 - 25 January 2022
+
+- Fix a bug where the results view moved column even when it was already visible. [#1070](https://github.com/github/vscode-codeql/pull/1070)
+- Add packaging-related commands. _CodeQL: Download Packs_ downloads query packs from the package registry that can be run locally, and _CodeQL: Install Pack Dependencies_ installs dependencies for packs in your workspace. [#1076](https://github.com/github/vscode-codeql/pull/1076)
+
+## 1.5.9 - 17 December 2021
+
+- Avoid creating a third column when opening the results view. The results view will always open to the right of the active editor, unless the active editor is in the rightmost editor column. In that case open in the leftmost column. [#1037](https://github.com/github/vscode-codeql/pull/1037)
+- Add a CodeLens to make the Quick Evaluation command more accessible. Click the `Quick Evaluation` prompt above a predicate definition in the editor to evaluate that predicate on its own. You can enable/disable this feature in the `codeQL.runningQueries.quickEvalCodelens` setting. [#1035](https://github.com/github/vscode-codeql/pull/1035) & [#1052](https://github.com/github/vscode-codeql/pull/1052)
+- Fix a bug where the _Alerts_ option would show in the results view even if there is no alerts table available. [#1038](https://github.com/github/vscode-codeql/pull/1038)
+
 ## 1.5.8 - 2 December 2021
 
 - Emit a more explicit error message when a user tries to add a database with an unzipped source folder to the workspace. [#1021](https://github.com/github/vscode-codeql/pull/1021)
@@ -13,7 +58,7 @@
 - Fix a bug with importing large databases. Databases over 4GB can now be imported directly from LGTM or from a zip file. This functionality is only available when using CodeQL CLI version 2.6.0 or later. [#971](https://github.com/github/vscode-codeql/pull/971)
 - Replace certain control codes (`U+0000` - `U+001F`) with their corresponding control labels (`U+2400` - `U+241F`) in the results view. [#963](https://github.com/github/vscode-codeql/pull/963)
 - Allow case-insensitive project slugs for GitHub repositories when adding a CodeQL database from LGTM. [#978](https://github.com/github/vscode-codeql/pull/961)
-- Add a _CodeQL: Preview Query Help_ command to generate Markdown previews of `.qhelp` query help files. This command should only be run in trusted workspaces. See https://codeql.github.com/docs/codeql-cli/testing-query-help-files for more information about query help. [#988](https://github.com/github/vscode-codeql/pull/988)
+- Add a _CodeQL: Preview Query Help_ command to generate Markdown previews of `.qhelp` query help files. This command should only be run in trusted workspaces. See [the CodeQL CLI docs](https://codeql.github.com/docs/codeql-cli/testing-query-help-files) for more information about query help. [#988](https://github.com/github/vscode-codeql/pull/988)
 - Make "Open Referenced File" command accessible from the active editor menu. [#989](https://github.com/github/vscode-codeql/pull/989)
 - Fix a bug where result set names in the result set drop-down were disappearing when viewing a sorted table. [#1007](https://github.com/github/vscode-codeql/pull/1007)
 - Allow query result locations with 0 as the end column value. These are treated as the first column in the line. [#1002](https://github.com/github/vscode-codeql/pull/1002)

extensions/ql-vscode/gulpfile.ts/appInsights.ts

@@ -1,5 +1,6 @@
 import * as gulp from 'gulp';
-import * as replace from 'gulp-replace';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const replace = require('gulp-replace');
 
 /** Inject the application insights key into the telemetry file */
 export function injectAppInsightsKey() {

extensions/ql-vscode/gulpfile.ts/index.ts

@@ -1,15 +1,28 @@
 import * as gulp from 'gulp';
-import { compileTypeScript, watchTypeScript, copyViewCss } from './typescript';
+import { compileTypeScript, watchTypeScript, copyViewCss, cleanOutput, watchCss } from './typescript';
 import { compileTextMateGrammar } from './textmate';
 import { copyTestData } from './tests';
-import { compileView } from './webpack';
+import { compileView, watchView } from './webpack';
 import { packageExtension } from './package';
 import { injectAppInsightsKey } from './appInsights';
 
 export const buildWithoutPackage =
-  gulp.parallel(
-    compileTypeScript, compileTextMateGrammar, compileView, copyTestData, copyViewCss
+  gulp.series(
+    cleanOutput,
+    gulp.parallel(
+      compileTypeScript, compileTextMateGrammar, compileView, copyTestData, copyViewCss
+    )
   );
 
-export { compileTextMateGrammar, watchTypeScript, compileTypeScript, copyTestData, injectAppInsightsKey };
+export {
+  cleanOutput,
+  compileTextMateGrammar,
+  watchTypeScript,
+  watchView,
+  compileTypeScript,
+  copyTestData,
+  injectAppInsightsKey,
+  compileView,
+  watchCss
+};
 export default gulp.series(buildWithoutPackage, injectAppInsightsKey, packageExtension);

extensions/ql-vscode/gulpfile.ts/tsconfig.json

@@ -5,7 +5,7 @@
     "strict": true,
     "module": "commonjs",
     "target": "es2017",
-    "lib": ["es6"],
+    "lib": ["ES2021"],
     "moduleResolution": "node",
     "sourceMap": true,
     "rootDir": ".",
@@ -16,7 +16,8 @@
     "noImplicitReturns": true,
     "experimentalDecorators": true,
     "noUnusedLocals": true,
-    "noUnusedParameters": true
+    "noUnusedParameters": true,
+    "esModuleInterop": true
   },
   "include": ["*.ts"]
 }

extensions/ql-vscode/gulpfile.ts/typescript.ts

@@ -2,6 +2,7 @@ import * as colors from 'ansi-colors';
 import * as gulp from 'gulp';
 import * as sourcemaps from 'gulp-sourcemaps';
 import * as ts from 'gulp-typescript';
+import * as del from 'del';
 
 function goodReporter(): ts.reporter.Reporter {
   return {
@@ -20,6 +21,10 @@ function goodReporter(): ts.reporter.Reporter {
 
 const tsProject = ts.createProject('tsconfig.json');
 
+export function cleanOutput() {
+  return tsProject.projectDirectory ? del(tsProject.projectDirectory + '/out/*') : Promise.resolve();
+}
+
 export function compileTypeScript() {
   return tsProject.src()
     .pipe(sourcemaps.init())
@@ -35,8 +40,12 @@ export function watchTypeScript() {
   gulp.watch('src/**/*.ts', compileTypeScript);
 }
 
+export function watchCss() {
+  gulp.watch('src/**/*.css', copyViewCss);
+}
+
 /** Copy CSS files for the results view into the output directory. */
 export function copyViewCss() {
-  return gulp.src('src/view/*.css')
+  return gulp.src('src/**/view/*.css')
     .pipe(gulp.dest('out'));
 }

extensions/ql-vscode/gulpfile.ts/webpack.config.ts

@@ -6,6 +6,7 @@ export const config: webpack.Configuration = {
   entry: {
     resultsView: './src/view/results.tsx',
     compareView: './src/compare/view/Compare.tsx',
+    remoteQueriesView: './src/remote-queries/view/RemoteQueries.tsx',
   },
   output: {
     path: path.resolve(__dirname, '..', 'out'),

extensions/ql-vscode/gulpfile.ts/webpack.ts

@@ -2,7 +2,23 @@ import * as webpack from 'webpack';
 import { config } from './webpack.config';
 
 export function compileView(cb: (err?: Error) => void) {
-  webpack(config).run((error, stats) => {
+  doWebpack(config, true, cb);
+}
+
+export function watchView(cb: (err?: Error) => void) {
+  const watchConfig = {
+    ...config,
+    watch: true,
+    watchOptions: {
+      aggregateTimeout: 200,
+      poll: 1000,
+    }
+  };
+  doWebpack(watchConfig, false, cb);
+}
+
+function doWebpack(internalConfig: webpack.Configuration, failOnError: boolean, cb: (err?: Error) => void) {
+  const resultCb = (error: Error | undefined, stats?: webpack.Stats) => {
     if (error) {
       cb(error);
     }
@@ -20,11 +36,16 @@ export function compileView(cb: (err?: Error) => void) {
         errors: true
       }));
       if (stats.hasErrors()) {
-        cb(new Error('Compilation errors detected.'));
-        return;
+        if (failOnError) {
+          cb(new Error('Compilation errors detected.'));
+          return;
+        } else {
+          console.error('Compilation errors detected.');
+        }
       }
+      cb();
     }
+  };
 
-    cb();
-  });
+  webpack(internalConfig, resultCb);
 }

extensions/ql-vscode/media/dark/github.svg

@@ -0,0 +1,4 @@
+<!-- From https://github.com/microsoft/vscode-icons -->
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97553 0C3.57186 0 0 3.57186 0 7.97553C0 11.4985 2.29969 14.4832 5.43119 15.5596C5.82263 15.6086 5.96942 15.3639 5.96942 15.1682C5.96942 14.9725 5.96942 14.4832 5.96942 13.7982C3.76758 14.2875 3.27829 12.7217 3.27829 12.7217C2.93578 11.792 2.39755 11.5474 2.39755 11.5474C1.66361 11.0581 2.44648 11.0581 2.44648 11.0581C3.22936 11.107 3.66972 11.8899 3.66972 11.8899C4.40367 13.1131 5.52905 12.7706 5.96942 12.5749C6.01835 12.0367 6.263 11.6942 6.45872 11.4985C4.69725 11.3028 2.83792 10.6177 2.83792 7.53517C2.83792 6.65443 3.1315 5.96942 3.66972 5.38226C3.62079 5.23547 3.32722 4.40367 3.76758 3.32722C3.76758 3.32722 4.4526 3.1315 5.96942 4.15902C6.6055 3.9633 7.29052 3.91437 7.97553 3.91437C8.66055 3.91437 9.34557 4.01223 9.98165 4.15902C11.4985 3.1315 12.1835 3.32722 12.1835 3.32722C12.6239 4.40367 12.3303 5.23547 12.2813 5.43119C12.7706 5.96942 13.1131 6.70336 13.1131 7.5841C13.1131 10.6667 11.2538 11.3028 9.49235 11.4985C9.78593 11.7431 10.0306 12.2324 10.0306 12.9664C10.0306 14.0428 10.0306 14.8746 10.0306 15.1682C10.0306 15.3639 10.1774 15.6086 10.5688 15.5596C13.7492 14.4832 16 11.4985 16 7.97553C15.9511 3.57186 12.3792 0 7.97553 0Z" fill="#C5C5C5"/>
+</svg>

extensions/ql-vscode/media/drive.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 12.1952C15.5 12.9126 14.9137 13.4996 14.1957 13.4996H1.80435C1.08696 13.4996 0.5 12.9126 0.5 12.1952L0.5 9.80435C0.5 9.08696 1.08696 8.5 1.80435 8.5H14.1956C14.9137 8.5 15.5 9.08696 15.5 9.80435L15.5 12.1952Z" stroke="#959DA5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.45654 11.5H13.5435" stroke="#959DA5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 9.5C13.224 9.5 13 9.725 13 10C13 10.275 13.224 10.5 13.5 10.5C13.776 10.5 14 10.275 14 10C14 9.725 13.776 9.5 13.5 9.5" fill="#959DA5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 9.5C11.224 9.5 11 9.725 11 10C11 10.275 11.224 10.5 11.5 10.5C11.776 10.5 12 10.275 12 10C12 9.725 11.776 9.5 11.5 9.5" fill="#959DA5"/>
+<path d="M15.5 9.81464L13.8728 2.76261C13.6922 2.06804 12.9572 1.5 12.2391 1.5H3.76087C3.04348 1.5 2.30848 2.06804 2.12783 2.76261L0.5 9.8" stroke="#959DA5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

extensions/ql-vscode/media/globe.svg

@@ -0,0 +1,16 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7.5" cy="7.5" r="7" stroke="#959DA5"/>
+<mask id="mask0_394_2982" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="15" height="15">
+<circle cx="7.5" cy="7.5" r="7.5" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0_394_2982)">
+<path d="M14.5 7.5C14.5 9.42971 13.6822 11.1907 12.5493 12.4721C11.4035 13.7683 10.0054 14.5 8.90625 14.5C7.84644 14.5 6.81131 13.8113 6.01569 12.5383C5.22447 11.2724 4.71875 9.49235 4.71875 7.5C4.71875 5.50765 5.22447 3.72765 6.01569 2.4617C6.81131 1.1887 7.84644 0.5 8.90625 0.5C10.0054 0.5 11.4035 1.23172 12.5493 2.52786C13.6822 3.80934 14.5 5.57029 14.5 7.5Z" stroke="#959DA5"/>
+</g>
+<mask id="mask1_394_2982" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="16" height="15">
+<circle cx="9.375" cy="7.5" r="7.5" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask1_394_2982)">
+<path d="M10.2812 7.5C10.2812 9.49235 9.77553 11.2724 8.98431 12.5383C8.18869 13.8113 7.15356 14.5 6.09375 14.5C4.99456 14.5 3.5965 13.7683 2.45067 12.4721C1.31781 11.1907 0.5 9.42971 0.5 7.5C0.5 5.57029 1.31781 3.80934 2.45067 2.52786C3.5965 1.23172 4.99456 0.5 6.09375 0.5C7.15356 0.5 8.18869 1.1887 8.98431 2.4617C9.77553 3.72765 10.2812 5.50765 10.2812 7.5Z" stroke="#959DA5"/>
+</g>
+<line y1="7.5" x2="15" y2="7.5" stroke="#959DA5"/>
+</svg>

extensions/ql-vscode/media/light/github.svg

@@ -0,0 +1,11 @@
+<!-- From https://github.com/microsoft/vscode-icons -->
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97578 0C3.57211 0 0.000244141 3.57186 0.000244141 7.97553C0.000244141 11.4985 2.29994 14.4832 5.43144 15.5596C5.82287 15.6086 5.96966 15.3639 5.96966 15.1682C5.96966 14.9725 5.96966 14.4832 5.96966 13.7982C3.76783 14.2875 3.27853 12.7217 3.27853 12.7217C2.93602 11.792 2.3978 11.5474 2.3978 11.5474C1.66385 11.0581 2.44673 11.0581 2.44673 11.0581C3.2296 11.107 3.66997 11.8899 3.66997 11.8899C4.40391 13.1131 5.5293 12.7706 5.96966 12.5749C6.01859 12.0367 6.26324 11.6942 6.45896 11.4985C4.69749 11.3028 2.83816 10.6177 2.83816 7.53517C2.83816 6.65443 3.13174 5.96942 3.66997 5.38226C3.62104 5.23547 3.32746 4.40367 3.76783 3.32722C3.76783 3.32722 4.45284 3.1315 5.96966 4.15902C6.60575 3.9633 7.29076 3.91437 7.97578 3.91437C8.66079 3.91437 9.34581 4.01223 9.98189 4.15902C11.4987 3.1315 12.1837 3.32722 12.1837 3.32722C12.6241 4.40367 12.3305 5.23547 12.2816 5.43119C12.7709 5.96942 13.1134 6.70336 13.1134 7.5841C13.1134 10.6667 11.2541 11.3028 9.4926 11.4985C9.78618 11.7431 10.0308 12.2324 10.0308 12.9664C10.0308 14.0428 10.0308 14.8746 10.0308 15.1682C10.0308 15.3639 10.1776 15.6086 10.5691 15.5596C13.7495 14.4832 16.0002 11.4985 16.0002 7.97553C15.9513 3.57186 12.3794 0 7.97578 0Z" fill="#424242"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="16" height="16" fill="white" transform="translate(0.000244141)"/>
+</clipPath>
+</defs>
+</svg>

extensions/ql-vscode/package.json

@@ -4,7 +4,7 @@
   "description": "CodeQL for Visual Studio Code",
   "author": "GitHub",
   "private": true,
-  "version": "1.5.8",
+  "version": "1.6.3",
   "publisher": "GitHub",
   "license": "MIT",
   "icon": "media/VS-marketplace-CodeQL-icon.png",
@@ -13,13 +13,16 @@
     "url": "https://github.com/github/vscode-codeql"
   },
   "engines": {
-    "vscode": "^1.57.0"
+    "vscode": "^1.59.0",
+    "node": ">=14.17.1",
+    "npm": ">=7.20.6"
   },
   "categories": [
     "Programming Languages"
   ],
   "extensionDependencies": [
-    "hbenl.vscode-test-explorer"
+    "hbenl.vscode-test-explorer",
+    "ms-vscode.test-adapter-converter"
   ],
   "capabilities": {
     "untrustedWorkspaces": {
@@ -42,14 +45,17 @@
     "onCommand:codeQLDatabases.chooseDatabaseFolder",
     "onCommand:codeQLDatabases.chooseDatabaseArchive",
     "onCommand:codeQLDatabases.chooseDatabaseInternet",
+    "onCommand:codeQLDatabases.chooseDatabaseGithub",
     "onCommand:codeQLDatabases.chooseDatabaseLgtm",
     "onCommand:codeQL.setCurrentDatabase",
     "onCommand:codeQL.viewAst",
+    "onCommand:codeQL.viewCfg",
     "onCommand:codeQL.openReferencedFile",
     "onCommand:codeQL.previewQueryHelp",
     "onCommand:codeQL.chooseDatabaseFolder",
     "onCommand:codeQL.chooseDatabaseArchive",
     "onCommand:codeQL.chooseDatabaseInternet",
+    "onCommand:codeQL.chooseDatabaseGithub",
     "onCommand:codeQL.chooseDatabaseLgtm",
     "onCommand:codeQLDatabases.chooseDatabase",
     "onCommand:codeQLDatabases.setCurrentDatabase",
@@ -130,7 +136,7 @@
       "title": "CodeQL",
       "properties": {
         "codeQL.cli.executablePath": {
-          "scope": "window",
+          "scope": "machine-overridable",
           "type": "string",
           "default": "",
           "markdownDescription": "Path to the CodeQL executable that should be used by the CodeQL extension. The executable is named `codeql` on Linux/Mac and `codeql.exe` on Windows. If empty, the extension will look for a CodeQL executable on your shell PATH, or if CodeQL is not on your PATH, download and manage its own CodeQL executable."
@@ -204,7 +210,13 @@
             null
           ],
           "default": null,
-          "description": "Path to a directory where the CodeQL extension should store query server logs. If empty, the extension stores logs in a temporary workspace folder and deletes the contents after each run."
+          "description": "Path to a directory where the CodeQL extension should store query server logs. If empty, the extension stores logs in a temporary workspace folder and deletes the contents after each run.",
+          "markdownDeprecationMessage": "This property is deprecated and no longer has any effect. All query logs are stored in the query history folder next to the query results."
+        },
+        "codeQL.runningQueries.quickEvalCodelens": {
+          "type": "boolean",
+          "default": true,
+          "description": "Enable the 'Quick Evaluation' CodeLens."
         },
         "codeQL.resultsDisplay.pageSize": {
           "type": "integer",
@@ -216,6 +228,12 @@
           "default": "%q on %d - %s, %r result count [%t]",
           "markdownDescription": "Default string for how to label query history items.\n* %t is the time of the query\n* %q is the human-readable query name\n* %f is the query file name\n* %d is the database name\n* %r is the number of results\n* %s is a status string"
         },
+        "codeQL.queryHistory.ttl": {
+          "type": "number",
+          "default": 30,
+          "description": "Number of days to retain queries in the query history before being automatically deleted.",
+          "scope": "machine"
+        },
         "codeQL.runningTests.additionalTestArguments": {
           "scope": "window",
           "type": "array",
@@ -242,7 +260,7 @@
           "scope": "application",
           "description": "Specifies whether or not to write telemetry events to the extension log."
         },
-        "codeQL.remoteQueries.repositoryLists": {
+        "codeQL.variantAnalysis.repositoryLists": {
           "type": [
             "object",
             null
@@ -256,14 +274,14 @@
             }
           },
           "default": null,
-          "markdownDescription": "[For internal use only] Lists of GitHub repositories that you want to query remotely. This should be a JSON object where each key is a user-specified name for this repository list, and the value is an array of GitHub repositories (of the form `<owner>/<repo>`)."
+          "markdownDescription": "[For internal use only] Lists of GitHub repositories that you want to run variant analysis against. This should be a JSON object where each key is a user-specified name for this repository list, and the value is an array of GitHub repositories (of the form `<owner>/<repo>`)."
         },
-        "codeQL.remoteQueries.controllerRepo": {
+        "codeQL.variantAnalysis.controllerRepo": {
           "type": "string",
           "default": "",
           "pattern": "^$|^(?:[a-zA-Z0-9]+-)*[a-zA-Z0-9]+/[a-zA-Z0-9-_]+$",
           "patternErrorMessage": "Please enter a valid GitHub repository",
-          "markdownDescription": "[For internal use only] The name of the GitHub repository where you can view the progress and results of the \"Run Remote query\" command. The repository should be of the form `<owner>/<repo>`)."
+          "markdownDescription": "[For internal use only] The name of the GitHub repository where you can view the progress and results of the \"Run Variant Analysis\" command. The repository should be of the form `<owner>/<repo>`)."
         }
       }
     },
@@ -281,8 +299,8 @@
         "title": "CodeQL: Run Query on Multiple Databases"
       },
       {
-        "command": "codeQL.runRemoteQuery",
-        "title": "CodeQL: Run Remote Query"
+        "command": "codeQL.runVariantAnalysis",
+        "title": "CodeQL: Run Variant Analysis"
       },
       {
         "command": "codeQL.runQueries",
@@ -340,6 +358,14 @@
           "dark": "media/dark/cloud-download.svg"
         }
       },
+      {
+        "command": "codeQLDatabases.chooseDatabaseGithub",
+        "title": "Download Database from GitHub",
+        "icon": {
+          "light": "media/light/github.svg",
+          "dark": "media/dark/github.svg"
+        }
+      },
       {
         "command": "codeQLDatabases.chooseDatabaseLgtm",
         "title": "Download from LGTM",
@@ -356,6 +382,10 @@
         "command": "codeQL.viewAst",
         "title": "CodeQL: View AST"
       },
+      {
+        "command": "codeQL.viewCfg",
+        "title": "CodeQL: View CFG"
+      },
       {
         "command": "codeQL.upgradeCurrentDatabase",
         "title": "CodeQL: Upgrade Current Database"
@@ -364,6 +394,14 @@
         "command": "codeQL.clearCache",
         "title": "CodeQL: Clear Cache"
       },
+      {
+        "command": "codeQL.installPackDependencies",
+        "title": "CodeQL: Install Pack Dependencies"
+      },
+      {
+        "command": "codeQL.downloadPacks",
+        "title": "CodeQL: Download Packs"
+      },
       {
         "command": "codeQLDatabases.setCurrentDatabase",
         "title": "Set Current Database"
@@ -400,6 +438,10 @@
         "command": "codeQL.chooseDatabaseInternet",
         "title": "CodeQL: Download Database"
       },
+      {
+        "command": "codeQL.chooseDatabaseGithub",
+        "title": "CodeQL: Download Database from GitHub"
+      },
       {
         "command": "codeQL.chooseDatabaseLgtm",
         "title": "CodeQL: Download Database from LGTM"
@@ -476,6 +518,22 @@
         "command": "codeQLQueryHistory.showQueryLog",
         "title": "Show Query Log"
       },
+      {
+        "command": "codeQLQueryHistory.openQueryDirectory",
+        "title": "Open query directory"
+      },
+      {
+        "command": "codeQLQueryHistory.showEvalLog",
+        "title": "Show Evaluator Log (Raw)"
+      },
+      {
+        "command": "codeQLQueryHistory.showEvalLogSummary",
+        "title": "Show Evaluator Log (Summary)"
+      },
+      {
+        "command": "codeQLQueryHistory.cancel",
+        "title": "Cancel"
+      },
       {
         "command": "codeQLQueryHistory.showQueryText",
         "title": "Show Query Text"
@@ -504,6 +562,10 @@
         "command": "codeQLQueryHistory.compareWith",
         "title": "Compare Results"
       },
+      {
+        "command": "codeQLQueryHistory.openOnGithub",
+        "title": "Open Variant Analysis on GitHub"
+      },
       {
         "command": "codeQLQueryResults.nextPathStep",
         "title": "CodeQL: Show Next Step on Path"
@@ -564,6 +626,11 @@
           "when": "view == codeQLDatabases",
           "group": "navigation"
         },
+        {
+          "command": "codeQLDatabases.chooseDatabaseGithub",
+          "when": "config.codeQL.canary && view == codeQLDatabases",
+          "group": "navigation"
+        },
         {
           "command": "codeQLDatabases.chooseDatabaseLgtm",
           "when": "view == codeQLDatabases",
@@ -644,7 +711,7 @@
         {
           "command": "codeQLQueryHistory.removeHistoryItem",
           "group": "9_qlCommands",
-          "when": "view == codeQLQueryHistory"
+          "when": "viewItem == interpretedResultsItem || viewItem == rawResultsItem || viewItem == remoteResultsItem || viewItem == cancelledResultsItem"
         },
         {
           "command": "codeQLQueryHistory.setLabel",
@@ -654,12 +721,27 @@
         {
           "command": "codeQLQueryHistory.compareWith",
           "group": "9_qlCommands",
-          "when": "view == codeQLQueryHistory"
+          "when": "viewItem == rawResultsItem || viewItem == interpretedResultsItem"
         },
         {
           "command": "codeQLQueryHistory.showQueryLog",
           "group": "9_qlCommands",
-          "when": "view == codeQLQueryHistory"
+          "when": "viewItem == rawResultsItem || viewItem == interpretedResultsItem"
+        },
+        {
+          "command": "codeQLQueryHistory.openQueryDirectory",
+          "group": "9_qlCommands",
+          "when": "view == codeQLQueryHistory && !hasRemoteServer"
+        },
+        {
+          "command": "codeQLQueryHistory.showEvalLog",
+          "group": "9_qlCommands",
+          "when": "codeql.supportsEvalLog && (viewItem == rawResultsItem || viewItem == interpretedResultsItem || viewItem == cancelledResultsItem)"
+        },
+        {
+          "command": "codeQLQueryHistory.showEvalLogSummary",
+          "group": "9_qlCommands",
+          "when": "codeql.supportsEvalLog && (viewItem == rawResultsItem || viewItem == interpretedResultsItem || viewItem == cancelledResultsItem)"
         },
         {
           "command": "codeQLQueryHistory.showQueryText",
@@ -669,37 +751,42 @@
         {
           "command": "codeQLQueryHistory.viewCsvResults",
           "group": "9_qlCommands",
-          "when": "view == codeQLQueryHistory && viewItem != interpretedResultsItem"
+          "when": "viewItem == rawResultsItem"
         },
         {
           "command": "codeQLQueryHistory.viewCsvAlerts",
           "group": "9_qlCommands",
-          "when": "view == codeQLQueryHistory && viewItem == interpretedResultsItem"
+          "when": "viewItem == interpretedResultsItem"
         },
         {
           "command": "codeQLQueryHistory.viewSarifAlerts",
           "group": "9_qlCommands",
-          "when": "view == codeQLQueryHistory && viewItem == interpretedResultsItem"
+          "when": "viewItem == interpretedResultsItem"
         },
         {
           "command": "codeQLQueryHistory.viewDil",
           "group": "9_qlCommands",
-          "when": "view == codeQLQueryHistory"
+          "when": "viewItem == rawResultsItem || viewItem == interpretedResultsItem"
         },
         {
-          "command": "codeQL.previewQueryHelp",
+          "command": "codeQLQueryHistory.cancel",
           "group": "9_qlCommands",
-          "when": "view == codeQLQueryHistory && resourceScheme == .qhelp && isWorkspaceTrusted"
+          "when": "viewItem == inProgressResultsItem || viewItem == inProgressRemoteResultsItem"
+        },
+        {
+          "command": "codeQLQueryHistory.openOnGithub",
+          "group": "9_qlCommands",
+          "when": "viewItem == remoteResultsItem || viewItem == inProgressRemoteResultsItem"
         },
         {
           "command": "codeQLTests.showOutputDifferences",
           "group": "qltest@1",
-          "when": "view == test-explorer && viewItem == testWithSource"
+          "when": "viewItem == testWithSource"
         },
         {
           "command": "codeQLTests.acceptOutput",
           "group": "qltest@2",
-          "when": "view == test-explorer && viewItem == testWithSource"
+          "when": "viewItem == testWithSource"
         }
       ],
       "explorer/context": [
@@ -711,7 +798,12 @@
         {
           "command": "codeQL.viewAst",
           "group": "9_qlCommands",
-          "when": "resourceScheme == codeql-zip-archive"
+          "when": "resourceScheme == codeql-zip-archive && !explorerResourceIsFolder && !listMultiSelection"
+        },
+        {
+          "command": "codeQL.viewCfg",
+          "group": "9_qlCommands",
+          "when": "resourceScheme == codeql-zip-archive && config.codeQL.canary"
         },
         {
           "command": "codeQL.runQueries",
@@ -743,7 +835,7 @@
           "when": "resourceLangId == ql && resourceExtname == .ql"
         },
         {
-          "command": "codeQL.runRemoteQuery",
+          "command": "codeQL.runVariantAnalysis",
           "when": "config.codeQL.canary && editorLangId == ql && resourceExtname == .ql"
         },
         {
@@ -770,6 +862,14 @@
           "command": "codeQL.viewAst",
           "when": "resourceScheme == codeql-zip-archive"
         },
+        {
+          "command": "codeQL.viewCfg",
+          "when": "resourceScheme == codeql-zip-archive && config.codeQL.canary"
+        },
+        {
+          "command": "codeQL.chooseDatabaseGithub",
+          "when": "config.codeQL.canary"
+        },
         {
           "command": "codeQLDatabases.setCurrentDatabase",
           "when": "false"
@@ -814,6 +914,10 @@
           "command": "codeQLDatabases.chooseDatabaseInternet",
           "when": "false"
         },
+        {
+          "command": "codeQLDatabases.chooseDatabaseGithub",
+          "when": "false"
+        },
         {
           "command": "codeQLDatabases.chooseDatabaseLgtm",
           "when": "false"
@@ -838,6 +942,26 @@
           "command": "codeQLQueryHistory.showQueryLog",
           "when": "false"
         },
+        {
+          "command": "codeQLQueryHistory.showEvalLog",
+          "when": "false"
+        },
+        {
+          "command": "codeQLQueryHistory.showEvalLogSummary",
+          "when": "false"
+        },
+        {
+          "command": "codeQLQueryHistory.openQueryDirectory",
+          "when": "false"
+        },
+        {
+          "command": "codeQLQueryHistory.cancel",
+          "when": "false"
+        },
+        {
+          "command": "codeQLQueryHistory.openOnGithub",
+          "when": "false"
+        },
         {
           "command": "codeQLQueryHistory.showQueryText",
           "when": "false"
@@ -905,13 +1029,17 @@
           "when": "editorLangId == ql && resourceExtname == .ql"
         },
         {
-          "command": "codeQL.runRemoteQuery",
+          "command": "codeQL.runVariantAnalysis",
           "when": "config.codeQL.canary && editorLangId == ql && resourceExtname == .ql"
         },
         {
           "command": "codeQL.viewAst",
           "when": "resourceScheme == codeql-zip-archive"
         },
+        {
+          "command": "codeQL.viewCfg",
+          "when": "resourceScheme == codeql-zip-archive && config.codeQL.canary"
+        },
         {
           "command": "codeQL.quickEval",
           "when": "editorLangId == ql"
@@ -970,6 +1098,8 @@
     "build": "gulp",
     "watch": "npm-run-all -p watch:*",
     "watch:extension": "tsc --watch",
+    "watch:webpack": "gulp watchView",
+    "watch:css": "gulp watchCss",
     "test": "mocha --exit -r ts-node/register test/pure-tests/**/*.ts",
     "preintegration": "rm -rf ./out/vscode-tests && gulp",
     "integration": "node ./out/vscode-tests/run-integration-tests.js no-workspace,minimal-workspace",
@@ -981,20 +1111,27 @@
   },
   "dependencies": {
     "@octokit/rest": "^18.5.6",
+    "@primer/octicons-react": "^16.3.0",
+    "@primer/react": "^35.0.0",
     "child-process-promise": "^2.2.1",
     "classnames": "~2.2.6",
-    "fs-extra": "^9.0.1",
+    "d3": "^6.3.1",
+    "d3-graphviz": "^2.6.1",
+    "fs-extra": "^10.0.1",
     "glob-promise": "^3.4.0",
     "js-yaml": "^3.14.0",
-    "minimist": "~1.2.5",
-    "node-fetch": "~2.6.0",
+    "minimist": "~1.2.6",
+    "nanoid": "^3.2.0",
+    "node-fetch": "~2.6.7",
     "path-browserify": "^1.0.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "semver": "~7.3.2",
+    "source-map-support": "^0.5.21",
     "stream": "^0.0.2",
     "stream-chain": "~2.2.4",
     "stream-json": "~1.7.3",
+    "styled-components": "^5.3.3",
     "tmp": "^0.1.0",
     "tmp-promise": "~3.0.2",
     "tree-kill": "~1.2.2",
@@ -1011,20 +1148,24 @@
     "@types/chai-as-promised": "~7.1.2",
     "@types/child-process-promise": "^2.2.1",
     "@types/classnames": "~2.2.9",
+    "@types/d3": "^6.2.0",
+    "@types/d3-graphviz": "^2.6.6",
+    "@types/del": "^4.0.0",
     "@types/fs-extra": "^9.0.6",
     "@types/glob": "^7.1.1",
     "@types/google-protobuf": "^3.2.7",
     "@types/gulp": "^4.0.9",
-    "@types/gulp-replace": "0.0.31",
+    "@types/gulp-replace": "^1.1.0",
     "@types/gulp-sourcemaps": "0.0.32",
     "@types/js-yaml": "^3.12.5",
     "@types/jszip": "~3.1.6",
     "@types/mocha": "^9.0.0",
-    "@types/node": "^12.14.1",
+    "@types/nanoid": "^3.0.0",
+    "@types/node": "^16.11.25",
     "@types/node-fetch": "~2.5.2",
     "@types/proxyquire": "~1.3.28",
-    "@types/react": "^16.8.17",
-    "@types/react-dom": "^16.8.4",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
     "@types/sarif": "~2.1.2",
     "@types/semver": "~7.2.0",
     "@types/sinon": "~7.5.2",
@@ -1034,8 +1175,8 @@
     "@types/through2": "^2.0.36",
     "@types/tmp": "^0.1.0",
     "@types/unzipper": "~0.10.1",
-    "@types/vscode": "^1.57.0",
-    "@types/webpack": "^4.32.1",
+    "@types/vscode": "^1.59.0",
+    "@types/webpack": "^5.28.0",
     "@types/xml2js": "~0.4.4",
     "@typescript-eslint/eslint-plugin": "^4.26.0",
     "@typescript-eslint/parser": "^4.26.0",
@@ -1044,12 +1185,13 @@
     "chai": "^4.2.0",
     "chai-as-promised": "~7.1.1",
     "css-loader": "~3.1.0",
+    "del": "^6.0.0",
     "eslint": "~6.8.0",
     "eslint-plugin-react": "~7.19.0",
     "glob": "^7.1.4",
     "gulp": "^4.0.2",
-    "gulp-replace": "^1.0.0",
-    "gulp-sourcemaps": "^2.6.5",
+    "gulp-replace": "^1.1.3",
+    "gulp-sourcemaps": "^3.0.0",
     "gulp-typescript": "^5.0.1",
     "husky": "~4.2.5",
     "jsonc-parser": "^2.3.0",
@@ -1059,16 +1201,16 @@
     "npm-run-all": "^4.1.5",
     "prettier": "~2.0.5",
     "proxyquire": "~2.1.3",
-    "sinon": "~9.0.0",
+    "sinon": "~13.0.1",
     "sinon-chai": "~3.5.0",
     "style-loader": "~0.23.1",
-    "through2": "^3.0.1",
+    "through2": "^4.0.2",
     "ts-loader": "^8.1.0",
-    "ts-node": "^8.3.0",
+    "ts-node": "^10.7.0",
     "ts-protoc-gen": "^0.9.0",
-    "typescript": "^4.3.2",
+    "typescript": "^4.5.5",
     "typescript-formatter": "^7.2.2",
-    "vsce": "^1.65.0",
+    "vsce": "^2.7.0",
     "vscode-test": "^1.4.0",
     "webpack": "^5.28.0",
     "webpack-cli": "^4.6.0"
@@ -1076,7 +1218,7 @@
   "husky": {
     "hooks": {
       "pre-commit": "npm run format-staged",
-      "pre-push": "npm run lint"
+      "pre-push": "npm run lint && scripts/forbid-mocha-only"
     }
   },
   "lint-staged": {

extensions/ql-vscode/scripts/forbid-mocha-only

@@ -0,0 +1,6 @@
+if grep -rq --include '*.test.ts' 'it.only\|describe.only' './test' './src'; then
+    echo 'There is a .only() in the tests. Please remove it.'
+    exit 1;
+else
+    exit 0;
+fi

extensions/ql-vscode/src/additional-typings.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The d3 library is designed to work in both the browser and
+ * node. Consequently their typings files refer to both node
+ * types like `Buffer` (which don't exist in the browser), and browser
+ * types like `Blob` (which don't exist in node). Instead of sticking
+ * all of `dom` in `compilerOptions.lib`, it suffices just to put in a
+ * stub definition of the affected types so that compilation
+ * succeeds.
+ */
+
+declare type RequestInit = Record<string, unknown>;
+declare type ElementTagNameMap = any;
+declare type NodeListOf<T> = Record<string, T>;
+declare type Node = Record<string, unknown>;
+declare type XMLDocument = Record<string, unknown>;

extensions/ql-vscode/src/astViewer.ts

@@ -10,7 +10,8 @@ import {
   TextEditorSelectionChangeEvent,
   TextEditorSelectionChangeKind,
   Location,
-  Range
+  Range,
+  Uri
 } from 'vscode';
 import * as path from 'path';
 
@@ -104,7 +105,7 @@ class AstViewerDataProvider extends DisposableObject implements TreeDataProvider
 export class AstViewer extends DisposableObject {
   private treeView: TreeView<AstItem>;
   private treeDataProvider: AstViewerDataProvider;
-  private currentFile: string | undefined;
+  private currentFileUri: Uri | undefined;
 
   constructor() {
     super();
@@ -125,12 +126,12 @@ export class AstViewer extends DisposableObject {
     this.push(window.onDidChangeTextEditorSelection(this.updateTreeSelection, this));
   }
 
-  updateRoots(roots: AstItem[], db: DatabaseItem, fileName: string) {
+  updateRoots(roots: AstItem[], db: DatabaseItem, fileUri: Uri) {
     this.treeDataProvider.roots = roots;
     this.treeDataProvider.db = db;
     this.treeDataProvider.refresh();
-    this.treeView.message = `AST for ${path.basename(fileName)}`;
-    this.currentFile = fileName;
+    this.treeView.message = `AST for ${path.basename(fileUri.fsPath)}`;
+    this.currentFileUri = fileUri;
     // Handle error on reveal. This could happen if
     // the tree view is disposed during the reveal.
     this.treeView.reveal(roots[0], { focus: false })?.then(
@@ -174,7 +175,7 @@ export class AstViewer extends DisposableObject {
 
     if (
       this.treeView.visible &&
-      e.textEditor.document.uri.fsPath === this.currentFile &&
+      e.textEditor.document.uri.fsPath === this.currentFileUri?.fsPath &&
       e.selections.length === 1
     ) {
       const selection = e.selections[0];
@@ -199,6 +200,6 @@ export class AstViewer extends DisposableObject {
     this.treeDataProvider.db = undefined;
     this.treeDataProvider.refresh();
     this.treeView.message = undefined;
-    this.currentFile = undefined;
+    this.currentFileUri = undefined;
   }
 }

extensions/ql-vscode/src/blob.d.ts

@@ -1,11 +0,0 @@
-/**
- * The npm library jszip is designed to work in both the browser and
- * node. Consequently its typings @types/jszip refers to both node
- * types like `Buffer` (which don't exist in the browser), and browser
- * types like `Blob` (which don't exist in node). Instead of sticking
- * all of `dom` in `compilerOptions.lib`, it suffices just to put in a
- * stub definition of the type `Blob` here so that compilation
- * succeeds.
- */
-
-declare type Blob = string;

extensions/ql-vscode/src/cli-version.ts

@@ -1,6 +1,7 @@
 import * as semver from 'semver';
 import { runCodeQlCliCommand } from './cli';
 import { Logger } from './logging';
+import { getErrorMessage } from './pure/helpers-pure';
 
 /**
  * Get the version of a CodeQL CLI.
@@ -18,7 +19,7 @@ export async function getCodeQlCliVersion(codeQlPath: string, logger: Logger): P
   } catch (e) {
     // Failed to run the version command. This might happen if the cli version is _really_ old, or it is corrupted.
     // Either way, we can't determine compatibility.
-    void logger.log(`Failed to run 'codeql version'. Reason: ${e.message}`);
+    void logger.log(`Failed to run 'codeql version'. Reason: ${getErrorMessage(e)}`);
     return undefined;
   }
 }

extensions/ql-vscode/src/cli.ts

@@ -1,5 +1,6 @@
 import * as cpp from 'child-process-promise';
 import * as child_process from 'child_process';
+import * as fs from 'fs-extra';
 import * as path from 'path';
 import * as sarif from 'sarif';
 import { SemVer } from 'semver';
@@ -7,17 +8,17 @@ import { Readable } from 'stream';
 import { StringDecoder } from 'string_decoder';
 import * as tk from 'tree-kill';
 import { promisify } from 'util';
-import { CancellationToken, Disposable, Uri } from 'vscode';
+import { CancellationToken, commands, Disposable, Uri } from 'vscode';
 
 import { BQRSInfo, DecodedBqrsChunk } from './pure/bqrs-cli-types';
 import { CliConfig } from './config';
 import { DistributionProvider, FindDistributionResultKind } from './distribution';
-import { assertNever } from './pure/helpers-pure';
+import { assertNever, getErrorMessage, getErrorStack } from './pure/helpers-pure';
 import { QueryMetadata, SortDirection } from './pure/interface-types';
 import { Logger, ProgressReporter } from './logging';
 import { CompilationMessage } from './pure/messages';
 import { sarifParser } from './sarif-parser';
-import { dbSchemeToLanguage } from './helpers';
+import { dbSchemeToLanguage, walkDirectory } from './helpers';
 
 /**
  * The version of the SARIF format that we are using.
@@ -169,7 +170,7 @@ export class CodeQLCliServer implements Disposable {
   /** Version of current cli, lazily computed by the `getVersion()` method */
   private _version: SemVer | undefined;
 
-  /** 
+  /**
    * The languages supported by the current version of the CLI, computed by `getSupportedLanguages()`.
    */
   private _supportedLanguages: string[] | undefined;
@@ -345,7 +346,7 @@ export class CodeQLCliServer implements Disposable {
           stderrBuffers.length == 0
             ? new Error(`${description} failed: ${err}`)
             : new Error(`${description} failed: ${Buffer.concat(stderrBuffers).toString('utf8')}`);
-        newError.stack += (err.stack || '');
+        newError.stack += getErrorStack(err);
         throw newError;
       } finally {
         void this.logger.log(Buffer.concat(stderrBuffers).toString('utf8'));
@@ -403,7 +404,7 @@ export class CodeQLCliServer implements Disposable {
     try {
       if (cancellationToken !== undefined) {
         cancellationRegistration = cancellationToken.onCancellationRequested(_e => {
-          tk(child.pid);
+          tk(child.pid || 0);
         });
       }
       if (logger !== undefined) {
@@ -447,7 +448,7 @@ export class CodeQLCliServer implements Disposable {
       try {
         yield JSON.parse(event) as EventType;
       } catch (err) {
-        throw new Error(`Parsing output of ${description} failed: ${err.stderr || err}`);
+        throw new Error(`Parsing output of ${description} failed: ${(err as any).stderr || getErrorMessage(err)}`);
       }
     }
   }
@@ -502,7 +503,7 @@ export class CodeQLCliServer implements Disposable {
     try {
       return JSON.parse(result) as OutputType;
     } catch (err) {
-      throw new Error(`Parsing output of ${description} failed: ${err.stderr || err}`);
+      throw new Error(`Parsing output of ${description} failed: ${(err as any).stderr || getErrorMessage(err)}`);
     }
   }
 
@@ -514,8 +515,7 @@ export class CodeQLCliServer implements Disposable {
   async resolveLibraryPath(workspaces: string[], queryPath: string): Promise<QuerySetup> {
     const subcommandArgs = [
       '--query', queryPath,
-      '--additional-packs',
-      workspaces.join(path.delimiter)
+      ...this.getAdditionalPacksArg(workspaces)
     ];
     return await this.runJsonCodeQlCliCommand<QuerySetup>(['resolve', 'library-path'], subcommandArgs, 'Resolving library paths');
   }
@@ -528,8 +528,7 @@ export class CodeQLCliServer implements Disposable {
     const subcommandArgs = [
       '--format', 'bylanguage',
       queryUri.fsPath,
-      '--additional-packs',
-      workspaces.join(path.delimiter)
+      ...this.getAdditionalPacksArg(workspaces)
     ];
     return JSON.parse(await this.runCodeQlCliCommand(['resolve', 'queries'], subcommandArgs, 'Resolving query by language'));
   }
@@ -562,6 +561,17 @@ export class CodeQLCliServer implements Disposable {
     );
   }
 
+  /**
+   * Issues an internal clear-cache command to the cli server. This
+   * command is used to clear the qlpack cache of the server.
+   *
+   * This cache is generally cleared every 1s. This method is used
+   * to force an early clearing of the cache.
+   */
+  public async clearCache(): Promise<void> {
+    await this.runCodeQlCliCommand(['clear-cache'], [], 'Clearing qlpack cache');
+  }
+
   /**
    * Runs QL tests.
    * @param testPaths Full paths of the tests to run.
@@ -573,7 +583,7 @@ export class CodeQLCliServer implements Disposable {
   ): AsyncGenerator<TestCompleted, void, unknown> {
 
     const subcommandArgs = this.cliConfig.additionalTestArguments.concat([
-      '--additional-packs', workspaces.join(path.delimiter),
+      ...this.getAdditionalPacksArg(workspaces),
       '--threads',
       this.cliConfig.numberTestThreads.toString(),
       ...testPaths
@@ -595,8 +605,12 @@ export class CodeQLCliServer implements Disposable {
 
   /** Resolves the ML models that should be available when evaluating a query. */
   async resolveMlModels(additionalPacks: string[]): Promise<MlModelsInfo> {
-    return await this.runJsonCodeQlCliCommand<MlModelsInfo>(['resolve', 'ml-models'], ['--additional-packs',
-      additionalPacks.join(path.delimiter)], 'Resolving ML models', false);
+    return await this.runJsonCodeQlCliCommand<MlModelsInfo>(
+      ['resolve', 'ml-models'],
+      this.getAdditionalPacksArg(additionalPacks),
+      'Resolving ML models',
+      false
+    );
   }
 
   /**
@@ -651,6 +665,26 @@ export class CodeQLCliServer implements Disposable {
     return await this.runCodeQlCliCommand(['generate', 'query-help'], subcommandArgs, `Generating qhelp in markdown format at ${outputDirectory}`);
   }
 
+  /**
+  * Generate a summary of an evaluation log.
+  * @param endSummaryPath The path to write only the end of query part of the human-readable summary to. 
+  * @param inputPath The path of an evaluation event log.
+  * @param outputPath The path to write a human-readable summary of it to.
+  */
+   async generateLogSummary(
+    inputPath: string,
+    outputPath: string,
+    endSummaryPath: string,
+  ): Promise<string> {
+    const subcommandArgs = [
+      '--format=text',
+      `--end-summary=${endSummaryPath}`,
+      inputPath,
+      outputPath
+    ];
+    return await this.runCodeQlCliCommand(['generate', 'log-summary'], subcommandArgs, 'Generating log summary');
+  }
+
   /**
   * Gets the results from a bqrs.
   * @param bqrsPath The path to the bqrs.
@@ -674,20 +708,13 @@ export class CodeQLCliServer implements Disposable {
     return await this.runJsonCodeQlCliCommand<DecodedBqrsChunk>(['bqrs', 'decode'], subcommandArgs, 'Reading bqrs data');
   }
 
-  async runInterpretCommand(format: string, metadata: QueryMetadata, resultsPath: string, interpretedResultsPath: string, sourceInfo?: SourceInfo) {
+  async runInterpretCommand(format: string, additonalArgs: string[], metadata: QueryMetadata, resultsPath: string, interpretedResultsPath: string, sourceInfo?: SourceInfo) {
     const args = [
       '--output', interpretedResultsPath,
       '--format', format,
       // Forward all of the query metadata.
       ...Object.entries(metadata).map(([key, value]) => `-t=${key}=${value}`)
-    ];
-    if (format == SARIF_FORMAT) {
-      // TODO: This flag means that we don't group interpreted results
-      // by primary location. We may want to revisit whether we call
-      // interpretation with and without this flag, or do some
-      // grouping client-side.
-      args.push('--no-group-results');
-    }
+    ].concat(additonalArgs);
     if (sourceInfo !== undefined) {
       args.push(
         '--source-archive', sourceInfo.sourceArchive,
@@ -709,13 +736,47 @@ export class CodeQLCliServer implements Disposable {
     await this.runCodeQlCliCommand(['bqrs', 'interpret'], args, 'Interpreting query results');
   }
 
-  async interpretBqrs(metadata: QueryMetadata, resultsPath: string, interpretedResultsPath: string, sourceInfo?: SourceInfo): Promise<sarif.Log> {
-    await this.runInterpretCommand(SARIF_FORMAT, metadata, resultsPath, interpretedResultsPath, sourceInfo);
+  async interpretBqrsSarif(metadata: QueryMetadata, resultsPath: string, interpretedResultsPath: string, sourceInfo?: SourceInfo): Promise<sarif.Log> {
+    const additionalArgs = [
+      // TODO: This flag means that we don't group interpreted results
+      // by primary location. We may want to revisit whether we call
+      // interpretation with and without this flag, or do some
+      // grouping client-side.
+      '--no-group-results'
+    ];
+
+    await this.runInterpretCommand(SARIF_FORMAT, additionalArgs, metadata, resultsPath, interpretedResultsPath, sourceInfo);
     return await sarifParser(interpretedResultsPath);
   }
 
+  // Warning: this function is untenable for large dot files,
+  async readDotFiles(dir: string): Promise<string[]> {
+    const dotFiles: Promise<string>[] = [];
+    for await (const file of walkDirectory(dir)) {
+      if (file.endsWith('.dot')) {
+        dotFiles.push(fs.readFile(file, 'utf8'));
+      }
+    }
+    return Promise.all(dotFiles);
+  }
+
+  async interpretBqrsGraph(metadata: QueryMetadata, resultsPath: string, interpretedResultsPath: string, sourceInfo?: SourceInfo): Promise<string[]> {
+    const additionalArgs = sourceInfo
+      ? ['--dot-location-url-format', 'file://' + sourceInfo.sourceLocationPrefix + '{path}:{start:line}:{start:column}:{end:line}:{end:column}']
+      : [];
+
+    await this.runInterpretCommand('dot', additionalArgs, metadata, resultsPath, interpretedResultsPath, sourceInfo);
+
+    try {
+      const dot = await this.readDotFiles(interpretedResultsPath);
+      return dot;
+    } catch (err) {
+      throw new Error(`Reading output of interpretation failed: ${getErrorMessage(err)}`);
+    }
+  }
+
   async generateResultsCsv(metadata: QueryMetadata, resultsPath: string, csvPath: string, sourceInfo?: SourceInfo): Promise<void> {
-    await this.runInterpretCommand(CSV_FORMAT, metadata, resultsPath, csvPath, sourceInfo);
+    await this.runInterpretCommand(CSV_FORMAT, [], metadata, resultsPath, csvPath, sourceInfo);
   }
 
   async sortBqrs(resultsPath: string, sortedResultsPath: string, resultSet: string, sortKeys: number[], sortDirections: SortDirection[]): Promise<void> {
@@ -761,7 +822,7 @@ export class CodeQLCliServer implements Disposable {
    * @returns A list of database upgrade script directories
    */
   async resolveUpgrades(dbScheme: string, searchPath: string[], allowDowngradesIfPossible: boolean, targetDbScheme?: string): Promise<UpgradesInfo> {
-    const args = ['--additional-packs', searchPath.join(path.delimiter), '--dbscheme', dbScheme];
+    const args = [...this.getAdditionalPacksArg(searchPath), '--dbscheme', dbScheme];
     if (targetDbScheme) {
       args.push('--target-dbscheme', targetDbScheme);
       if (allowDowngradesIfPossible && await this.cliConstraints.supportsDowngrades()) {
@@ -783,7 +844,7 @@ export class CodeQLCliServer implements Disposable {
    * @returns A dictionary mapping qlpack name to the directory it comes from
    */
   resolveQlpacks(additionalPacks: string[], searchPath?: string[]): Promise<QlpacksInfo> {
-    const args = ['--additional-packs', additionalPacks.join(path.delimiter)];
+    const args = this.getAdditionalPacksArg(additionalPacks);
     if (searchPath?.length) {
       args.push('--search-path', path.join(...searchPath));
     }
@@ -806,7 +867,7 @@ export class CodeQLCliServer implements Disposable {
   /**
    * Gets the list of available languages. Refines the result of `resolveLanguages()`, by excluding
    * extra things like "xml" and "properties".
-   * 
+   *
    * @returns An array of languages that are supported by the current version of the CodeQL CLI.
    */
   public async getSupportedLanguages(): Promise<string[]> {
@@ -829,7 +890,7 @@ export class CodeQLCliServer implements Disposable {
    * @returns A list of query files found.
    */
   async resolveQueriesInSuite(suite: string, additionalPacks: string[], searchPath?: string[]): Promise<string[]> {
-    const args = ['--additional-packs', additionalPacks.join(path.delimiter)];
+    const args = this.getAdditionalPacksArg(additionalPacks);
     if (searchPath !== undefined) {
       args.push('--search-path', path.join(...searchPath));
     }
@@ -845,6 +906,14 @@ export class CodeQLCliServer implements Disposable {
     );
   }
 
+  /**
+   * Downloads a specified pack.
+   * @param packs The `<package-scope/name[@version]>` of the packs to download.
+   */
+  async packDownload(packs: string[]) {
+    return this.runJsonCodeQlCliCommand(['pack', 'download'], packs, 'Downloading packs');
+  }
+
   async packInstall(dir: string) {
     return this.runJsonCodeQlCliCommand(['pack', 'install'], [dir], 'Installing pack dependencies');
   }
@@ -854,8 +923,7 @@ export class CodeQLCliServer implements Disposable {
       '-o',
       outputPath,
       dir,
-      '--additional-packs',
-      workspaceFolders.join(path.delimiter)
+      ...this.getAdditionalPacksArg(workspaceFolders)
     ];
     if (!precompile && await this.cliConstraints.supportsNoPrecompile()) {
       args.push('--no-precompile');
@@ -892,6 +960,10 @@ export class CodeQLCliServer implements Disposable {
   public async getVersion() {
     if (!this._version) {
       this._version = await this.refreshVersion();
+      // this._version is only undefined upon config change, so we reset CLI-based context key only when necessary.
+      await commands.executeCommand(
+        'setContext', 'codeql.supportsEvalLog', await this.cliConstraints.supportsPerQueryEvalLog()
+      );
     }
     return this._version;
   }
@@ -910,6 +982,12 @@ export class CodeQLCliServer implements Disposable {
         throw new Error('No distribution found');
     }
   }
+
+  private getAdditionalPacksArg(paths: string[]): string[] {
+    return paths.length
+      ? ['--additional-packs', paths.join(path.delimiter)]
+      : [];
+  }
 }
 
 /**
@@ -996,7 +1074,7 @@ export async function runCodeQlCliCommand(
     void logger.log('CLI command succeeded.');
     return result.stdout;
   } catch (err) {
-    throw new Error(`${description} failed: ${err.stderr || err}`);
+    throw new Error(`${description} failed: ${(err as any).stderr || getErrorMessage(err)}`);
   }
 }
 
@@ -1052,8 +1130,8 @@ class SplitBuffer {
     while (this.searchIndex <= (this.buffer.length - this.maxSeparatorLength)) {
       for (const separator of this.separators) {
         if (SplitBuffer.startsWith(this.buffer, separator, this.searchIndex)) {
-          const line = this.buffer.substr(0, this.searchIndex);
-          this.buffer = this.buffer.substr(this.searchIndex + separator.length);
+          const line = this.buffer.slice(0, this.searchIndex);
+          this.buffer = this.buffer.slice(this.searchIndex + separator.length);
           this.searchIndex = 0;
           return line;
         }
@@ -1186,6 +1264,33 @@ export class CliVersionConstraint {
    */
   public static CLI_VERSION_WITH_RESOLVE_ML_MODELS = new SemVer('2.7.3');
 
+  /**
+   * CLI version where the `--old-eval-stats` option to the query server was introduced.
+   */
+  public static CLI_VERSION_WITH_OLD_EVAL_STATS = new SemVer('2.7.4');
+
+  /**
+   * CLI version where packaging was introduced.
+   */
+  public static CLI_VERSION_WITH_PACKAGING = new SemVer('2.6.0');
+
+  /**
+   * CLI version where the `--evaluator-log` and related options to the query server were introduced,
+   * on a per-query server basis.
+   */
+  public static CLI_VERSION_WITH_STRUCTURED_EVAL_LOG = new SemVer('2.8.2');
+
+   /**
+    * CLI version that supports rotating structured logs to produce one per query.
+    * 
+    * Note that 2.8.4 supports generating the evaluation logs and summaries,
+    * but 2.9.0 includes a new option to produce the end-of-query summary logs to
+    * the query server console. For simplicity we gate all features behind 2.9.0,
+    * but if a user is tied to the 2.8 release, we can enable evaluator logs 
+    * and summaries for them.
+    */
+    public static CLI_VERSION_WITH_PER_QUERY_EVAL_LOG = new SemVer('2.9.0');
+
   constructor(private readonly cli: CodeQLCliServer) {
     /**/
   }
@@ -1234,4 +1339,19 @@ export class CliVersionConstraint {
     return this.isVersionAtLeast(CliVersionConstraint.CLI_VERSION_WITH_RESOLVE_ML_MODELS);
   }
 
+  async supportsOldEvalStats() {
+    return this.isVersionAtLeast(CliVersionConstraint.CLI_VERSION_WITH_OLD_EVAL_STATS);
+  }
+
+  async supportsPackaging() {
+    return this.isVersionAtLeast(CliVersionConstraint.CLI_VERSION_WITH_PACKAGING);
+  }
+
+  async supportsStructuredEvalLog() {
+    return this.isVersionAtLeast(CliVersionConstraint.CLI_VERSION_WITH_STRUCTURED_EVAL_LOG);
+  }
+
+  async supportsPerQueryEvalLog() {
+    return this.isVersionAtLeast(CliVersionConstraint.CLI_VERSION_WITH_PER_QUERY_EVAL_LOG);
+  }
 }

extensions/ql-vscode/src/commandRunner.ts

@@ -8,6 +8,7 @@ import {
 } from 'vscode';
 import { showAndLogErrorMessage, showAndLogWarningMessage } from './helpers';
 import { logger } from './logging';
+import { getErrorMessage, getErrorStack } from './pure/helpers-pure';
 import { telemetryListener } from './telemetry';
 
 export class UserCancellationException extends Error {
@@ -121,8 +122,9 @@ export function commandRunner(
     try {
       return await task(...args);
     } catch (e) {
-      error = e;
-      const errorMessage = `${e.message || e} (${commandId})`;
+      const errorMessage = `${getErrorMessage(e) || e} (${commandId})`;
+      error = e instanceof Error ? e : new Error(errorMessage);
+      const errorStack = getErrorStack(e);
       if (e instanceof UserCancellationException) {
         // User has cancelled this action manually
         if (e.silent) {
@@ -132,8 +134,8 @@ export function commandRunner(
         }
       } else {
         // Include the full stack in the error log only.
-        const fullMessage = e.stack
-          ? `${errorMessage}\n${e.stack}`
+        const fullMessage = errorStack
+          ? `${errorMessage}\n${errorStack}`
           : errorMessage;
         void showAndLogErrorMessage(errorMessage, {
           fullMessage
@@ -160,7 +162,8 @@ export function commandRunner(
 export function commandRunnerWithProgress<R>(
   commandId: string,
   task: ProgressTask<R>,
-  progressOptions: Partial<ProgressOptions>
+  progressOptions: Partial<ProgressOptions>,
+  outputLogger = logger
 ): Disposable {
   return commands.registerCommand(commandId, async (...args: any[]) => {
     const startTime = Date.now();
@@ -172,21 +175,23 @@ export function commandRunnerWithProgress<R>(
     try {
       return await withProgress(progressOptionsWithDefaults, task, ...args);
     } catch (e) {
-      error = e;
-      const errorMessage = `${e.message || e} (${commandId})`;
+      const errorMessage = `${getErrorMessage(e) || e} (${commandId})`;
+      error = e instanceof Error ? e : new Error(errorMessage);
+      const errorStack = getErrorStack(e);
       if (e instanceof UserCancellationException) {
         // User has cancelled this action manually
         if (e.silent) {
-          void logger.log(errorMessage);
+          void outputLogger.log(errorMessage);
         } else {
-          void showAndLogWarningMessage(errorMessage);
+          void showAndLogWarningMessage(errorMessage, { outputLogger });
         }
       } else {
         // Include the full stack in the error log only.
-        const fullMessage = e.stack
-          ? `${errorMessage}\n${e.stack}`
+        const fullMessage = errorStack
+          ? `${errorMessage}\n${errorStack}`
           : errorMessage;
         void showAndLogErrorMessage(errorMessage, {
+          outputLogger,
           fullMessage
         });
       }

extensions/ql-vscode/src/compare/compare-interface.ts

@@ -8,8 +8,7 @@ import {
 } from 'vscode';
 import * as path from 'path';
 
-import { tmpDir } from '../run-queries';
-import { CompletedQuery } from '../query-results';
+import { tmpDir } from '../helpers';
 import {
   FromCompareViewMessage,
   ToCompareViewMessage,
@@ -21,10 +20,12 @@ import { DatabaseManager } from '../databases';
 import { getHtmlForWebview, jumpToLocation } from '../interface-utils';
 import { transformBqrsResultSet, RawResultSet, BQRSInfo } from '../pure/bqrs-cli-types';
 import resultsDiff from './resultsDiff';
+import { CompletedLocalQueryInfo } from '../query-results';
+import { getErrorMessage } from '../pure/helpers-pure';
 
 interface ComparePair {
-  from: CompletedQuery;
-  to: CompletedQuery;
+  from: CompletedLocalQueryInfo;
+  to: CompletedLocalQueryInfo;
 }
 
 export class CompareInterfaceManager extends DisposableObject {
@@ -39,15 +40,15 @@ export class CompareInterfaceManager extends DisposableObject {
     private cliServer: CodeQLCliServer,
     private logger: Logger,
     private showQueryResultsCallback: (
-      item: CompletedQuery
+      item: CompletedLocalQueryInfo
     ) => Promise<void>
   ) {
     super();
   }
 
   async showResults(
-    from: CompletedQuery,
-    to: CompletedQuery,
+    from: CompletedLocalQueryInfo,
+    to: CompletedLocalQueryInfo,
     selectedResultSetName?: string
   ) {
     this.comparePair = { from, to };
@@ -70,7 +71,7 @@ export class CompareInterfaceManager extends DisposableObject {
       try {
         rows = this.compareResults(fromResultSet, toResultSet);
       } catch (e) {
-        message = e.message;
+        message = getErrorMessage(e);
       }
 
       await this.postMessage({
@@ -80,18 +81,14 @@ export class CompareInterfaceManager extends DisposableObject {
             // since we split the description into several rows
             // only run interpolation if the label is user-defined
             // otherwise we will wind up with duplicated rows
-            name: from.options.label
-              ? from.interpolate(from.getLabel())
-              : from.queryName,
-            status: from.statusString,
-            time: from.time,
+            name: from.getShortLabel(),
+            status: from.completedQuery.statusString,
+            time: from.startTime,
           },
           toQuery: {
-            name: to.options.label
-              ? to.interpolate(to.getLabel())
-              : to.queryName,
-            status: to.statusString,
-            time: to.time,
+            name: to.getShortLabel(),
+            status: to.completedQuery.statusString,
+            time: to.startTime,
           },
         },
         columns: fromResultSet.schema.columns,
@@ -99,7 +96,7 @@ export class CompareInterfaceManager extends DisposableObject {
         currentResultSetName: currentResultSetName,
         rows,
         message,
-        datebaseUri: to.database.databaseUri,
+        databaseUri: to.initialInfo.databaseInfo.databaseUri,
       });
     }
   }
@@ -121,33 +118,34 @@ export class CompareInterfaceManager extends DisposableObject {
           ],
         }
       ));
-      this.panel.onDidDispose(
+      this.push(this.panel.onDidDispose(
         () => {
           this.panel = undefined;
           this.comparePair = undefined;
         },
         null,
         ctx.subscriptions
-      );
+      ));
 
       const scriptPathOnDisk = Uri.file(
         ctx.asAbsolutePath('out/compareView.js')
       );
 
       const stylesheetPathOnDisk = Uri.file(
-        ctx.asAbsolutePath('out/resultsView.css')
+        ctx.asAbsolutePath('out/view/resultsView.css')
       );
 
       panel.webview.html = getHtmlForWebview(
         panel.webview,
         scriptPathOnDisk,
-        stylesheetPathOnDisk
+        [stylesheetPathOnDisk],
+        false
       );
-      panel.webview.onDidReceiveMessage(
+      this.push(panel.webview.onDidReceiveMessage(
         async (e) => this.handleMsgFromView(e),
         undefined,
         ctx.subscriptions
-      );
+      ));
     }
     return this.panel;
   }
@@ -191,15 +189,15 @@ export class CompareInterfaceManager extends DisposableObject {
   }
 
   private async findCommonResultSetNames(
-    from: CompletedQuery,
-    to: CompletedQuery,
+    from: CompletedLocalQueryInfo,
+    to: CompletedLocalQueryInfo,
     selectedResultSetName: string | undefined
   ): Promise<[string[], string, RawResultSet, RawResultSet]> {
     const fromSchemas = await this.cliServer.bqrsInfo(
-      from.query.resultsPaths.resultsPath
+      from.completedQuery.query.resultsPaths.resultsPath
     );
     const toSchemas = await this.cliServer.bqrsInfo(
-      to.query.resultsPaths.resultsPath
+      to.completedQuery.query.resultsPaths.resultsPath
     );
     const fromSchemaNames = fromSchemas['result-sets'].map(
       (schema) => schema.name
@@ -215,12 +213,12 @@ export class CompareInterfaceManager extends DisposableObject {
     const fromResultSet = await this.getResultSet(
       fromSchemas,
       currentResultSetName,
-      from.query.resultsPaths.resultsPath
+      from.completedQuery.query.resultsPaths.resultsPath
     );
     const toResultSet = await this.getResultSet(
       toSchemas,
       currentResultSetName,
-      to.query.resultsPaths.resultsPath
+      to.completedQuery.query.resultsPaths.resultsPath
     );
     return [
       commonResultSetNames,

extensions/ql-vscode/src/compare/view/Compare.tsx

@@ -17,7 +17,7 @@ const emptyComparison: SetComparisonsMessage = {
   columns: [],
   commonResultSetNames: [],
   currentResultSetName: '',
-  datebaseUri: '',
+  databaseUri: '',
   message: 'Empty comparison'
 };
 

extensions/ql-vscode/src/compare/view/CompareTable.tsx

@@ -76,7 +76,7 @@ export default function CompareTable(props: Props) {
                 schemaName={comparison.currentResultSetName}
                 preventSort={true}
               />
-              {createRows(rows.from, comparison.datebaseUri)}
+              {createRows(rows.from, comparison.databaseUri)}
             </table>
           </td>
           <td>
@@ -86,7 +86,7 @@ export default function CompareTable(props: Props) {
                 schemaName={comparison.currentResultSetName}
                 preventSort={true}
               />
-              {createRows(rows.to, comparison.datebaseUri)}
+              {createRows(rows.to, comparison.databaseUri)}
             </table>
           </td>
         </tr>

extensions/ql-vscode/src/compare/view/tsconfig.json

@@ -4,10 +4,7 @@
     "moduleResolution": "node",
     "target": "es6",
     "outDir": "out",
-    "lib": [
-      "es6",
-      "dom"
-    ],
+    "lib": ["ES2021", "dom"],
     "jsx": "react",
     "sourceMap": true,
     "rootDir": "..",
@@ -17,7 +14,5 @@
     "noFallthroughCasesInSwitch": true,
     "experimentalDecorators": true
   },
-  "exclude": [
-    "node_modules"
-  ]
-}
+  "exclude": ["node_modules"]
+}

extensions/ql-vscode/src/config.ts

@@ -2,6 +2,7 @@ import { DisposableObject } from './pure/disposable-object';
 import { workspace, Event, EventEmitter, ConfigurationChangeEvent, ConfigurationTarget } from 'vscode';
 import { DistributionManager } from './distribution';
 import { logger } from './logging';
+import { ONE_DAY_IN_MS } from './pure/helpers-pure';
 
 /** Helper class to look up a labelled (and possibly nested) setting. */
 export class Setting {
@@ -54,8 +55,11 @@ const DISTRIBUTION_SETTING = new Setting('cli', ROOT_SETTING);
 export const CUSTOM_CODEQL_PATH_SETTING = new Setting('executablePath', DISTRIBUTION_SETTING);
 const INCLUDE_PRERELEASE_SETTING = new Setting('includePrerelease', DISTRIBUTION_SETTING);
 const PERSONAL_ACCESS_TOKEN_SETTING = new Setting('personalAccessToken', DISTRIBUTION_SETTING);
+
+// Query History configuration
 const QUERY_HISTORY_SETTING = new Setting('queryHistory', ROOT_SETTING);
 const QUERY_HISTORY_FORMAT_SETTING = new Setting('format', QUERY_HISTORY_SETTING);
+const QUERY_HISTORY_TTL = new Setting('format', QUERY_HISTORY_SETTING);
 
 /** When these settings change, the distribution should be updated. */
 const DISTRIBUTION_CHANGE_SETTINGS = [CUSTOM_CODEQL_PATH_SETTING, INCLUDE_PRERELEASE_SETTING, PERSONAL_ACCESS_TOKEN_SETTING];
@@ -71,7 +75,6 @@ export interface DistributionConfig {
 }
 
 // Query server configuration
-
 const RUNNING_QUERIES_SETTING = new Setting('runningQueries', ROOT_SETTING);
 const NUMBER_OF_THREADS_SETTING = new Setting('numberOfThreads', RUNNING_QUERIES_SETTING);
 const SAVE_CACHE_SETTING = new Setting('saveCache', RUNNING_QUERIES_SETTING);
@@ -91,7 +94,10 @@ export const PAGE_SIZE = new Setting('pageSize', RESULTS_DISPLAY_SETTING);
 const CUSTOM_LOG_DIRECTORY_SETTING = new Setting('customLogDirectory', RUNNING_QUERIES_SETTING);
 
 /** When these settings change, the running query server should be restarted. */
-const QUERY_SERVER_RESTARTING_SETTINGS = [NUMBER_OF_THREADS_SETTING, SAVE_CACHE_SETTING, CACHE_SIZE_SETTING, MEMORY_SETTING, DEBUG_SETTING, CUSTOM_LOG_DIRECTORY_SETTING];
+const QUERY_SERVER_RESTARTING_SETTINGS = [
+  NUMBER_OF_THREADS_SETTING, SAVE_CACHE_SETTING, CACHE_SIZE_SETTING, MEMORY_SETTING,
+  DEBUG_SETTING, CUSTOM_LOG_DIRECTORY_SETTING,
+];
 
 export interface QueryServerConfig {
   codeQlPath: string;
@@ -106,10 +112,11 @@ export interface QueryServerConfig {
 }
 
 /** When these settings change, the query history should be refreshed. */
-const QUERY_HISTORY_SETTINGS = [QUERY_HISTORY_FORMAT_SETTING];
+const QUERY_HISTORY_SETTINGS = [QUERY_HISTORY_FORMAT_SETTING, QUERY_HISTORY_TTL];
 
 export interface QueryHistoryConfig {
   format: string;
+  ttlInMillis: number;
   onDidChangeConfiguration: Event<void>;
 }
 
@@ -251,6 +258,13 @@ export class QueryHistoryConfigListener extends ConfigListener implements QueryH
   public get format(): string {
     return QUERY_HISTORY_FORMAT_SETTING.getValue<string>();
   }
+
+  /**
+   * The configuration value is in days, but return the value in milliseconds to make it easier to use.
+   */
+  public get ttlInMillis(): number {
+    return (QUERY_HISTORY_TTL.getValue<number>() || 30) * ONE_DAY_IN_MS;
+  }
 }
 
 export class CliConfigListener extends ConfigListener implements CliConfig {
@@ -275,6 +289,16 @@ export class CliConfigListener extends ConfigListener implements CliConfig {
   }
 }
 
+/**
+ * Whether to enable CodeLens for the 'Quick Evaluation' command.
+ */
+const QUICK_EVAL_CODELENS_SETTING = new Setting('quickEvalCodelens', RUNNING_QUERIES_SETTING);
+
+export function isQuickEvalCodelensEnabled() {
+  return QUICK_EVAL_CODELENS_SETTING.getValue<boolean>();
+}
+
+
 // Enable experimental features
 
 /**
@@ -299,10 +323,10 @@ export function isCanary() {
 export const NO_CACHE_AST_VIEWER = new Setting('disableCache', AST_VIEWER_SETTING);
 
 // Settings for remote queries
-const REMOTE_QUERIES_SETTING = new Setting('remoteQueries', ROOT_SETTING);
+const REMOTE_QUERIES_SETTING = new Setting('variantAnalysis', ROOT_SETTING);
 
 /**
- * Lists of GitHub repositories that you want to query remotely via the "Run Remote query" command.
+ * Lists of GitHub repositories that you want to query remotely via the "Run Variant Analysis" command.
  * Note: This command is only available for internal users.
  *
  * This setting should be a JSON object where each key is a user-specified name (string),
@@ -319,7 +343,7 @@ export async function setRemoteRepositoryLists(lists: Record<string, string[]> |
 }
 
 /**
- * The name of the "controller" repository that you want to use with the "Run Remote query" command.
+ * The name of the "controller" repository that you want to use with the "Run Variant Analysis" command.
  * Note: This command is only available for internal users.
  *
  * This setting should be a GitHub repository of the form `<owner>/<repo>`.
@@ -335,13 +359,12 @@ export async function setRemoteControllerRepo(repo: string | undefined) {
 }
 
 /**
- * Whether to insecurely load ML models from CodeQL packs.
- *
- * This setting is for internal users only.
+ * The branch of "github/codeql-variant-analysis-action" to use with the "Run Variant Analysis" command.
+ * Default value is "main".
+ * Note: This command is only available for internal users.
  */
-const SHOULD_INSECURELY_LOAD_MODELS_FROM_PACKS =
-  new Setting('shouldInsecurelyLoadModelsFromPacks', RUNNING_QUERIES_SETTING);
+const ACTION_BRANCH = new Setting('actionBranch', REMOTE_QUERIES_SETTING);
 
-export function shouldInsecurelyLoadMlModelsFromPacks(): boolean {
-  return SHOULD_INSECURELY_LOAD_MODELS_FROM_PACKS.getValue<boolean>();
+export function getActionBranch(): string {
+  return ACTION_BRANCH.getValue<string>() || 'main';
 }

extensions/ql-vscode/src/contextual/astBuilder.ts

@@ -4,6 +4,7 @@ import { DecodedBqrsChunk, BqrsId, EntityValue } from '../pure/bqrs-cli-types';
 import { DatabaseItem } from '../databases';
 import { ChildAstItem, AstItem } from '../astViewer';
 import fileRangeFromURI from './fileRangeFromURI';
+import { Uri } from 'vscode';
 
 /**
  * A class that wraps a tree of QL results from a query that
@@ -17,7 +18,7 @@ export default class AstBuilder {
     queryResults: QueryWithResults,
     private cli: CodeQLCliServer,
     public db: DatabaseItem,
-    public fileName: string
+    public fileName: Uri
   ) {
     this.bqrsPath = queryResults.query.resultsPaths.resultsPath;
   }

extensions/ql-vscode/src/contextual/keyType.ts

@@ -2,6 +2,7 @@ export enum KeyType {
   DefinitionQuery = 'DefinitionQuery',
   ReferenceQuery = 'ReferenceQuery',
   PrintAstQuery = 'PrintAstQuery',
+  PrintCfgQuery = 'PrintCfgQuery',
 }
 
 export function tagOfKeyType(keyType: KeyType): string {
@@ -12,6 +13,8 @@ export function tagOfKeyType(keyType: KeyType): string {
       return 'ide-contextual-queries/local-references';
     case KeyType.PrintAstQuery:
       return 'ide-contextual-queries/print-ast';
+    case KeyType.PrintCfgQuery:
+      return 'ide-contextual-queries/print-cfg';
   }
 }
 
@@ -23,6 +26,8 @@ export function nameOfKeyType(keyType: KeyType): string {
       return 'references';
     case KeyType.PrintAstQuery:
       return 'print AST';
+    case KeyType.PrintCfgQuery:
+      return 'print CFG';
   }
 }
 
@@ -32,6 +37,7 @@ export function kindOfKeyType(keyType: KeyType): string {
     case KeyType.ReferenceQuery:
       return 'definitions';
     case KeyType.PrintAstQuery:
+    case KeyType.PrintCfgQuery:
       return 'graph';
   }
 }

extensions/ql-vscode/src/contextual/locationFinder.ts

@@ -1,5 +1,3 @@
-import * as vscode from 'vscode';
-
 import { decodeSourceArchiveUri, encodeArchiveBasePath } from '../archive-filesystem-provider';
 import { ColumnKindCode, EntityValue, getResultSetSchema, ResultSetSchema } from '../pure/bqrs-cli-types';
 import { CodeQLCliServer } from '../cli';
@@ -7,16 +5,17 @@ import { DatabaseManager, DatabaseItem } from '../databases';
 import fileRangeFromURI from './fileRangeFromURI';
 import * as messages from '../pure/messages';
 import { QueryServerClient } from '../queryserver-client';
-import { QueryWithResults, compileAndRunQueryAgainstDatabase } from '../run-queries';
+import { QueryWithResults, compileAndRunQueryAgainstDatabase, createInitialQueryInfo } from '../run-queries';
 import { ProgressCallback } from '../commandRunner';
 import { KeyType } from './keyType';
 import { qlpackOfDatabase, resolveQueries } from './queryResolver';
+import { CancellationToken, LocationLink, Uri } from 'vscode';
 
 export const SELECT_QUERY_NAME = '#select';
 export const TEMPLATE_NAME = 'selectedSourceFile';
 
-export interface FullLocationLink extends vscode.LocationLink {
-  originUri: vscode.Uri;
+export interface FullLocationLink extends LocationLink {
+  originUri: Uri;
 }
 
 /**
@@ -29,6 +28,7 @@ export interface FullLocationLink extends vscode.LocationLink {
  * @param dbm The database manager
  * @param uriString The selected source file and location
  * @param keyType The contextual query type to run
+ * @param queryStorageDir The directory to store the query results
  * @param progress A progress callback
  * @param token A CancellationToken
  * @param filter A function that will filter extraneous results
@@ -39,11 +39,12 @@ export async function getLocationsForUriString(
   dbm: DatabaseManager,
   uriString: string,
   keyType: KeyType,
+  queryStorageDir: string,
   progress: ProgressCallback,
-  token: vscode.CancellationToken,
+  token: CancellationToken,
   filter: (src: string, dest: string) => boolean
 ): Promise<FullLocationLink[]> {
-  const uri = decodeSourceArchiveUri(vscode.Uri.parse(uriString, true));
+  const uri = decodeSourceArchiveUri(Uri.parse(uriString, true));
   const sourceArchiveUri = encodeArchiveBasePath(uri.sourceArchiveZipPath);
 
   const db = dbm.findDatabaseItemBySourceArchive(sourceArchiveUri);
@@ -56,12 +57,21 @@ export async function getLocationsForUriString(
 
   const links: FullLocationLink[] = [];
   for (const query of await resolveQueries(cli, qlpack, keyType)) {
+    const initialInfo = await createInitialQueryInfo(
+      Uri.file(query),
+      {
+        name: db.name,
+        databaseUri: db.databaseUri.toString(),
+      },
+      false
+    );
+
     const results = await compileAndRunQueryAgainstDatabase(
       cli,
       qs,
       db,
-      false,
-      vscode.Uri.file(query),
+      initialInfo,
+      queryStorageDir,
       progress,
       token,
       templates

extensions/ql-vscode/src/contextual/templateProvider.ts

@@ -18,7 +18,7 @@ import { CachedOperation } from '../helpers';
 import { ProgressCallback, withProgress } from '../commandRunner';
 import * as messages from '../pure/messages';
 import { QueryServerClient } from '../queryserver-client';
-import { compileAndRunQueryAgainstDatabase, QueryWithResults } from '../run-queries';
+import { compileAndRunQueryAgainstDatabase, createInitialQueryInfo, QueryWithResults } from '../run-queries';
 import AstBuilder from './astBuilder';
 import {
   KeyType,
@@ -41,6 +41,7 @@ export class TemplateQueryDefinitionProvider implements DefinitionProvider {
     private cli: CodeQLCliServer,
     private qs: QueryServerClient,
     private dbm: DatabaseManager,
+    private queryStorageDir: string,
   ) {
     this.cache = new CachedOperation<LocationLink[]>(this.getDefinitions.bind(this));
   }
@@ -68,6 +69,7 @@ export class TemplateQueryDefinitionProvider implements DefinitionProvider {
         this.dbm,
         uriString,
         KeyType.DefinitionQuery,
+        this.queryStorageDir,
         progress,
         token,
         (src, _dest) => src === uriString
@@ -83,6 +85,7 @@ export class TemplateQueryReferenceProvider implements ReferenceProvider {
     private cli: CodeQLCliServer,
     private qs: QueryServerClient,
     private dbm: DatabaseManager,
+    private queryStorageDir: string,
   ) {
     this.cache = new CachedOperation<FullLocationLink[]>(this.getReferences.bind(this));
   }
@@ -115,6 +118,7 @@ export class TemplateQueryReferenceProvider implements ReferenceProvider {
         this.dbm,
         uriString,
         KeyType.DefinitionQuery,
+        this.queryStorageDir,
         progress,
         token,
         (src, _dest) => src === uriString
@@ -123,33 +127,39 @@ export class TemplateQueryReferenceProvider implements ReferenceProvider {
   }
 }
 
+type QueryWithDb = {
+  query: QueryWithResults,
+  dbUri: Uri
+};
+
 export class TemplatePrintAstProvider {
-  private cache: CachedOperation<QueryWithResults>;
+  private cache: CachedOperation<QueryWithDb>;
 
   constructor(
     private cli: CodeQLCliServer,
     private qs: QueryServerClient,
     private dbm: DatabaseManager,
+    private queryStorageDir: string,
   ) {
-    this.cache = new CachedOperation<QueryWithResults>(this.getAst.bind(this));
+    this.cache = new CachedOperation<QueryWithDb>(this.getAst.bind(this));
   }
 
   async provideAst(
     progress: ProgressCallback,
     token: CancellationToken,
-    document?: TextDocument
+    fileUri?: Uri
   ): Promise<AstBuilder | undefined> {
-    if (!document) {
+    if (!fileUri) {
       throw new Error('Cannot view the AST. Please select a valid source file inside a CodeQL database.');
     }
-    const queryResults = this.shouldCache()
-      ? await this.cache.get(document.uri.toString(), progress, token)
-      : await this.getAst(document.uri.toString(), progress, token);
+    const { query, dbUri } = this.shouldCache()
+      ? await this.cache.get(fileUri.toString(), progress, token)
+      : await this.getAst(fileUri.toString(), progress, token);
 
     return new AstBuilder(
-      queryResults, this.cli,
-      this.dbm.findDatabaseItem(Uri.parse(queryResults.database.databaseUri!, true))!,
-      document.fileName
+      query, this.cli,
+      this.dbm.findDatabaseItem(dbUri)!,
+      fileUri,
     );
   }
 
@@ -161,7 +171,7 @@ export class TemplatePrintAstProvider {
     uriString: string,
     progress: ProgressCallback,
     token: CancellationToken
-  ): Promise<QueryWithResults> {
+  ): Promise<QueryWithDb> {
     const uri = Uri.parse(uriString, true);
     if (uri.scheme !== zipArchiveScheme) {
       throw new Error('Cannot view the AST. Please select a valid source file inside a CodeQL database.');
@@ -195,15 +205,86 @@ export class TemplatePrintAstProvider {
       }
     };
 
-    return await compileAndRunQueryAgainstDatabase(
-      this.cli,
-      this.qs,
-      db,
-      false,
+    const initialInfo = await createInitialQueryInfo(
       Uri.file(query),
-      progress,
-      token,
-      templates
+      {
+        name: db.name,
+        databaseUri: db.databaseUri.toString(),
+      },
+      false
     );
+
+    return {
+      query: await compileAndRunQueryAgainstDatabase(
+        this.cli,
+        this.qs,
+        db,
+        initialInfo,
+        this.queryStorageDir,
+        progress,
+        token,
+        templates
+      ),
+      dbUri: db.databaseUri
+    };
+  }
+}
+
+export class TemplatePrintCfgProvider {
+  private cache: CachedOperation<[Uri, messages.TemplateDefinitions] | undefined>;
+
+  constructor(
+    private cli: CodeQLCliServer,
+    private dbm: DatabaseManager,
+  ) {
+    this.cache = new CachedOperation<[Uri, messages.TemplateDefinitions] | undefined>(this.getCfgUri.bind(this));
+  }
+
+  async provideCfgUri(document?: TextDocument): Promise<[Uri, messages.TemplateDefinitions] | undefined> {
+    if (!document) {
+      return;
+    }
+    return await this.cache.get(document.uri.toString());
+  }
+
+  private async getCfgUri(uriString: string): Promise<[Uri, messages.TemplateDefinitions]> {
+    const uri = Uri.parse(uriString, true);
+    if (uri.scheme !== zipArchiveScheme) {
+      throw new Error('CFG Viewing is only available for databases with zipped source archives.');
+    }
+
+    const zippedArchive = decodeSourceArchiveUri(uri);
+    const sourceArchiveUri = encodeArchiveBasePath(zippedArchive.sourceArchiveZipPath);
+    const db = this.dbm.findDatabaseItemBySourceArchive(sourceArchiveUri);
+
+    if (!db) {
+      throw new Error('Can\'t infer database from the provided source.');
+    }
+
+    const qlpack = await qlpackOfDatabase(this.cli, db);
+    if (!qlpack) {
+      throw new Error('Can\'t infer qlpack from database source archive.');
+    }
+    const queries = await resolveQueries(this.cli, qlpack, KeyType.PrintCfgQuery);
+    if (queries.length > 1) {
+      throw new Error(`Found multiple Print CFG queries. Can't continue. Make sure there is exacly one query with the tag ${KeyType.PrintCfgQuery}`);
+    }
+    if (queries.length === 0) {
+      throw new Error(`Did not find any Print CFG queries. Can't continue. Make sure there is exacly one query with the tag ${KeyType.PrintCfgQuery}`);
+    }
+
+    const queryUri = Uri.file(queries[0]);
+
+    const templates: messages.TemplateDefinitions = {
+      [TEMPLATE_NAME]: {
+        values: {
+          tuples: [[{
+            stringValue: zippedArchive.pathWithinSourceArchive
+          }]]
+        }
+      }
+    };
+
+    return [queryUri, templates];
   }
 }

extensions/ql-vscode/src/databaseFetcher.ts

@@ -20,7 +20,9 @@ import {
   ProgressCallback,
 } from './commandRunner';
 import { logger } from './logging';
-import { tmpDir } from './run-queries';
+import { tmpDir } from './helpers';
+import { Credentials } from './authentication';
+import { REPO_REGEX, getErrorMessage } from './pure/helpers-pure';
 
 /**
  * Prompts a user to fetch a database from a remote location. Database is assumed to be an archive file.
@@ -46,6 +48,7 @@ export async function promptImportInternetDatabase(
 
   const item = await databaseArchiveFetcher(
     databaseUrl,
+    {},
     databaseManager,
     storagePath,
     progress,
@@ -61,6 +64,79 @@ export async function promptImportInternetDatabase(
 
 }
 
+/**
+ * Prompts a user to fetch a database from GitHub.
+ * User enters a GitHub repository and then the user is asked which language
+ * to download (if there is more than one)
+ *
+ * @param databaseManager the DatabaseManager
+ * @param storagePath where to store the unzipped database.
+ */
+export async function promptImportGithubDatabase(
+  databaseManager: DatabaseManager,
+  storagePath: string,
+  credentials: Credentials,
+  progress: ProgressCallback,
+  token: CancellationToken,
+  cli?: CodeQLCliServer
+): Promise<DatabaseItem | undefined> {
+  progress({
+    message: 'Choose repository',
+    step: 1,
+    maxStep: 2
+  });
+  const githubRepo = await window.showInputBox({
+    title: 'Enter a GitHub repository URL or "name with owner" (e.g. https://github.com/github/codeql or github/codeql)',
+    placeHolder: 'https://github.com/<owner>/<repo> or <owner>/<repo>',
+    ignoreFocusOut: true,
+  });
+  if (!githubRepo) {
+    return;
+  }
+
+  if (!looksLikeGithubRepo(githubRepo)) {
+    throw new Error(`Invalid GitHub repository: ${githubRepo}`);
+  }
+
+  const databaseUrl = await convertGithubNwoToDatabaseUrl(githubRepo, credentials, progress);
+  if (!databaseUrl) {
+    return;
+  }
+
+  const octokit = await credentials.getOctokit();
+  /**
+   * The 'token' property of the token object returned by `octokit.auth()`.
+   * The object is undocumented, but looks something like this:
+   * {
+   *   token: 'xxxx',
+   *   tokenType: 'oauth',
+   *   type: 'token',
+   * }
+   * We only need the actual token string.
+   */
+  const octokitToken = (await octokit.auth() as { token: string })?.token;
+  if (!octokitToken) {
+    // Just print a generic error message for now. Ideally we could show more debugging info, like the
+    // octokit object, but that would expose a user token.
+    throw new Error('Unable to get GitHub token.');
+  }
+  const item = await databaseArchiveFetcher(
+    databaseUrl,
+    { 'Accept': 'application/zip', 'Authorization': `Bearer ${octokitToken}` },
+    databaseManager,
+    storagePath,
+    progress,
+    token,
+    cli
+  );
+  if (item) {
+    await commands.executeCommand('codeQLDatabases.focus');
+    void showAndLogInformationMessage('Database downloaded and imported successfully.');
+    return item;
+  }
+  return;
+}
+
 /**
  * Prompts a user to fetch a database from lgtm.
  * User enters a project url and then the user is asked which language
@@ -90,10 +166,11 @@ export async function promptImportLgtmDatabase(
   }
 
   if (looksLikeLgtmUrl(lgtmUrl)) {
-    const databaseUrl = await convertToDatabaseUrl(lgtmUrl, progress);
+    const databaseUrl = await convertLgtmUrlToDatabaseUrl(lgtmUrl, progress);
     if (databaseUrl) {
       const item = await databaseArchiveFetcher(
         databaseUrl,
+        {},
         databaseManager,
         storagePath,
         progress,
@@ -140,6 +217,7 @@ export async function importArchiveDatabase(
   try {
     const item = await databaseArchiveFetcher(
       databaseUrl,
+      {},
       databaseManager,
       storagePath,
       progress,
@@ -152,7 +230,7 @@ export async function importArchiveDatabase(
     }
     return item;
   } catch (e) {
-    if (e.message.includes('unexpected end of file')) {
+    if (getErrorMessage(e).includes('unexpected end of file')) {
       throw new Error('Database is corrupt or too large. Try unzipping outside of VS Code and importing the unzipped folder instead.');
     } else {
       // delegate
@@ -166,6 +244,7 @@ export async function importArchiveDatabase(
  * or in the local filesystem.
  *
  * @param databaseUrl URL from which to grab the database
+ * @param requestHeaders Headers to send with the request
  * @param databaseManager the DatabaseManager
  * @param storagePath where to store the unzipped database.
  * @param progress callback to send progress messages to
@@ -173,6 +252,7 @@ export async function importArchiveDatabase(
  */
 async function databaseArchiveFetcher(
   databaseUrl: string,
+  requestHeaders: { [key: string]: string },
   databaseManager: DatabaseManager,
   storagePath: string,
   progress: ProgressCallback,
@@ -193,7 +273,7 @@ async function databaseArchiveFetcher(
   if (isFile(databaseUrl)) {
     await readAndUnzip(databaseUrl, unzipPath, cli, progress);
   } else {
-    await fetchAndUnzip(databaseUrl, unzipPath, cli, progress);
+    await fetchAndUnzip(databaseUrl, requestHeaders, unzipPath, cli, progress);
   }
 
   progress({
@@ -292,6 +372,7 @@ async function readAndUnzip(
 
 async function fetchAndUnzip(
   databaseUrl: string,
+  requestHeaders: { [key: string]: string },
   unzipPath: string,
   cli?: CodeQLCliServer,
   progress?: ProgressCallback
@@ -310,7 +391,10 @@ async function fetchAndUnzip(
     step: 1,
   });
 
-  const response = await checkForFailingResponse(await fetch(databaseUrl), 'Error downloading database');
+  const response = await checkForFailingResponse(
+    await fetch(databaseUrl, { headers: requestHeaders }),
+    'Error downloading database'
+  );
   const archiveFileStream = fs.createWriteStream(archivePath);
 
   const contentLength = response.headers.get('content-length');
@@ -381,6 +465,81 @@ export async function findDirWithFile(
   return;
 }
 
+/**
+ * The URL pattern is https://github.com/{owner}/{name}/{subpages}.
+ *
+ * This function accepts any URL that matches the pattern above. It also accepts just the
+ * name with owner (NWO): `<owner>/<repo>`.
+ *
+ * @param githubRepo The GitHub repository URL or NWO
+ *
+ * @return true if this looks like a valid GitHub repository URL or NWO
+ */
+export function looksLikeGithubRepo(
+  githubRepo: string | undefined
+): githubRepo is string {
+  if (!githubRepo) {
+    return false;
+  }
+  if (REPO_REGEX.test(githubRepo) || convertGitHubUrlToNwo(githubRepo)) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Converts a GitHub repository URL to the corresponding NWO.
+ * @param githubUrl The GitHub repository URL
+ * @return The corresponding NWO, or undefined if the URL is not valid
+ */
+function convertGitHubUrlToNwo(githubUrl: string): string | undefined {
+  try {
+    const uri = Uri.parse(githubUrl, true);
+    if (uri.scheme !== 'https') {
+      return;
+    }
+    if (uri.authority !== 'github.com' && uri.authority !== 'www.github.com') {
+      return;
+    }
+    const paths = uri.path.split('/').filter((segment: string) => segment);
+    const nwo = `${paths[0]}/${paths[1]}`;
+    if (REPO_REGEX.test(nwo)) {
+      return nwo;
+    }
+    return;
+  } catch (e) {
+    // Ignore the error here, since we catch failures at a higher level.
+    // In particular: returning undefined leads to an error in 'promptImportGithubDatabase'.
+    return;
+  }
+}
+
+export async function convertGithubNwoToDatabaseUrl(
+  githubRepo: string,
+  credentials: Credentials,
+  progress: ProgressCallback): Promise<string | undefined> {
+  try {
+    const nwo = convertGitHubUrlToNwo(githubRepo) || githubRepo;
+    const [owner, repo] = nwo.split('/');
+
+    const octokit = await credentials.getOctokit();
+    const response = await octokit.request('GET /repos/:owner/:repo/code-scanning/codeql/databases', { owner, repo });
+
+    const languages = response.data.map((db: any) => db.language);
+
+    const language = await promptForLanguage(languages, progress);
+    if (!language) {
+      return;
+    }
+
+    return `https://api.github.com/repos/${owner}/${repo}/code-scanning/codeql/databases/${language}`;
+
+  } catch (e) {
+    void logger.log(`Error: ${getErrorMessage(e)}`);
+    throw new Error(`Unable to get database for '${githubRepo}'`);
+  }
+}
+
 /**
  * The URL pattern is https://lgtm.com/projects/{provider}/{org}/{name}/{irrelevant-subpages}.
  * There are several possibilities for the provider: in addition to GitHub.com (g),
@@ -416,7 +575,7 @@ export function looksLikeLgtmUrl(lgtmUrl: string | undefined): lgtmUrl is string
       return false;
     }
 
-    const paths = uri.path.split('/').filter((segment) => segment);
+    const paths = uri.path.split('/').filter((segment: string) => segment);
     return paths.length >= 4 && paths[0] === 'projects';
   } catch (e) {
     return false;
@@ -434,7 +593,7 @@ function convertRawLgtmSlug(maybeSlug: string): string | undefined {
   }
   return;
 }
- 
+
 function extractProjectSlug(lgtmUrl: string): string | undefined {
   // Only matches the '/g/' provider (github)
   const re = new RegExp('https://lgtm.com/projects/g/(.*[^/])');
@@ -446,7 +605,7 @@ function extractProjectSlug(lgtmUrl: string): string | undefined {
 }
 
 // exported for testing
-export async function convertToDatabaseUrl(
+export async function convertLgtmUrlToDatabaseUrl(
   lgtmUrl: string,
   progress: ProgressCallback) {
   try {
@@ -467,7 +626,9 @@ export async function convertToDatabaseUrl(
       }
     }
 
-    const language = await promptForLanguage(projectJson, progress);
+    const languages = projectJson?.languages?.map((lang: { language: string }) => lang.language) || [];
+
+    const language = await promptForLanguage(languages, progress);
     if (!language) {
       return;
     }
@@ -479,7 +640,7 @@ export async function convertToDatabaseUrl(
       language,
     ].join('/')}`;
   } catch (e) {
-    void logger.log(`Error: ${e.message}`);
+    void logger.log(`Error: ${getErrorMessage(e)}`);
     throw new Error(`Invalid LGTM URL: ${lgtmUrl}`);
   }
 }
@@ -487,7 +648,7 @@ export async function convertToDatabaseUrl(
 async function downloadLgtmProjectMetadata(lgtmUrl: string): Promise<any> {
   const uri = Uri.parse(lgtmUrl, true);
   const paths = ['api', 'v1.0'].concat(
-    uri.path.split('/').filter((segment) => segment)
+    uri.path.split('/').filter((segment: string) => segment)
   ).slice(0, 6);
   const projectUrl = `https://lgtm.com/${paths.join('/')}`;
   const projectResponse = await fetch(projectUrl);
@@ -495,7 +656,7 @@ async function downloadLgtmProjectMetadata(lgtmUrl: string): Promise<any> {
 }
 
 async function promptForLanguage(
-  projectJson: any,
+  languages: string[],
   progress: ProgressCallback
 ): Promise<string | undefined> {
   progress({
@@ -503,17 +664,19 @@ async function promptForLanguage(
     step: 2,
     maxStep: 2
   });
-  if (!projectJson?.languages?.length) {
-    return;
+  if (!languages.length) {
+    throw new Error('No databases found');
   }
-  if (projectJson.languages.length === 1) {
-    return projectJson.languages[0].language;
+  if (languages.length === 1) {
+    return languages[0];
   }
 
   return await window.showQuickPick(
-    projectJson.languages.map((lang: { language: string }) => lang.language), {
-    placeHolder: 'Select the database language to download:'
-  }
+    languages,
+    {
+      placeHolder: 'Select the database language to download:',
+      ignoreFocusOut: true,
+    }
   );
 }
 

extensions/ql-vscode/src/databases-ui.ts

@@ -33,11 +33,13 @@ import * as qsClient from './queryserver-client';
 import { upgradeDatabaseExplicit } from './upgrades';
 import {
   importArchiveDatabase,
+  promptImportGithubDatabase,
   promptImportInternetDatabase,
   promptImportLgtmDatabase,
 } from './databaseFetcher';
 import { CancellationToken } from 'vscode';
-import { asyncFilter } from './pure/helpers-pure';
+import { asyncFilter, getErrorMessage } from './pure/helpers-pure';
+import { Credentials } from './authentication';
 
 type ThemableIconPath = { light: string; dark: string } | string;
 
@@ -219,7 +221,8 @@ export class DatabaseUI extends DisposableObject {
     private databaseManager: DatabaseManager,
     private readonly queryServer: qsClient.QueryServerClient | undefined,
     private readonly storagePath: string,
-    readonly extensionPath: string
+    readonly extensionPath: string,
+    private readonly getCredentials: () => Promise<Credentials>
   ) {
     super();
 
@@ -291,6 +294,20 @@ export class DatabaseUI extends DisposableObject {
         }
       )
     );
+    this.push(
+      commandRunnerWithProgress(
+        'codeQLDatabases.chooseDatabaseGithub',
+        async (
+          progress: ProgressCallback,
+          token: CancellationToken
+        ) => {
+          const credentials = await this.getCredentials();
+          await this.handleChooseDatabaseGithub(credentials, progress, token);
+        },
+        {
+          title: 'Adding database from GitHub',
+        })
+    );
     this.push(
       commandRunnerWithProgress(
         'codeQLDatabases.chooseDatabaseLgtm',
@@ -376,7 +393,7 @@ export class DatabaseUI extends DisposableObject {
     try {
       return await this.chooseAndSetDatabase(true, progress, token);
     } catch (e) {
-      void showAndLogErrorMessage(e.message);
+      void showAndLogErrorMessage(getErrorMessage(e));
       return undefined;
     }
   };
@@ -444,7 +461,7 @@ export class DatabaseUI extends DisposableObject {
     try {
       return await this.chooseAndSetDatabase(false, progress, token);
     } catch (e) {
-      void showAndLogErrorMessage(e.message);
+      void showAndLogErrorMessage(getErrorMessage(e));
       return undefined;
     }
   };
@@ -462,6 +479,21 @@ export class DatabaseUI extends DisposableObject {
     );
   };
 
+  handleChooseDatabaseGithub = async (
+    credentials: Credentials,
+    progress: ProgressCallback,
+    token: CancellationToken
+  ): Promise<DatabaseItem | undefined> => {
+    return await promptImportGithubDatabase(
+      this.databaseManager,
+      this.storagePath,
+      credentials,
+      progress,
+      token,
+      this.queryServer?.cliServer
+    );
+  };
+
   handleChooseDatabaseLgtm = async (
     progress: ProgressCallback,
     token: CancellationToken
@@ -590,8 +622,7 @@ export class DatabaseUI extends DisposableObject {
     } catch (e) {
       // rethrow and let this be handled by default error handling.
       throw new Error(
-        `Could not set database to ${path.basename(uri.fsPath)}. Reason: ${e.message
-        }`
+        `Could not set database to ${path.basename(uri.fsPath)}. Reason: ${getErrorMessage(e)}`
       );
     }
   };

extensions/ql-vscode/src/databases.ts

@@ -19,6 +19,7 @@ import { DisposableObject } from './pure/disposable-object';
 import { Logger, logger } from './logging';
 import { registerDatabases, Dataset, deregisterDatabases } from './pure/messages';
 import { QueryServerClient } from './queryserver-client';
+import { getErrorMessage } from './pure/helpers-pure';
 
 /**
  * databases.ts
@@ -359,7 +360,7 @@ export class DatabaseItemImpl implements DatabaseItem {
       }
       catch (e) {
         this._contents = undefined;
-        this._error = e;
+        this._error = e instanceof Error ? e : new Error(String(e));
         throw e;
       }
     }
@@ -726,7 +727,7 @@ export class DatabaseManager extends DisposableObject {
           }
         } catch (e) {
           // database list had an unexpected type - nothing to be done?
-          void showAndLogErrorMessage(`Database list loading failed: ${e.message}`);
+          void showAndLogErrorMessage(`Database list loading failed: ${getErrorMessage(e)}`);
         }
       });
   }
@@ -841,7 +842,7 @@ export class DatabaseManager extends DisposableObject {
       void logger.log('Deleting database from filesystem.');
       fs.remove(item.databaseUri.fsPath).then(
         () => void logger.log(`Deleted '${item.databaseUri.fsPath}'`),
-        e => void logger.log(`Failed to delete '${item.databaseUri.fsPath}'. Reason: ${e.message}`));
+        e => void logger.log(`Failed to delete '${item.databaseUri.fsPath}'. Reason: ${getErrorMessage(e)}`));
     }
 
     // note that we use undefined as the item in order to reset the entire tree

extensions/ql-vscode/src/extension.ts

@@ -1,5 +1,7 @@
+import 'source-map-support/register';
 import {
   CancellationToken,
+  CancellationTokenSource,
   commands,
   Disposable,
   ExtensionContext,
@@ -11,16 +13,21 @@ import {
   window as Window,
   env,
   window,
-  QuickPickItem
+  QuickPickItem,
+  Range,
+  workspace,
+  ProviderResult
 } from 'vscode';
 import { LanguageClient } from 'vscode-languageclient';
 import * as os from 'os';
+import * as fs from 'fs-extra';
 import * as path from 'path';
 import * as tmp from 'tmp-promise';
 import { testExplorerExtensionId, TestHub } from 'vscode-test-adapter-api';
 
 import { AstViewer } from './astViewer';
 import * as archiveFilesystemProvider from './archive-filesystem-provider';
+import QuickEvalCodeLensProvider from './quickEvalCodeLensProvider';
 import { CodeQLCliServer, CliVersionConstraint } from './cli';
 import {
   CliConfigListener,
@@ -36,7 +43,8 @@ import { DatabaseUI } from './databases-ui';
 import {
   TemplateQueryDefinitionProvider,
   TemplateQueryReferenceProvider,
-  TemplatePrintAstProvider
+  TemplatePrintAstProvider,
+  TemplatePrintCfgProvider
 } from './contextual/templateProvider';
 import {
   DEFAULT_DISTRIBUTION_VERSION_RANGE,
@@ -48,17 +56,26 @@ import {
   GithubApiError,
   GithubRateLimitedError
 } from './distribution';
-import * as helpers from './helpers';
-import { assertNever } from './pure/helpers-pure';
+import {
+  findLanguage,
+  tmpDirDisposal,
+  showBinaryChoiceDialog,
+  showAndLogErrorMessage,
+  showAndLogWarningMessage,
+  showAndLogInformationMessage,
+  showInformationMessageWithAction,
+  tmpDir
+} from './helpers';
+import { asError, assertNever, getErrorMessage } from './pure/helpers-pure';
 import { spawnIdeServer } from './ide-server';
 import { InterfaceManager } from './interface';
 import { WebviewReveal } from './interface-utils';
 import { ideServerLogger, logger, queryServerLogger } from './logging';
 import { QueryHistoryManager } from './query-history';
-import { CompletedQuery } from './query-results';
+import { CompletedLocalQueryInfo, LocalQueryInfo } from './query-results';
 import * as qsClient from './queryserver-client';
 import { displayQuickQuery } from './quick-query';
-import { compileAndRunQueryAgainstDatabase, tmpDirDisposal } from './run-queries';
+import { compileAndRunQueryAgainstDatabase, createInitialQueryInfo } from './run-queries';
 import { QLTestAdapterFactory } from './test-adapter';
 import { TestUIService } from './test-ui';
 import { CompareInterfaceManager } from './compare/compare-interface';
@@ -74,7 +91,11 @@ import {
 import { CodeQlStatusBarHandler } from './status-bar';
 
 import { Credentials } from './authentication';
-import { runRemoteQuery } from './run-remote-query';
+import { RemoteQueriesManager } from './remote-queries/remote-queries-manager';
+import { RemoteQueryResult } from './remote-queries/remote-query-result';
+import { URLSearchParams } from 'url';
+import { handleDownloadPacks, handleInstallPackDependencies } from './packaging';
+import { RemoteQueryHistoryItem } from './remote-queries/remote-query-history-item';
 
 /**
  * extension.ts
@@ -155,6 +176,7 @@ export interface CodeQLExtensionInterface {
  * @returns CodeQLExtensionInterface
  */
 export async function activate(ctx: ExtensionContext): Promise<CodeQLExtensionInterface | Record<string, never>> {
+
   void logger.log(`Starting ${extensionId} extension`);
   if (extension === undefined) {
     throw new Error(`Can't find extension ${extensionId}`);
@@ -165,6 +187,9 @@ export async function activate(ctx: ExtensionContext): Promise<CodeQLExtensionIn
   await initializeTelemetry(extension, ctx);
   languageSupport.install();
 
+  const codelensProvider = new QuickEvalCodeLensProvider();
+  languages.registerCodeLensProvider({ scheme: 'file', language: 'ql' }, codelensProvider);
+
   ctx.subscriptions.push(distributionConfigListener);
   const codeQlVersionRange = DEFAULT_DISTRIBUTION_VERSION_RANGE;
   const distributionManager = new DistributionManager(distributionConfigListener, codeQlVersionRange, ctx);
@@ -172,7 +197,7 @@ export async function activate(ctx: ExtensionContext): Promise<CodeQLExtensionIn
   const shouldUpdateOnNextActivationKey = 'shouldUpdateOnNextActivation';
 
   registerErrorStubs([checkForUpdatesCommand], command => (async () => {
-    void helpers.showAndLogErrorMessage(`Can't execute ${command}: waiting to finish loading CodeQL CLI.`);
+    void showAndLogErrorMessage(`Can't execute ${command}: waiting to finish loading CodeQL CLI.`);
   }));
 
   interface DistributionUpdateConfig {
@@ -184,7 +209,7 @@ export async function activate(ctx: ExtensionContext): Promise<CodeQLExtensionIn
   async function installOrUpdateDistributionWithProgressTitle(progressTitle: string, config: DistributionUpdateConfig): Promise<void> {
     const minSecondsSinceLastUpdateCheck = config.isUserInitiated ? 0 : 86400;
     const noUpdatesLoggingFunc = config.shouldDisplayMessageWhenNoUpdates ?
-      helpers.showAndLogInformationMessage : async (message: string) => void logger.log(message);
+      showAndLogInformationMessage : async (message: string) => void logger.log(message);
     const result = await distributionManager.checkForUpdatesToExtensionManagedDistribution(minSecondsSinceLastUpdateCheck);
 
     // We do want to auto update if there is no distribution at all
@@ -206,7 +231,7 @@ export async function activate(ctx: ExtensionContext): Promise<CodeQLExtensionIn
           const updateAvailableMessage = `Version "${result.updatedRelease.name}" of the CodeQL CLI is now available. ` +
             'Do you wish to upgrade?';
           await ctx.globalState.update(shouldUpdateOnNextActivationKey, true);
-          if (await helpers.showInformationMessageWithAction(updateAvailableMessage, 'Restart and Upgrade')) {
+          if (await showInformationMessageWithAction(updateAvailableMessage, 'Restart and Upgrade')) {
             await commands.executeCommand('workbench.action.reloadWindow');
           }
         } else {
@@ -219,7 +244,7 @@ export async function activate(ctx: ExtensionContext): Promise<CodeQLExtensionIn
             distributionManager.installExtensionManagedDistributionRelease(result.updatedRelease, progress));
 
           await ctx.globalState.update(shouldUpdateOnNextActivationKey, false);
-          void helpers.showAndLogInformationMessage(`CodeQL CLI updated to version "${result.updatedRelease.name}".`);
+          void showAndLogInformationMessage(`CodeQL CLI updated to version "${result.updatedRelease.name}".`);
         }
         break;
       default:
@@ -246,7 +271,7 @@ export async function activate(ctx: ExtensionContext): Promise<CodeQLExtensionIn
       // Don't rethrow the exception, because if the config is changed, we want to be able to retry installing
       // or updating the distribution.
       const alertFunction = (codeQlInstalled && !config.isUserInitiated) ?
-        helpers.showAndLogWarningMessage : helpers.showAndLogErrorMessage;
+        showAndLogWarningMessage : showAndLogErrorMessage;
       const taskDescription = (willUpdateCodeQl ? 'update' :
         codeQlInstalled ? 'check for updates to' : 'install') + ' CodeQL CLI';
 
@@ -281,20 +306,20 @@ export async function activate(ctx: ExtensionContext): Promise<CodeQLExtensionIn
           }
         })();
 
-        void helpers.showAndLogWarningMessage(
+        void showAndLogWarningMessage(
           `The current version of the CodeQL CLI (${result.version.raw}) ` +
           `is incompatible with this extension. ${fixGuidanceMessage}`
         );
         break;
       }
       case FindDistributionResultKind.UnknownCompatibilityDistribution:
-        void helpers.showAndLogWarningMessage(
+        void showAndLogWarningMessage(
           'Compatibility with the configured CodeQL CLI could not be determined. ' +
           'You may experience problems using the extension.'
         );
         break;
       case FindDistributionResultKind.NoDistribution:
-        void helpers.showAndLogErrorMessage('The CodeQL CLI could not be found.');
+        void showAndLogErrorMessage('The CodeQL CLI could not be found.');
         break;
       default:
         assertNever(result);
@@ -321,7 +346,7 @@ export async function activate(ctx: ExtensionContext): Promise<CodeQLExtensionIn
     } else if (distributionResult.kind === FindDistributionResultKind.NoDistribution) {
       registerErrorStubs([checkForUpdatesCommand], command => async () => {
         const installActionName = 'Install CodeQL CLI';
-        const chosenAction = await void helpers.showAndLogErrorMessage(`Can't execute ${command}: missing CodeQL CLI.`, {
+        const chosenAction = await void showAndLogErrorMessage(`Can't execute ${command}: missing CodeQL CLI.`, {
           items: [installActionName]
         });
         if (chosenAction === installActionName) {
@@ -409,7 +434,8 @@ async function activateWithInstalledDistribution(
     dbm,
     qs,
     getContextStoragePath(ctx),
-    ctx.extensionPath
+    ctx.extensionPath,
+    () => Credentials.initialize(ctx),
   );
   databaseUI.init();
   ctx.subscriptions.push(databaseUI);
@@ -417,17 +443,28 @@ async function activateWithInstalledDistribution(
   void logger.log('Initializing query history manager.');
   const queryHistoryConfigurationListener = new QueryHistoryConfigListener();
   ctx.subscriptions.push(queryHistoryConfigurationListener);
-  const showResults = async (item: CompletedQuery) =>
+  const showResults = async (item: CompletedLocalQueryInfo) =>
     showResultsForCompletedQuery(item, WebviewReveal.Forced);
+  const queryStorageDir = path.join(ctx.globalStorageUri.fsPath, 'queries');
+  await fs.ensureDir(queryStorageDir);
 
+  void logger.log('Initializing query history.');
   const qhm = new QueryHistoryManager(
     qs,
-    ctx.extensionPath,
+    dbm,
+    queryStorageDir,
+    ctx,
     queryHistoryConfigurationListener,
-    showResults,
-    async (from: CompletedQuery, to: CompletedQuery) =>
+    async (from: CompletedLocalQueryInfo, to: CompletedLocalQueryInfo) =>
       showResultsForComparison(from, to),
   );
+
+  qhm.onWillOpenQueryItem(async item => {
+    if (item.t === 'local' && item.completed) {
+      await showResultsForCompletedQuery(item as CompletedLocalQueryInfo, WebviewReveal.Forced);
+    }
+  });
+
   ctx.subscriptions.push(qhm);
   void logger.log('Initializing results panel interface.');
   const intm = new InterfaceManager(ctx, dbm, cliServer, queryServerLogger);
@@ -447,18 +484,18 @@ async function activateWithInstalledDistribution(
   archiveFilesystemProvider.activate(ctx);
 
   async function showResultsForComparison(
-    from: CompletedQuery,
-    to: CompletedQuery
+    from: CompletedLocalQueryInfo,
+    to: CompletedLocalQueryInfo
   ): Promise<void> {
     try {
       await cmpm.showResults(from, to);
     } catch (e) {
-      void helpers.showAndLogErrorMessage(e.message);
+      void showAndLogErrorMessage(getErrorMessage(e));
     }
   }
 
   async function showResultsForCompletedQuery(
-    query: CompletedQuery,
+    query: CompletedLocalQueryInfo,
     forceReveal: WebviewReveal
   ): Promise<void> {
     await intm.showResults(query, forceReveal, false);
@@ -470,6 +507,7 @@ async function activateWithInstalledDistribution(
     progress: ProgressCallback,
     token: CancellationToken,
     databaseItem: DatabaseItem | undefined,
+    range?: Range
   ): Promise<void> {
     if (qs !== undefined) {
       // If no databaseItem is specified, use the database currently selected in the Databases UI
@@ -477,20 +515,43 @@ async function activateWithInstalledDistribution(
       if (databaseItem === undefined) {
         throw new Error('Can\'t run query without a selected database');
       }
-      const info = await compileAndRunQueryAgainstDatabase(
-        cliServer,
-        qs,
-        databaseItem,
-        quickEval,
-        selectedQuery,
-        progress,
-        token
-      );
-      const item = qhm.buildCompletedQuery(info);
-      await showResultsForCompletedQuery(item, WebviewReveal.NotForced);
-      // Note we must update the query history view after showing results as the
-      // display and sorting might depend on the number of results
-      await qhm.addCompletedQuery(item);
+      const databaseInfo = {
+        name: databaseItem.name,
+        databaseUri: databaseItem.databaseUri.toString(),
+      };
+
+      // handle cancellation from the history view.
+      const source = new CancellationTokenSource();
+      token.onCancellationRequested(() => source.cancel());
+
+      const initialInfo = await createInitialQueryInfo(selectedQuery, databaseInfo, quickEval, range);
+      const item = new LocalQueryInfo(initialInfo, queryHistoryConfigurationListener, source);
+      qhm.addQuery(item);
+      try {
+        const completedQueryInfo = await compileAndRunQueryAgainstDatabase(
+          cliServer,
+          qs,
+          databaseItem,
+          initialInfo,
+          queryStorageDir,
+          progress,
+          source.token,
+          undefined,
+          item,
+        );
+        item.completeThisQuery(completedQueryInfo);
+        await showResultsForCompletedQuery(item as CompletedLocalQueryInfo, WebviewReveal.NotForced);
+        // Note we must update the query history view after showing results as the
+        // display and sorting might depend on the number of results
+      } catch (e) {
+        const err = asError(e);
+        err.message = `Error running query: ${err.message}`;
+        item.failureReason = err.message;
+        throw e;
+      } finally {
+        await qhm.refreshTreeView();
+        source.dispose();
+      }
     }
   }
 
@@ -501,23 +562,23 @@ async function activateWithInstalledDistribution(
     selectedQuery: Uri
   ): Promise<void> {
     // selectedQuery is unpopulated when executing through the command palette
-    const pathToQhelp =  selectedQuery ? selectedQuery.fsPath : window.activeTextEditor?.document.uri.fsPath;
-    if(pathToQhelp) {
+    const pathToQhelp = selectedQuery ? selectedQuery.fsPath : window.activeTextEditor?.document.uri.fsPath;
+    if (pathToQhelp) {
       // Create temporary directory
       const relativePathToMd = path.basename(pathToQhelp, '.qhelp') + '.md';
       const absolutePathToMd = path.join(qhelpTmpDir.name, relativePathToMd);
       const uri = Uri.file(absolutePathToMd);
       try {
-        await cliServer.generateQueryHelp(pathToQhelp , absolutePathToMd);
+        await cliServer.generateQueryHelp(pathToQhelp, absolutePathToMd);
         await commands.executeCommand('markdown.showPreviewToSide', uri);
-      } catch (err) {
-        const errorMessage =  err.message.includes('Generating qhelp in markdown') ? (
+      } catch (e) {
+        const errorMessage = getErrorMessage(e).includes('Generating qhelp in markdown') ? (
           `Could not generate markdown from ${pathToQhelp}: Bad formatting in .qhelp file.`
         ) : `Could not open a preview of the generated file (${absolutePathToMd}).`;
-        void helpers.showAndLogErrorMessage(errorMessage, { fullMessage: `${errorMessage}\n${err}` });
+        void showAndLogErrorMessage(errorMessage, { fullMessage: `${errorMessage}\n${e}` });
       }
     }
-    
+
   }
 
   async function openReferencedFile(
@@ -531,7 +592,7 @@ async function activateWithInstalledDistribution(
         const uri = Uri.file(resolved.resolvedPath);
         await window.showTextDocument(uri, { preview: false });
       } else {
-        void helpers.showAndLogErrorMessage(
+        void showAndLogErrorMessage(
           'Jumping from a .qlref file to the .ql file it references is not '
           + 'supported with the CLI version you are running.\n'
           + `Please upgrade your CLI to version ${CliVersionConstraint.CLI_VERSION_WITH_RESOLVE_QLREF
@@ -585,7 +646,10 @@ async function activateWithInstalledDistribution(
       {
         title: 'Running query',
         cancellable: true
-      }
+      },
+
+      // Open the query server logger on error since that's usually where the interesting errors appear.
+      queryServerLogger
     )
   );
   interface DatabaseQuickPickItem extends QuickPickItem {
@@ -601,15 +665,15 @@ async function activateWithInstalledDistribution(
       ) => {
         let filteredDBs = dbm.databaseItems;
         if (filteredDBs.length === 0) {
-          void helpers.showAndLogErrorMessage('No databases found. Please add a suitable database to your workspace.');
+          void showAndLogErrorMessage('No databases found. Please add a suitable database to your workspace.');
           return;
         }
         // If possible, only show databases with the right language (otherwise show all databases).
-        const queryLanguage = await helpers.findLanguage(cliServer, uri);
+        const queryLanguage = await findLanguage(cliServer, uri);
         if (queryLanguage) {
           filteredDBs = dbm.databaseItems.filter(db => db.language === queryLanguage);
           if (filteredDBs.length === 0) {
-            void helpers.showAndLogErrorMessage(`No databases found for language ${queryLanguage}. Please add a suitable database to your workspace.`);
+            void showAndLogErrorMessage(`No databases found for language ${queryLanguage}. Please add a suitable database to your workspace.`);
             return;
           }
         }
@@ -634,19 +698,19 @@ async function activateWithInstalledDistribution(
           for (const item of quickpick) {
             try {
               await compileAndRunQuery(false, uri, progress, token, item.databaseItem);
-            } catch (error) {
+            } catch (e) {
               skippedDatabases.push(item.label);
-              errors.push(error.message);
+              errors.push(getErrorMessage(e));
             }
           }
           if (skippedDatabases.length > 0) {
             void logger.log(`Errors:\n${errors.join('\n')}`);
-            void helpers.showAndLogWarningMessage(
+            void showAndLogWarningMessage(
               `The following databases were skipped:\n${skippedDatabases.join('\n')}.\nFor details about the errors, see the logs.`
             );
           }
         } else {
-          void helpers.showAndLogErrorMessage('No databases selected.');
+          void showAndLogErrorMessage('No databases selected.');
         }
       },
       {
@@ -673,7 +737,7 @@ async function activateWithInstalledDistribution(
         // files may be hidden from the user.
         if (dirFound) {
           const fileString = files.map(file => path.basename(file)).join(', ');
-          const res = await helpers.showBinaryChoiceDialog(
+          const res = await showBinaryChoiceDialog(
             `You are about to run ${files.length} queries: ${fileString} Do you want to continue?`
           );
           if (!res) {
@@ -717,7 +781,11 @@ async function activateWithInstalledDistribution(
       {
         title: 'Running queries',
         cancellable: true
-      })
+      },
+
+      // Open the query server logger on error since that's usually where the interesting errors appear.
+      queryServerLogger
+    )
   );
   ctx.subscriptions.push(
     commandRunnerWithProgress(
@@ -730,8 +798,31 @@ async function activateWithInstalledDistribution(
       {
         title: 'Running query',
         cancellable: true
-      })
+      },
+      // Open the query server logger on error since that's usually where the interesting errors appear.
+      queryServerLogger
+    )
   );
+
+  ctx.subscriptions.push(
+    commandRunnerWithProgress(
+      'codeQL.codeLensQuickEval',
+      async (
+        progress: ProgressCallback,
+        token: CancellationToken,
+        uri: Uri,
+        range: Range
+      ) => await compileAndRunQuery(true, uri, progress, token, undefined, range),
+      {
+        title: 'Running query',
+        cancellable: true
+      },
+
+      // Open the query server logger on error since that's usually where the interesting errors appear.
+      queryServerLogger
+    )
+  );
+
   ctx.subscriptions.push(
     commandRunnerWithProgress('codeQL.quickQuery', async (
       progress: ProgressCallback,
@@ -740,12 +831,27 @@ async function activateWithInstalledDistribution(
       displayQuickQuery(ctx, cliServer, databaseUI, progress, token),
       {
         title: 'Run Quick Query'
-      }
+      },
+
+      // Open the query server logger on error since that's usually where the interesting errors appear.
+      queryServerLogger
     )
   );
-  // The "runRemoteQuery" command is internal-only.
+
+  void logger.log('Initializing remote queries interface.');
+  const rqm = new RemoteQueriesManager(ctx, cliServer, qhm, queryStorageDir, logger);
+  ctx.subscriptions.push(rqm);
+
+  // wait until after the remote queries manager is initialized to read the query history
+  // since the rqm is notified of queries being added.
+  await qhm.readQueryHistory();
+
+
+  registerRemoteQueryTextProvider();
+
+  // The "runVariantAnalysis" command is internal-only.
   ctx.subscriptions.push(
-    commandRunnerWithProgress('codeQL.runRemoteQuery', async (
+    commandRunnerWithProgress('codeQL.runVariantAnalysis', async (
       progress: ProgressCallback,
       token: CancellationToken,
       uri: Uri | undefined
@@ -756,16 +862,34 @@ async function activateWithInstalledDistribution(
           step: 0,
           message: 'Getting credentials'
         });
-        const credentials = await Credentials.initialize(ctx);
-        await runRemoteQuery(cliServer, credentials, uri || window.activeTextEditor?.document.uri, false, progress, token);
+        await rqm.runRemoteQuery(
+          uri || window.activeTextEditor?.document.uri,
+          progress,
+          token
+        );
       } else {
         throw new Error('Remote queries require the CodeQL Canary version to run.');
       }
     }, {
-      title: 'Run Remote Query',
+      title: 'Run Variant Analysis',
       cancellable: true
     })
   );
+
+  ctx.subscriptions.push(
+    commandRunner('codeQL.monitorRemoteQuery', async (
+      queryItem: RemoteQueryHistoryItem,
+      token: CancellationToken) => {
+      await rqm.monitorRemoteQuery(queryItem, token);
+    }));
+
+  ctx.subscriptions.push(
+    commandRunner('codeQL.autoDownloadRemoteQueryResults', async (
+      queryResult: RemoteQueryResult,
+      token: CancellationToken) => {
+      await rqm.autoDownloadRemoteQueryResults(queryResult, token);
+    }));
+
   ctx.subscriptions.push(
     commandRunner(
       'codeQL.openReferencedFile',
@@ -786,7 +910,7 @@ async function activateWithInstalledDistribution(
       token: CancellationToken
     ) => {
       await qs.restartQueryServer(progress, token);
-      void helpers.showAndLogInformationMessage('CodeQL Query Server restarted.', {
+      void showAndLogInformationMessage('CodeQL Query Server restarted.', {
         outputLogger: queryServerLogger,
       });
     }, {
@@ -812,6 +936,18 @@ async function activateWithInstalledDistribution(
       title: 'Choose a Database from an Archive'
     })
   );
+  ctx.subscriptions.push(
+    commandRunnerWithProgress('codeQL.chooseDatabaseGithub', async (
+      progress: ProgressCallback,
+      token: CancellationToken
+    ) => {
+      const credentials = await Credentials.initialize(ctx);
+      await databaseUI.handleChooseDatabaseGithub(credentials, progress, token);
+    },
+      {
+        title: 'Adding database from GitHub',
+      })
+  );
   ctx.subscriptions.push(
     commandRunnerWithProgress('codeQL.chooseDatabaseLgtm', (
       progress: ProgressCallback,
@@ -842,7 +978,7 @@ async function activateWithInstalledDistribution(
     commandRunner('codeQL.copyVersion', async () => {
       const text = `CodeQL extension version: ${extension?.packageJSON.version} \nCodeQL CLI version: ${await getCliVersion()} \nPlatform: ${os.platform()} ${os.arch()}`;
       await env.clipboard.writeText(text);
-      void helpers.showAndLogInformationMessage(text);
+      void showAndLogInformationMessage(text);
     }));
 
   const getCliVersion = async () => {
@@ -864,41 +1000,70 @@ async function activateWithInstalledDistribution(
         const credentials = await Credentials.initialize(ctx);
         const octokit = await credentials.getOctokit();
         const userInfo = await octokit.users.getAuthenticated();
-        void helpers.showAndLogInformationMessage(`Authenticated to GitHub as user: ${userInfo.data.login}`);
+        void showAndLogInformationMessage(`Authenticated to GitHub as user: ${userInfo.data.login}`);
       }
     }));
 
-  commands.registerCommand('codeQL.showLogs', () => {
-    logger.show();
-  });
+  ctx.subscriptions.push(
+    commandRunnerWithProgress('codeQL.installPackDependencies', async (
+      progress: ProgressCallback
+    ) =>
+      await handleInstallPackDependencies(cliServer, progress),
+      {
+        title: 'Installing pack dependencies',
+      }
+    ));
+
+  ctx.subscriptions.push(
+    commandRunnerWithProgress('codeQL.downloadPacks', async (
+      progress: ProgressCallback
+    ) =>
+      await handleDownloadPacks(cliServer, progress),
+      {
+        title: 'Downloading packs',
+      }
+    ));
+
+  ctx.subscriptions.push(
+    commandRunner('codeQL.showLogs', async () => {
+      logger.show();
+    })
+  );
 
   void logger.log('Starting language server.');
   ctx.subscriptions.push(client.start());
 
   // Jump-to-definition and find-references
   void logger.log('Registering jump-to-definition handlers.');
+
+  // Store contextual queries in a temporary folder so that they are removed
+  // when the application closes. There is no need for the user to interact with them.
+  const contextualQueryStorageDir = path.join(tmpDir.name, 'contextual-query-storage');
+  await fs.ensureDir(contextualQueryStorageDir);
   languages.registerDefinitionProvider(
     { scheme: archiveFilesystemProvider.zipArchiveScheme },
-    new TemplateQueryDefinitionProvider(cliServer, qs, dbm)
+    new TemplateQueryDefinitionProvider(cliServer, qs, dbm, contextualQueryStorageDir)
   );
 
   languages.registerReferenceProvider(
     { scheme: archiveFilesystemProvider.zipArchiveScheme },
-    new TemplateQueryReferenceProvider(cliServer, qs, dbm)
+    new TemplateQueryReferenceProvider(cliServer, qs, dbm, contextualQueryStorageDir)
   );
 
   const astViewer = new AstViewer();
-  const templateProvider = new TemplatePrintAstProvider(cliServer, qs, dbm);
+  const printAstTemplateProvider = new TemplatePrintAstProvider(cliServer, qs, dbm, contextualQueryStorageDir);
+  const cfgTemplateProvider = new TemplatePrintCfgProvider(cliServer, dbm);
 
   ctx.subscriptions.push(astViewer);
   ctx.subscriptions.push(commandRunnerWithProgress('codeQL.viewAst', async (
     progress: ProgressCallback,
-    token: CancellationToken
+    token: CancellationToken,
+    selectedFile: Uri
   ) => {
-    const ast = await templateProvider.provideAst(
+    const ast = await printAstTemplateProvider.provideAst(
       progress,
       token,
-      window.activeTextEditor?.document,
+      selectedFile ?? window.activeTextEditor?.document.uri,
     );
     if (ast) {
       astViewer.updateRoots(await ast.getRoots(), ast.db, ast.fileName);
@@ -908,6 +1073,25 @@ async function activateWithInstalledDistribution(
     title: 'Calculate AST'
   }));
 
+  ctx.subscriptions.push(
+    commandRunnerWithProgress(
+      'codeQL.viewCfg',
+      async (
+        progress: ProgressCallback,
+        token: CancellationToken
+      ) => {
+        const res = await cfgTemplateProvider.provideCfgUri(window.activeTextEditor?.document);
+        if (res) {
+          await compileAndRunQuery(false, res[0], progress, token, undefined);
+        }
+      },
+      {
+        title: 'Calculating Control Flow Graph',
+        cancellable: true
+      }
+    )
+  );
+
   await commands.executeCommand('codeQLDatabases.removeOrphanedDatabases');
 
   void logger.log('Successfully finished extension initialization.');
@@ -926,16 +1110,30 @@ async function activateWithInstalledDistribution(
 }
 
 function getContextStoragePath(ctx: ExtensionContext) {
-  return ctx.storagePath || ctx.globalStoragePath;
+  return ctx.storageUri?.fsPath || ctx.globalStorageUri.fsPath;
 }
 
 async function initializeLogging(ctx: ExtensionContext): Promise<void> {
-  const storagePath = getContextStoragePath(ctx);
-  await logger.setLogStoragePath(storagePath, false);
-  await ideServerLogger.setLogStoragePath(storagePath, false);
   ctx.subscriptions.push(logger);
   ctx.subscriptions.push(queryServerLogger);
   ctx.subscriptions.push(ideServerLogger);
 }
 
 const checkForUpdatesCommand = 'codeQL.checkForUpdatesToCLI';
+
+/**
+ * This text provider lets us open readonly files in the editor.
+ *
+ * TODO: Consolidate this with the 'codeql' text provider in query-history.ts.
+ */
+function registerRemoteQueryTextProvider() {
+  workspace.registerTextDocumentContentProvider('remote-query', {
+    provideTextDocumentContent(
+      uri: Uri
+    ): ProviderResult<string> {
+      const params = new URLSearchParams(uri.query);
+
+      return params.get('queryText');
+    },
+  });
+}

extensions/ql-vscode/src/helpers.ts

@@ -2,6 +2,7 @@ import * as fs from 'fs-extra';
 import * as glob from 'glob-promise';
 import * as yaml from 'js-yaml';
 import * as path from 'path';
+import * as tmp from 'tmp-promise';
 import {
   ExtensionContext,
   Uri,
@@ -12,6 +13,18 @@ import {
 import { CodeQLCliServer, QlpacksInfo } from './cli';
 import { UserCancellationException } from './commandRunner';
 import { logger } from './logging';
+import { QueryMetadata } from './pure/interface-types';
+
+// Shared temporary folder for the extension.
+export const tmpDir = tmp.dirSync({ prefix: 'queries_', keep: false, unsafeCleanup: true });
+export const upgradesTmpDir = path.join(tmpDir.name, 'upgrades');
+fs.ensureDirSync(upgradesTmpDir);
+
+export const tmpDirDisposal = {
+  dispose: () => {
+    tmpDir.removeCallback();
+  }
+};
 
 /**
  * Show an error message and log it to the console
@@ -516,3 +529,54 @@ export async function askForLanguage(cliServer: CodeQLCliServer, throwOnEmpty =
   }
   return language;
 }
+
+/**
+ * Gets metadata for a query, if it exists.
+ * @param cliServer The CLI server.
+ * @param queryPath The path to the query.
+ * @returns A promise that resolves to the query metadata, if available.
+ */
+export async function tryGetQueryMetadata(cliServer: CodeQLCliServer, queryPath: string): Promise<QueryMetadata | undefined> {
+  try {
+    return await cliServer.resolveMetadata(queryPath);
+  } catch (e) {
+    // Ignore errors and provide no metadata.
+    void logger.log(`Couldn't resolve metadata for ${queryPath}: ${e}`);
+    return;
+  }
+}
+
+/**
+ * Creates a file in the query directory that indicates when this query was created.
+ * This is important for keeping track of when queries should be removed.
+ *
+ * @param queryPath The directory that will containt all files relevant to a query result.
+ * It does not need to exist.
+ */
+export async function createTimestampFile(storagePath: string) {
+  const timestampPath = path.join(storagePath, 'timestamp');
+  await fs.ensureDir(storagePath);
+  await fs.writeFile(timestampPath, Date.now().toString(), 'utf8');
+}
+
+
+/**
+ * Recursively walk a directory and return the full path to all files found.
+ * Symbolic links are ignored.
+ *
+ * @param dir the directory to walk
+ *
+ * @return An iterator of the full path to all files recursively found in the directory.
+ */
+export async function* walkDirectory(dir: string): AsyncIterableIterator<string> {
+  const seenFiles = new Set<string>();
+  for await (const d of await fs.opendir(dir)) {
+    const entry = path.join(dir, d.name);
+    seenFiles.add(entry);
+    if (d.isDirectory()) {
+      yield* walkDirectory(entry);
+    } else if (d.isFile()) {
+      yield entry;
+    }
+  }
+}

extensions/ql-vscode/src/interface-utils.ts

@@ -1,4 +1,5 @@
 import * as crypto from 'crypto';
+import * as os from 'os';
 import {
   Uri,
   Location,
@@ -117,13 +118,25 @@ export function tryResolveLocation(
 export function getHtmlForWebview(
   webview: Webview,
   scriptUriOnDisk: Uri,
-  stylesheetUriOnDisk: Uri
+  stylesheetUrisOnDisk: Uri[],
+  allowInlineStyles: boolean
 ): string {
   // Convert the on-disk URIs into webview URIs.
   const scriptWebviewUri = webview.asWebviewUri(scriptUriOnDisk);
-  const stylesheetWebviewUri = webview.asWebviewUri(stylesheetUriOnDisk);
+  const stylesheetWebviewUris = stylesheetUrisOnDisk.map(stylesheetUriOnDisk =>
+    webview.asWebviewUri(stylesheetUriOnDisk));
+
   // Use a nonce in the content security policy to uniquely identify the above resources.
   const nonce = getNonce();
+
+  const stylesheetsHtmlLines = allowInlineStyles
+    ? stylesheetWebviewUris.map(uri => createStylesLinkWithoutNonce(uri))
+    : stylesheetWebviewUris.map(uri => createStylesLinkWithNonce(nonce, uri));
+
+  const styleSrc = allowInlineStyles
+    ? `${webview.cspSource} vscode-file: 'unsafe-inline'`
+    : `'nonce-${nonce}'`;
+
   /*
    * Content security policy:
    * default-src: allow nothing by default.
@@ -136,8 +149,8 @@ export function getHtmlForWebview(
 <html>
   <head>
     <meta http-equiv="Content-Security-Policy"
-          content="default-src 'none'; script-src 'nonce-${nonce}'; style-src 'nonce-${nonce}'; connect-src ${webview.cspSource};">
-    <link nonce="${nonce}" rel="stylesheet" href="${stylesheetWebviewUri}">
+          content="default-src 'none'; script-src 'nonce-${nonce}'; style-src ${styleSrc}; connect-src ${webview.cspSource};">
+        ${stylesheetsHtmlLines.join(`    ${os.EOL}`)}
   </head>
   <body>
     <div id=root>
@@ -236,3 +249,11 @@ export async function jumpToLocation(
     }
   }
 }
+
+function createStylesLinkWithNonce(nonce: string, uri: Uri): string {
+  return `<link nonce="${nonce}" rel="stylesheet" href="${uri}">`;
+}
+
+function createStylesLinkWithoutNonce(uri: Uri): string {
+  return `<link rel="stylesheet" href="${uri}">`;
+}

extensions/ql-vscode/src/interface.ts

@@ -14,8 +14,8 @@ import {
 import * as cli from './cli';
 import { CodeQLCliServer } from './cli';
 import { DatabaseEventKind, DatabaseItem, DatabaseManager } from './databases';
-import { showAndLogErrorMessage } from './helpers';
-import { assertNever } from './pure/helpers-pure';
+import { showAndLogErrorMessage, tmpDir } from './helpers';
+import { assertNever, getErrorMessage, getErrorStack } from './pure/helpers-pure';
 import {
   FromResultsViewMsg,
   Interpretation,
@@ -27,13 +27,14 @@ import {
   InterpretedResultsSortState,
   SortDirection,
   ALERTS_TABLE_NAME,
+  GRAPH_TABLE_NAME,
   RawResultsSortState,
 } from './pure/interface-types';
 import { Logger } from './logging';
 import * as messages from './pure/messages';
 import { commandRunner } from './commandRunner';
-import { CompletedQuery, interpretResults } from './query-results';
-import { QueryInfo, tmpDir } from './run-queries';
+import { CompletedQueryInfo, interpretResultsSarif, interpretGraphResults } from './query-results';
+import { QueryEvaluationInfo } from './run-queries';
 import { parseSarifLocation, parseSarifPlainTextMessage } from './pure/sarif-utils';
 import {
   WebviewReveal,
@@ -47,6 +48,7 @@ import {
 import { getDefaultResultSetName, ParsedResultSets } from './pure/interface-types';
 import { RawResultSet, transformBqrsResultSet, ResultSetSchema } from './pure/bqrs-cli-types';
 import { PAGE_SIZE } from './config';
+import { CompletedLocalQueryInfo } from './query-results';
 
 /**
  * interface.ts
@@ -87,16 +89,40 @@ function sortInterpretedResults(
   }
 }
 
-function numPagesOfResultSet(resultSet: RawResultSet): number {
-  return Math.ceil(resultSet.schema.rows / PAGE_SIZE.getValue<number>());
+function interpretedPageSize(interpretation: Interpretation | undefined): number {
+  if (interpretation?.data.t == 'GraphInterpretationData') {
+    // Graph views always have one result per page.
+    return 1;
+  }
+  return PAGE_SIZE.getValue<number>();
+}
+
+function numPagesOfResultSet(resultSet: RawResultSet, interpretation?: Interpretation): number {
+  const pageSize = interpretedPageSize(interpretation);
+
+  const n = interpretation?.data.t == 'GraphInterpretationData'
+    ? interpretation.data.dot.length
+    : resultSet.schema.rows;
+
+  return Math.ceil(n / pageSize);
 }
 
 function numInterpretedPages(interpretation: Interpretation | undefined): number {
-  return Math.ceil((interpretation?.sarif.runs[0].results?.length || 0) / PAGE_SIZE.getValue<number>());
+  if (!interpretation) {
+    return 0;
+  }
+
+  const pageSize = interpretedPageSize(interpretation);
+
+  const n = interpretation.data.t == 'GraphInterpretationData'
+    ? interpretation.data.dot.length
+    : interpretation.data.runs[0].results?.length || 0;
+
+  return Math.ceil(n / pageSize);
 }
 
 export class InterfaceManager extends DisposableObject {
-  private _displayedQuery?: CompletedQuery;
+  private _displayedQuery?: CompletedLocalQueryInfo;
   private _interpretation?: Interpretation;
   private _panel: vscode.WebviewPanel | undefined;
   private _panelLoaded = false;
@@ -160,10 +186,11 @@ export class InterfaceManager extends DisposableObject {
   getPanel(): vscode.WebviewPanel {
     if (this._panel == undefined) {
       const { ctx } = this;
+      const webViewColumn = this.chooseColumnForWebview();
       const panel = (this._panel = Window.createWebviewPanel(
         'resultsView', // internal name
         'CodeQL Query Results', // user-visible name
-        { viewColumn: vscode.ViewColumn.Beside, preserveFocus: true },
+        { viewColumn: webViewColumn, preserveFocus: true },
         {
           enableScripts: true,
           enableFindWidget: true,
@@ -175,34 +202,59 @@ export class InterfaceManager extends DisposableObject {
         }
       ));
 
-      this._panel.onDidDispose(
+      this.push(this._panel.onDidDispose(
         () => {
           this._panel = undefined;
           this._displayedQuery = undefined;
+          this._panelLoaded = false;
         },
         null,
         ctx.subscriptions
-      );
+      ));
       const scriptPathOnDisk = vscode.Uri.file(
         ctx.asAbsolutePath('out/resultsView.js')
       );
       const stylesheetPathOnDisk = vscode.Uri.file(
-        ctx.asAbsolutePath('out/resultsView.css')
+        ctx.asAbsolutePath('out/view/resultsView.css')
       );
       panel.webview.html = getHtmlForWebview(
         panel.webview,
         scriptPathOnDisk,
-        stylesheetPathOnDisk
+        [stylesheetPathOnDisk],
+        false
       );
-      panel.webview.onDidReceiveMessage(
+      this.push(panel.webview.onDidReceiveMessage(
         async (e) => this.handleMsgFromView(e),
         undefined,
         ctx.subscriptions
-      );
+      ));
     }
     return this._panel;
   }
 
+  /**
+   * Choose where to open the webview.
+   *
+   * If there is a single view column, then open beside it.
+   * If there are multiple view columns, then open beside the active column,
+   * unless the active editor is the last column. In this case, open in the first column.
+   *
+   * The goal is to avoid opening new columns when there already are two columns open.
+   */
+  private chooseColumnForWebview(): vscode.ViewColumn {
+    // This is not a great way to determine the number of view columns, but I
+    // can't find a vscode API that does it any better.
+    // Here, iterate through all the visible editors and determine the max view column.
+    // This won't work if the largest view column is empty.
+    const colCount = Window.visibleTextEditors.reduce((maxVal, editor) =>
+      Math.max(maxVal, Number.parseInt(editor.viewColumn?.toFixed() || '0', 10)), 0);
+    if (colCount <= 1) {
+      return vscode.ViewColumn.Beside;
+    }
+    const activeViewColumnNum = Number.parseInt(Window.activeTextEditor?.viewColumn?.toFixed() || '0', 10);
+    return activeViewColumnNum === colCount ? vscode.ViewColumn.One : vscode.ViewColumn.Beside;
+  }
+
   private async changeInterpretedSortState(
     sortState: InterpretedResultsSortState | undefined
   ): Promise<void> {
@@ -214,7 +266,7 @@ export class InterfaceManager extends DisposableObject {
     }
     // Notify the webview that it should expect new results.
     await this.postMessage({ t: 'resultsUpdating' });
-    await this._displayedQuery.updateInterpretedSortState(sortState);
+    await this._displayedQuery.completedQuery.updateInterpretedSortState(sortState);
     await this.showResults(this._displayedQuery, WebviewReveal.NotForced, true);
   }
 
@@ -230,7 +282,7 @@ export class InterfaceManager extends DisposableObject {
     }
     // Notify the webview that it should expect new results.
     await this.postMessage({ t: 'resultsUpdating' });
-    await this._displayedQuery.updateSortState(
+    await this._displayedQuery.completedQuery.updateSortState(
       this.cliServer,
       resultSetName,
       sortState
@@ -279,7 +331,7 @@ export class InterfaceManager extends DisposableObject {
           await this.changeInterpretedSortState(msg.sortState);
           break;
         case 'changePage':
-          if (msg.selectedTable === ALERTS_TABLE_NAME) {
+          if (msg.selectedTable === ALERTS_TABLE_NAME || msg.selectedTable === GRAPH_TABLE_NAME) {
             await this.showPageOfInterpretedResults(msg.pageNumber);
           }
           else {
@@ -290,7 +342,7 @@ export class InterfaceManager extends DisposableObject {
               // sortedResultsInfo doesn't have an entry for the current
               // result set. Use this to determine whether or not we use
               // the sorted bqrs file.
-              this._displayedQuery?.sortedResultsInfo.has(msg.selectedTable) || false
+              !!this._displayedQuery?.completedQuery.sortedResultsInfo[msg.selectedTable]
             );
           }
           break;
@@ -301,8 +353,8 @@ export class InterfaceManager extends DisposableObject {
           assertNever(msg);
       }
     } catch (e) {
-      void showAndLogErrorMessage(e.message, {
-        fullMessage: e.stack
+      void showAndLogErrorMessage(getErrorMessage(e), {
+        fullMessage: getErrorStack(e)
       });
     }
   }
@@ -323,7 +375,7 @@ export class InterfaceManager extends DisposableObject {
 
   /**
    * Show query results in webview panel.
-   * @param results Evaluation info for the executed query.
+   * @param fullQuery Evaluation info for the executed query.
    * @param shouldKeepOldResultsWhileRendering Should keep old results while rendering.
    * @param forceReveal Force the webview panel to be visible and
    * Appropriate when the user has just performed an explicit
@@ -331,57 +383,59 @@ export class InterfaceManager extends DisposableObject {
    * history entry.
    */
   public async showResults(
-    results: CompletedQuery,
+    fullQuery: CompletedLocalQueryInfo,
     forceReveal: WebviewReveal,
     shouldKeepOldResultsWhileRendering = false
   ): Promise<void> {
-    if (results.result.resultType !== messages.QueryResultType.SUCCESS) {
+    if (fullQuery.completedQuery.result.resultType !== messages.QueryResultType.SUCCESS) {
       return;
     }
 
     this._interpretation = undefined;
     const interpretationPage = await this.interpretResultsInfo(
-      results.query,
-      results.interpretedResultsSortState
+      fullQuery.completedQuery.query,
+      fullQuery.completedQuery.interpretedResultsSortState
     );
 
     const sortedResultsMap: SortedResultsMap = {};
-    results.sortedResultsInfo.forEach(
-      (v, k) =>
+    Object.entries(fullQuery.completedQuery.sortedResultsInfo).forEach(
+      ([k, v]) =>
         (sortedResultsMap[k] = this.convertPathPropertiesToWebviewUris(v))
     );
 
-    this._displayedQuery = results;
+    this._displayedQuery = fullQuery;
 
     const panel = this.getPanel();
     await this.waitForPanelLoaded();
-    if (forceReveal === WebviewReveal.Forced) {
-      panel.reveal(undefined, true);
-    } else if (!panel.visible) {
-      // The results panel exists, (`.getPanel()` guarantees it) but
-      // is not visible; it's in a not-currently-viewed tab. Show a
-      // more asynchronous message to not so abruptly interrupt
-      // user's workflow by immediately revealing the panel.
-      const showButton = 'View Results';
-      const queryName = results.queryName;
-      const resultPromise = vscode.window.showInformationMessage(
-        `Finished running query ${queryName.length > 0 ? ` "${queryName}"` : ''
-        }.`,
-        showButton
-      );
-      // Address this click asynchronously so we still update the
-      // query history immediately.
-      void resultPromise.then((result) => {
-        if (result === showButton) {
-          panel.reveal();
-        }
-      });
+    if (!panel.visible) {
+      if (forceReveal === WebviewReveal.Forced) {
+        panel.reveal(undefined, true);
+      } else {
+        // The results panel exists, (`.getPanel()` guarantees it) but
+        // is not visible; it's in a not-currently-viewed tab. Show a
+        // more asynchronous message to not so abruptly interrupt
+        // user's workflow by immediately revealing the panel.
+        const showButton = 'View Results';
+        const queryName = fullQuery.getShortLabel();
+        const resultPromise = vscode.window.showInformationMessage(
+          `Finished running query ${queryName.length > 0 ? ` "${queryName}"` : ''
+          }.`,
+          showButton
+        );
+        // Address this click asynchronously so we still update the
+        // query history immediately.
+        void resultPromise.then((result) => {
+          if (result === showButton) {
+            panel.reveal();
+          }
+        });
+      }
     }
 
     // Note that the resultSetSchemas will return offsets for the default (unsorted) page,
     // which may not be correct. However, in this case, it doesn't matter since we only
     // need the first offset, which will be the same no matter which sorting we use.
-    const resultSetSchemas = await this.getResultSetSchemas(results);
+    const resultSetSchemas = await this.getResultSetSchemas(fullQuery.completedQuery);
     const resultSetNames = resultSetSchemas.map(schema => schema.name);
 
     const selectedTable = getDefaultResultSetName(resultSetNames);
@@ -391,7 +445,7 @@ export class InterfaceManager extends DisposableObject {
 
     // Use sorted results path if it exists. This may happen if we are
     // reloading the results view after it has been sorted in the past.
-    const resultsPath = results.getResultsPath(selectedTable);
+    const resultsPath = fullQuery.completedQuery.getResultsPath(selectedTable);
     const pageSize = PAGE_SIZE.getValue<number>();
     const chunk = await this.cliServer.bqrsDecode(
       resultsPath,
@@ -406,11 +460,11 @@ export class InterfaceManager extends DisposableObject {
       }
     );
     const resultSet = transformBqrsResultSet(schema, chunk);
-    results.setResultCount(interpretationPage?.numTotalResults || resultSet.schema.rows);
+    fullQuery.completedQuery.setResultCount(interpretationPage?.numTotalResults || resultSet.schema.rows);
     const parsedResultSets: ParsedResultSets = {
       pageNumber: 0,
       pageSize,
-      numPages: numPagesOfResultSet(resultSet),
+      numPages: numPagesOfResultSet(resultSet, this._interpretation),
       numInterpretedPages: numInterpretedPages(this._interpretation),
       resultSet: { ...resultSet, t: 'RawResultSet' },
       selectedTable: undefined,
@@ -420,17 +474,17 @@ export class InterfaceManager extends DisposableObject {
     await this.postMessage({
       t: 'setState',
       interpretation: interpretationPage,
-      origResultsPaths: results.query.resultsPaths,
+      origResultsPaths: fullQuery.completedQuery.query.resultsPaths,
       resultsPath: this.convertPathToWebviewUri(
-        results.query.resultsPaths.resultsPath
+        fullQuery.completedQuery.query.resultsPaths.resultsPath
       ),
       parsedResultSets,
       sortedResultsMap,
-      database: results.database,
+      database: fullQuery.initialInfo.databaseInfo,
       shouldKeepOldResultsWhileRendering,
-      metadata: results.query.metadata,
-      queryName: results.toString(),
-      queryPath: results.query.program.queryPath
+      metadata: fullQuery.completedQuery.query.metadata,
+      queryName: fullQuery.label,
+      queryPath: fullQuery.initialInfo.queryPath
     });
   }
 
@@ -446,29 +500,29 @@ export class InterfaceManager extends DisposableObject {
     if (this._interpretation === undefined) {
       throw new Error('Trying to show interpreted results but interpretation was undefined');
     }
-    if (this._interpretation.sarif.runs[0].results === undefined) {
+    if (this._interpretation.data.t === 'SarifInterpretationData' && this._interpretation.data.runs[0].results === undefined) {
       throw new Error('Trying to show interpreted results but results were undefined');
     }
 
-    const resultSetSchemas = await this.getResultSetSchemas(this._displayedQuery);
+    const resultSetSchemas = await this.getResultSetSchemas(this._displayedQuery.completedQuery);
     const resultSetNames = resultSetSchemas.map(schema => schema.name);
 
     await this.postMessage({
       t: 'showInterpretedPage',
       interpretation: this.getPageOfInterpretedResults(pageNumber),
-      database: this._displayedQuery.database,
-      metadata: this._displayedQuery.query.metadata,
+      database: this._displayedQuery.initialInfo.databaseInfo,
+      metadata: this._displayedQuery.completedQuery.query.metadata,
       pageNumber,
       resultSetNames,
-      pageSize: PAGE_SIZE.getValue(),
+      pageSize: interpretedPageSize(this._interpretation),
       numPages: numInterpretedPages(this._interpretation),
-      queryName: this._displayedQuery.toString(),
-      queryPath: this._displayedQuery.query.program.queryPath
+      queryName: this._displayedQuery.label,
+      queryPath: this._displayedQuery.initialInfo.queryPath
     });
   }
 
-  private async getResultSetSchemas(results: CompletedQuery, selectedTable = ''): Promise<ResultSetSchema[]> {
-    const resultsPath = results.getResultsPath(selectedTable);
+  private async getResultSetSchemas(completedQuery: CompletedQueryInfo, selectedTable = ''): Promise<ResultSetSchema[]> {
+    const resultsPath = completedQuery.getResultsPath(selectedTable);
     const schemas = await this.cliServer.bqrsInfo(
       resultsPath,
       PAGE_SIZE.getValue()
@@ -495,17 +549,17 @@ export class InterfaceManager extends DisposableObject {
     }
 
     const sortedResultsMap: SortedResultsMap = {};
-    results.sortedResultsInfo.forEach(
-      (v, k) =>
+    Object.entries(results.completedQuery.sortedResultsInfo).forEach(
+      ([k, v]) =>
         (sortedResultsMap[k] = this.convertPathPropertiesToWebviewUris(v))
     );
 
-    const resultSetSchemas = await this.getResultSetSchemas(results, sorted ? selectedTable : '');
+    const resultSetSchemas = await this.getResultSetSchemas(results.completedQuery, sorted ? selectedTable : '');
 
     // If there is a specific sorted table selected, a different bqrs file is loaded that doesn't have all the result set names.
     // Make sure that we load all result set names here.
     // See https://github.com/github/vscode-codeql/issues/1005
-    const allResultSetSchemas = sorted ? await this.getResultSetSchemas(results, '') : resultSetSchemas;
+    const allResultSetSchemas = sorted ? await this.getResultSetSchemas(results.completedQuery, '') : resultSetSchemas;
     const resultSetNames = allResultSetSchemas.map(schema => schema.name);
 
     const schema = resultSetSchemas.find(
@@ -516,7 +570,7 @@ export class InterfaceManager extends DisposableObject {
 
     const pageSize = PAGE_SIZE.getValue<number>();
     const chunk = await this.cliServer.bqrsDecode(
-      results.getResultsPath(selectedTable, sorted),
+      results.completedQuery.getResultsPath(selectedTable, sorted),
       schema.name,
       {
         offset: schema.pagination?.offsets[pageNumber],
@@ -538,17 +592,17 @@ export class InterfaceManager extends DisposableObject {
     await this.postMessage({
       t: 'setState',
       interpretation: this._interpretation,
-      origResultsPaths: results.query.resultsPaths,
+      origResultsPaths: results.completedQuery.query.resultsPaths,
       resultsPath: this.convertPathToWebviewUri(
-        results.query.resultsPaths.resultsPath
+        results.completedQuery.query.resultsPaths.resultsPath
       ),
       parsedResultSets,
       sortedResultsMap,
-      database: results.database,
+      database: results.initialInfo.databaseInfo,
       shouldKeepOldResultsWhileRendering: false,
-      metadata: results.query.metadata,
-      queryName: results.toString(),
-      queryPath: results.query.program.queryPath
+      metadata: results.completedQuery.query.metadata,
+      queryName: results.label,
+      queryPath: results.initialInfo.queryPath
     });
   }
 
@@ -563,28 +617,45 @@ export class InterfaceManager extends DisposableObject {
       void this.logger.log('No results path. Cannot display interpreted results.');
       return undefined;
     }
+    let data;
+    let numTotalResults;
+    if (metadata?.kind === GRAPH_TABLE_NAME) {
+      data = await interpretGraphResults(
+        this.cliServer,
+        metadata,
+        resultsPaths,
+        sourceInfo
+      );
+      numTotalResults = data.dot.length;
+    } else {
+      const sarif = await interpretResultsSarif(
+        this.cliServer,
+        metadata,
+        resultsPaths,
+        sourceInfo
+      );
 
-    const sarif = await interpretResults(
-      this.cliServer,
-      metadata,
-      resultsPaths,
-      sourceInfo
-    );
+      sarif.runs.forEach(run => {
+        if (run.results) {
+          sortInterpretedResults(run.results, sortState);
+        }
+      });
 
-    sarif.runs.forEach(run => {
-      if (run.results !== undefined) {
-        sortInterpretedResults(run.results, sortState);
-      }
-    });
+      sarif.sortState = sortState;
+      data = sarif;
 
-    const numTotalResults = sarif.runs[0]?.results?.length || 0;
+      numTotalResults = (() => {
+        return sarif.runs?.[0]?.results
+          ? sarif.runs[0].results.length
+          : 0;
+      })();
+    }
 
     const interpretation: Interpretation = {
-      sarif,
+      data,
       sourceLocationPrefix,
       numTruncatedResults: 0,
-      numTotalResults,
-      sortState,
+      numTotalResults
     };
     this._interpretation = interpretation;
     return interpretation;
@@ -593,7 +664,6 @@ export class InterfaceManager extends DisposableObject {
   private getPageOfInterpretedResults(
     pageNumber: number
   ): Interpretation {
-
     function getPageOfRun(run: Sarif.Run): Sarif.Run {
       return {
         ...run, results: run.results?.slice(
@@ -603,32 +673,44 @@ export class InterfaceManager extends DisposableObject {
       };
     }
 
-    if (this._interpretation === undefined) {
+    const interp = this._interpretation;
+    if (interp === undefined) {
       throw new Error('Tried to get interpreted results before interpretation finished');
     }
-    if (this._interpretation.sarif.runs.length !== 1) {
-      void this.logger.log(`Warning: SARIF file had ${this._interpretation.sarif.runs.length} runs, expected 1`);
+
+    if (interp.data.t !== 'SarifInterpretationData')
+      return interp;
+
+    if (interp.data.runs.length !== 1) {
+      void this.logger.log(`Warning: SARIF file had ${interp.data.runs.length} runs, expected 1`);
     }
-    const interp = this._interpretation;
+
     return {
       ...interp,
-      sarif: { ...interp.sarif, runs: [getPageOfRun(interp.sarif.runs[0])] },
+      data: {
+        ...interp.data,
+        runs: [getPageOfRun(interp.data.runs[0])]
+      }
     };
   }
 
   private async interpretResultsInfo(
-    query: QueryInfo,
+    query: QueryEvaluationInfo,
     sortState: InterpretedResultsSortState | undefined
   ): Promise<Interpretation | undefined> {
     if (
-      (await query.canHaveInterpretedResults()) &&
+      query.canHaveInterpretedResults() &&
       query.quickEvalPosition === undefined // never do results interpretation if quickEval
     ) {
       try {
-        const sourceLocationPrefix = await query.dbItem.getSourceLocationPrefix(
+        const dbItem = this.databaseManager.findDatabaseItem(Uri.file(query.dbItemPath));
+        if (!dbItem) {
+          throw new Error(`Could not find database item for ${query.dbItemPath}`);
+        }
+        const sourceLocationPrefix = await dbItem.getSourceLocationPrefix(
           this.cliServer
         );
-        const sourceArchiveUri = query.dbItem.sourceArchive;
+        const sourceArchiveUri = dbItem.sourceArchive;
         const sourceInfo =
           sourceArchiveUri === undefined
             ? undefined
@@ -647,7 +729,7 @@ export class InterfaceManager extends DisposableObject {
         // If interpretation fails, accept the error and continue
         // trying to render uninterpreted results anyway.
         void showAndLogErrorMessage(
-          `Showing raw results instead of interpreted ones due to an error. ${e.message}`
+          `Showing raw results instead of interpreted ones due to an error. ${getErrorMessage(e)}`
         );
       }
     }
@@ -686,9 +768,8 @@ export class InterfaceManager extends DisposableObject {
     try {
       await this.showProblemResultsAsDiagnostics(interpretation, database);
     } catch (e) {
-      const msg = e instanceof Error ? e.message : e.toString();
       void this.logger.log(
-        `Exception while computing problem results as diagnostics: ${msg}`
+        `Exception while computing problem results as diagnostics: ${getErrorMessage(e)}`
       );
       this._diagnosticCollection.clear();
     }
@@ -698,9 +779,12 @@ export class InterfaceManager extends DisposableObject {
     interpretation: Interpretation,
     databaseItem: DatabaseItem
   ): Promise<void> {
-    const { sarif, sourceLocationPrefix } = interpretation;
+    const { data, sourceLocationPrefix } = interpretation;
 
-    if (!sarif.runs || !sarif.runs[0].results) {
+    if (data.t !== 'SarifInterpretationData')
+      return;
+
+    if (!data.runs || !data.runs[0].results) {
       void this.logger.log(
         'Didn\'t find a run in the sarif results. Error processing sarif?'
       );
@@ -709,7 +793,7 @@ export class InterfaceManager extends DisposableObject {
 
     const diagnostics: [Uri, ReadonlyArray<Diagnostic>][] = [];
 
-    for (const result of sarif.runs[0].results) {
+    for (const result of data.runs[0].results) {
       const message = result.message.text;
       if (message === undefined) {
         void this.logger.log('Sarif had result without plaintext message');

extensions/ql-vscode/src/logging.ts

@@ -1,4 +1,4 @@
-import { window as Window, OutputChannel, Progress, Disposable } from 'vscode';
+import { window as Window, OutputChannel, Progress } from 'vscode';
 import { DisposableObject } from './pure/disposable-object';
 import * as fs from 'fs-extra';
 import * as path from 'path';
@@ -26,18 +26,6 @@ export interface Logger {
    * @param location log to remove
    */
   removeAdditionalLogLocation(location: string | undefined): void;
-
-  /**
-   * The base location where all side log files are stored.
-   */
-  getBaseLocation(): string | undefined;
-
-  /**
-   * Sets the location where logs are stored.
-   * @param storagePath The path where logs are stored.
-   * @param isCustomLogDirectory Whether the logs are stored in a custom, user-specified directory.
-   */
-  setLogStoragePath(storagePath: string, isCustomLogDirectory: boolean): Promise<void>;
 }
 
 export type ProgressReporter = Progress<{ message: string }>;
@@ -46,27 +34,15 @@ export type ProgressReporter = Progress<{ message: string }>;
 export class OutputChannelLogger extends DisposableObject implements Logger {
   public readonly outputChannel: OutputChannel;
   private readonly additionalLocations = new Map<string, AdditionalLogLocation>();
-  private additionalLogLocationPath: string | undefined;
   isCustomLogDirectory: boolean;
 
-  constructor(private title: string) {
+  constructor(title: string) {
     super();
     this.outputChannel = Window.createOutputChannel(title);
     this.push(this.outputChannel);
     this.isCustomLogDirectory = false;
   }
 
-  async setLogStoragePath(storagePath: string, isCustomLogDirectory: boolean): Promise<void> {
-    this.additionalLogLocationPath = path.join(storagePath, this.title);
-
-    this.isCustomLogDirectory = isCustomLogDirectory;
-
-    if (!this.isCustomLogDirectory) {
-      // clear out any old state from previous runs
-      await fs.remove(this.additionalLogLocationPath);
-    }
-  }
-
   /**
    * This function is asynchronous and will only resolve once the message is written
    * to the side log (if required). It is not necessary to await the results of this
@@ -74,31 +50,41 @@ export class OutputChannelLogger extends DisposableObject implements Logger {
    * continuing.
    */
   async log(message: string, options = {} as LogOptions): Promise<void> {
-    if (options.trailingNewline === undefined) {
-      options.trailingNewline = true;
-    }
-
-    if (options.trailingNewline) {
-      this.outputChannel.appendLine(message);
-    } else {
-      this.outputChannel.append(message);
-    }
-
-    if (this.additionalLogLocationPath && options.additionalLogLocation) {
-      const logPath = path.join(this.additionalLogLocationPath, options.additionalLogLocation);
-      let additional = this.additionalLocations.get(logPath);
-      if (!additional) {
-        const msg = `| Log being saved to ${logPath} |`;
-        const separator = new Array(msg.length).fill('-').join('');
-        this.outputChannel.appendLine(separator);
-        this.outputChannel.appendLine(msg);
-        this.outputChannel.appendLine(separator);
-        additional = new AdditionalLogLocation(logPath, !this.isCustomLogDirectory);
-        this.additionalLocations.set(logPath, additional);
-        this.track(additional);
+    try {
+      if (options.trailingNewline === undefined) {
+        options.trailingNewline = true;
+      }
+      if (options.trailingNewline) {
+        this.outputChannel.appendLine(message);
+      } else {
+        this.outputChannel.append(message);
       }
 
-      await additional.log(message, options);
+      if (options.additionalLogLocation) {
+        if (!path.isAbsolute(options.additionalLogLocation)) {
+          throw new Error(`Additional Log Location must be an absolute path: ${options.additionalLogLocation}`);
+        }
+        const logPath = options.additionalLogLocation;
+        let additional = this.additionalLocations.get(logPath);
+        if (!additional) {
+          const msg = `| Log being saved to ${logPath} |`;
+          const separator = new Array(msg.length).fill('-').join('');
+          this.outputChannel.appendLine(separator);
+          this.outputChannel.appendLine(msg);
+          this.outputChannel.appendLine(separator);
+          additional = new AdditionalLogLocation(logPath);
+          this.additionalLocations.set(logPath, additional);
+        }
+
+        await additional.log(message, options);
+      }
+    } catch (e) {
+      if (e instanceof Error && e.message === 'Channel has been closed') {
+        // Output channel is closed logging to console instead
+        console.log('Output channel is closed logging to console instead:', message);
+      } else {
+        throw e;
+      }
     }
   }
 
@@ -107,26 +93,15 @@ export class OutputChannelLogger extends DisposableObject implements Logger {
   }
 
   removeAdditionalLogLocation(location: string | undefined): void {
-    if (this.additionalLogLocationPath && location) {
-      const logPath = location.startsWith(this.additionalLogLocationPath)
-        ? location
-        : path.join(this.additionalLogLocationPath, location);
-      const additional = this.additionalLocations.get(logPath);
-      if (additional) {
-        this.disposeAndStopTracking(additional);
-        this.additionalLocations.delete(logPath);
-      }
+    if (location) {
+      this.additionalLocations.delete(location);
     }
   }
-
-  getBaseLocation() {
-    return this.additionalLogLocationPath;
-  }
 }
 
-class AdditionalLogLocation extends Disposable {
-  constructor(private location: string, private shouldDeleteLogs: boolean) {
-    super(() => { /**/ });
+class AdditionalLogLocation {
+  constructor(private location: string) {
+    /**/
   }
 
   async log(message: string, options = {} as LogOptions): Promise<void> {
@@ -139,12 +114,6 @@ class AdditionalLogLocation extends Disposable {
       encoding: 'utf8'
     });
   }
-
-  async dispose(): Promise<void> {
-    if (this.shouldDeleteLogs) {
-      await fs.remove(this.location);
-    }
-  }
 }
 
 /** The global logger for the extension. */

extensions/ql-vscode/src/packaging.ts

@@ -0,0 +1,146 @@
+import { CliVersionConstraint, CodeQLCliServer } from './cli';
+import {
+  getOnDiskWorkspaceFolders,
+  showAndLogErrorMessage,
+  showAndLogInformationMessage,
+} from './helpers';
+import { QuickPickItem, window } from 'vscode';
+import { ProgressCallback, UserCancellationException } from './commandRunner';
+import { logger } from './logging';
+
+const QUERY_PACKS = [
+  'codeql/cpp-queries',
+  'codeql/csharp-queries',
+  'codeql/go-queries',
+  'codeql/java-queries',
+  'codeql/javascript-queries',
+  'codeql/python-queries',
+  'codeql/ruby-queries',
+  'codeql/csharp-solorigate-queries',
+  'codeql/javascript-experimental-atm-queries',
+];
+
+/**
+ * Prompts user to choose packs to download, and downloads them.
+ *
+ * @param cliServer The CLI server.
+ * @param progress A progress callback.
+ */
+export async function handleDownloadPacks(
+  cliServer: CodeQLCliServer,
+  progress: ProgressCallback,
+): Promise<void> {
+  if (!(await cliServer.cliConstraints.supportsPackaging())) {
+    throw new Error(`Packaging commands are not supported by this version of CodeQL. Please upgrade to v${CliVersionConstraint.CLI_VERSION_WITH_PACKAGING
+      } or later.`);
+  }
+  progress({
+    message: 'Choose packs to download',
+    step: 1,
+    maxStep: 2,
+  });
+  let packsToDownload: string[] = [];
+  const queryPackOption = 'Download all core query packs';
+  const customPackOption = 'Download custom specified pack';
+  const quickpick = await window.showQuickPick(
+    [queryPackOption, customPackOption],
+    { ignoreFocusOut: true }
+  );
+  if (quickpick === queryPackOption) {
+    packsToDownload = QUERY_PACKS;
+  } else if (quickpick === customPackOption) {
+    const customPack = await window.showInputBox({
+      prompt:
+        'Enter the <package-scope/name[@version]> of the pack to download',
+      ignoreFocusOut: true,
+    });
+    if (customPack) {
+      packsToDownload.push(customPack);
+    } else {
+      throw new UserCancellationException('No pack specified.');
+    }
+  }
+  if (packsToDownload?.length > 0) {
+    progress({
+      message: 'Downloading packs. This may take a few minutes.',
+      step: 2,
+      maxStep: 2,
+    });
+    try {
+      await cliServer.packDownload(packsToDownload);
+      void showAndLogInformationMessage('Finished downloading packs.');
+    } catch (error) {
+      void showAndLogErrorMessage(
+        'Unable to download all packs. See log for more details.'
+      );
+    }
+  }
+}
+
+interface QLPackQuickPickItem extends QuickPickItem {
+  packRootDir: string[];
+}
+
+/**
+ * Prompts user to choose packs to install, and installs them.
+ *
+ * @param cliServer The CLI server.
+ * @param progress A progress callback.
+ */
+export async function handleInstallPackDependencies(
+  cliServer: CodeQLCliServer,
+  progress: ProgressCallback,
+): Promise<void> {
+  if (!(await cliServer.cliConstraints.supportsPackaging())) {
+    throw new Error(`Packaging commands are not supported by this version of CodeQL. Please upgrade to v${CliVersionConstraint.CLI_VERSION_WITH_PACKAGING
+      } or later.`);
+  }
+  progress({
+    message: 'Choose packs to install dependencies for',
+    step: 1,
+    maxStep: 2,
+  });
+  const workspacePacks = await cliServer.resolveQlpacks(getOnDiskWorkspaceFolders());
+  const quickPickItems = Object.entries(workspacePacks).map<QLPackQuickPickItem>(([key, value]) => ({
+    label: key,
+    packRootDir: value,
+  }));
+  const packsToInstall = await window.showQuickPick(quickPickItems, {
+    placeHolder: 'Select packs to install dependencies for',
+    canPickMany: true,
+    ignoreFocusOut: true,
+  });
+  const numberOfPacks = packsToInstall?.length || 0;
+  if (packsToInstall && numberOfPacks > 0) {
+    const failedPacks = [];
+    const errors = [];
+    // Start at 1 because we already have the first step
+    let count = 1;
+    for (const pack of packsToInstall) {
+      count++;
+      progress({
+        message: `Installing dependencies for ${pack.label}`,
+        step: count,
+        maxStep: numberOfPacks + 1,
+      });
+      try {
+        for (const dir of pack.packRootDir) {
+          await cliServer.packInstall(dir);
+        }
+      } catch (error) {
+        failedPacks.push(pack.label);
+        errors.push(error);
+      }
+    }
+    if (failedPacks.length > 0) {
+      void logger.log(`Errors:\n${errors.join('\n')}`);
+      throw new Error(
+        `Unable to install pack dependencies for: ${failedPacks.join(', ')}. See log for more details.`
+      );
+    } else {
+      void showAndLogInformationMessage('Finished installing pack dependencies.');
+    }
+  } else {
+    throw new UserCancellationException('No packs selected.');
+  }
+}

extensions/ql-vscode/src/pure/bqrs-cli-types.ts

@@ -79,11 +79,11 @@ export interface WholeFileLocation {
 
 export type ResolvableLocationValue = WholeFileLocation | LineColumnLocation;
 
-export type UrlValue = ResolvableLocationValue  | string;
+export type UrlValue = ResolvableLocationValue | string;
 
-export type ColumnValue = EntityValue | number | string | boolean;
+export type CellValue = EntityValue | number | string | boolean;
 
-export type ResultRow = ColumnValue[];
+export type ResultRow = CellValue[];
 
 export interface RawResultSet {
   readonly schema: ResultSetSchema;
@@ -104,6 +104,6 @@ export function transformBqrsResultSet(
 }
 
 export interface DecodedBqrsChunk {
-  tuples: ColumnValue[][];
+  tuples: CellValue[][];
   next?: number;
 }

extensions/ql-vscode/src/pure/bqrs-utils.ts

@@ -4,6 +4,7 @@ import {
   LineColumnLocation,
   WholeFileLocation
 } from './bqrs-cli-types';
+import { createRemoteFileRef } from './location-link-utils';
 
 /**
  * The CodeQL filesystem libraries use this pattern in `getURL()` predicates
@@ -93,3 +94,30 @@ export function isWholeFileLoc(loc: UrlValue): loc is WholeFileLocation {
 export function isStringLoc(loc: UrlValue): loc is string {
   return typeof loc === 'string';
 }
+
+export function tryGetRemoteLocation(
+  loc: UrlValue | undefined,
+  fileLinkPrefix: string
+): string | undefined {
+  const resolvableLocation = tryGetResolvableLocation(loc);
+  if (!resolvableLocation) {
+    return undefined;
+  }
+
+  // Remote locations have the following format:
+  // file:/home/runner/work/<repo>/<repo/relative/path/to/file
+  // So we need to drop the first 6 parts of the path.
+
+  // TODO: We can make this more robust to other path formats.
+  const locationParts = resolvableLocation.uri.split('/');
+  const trimmedLocation = locationParts.slice(6, locationParts.length).join('/');
+
+  const fileLink = {
+    fileLinkPrefix,
+    filePath: trimmedLocation,
+  };
+  return createRemoteFileRef(
+    fileLink,
+    resolvableLocation.startLine,
+    resolvableLocation.endLine);
+}

extensions/ql-vscode/src/pure/helpers-pure.ts

@@ -1,3 +1,4 @@
+
 /**
  * helpers-pure.ts
  * ------------
@@ -29,3 +30,27 @@ export const asyncFilter = async function <T>(arr: T[], predicate: (arg0: T) =>
   const results = await Promise.all(arr.map(predicate));
   return arr.filter((_, index) => results[index]);
 };
+
+export const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000;
+export const ONE_HOUR_IN_MS = 1000 * 60 * 60;
+export const TWO_HOURS_IN_MS = 1000 * 60 * 60 * 2;
+export const THREE_HOURS_IN_MS = 1000 * 60 * 60 * 3;
+
+/**
+ * This regex matches strings of the form `owner/repo` where:
+ * - `owner` is made up of alphanumeric characters or single hyphens, starting and ending in an alphanumeric character
+ * - `repo` is made up of alphanumeric characters, hyphens, or underscores
+ */
+export const REPO_REGEX = /^(?:[a-zA-Z0-9]+-)*[a-zA-Z0-9]+\/[a-zA-Z0-9-_]+$/;
+
+export function getErrorMessage(e: any) {
+  return e instanceof Error ? e.message : String(e);
+}
+
+export function getErrorStack(e: any) {
+  return e instanceof Error ? e.stack ?? '' : '';
+}
+
+export function asError(e: any): Error {
+  return e instanceof Error ? e : new Error(String(e));
+}

extensions/ql-vscode/src/pure/interface-types.ts

@@ -1,4 +1,6 @@
 import * as sarif from 'sarif';
+import { AnalysisResults } from '../remote-queries/shared/analysis-result';
+import { AnalysisSummary, RemoteQueryResult } from '../remote-queries/shared/remote-query-result';
 import { RawResultSet, ResultRow, ResultSetSchema, Column, ResolvableLocationValue } from './bqrs-cli-types';
 
 /**
@@ -8,15 +10,17 @@ import { RawResultSet, ResultRow, ResultSetSchema, Column, ResolvableLocationVal
 
 export const SELECT_TABLE_NAME = '#select';
 export const ALERTS_TABLE_NAME = 'alerts';
+export const GRAPH_TABLE_NAME = 'graph';
 
 export type RawTableResultSet = { t: 'RawResultSet' } & RawResultSet;
-export type PathTableResultSet = {
-  t: 'SarifResultSet';
+export type InterpretedResultSet<T> = {
+  t: 'InterpretedResultSet';
   readonly schema: ResultSetSchema;
   name: string;
-} & Interpretation;
+  interpretation: InterpretationT<T>;
+};
 
-export type ResultSet = RawTableResultSet | PathTableResultSet;
+export type ResultSet = RawTableResultSet | InterpretedResultSet<InterpretationData>;
 
 /**
  * Only ever show this many rows in a raw result table.
@@ -44,18 +48,31 @@ export interface PreviousExecution {
   durationSeconds: number;
 }
 
-export interface Interpretation {
-  sourceLocationPrefix: string;
-  numTruncatedResults: number;
-  numTotalResults: number;
+export type SarifInterpretationData = {
+  t: 'SarifInterpretationData';
   /**
    * sortState being undefined means don't sort, just present results in the order
    * they appear in the sarif file.
    */
   sortState?: InterpretedResultsSortState;
-  sarif: sarif.Log;
+} & sarif.Log;
+
+export type GraphInterpretationData = {
+  t: 'GraphInterpretationData';
+  dot: string[];
+};
+
+export type InterpretationData = SarifInterpretationData | GraphInterpretationData;
+
+export interface InterpretationT<T> {
+  sourceLocationPrefix: string;
+  numTruncatedResults: number;
+  numTotalResults: number;
+  data: T;
 }
 
+export type Interpretation = InterpretationT<InterpretationData>;
+
 export interface ResultsPaths {
   resultsPath: string;
   interpretedResultsPath: string;
@@ -180,6 +197,11 @@ export interface OpenFileMsg {
   filePath: string;
 }
 
+export interface OpenVirtualFileMsg {
+  t: 'openVirtualFile';
+  queryText: string;
+}
+
 /**
  * Message from the results view to toggle the display of
  * query diagnostics.
@@ -309,7 +331,7 @@ export interface SetComparisonsMessage {
   readonly currentResultSetName: string;
   readonly rows: QueryCompareResult | undefined;
   readonly message: string | undefined;
-  readonly datebaseUri: string;
+  readonly databaseUri: string;
 }
 
 export enum DiffKind {
@@ -350,8 +372,9 @@ export function getDefaultResultSetName(
   // Choose first available result set from the array
   return [
     ALERTS_TABLE_NAME,
+    GRAPH_TABLE_NAME,
     SELECT_TABLE_NAME,
-    resultSetNames[0],
+    resultSetNames[0]
   ].filter((resultSetName) => resultSetNames.includes(resultSetName))[0];
 }
 
@@ -364,3 +387,45 @@ export interface ParsedResultSets {
   resultSetNames: string[];
   resultSet: ResultSet;
 }
+
+export type FromRemoteQueriesMessage =
+  | RemoteQueryLoadedMessage
+  | RemoteQueryErrorMessage
+  | OpenFileMsg
+  | OpenVirtualFileMsg
+  | RemoteQueryDownloadAnalysisResultsMessage
+  | RemoteQueryDownloadAllAnalysesResultsMessage;
+
+export type ToRemoteQueriesMessage =
+  | SetRemoteQueryResultMessage
+  | SetAnalysesResultsMessage;
+
+export interface RemoteQueryLoadedMessage {
+  t: 'remoteQueryLoaded';
+}
+
+export interface SetRemoteQueryResultMessage {
+  t: 'setRemoteQueryResult';
+  queryResult: RemoteQueryResult
+}
+
+export interface SetAnalysesResultsMessage {
+  t: 'setAnalysesResults';
+  analysesResults: AnalysisResults[];
+}
+
+export interface RemoteQueryErrorMessage {
+  t: 'remoteQueryError';
+  error: string;
+}
+
+export interface RemoteQueryDownloadAnalysisResultsMessage {
+  t: 'remoteQueryDownloadAnalysisResults';
+  analysisSummary: AnalysisSummary
+}
+
+export interface RemoteQueryDownloadAllAnalysesResultsMessage {
+  t: 'remoteQueryDownloadAllAnalysesResults';
+  analysisSummaries: AnalysisSummary[];
+}
+

extensions/ql-vscode/src/pure/location-link-utils.ts

@@ -0,0 +1,15 @@
+import { FileLink } from '../remote-queries/shared/analysis-result';
+
+export function createRemoteFileRef(
+  fileLink: FileLink,
+  startLine?: number,
+  endLine?: number
+): string {
+  if (startLine && endLine) {
+    return `${fileLink.fileLinkPrefix}/${fileLink.filePath}#L${startLine}-L${endLine}`;
+  } else if (startLine) {
+    return `${fileLink.fileLinkPrefix}/${fileLink.filePath}#L${startLine}`;
+  } else {
+    return `${fileLink.fileLinkPrefix}/${fileLink.filePath}`;
+  }
+}

extensions/ql-vscode/src/pure/messages.ts

@@ -646,6 +646,35 @@ export interface ClearCacheParams {
    */
   dryRun: boolean;
 }
+
+/**
+ * Parameters to start a new structured log
+ */
+ export interface StartLogParams {
+  /**
+   * The dataset for which we want to start a new structured log
+   */
+  db: Dataset;
+  /**
+   * The path where we want to place the new structured log
+   */
+  logPath: string;
+}
+
+/**
+ * Parameters to terminate a structured log
+ */
+ export interface EndLogParams {
+  /**
+   * The dataset for which we want to terminated the log
+   */
+  db: Dataset;
+  /**
+   * The path of the log to terminate, will be a no-op if we aren't logging here
+   */
+  logPath: string;
+}
+
 /**
  * Parameters for trimming the cache of a dataset
  */
@@ -682,6 +711,26 @@ export interface ClearCacheResult {
   deletionMessage: string;
 }
 
+/**
+ * The result of starting a new structured log.
+ */
+export interface StartLogResult {
+  /**
+   * A user friendly message saying what happened.
+   */
+  outcomeMessage: string;
+}
+
+/**
+ * The result of terminating a structured log.
+ */
+export interface EndLogResult {
+  /**
+   * A user friendly message saying what happened.
+   */
+  outcomeMessage: string;
+}
+
 /**
  * Parameters for running a set of queries
  */
@@ -1018,6 +1067,16 @@ export const compileUpgrade = new rpc.RequestType<WithProgressId<CompileUpgradeP
  */
 export const compileUpgradeSequence = new rpc.RequestType<WithProgressId<CompileUpgradeSequenceParams>, CompileUpgradeSequenceResult, void, void>('compilation/compileUpgradeSequence');
 
+/**
+ * Start a new structured log in the evaluator, terminating the previous one if it exists
+ */
+ export const startLog = new rpc.RequestType<WithProgressId<StartLogParams>, StartLogResult, void, void>('evaluation/startLog');
+
+/**
+ * Terminate a structured log in the evaluator. Is a no-op if we aren't logging to the given location
+ */
+ export const endLog = new rpc.RequestType<WithProgressId<EndLogParams>, EndLogResult, void, void>('evaluation/endLog');
+
 /**
  * Clear the cache of a dataset
  */

extensions/ql-vscode/src/pure/sarif-utils.ts

@@ -127,35 +127,49 @@ export function parseSarifLocation(
       userVisibleFile
     } as ParsedSarifLocation;
   } else {
-    const region = physicalLocation.region;
-    // We assume that the SARIF we're given always has startLine
-    // This is not mandated by the SARIF spec, but should be true of
-    // SARIF output by our own tools.
-    const startLine = region.startLine!;
-
-    // These defaults are from SARIF 2.1.0 spec, section 3.30.2, "Text Regions"
-    // https://docs.oasis-open.org/sarif/sarif/v2.1.0/cs01/sarif-v2.1.0-cs01.html#_Ref493492556
-    const endLine = region.endLine === undefined ? startLine : region.endLine;
-    const startColumn = region.startColumn === undefined ? 1 : region.startColumn;
-
-    // We also assume that our tools will always supply `endColumn` field, which is
-    // fortunate, since the SARIF spec says that it defaults to the end of the line, whose
-    // length we don't know at this point in the code.
-    //
-    // It is off by one with respect to the way vscode counts columns in selections.
-    const endColumn = region.endColumn! - 1;
+    const region = parseSarifRegion(physicalLocation.region);
 
     return {
       uri: effectiveLocation,
       userVisibleFile,
-      startLine,
-      startColumn,
-      endLine,
-      endColumn,
+      ...region
     };
   }
 }
 
+export function parseSarifRegion(
+  region: Sarif.Region
+): {
+  startLine: number,
+  endLine: number,
+  startColumn: number,
+  endColumn: number
+} {
+  // The SARIF we're given should have a startLine, but we
+  // fall back to 1, just in case something has gone wrong.
+  const startLine = region.startLine ?? 1;
+
+  // These defaults are from SARIF 2.1.0 spec, section 3.30.2, "Text Regions"
+  // https://docs.oasis-open.org/sarif/sarif/v2.1.0/cs01/sarif-v2.1.0-cs01.html#_Ref493492556
+  const endLine = region.endLine === undefined ? startLine : region.endLine;
+  const startColumn = region.startColumn === undefined ? 1 : region.startColumn;
+
+  // Our tools should always supply `endColumn` field, which is fortunate, since 
+  // the SARIF spec says that it defaults to the end of the line, whose
+  // length we don't know at this point in the code. We fall back to 1,
+  // just in case something has gone wrong.
+  //
+  // It is off by one with respect to the way vscode counts columns in selections.
+  const endColumn = (region.endColumn ?? 1) - 1;
+
+  return {
+    startLine,
+    startColumn,
+    endLine,
+    endColumn
+  };
+}
+
 export function isNoLocation(loc: ParsedSarifLocation): loc is NoLocation {
   return 'hint' in loc;
 }

extensions/ql-vscode/src/query-history-scrubber.ts

@@ -0,0 +1,135 @@
+import * as fs from 'fs-extra';
+import * as os from 'os';
+import * as path from 'path';
+import { Disposable, ExtensionContext } from 'vscode';
+import { logger } from './logging';
+
+const LAST_SCRUB_TIME_KEY = 'lastScrubTime';
+
+type Counter = {
+  increment: () => void;
+};
+
+/**
+ * Registers an interval timer that will periodically check for queries old enought
+ * to be deleted.
+ *
+ * Note that this scrubber will clean all queries from all workspaces. It should not
+ * run too often and it should only run from one workspace at a time.
+ *
+ * Generally, `wakeInterval` should be significantly shorter than `throttleTime`.
+ *
+ * @param wakeInterval How often to check to see if the job should run.
+ * @param throttleTime How often to actually run the job.
+ * @param maxQueryTime The maximum age of a query before is ready for deletion.
+ * @param queryDirectory The directory containing all queries.
+ * @param ctx The extension context.
+ */
+export function registerQueryHistoryScubber(
+  wakeInterval: number,
+  throttleTime: number,
+  maxQueryTime: number,
+  queryDirectory: string,
+  ctx: ExtensionContext,
+
+  // optional counter to keep track of how many times the scrubber has run
+  counter?: Counter
+): Disposable {
+  const deregister = setInterval(scrubQueries, wakeInterval, throttleTime, maxQueryTime, queryDirectory, ctx, counter);
+
+  return {
+    dispose: () => {
+      clearInterval(deregister);
+    }
+  };
+}
+
+async function scrubQueries(
+  throttleTime: number,
+  maxQueryTime: number,
+  queryDirectory: string,
+  ctx: ExtensionContext,
+  counter?: Counter
+) {
+  const lastScrubTime = ctx.globalState.get<number>(LAST_SCRUB_TIME_KEY);
+  const now = Date.now();
+
+  // If we have never scrubbed before, or if the last scrub was more than `throttleTime` ago,
+  // then scrub again.
+  if (lastScrubTime === undefined || now - lastScrubTime >= throttleTime) {
+    await ctx.globalState.update(LAST_SCRUB_TIME_KEY, now);
+
+    let scrubCount = 0; // total number of directories deleted
+    try {
+      counter?.increment();
+      void logger.log('Scrubbing query directory. Removing old queries.');
+      if (!(await fs.pathExists(queryDirectory))) {
+        void logger.log(`Cannot scrub. Query directory does not exist: ${queryDirectory}`);
+        return;
+      }
+
+      const baseNames = await fs.readdir(queryDirectory);
+      const errors: string[] = [];
+      for (const baseName of baseNames) {
+        const dir = path.join(queryDirectory, baseName);
+        const scrubResult = await scrubDirectory(dir, now, maxQueryTime);
+        if (scrubResult.errorMsg) {
+          errors.push(scrubResult.errorMsg);
+        }
+        if (scrubResult.deleted) {
+          scrubCount++;
+        }
+      }
+
+      if (errors.length) {
+        throw new Error(os.EOL + errors.join(os.EOL));
+      }
+    } catch (e) {
+      void logger.log(`Error while scrubbing queries: ${e}`);
+    } finally {
+      void logger.log(`Scrubbed ${scrubCount} old queries.`);
+    }
+  }
+}
+
+async function scrubDirectory(dir: string, now: number, maxQueryTime: number): Promise<{
+  errorMsg?: string,
+  deleted: boolean
+}> {
+  const timestampFile = path.join(dir, 'timestamp');
+  try {
+    let deleted = true;
+    if (!(await fs.stat(dir)).isDirectory()) {
+      void logger.log(`  ${dir} is not a directory. Deleting.`);
+      await fs.remove(dir);
+    } else if (!(await fs.pathExists(timestampFile))) {
+      void logger.log(`  ${dir} has no timestamp file. Deleting.`);
+      await fs.remove(dir);
+    } else if (!(await fs.stat(timestampFile)).isFile()) {
+      void logger.log(`  ${timestampFile} is not a file. Deleting.`);
+      await fs.remove(dir);
+    } else {
+      const timestampText = await fs.readFile(timestampFile, 'utf8');
+      const timestamp = parseInt(timestampText, 10);
+
+      if (Number.isNaN(timestamp)) {
+        void logger.log(`  ${dir} has invalid timestamp '${timestampText}'. Deleting.`);
+        await fs.remove(dir);
+      } else if (now - timestamp > maxQueryTime) {
+        void logger.log(`  ${dir} is older than ${maxQueryTime / 1000} seconds. Deleting.`);
+        await fs.remove(dir);
+      } else {
+        void logger.log(`  ${dir} is not older than ${maxQueryTime / 1000} seconds. Keeping.`);
+        deleted = false;
+      }
+    }
+    return {
+      deleted
+    };
+  } catch (err) {
+    return {
+      errorMsg: `  Could not delete '${dir}': ${err}`,
+      deleted: false
+    };
+  }
+}

extensions/ql-vscode/src/query-results.ts

@@ -1,30 +1,63 @@
-import { env } from 'vscode';
+import { CancellationTokenSource, env } from 'vscode';
 
-import { QueryWithResults, tmpDir, QueryInfo } from './run-queries';
+import { QueryWithResults, QueryEvaluationInfo } from './run-queries';
 import * as messages from './pure/messages';
 import * as cli from './cli';
-import * as sarif from 'sarif';
 import * as fs from 'fs-extra';
 import * as path from 'path';
-import { RawResultsSortState, SortedResultSetInfo, DatabaseInfo, QueryMetadata, InterpretedResultsSortState, ResultsPaths } from './pure/interface-types';
+import {
+  RawResultsSortState,
+  SortedResultSetInfo,
+  QueryMetadata,
+  InterpretedResultsSortState,
+  ResultsPaths,
+  SarifInterpretationData,
+  GraphInterpretationData
+} from './pure/interface-types';
 import { QueryHistoryConfig } from './config';
-import { QueryHistoryItemOptions } from './query-history';
+import { DatabaseInfo } from './pure/interface-types';
+import { QueryStatus } from './query-status';
+import { RemoteQueryHistoryItem } from './remote-queries/remote-query-history-item';
 
-export class CompletedQuery implements QueryWithResults {
-  readonly date: Date;
-  readonly time: string;
-  readonly query: QueryInfo;
+/**
+ * query-results.ts
+ * ----------------
+ *
+ * A collection of classes and functions that collectively
+ * manage query results.
+ */
+
+/**
+ * A description of the information about a query
+ * that is available before results are populated.
+ */
+export interface InitialQueryInfo {
+  userSpecifiedLabel?: string; // if missing, use a default label
+  readonly queryText: string; // text of the selected file, or the selected text when doing quick eval
+  readonly isQuickQuery: boolean;
+  readonly isQuickEval: boolean;
+  readonly quickEvalPosition?: messages.Position;
+  readonly queryPath: string;
+  readonly databaseInfo: DatabaseInfo
+  readonly start: Date;
+  readonly id: string; // unique id for this query.
+}
+
+export class CompletedQueryInfo implements QueryWithResults {
+  readonly query: QueryEvaluationInfo;
   readonly result: messages.EvaluationResult;
-  readonly database: DatabaseInfo;
   readonly logFileLocation?: string;
-  options: QueryHistoryItemOptions;
   resultCount: number;
+
+  /**
+   * This dispose method is called when the query is removed from the history view.
+   */
   dispose: () => void;
 
   /**
    * Map from result set name to SortedResultSetInfo.
    */
-  sortedResultsInfo: Map<string, SortedResultSetInfo>;
+  sortedResultsInfo: Record<string, SortedResultSetInfo>;
 
   /**
    * How we're currently sorting alerts. This is not mere interface
@@ -35,20 +68,23 @@ export class CompletedQuery implements QueryWithResults {
    */
   interpretedResultsSortState: InterpretedResultsSortState | undefined;
 
+  /**
+   * Note that in the {@link FullQueryInfo.slurp} method, we create a CompletedQueryInfo instance
+   * by explicitly setting the prototype in order to avoid calling this constructor.
+   */
   constructor(
     evaluation: QueryWithResults,
-    public config: QueryHistoryConfig,
   ) {
     this.query = evaluation.query;
     this.result = evaluation.result;
-    this.database = evaluation.database;
     this.logFileLocation = evaluation.logFileLocation;
-    this.options = evaluation.options;
+
+    // Use the dispose method from the evaluation.
+    // The dispose will clean up any additional log locations that this
+    // query may have created.
     this.dispose = evaluation.dispose;
 
-    this.date = new Date();
-    this.time = this.date.toLocaleString(env.language);
-    this.sortedResultsInfo = new Map();
+    this.sortedResultsInfo = {};
     this.resultCount = 0;
   }
 
@@ -56,26 +92,16 @@ export class CompletedQuery implements QueryWithResults {
     this.resultCount = value;
   }
 
-  get databaseName(): string {
-    return this.database.name;
-  }
-  get queryName(): string {
-    return getQueryName(this.query);
-  }
-  get queryFileName(): string {
-    return getQueryFileName(this.query);
-  }
-
   get statusString(): string {
     switch (this.result.resultType) {
       case messages.QueryResultType.CANCELLATION:
-        return `cancelled after ${this.result.evaluationTime / 1000} seconds`;
+        return `cancelled after ${Math.round(this.result.evaluationTime / 1000)} seconds`;
       case messages.QueryResultType.OOM:
         return 'out of memory';
       case messages.QueryResultType.SUCCESS:
-        return `finished in ${this.result.evaluationTime / 1000} seconds`;
+        return `finished in ${Math.round(this.result.evaluationTime / 1000)} seconds`;
       case messages.QueryResultType.TIMEOUT:
-        return `timed out after ${this.result.evaluationTime / 1000} seconds`;
+        return `timed out after ${Math.round(this.result.evaluationTime / 1000)} seconds`;
       case messages.QueryResultType.OTHER_ERROR:
       default:
         return this.result.message ? `failed: ${this.result.message}` : 'failed';
@@ -86,52 +112,26 @@ export class CompletedQuery implements QueryWithResults {
     if (!useSorted) {
       return this.query.resultsPaths.resultsPath;
     }
-    return this.sortedResultsInfo.get(selectedTable)?.resultsPath
+    return this.sortedResultsInfo[selectedTable]?.resultsPath
       || this.query.resultsPaths.resultsPath;
   }
 
-  interpolate(template: string): string {
-    const { databaseName, queryName, time, resultCount, statusString, queryFileName } = this;
-    const replacements: { [k: string]: string } = {
-      t: time,
-      q: queryName,
-      d: databaseName,
-      r: resultCount.toString(),
-      s: statusString,
-      f: queryFileName,
-      '%': '%',
-    };
-    return template.replace(/%(.)/g, (match, key) => {
-      const replacement = replacements[key];
-      return replacement !== undefined ? replacement : match;
-    });
-  }
-
-  getLabel(): string {
-    return this.options?.label
-      || this.config.format;
-  }
-
   get didRunSuccessfully(): boolean {
     return this.result.resultType === messages.QueryResultType.SUCCESS;
   }
 
-  toString(): string {
-    return this.interpolate(this.getLabel());
-  }
-
   async updateSortState(
     server: cli.CodeQLCliServer,
     resultSetName: string,
     sortState?: RawResultsSortState
   ): Promise<void> {
     if (sortState === undefined) {
-      this.sortedResultsInfo.delete(resultSetName);
+      delete this.sortedResultsInfo[resultSetName];
       return;
     }
 
     const sortedResultSetInfo: SortedResultSetInfo = {
-      resultsPath: path.join(tmpDir.name, `sortedResults${this.query.queryID}-${resultSetName}.bqrs`),
+      resultsPath: this.query.getSortedResultSetPath(resultSetName),
       sortState
     };
 
@@ -142,7 +142,7 @@ export class CompletedQuery implements QueryWithResults {
       [sortState.columnIndex],
       [sortState.sortDirection]
     );
-    this.sortedResultsInfo.set(resultSetName, sortedResultSetInfo);
+    this.sortedResultsInfo[resultSetName] = sortedResultSetInfo;
   }
 
   async updateInterpretedSortState(sortState?: InterpretedResultsSortState): Promise<void> {
@@ -152,49 +152,39 @@ export class CompletedQuery implements QueryWithResults {
 
 
 /**
- * Gets a human-readable name for an evaluated query.
- * Uses metadata if it exists, and defaults to the query file name.
+ * Call cli command to interpret SARIF results.
  */
-export function getQueryName(query: QueryInfo) {
-  if (query.quickEvalPosition !== undefined) {
-    return 'Quick evaluation of ' + getQueryFileName(query);
-  } else if (query.metadata?.name) {
-    return query.metadata.name;
-  } else {
-    return getQueryFileName(query);
-  }
-}
-
-/**
- * Gets the file name for an evaluated query.
- * Defaults to the query file name and may contain position information for quick eval queries.
- */
-export function getQueryFileName(query: QueryInfo) {
-  // Queries run through quick evaluation are not usually the entire query file.
-  // Label them differently and include the line numbers.
-  if (query.quickEvalPosition !== undefined) {
-    const { line, endLine, fileName } = query.quickEvalPosition;
-    const lineInfo = line === endLine ? `${line}` : `${line}-${endLine}`;
-    return `${path.basename(fileName)}:${lineInfo}`;
-  }
-  return path.basename(query.program.queryPath);
-}
-
-
-/**
- * Call cli command to interpret results.
- */
-export async function interpretResults(
-  server: cli.CodeQLCliServer,
+export async function interpretResultsSarif(
+  cli: cli.CodeQLCliServer,
   metadata: QueryMetadata | undefined,
   resultsPaths: ResultsPaths,
   sourceInfo?: cli.SourceInfo
-): Promise<sarif.Log> {
+): Promise<SarifInterpretationData> {
   const { resultsPath, interpretedResultsPath } = resultsPaths;
   if (await fs.pathExists(interpretedResultsPath)) {
-    return JSON.parse(await fs.readFile(interpretedResultsPath, 'utf8'));
+    return { ...JSON.parse(await fs.readFile(interpretedResultsPath, 'utf8')), t: 'SarifInterpretationData' };
   }
-  return await server.interpretBqrs(ensureMetadataIsComplete(metadata), resultsPath, interpretedResultsPath, sourceInfo);
+  const res = await cli.interpretBqrsSarif(ensureMetadataIsComplete(metadata), resultsPath, interpretedResultsPath, sourceInfo);
+  return { ...res, t: 'SarifInterpretationData' };
+}
+
+/**
+ * Call cli command to interpret graph results.
+ */
+export async function interpretGraphResults(
+  cli: cli.CodeQLCliServer,
+  metadata: QueryMetadata | undefined,
+  resultsPaths: ResultsPaths,
+  sourceInfo?: cli.SourceInfo
+): Promise<GraphInterpretationData> {
+  const { resultsPath, interpretedResultsPath } = resultsPaths;
+  if (await fs.pathExists(interpretedResultsPath)) {
+    const dot = await cli.readDotFiles(interpretedResultsPath);
+    return { dot, t: 'GraphInterpretationData' };
+  }
+
+  const dot = await cli.interpretBqrsGraph(ensureMetadataIsComplete(metadata), resultsPath, interpretedResultsPath, sourceInfo);
+  return { dot, t: 'GraphInterpretationData' };
 }
 
 export function ensureMetadataIsComplete(metadata: QueryMetadata | undefined) {
@@ -211,3 +201,162 @@ export function ensureMetadataIsComplete(metadata: QueryMetadata | undefined) {
   }
   return metadata;
 }
+
+/**
+ * Used in Interface and Compare-Interface for queries that we know have been complated.
+ */
+export type CompletedLocalQueryInfo = LocalQueryInfo & {
+  completedQuery: CompletedQueryInfo
+};
+
+export type QueryHistoryInfo = LocalQueryInfo | RemoteQueryHistoryItem;
+
+export class LocalQueryInfo {
+  readonly t = 'local';
+
+  public failureReason: string | undefined;
+  public completedQuery: CompletedQueryInfo | undefined;
+  public evalLogLocation: string | undefined;
+  public evalLogSummaryLocation: string | undefined;
+  private config: QueryHistoryConfig | undefined;
+
+  /**
+   * Note that in the {@link slurpQueryHistory} method, we create a FullQueryInfo instance
+   * by explicitly setting the prototype in order to avoid calling this constructor.
+   */
+  constructor(
+    public readonly initialInfo: InitialQueryInfo,
+    config: QueryHistoryConfig,
+    private cancellationSource?: CancellationTokenSource // used to cancel in progress queries
+  ) {
+    this.setConfig(config);
+  }
+
+  cancel() {
+    this.cancellationSource?.cancel();
+    // query is no longer in progress, can delete the cancellation token source
+    this.cancellationSource?.dispose();
+    delete this.cancellationSource;
+  }
+
+  get startTime() {
+    return this.initialInfo.start.toLocaleString(env.language);
+  }
+
+  interpolate(template: string): string {
+    const { resultCount = 0, statusString = 'in progress' } = this.completedQuery || {};
+    const replacements: { [k: string]: string } = {
+      t: this.startTime,
+      q: this.getQueryName(),
+      d: this.initialInfo.databaseInfo.name,
+      r: resultCount.toString(),
+      s: statusString,
+      f: this.getQueryFileName(),
+      '%': '%',
+    };
+    return template.replace(/%(.)/g, (match, key) => {
+      const replacement = replacements[key];
+      return replacement !== undefined ? replacement : match;
+    });
+  }
+
+  /**
+   * Returns a label for this query that includes interpolated values.
+   */
+  get label(): string {
+    return this.interpolate(
+      this.initialInfo.userSpecifiedLabel ?? this.config?.format ?? ''
+    );
+  }
+
+  /**
+   * Avoids getting the default label for the query.
+   * If there is a custom label for this query, interpolate and use that.
+   * Otherwise, use the name of the query.
+   *
+   * @returns the name of the query, unless there is a custom label for this query.
+   */
+  getShortLabel(): string {
+    return this.initialInfo.userSpecifiedLabel
+      ? this.interpolate(this.initialInfo.userSpecifiedLabel)
+      : this.getQueryName();
+  }
+
+  /**
+   * The query's file name, unless it is a quick eval.
+   * Queries run through quick evaluation are not usually the entire query file.
+   * Label them differently and include the line numbers.
+   */
+  getQueryFileName() {
+    if (this.initialInfo.quickEvalPosition) {
+      const { line, endLine, fileName } = this.initialInfo.quickEvalPosition;
+      const lineInfo = line === endLine ? `${line}` : `${line}-${endLine}`;
+      return `${path.basename(fileName)}:${lineInfo}`;
+    }
+    return path.basename(this.initialInfo.queryPath);
+  }
+
+  /**
+   * Three cases:
+   *
+   * - If this is a completed query, use the query name from the query metadata.
+   * - If this is a quick eval, return the query name with a prefix
+   * - Otherwise, return the query file name.
+   */
+  getQueryName() {
+    if (this.initialInfo.quickEvalPosition) {
+      return 'Quick evaluation of ' + this.getQueryFileName();
+    } else if (this.completedQuery?.query.metadata?.name) {
+      return this.completedQuery?.query.metadata?.name;
+    } else {
+      return this.getQueryFileName();
+    }
+  }
+
+  get completed(): boolean {
+    return !!this.completedQuery;
+  }
+
+  completeThisQuery(info: QueryWithResults) {
+    this.completedQuery = new CompletedQueryInfo(info);
+
+    // dispose of the cancellation token source and also ensure the source is not serialized as JSON
+    this.cancellationSource?.dispose();
+    delete this.cancellationSource;
+  }
+
+  /**
+   * If there is a failure reason, then this query has failed.
+   * If there is no completed query, then this query is still running.
+   * If there is a completed query, then check if didRunSuccessfully.
+   * If true, then this query has completed successfully, otherwise it has failed.
+   */
+  get status(): QueryStatus {
+    if (this.failureReason) {
+      return QueryStatus.Failed;
+    } else if (!this.completedQuery) {
+      return QueryStatus.InProgress;
+    } else if (this.completedQuery.didRunSuccessfully) {
+      return QueryStatus.Completed;
+    } else {
+      return QueryStatus.Failed;
+    }
+  }
+
+  /**
+   * The `config` property must not be serialized since it contains a listerner
+   * for global configuration changes. Instead, It should be set when the query
+   * is deserialized.
+   *
+   * @param config the global query history config object
+   */
+  setConfig(config: QueryHistoryConfig) {
+    // avoid serializing config property
+    Object.defineProperty(this, 'config', {
+      enumerable: false,
+      writable: false,
+      configurable: true,
+      value: config
+    });
+  }
+}

extensions/ql-vscode/src/query-serialization.ts

@@ -0,0 +1,99 @@
+import * as fs from 'fs-extra';
+import * as path from 'path';
+
+import { QueryHistoryConfig } from './config';
+import { showAndLogErrorMessage } from './helpers';
+import { asyncFilter, getErrorMessage, getErrorStack } from './pure/helpers-pure';
+import { CompletedQueryInfo, LocalQueryInfo, QueryHistoryInfo } from './query-results';
+import { QueryEvaluationInfo } from './run-queries';
+
+export async function slurpQueryHistory(fsPath: string, config: QueryHistoryConfig): Promise<QueryHistoryInfo[]> {
+  try {
+    if (!(await fs.pathExists(fsPath))) {
+      return [];
+    }
+
+    const data = await fs.readFile(fsPath, 'utf8');
+    const obj = JSON.parse(data);
+    if (obj.version !== 1) {
+      void showAndLogErrorMessage(`Unsupported query history format: v${obj.version}. `);
+      return [];
+    }
+
+    const queries = obj.queries;
+    const parsedQueries = queries.map((q: QueryHistoryInfo) => {
+
+      // Need to explicitly set prototype since reading in from JSON will not
+      // do this automatically. Note that we can't call the constructor here since
+      // the constructor invokes extra logic that we don't want to do.
+      if (q.t === 'local') {
+        Object.setPrototypeOf(q, LocalQueryInfo.prototype);
+
+        // The config object is a global, se we need to set it explicitly
+        // and ensure it is not serialized to JSON.
+        q.setConfig(config);
+
+        // Date instances are serialized as strings. Need to
+        // convert them back to Date instances.
+        (q.initialInfo as any).start = new Date(q.initialInfo.start);
+        if (q.completedQuery) {
+          // Again, need to explicitly set prototypes.
+          Object.setPrototypeOf(q.completedQuery, CompletedQueryInfo.prototype);
+          Object.setPrototypeOf(q.completedQuery.query, QueryEvaluationInfo.prototype);
+          // slurped queries do not need to be disposed
+          q.completedQuery.dispose = () => { /**/ };
+        }
+      } else if (q.t === 'remote') {
+        // noop
+      }
+      return q;
+    });
+
+    // filter out queries that have been deleted on disk
+    // most likely another workspace has deleted them because the
+    // queries aged out.
+    return asyncFilter(parsedQueries, async (q) => {
+      if (q.t === 'remote') {
+        // the slurper doesn't know where the remote queries are stored
+        // so we need to assume here that they exist. Later, we check to
+        // see if they exist on disk.
+        return true;
+      }
+      const resultsPath = q.completedQuery?.query.resultsPaths.resultsPath;
+      return !!resultsPath && await fs.pathExists(resultsPath);
+    });
+  } catch (e) {
+    void showAndLogErrorMessage('Error loading query history.', {
+      fullMessage: ['Error loading query history.', getErrorStack(e)].join('\n'),
+    });
+    // since the query history is invalid, it should be deleted so this error does not happen on next startup.
+    await fs.remove(fsPath);
+    return [];
+  }
+}
+
+/**
+ * Save the query history to disk. It is not necessary that the parent directory
+ * exists, but if it does, it must be writable. An existing file will be overwritten.
+ *
+ * Any errors will be rethrown.
+ *
+ * @param queries the list of queries to save.
+ * @param fsPath the path to save the queries to.
+ */
+export async function splatQueryHistory(queries: QueryHistoryInfo[], fsPath: string): Promise<void> {
+  try {
+    if (!(await fs.pathExists(fsPath))) {
+      await fs.mkdir(path.dirname(fsPath), { recursive: true });
+    }
+    // remove incomplete local queries since they cannot be recreated on restart
+    const filteredQueries = queries.filter(q => q.t === 'local' ? q.completedQuery !== undefined : true);
+    const data = JSON.stringify({
+      version: 1,
+      queries: filteredQueries
+    }, null, 2);
+    await fs.writeFile(fsPath, data);
+  } catch (e) {
+    throw new Error(`Error saving query history to ${fsPath}: ${getErrorMessage(e)}`);
+  }
+}

extensions/ql-vscode/src/query-status.ts

@@ -0,0 +1,5 @@
+export enum QueryStatus {
+  InProgress = 'InProgress',
+  Completed = 'Completed',
+  Failed = 'Failed',
+}

extensions/ql-vscode/src/queryserver-client.ts

@@ -1,5 +1,7 @@
 import * as cp from 'child_process';
 import * as path from 'path';
+import * as fs from 'fs-extra';
+
 import { DisposableObject } from './pure/disposable-object';
 import { Disposable, CancellationToken, commands } from 'vscode';
 import { createMessageConnection, MessageConnection, RequestType } from 'vscode-jsonrpc';
@@ -9,8 +11,6 @@ import { Logger, ProgressReporter } from './logging';
 import { completeQuery, EvaluationResult, progress, ProgressMessage, WithProgressId } from './pure/messages';
 import * as messages from './pure/messages';
 import { ProgressCallback, ProgressTask } from './commandRunner';
-import * as fs from 'fs-extra';
-import * as helpers from './helpers';
 
 type ServerOpts = {
   logger: Logger;
@@ -68,7 +68,7 @@ export class QueryServerClient extends DisposableObject {
     this.queryServerStartListeners.push(e);
   }
 
-  public activeQueryName: string | undefined;
+  public activeQueryLogFile: string | undefined;
 
   constructor(
     readonly config: QueryServerConfig,
@@ -89,26 +89,6 @@ export class QueryServerClient extends DisposableObject {
     this.evaluationResultCallbacks = {};
   }
 
-  async initLogger() {
-    let storagePath = this.opts.contextStoragePath;
-    let isCustomLogDirectory = false;
-    if (this.config.customLogDirectory) {
-      try {
-        if (!(await fs.pathExists(this.config.customLogDirectory))) {
-          await fs.mkdir(this.config.customLogDirectory);
-        }
-        void this.logger.log(`Saving query server logs to user-specified directory: ${this.config.customLogDirectory}.`);
-        storagePath = this.config.customLogDirectory;
-        isCustomLogDirectory = true;
-      } catch (e) {
-        void helpers.showAndLogErrorMessage(`${this.config.customLogDirectory} is not a valid directory. Logs will be stored in a temporary workspace directory instead.`);
-      }
-    }
-
-    await this.logger.setLogStoragePath(storagePath, isCustomLogDirectory);
-
-  }
-
   get logger(): Logger {
     return this.opts.logger;
   }
@@ -150,7 +130,6 @@ export class QueryServerClient extends DisposableObject {
 
   /** Starts a new query server process, sending progress messages to the given reporter. */
   private async startQueryServerImpl(progressReporter: ProgressReporter): Promise<void> {
-    await this.initLogger();
     const ramArgs = await this.cliServer.resolveRam(this.config.queryMemoryMb, progressReporter);
     const args = ['--threads', this.config.numThreads.toString()].concat(ramArgs);
 
@@ -167,12 +146,29 @@ export class QueryServerClient extends DisposableObject {
       args.push('--require-db-registration');
     }
 
+    if (await this.cliServer.cliConstraints.supportsOldEvalStats() && !(await this.cliServer.cliConstraints.supportsPerQueryEvalLog())) {
+      args.push('--old-eval-stats');
+    }
+
+    if (await this.cliServer.cliConstraints.supportsStructuredEvalLog()) {
+      const structuredLogFile = `${this.opts.contextStoragePath}/structured-evaluator-log.json`;
+      await fs.ensureFile(structuredLogFile);
+
+      args.push('--evaluator-log');
+      args.push(structuredLogFile);
+
+      // We hard-code the verbosity level to 5 and minify to false.
+      // This will be the behavior of the per-query structured logging in the CLI after 2.8.3.
+      args.push('--evaluator-log-level');
+      args.push('5');
+    }
+
     if (this.config.debug) {
       args.push('--debug', '--tuple-counting');
     }
 
     if (cli.shouldDebugQueryServer()) {
-      args.push('-J=-agentlib:jdwp=transport=dt_socket,address=localhost:9010,server=y,suspend=n,quiet=y');
+      args.push('-J=-agentlib:jdwp=transport=dt_socket,address=localhost:9010,server=n,suspend=y,quiet=y');
     }
 
     const child = cli.spawnServer(
@@ -183,7 +179,7 @@ export class QueryServerClient extends DisposableObject {
       this.logger,
       data => this.logger.log(data.toString(), {
         trailingNewline: false,
-        additionalLogLocation: this.activeQueryName
+        additionalLogLocation: this.activeQueryLogFile
       }),
       undefined, // no listener for stdout
       progressReporter
@@ -194,10 +190,6 @@ export class QueryServerClient extends DisposableObject {
       if (!(res.runId in this.evaluationResultCallbacks)) {
         void this.logger.log(`No callback associated with run id ${res.runId}, continuing without executing any callback`);
       } else {
-        const baseLocation = this.logger.getBaseLocation();
-        if (baseLocation && this.activeQueryName) {
-          res.logFileLocation = path.join(baseLocation, this.activeQueryName);
-        }
         this.evaluationResultCallbacks[res.runId](res);
       }
       return {};
@@ -230,7 +222,7 @@ export class QueryServerClient extends DisposableObject {
   }
 
   get serverProcessPid(): number {
-    return this.serverProcess!.child.pid;
+    return this.serverProcess!.child.pid || 0;
   }
 
   async sendRequest<P, R, E, RO>(type: RequestType<WithProgressId<P>, R, E, RO>, parameter: P, token?: CancellationToken, progress?: (res: ProgressMessage) => void): Promise<R> {
@@ -258,8 +250,23 @@ export class QueryServerClient extends DisposableObject {
    */
   private updateActiveQuery(method: string, parameter: any): void {
     if (method === messages.compileQuery.method) {
-      const queryPath = parameter?.queryToCheck?.queryPath || 'unknown';
-      this.activeQueryName = `query-${path.basename(queryPath)}-${this.nextProgress}.log`;
+      this.activeQueryLogFile = findQueryLogFile(path.dirname(parameter.resultPath));
     }
   }
 }
+
+export function findQueryLogFile(resultPath: string): string {
+  return path.join(resultPath, 'query.log');
+}
+
+export function findQueryEvalLogFile(resultPath: string): string {
+  return path.join(resultPath, 'evaluator-log.jsonl');
+}
+
+export function findQueryEvalLogSummaryFile(resultPath: string): string {
+  return path.join(resultPath, 'evaluator-log.summary');
+}
+
+export function findQueryEvalLogEndSummaryFile(resultPath: string): string {
+  return path.join(resultPath, 'evaluator-log-end.summary');
+}

extensions/ql-vscode/src/quick-query.ts

@@ -21,6 +21,7 @@ import {
   ProgressCallback,
   UserCancellationException
 } from './commandRunner';
+import { getErrorMessage } from './pure/helpers-pure';
 
 const QUICK_QUERIES_DIR_NAME = 'quick-queries';
 const QUICK_QUERY_QUERY_NAME = 'quick-query.ql';
@@ -132,7 +133,7 @@ export async function displayQuickQuery(
     await Window.showTextDocument(await workspace.openTextDocument(qlFile));
   } catch (e) {
     if (e instanceof ResponseError && e.code == ErrorCodes.RequestCancelled) {
-      throw new UserCancellationException(e.message);
+      throw new UserCancellationException(getErrorMessage(e));
     } else {
       throw e;
     }

extensions/ql-vscode/src/quickEvalCodeLensProvider.ts

@@ -0,0 +1,46 @@
+import {
+  CodeLensProvider,
+  TextDocument,
+  CodeLens,
+  Command,
+  Range
+} from 'vscode';
+import { isQuickEvalCodelensEnabled } from './config';
+
+class QuickEvalCodeLensProvider implements CodeLensProvider {
+  async provideCodeLenses(document: TextDocument): Promise<CodeLens[]> {
+
+    const codeLenses: CodeLens[] = [];
+
+    if (isQuickEvalCodelensEnabled()) {
+      for (let index = 0; index < document.lineCount; index++) {
+        const textLine = document.lineAt(index);
+
+        // Match a predicate signature, including predicate name, parameter list, and opening brace.
+        // This currently does not match predicates that span multiple lines.
+        const regex = new RegExp(/(\w+)\s*\([^()]*\)\s*\{/);
+
+        const matches = textLine.text.match(regex);
+
+        // Make sure that a code lens is not generated for any predicate that is commented out.
+        if (matches && !(/^\s*\/\//).test(textLine.text)) {
+          const range: Range = new Range(
+            textLine.range.start.line, matches.index!,
+            textLine.range.end.line, matches.index! + 1
+          );
+
+          const command: Command = {
+            command: 'codeQL.codeLensQuickEval',
+            title: `Quick Evaluation: ${matches[1]}`,
+            arguments: [document.uri, range]
+          };
+          const codeLens = new CodeLens(range, command);
+          codeLenses.push(codeLens);
+        }
+      }
+    }
+    return codeLenses;
+  }
+}
+
+export default QuickEvalCodeLensProvider;

extensions/ql-vscode/src/remote-queries/analyses-results-manager.ts

@@ -0,0 +1,202 @@
+import * as fs from 'fs-extra';
+import * as os from 'os';
+import * as path from 'path';
+import { CancellationToken, ExtensionContext } from 'vscode';
+
+import { Credentials } from '../authentication';
+import { Logger } from '../logging';
+import { downloadArtifactFromLink } from './gh-actions-api-client';
+import { AnalysisSummary } from './shared/remote-query-result';
+import { AnalysisResults, AnalysisAlert, AnalysisRawResults } from './shared/analysis-result';
+import { UserCancellationException } from '../commandRunner';
+import { sarifParser } from '../sarif-parser';
+import { extractAnalysisAlerts } from './sarif-processing';
+import { CodeQLCliServer } from '../cli';
+import { extractRawResults } from './bqrs-processing';
+import { asyncFilter, getErrorMessage } from '../pure/helpers-pure';
+import { createDownloadPath } from './download-link';
+
+export class AnalysesResultsManager {
+  // Store for the results of various analyses for each remote query.
+  // The key is the queryId and is also the name of the directory where results are stored.
+  private readonly analysesResults: Map<string, AnalysisResults[]>;
+
+  constructor(
+    private readonly ctx: ExtensionContext,
+    private readonly cliServer: CodeQLCliServer,
+    readonly storagePath: string,
+    private readonly logger: Logger,
+  ) {
+    this.analysesResults = new Map();
+  }
+
+  public async downloadAnalysisResults(
+    analysisSummary: AnalysisSummary,
+    publishResults: (analysesResults: AnalysisResults[]) => Promise<void>
+  ): Promise<void> {
+    if (this.isAnalysisInMemory(analysisSummary)) {
+      // We already have the results for this analysis in memory, don't download again.
+      return;
+    }
+
+    const credentials = await Credentials.initialize(this.ctx);
+
+    void this.logger.log(`Downloading and processing results for ${analysisSummary.nwo}`);
+
+    await this.downloadSingleAnalysisResults(analysisSummary, credentials, publishResults);
+  }
+
+  /**
+   * Loads the array analysis results. For each analysis results, if it is not downloaded yet,
+   * it will be downloaded. If it is already downloaded, it will be loaded into memory.
+   * If it is already in memory, this will be a no-op.
+   *
+   * @param allAnalysesToLoad List of analyses to ensure are downloaded and in memory
+   * @param token Optional cancellation token
+   * @param publishResults Optional function to publish the results after loading
+   */
+  public async loadAnalysesResults(
+    allAnalysesToLoad: AnalysisSummary[],
+    token?: CancellationToken,
+    publishResults: (analysesResults: AnalysisResults[]) => Promise<void> = () => Promise.resolve()
+  ): Promise<void> {
+    // Filter out analyses that we have already in memory.
+    const analysesToDownload = allAnalysesToLoad.filter(x => !this.isAnalysisInMemory(x));
+
+    const credentials = await Credentials.initialize(this.ctx);
+
+    void this.logger.log('Downloading and processing analyses results');
+
+    const batchSize = 3;
+    const numOfBatches = Math.ceil(analysesToDownload.length / batchSize);
+    const allFailures = [];
+
+    for (let i = 0; i < analysesToDownload.length; i += batchSize) {
+      if (token?.isCancellationRequested) {
+        throw new UserCancellationException('Downloading of analyses results has been cancelled', true);
+      }
+
+      const batch = analysesToDownload.slice(i, i + batchSize);
+      const batchTasks = batch.map(analysis => this.downloadSingleAnalysisResults(analysis, credentials, publishResults));
+
+      const nwos = batch.map(a => a.nwo).join(', ');
+      void this.logger.log(`Downloading batch ${Math.floor(i / batchSize) + 1} of ${numOfBatches} (${nwos})`);
+
+      const taskResults = await Promise.allSettled(batchTasks);
+      const failedTasks = taskResults.filter(x => x.status === 'rejected') as Array<PromiseRejectedResult>;
+      if (failedTasks.length > 0) {
+        const failures = failedTasks.map(t => t.reason.message);
+        failures.forEach(f => void this.logger.log(f));
+        allFailures.push(...failures);
+      }
+    }
+
+    if (allFailures.length > 0) {
+      throw Error(allFailures.join(os.EOL));
+    }
+  }
+
+  public getAnalysesResults(queryId: string): AnalysisResults[] {
+    return [...this.internalGetAnalysesResults(queryId)];
+  }
+
+  private internalGetAnalysesResults(queryId: string): AnalysisResults[] {
+    return this.analysesResults.get(queryId) || [];
+  }
+
+  public removeAnalysesResults(queryId: string) {
+    this.analysesResults.delete(queryId);
+  }
+
+  private async downloadSingleAnalysisResults(
+    analysis: AnalysisSummary,
+    credentials: Credentials,
+    publishResults: (analysesResults: AnalysisResults[]) => Promise<void>
+  ): Promise<void> {
+    const analysisResults: AnalysisResults = {
+      nwo: analysis.nwo,
+      status: 'InProgress',
+      interpretedResults: []
+    };
+    const queryId = analysis.downloadLink.queryId;
+    const resultsForQuery = this.internalGetAnalysesResults(queryId);
+    resultsForQuery.push(analysisResults);
+    this.analysesResults.set(queryId, resultsForQuery);
+    void publishResults([...resultsForQuery]);
+    const pos = resultsForQuery.length - 1;
+
+    let artifactPath;
+    try {
+      artifactPath = await downloadArtifactFromLink(credentials, this.storagePath, analysis.downloadLink);
+    }
+    catch (e) {
+      throw new Error(`Could not download the analysis results for ${analysis.nwo}: ${getErrorMessage(e)}`);
+    }
+
+    const fileLinkPrefix = this.createGitHubDotcomFileLinkPrefix(analysis.nwo, analysis.databaseSha);
+
+    let newAnaysisResults: AnalysisResults;
+    const fileExtension = path.extname(artifactPath);
+    if (fileExtension === '.sarif') {
+      const queryResults = await this.readSarifResults(artifactPath, fileLinkPrefix);
+      newAnaysisResults = {
+        ...analysisResults,
+        interpretedResults: queryResults,
+        status: 'Completed'
+      };
+    } else if (fileExtension === '.bqrs') {
+      const queryResults = await this.readBqrsResults(artifactPath, fileLinkPrefix);
+      newAnaysisResults = {
+        ...analysisResults,
+        rawResults: queryResults,
+        status: 'Completed'
+      };
+    } else {
+      void this.logger.log(`Cannot download results. File type '${fileExtension}' not supported.`);
+      newAnaysisResults = {
+        ...analysisResults,
+        status: 'Failed'
+      };
+    }
+    resultsForQuery[pos] = newAnaysisResults;
+    void publishResults([...resultsForQuery]);
+  }
+
+
+  public async loadDownloadedAnalyses(
+    allAnalysesToCheck: AnalysisSummary[]
+  ) {
+
+    // Find all analyses that are already downloaded.
+    const allDownloadedAnalyses = await asyncFilter(allAnalysesToCheck, x => this.isAnalysisDownloaded(x));
+    // Now, ensure that all of these analyses are in memory. Some may already be in memory. These are ignored.
+    await this.loadAnalysesResults(allDownloadedAnalyses);
+  }
+
+  private async isAnalysisDownloaded(analysis: AnalysisSummary): Promise<boolean> {
+    return await fs.pathExists(createDownloadPath(this.storagePath, analysis.downloadLink));
+  }
+
+  private async readBqrsResults(filePath: string, fileLinkPrefix: string): Promise<AnalysisRawResults> {
+    return await extractRawResults(this.cliServer, this.logger, filePath, fileLinkPrefix);
+  }
+
+  private async readSarifResults(filePath: string, fileLinkPrefix: string): Promise<AnalysisAlert[]> {
+    const sarifLog = await sarifParser(filePath);
+
+    const processedSarif = extractAnalysisAlerts(sarifLog, fileLinkPrefix);
+    if (processedSarif.errors.length) {
+      void this.logger.log(`Error processing SARIF file: ${os.EOL}${processedSarif.errors.join(os.EOL)}`);
+    }
+
+    return processedSarif.alerts;
+  }
+
+  private isAnalysisInMemory(analysis: AnalysisSummary): boolean {
+    return this.internalGetAnalysesResults(analysis.downloadLink.queryId).some(x => x.nwo === analysis.nwo);
+  }
+
+  private createGitHubDotcomFileLinkPrefix(nwo: string, sha: string): string {
+    return `https://github.com/${nwo}/blob/${sha}`;
+  }
+}

extensions/ql-vscode/src/remote-queries/bqrs-processing.ts

@@ -0,0 +1,35 @@
+import { CodeQLCliServer } from '../cli';
+import { Logger } from '../logging';
+import { transformBqrsResultSet } from '../pure/bqrs-cli-types';
+import { AnalysisRawResults } from './shared/analysis-result';
+import { MAX_RAW_RESULTS } from './shared/result-limits';
+
+export async function extractRawResults(
+  cliServer: CodeQLCliServer,
+  logger: Logger,
+  filePath: string,
+  fileLinkPrefix: string,
+): Promise<AnalysisRawResults> {
+  const bqrsInfo = await cliServer.bqrsInfo(filePath);
+  const resultSets = bqrsInfo['result-sets'];
+
+  if (resultSets.length < 1) {
+    throw new Error('No result sets found in results file.');
+  }
+  if (resultSets.length > 1) {
+    void logger.log('Multiple result sets found in results file. Only the first one will be used.');
+  }
+
+  const schema = resultSets[0];
+
+  const chunk = await cliServer.bqrsDecode(
+    filePath,
+    schema.name,
+    { pageSize: MAX_RAW_RESULTS });
+
+  const resultSet = transformBqrsResultSet(schema, chunk);
+
+  const capped = !!chunk.next;
+
+  return { schema, resultSet, fileLinkPrefix, capped };
+}

extensions/ql-vscode/src/remote-queries/download-link.ts

@@ -0,0 +1,40 @@
+import * as path from 'path';
+
+/**
+ * Represents a link to an artifact to be downloaded.
+ */
+export interface DownloadLink {
+  /**
+   *  A unique id of the artifact being downloaded.
+   */
+  id: string;
+
+  /**
+   * The URL path to use against the GitHub API to download the
+   * linked artifact.
+   */
+  urlPath: string;
+
+  /**
+   * An optional path to follow inside the downloaded archive containing the artifact.
+   */
+  innerFilePath?: string;
+
+  /**
+   * A unique id of the remote query run. This is used to determine where to store artifacts and data from the run.
+   */
+  queryId: string;
+}
+
+/**
+ * Converts a downloadLink to the path where the artifact should be stored.
+ *
+ * @param storagePath The base directory to store artifacts in.
+ * @param downloadLink The DownloadLink
+ * @param extension An optional file extension to append to the artifact (no `.`).
+ *
+ * @returns A full path to the download location of the artifact
+ */
+export function createDownloadPath(storagePath: string, downloadLink: DownloadLink, extension = '') {
+  return path.join(storagePath, downloadLink.queryId, downloadLink.id + (extension ? `.${extension}` : ''));
+}

extensions/ql-vscode/src/remote-queries/gh-actions-api-client.ts

@@ -0,0 +1,284 @@
+import * as unzipper from 'unzipper';
+import * as path from 'path';
+import * as fs from 'fs-extra';
+import { showAndLogWarningMessage, tmpDir } from '../helpers';
+import { Credentials } from '../authentication';
+import { logger } from '../logging';
+import { RemoteQueryWorkflowResult } from './remote-query-workflow-result';
+import { DownloadLink, createDownloadPath } from './download-link';
+import { RemoteQuery } from './remote-query';
+import { RemoteQueryFailureIndexItem, RemoteQueryResultIndex, RemoteQuerySuccessIndexItem } from './remote-query-result-index';
+
+interface ApiSuccessIndexItem {
+  nwo: string;
+  id: string;
+  sha?: string;
+  results_count: number;
+  bqrs_file_size: number;
+  sarif_file_size?: number;
+}
+
+interface ApiFailureIndexItem {
+  nwo: string;
+  id: string;
+  error: string;
+}
+
+interface ApiResultIndex {
+  successes: ApiSuccessIndexItem[];
+  failures: ApiFailureIndexItem[];
+}
+
+export async function getRemoteQueryIndex(
+  credentials: Credentials,
+  remoteQuery: RemoteQuery
+): Promise<RemoteQueryResultIndex | undefined> {
+  const controllerRepo = remoteQuery.controllerRepository;
+  const owner = controllerRepo.owner;
+  const repoName = controllerRepo.name;
+  const workflowRunId = remoteQuery.actionsWorkflowRunId;
+
+  const workflowUri = `https://github.com/${owner}/${repoName}/actions/runs/${workflowRunId}`;
+  const artifactsUrlPath = `/repos/${owner}/${repoName}/actions/artifacts`;
+
+  const artifactList = await listWorkflowRunArtifacts(credentials, owner, repoName, workflowRunId);
+  const resultIndexArtifactId = getArtifactIDfromName('result-index', workflowUri, artifactList);
+  const resultIndex = await getResultIndex(credentials, owner, repoName, resultIndexArtifactId);
+
+  const successes = resultIndex?.successes.map(item => {
+    const artifactId = getArtifactIDfromName(item.id, workflowUri, artifactList);
+
+    return {
+      id: item.id.toString(),
+      artifactId: artifactId,
+      nwo: item.nwo,
+      sha: item.sha,
+      resultCount: item.results_count,
+      bqrsFileSize: item.bqrs_file_size,
+      sarifFileSize: item.sarif_file_size
+    } as RemoteQuerySuccessIndexItem;
+  });
+
+  const failures = resultIndex?.failures.map(item => {
+    return {
+      id: item.id.toString(),
+      nwo: item.nwo,
+      error: item.error
+    } as RemoteQueryFailureIndexItem;
+  });
+
+  return {
+    artifactsUrlPath,
+    successes: successes || [],
+    failures: failures || []
+  };
+}
+
+export async function downloadArtifactFromLink(
+  credentials: Credentials,
+  storagePath: string,
+  downloadLink: DownloadLink
+): Promise<string> {
+
+  const octokit = await credentials.getOctokit();
+
+  const extractedPath = createDownloadPath(storagePath, downloadLink);
+
+  // first check if we already have the artifact
+  if (!(await fs.pathExists(extractedPath))) {
+    // Download the zipped artifact.
+    const response = await octokit.request(`GET ${downloadLink.urlPath}/zip`, {});
+
+    const zipFilePath = createDownloadPath(storagePath, downloadLink, 'zip');
+    await saveFile(`${zipFilePath}`, response.data as ArrayBuffer);
+
+    // Extract the zipped artifact.
+    await unzipFile(zipFilePath, extractedPath);
+  }
+  return path.join(extractedPath, downloadLink.innerFilePath || '');
+}
+
+/**
+ * Downloads the result index artifact and extracts the result index items.
+ * @param credentials Credentials for authenticating to the GitHub API.
+ * @param owner
+ * @param repo
+ * @param workflowRunId The ID of the workflow run to get the result index for.
+ * @returns An object containing the result index.
+ */
+async function getResultIndex(
+  credentials: Credentials,
+  owner: string,
+  repo: string,
+  artifactId: number
+): Promise<ApiResultIndex | undefined> {
+  const artifactPath = await downloadArtifact(credentials, owner, repo, artifactId);
+  const indexFilePath = path.join(artifactPath, 'index.json');
+  if (!(await fs.pathExists(indexFilePath))) {
+    void showAndLogWarningMessage('Could not find an `index.json` file in the result artifact.');
+    return undefined;
+  }
+  const resultIndex = await fs.readFile(path.join(artifactPath, 'index.json'), 'utf8');
+
+  try {
+    return JSON.parse(resultIndex);
+  } catch (error) {
+    throw new Error(`Invalid result index file: ${error}`);
+  }
+}
+
+/**
+ * Gets the status of a workflow run.
+ * @param credentials Credentials for authenticating to the GitHub API.
+ * @param owner
+ * @param repo
+ * @param workflowRunId The ID of the workflow run to get the result index for.
+ * @returns The workflow run status.
+ */
+export async function getWorkflowStatus(
+  credentials: Credentials,
+  owner: string,
+  repo: string,
+  workflowRunId: number): Promise<RemoteQueryWorkflowResult> {
+  const octokit = await credentials.getOctokit();
+
+  const workflowRun = await octokit.rest.actions.getWorkflowRun({
+    owner,
+    repo,
+    run_id: workflowRunId
+  });
+
+  if (workflowRun.data.status === 'completed') {
+    if (workflowRun.data.conclusion === 'success') {
+      return { status: 'CompletedSuccessfully' };
+    } else {
+      const error = getWorkflowError(workflowRun.data.conclusion);
+      return { status: 'CompletedUnsuccessfully', error };
+    }
+  }
+
+  return { status: 'InProgress' };
+}
+
+/**
+ * Lists the workflow run artifacts for the given workflow run ID.
+ * @param credentials Credentials for authenticating to the GitHub API.
+ * @param owner
+ * @param repo
+ * @param workflowRunId The ID of the workflow run to list artifacts for.
+ * @returns An array of artifact details (including artifact name and ID).
+ */
+async function listWorkflowRunArtifacts(
+  credentials: Credentials,
+  owner: string,
+  repo: string,
+  workflowRunId: number
+) {
+  const octokit = await credentials.getOctokit();
+
+  // There are limits on the number of artifacts that are returned by the API
+  // so we use paging to make sure we retrieve all of them.
+  let morePages = true;
+  let pageNum = 1;
+  const allArtifacts = [];
+
+  while (morePages) {
+    const response = await octokit.rest.actions.listWorkflowRunArtifacts({
+      owner,
+      repo,
+      run_id: workflowRunId,
+      per_page: 100,
+      page: pageNum
+    });
+
+    allArtifacts.push(...response.data.artifacts);
+    pageNum++;
+    if (response.data.artifacts.length < 100) {
+      morePages = false;
+    }
+  }
+
+  return allArtifacts;
+}
+
+/**
+ * @param artifactName The artifact name, as a string.
+ * @param artifacts An array of artifact details (from the "list workflow run artifacts" API response).
+ * @returns The artifact ID corresponding to the given artifact name.
+ */
+function getArtifactIDfromName(
+  artifactName: string,
+  workflowUri: string,
+  artifacts: Array<{ id: number, name: string }>
+): number {
+  const artifact = artifacts.find(a => a.name === artifactName);
+
+  if (!artifact) {
+    const errorMessage =
+      `Could not find artifact with name ${artifactName} in workflow ${workflowUri}.
+      Please check whether the workflow run has successfully completed.`;
+    throw Error(errorMessage);
+  }
+
+  return artifact?.id;
+}
+
+/**
+ * Downloads an artifact from a workflow run.
+ * @param credentials Credentials for authenticating to the GitHub API.
+ * @param owner
+ * @param repo
+ * @param artifactId The ID of the artifact to download.
+ * @returns The path to the enclosing directory of the unzipped artifact.
+ */
+async function downloadArtifact(
+  credentials: Credentials,
+  owner: string,
+  repo: string,
+  artifactId: number
+): Promise<string> {
+  const octokit = await credentials.getOctokit();
+  const response = await octokit.rest.actions.downloadArtifact({
+    owner,
+    repo,
+    artifact_id: artifactId,
+    archive_format: 'zip',
+  });
+  const artifactPath = path.join(tmpDir.name, `${artifactId}`);
+  await saveFile(`${artifactPath}.zip`, response.data as ArrayBuffer);
+  await unzipFile(`${artifactPath}.zip`, artifactPath);
+  return artifactPath;
+}
+
+async function saveFile(filePath: string, data: ArrayBuffer): Promise<void> {
+  void logger.log(`Saving file to ${filePath}`);
+  await fs.writeFile(filePath, Buffer.from(data));
+}
+
+async function unzipFile(sourcePath: string, destinationPath: string) {
+  void logger.log(`Unzipping file to ${destinationPath}`);
+  const file = await unzipper.Open.file(sourcePath);
+  await file.extract({ path: destinationPath });
+}
+
+function getWorkflowError(conclusion: string | null): string {
+  if (!conclusion) {
+    return 'Workflow finished without a conclusion';
+  }
+
+  if (conclusion === 'cancelled') {
+    return 'Variant analysis execution was cancelled.';
+  }
+
+  if (conclusion === 'timed_out') {
+    return 'Variant analysis execution timed out.';
+  }
+
+  if (conclusion === 'failure') {
+    // TODO: Get the actual error from the workflow or potentially
+    // from an artifact from the action itself.
+    return 'Variant analysis execution has failed.';
+  }
+
+  return `Unexpected variant analysis execution conclusion: ${conclusion}`;
+}

extensions/ql-vscode/src/remote-queries/remote-queries-interface.ts

@@ -0,0 +1,302 @@
+import {
+  WebviewPanel,
+  ExtensionContext,
+  window as Window,
+  ViewColumn,
+  Uri,
+  workspace
+} from 'vscode';
+import * as path from 'path';
+
+import {
+  ToRemoteQueriesMessage,
+  FromRemoteQueriesMessage,
+  RemoteQueryDownloadAnalysisResultsMessage,
+  RemoteQueryDownloadAllAnalysesResultsMessage
+} from '../pure/interface-types';
+import { Logger } from '../logging';
+import { getHtmlForWebview } from '../interface-utils';
+import { assertNever } from '../pure/helpers-pure';
+import { AnalysisSummary, RemoteQueryResult } from './remote-query-result';
+import { RemoteQuery } from './remote-query';
+import { RemoteQueryResult as RemoteQueryResultViewModel } from './shared/remote-query-result';
+import { AnalysisSummary as AnalysisResultViewModel } from './shared/remote-query-result';
+import { showAndLogWarningMessage } from '../helpers';
+import { URLSearchParams } from 'url';
+import { SHOW_QUERY_TEXT_MSG } from '../query-history';
+import { AnalysesResultsManager } from './analyses-results-manager';
+import { AnalysisResults } from './shared/analysis-result';
+
+export class RemoteQueriesInterfaceManager {
+  private panel: WebviewPanel | undefined;
+  private panelLoaded = false;
+  private panelLoadedCallBacks: (() => void)[] = [];
+
+  constructor(
+    private readonly ctx: ExtensionContext,
+    private readonly logger: Logger,
+    private readonly analysesResultsManager: AnalysesResultsManager
+  ) {
+    this.panelLoadedCallBacks.push(() => {
+      void logger.log('Remote queries view loaded');
+    });
+  }
+
+  async showResults(query: RemoteQuery, queryResult: RemoteQueryResult) {
+    this.getPanel().reveal(undefined, true);
+
+    await this.waitForPanelLoaded();
+    const model = this.buildViewModel(query, queryResult);
+    await this.postMessage({
+      t: 'setRemoteQueryResult',
+      queryResult: model
+    });
+
+    // Ensure all pre-downloaded artifacts are loaded into memory
+    await this.analysesResultsManager.loadDownloadedAnalyses(model.analysisSummaries);
+
+    await this.setAnalysisResults(this.analysesResultsManager.getAnalysesResults(queryResult.queryId));
+  }
+
+  /**
+   * Builds up a model tailored to the view based on the query and result domain entities.
+   * The data is cleaned up, sorted where necessary, and transformed to a format that
+   * the view model can use.
+   * @param query Information about the query that was run.
+   * @param queryResult The result of the query.
+   * @returns A fully created view model.
+   */
+  private buildViewModel(query: RemoteQuery, queryResult: RemoteQueryResult): RemoteQueryResultViewModel {
+    const queryFileName = path.basename(query.queryFilePath);
+    const totalResultCount = queryResult.analysisSummaries.reduce((acc, cur) => acc + cur.resultCount, 0);
+    const executionDuration = this.getDuration(queryResult.executionEndTime, query.executionStartTime);
+    const analysisSummaries = this.buildAnalysisSummaries(queryResult.analysisSummaries);
+    const totalRepositoryCount = queryResult.analysisSummaries.length;
+    const affectedRepositories = queryResult.analysisSummaries.filter(r => r.resultCount > 0);
+
+    return {
+      queryTitle: query.queryName,
+      queryFileName: queryFileName,
+      queryFilePath: query.queryFilePath,
+      queryText: query.queryText,
+      language: query.language,
+      workflowRunUrl: `https://github.com/${query.controllerRepository.owner}/${query.controllerRepository.name}/actions/runs/${query.actionsWorkflowRunId}`,
+      totalRepositoryCount: totalRepositoryCount,
+      affectedRepositoryCount: affectedRepositories.length,
+      totalResultCount: totalResultCount,
+      executionTimestamp: this.formatDate(query.executionStartTime),
+      executionDuration: executionDuration,
+      analysisSummaries: analysisSummaries,
+      analysisFailures: queryResult.analysisFailures,
+    };
+  }
+
+  getPanel(): WebviewPanel {
+    if (this.panel == undefined) {
+      const { ctx } = this;
+      const panel = (this.panel = Window.createWebviewPanel(
+        'remoteQueriesView',
+        'CodeQL Query Results',
+        { viewColumn: ViewColumn.Active, preserveFocus: true },
+        {
+          enableScripts: true,
+          enableFindWidget: true,
+          retainContextWhenHidden: true,
+          localResourceRoots: [
+            Uri.file(this.analysesResultsManager.storagePath),
+            Uri.file(path.join(this.ctx.extensionPath, 'out')),
+          ],
+        }
+      ));
+      this.panel.onDidDispose(
+        () => {
+          this.panel = undefined;
+        },
+        null,
+        ctx.subscriptions
+      );
+
+      const scriptPathOnDisk = Uri.file(
+        ctx.asAbsolutePath('out/remoteQueriesView.js')
+      );
+
+      const baseStylesheetUriOnDisk = Uri.file(
+        ctx.asAbsolutePath('out/remote-queries/view/baseStyles.css')
+      );
+
+      const stylesheetPathOnDisk = Uri.file(
+        ctx.asAbsolutePath('out/remote-queries/view/remoteQueries.css')
+      );
+
+      panel.webview.html = getHtmlForWebview(
+        panel.webview,
+        scriptPathOnDisk,
+        [baseStylesheetUriOnDisk, stylesheetPathOnDisk],
+        true
+      );
+      ctx.subscriptions.push(
+        panel.webview.onDidReceiveMessage(
+          async (e) => this.handleMsgFromView(e),
+          undefined,
+          ctx.subscriptions
+        )
+      );
+    }
+    return this.panel;
+  }
+
+  private waitForPanelLoaded(): Promise<void> {
+    return new Promise((resolve) => {
+      if (this.panelLoaded) {
+        resolve();
+      } else {
+        this.panelLoadedCallBacks.push(resolve);
+      }
+    });
+  }
+
+  private async openFile(filePath: string) {
+    try {
+      const textDocument = await workspace.openTextDocument(filePath);
+      await Window.showTextDocument(textDocument, ViewColumn.One);
+    } catch (error) {
+      void showAndLogWarningMessage(`Could not open file: ${filePath}`);
+    }
+  }
+
+  private async openVirtualFile(text: string) {
+    try {
+      const params = new URLSearchParams({
+        queryText: encodeURIComponent(SHOW_QUERY_TEXT_MSG + text)
+      });
+      const uri = Uri.parse(
+        `remote-query:query-text.ql?${params.toString()}`,
+        true
+      );
+      const doc = await workspace.openTextDocument(uri);
+      await Window.showTextDocument(doc, { preview: false });
+    } catch (error) {
+      void showAndLogWarningMessage('Could not open query text');
+    }
+  }
+
+  private async handleMsgFromView(
+    msg: FromRemoteQueriesMessage
+  ): Promise<void> {
+    switch (msg.t) {
+      case 'remoteQueryLoaded':
+        this.panelLoaded = true;
+        this.panelLoadedCallBacks.forEach((cb) => cb());
+        this.panelLoadedCallBacks = [];
+        break;
+      case 'remoteQueryError':
+        void this.logger.log(
+          `Variant analysis error: ${msg.error}`
+        );
+        break;
+      case 'openFile':
+        await this.openFile(msg.filePath);
+        break;
+      case 'openVirtualFile':
+        await this.openVirtualFile(msg.queryText);
+        break;
+      case 'remoteQueryDownloadAnalysisResults':
+        await this.downloadAnalysisResults(msg);
+        break;
+      case 'remoteQueryDownloadAllAnalysesResults':
+        await this.downloadAllAnalysesResults(msg);
+        break;
+      default:
+        assertNever(msg);
+    }
+  }
+
+  private async downloadAnalysisResults(msg: RemoteQueryDownloadAnalysisResultsMessage): Promise<void> {
+    await this.analysesResultsManager.downloadAnalysisResults(
+      msg.analysisSummary,
+      results => this.setAnalysisResults(results));
+  }
+
+  private async downloadAllAnalysesResults(msg: RemoteQueryDownloadAllAnalysesResultsMessage): Promise<void> {
+    await this.analysesResultsManager.loadAnalysesResults(
+      msg.analysisSummaries,
+      undefined,
+      results => this.setAnalysisResults(results));
+  }
+
+  public async setAnalysisResults(analysesResults: AnalysisResults[]): Promise<void> {
+    if (this.panel?.active) {
+      await this.postMessage({
+        t: 'setAnalysesResults',
+        analysesResults: analysesResults
+      });
+    }
+  }
+
+  private postMessage(msg: ToRemoteQueriesMessage): Thenable<boolean> {
+    return this.getPanel().webview.postMessage(msg);
+  }
+
+  private getDuration(startTime: number, endTime: number): string {
+    const diffInMs = startTime - endTime;
+    return this.formatDuration(diffInMs);
+  }
+
+  private formatDuration(ms: number): string {
+    const seconds = ms / 1000;
+    const minutes = seconds / 60;
+    const hours = minutes / 60;
+    const days = hours / 24;
+    if (days > 1) {
+      return `${days.toFixed(2)} days`;
+    } else if (hours > 1) {
+      return `${hours.toFixed(2)} hours`;
+    } else if (minutes > 1) {
+      return `${minutes.toFixed(2)} minutes`;
+    } else {
+      return `${seconds.toFixed(2)} seconds`;
+    }
+  }
+
+  private formatDate = (millis: number): string => {
+    const d = new Date(millis);
+    const datePart = d.toLocaleDateString(undefined, { day: 'numeric', month: 'short' });
+    const timePart = d.toLocaleTimeString(undefined, { hour: 'numeric', minute: 'numeric', hour12: true });
+    return `${datePart} at ${timePart}`;
+  };
+
+  private formatFileSize(bytes: number): string {
+    const kb = bytes / 1024;
+    const mb = kb / 1024;
+    const gb = mb / 1024;
+
+    if (bytes < 1024) {
+      return `${bytes} bytes`;
+    } else if (kb < 1024) {
+      return `${kb.toFixed(2)} KB`;
+    } else if (mb < 1024) {
+      return `${mb.toFixed(2)} MB`;
+    } else {
+      return `${gb.toFixed(2)} GB`;
+    }
+  }
+
+  /**
+   * Builds up a list of analysis summaries, in a data structure tailored to the view.
+   * @param analysisSummaries The summaries of a specific analyses.
+   * @returns A fully created view model.
+   */
+  private buildAnalysisSummaries(analysisSummaries: AnalysisSummary[]): AnalysisResultViewModel[] {
+    const filteredAnalysisSummaries = analysisSummaries.filter(r => r.resultCount > 0);
+
+    const sortedAnalysisSummaries = filteredAnalysisSummaries.sort((a, b) => b.resultCount - a.resultCount);
+
+    return sortedAnalysisSummaries.map((analysisResult) => ({
+      nwo: analysisResult.nwo,
+      databaseSha: analysisResult.databaseSha || 'HEAD',
+      resultCount: analysisResult.resultCount,
+      downloadLink: analysisResult.downloadLink,
+      fileSize: this.formatFileSize(analysisResult.fileSizeInBytes)
+    }));
+  }
+}

extensions/ql-vscode/src/remote-queries/remote-queries-manager.ts

@@ -0,0 +1,279 @@
+import { CancellationToken, commands, ExtensionContext, Uri, window } from 'vscode';
+import { nanoid } from 'nanoid';
+import * as path from 'path';
+import * as fs from 'fs-extra';
+
+import { Credentials } from '../authentication';
+import { CodeQLCliServer } from '../cli';
+import { ProgressCallback } from '../commandRunner';
+import { createTimestampFile, showAndLogErrorMessage, showInformationMessageWithAction } from '../helpers';
+import { Logger } from '../logging';
+import { runRemoteQuery } from './run-remote-query';
+import { RemoteQueriesInterfaceManager } from './remote-queries-interface';
+import { RemoteQuery } from './remote-query';
+import { RemoteQueriesMonitor } from './remote-queries-monitor';
+import { getRemoteQueryIndex } from './gh-actions-api-client';
+import { RemoteQueryResultIndex } from './remote-query-result-index';
+import { RemoteQueryResult } from './remote-query-result';
+import { DownloadLink } from './download-link';
+import { AnalysesResultsManager } from './analyses-results-manager';
+import { assertNever } from '../pure/helpers-pure';
+import { RemoteQueryHistoryItem } from './remote-query-history-item';
+import { QueryHistoryManager } from '../query-history';
+import { QueryStatus } from '../query-status';
+import { DisposableObject } from '../pure/disposable-object';
+import { QueryHistoryInfo } from '../query-results';
+
+const autoDownloadMaxSize = 300 * 1024;
+const autoDownloadMaxCount = 100;
+
+const noop = () => { /* do nothing */ };
+export class RemoteQueriesManager extends DisposableObject {
+  private readonly remoteQueriesMonitor: RemoteQueriesMonitor;
+  private readonly analysesResultsManager: AnalysesResultsManager;
+  private readonly interfaceManager: RemoteQueriesInterfaceManager;
+
+  constructor(
+    private readonly ctx: ExtensionContext,
+    private readonly cliServer: CodeQLCliServer,
+    private readonly qhm: QueryHistoryManager,
+    private readonly storagePath: string,
+    logger: Logger,
+  ) {
+    super();
+    this.analysesResultsManager = new AnalysesResultsManager(ctx, cliServer, storagePath, logger);
+    this.interfaceManager = new RemoteQueriesInterfaceManager(ctx, logger, this.analysesResultsManager);
+    this.remoteQueriesMonitor = new RemoteQueriesMonitor(ctx, logger);
+
+    // Handle events from the query history manager
+    this.push(this.qhm.onDidAddQueryItem(this.handleAddQueryItem.bind(this)));
+    this.push(this.qhm.onDidRemoveQueryItem(this.handleRemoveQueryItem.bind(this)));
+    this.push(this.qhm.onWillOpenQueryItem(this.handleOpenQueryItem.bind(this)));
+  }
+
+  private async handleAddQueryItem(queryItem: QueryHistoryInfo) {
+    if (queryItem?.t === 'remote') {
+      if (!(await this.queryHistoryItemExists(queryItem))) {
+        // In this case, the query was deleted from disk, most likely because it was purged
+        // by another workspace. We should remove it from the history manager.
+        await this.qhm.handleRemoveHistoryItem(queryItem);
+      } else if (queryItem.status === QueryStatus.InProgress) {
+        // In this case, last time we checked, the query was still in progress.
+        // We need to setup the monitor to check for completion.
+        await commands.executeCommand('codeQL.monitorRemoteQuery', queryItem);
+      }
+    }
+  }
+
+  private async handleRemoveQueryItem(queryItem: QueryHistoryInfo) {
+    if (queryItem?.t === 'remote') {
+      this.analysesResultsManager.removeAnalysesResults(queryItem.queryId);
+      await this.removeStorageDirectory(queryItem);
+    }
+  }
+
+  private async handleOpenQueryItem(queryItem: QueryHistoryInfo) {
+    if (queryItem?.t === 'remote') {
+      try {
+        const remoteQueryResult = await this.retrieveJsonFile(queryItem, 'query-result.json') as RemoteQueryResult;
+        // open results in the background
+        void this.openResults(queryItem.remoteQuery, remoteQueryResult).then(
+          noop,
+          err => void showAndLogErrorMessage(err)
+        );
+      } catch (e) {
+        void showAndLogErrorMessage(`Could not open query results. ${e}`);
+      }
+    }
+  }
+
+  public async runRemoteQuery(
+    uri: Uri | undefined,
+    progress: ProgressCallback,
+    token: CancellationToken
+  ): Promise<void> {
+    const credentials = await Credentials.initialize(this.ctx);
+
+    const querySubmission = await runRemoteQuery(
+      this.cliServer,
+      credentials, uri || window.activeTextEditor?.document.uri,
+      false,
+      progress,
+      token);
+
+    if (querySubmission?.query) {
+      const query = querySubmission.query;
+      const queryId = this.createQueryId(query.queryName);
+
+      const queryHistoryItem: RemoteQueryHistoryItem = {
+        t: 'remote',
+        status: QueryStatus.InProgress,
+        completed: false,
+        queryId,
+        label: query.queryName,
+        remoteQuery: query,
+      };
+      await this.prepareStorageDirectory(queryHistoryItem);
+      await this.storeJsonFile(queryHistoryItem, 'query.json', query);
+
+      this.qhm.addQuery(queryHistoryItem);
+      await this.qhm.refreshTreeView();
+    }
+  }
+
+  public async monitorRemoteQuery(
+    queryItem: RemoteQueryHistoryItem,
+    cancellationToken: CancellationToken
+  ): Promise<void> {
+    const credentials = await Credentials.initialize(this.ctx);
+
+    const queryWorkflowResult = await this.remoteQueriesMonitor.monitorQuery(queryItem.remoteQuery, cancellationToken);
+
+    const executionEndTime = Date.now();
+
+    if (queryWorkflowResult.status === 'CompletedSuccessfully') {
+      const resultIndex = await getRemoteQueryIndex(credentials, queryItem.remoteQuery);
+      queryItem.completed = true;
+      if (resultIndex) {
+        queryItem.status = QueryStatus.Completed;
+        const queryResult = this.mapQueryResult(executionEndTime, resultIndex, queryItem.queryId);
+
+        await this.storeJsonFile(queryItem, 'query-result.json', queryResult);
+
+        // Kick off auto-download of results in the background.
+        void commands.executeCommand('codeQL.autoDownloadRemoteQueryResults', queryResult);
+
+        // Ask if the user wants to open the results in the background.
+        void this.askToOpenResults(queryItem.remoteQuery, queryResult).then(
+          noop,
+          err => {
+            void showAndLogErrorMessage(err);
+          }
+        );
+      } else {
+        void showAndLogErrorMessage(`There was an issue retrieving the result for the query ${queryItem.label}`);
+        queryItem.status = QueryStatus.Failed;
+      }
+    } else if (queryWorkflowResult.status === 'CompletedUnsuccessfully') {
+      queryItem.failureReason = queryWorkflowResult.error;
+      queryItem.status = QueryStatus.Failed;
+      void showAndLogErrorMessage(`Variant analysis execution failed. Error: ${queryWorkflowResult.error}`);
+    } else if (queryWorkflowResult.status === 'Cancelled') {
+      queryItem.failureReason = 'Cancelled';
+      queryItem.status = QueryStatus.Failed;
+      void showAndLogErrorMessage('Variant analysis monitoring was cancelled');
+    } else if (queryWorkflowResult.status === 'InProgress') {
+      // Should not get here. Only including this to ensure `assertNever` uses proper type checking.
+      void showAndLogErrorMessage(`Unexpected status: ${queryWorkflowResult.status}`);
+    } else {
+      // Ensure all cases are covered
+      assertNever(queryWorkflowResult.status);
+    }
+    await this.qhm.refreshTreeView();
+  }
+
+  public async autoDownloadRemoteQueryResults(
+    queryResult: RemoteQueryResult,
+    token: CancellationToken
+  ): Promise<void> {
+    const analysesToDownload = queryResult.analysisSummaries
+      .filter(a => a.fileSizeInBytes < autoDownloadMaxSize)
+      .slice(0, autoDownloadMaxCount)
+      .map(a => ({
+        nwo: a.nwo,
+        databaseSha: a.databaseSha,
+        resultCount: a.resultCount,
+        downloadLink: a.downloadLink,
+        fileSize: String(a.fileSizeInBytes)
+      }));
+
+    await this.analysesResultsManager.loadAnalysesResults(
+      analysesToDownload,
+      token,
+      results => this.interfaceManager.setAnalysisResults(results));
+  }
+
+  private mapQueryResult(executionEndTime: number, resultIndex: RemoteQueryResultIndex, queryId: string): RemoteQueryResult {
+
+    const analysisSummaries = resultIndex.successes.map(item => ({
+      nwo: item.nwo,
+      databaseSha: item.sha || 'HEAD',
+      resultCount: item.resultCount,
+      fileSizeInBytes: item.sarifFileSize ? item.sarifFileSize : item.bqrsFileSize,
+      downloadLink: {
+        id: item.artifactId.toString(),
+        urlPath: `${resultIndex.artifactsUrlPath}/${item.artifactId}`,
+        innerFilePath: item.sarifFileSize ? 'results.sarif' : 'results.bqrs',
+        queryId,
+      } as DownloadLink
+    }));
+    const analysisFailures = resultIndex.failures.map(item => ({
+      nwo: item.nwo,
+      error: item.error
+    }));
+
+    return {
+      executionEndTime,
+      analysisSummaries,
+      analysisFailures,
+      queryId
+    };
+  }
+
+  public async openResults(query: RemoteQuery, queryResult: RemoteQueryResult) {
+    await this.interfaceManager.showResults(query, queryResult);
+  }
+
+  private async askToOpenResults(query: RemoteQuery, queryResult: RemoteQueryResult): Promise<void> {
+    const totalResultCount = queryResult.analysisSummaries.reduce((acc, cur) => acc + cur.resultCount, 0);
+    const totalRepoCount = queryResult.analysisSummaries.length;
+    const message = `Query "${query.queryName}" run on ${totalRepoCount} repositories and returned ${totalResultCount} results`;
+
+    const shouldOpenView = await showInformationMessageWithAction(message, 'View');
+    if (shouldOpenView) {
+      await this.openResults(query, queryResult);
+    }
+  }
+
+  /**
+   * Generates a unique id for this query, suitable for determining the storage location for the downloaded query artifacts.
+   * @param queryName
+   * @returns
+   */
+  private createQueryId(queryName: string): string {
+    return `${queryName}-${nanoid()}`;
+
+  }
+
+  /**
+   * Prepares a directory for storing analysis results for a single query run.
+   * This directory contains a timestamp file, which will be
+   * used by the query history manager to determine when the directory
+   * should be deleted.
+   *
+   * @param queryName The name of the query that was run.
+   */
+  private async prepareStorageDirectory(queryHistoryItem: RemoteQueryHistoryItem): Promise<void> {
+    await createTimestampFile(path.join(this.storagePath, queryHistoryItem.queryId));
+  }
+
+  private async storeJsonFile<T>(queryHistoryItem: RemoteQueryHistoryItem, fileName: string, obj: T): Promise<void> {
+    const filePath = path.join(this.storagePath, queryHistoryItem.queryId, fileName);
+    await fs.writeFile(filePath, JSON.stringify(obj, null, 2), 'utf8');
+  }
+
+  private async retrieveJsonFile<T>(queryHistoryItem: RemoteQueryHistoryItem, fileName: string): Promise<T> {
+    const filePath = path.join(this.storagePath, queryHistoryItem.queryId, fileName);
+    return JSON.parse(await fs.readFile(filePath, 'utf8'));
+  }
+
+  private async removeStorageDirectory(queryItem: RemoteQueryHistoryItem): Promise<void> {
+    const filePath = path.join(this.storagePath, queryItem.queryId);
+    await fs.remove(filePath);
+  }
+
+  private async queryHistoryItemExists(queryItem: RemoteQueryHistoryItem): Promise<boolean> {
+    const filePath = path.join(this.storagePath, queryItem.queryId);
+    return await fs.pathExists(filePath);
+  }
+}

extensions/ql-vscode/src/remote-queries/remote-queries-monitor.ts

@@ -0,0 +1,61 @@
+import * as vscode from 'vscode';
+import { Credentials } from '../authentication';
+import { Logger } from '../logging';
+import { getWorkflowStatus } from './gh-actions-api-client';
+import { RemoteQuery } from './remote-query';
+import { RemoteQueryWorkflowResult } from './remote-query-workflow-result';
+
+export class RemoteQueriesMonitor {
+  // With a sleep of 5 seconds, the maximum number of attempts takes
+  // us to just over 2 days worth of monitoring.
+  private static readonly maxAttemptCount = 17280;
+  private static readonly sleepTime = 5000;
+
+  constructor(
+    private readonly extensionContext: vscode.ExtensionContext,
+    private readonly logger: Logger
+  ) {
+  }
+
+  public async monitorQuery(
+    remoteQuery: RemoteQuery,
+    cancellationToken: vscode.CancellationToken
+  ): Promise<RemoteQueryWorkflowResult> {
+    const credentials = await Credentials.initialize(this.extensionContext);
+
+    if (!credentials) {
+      throw Error('Error authenticating with GitHub');
+    }
+
+    let attemptCount = 0;
+
+    while (attemptCount <= RemoteQueriesMonitor.maxAttemptCount) {
+      await this.sleep(RemoteQueriesMonitor.sleepTime);
+
+      if (cancellationToken && cancellationToken.isCancellationRequested) {
+        return { status: 'Cancelled' };
+      }
+
+      const workflowStatus = await getWorkflowStatus(
+        credentials,
+        remoteQuery.controllerRepository.owner,
+        remoteQuery.controllerRepository.name,
+        remoteQuery.actionsWorkflowRunId);
+
+      if (workflowStatus.status !== 'InProgress') {
+        return workflowStatus;
+      }
+
+      attemptCount++;
+    }
+
+    void this.logger.log('Variant analysis monitoring timed out after 2 days');
+    return { status: 'Cancelled' };
+  }
+
+  private async sleep(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+}
+
+

extensions/ql-vscode/src/remote-queries/remote-query-history-item.ts

@@ -0,0 +1,15 @@
+import { QueryStatus } from '../query-status';
+import { RemoteQuery } from './remote-query';
+
+/**
+ * Information about a remote query.
+ */
+export interface RemoteQueryHistoryItem {
+  readonly t: 'remote';
+  failureReason?: string;
+  status: QueryStatus;
+  completed: boolean;
+  readonly queryId: string,
+  label: string; // TODO, the query label should have interpolation like local queries
+  remoteQuery: RemoteQuery;
+}

extensions/ql-vscode/src/remote-queries/remote-query-result-index.ts

@@ -0,0 +1,22 @@
+export interface RemoteQueryResultIndex {
+  artifactsUrlPath: string;
+  successes: RemoteQuerySuccessIndexItem[];
+  failures: RemoteQueryFailureIndexItem[];
+}
+
+export interface RemoteQuerySuccessIndexItem {
+  id: string;
+  artifactId: number;
+  nwo: string;
+  sha?: string;
+  resultCount: number;
+  bqrsFileSize: number;
+  sarifFileSize?: number;
+}
+
+export interface RemoteQueryFailureIndexItem {
+  id: string;
+  artifactId: number;
+  nwo: string;
+  error: string;
+}

extensions/ql-vscode/src/remote-queries/remote-query-result.ts

@@ -0,0 +1,17 @@
+import { DownloadLink } from './download-link';
+import { AnalysisFailure } from './shared/analysis-failure';
+
+export interface RemoteQueryResult {
+  executionEndTime: number; // Can't use a Date here since it needs to be serialized and desserialized.
+  analysisSummaries: AnalysisSummary[];
+  analysisFailures: AnalysisFailure[];
+  queryId: string;
+}
+
+export interface AnalysisSummary {
+  nwo: string,
+  databaseSha: string,
+  resultCount: number,
+  downloadLink: DownloadLink,
+  fileSizeInBytes: number
+}

extensions/ql-vscode/src/remote-queries/remote-query-submission-result.ts

@@ -0,0 +1,6 @@
+import { RemoteQuery } from './remote-query';
+
+export interface RemoteQuerySubmissionResult {
+  queryDirPath?: string;
+  query?: RemoteQuery;
+}

extensions/ql-vscode/src/remote-queries/remote-query-workflow-result.ts

@@ -0,0 +1,10 @@
+export type RemoteQueryWorkflowStatus =
+  | 'InProgress'
+  | 'CompletedSuccessfully'
+  | 'CompletedUnsuccessfully'
+  | 'Cancelled';
+
+export interface RemoteQueryWorkflowResult {
+  status: RemoteQueryWorkflowStatus;
+  error?: string;
+}

extensions/ql-vscode/src/remote-queries/remote-query.ts

@@ -0,0 +1,11 @@
+import { Repository } from './repository';
+
+export interface RemoteQuery {
+  queryName: string;
+  queryFilePath: string;
+  queryText: string;
+  language: string;
+  controllerRepository: Repository;
+  executionStartTime: number; // Use number here since it needs to be serialized and desserialized.
+  actionsWorkflowRunId: number;
+}

extensions/ql-vscode/src/remote-queries/repository-selection.ts

@@ -0,0 +1,54 @@
+import { QuickPickItem, window } from 'vscode';
+import { showAndLogErrorMessage } from '../helpers';
+import { getRemoteRepositoryLists } from '../config';
+import { logger } from '../logging';
+import { REPO_REGEX } from '../pure/helpers-pure';
+
+interface RepoListQuickPickItem extends QuickPickItem {
+  repoList: string[];
+}
+
+/**
+ * Gets the repositories to run the query against.
+ */
+export async function getRepositories(): Promise<string[] | undefined> {
+  const repoLists = getRemoteRepositoryLists();
+  if (repoLists && Object.keys(repoLists).length) {
+    const quickPickItems = Object.entries(repoLists).map<RepoListQuickPickItem>(([key, value]) => (
+      {
+        label: key,       // the name of the repository list
+        repoList: value,  // the actual array of repositories
+      }
+    ));
+    const quickpick = await window.showQuickPick<RepoListQuickPickItem>(
+      quickPickItems,
+      {
+        placeHolder: 'Select a repository list. You can define repository lists in the `codeQL.variantAnalysis.repositoryLists` setting.',
+        ignoreFocusOut: true,
+      });
+    if (quickpick?.repoList.length) {
+      void logger.log(`Selected repositories: ${quickpick.repoList.join(', ')}`);
+      return quickpick.repoList;
+    } else {
+      void showAndLogErrorMessage('No repositories selected.');
+      return;
+    }
+  } else {
+    void logger.log('No repository lists defined. Displaying text input box.');
+    const remoteRepo = await window.showInputBox({
+      title: 'Enter a GitHub repository in the format <owner>/<repo> (e.g. github/codeql)',
+      placeHolder: '<owner>/<repo>',
+      prompt: 'Tip: you can save frequently used repositories in the `codeQL.variantAnalysis.repositoryLists` setting',
+      ignoreFocusOut: true,
+    });
+    if (!remoteRepo) {
+      void showAndLogErrorMessage('No repositories entered.');
+      return;
+    } else if (!REPO_REGEX.test(remoteRepo)) { // Check if user entered invalid input
+      void showAndLogErrorMessage('Invalid repository format. Must be in the format <owner>/<repo> (e.g. github/codeql)');
+      return;
+    }
+    void logger.log(`Entered repository: ${remoteRepo}`);
+    return [remoteRepo];
+  }
+}

extensions/ql-vscode/src/remote-queries/repository.ts

@@ -0,0 +1,4 @@
+export interface Repository {
+  owner: string;
+  name: string;
+}

extensions/ql-vscode/src/remote-queries/run-remote-query.ts

@@ -1,21 +1,28 @@
-import { CancellationToken, QuickPickItem, Uri, window } from 'vscode';
+import { CancellationToken, Uri, window } from 'vscode';
 import * as path from 'path';
 import * as yaml from 'js-yaml';
 import * as fs from 'fs-extra';
 import * as tmp from 'tmp-promise';
-import { askForLanguage, findLanguage, getOnDiskWorkspaceFolders, showAndLogErrorMessage, showAndLogInformationMessage, showInformationMessageWithAction } from './helpers';
-import { Credentials } from './authentication';
-import * as cli from './cli';
-import { logger } from './logging';
-import { getRemoteControllerRepo, getRemoteRepositoryLists, setRemoteControllerRepo } from './config';
-import { tmpDir } from './run-queries';
-import { ProgressCallback, UserCancellationException } from './commandRunner';
+import {
+  askForLanguage,
+  findLanguage,
+  getOnDiskWorkspaceFolders,
+  showAndLogErrorMessage,
+  showAndLogInformationMessage,
+  tryGetQueryMetadata,
+  tmpDir
+} from '../helpers';
+import { Credentials } from '../authentication';
+import * as cli from '../cli';
+import { logger } from '../logging';
+import { getActionBranch, getRemoteControllerRepo, setRemoteControllerRepo } from '../config';
+import { ProgressCallback, UserCancellationException } from '../commandRunner';
 import { OctokitResponse } from '@octokit/types/dist-types';
-interface Config {
-  repositories: string[];
-  ref?: string;
-  language?: string;
-}
+import { RemoteQuery } from './remote-query';
+import { RemoteQuerySubmissionResult } from './remote-query-submission-result';
+import { QueryMetadata } from '../pure/interface-types';
+import { getErrorMessage, REPO_REGEX } from '../pure/helpers-pure';
+import { getRepositories } from './repository-selection';
 
 export interface QlPack {
   name: string;
@@ -24,71 +31,16 @@ export interface QlPack {
   defaultSuite?: Record<string, unknown>[];
   defaultSuiteFile?: string;
 }
-interface RepoListQuickPickItem extends QuickPickItem {
-  repoList: string[];
-}
 
 interface QueriesResponse {
   workflow_run_id: number
 }
 
-/**
- * This regex matches strings of the form `owner/repo` where:
- * - `owner` is made up of alphanumeric characters or single hyphens, starting and ending in an alphanumeric character
- * - `repo` is made up of alphanumeric characters, hyphens, or underscores
- */
-const REPO_REGEX = /^(?:[a-zA-Z0-9]+-)*[a-zA-Z0-9]+\/[a-zA-Z0-9-_]+$/;
-
 /**
  * Well-known names for the query pack used by the server.
  */
 const QUERY_PACK_NAME = 'codeql-remote/query';
 
-/**
- * Gets the repositories to run the query against.
- */
-export async function getRepositories(): Promise<string[] | undefined> {
-  const repoLists = getRemoteRepositoryLists();
-  if (repoLists && Object.keys(repoLists).length) {
-    const quickPickItems = Object.entries(repoLists).map<RepoListQuickPickItem>(([key, value]) => (
-      {
-        label: key,       // the name of the repository list
-        repoList: value,  // the actual array of repositories
-      }
-    ));
-    const quickpick = await window.showQuickPick<RepoListQuickPickItem>(
-      quickPickItems,
-      {
-        placeHolder: 'Select a repository list. You can define repository lists in the `codeQL.remoteQueries.repositoryLists` setting.',
-        ignoreFocusOut: true,
-      });
-    if (quickpick?.repoList.length) {
-      void logger.log(`Selected repositories: ${quickpick.repoList.join(', ')}`);
-      return quickpick.repoList;
-    } else {
-      void showAndLogErrorMessage('No repositories selected.');
-      return;
-    }
-  } else {
-    void logger.log('No repository lists defined. Displaying text input box.');
-    const remoteRepo = await window.showInputBox({
-      title: 'Enter a GitHub repository in the format <owner>/<repo> (e.g. github/codeql)',
-      placeHolder: '<owner>/<repo>',
-      prompt: 'Tip: you can save frequently used repositories in the `codeQL.remoteQueries.repositoryLists` setting',
-      ignoreFocusOut: true,
-    });
-    if (!remoteRepo) {
-      void showAndLogErrorMessage('No repositories entered.');
-      return;
-    } else if (!REPO_REGEX.test(remoteRepo)) { // Check if user entered invalid input
-      void showAndLogErrorMessage('Invalid repository format. Must be in the format <owner>/<repo> (e.g. github/codeql)');
-      return;
-    }
-    void logger.log(`Entered repository: ${remoteRepo}`);
-    return [remoteRepo];
-  }
-}
-
 /**
  * Two possibilities:
  * 1. There is no qlpack.yml in this directory. Assume this is a lone query and generate a synthetic qlpack for it.
@@ -96,7 +48,7 @@ export async function getRepositories(): Promise<string[] | undefined> {
  *
  * @returns the entire qlpack as a base64 string.
  */
-async function generateQueryPack(cliServer: cli.CodeQLCliServer, queryFile: string, queryPackDir: string, fallbackLanguage?: string): Promise<{
+async function generateQueryPack(cliServer: cli.CodeQLCliServer, queryFile: string, queryPackDir: string): Promise<{
   base64Pack: string,
   language: string
 }> {
@@ -138,7 +90,7 @@ async function generateQueryPack(cliServer: cli.CodeQLCliServer, queryFile: stri
 
   } else {
     // open popup to ask for language if not already hardcoded
-    language = fallbackLanguage || await askForLanguage(cliServer);
+    language = await askForLanguage(cliServer);
 
     // copy only the query file to the query pack directory
     // and generate a synthetic query pack
@@ -160,6 +112,9 @@ async function generateQueryPack(cliServer: cli.CodeQLCliServer, queryFile: stri
 
   await ensureNameAndSuite(queryPackDir, packRelativePath);
 
+  // Clear the cliServer cache so that the previous qlpack text is purged from the CLI.
+  await cliServer.clearCache();
+
   const bundlePath = await getPackedBundlePath(queryPackDir);
   void logger.log(`Compiling and bundling query pack from ${queryPackDir} to ${bundlePath}. (This may take a while.)`);
   await cliServer.packInstall(queryPackDir);
@@ -214,7 +169,7 @@ export async function runRemoteQuery(
   dryRun: boolean,
   progress: ProgressCallback,
   token: CancellationToken
-): Promise<void | string> {
+): Promise<void | RemoteQuerySubmissionResult> {
   if (!(await cliServer.cliConstraints.supportsRemoteQueries())) {
     throw new Error(`Remote queries are not supported by this version of CodeQL. Please upgrade to v${cli.CliVersionConstraint.CLI_VERSION_REMOTE_QUERIES
       } or later.`);
@@ -226,47 +181,22 @@ export async function runRemoteQuery(
       throw new UserCancellationException('Not a CodeQL query file.');
     }
 
-    progress({
-      maxStep: 5,
-      step: 1,
-      message: 'Determining project list'
-    });
-
     const queryFile = uri.fsPath;
-    const repositoriesFile = queryFile.substring(0, queryFile.length - '.ql'.length) + '.repositories';
-    let ref: string | undefined;
-    // For the case of single file remote queries, use the language from the config in order to avoid the user having to select it.
-    let fallbackLanguage: string | undefined;
-    let repositories: string[] | undefined;
 
     progress({
-      maxStep: 5,
-      step: 2,
+      maxStep: 4,
+      step: 1,
       message: 'Determining query target language'
     });
 
-    // If the user has an explicit `.repositories` file, use that.
-    // Otherwise, prompt user to select repositories from the `codeQL.remoteQueries.repositoryLists` setting.
-    if (await fs.pathExists(repositoriesFile)) {
-      void logger.log(`Found '${repositoriesFile}'. Using information from that file to run ${queryFile}.`);
-
-      const config = yaml.safeLoad(await fs.readFile(repositoriesFile, 'utf8')) as Config;
-
-      ref = config.ref || 'main';
-      fallbackLanguage = config.language;
-      repositories = config.repositories;
-    } else {
-      ref = 'main';
-      repositories = await getRepositories();
-    }
-
+    const repositories = await getRepositories();
     if (!repositories || repositories.length === 0) {
       throw new UserCancellationException('No repositories to query.');
     }
 
     progress({
-      maxStep: 5,
-      step: 3,
+      maxStep: 4,
+      step: 2,
       message: 'Determining controller repo'
     });
 
@@ -297,8 +227,8 @@ export async function runRemoteQuery(
     const [owner, repo] = controllerRepo.split('/');
 
     progress({
-      maxStep: 5,
-      step: 4,
+      maxStep: 4,
+      step: 3,
       message: 'Bundling the query pack'
     });
 
@@ -306,25 +236,41 @@ export async function runRemoteQuery(
       throw new UserCancellationException('Cancelled');
     }
 
-    const { base64Pack, language } = await generateQueryPack(cliServer, queryFile, queryPackDir, fallbackLanguage);
+    const { base64Pack, language } = await generateQueryPack(cliServer, queryFile, queryPackDir);
 
     if (token.isCancellationRequested) {
       throw new UserCancellationException('Cancelled');
     }
 
     progress({
-      maxStep: 5,
-      step: 5,
+      maxStep: 4,
+      step: 4,
       message: 'Sending request'
     });
 
-    await runRemoteQueriesApiRequest(credentials, ref, language, repositories, owner, repo, base64Pack, dryRun);
+    const actionBranch = getActionBranch();
+    const workflowRunId = await runRemoteQueriesApiRequest(credentials, actionBranch, language, repositories, owner, repo, base64Pack, dryRun);
+    const queryStartTime = Date.now();
+    const queryMetadata = await tryGetQueryMetadata(cliServer, queryFile);
 
     if (dryRun) {
-      return remoteQueryDir.path;
+      return { queryDirPath: remoteQueryDir.path };
     } else {
+      if (!workflowRunId) {
+        return;
+      }
+
+      const remoteQuery = await buildRemoteQueryEntity(
+        queryFile,
+        queryMetadata,
+        owner,
+        repo,
+        queryStartTime,
+        workflowRunId,
+        language);
+
       // don't return the path because it has been deleted
-      return;
+      return { query: remoteQuery };
     }
 
   } finally {
@@ -346,8 +292,7 @@ async function runRemoteQueriesApiRequest(
   repo: string,
   queryPackBase64: string,
   dryRun = false
-): Promise<void> {
-
+): Promise<void | number> {
   if (dryRun) {
     void showAndLogInformationMessage('[DRY RUN] Would have sent request. See extension log for the payload.');
     void logger.log(JSON.stringify({ ref, language, repositories, owner, repo, queryPackBase64: queryPackBase64.substring(0, 100) + '... ' + queryPackBase64.length + ' bytes' }));
@@ -369,51 +314,11 @@ async function runRemoteQueriesApiRequest(
         }
       }
     );
-    void showAndLogInformationMessage(`Successfully scheduled runs. [Click here to see the progress](https://github.com/${owner}/${repo}/actions/runs/${response.data.workflow_run_id}).`);
-
+    const workflowRunId = response.data.workflow_run_id;
+    void showAndLogInformationMessage(`Successfully scheduled runs. [Click here to see the progress](https://github.com/${owner}/${repo}/actions/runs/${workflowRunId}).`);
+    return workflowRunId;
   } catch (error) {
-    await attemptRerun(error, credentials, ref, language, repositories, owner, repo, queryPackBase64, dryRun);
-  }
-}
-
-/** Attempts to rerun the query on only the valid repositories */
-export async function attemptRerun(
-  error: any,
-  credentials: Credentials,
-  ref: string,
-  language: string,
-  repositories: string[],
-  owner: string,
-  repo: string,
-  queryPackBase64: string,
-  dryRun = false
-) {
-  if (typeof error.message === 'string' && error.message.includes('Some repositories were invalid')) {
-    const invalidRepos = error?.response?.data?.invalid_repos || [];
-    const reposWithoutDbUploads = error?.response?.data?.repos_without_db_uploads || [];
-    void logger.log('Unable to run query on some of the specified repositories');
-    if (invalidRepos.length > 0) {
-      void logger.log(`Invalid repos: ${invalidRepos.join(', ')}`);
-    }
-    if (reposWithoutDbUploads.length > 0) {
-      void logger.log(`Repos without DB uploads: ${reposWithoutDbUploads.join(', ')}`);
-    }
-
-    if (invalidRepos.length + reposWithoutDbUploads.length === repositories.length) {
-      // Every repo is invalid in some way
-      void showAndLogErrorMessage('Unable to run query on any of the specified repositories.');
-      return;
-    }
-
-    const popupMessage = 'Unable to run query on some of the specified repositories. [See logs for more details](command:codeQL.showLogs).';
-    const rerunQuery = await showInformationMessageWithAction(popupMessage, 'Rerun on the valid repositories only');
-    if (rerunQuery) {
-      const validRepositories = repositories.filter(r => !invalidRepos.includes(r) && !reposWithoutDbUploads.includes(r));
-      void logger.log(`Rerunning query on set of valid repositories: ${JSON.stringify(validRepositories)}`);
-      await runRemoteQueriesApiRequest(credentials, ref, language, validRepositories, owner, repo, queryPackBase64, dryRun);
-    }
-  } else {
-    void showAndLogErrorMessage(error);
+    void showAndLogErrorMessage(getErrorMessage(error));
   }
 }
 
@@ -434,9 +339,37 @@ async function ensureNameAndSuite(queryPackDir: string, packRelativePath: string
   qlpack.name = QUERY_PACK_NAME;
 
   qlpack.defaultSuite = [{
-    description: 'Query suite for remote query'
+    description: 'Query suite for variant analysis'
   }, {
     query: packRelativePath.replace(/\\/g, '/')
   }];
   await fs.writeFile(packPath, yaml.safeDump(qlpack));
 }
+
+async function buildRemoteQueryEntity(
+  queryFilePath: string,
+  queryMetadata: QueryMetadata | undefined,
+  controllerRepoOwner: string,
+  controllerRepoName: string,
+  queryStartTime: number,
+  workflowRunId: number,
+  language: string
+): Promise<RemoteQuery> {
+  // The query name is either the name as specified in the query metadata, or the file name.
+  const queryName = queryMetadata?.name ?? path.basename(queryFilePath);
+
+  const queryText = await fs.readFile(queryFilePath, 'utf8');
+
+  return {
+    queryName,
+    queryFilePath,
+    queryText,
+    language,
+    controllerRepository: {
+      owner: controllerRepoOwner,
+      name: controllerRepoName,
+    },
+    executionStartTime: queryStartTime,
+    actionsWorkflowRunId: workflowRunId
+  };
+}

extensions/ql-vscode/src/remote-queries/sarif-processing.ts

@@ -0,0 +1,253 @@
+import * as sarif from 'sarif';
+import { parseSarifPlainTextMessage, parseSarifRegion } from '../pure/sarif-utils';
+
+import {
+  AnalysisAlert,
+  CodeFlow,
+  AnalysisMessage,
+  AnalysisMessageToken,
+  ResultSeverity,
+  ThreadFlow,
+  CodeSnippet,
+  HighlightedRegion
+} from './shared/analysis-result';
+
+const defaultSeverity = 'Warning';
+
+export function extractAnalysisAlerts(
+  sarifLog: sarif.Log,
+  fileLinkPrefix: string
+): {
+  alerts: AnalysisAlert[],
+  errors: string[]
+} {
+  const alerts: AnalysisAlert[] = [];
+  const errors: string[] = [];
+
+  for (const run of sarifLog.runs ?? []) {
+    for (const result of run.results ?? []) {
+      try {
+        alerts.push(...extractResultAlerts(run, result, fileLinkPrefix));
+      } catch (e) {
+        errors.push(`Error when processing SARIF result: ${e}`);
+        continue;
+      }
+    }
+  }
+
+  return { alerts, errors };
+}
+
+function extractResultAlerts(
+  run: sarif.Run,
+  result: sarif.Result,
+  fileLinkPrefix: string
+): AnalysisAlert[] {
+  const alerts: AnalysisAlert[] = [];
+
+  const message = getMessage(result, fileLinkPrefix);
+  const rule = tryGetRule(run, result);
+  const severity = tryGetSeverity(run, result, rule) || defaultSeverity;
+  const codeFlows = getCodeFlows(result, fileLinkPrefix);
+  const shortDescription = getShortDescription(rule, message!);
+
+  for (const location of result.locations ?? []) {
+    const physicalLocation = location.physicalLocation!;
+    const filePath = physicalLocation.artifactLocation!.uri!;
+    const codeSnippet = getCodeSnippet(physicalLocation.contextRegion, physicalLocation.region);
+    const highlightedRegion = physicalLocation.region
+      ? getHighlightedRegion(physicalLocation.region)
+      : undefined;
+
+    const analysisAlert: AnalysisAlert = {
+      message,
+      shortDescription,
+      fileLink: {
+        fileLinkPrefix,
+        filePath,
+      },
+      severity,
+      codeSnippet,
+      highlightedRegion,
+      codeFlows: codeFlows
+    };
+
+    alerts.push(analysisAlert);
+  }
+
+  return alerts;
+}
+
+function getShortDescription(
+  rule: sarif.ReportingDescriptor | undefined,
+  message: AnalysisMessage,
+): string {
+  if (rule?.shortDescription?.text) {
+    return rule.shortDescription.text;
+  }
+
+  return message.tokens.map(token => token.text).join();
+}
+
+export function tryGetSeverity(
+  sarifRun: sarif.Run,
+  result: sarif.Result,
+  rule: sarif.ReportingDescriptor | undefined
+): ResultSeverity | undefined {
+  if (!sarifRun || !result || !rule) {
+    return undefined;
+  }
+
+  const severity = rule.properties?.['problem.severity'];
+  if (!severity) {
+    return undefined;
+  }
+
+  switch (severity.toLowerCase()) {
+    case 'recommendation':
+      return 'Recommendation';
+    case 'warning':
+      return 'Warning';
+    case 'error':
+      return 'Error';
+  }
+
+  return undefined;
+}
+
+export function tryGetRule(
+  sarifRun: sarif.Run,
+  result: sarif.Result
+): sarif.ReportingDescriptor | undefined {
+  if (!sarifRun || !result) {
+    return undefined;
+  }
+
+  const resultRule = result.rule;
+  if (!resultRule) {
+    return undefined;
+  }
+
+  // The rule can found in two places:
+  // - Either in the run's tool driver tool component
+  // - Or in the run's tool extensions tool component
+
+  const ruleId = resultRule.id;
+  if (ruleId) {
+    const rule = sarifRun.tool.driver.rules?.find(r => r.id === ruleId);
+    if (rule) {
+      return rule;
+    }
+  }
+
+  const ruleIndex = resultRule.index;
+  if (ruleIndex != undefined) {
+    const toolComponentIndex = result.rule?.toolComponent?.index;
+    const toolExtensions = sarifRun.tool.extensions;
+    if (toolComponentIndex !== undefined && toolExtensions !== undefined) {
+      const toolComponent = toolExtensions[toolComponentIndex];
+      if (toolComponent?.rules !== undefined) {
+        return toolComponent.rules[ruleIndex];
+      }
+    }
+  }
+
+  // Couldn't find the rule.
+  return undefined;
+}
+
+function getCodeSnippet(region?: sarif.Region, alternateRegion?: sarif.Region): CodeSnippet | undefined {
+  region = region ?? alternateRegion;
+
+  if (!region) {
+    return undefined;
+  }
+
+  const text = region.snippet?.text || '';
+  const { startLine, endLine } = parseSarifRegion(region);
+
+  return {
+    startLine,
+    endLine,
+    text
+  };
+}
+
+function getHighlightedRegion(region: sarif.Region): HighlightedRegion {
+  const { startLine, startColumn, endLine, endColumn } = parseSarifRegion(region);
+
+  return {
+    startLine,
+    startColumn,
+    endLine,
+
+    // parseSarifRegion currently shifts the end column by 1 to account
+    // for the way vscode counts columns so we need to shift it back.
+    endColumn: endColumn + 1
+  };
+}
+
+function getCodeFlows(
+  result: sarif.Result,
+  fileLinkPrefix: string
+): CodeFlow[] {
+  const codeFlows = [];
+
+  if (result.codeFlows) {
+    for (const codeFlow of result.codeFlows) {
+      const threadFlows = [];
+
+      for (const threadFlow of codeFlow.threadFlows) {
+        for (const threadFlowLocation of threadFlow.locations) {
+          const physicalLocation = threadFlowLocation!.location!.physicalLocation!;
+          const filePath = physicalLocation!.artifactLocation!.uri!;
+          const codeSnippet = getCodeSnippet(physicalLocation.contextRegion, physicalLocation.region);
+          const highlightedRegion = physicalLocation.region
+            ? getHighlightedRegion(physicalLocation.region)
+            : undefined;
+
+          threadFlows.push({
+            fileLink: {
+              fileLinkPrefix,
+              filePath,
+            },
+            codeSnippet,
+            highlightedRegion
+          } as ThreadFlow);
+        }
+      }
+
+      codeFlows.push({ threadFlows } as CodeFlow);
+    }
+  }
+
+  return codeFlows;
+}
+
+function getMessage(result: sarif.Result, fileLinkPrefix: string): AnalysisMessage {
+  const tokens: AnalysisMessageToken[] = [];
+
+  const messageText = result.message!.text!;
+  const messageParts = parseSarifPlainTextMessage(messageText);
+
+  for (const messagePart of messageParts) {
+    if (typeof messagePart === 'string') {
+      tokens.push({ t: 'text', text: messagePart });
+    } else {
+      const relatedLocation = result.relatedLocations!.find(rl => rl.id === messagePart.dest);
+      tokens.push({
+        t: 'location',
+        text: messagePart.text,
+        location: {
+          fileLink: {
+            fileLinkPrefix: fileLinkPrefix,
+            filePath: relatedLocation!.physicalLocation!.artifactLocation!.uri!,
+          },
+          highlightedRegion: getHighlightedRegion(relatedLocation!.physicalLocation!.region!),
+        }
+      });
+    }
+  }
+
+  return { tokens };
+}

extensions/ql-vscode/src/remote-queries/shared/analysis-failure.ts

@@ -0,0 +1,4 @@
+export interface AnalysisFailure {
+  nwo: string,
+  error: string
+}

extensions/ql-vscode/src/remote-queries/shared/analysis-result.ts

@@ -0,0 +1,80 @@
+import { RawResultSet, ResultSetSchema } from '../../pure/bqrs-cli-types';
+
+export type AnalysisResultStatus = 'InProgress' | 'Completed' | 'Failed';
+
+export interface AnalysisResults {
+  nwo: string;
+  status: AnalysisResultStatus;
+  interpretedResults: AnalysisAlert[];
+  rawResults?: AnalysisRawResults;
+}
+
+export interface AnalysisRawResults {
+  schema: ResultSetSchema;
+  resultSet: RawResultSet;
+  fileLinkPrefix: string;
+  capped: boolean;
+}
+
+export interface AnalysisAlert {
+  message: AnalysisMessage;
+  shortDescription: string;
+  severity: ResultSeverity;
+  fileLink: FileLink;
+  codeSnippet?: CodeSnippet;
+  highlightedRegion?: HighlightedRegion;
+  codeFlows: CodeFlow[];
+}
+
+export interface FileLink {
+  fileLinkPrefix: string;
+  filePath: string;
+}
+
+export interface CodeSnippet {
+  startLine: number;
+  endLine: number;
+  text: string;
+}
+
+export interface HighlightedRegion {
+  startLine: number;
+  startColumn: number;
+  endLine: number;
+  endColumn: number;
+}
+
+export interface CodeFlow {
+  threadFlows: ThreadFlow[];
+}
+
+export interface ThreadFlow {
+  fileLink: FileLink;
+  codeSnippet: CodeSnippet;
+  highlightedRegion?: HighlightedRegion;
+  message?: AnalysisMessage;
+}
+
+export interface AnalysisMessage {
+  tokens: AnalysisMessageToken[]
+}
+
+export type AnalysisMessageToken =
+  | AnalysisMessageTextToken
+  | AnalysisMessageLocationToken;
+
+export interface AnalysisMessageTextToken {
+  t: 'text';
+  text: string;
+}
+
+export interface AnalysisMessageLocationToken {
+  t: 'location';
+  text: string;
+  location: {
+    fileLink: FileLink;
+    highlightedRegion?: HighlightedRegion;
+  };
+}
+
+export type ResultSeverity = 'Recommendation' | 'Warning' | 'Error';

extensions/ql-vscode/src/remote-queries/shared/remote-query-result.ts

@@ -0,0 +1,26 @@
+import { DownloadLink } from '../download-link';
+import { AnalysisFailure } from './analysis-failure';
+
+export interface RemoteQueryResult {
+  queryTitle: string;
+  queryFileName: string;
+  queryFilePath: string;
+  queryText: string;
+  language: string;
+  workflowRunUrl: string;
+  totalRepositoryCount: number;
+  affectedRepositoryCount: number;
+  totalResultCount: number;
+  executionTimestamp: string;
+  executionDuration: string;
+  analysisSummaries: AnalysisSummary[];
+  analysisFailures: AnalysisFailure[];
+}
+
+export interface AnalysisSummary {
+  nwo: string,
+  databaseSha: string,
+  resultCount: number,
+  downloadLink: DownloadLink,
+  fileSize: string,
+}

extensions/ql-vscode/src/remote-queries/shared/result-limits.ts

@@ -0,0 +1,5 @@
+// The maximum number of raw results to read from a BQRS file.
+// This is used to avoid reading the entire result set into memory
+// and trying to render it on screen. Users will be warned if the
+// results are capped.
+export const MAX_RAW_RESULTS = 500;

extensions/ql-vscode/src/remote-queries/view/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  env: {
+    browser: true
+  },
+  extends: [
+    "plugin:react/recommended"
+  ],
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  }
+}

extensions/ql-vscode/src/remote-queries/view/AnalysisAlertResult.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { AnalysisAlert } from '../shared/analysis-result';
+import CodePaths from './CodePaths';
+import FileCodeSnippet from './FileCodeSnippet';
+
+const AnalysisAlertResult = ({ alert }: { alert: AnalysisAlert }) => {
+  const showPathsLink = alert.codeFlows.length > 0;
+
+  return <FileCodeSnippet
+    fileLink={alert.fileLink}
+    codeSnippet={alert.codeSnippet}
+    highlightedRegion={alert.highlightedRegion}
+    severity={alert.severity}
+    message={alert.message}
+    messageChildren={
+      showPathsLink && <CodePaths
+        codeFlows={alert.codeFlows}
+        ruleDescription={alert.shortDescription}
+        severity={alert.severity}
+        message={alert.message}
+      />
+    }
+  />;
+};
+
+export default AnalysisAlertResult;

extensions/ql-vscode/src/remote-queries/view/Badge.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+const BadgeContainer = styled.span`
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  padding-left: 0.2em;
+`;
+
+const BadgeText = styled.span`
+  display: inline-block;
+  min-width: 1.5em;
+  padding: 0.3em;
+  border-radius: 35%;
+  font-size: x-small;
+  text-align: center;
+  background: var(--vscode-badge-background);
+  color: var(--vscode-badge-foreground);
+  border-color: var(--vscode-badge-background);
+`;
+
+const Badge = ({ text }: { text: string }) => (
+  <BadgeContainer>
+    <BadgeText>{text}</BadgeText>
+  </BadgeContainer>
+);
+
+export default Badge;

extensions/ql-vscode/src/remote-queries/view/CodePaths.tsx

@@ -0,0 +1,180 @@
+import { TriangleDownIcon, XCircleIcon } from '@primer/octicons-react';
+import { ActionList, ActionMenu, Box, Button, Label, Link, Overlay } from '@primer/react';
+import * as React from 'react';
+import { useRef, useState } from 'react';
+import styled from 'styled-components';
+import { CodeFlow, AnalysisMessage, ResultSeverity } from '../shared/analysis-result';
+import FileCodeSnippet from './FileCodeSnippet';
+import SectionTitle from './SectionTitle';
+import VerticalSpace from './VerticalSpace';
+
+const StyledCloseButton = styled.button`
+  position: absolute;
+  top: 1em;
+  right: 4em;
+  background-color: var(--vscode-editor-background);
+  color: var(--vscode-editor-foreground);
+  border: none;
+  &:focus-visible {
+    outline: none
+  }
+`;
+
+const OverlayContainer = styled.div`
+  padding: 1em;
+  height: 100%;
+  width: 100%;
+  padding: 2em;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: var(--vscode-editor-background);
+  color: var(--vscode-editor-foreground);
+  overflow-y: scroll;
+`;
+
+const CloseButton = ({ onClick }: { onClick: () => void }) => (
+  <StyledCloseButton onClick={onClick} tabIndex={-1} >
+    <XCircleIcon size={24} />
+  </StyledCloseButton>
+);
+
+const CodePath = ({
+  codeFlow,
+  message,
+  severity
+}: {
+  codeFlow: CodeFlow;
+  message: AnalysisMessage;
+  severity: ResultSeverity;
+}) => {
+  return <>
+    {codeFlow.threadFlows.map((threadFlow, index) =>
+      <div key={`thread-flow-${index}`}>
+        {index !== 0 && <VerticalSpace size={3} />}
+
+        <Box display="flex" justifyContent="center" alignItems="center" width="42.5em">
+          <Box flexGrow={1} p={0} border="none">
+            <SectionTitle>Step {index + 1}</SectionTitle>
+          </Box>
+          {index === 0 &&
+            <Box p={0} border="none">
+              <Label>Source</Label>
+            </Box>
+          }
+          {index === codeFlow.threadFlows.length - 1 &&
+            <Box p={0} border="none">
+              <Label>Sink</Label>
+            </Box>
+          }
+        </Box>
+
+        <VerticalSpace size={2} />
+        <FileCodeSnippet
+          fileLink={threadFlow.fileLink}
+          codeSnippet={threadFlow.codeSnippet}
+          highlightedRegion={threadFlow.highlightedRegion}
+          severity={severity}
+          message={index === codeFlow.threadFlows.length - 1 ? message : threadFlow.message} />
+      </div>
+    )}
+  </>;
+};
+
+const getCodeFlowName = (codeFlow: CodeFlow) => {
+  const filePath = codeFlow.threadFlows[codeFlow.threadFlows.length - 1].fileLink.filePath;
+  return filePath.substring(filePath.lastIndexOf('/') + 1);
+};
+
+const Menu = ({
+  codeFlows,
+  setSelectedCodeFlow
+}: {
+  codeFlows: CodeFlow[],
+  setSelectedCodeFlow: (value: React.SetStateAction<CodeFlow>) => void
+}) => {
+  return <ActionMenu>
+    <ActionMenu.Anchor>
+      <Button variant="invisible" sx={{ fontWeight: 'normal', color: 'var(--vscode-editor-foreground);', padding: 0 }} >
+        {getCodeFlowName(codeFlows[0])}
+        <TriangleDownIcon size={16} />
+      </Button>
+    </ActionMenu.Anchor>
+    <ActionMenu.Overlay sx={{ backgroundColor: 'var(--vscode-editor-background)' }}>
+      <ActionList>
+        {codeFlows.map((codeFlow, index) =>
+          <ActionList.Item
+            key={`codeflow-${index}'`}
+            onSelect={(e: React.MouseEvent) => { setSelectedCodeFlow(codeFlow); }}>
+            {getCodeFlowName(codeFlow)}
+          </ActionList.Item>
+        )}
+      </ActionList>
+    </ActionMenu.Overlay>
+  </ActionMenu>;
+};
+
+const CodePaths = ({
+  codeFlows,
+  ruleDescription,
+  message,
+  severity
+}: {
+  codeFlows: CodeFlow[],
+  ruleDescription: string,
+  message: AnalysisMessage,
+  severity: ResultSeverity
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedCodeFlow, setSelectedCodeFlow] = useState(codeFlows[0]);
+
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const linkRef = useRef<HTMLAnchorElement>(null);
+
+  const closeOverlay = () => setIsOpen(false);
+
+  return (
+    <Box ref={anchorRef}>
+      <Link
+        onClick={() => setIsOpen(true)}
+        ref={linkRef}
+        sx={{ cursor: 'pointer' }}>
+        Show paths
+      </Link>
+      {isOpen && (
+        <Overlay
+          returnFocusRef={linkRef}
+          onEscape={closeOverlay}
+          onClickOutside={closeOverlay}
+          anchorSide="outside-top">
+          <OverlayContainer>
+            <CloseButton onClick={closeOverlay} />
+
+            <SectionTitle>{ruleDescription}</SectionTitle>
+            <VerticalSpace size={2} />
+
+            <Box display="flex" justifyContent="center" alignItems="center">
+              <Box p={0} border="none">
+                {codeFlows.length} paths available: {selectedCodeFlow.threadFlows.length} steps in
+              </Box>
+              <Box flexGrow={1} p={0} paddingLeft="0.2em" border="none">
+                <Menu codeFlows={codeFlows} setSelectedCodeFlow={setSelectedCodeFlow} />
+              </Box>
+            </Box>
+
+            <VerticalSpace size={2} />
+            <CodePath
+              codeFlow={selectedCodeFlow}
+              severity={severity}
+              message={message} />
+
+            <VerticalSpace size={3} />
+
+          </OverlayContainer>
+        </Overlay>
+      )}
+    </Box>
+  );
+};
+
+export default CodePaths;

extensions/ql-vscode/src/remote-queries/view/CollapsibleItem.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { ChevronDownIcon, ChevronRightIcon } from '@primer/octicons-react';
+import { useState } from 'react';
+
+const Container = styled.div`
+  display: block;
+  vertical-align: middle;
+  cursor: pointer;
+`;
+
+const TitleContainer = styled.span`
+  display: inline-block;
+`;
+
+const Button = styled.button`
+  display: inline-block;
+  background-color: transparent;
+  color: var(--vscode-editor-foreground);
+  border: none;
+  padding-left: 0;
+  padding-right: 0.1em;
+`;
+
+const CollapsibleItem = ({
+  title,
+  children
+}: {
+  title: React.ReactNode;
+  children: React.ReactNode
+}) => {
+  const [isExpanded, setExpanded] = useState(false);
+  return (
+    <>
+      <Container onClick={() => setExpanded(!isExpanded)}>
+        <Button>
+          {isExpanded
+            ? <ChevronDownIcon size={16} />
+            : <ChevronRightIcon size={16} />
+          }
+        </Button>
+        <TitleContainer>{title}</TitleContainer>
+      </Container>
+      {isExpanded && children}
+    </>
+  );
+};
+
+export default CollapsibleItem;

extensions/ql-vscode/src/remote-queries/view/DownloadButton.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { DownloadIcon } from '@primer/octicons-react';
+
+const ButtonLink = styled.a`
+  display: inline-block;
+  font-size: x-small;
+  text-decoration: none;
+  cursor: pointer;
+  vertical-align: middle;
+
+  svg {
+    fill: var(--vscode-textLink-foreground);
+  }
+`;
+
+const DownloadButton = ({ text, onClick }: { text: string, onClick: () => void }) => (
+  <ButtonLink onClick={onClick}>
+    <DownloadIcon size={16} />{text}
+  </ButtonLink>
+);
+
+export default DownloadButton;

extensions/ql-vscode/src/remote-queries/view/DownloadSpinner.tsx

@@ -0,0 +1,20 @@
+import { Spinner } from '@primer/react';
+import * as React from 'react';
+import styled from 'styled-components';
+
+const SpinnerContainer = styled.span`
+  vertical-align: middle;
+
+  svg {
+    width: 0.8em;
+    height: 0.8em;  
+  }
+`;
+
+const DownloadSpinner = () => (
+  <SpinnerContainer>
+    <Spinner size="small" />
+  </SpinnerContainer>
+);
+
+export default DownloadSpinner;

extensions/ql-vscode/src/remote-queries/view/FileCodeSnippet.tsx

@@ -0,0 +1,257 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { CodeSnippet, FileLink, HighlightedRegion, AnalysisMessage, ResultSeverity } from '../shared/analysis-result';
+import { Box, Link } from '@primer/react';
+import VerticalSpace from './VerticalSpace';
+import { createRemoteFileRef } from '../../pure/location-link-utils';
+
+const borderColor = 'var(--vscode-editor-snippetFinalTabstopHighlightBorder)';
+const warningColor = '#966C23';
+const highlightColor = 'var(--vscode-editor-findMatchHighlightBackground)';
+
+const getSeverityColor = (severity: ResultSeverity) => {
+  switch (severity) {
+    case 'Recommendation':
+      return 'blue';
+    case 'Warning':
+      return warningColor;
+    case 'Error':
+      return 'red';
+  }
+};
+
+const replaceSpaceChar = (text: string) => text.replaceAll(' ', '\u00a0');
+
+const shouldHighlightLine = (lineNumber: number, highlightedRegion: HighlightedRegion) => {
+  if (lineNumber < highlightedRegion.startLine) {
+    return false;
+  }
+
+  if (highlightedRegion.endLine == undefined) {
+    return lineNumber == highlightedRegion.startLine;
+  }
+
+  return lineNumber <= highlightedRegion.endLine;
+};
+
+const Container = styled.div`
+  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  font-size: x-small;
+`;
+
+const TitleContainer = styled.div`
+  border: 0.1em solid ${borderColor};
+  border-top-left-radius: 0.2em;
+  border-top-right-radius: 0.2em;
+  padding: 0.5em;
+`;
+
+const CodeContainer = styled.div`
+  border-left: 0.1em solid ${borderColor};
+  border-right: 0.1em solid ${borderColor};
+  border-bottom: 0.1em solid ${borderColor};
+  border-bottom-left-radius: 0.2em;
+  border-bottom-right-radius: 0.2em;
+  padding-top: 1em;
+  padding-bottom: 1em;
+`;
+
+const MessageText = styled.div`
+  font-size: x-small;
+  padding-left: 0.5em;
+`;
+
+const MessageContainer = styled.div`
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+`;
+
+const PlainLine = ({ text }: { text: string }) => {
+  return <span>{replaceSpaceChar(text)}</span>;
+};
+
+const HighlightedLine = ({ text }: { text: string }) => {
+  return <span style={{ backgroundColor: highlightColor }}>{replaceSpaceChar(text)}</span>;
+};
+
+const Message = ({
+  message,
+  currentLineNumber,
+  highlightedRegion,
+  borderColor,
+  children
+}: {
+  message: AnalysisMessage,
+  currentLineNumber: number,
+  highlightedRegion?: HighlightedRegion,
+  borderColor: string,
+  children: React.ReactNode
+}) => {
+  if (!highlightedRegion || highlightedRegion.endLine !== currentLineNumber) {
+    return <></>;
+  }
+
+  return <MessageContainer>
+    <Box
+      borderColor="border.default"
+      borderWidth={1}
+      borderStyle="solid"
+      borderLeftColor={borderColor}
+      borderLeftWidth={3}
+      paddingTop="1em"
+      paddingBottom="1em">
+      <MessageText>
+        {message.tokens.map((token, index) => {
+          switch (token.t) {
+            case 'text':
+              return <span key={`token-${index}`}>{token.text}</span>;
+            case 'location':
+              return <Link
+                key={`token-${index}`}
+                href={createRemoteFileRef(
+                  token.location.fileLink,
+                  token.location.highlightedRegion?.startLine,
+                  token.location.highlightedRegion?.endLine)}>
+                {token.text}
+              </Link>;
+            default:
+              return <></>;
+          }
+        })}
+        {children && <>
+          <VerticalSpace size={2} />
+          {children}
+        </>
+        }
+      </MessageText>
+    </Box>
+
+  </MessageContainer>;
+};
+
+const CodeLine = ({
+  line,
+  lineNumber,
+  highlightedRegion
+}: {
+  line: string,
+  lineNumber: number,
+  highlightedRegion?: HighlightedRegion
+}) => {
+  if (!highlightedRegion || !shouldHighlightLine(lineNumber, highlightedRegion)) {
+    return <PlainLine text={line} />;
+  }
+
+  const isSingleLineHighlight = highlightedRegion.endLine === undefined;
+  const isFirstHighlightedLine = lineNumber === highlightedRegion.startLine;
+  const isLastHighlightedLine = lineNumber === highlightedRegion.endLine;
+
+  const highlightStartColumn = isSingleLineHighlight
+    ? highlightedRegion.startColumn
+    : isFirstHighlightedLine
+      ? highlightedRegion.startColumn
+      : 0;
+
+  const highlightEndColumn = isSingleLineHighlight
+    ? highlightedRegion.endColumn
+    : isLastHighlightedLine
+      ? highlightedRegion.endColumn
+      : line.length + 1;
+
+  const section1 = line.substring(0, highlightStartColumn - 1);
+  const section2 = line.substring(highlightStartColumn - 1, highlightEndColumn - 1);
+  const section3 = line.substring(highlightEndColumn - 1, line.length);
+
+  return (
+    <>
+      <PlainLine text={section1} />
+      <HighlightedLine text={section2} />
+      <PlainLine text={section3} />
+    </>
+  );
+};
+
+const FileCodeSnippet = ({
+  fileLink,
+  codeSnippet,
+  highlightedRegion,
+  severity,
+  message,
+  messageChildren,
+}: {
+  fileLink: FileLink,
+  codeSnippet?: CodeSnippet,
+  highlightedRegion?: HighlightedRegion,
+  severity?: ResultSeverity,
+  message?: AnalysisMessage,
+  messageChildren?: React.ReactNode,
+}) => {
+
+  const startingLine = codeSnippet?.startLine || 0;
+  const endingLine = codeSnippet?.endLine || 0;
+
+  const titleFileUri = createRemoteFileRef(
+    fileLink,
+    startingLine,
+    endingLine);
+
+  if (!codeSnippet) {
+    return (
+      <Container>
+        <TitleContainer>
+          <Link href={titleFileUri}>{fileLink.filePath}</Link>
+        </TitleContainer>
+      </Container>
+    );
+  }
+
+  const code = codeSnippet.text.split('\n');
+
+  return (
+    <Container>
+      <TitleContainer>
+        <Link href={titleFileUri}>{fileLink.filePath}</Link>
+      </TitleContainer>
+      <CodeContainer>
+        {code.map((line, index) => (
+          <div key={index}>
+            <Box display="flex">
+              <Box
+                p={2}
+                borderStyle="none"
+                paddingTop="0.01em"
+                paddingLeft="0.5em"
+                paddingRight="0.5em"
+                paddingBottom="0.2em">
+                {startingLine + index}
+              </Box>
+              <Box
+                flexGrow={1}
+                p={2}
+                borderStyle="none"
+                paddingTop="0.01em"
+                paddingLeft="1.5em"
+                paddingRight="0.5em"
+                paddingBottom="0.2em"
+                sx={{ wordBreak: 'break-word' }}>
+                <CodeLine
+                  line={line}
+                  lineNumber={startingLine + index}
+                  highlightedRegion={highlightedRegion} />
+              </Box>
+            </Box>
+            {message && severity && <Message
+              message={message}
+              currentLineNumber={startingLine + index}
+              highlightedRegion={highlightedRegion}
+              borderColor={getSeverityColor(severity)}>
+              {messageChildren}
+            </Message>}
+          </div>
+        ))}
+      </CodeContainer>
+    </Container>
+  );
+};
+
+export default FileCodeSnippet;

extensions/ql-vscode/src/remote-queries/view/FullScreenModal.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import styled from 'styled-components';
+import { XCircleIcon } from '@primer/octicons-react';
+
+const Container = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  opacity: 1;
+  background-color: var(--vscode-editor-background);
+  z-index: 5000;
+  padding-top: 1em;
+`;
+
+const CloseButton = styled.button`
+  position: absolute;
+  top: 1em;
+  right: 1em;
+  background-color: var(--vscode-editor-background);
+  border: none;
+`;
+
+const FullScreenModal = ({
+  setOpen,
+  containerElementId,
+  children
+}: {
+  setOpen: (open: boolean) => void;
+  containerElementId: string;
+  children: React.ReactNode
+}) => {
+  const containerElement = document.getElementById(containerElementId);
+  if (!containerElement) {
+    throw Error(`Could not find container element. Id: ${containerElementId}`);
+  }
+
+  return ReactDOM.createPortal(
+    <>
+      <Container>
+        <CloseButton onClick={() => setOpen(false)}>
+          <XCircleIcon size={24} />
+        </CloseButton>
+        {children}
+      </Container>
+    </>,
+    containerElement
+  );
+};
+
+export default FullScreenModal;

extensions/ql-vscode/src/remote-queries/view/HorizontalSpace.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const HorizontalSpace = styled.div<{ size: 1 | 2 | 3 }>`
+  flex: 0 0 auto;
+  display: inline-block;
+  width: ${props => 0.2 * props.size}em;
+`;
+
+export default HorizontalSpace;

extensions/ql-vscode/src/remote-queries/view/RawResultsTable.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { Box, Link } from '@primer/react';
+import { CellValue, RawResultSet, ResultSetSchema } from '../../pure/bqrs-cli-types';
+import { tryGetRemoteLocation } from '../../pure/bqrs-utils';
+import { useState } from 'react';
+import TextButton from './TextButton';
+import { convertNonPrintableChars } from '../../text-utils';
+
+const numOfResultsInContractedMode = 5;
+
+const Row = ({
+  row,
+  fileLinkPrefix
+}: {
+  row: CellValue[],
+  fileLinkPrefix: string
+}) => (
+  <>
+    {row.map((cell, cellIndex) => (
+      <Box key={cellIndex}
+        borderColor="border.default"
+        borderStyle="solid"
+        justifyContent="center"
+        alignItems="center"
+        p={2}
+        sx={{ wordBreak: 'break-word' }}>
+        <Cell value={cell} fileLinkPrefix={fileLinkPrefix} />
+      </Box>
+    ))}
+  </>
+);
+
+const Cell = ({
+  value,
+  fileLinkPrefix
+}: {
+  value: CellValue,
+  fileLinkPrefix: string
+}) => {
+  switch (typeof value) {
+    case 'string':
+    case 'number':
+    case 'boolean':
+      return <span>{convertNonPrintableChars(value.toString())}</span>;
+    case 'object': {
+      const url = tryGetRemoteLocation(value.url, fileLinkPrefix);
+      return <Link href={url}>{convertNonPrintableChars(value.label)}</Link>;
+    }
+  }
+};
+
+const RawResultsTable = ({
+  schema,
+  results,
+  fileLinkPrefix
+}: {
+  schema: ResultSetSchema,
+  results: RawResultSet,
+  fileLinkPrefix: string
+}) => {
+  const [tableExpanded, setTableExpanded] = useState(false);
+  const numOfResultsToShow = tableExpanded ? results.rows.length : numOfResultsInContractedMode;
+  const showButton = results.rows.length > numOfResultsInContractedMode;
+
+  // Create n equal size columns. We use minmax(0, 1fr) because the
+  // minimum width of 1fr is auto, not 0.
+  // https://css-tricks.com/equal-width-columns-in-css-grid-are-kinda-weird/
+  const gridTemplateColumns = `repeat(${schema.columns.length}, minmax(0, 1fr))`;
+
+  return (
+    <>
+      <Box
+        display="grid"
+        gridTemplateColumns={gridTemplateColumns}
+        maxWidth="45rem"
+        p={2}>
+        {results.rows.slice(0, numOfResultsToShow).map((row, rowIndex) => (
+          <Row key={rowIndex} row={row} fileLinkPrefix={fileLinkPrefix} />
+        ))}
+      </Box>
+      {
+        showButton &&
+        <TextButton size='x-small' onClick={() => setTableExpanded(!tableExpanded)}>
+          {tableExpanded ? (<span>View less</span>) : (<span>View all</span>)}
+        </TextButton>
+      }
+    </>
+  );
+};
+
+export default RawResultsTable;

extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx

@@ -0,0 +1,397 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import * as Rdom from 'react-dom';
+import { Flash, ThemeProvider } from '@primer/react';
+import { ToRemoteQueriesMessage } from '../../pure/interface-types';
+import { AnalysisSummary, RemoteQueryResult } from '../shared/remote-query-result';
+import { MAX_RAW_RESULTS } from '../shared/result-limits';
+import { vscode } from '../../view/vscode-api';
+
+import SectionTitle from './SectionTitle';
+import VerticalSpace from './VerticalSpace';
+import HorizontalSpace from './HorizontalSpace';
+import Badge from './Badge';
+import ViewTitle from './ViewTitle';
+import DownloadButton from './DownloadButton';
+import { AnalysisResults } from '../shared/analysis-result';
+import DownloadSpinner from './DownloadSpinner';
+import CollapsibleItem from './CollapsibleItem';
+import { AlertIcon, CodeSquareIcon, FileCodeIcon, RepoIcon, TerminalIcon } from '@primer/octicons-react';
+import AnalysisAlertResult from './AnalysisAlertResult';
+import RawResultsTable from './RawResultsTable';
+import RepositoriesSearch from './RepositoriesSearch';
+
+const numOfReposInContractedMode = 10;
+
+const emptyQueryResult: RemoteQueryResult = {
+  queryTitle: '',
+  queryFileName: '',
+  queryFilePath: '',
+  queryText: '',
+  language: '',
+  workflowRunUrl: '',
+  totalRepositoryCount: 0,
+  affectedRepositoryCount: 0,
+  totalResultCount: 0,
+  executionTimestamp: '',
+  executionDuration: '',
+  analysisSummaries: [],
+  analysisFailures: [],
+};
+
+const downloadAnalysisResults = (analysisSummary: AnalysisSummary) => {
+  vscode.postMessage({
+    t: 'remoteQueryDownloadAnalysisResults',
+    analysisSummary
+  });
+};
+
+const downloadAllAnalysesResults = (query: RemoteQueryResult) => {
+  vscode.postMessage({
+    t: 'remoteQueryDownloadAllAnalysesResults',
+    analysisSummaries: query.analysisSummaries
+  });
+};
+
+const openQueryFile = (queryResult: RemoteQueryResult) => {
+  vscode.postMessage({
+    t: 'openFile',
+    filePath: queryResult.queryFilePath
+  });
+};
+
+const openQueryTextVirtualFile = (queryResult: RemoteQueryResult) => {
+  vscode.postMessage({
+    t: 'openVirtualFile',
+    queryText: queryResult.queryText
+  });
+};
+
+const getAnalysisResultCount = (analysisResults: AnalysisResults): number => {
+  const rawResultCount = analysisResults.rawResults?.resultSet.rows.length || 0;
+  return analysisResults.interpretedResults.length + rawResultCount;
+};
+
+const sumAnalysesResults = (analysesResults: AnalysisResults[]) =>
+  analysesResults.reduce((acc, curr) => acc + getAnalysisResultCount(curr), 0);
+
+const QueryInfo = (queryResult: RemoteQueryResult) => (
+  <>
+    <VerticalSpace size={1} />
+    {queryResult.totalResultCount} results from running against {queryResult.totalRepositoryCount} repositories
+    ({queryResult.executionDuration}), {queryResult.executionTimestamp}
+    <VerticalSpace size={1} />
+    <span>
+      <a className="vscode-codeql__query-info-link" href="#" onClick={() => openQueryFile(queryResult)}>
+        <span> <FileCodeIcon size={16} /> </span>
+        {queryResult.queryFileName}
+      </a>
+    </span>
+    <span>
+      <a className="vscode-codeql__query-info-link" href="#" onClick={() => openQueryTextVirtualFile(queryResult)}>
+        <span> <CodeSquareIcon size={16} /> </span>
+        Query
+      </a>
+    </span>
+    <span>
+      <a className="vscode-codeql__query-info-link" href={queryResult.workflowRunUrl}>
+        <span> <TerminalIcon size={16} /> </span>
+        Logs
+      </a>
+    </span>
+  </>
+);
+
+const Failures = (queryResult: RemoteQueryResult) => {
+  if (queryResult.analysisFailures.length === 0) {
+    return <></>;
+  }
+  return (
+    <>
+      <VerticalSpace size={3} />
+      <Flash variant="danger">
+        {queryResult.analysisFailures.map((f, i) => (
+          <div key={i}>
+            <p className="vscode-codeql__analysis-failure">
+              <AlertIcon size={16} />
+              <b>{f.nwo}: </b>
+              {f.error}
+            </p>
+            {
+              i === queryResult.analysisFailures.length - 1 ? <></> : <VerticalSpace size={1} />
+            }
+          </div>
+        ))}
+      </Flash>
+    </>
+  );
+};
+
+const SummaryTitleWithResults = ({
+  queryResult,
+  analysesResults
+}: {
+  queryResult: RemoteQueryResult,
+  analysesResults: AnalysisResults[]
+}) => {
+  const showDownloadButton = queryResult.totalResultCount !== sumAnalysesResults(analysesResults);
+
+  return (
+    <div className="vscode-codeql__query-summary-container">
+      <SectionTitle>Repositories with results ({queryResult.affectedRepositoryCount}):</SectionTitle>
+      {
+        showDownloadButton && <DownloadButton
+          text="Download all"
+          onClick={() => downloadAllAnalysesResults(queryResult)} />
+      }
+    </div>
+  );
+};
+
+const SummaryTitleNoResults = () => (
+  <div className="vscode-codeql__query-summary-container">
+    <SectionTitle>No results found</SectionTitle>
+  </div>
+);
+
+const SummaryItemDownload = ({
+  analysisSummary,
+  analysisResults
+}: {
+  analysisSummary: AnalysisSummary,
+  analysisResults: AnalysisResults | undefined
+}) => {
+  if (!analysisResults || analysisResults.status === 'Failed') {
+    return <DownloadButton
+      text={analysisSummary.fileSize}
+      onClick={() => downloadAnalysisResults(analysisSummary)} />;
+  }
+
+  if (analysisResults.status === 'InProgress') {
+    return <>
+      <HorizontalSpace size={2} />
+      <DownloadSpinner />
+    </>;
+  }
+
+  return <></>;
+};
+
+const SummaryItem = ({
+  analysisSummary,
+  analysisResults
+}: {
+  analysisSummary: AnalysisSummary,
+  analysisResults: AnalysisResults | undefined
+}) => (
+  <span>
+    <span className="vscode-codeql__analysis-item"><RepoIcon size={16} /></span>
+    <span className="vscode-codeql__analysis-item">{analysisSummary.nwo}</span>
+    <span className="vscode-codeql__analysis-item"><Badge text={analysisSummary.resultCount.toString()} /></span>
+    <span className="vscode-codeql__analysis-item">
+      <SummaryItemDownload
+        analysisSummary={analysisSummary}
+        analysisResults={analysisResults} />
+    </span>
+  </span>
+);
+
+const Summary = ({
+  queryResult,
+  analysesResults
+}: {
+  queryResult: RemoteQueryResult,
+  analysesResults: AnalysisResults[]
+}) => {
+  const [repoListExpanded, setRepoListExpanded] = useState(false);
+  const numOfReposToShow = repoListExpanded ? queryResult.analysisSummaries.length : numOfReposInContractedMode;
+
+  return (
+    <>
+      {
+        queryResult.affectedRepositoryCount === 0
+          ? <SummaryTitleNoResults />
+          : <SummaryTitleWithResults
+            queryResult={queryResult}
+            analysesResults={analysesResults} />
+      }
+
+      <ul className="vscode-codeql__flat-list">
+        {queryResult.analysisSummaries.slice(0, numOfReposToShow).map((summary, i) =>
+          <li key={summary.nwo} className="vscode-codeql__analysis-summaries-list-item">
+            <SummaryItem
+              analysisSummary={summary}
+              analysisResults={analysesResults.find(a => a.nwo === summary.nwo)} />
+          </li>
+        )}
+      </ul>
+      {
+        queryResult.analysisSummaries.length > numOfReposInContractedMode &&
+        <button className="vscode-codeql__expand-button" onClick={() => setRepoListExpanded(!repoListExpanded)}>
+          {repoListExpanded ? (<span>View less</span>) : (<span>View all</span>)}
+        </button>
+      }
+    </>
+  );
+};
+
+const AnalysesResultsTitle = ({ totalAnalysesResults, totalResults }: { totalAnalysesResults: number, totalResults: number }) => {
+  if (totalAnalysesResults === totalResults) {
+    return <SectionTitle>{totalAnalysesResults} results</SectionTitle>;
+  }
+
+  return <SectionTitle>{totalAnalysesResults}/{totalResults} results</SectionTitle>;
+};
+
+const AnalysesResultsDescription = ({
+  queryResult,
+  analysesResults,
+}: {
+  queryResult: RemoteQueryResult
+  analysesResults: AnalysisResults[],
+}) => {
+  const showDownloadsMessage = queryResult.analysisSummaries.some(
+    s => !analysesResults.some(a => a.nwo === s.nwo && a.status === 'Completed'));
+  const downloadsMessage = <>
+    <VerticalSpace size={1} />
+    Some results haven&apos;t been downloaded automatically because of their size or because enough were downloaded already.
+    Download them manually from the list above if you want to see them here.
+  </>;
+
+  const showMaxResultsMessage = analysesResults.some(a => a.rawResults?.capped);
+  const maxRawResultsMessage = <>
+    <VerticalSpace size={1} />
+    Some repositories have more than {MAX_RAW_RESULTS} results. We will only show you up to&nbsp;
+    {MAX_RAW_RESULTS} results for each repository.
+  </>;
+
+  return (
+    <>
+      {showDownloadsMessage && downloadsMessage}
+      {showMaxResultsMessage && maxRawResultsMessage}
+    </>
+  );
+};
+
+const RepoAnalysisResults = (analysisResults: AnalysisResults) => {
+  const numOfResults = getAnalysisResultCount(analysisResults);
+  const title = <>
+    {analysisResults.nwo}
+    <Badge text={numOfResults.toString()} />
+  </>;
+
+  return (
+    <CollapsibleItem title={title}>
+      <ul className="vscode-codeql__flat-list" >
+        {analysisResults.interpretedResults.map((r, i) =>
+          <li key={i}>
+            <AnalysisAlertResult alert={r} />
+            <VerticalSpace size={2} />
+          </li>)}
+      </ul>
+      {analysisResults.rawResults &&
+        <RawResultsTable
+          schema={analysisResults.rawResults.schema}
+          results={analysisResults.rawResults.resultSet}
+          fileLinkPrefix={analysisResults.rawResults.fileLinkPrefix} />
+      }
+    </CollapsibleItem>
+  );
+};
+
+const AnalysesResults = ({
+  queryResult,
+  analysesResults,
+  totalResults
+}: {
+  queryResult: RemoteQueryResult,
+  analysesResults: AnalysisResults[],
+  totalResults: number
+}) => {
+  const totalAnalysesResults = sumAnalysesResults(analysesResults);
+  const [filterValue, setFilterValue] = React.useState('');
+
+  if (totalResults === 0) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <VerticalSpace size={2} />
+      <AnalysesResultsTitle
+        totalAnalysesResults={totalAnalysesResults}
+        totalResults={totalResults} />
+      <AnalysesResultsDescription
+        queryResult={queryResult}
+        analysesResults={analysesResults} />
+
+      <VerticalSpace size={2} />
+      <RepositoriesSearch
+        filterValue={filterValue}
+        setFilterValue={setFilterValue} />
+
+      <ul className="vscode-codeql__flat-list">
+        {analysesResults
+          .filter(a => a.interpretedResults.length > 0 || a.rawResults)
+          .filter(a => a.nwo.toLowerCase().includes(filterValue.toLowerCase()))
+          .map(r =>
+            <li key={r.nwo} className="vscode-codeql__analyses-results-list-item">
+              <RepoAnalysisResults {...r} />
+            </li>)}
+      </ul>
+    </>
+  );
+};
+
+export function RemoteQueries(): JSX.Element {
+  const [queryResult, setQueryResult] = useState<RemoteQueryResult>(emptyQueryResult);
+  const [analysesResults, setAnalysesResults] = useState<AnalysisResults[]>([]);
+
+  useEffect(() => {
+    window.addEventListener('message', (evt: MessageEvent) => {
+      if (evt.origin === window.origin) {
+        const msg: ToRemoteQueriesMessage = evt.data;
+        if (msg.t === 'setRemoteQueryResult') {
+          setQueryResult(msg.queryResult);
+        } else if (msg.t === 'setAnalysesResults') {
+          setAnalysesResults(msg.analysesResults);
+        }
+      } else {
+        // sanitize origin
+        const origin = evt.origin.replace(/\n|\r/g, '');
+        console.error(`Invalid event origin ${origin}`);
+      }
+    });
+  });
+
+  if (!queryResult) {
+    return <div>Waiting for results to load.</div>;
+  }
+
+  try {
+    return (
+      <div className="vscode-codeql__remote-queries">
+        <ThemeProvider colorMode="auto">
+          <ViewTitle>{queryResult.queryTitle}</ViewTitle>
+          <QueryInfo {...queryResult} />
+          <Failures {...queryResult} />
+          <Summary queryResult={queryResult} analysesResults={analysesResults} />
+          <AnalysesResults
+            queryResult={queryResult}
+            analysesResults={analysesResults}
+            totalResults={queryResult.totalResultCount} />
+        </ThemeProvider>
+      </div>
+    );
+  } catch (err) {
+    console.error(err);
+    return <div>There was an error displaying the view.</div>;
+  }
+}
+
+Rdom.render(
+  <RemoteQueries />,
+  document.getElementById('root'),
+  // Post a message to the extension when fully loaded.
+  () => vscode.postMessage({ t: 'remoteQueryLoaded' })
+);

extensions/ql-vscode/src/remote-queries/view/RepositoriesSearch.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { ChangeEvent } from 'react';
+import { TextInput } from '@primer/react';
+import { SearchIcon } from '@primer/octicons-react';
+
+interface RepositoriesSearchProps {
+  filterValue: string;
+  setFilterValue: (value: string) => void;
+}
+
+const RepositoriesSearch = ({ filterValue, setFilterValue }: RepositoriesSearchProps) => {
+  return <>
+    <TextInput
+      block
+      sx={{
+        backgroundColor: 'var(--vscode-editor-background);',
+        color: 'var(--vscode-editor-foreground);',
+        width: 'calc(100% - 14px)',
+      }}
+      leadingVisual={SearchIcon}
+      aria-label="Repository search"
+      name="repository-search"
+      placeholder="Filter by repository owner/name"
+      value={filterValue}
+      onChange={(e: ChangeEvent) => setFilterValue((e.target as HTMLInputElement).value)}
+    />
+  </>;
+};
+
+export default RepositoriesSearch;

extensions/ql-vscode/src/remote-queries/view/SectionTitle.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const SectionTitle = styled.h2`
+  font-size: medium;
+  font-weight: 500;
+  padding: 0 0.5em 0 0;
+  margin: 0;
+  display: inline-block;
+  vertical-align: middle;
+`;
+
+export default SectionTitle;

extensions/ql-vscode/src/remote-queries/view/TextButton.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+type Size = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+
+const StyledButton = styled.button<{ size: Size }>`
+  background: none;
+  color: var(--vscode-textLink-foreground);
+  border: none;
+  cursor: pointer;
+  font-size: ${props => props.size};
+`;
+
+const TextButton = ({
+  size,
+  onClick,
+  children
+}: {
+  size: Size,
+  onClick: () => void,
+  children: React.ReactNode
+}) => (
+  <StyledButton
+    size={size}
+    onClick={onClick}>
+    {children}
+  </StyledButton>
+);
+
+export default TextButton;

extensions/ql-vscode/src/remote-queries/view/VerticalSpace.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const VerticalSpace = styled.div<{ size: 1 | 2 | 3 }>`
+  flex: 0 0 auto;
+  height: ${props => 0.5 * props.size}em;
+`;
+
+export default VerticalSpace;

extensions/ql-vscode/src/remote-queries/view/ViewTitle.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const ViewTitle = styled.h1`
+  font-size: large;
+  margin-bottom: 0.5em;
+  font-weight: 500;
+`;
+
+export default ViewTitle;