diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index e69de29..0000000
--- a/.eslintignore
+++ /dev/null
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 6d9ae7c..0000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,166 +0,0 @@
-{
-  "extends": ["eslint:recommended", "google"],
-  "parserOptions": {
-    "ecmaVersion": 8,
-    "sourceType": "module"
-  },
-  "env": {
-    "browser": true,
-    "es6": true
-  },
-  "globals": {
-    "__dirname": false,
-    "app": false,
-    "page": false,
-    "Polymer": false,
-    "process": false,
-    "require": false,
-    "Gerrit": false,
-    "Promise": false,
-    "assert": false,
-    "test": false,
-    "flushAsynchronousOperations": false
-  },
-  "rules": {
-    "arrow-parens": ["error", "as-needed"],
-    "block-spacing": ["error", "always"],
-    "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
-    "camelcase": "off",
-    "comma-dangle": ["error", {
-      "arrays": "always-multiline",
-      "objects": "always-multiline",
-      "imports": "always-multiline",
-      "exports": "always-multiline",
-      "functions": "never"
-    }],
-    "eol-last": "off",
-    "indent": ["error", 2, {
-      "MemberExpression": 2,
-      "FunctionDeclaration": {"body": 1, "parameters": 2},
-      "FunctionExpression": {"body": 1, "parameters": 2},
-      "CallExpression": {"arguments": 2 },
-      "ArrayExpression": 1,
-      "ObjectExpression": 1,
-      "SwitchCase": 1
-    }],
-    "keyword-spacing": ["error", { "after": true, "before": true }],
-    "lines-between-class-members": ["error", "always"],
-    "max-len": [
-      "error",
-      80,
-      2,
-      {
-        "ignoreComments": true,
-        "ignorePattern": "^import .*;$"
-      }
-    ],
-    "new-cap": ["error", { "capIsNewExceptions": ["Polymer", "LegacyElementMixin", "GestureEventListeners", "LegacyDataMixin"] }],
-    "no-console": "off",
-    "no-multiple-empty-lines": [ "error", { "max": 1 } ],
-    "no-prototype-builtins": "off",
-    "no-redeclare": "off",
-    "no-restricted-syntax": [
-      "error",
-      {
-        "selector": "ExpressionStatement > CallExpression > MemberExpression[object.name='test'][property.name='only']",
-        "message": "Remove test.only."
-      },
-      {
-        "selector": "ExpressionStatement > CallExpression > MemberExpression[object.name='suite'][property.name='only']",
-        "message": "Remove suite.only."
-      }
-    ],
-    "no-undef": "off",
-    "no-useless-escape": "off",
-    "no-var": "error",
-    "object-shorthand": ["error", "always"],
-    "padding-line-between-statements": [
-      "error",
-      {
-        "blankLine": "always",
-        "prev": "class",
-        "next": "*"
-      },
-      {
-        "blankLine": "always",
-        "prev": "*",
-        "next": "class"
-      }
-    ],
-    "prefer-arrow-callback": "error",
-    "prefer-const": "error",
-    "prefer-spread": "error",
-    "quote-props": ["error", "consistent-as-needed"],
-    "semi": [2, "always"],
-    "template-curly-spacing": "error",
-    "valid-jsdoc": "off",
-
-    "require-jsdoc": 0,
-    "valid-jsdoc": 0,
-    "jsdoc/check-alignment": 2,
-    "jsdoc/check-examples": 0,
-    "jsdoc/check-indentation": 0,
-    "jsdoc/check-param-names": 0,
-    "jsdoc/check-syntax": 0,
-    "jsdoc/check-tag-names": 0,
-    "jsdoc/check-types": 0,
-    "jsdoc/implements-on-classes": 2,
-    "jsdoc/match-description": 0,
-    "jsdoc/newline-after-description": 2,
-    "jsdoc/no-types": 0,
-    "jsdoc/no-undefined-types": 0,
-    "jsdoc/require-description": 0,
-    "jsdoc/require-description-complete-sentence": 0,
-    "jsdoc/require-example": 0,
-    "jsdoc/require-hyphen-before-param-description": 0,
-    "jsdoc/require-jsdoc": 0,
-    "jsdoc/require-param": 0,
-    "jsdoc/require-param-description": 0,
-    "jsdoc/require-param-name": 2,
-    "jsdoc/require-param-type": 2,
-    "jsdoc/require-returns": 0,
-    "jsdoc/require-returns-check": 0,
-    "jsdoc/require-returns-description": 0,
-    "jsdoc/require-returns-type": 2,
-    "jsdoc/valid-types": 2,
-    "jsdoc/require-file-overview": ["error", {
-      "tags": {
-        "license": {
-          "mustExist": true,
-          "preventDuplicates": true
-        }
-      }
-    }],
-    "import/named": 2,
-    "import/no-unresolved": 2,
-    "import/no-self-import": 2,
-    // The no-cycle rule is slow, because it doesn't cache dependencies.
-    // Disable it.
-    "import/no-cycle": 0,
-    "import/no-useless-path-segments": 2,
-    "import/no-unused-modules": 2,
-    "import/no-default-export": 2
-  },
-  "plugins": [
-    "html",
-    "jsdoc",
-    "import"
-  ],
-  "settings": {
-    "html/report-bad-indent": "error"
-  },
-  "overrides": [
-    {
-      "files": ["*_html.js", "*-styles.js", "externs.js"],
-      "rules": {
-        "max-len": "off"
-      }
-    },
-    {
-      "files": ["*.html"],
-      "rules": {
-        "jsdoc/require-file-overview": "off"
-      }
-    }
-  ]
-}
diff --git a/BUILD b/BUILD
index 3c5aaa8..4070f5a 100644
--- a/BUILD
+++ b/BUILD
@@ -1,15 +1,11 @@
 load("@rules_java//java:defs.bzl", "java_library")
-load("@npm//@bazel/rollup:index.bzl", "rollup_bundle")
 load("//tools/bzl:junit.bzl", "junit_tests")
-load("//tools/js:eslint.bzl", "eslint")
 load(
     "//tools/bzl:plugin.bzl",
     "PLUGIN_DEPS",
     "PLUGIN_TEST_DEPS",
     "gerrit_plugin",
 )
-load("//tools/bzl:genrule2.bzl", "genrule2")
-load("//tools/bzl:js.bzl", "polygerrit_plugin")
 
 gerrit_plugin(
     name = "zuul",
@@ -21,7 +17,7 @@
         "Gerrit-Module: com.googlesource.gerrit.plugins.zuul.Module",
         "Gerrit-HttpModule: com.googlesource.gerrit.plugins.zuul.HttpModule",
     ],
-    resource_jars = [":gr-zuul-static"],
+    resource_jars = ["//plugins/zuul/web:zuul"],
 )
 
 junit_tests(
@@ -43,55 +39,3 @@
         "@commons-lang3//jar",
     ],
 )
-
-genrule2(
-    name = "gr-zuul-static",
-    srcs = [":gr-zuul"],
-    outs = ["gr-zuul-static.jar"],
-    cmd = " && ".join([
-        "mkdir $$TMP/static",
-        "cp $(locations :gr-zuul) $$TMP/static",
-        "cd $$TMP",
-        "zip -Drq $$ROOT/$@ -g .",
-    ]),
-)
-
-polygerrit_plugin(
-    name = "gr-zuul",
-    app = "zuul-bundle.js",
-    plugin_name = "zuul",
-)
-
-rollup_bundle(
-    name = "zuul-bundle",
-    srcs = glob(["gr-zuul/*.js"]),
-    entry_point = "gr-zuul/plugin.js",
-    rollup_bin = "//tools/node_tools:rollup-bin",
-    sourcemap = "hidden",
-    format = "iife",
-    deps = [
-        "@tools_npm//rollup-plugin-node-resolve",
-    ],
-)
-
-# Define the eslinter for the plugin
-# The eslint macro creates 2 rules: lint_test and lint_bin
-eslint(
-    name = "lint",
-    srcs = glob([
-        "gr-zuul/**/*.js",
-    ]),
-    config = ".eslintrc.json",
-    data = [],
-    extensions = [
-        ".js",
-    ],
-    ignore = ".eslintignore",
-    plugins = [
-        "@npm//eslint-config-google",
-        "@npm//eslint-plugin-html",
-        "@npm//eslint-plugin-import",
-        "@npm//eslint-plugin-jsdoc",
-    ],
-)
-
diff --git a/gr-zuul/gr-zuul.js b/gr-zuul/gr-zuul.js
deleted file mode 100644
index b6893ce..0000000
--- a/gr-zuul/gr-zuul.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * @license
- * Copyright (C) 2020 The Android Open Source Project
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {htmlTemplate} from './gr-zuul_html.js';
-
-class GrZuul extends Polymer.Element {
-  /** @returns {string} name of the component */
-  static get is() { return 'gr-zuul'; }
-
-  /** @returns {?} template for this component */
-  static get template() { return htmlTemplate; }
-
-  static get properties() {
-    return {
-      change: {
-        type: Object,
-        observer: '_onChangeChanged',
-      },
-      hidden: {
-        type: Boolean,
-        value: true,
-        reflectToAttribute: true,
-      },
-      _crd: {
-        type: Object,
-        value: {},
-      },
-      _crd_loaded: {
-        type: Boolean,
-        value: false,
-      },
-    };
-  }
-
-  _onChangeChanged() {
-    this._crd_loaded = false;
-    this.setHidden(true);
-    const url = '/changes/' + this.change.id + '/revisions/current/crd';
-    return this.plugin.restApi().send('GET', url).then(crd => {
-      this._crd = crd;
-      this._crd_loaded = true;
-      this.setHidden(!(this._isDependsOnSectionVisible()
-                       || crd.needed_by.length));
-    });
-  }
-
-  // copied from gr-related-changes-list.js, which is inaccessible from here.
-  // Resolved uses of `this.ChangeStatus.[...]`, as that's inaccessible from here too.
-  // Removed _isIndirectAncestor check, as the needed data is inaccessible from here.
-  // Not all code paths are reachable, as we only have shallow ChangeInfo objects. We leave the
-  // code here nonetheless, to allow for easier updating from gr-related-changes-list.js.
-  _computeChangeStatusClass(change) {
-    const classes = ['status'];
-    if (change._revision_number != change._current_revision_number) {
-      classes.push('notCurrent');
-    } else if (change.submittable) {
-      classes.push('submittable');
-    } else if (change.status == 'NEW') {
-      classes.push('hidden');
-    }
-    return classes.join(' ');
-  }
-
-  // copied from gr-related-changes-list.js, which is inaccessible from here.
-  // Resolved uses of `this.ChangeStatus.[...]`, as that's inaccessible from here too.
-  // Removed _isIndirectAncestor check, as the needed data is inaccessible from here.
-  // Not all code paths are reachable, as we only have shallow ChangeInfo objects. We leave the
-  // code here nonetheless, to allow for easier updating from gr-related-changes-list.js.
-  _computeChangeStatus(change) {
-    switch (change.status) {
-      case 'MERGED':
-        return 'Merged';
-      case 'ABANDONED':
-        return 'Abandoned';
-    }
-    if (change._revision_number != change._current_revision_number) {
-      return 'Not current';
-    } else if (change.submittable) {
-      return 'Submittable';
-    }
-    return '';
-  }
-
-  setHidden(hidden) {
-    if (this.hidden != hidden) {
-      this.hidden = hidden;
-
-      // Flag to parents that something changed
-      this.dispatchEvent(new CustomEvent('new-section-loaded', {
-        composed: true, bubbles: true,
-      }));
-    }
-  }
-
-  _computeDependencyUrl(changeInfo) {
-    return `${window.CANONICAL_PATH || ''}/q/${changeInfo.change_id}`;
-  }
-
-  _isDependsOnSectionVisible() {
-    return !!(this._crd.depends_on_found.length
-              + this._crd.depends_on_missing.length);
-  }
-}
-
-customElements.define(GrZuul.is, GrZuul);
diff --git a/gr-zuul/gr-zuul_html.js b/gr-zuul/gr-zuul_html.js
deleted file mode 100644
index 5e208d4..0000000
--- a/gr-zuul/gr-zuul_html.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/**
- * @license
- * Copyright (C) 2020 The Android Open Source Project
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export const htmlTemplate = Polymer.html`
-    <style include="shared-styles">
-      section.related-changes-section {
-        margin-bottom: 1.4em; /* Same as line height for collapse purposes */
-        display: block;
-      }
-      div.foo {
-        margin-bottom: 1.4em; /* Same as line height for collapse purposes */
-      }
-      a {
-        display: block;
-      }
-      .changeContainer,
-      a {
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .changeContainer {
-        display: flex;
-      }
-      .changeContainer.thisChange:before {
-        content: '➔';
-        width: 1.2em;
-      }
-      h4,
-      section div {
-        display: flex;
-      }
-      h4:before,
-      section div:before {
-        content: ' ';
-        flex-shrink: 0;
-        width: 1.2em;
-      }
-      .status {
-        color: var(--deemphasized-text-color);
-        font-weight: var(--font-weight-bold);
-        margin-left: var(--spacing-xs);
-      }
-      /* The above styles are copy/paste from gr-related-changes-list_html.js */
-      .dependencyCycleDetected {
-        color: #d17171;
-      }
-      .missingFromThisServer {
-        color: #d17171;
-      }
-      .hidden {
-        display: none;
-      }
-    </style>
-    <template is="dom-if" if="[[_crd_loaded]]">
-      <template is="dom-if" if="[[_isDependsOnSectionVisible()]]">
-        <section class="related-changes-section">
-          <h4>Depends on</h4>
-          <template is="dom-repeat" items="[[_crd.depends_on_found]]">
-            <div class="changeContainer zuulDependencyContainer">
-              <a
-                href$="[[_computeDependencyUrl(item)]]"
-                title$="[[item.project]]: [[item.branch]]: [[item.subject]]"
-              >
-                [[item.project]]: [[item.branch]]: [[item.subject]]
-              </a>
-              <span class$="[[_computeChangeStatusClass(item)]]">
-                ([[_computeChangeStatus(item)]])
-              </span>
-              <template is="dom-if" if="[[_crd.cycle]]">
-                <span class="status dependencyCycleDetected">
-                  (Dependency cycle detected)
-                </span>
-              </template>
-            </div>
-          </template>
-          <template is="dom-repeat" items="[[_crd.depends_on_missing]]">
-            <div class="changeContainer zuulDependencyContainer">
-              <span>
-                [[item]]
-              </span>
-              <span class="status missingFromThisServer">
-                (Missing from this server)
-              </span>
-            </div>
-          </template>
-        </section>
-      </template>
-      <template is="dom-if" if="[[_crd.needed_by.length]]">
-        <section class="related-changes-section">
-          <h4>Needed by</h4>
-          <template is="dom-repeat" items="[[_crd.needed_by]]">
-            <div class="changeContainer zuulDependencyContainer">
-              <a
-                href$="[[_computeDependencyUrl(item)]]"
-                title$="[[item.project]]: [[item.branch]]: [[item.subject]]"
-              >
-                [[item.project]]: [[item.branch]]: [[item.subject]]
-              </a>
-              <span class$="[[_computeChangeStatusClass(item)]]">
-                ([[_computeChangeStatus(item)]])
-              </span>
-              <template is="dom-if" if="[[_crd.cycle]]">
-                <span class="status dependencyCycleDetected">
-                  (Dependency cycle detected)
-                </span>
-              </template>
-            </div>
-          </template>
-        </section>
-      </template>
-    </template>
-`;
-
diff --git a/web/BUILD b/web/BUILD
new file mode 100644
index 0000000..991390e
--- /dev/null
+++ b/web/BUILD
@@ -0,0 +1,42 @@
+load("//tools/js:eslint.bzl", "plugin_eslint")
+load("//tools/bzl:js.bzl", "gerrit_js_bundle")
+load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_project")
+
+package_group(
+    name = "visibility",
+    packages = ["//plugins/zuul/..."],
+)
+
+package(default_visibility = [":visibility"])
+
+ts_config(
+    name = "tsconfig",
+    src = "tsconfig.json",
+    deps = [
+        "//plugins:tsconfig-plugins-base.json",
+    ],
+)
+
+ts_project(
+    name = "zuul-ts",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*test*"],
+    ),
+    incremental = True,
+    out_dir = "_bazel_ts_out",
+    tsc = "//tools/node_tools:tsc-bin",
+    tsconfig = ":tsconfig",
+    deps = [
+        "@plugins_npm//@gerritcodereview/typescript-api",
+        "@plugins_npm//lit",
+    ],
+)
+
+gerrit_js_bundle(
+    name = "zuul",
+    srcs = [":zuul-ts"],
+    entry_point = "_bazel_ts_out/plugin.js",
+)
+
+plugin_eslint()
diff --git a/web/eslint.config.js b/web/eslint.config.js
new file mode 100644
index 0000000..54028d5
--- /dev/null
+++ b/web/eslint.config.js
@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2025 The Android Open Source Project
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+const {defineConfig} = require('eslint/config');
+
+// eslint-disable-next-line no-undef
+__plugindir = 'zuul/web';
+
+const gerritEslint = require('../../eslint.config.js');
+
+module.exports = defineConfig([
+  {
+    extends: [gerritEslint],
+  },
+]);
diff --git a/web/gr-zuul.ts b/web/gr-zuul.ts
new file mode 100644
index 0000000..9d28ab2
--- /dev/null
+++ b/web/gr-zuul.ts
@@ -0,0 +1,250 @@
+/**
+ * @license
+ * Copyright (C) 2025 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {ChangeInfo, NumericChangeId} from '@gerritcodereview/typescript-api/rest-api';
+import {LitElement, html, css, nothing} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'gr-zuul': GrZuul;
+  }
+}
+
+interface CrdInfo {
+  depends_on_found?: ChangeInfo[];
+  depends_on_missing?: string[];
+  needed_by?: ChangeInfo[];
+  cycle?: boolean;
+}
+
+// Partial copy of https://github.com/GerritCodeReview/gerrit/blob/b42341c5cd9b1f1535df30b16f180a90617fd067/polygerrit-ui/app/types/common.ts#L1377
+interface RelatedChangeAndCommitInfo {
+  _change_number?: NumericChangeId;
+  _revision_number?: number;
+  _current_revision_number?: number;
+  status?: string;
+  submittable?: boolean;
+}
+
+
+@customElement('gr-zuul')
+export class GrZuul extends LitElement {
+  @property({type: Object}) change?: ChangeInfo;
+
+  @state() private _crd: CrdInfo = {};
+  @state() private _crdLoaded = false;
+
+  static override get styles() {
+    return [
+      css`
+        section.related-changes-section {
+          margin-bottom: 1.4em;
+          display: block;
+        }
+        a {
+          display: block;
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .changeContainer {
+          display: flex;
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .changeContainer.thisChange:before {
+          content: '➔';
+          width: 1.2em;
+        }
+        h4,
+        section div {
+          display: flex;
+        }
+        h4:before,
+        section div:before {
+          content: ' ';
+          flex-shrink: 0;
+          width: 1.2em;
+        }
+        .status {
+          color: var(--deemphasized-text-color);
+          font-weight: var(--font-weight-bold);
+          margin-left: var(--spacing-xs);
+        }
+        .dependencyCycleDetected,
+        .missingFromThisServer {
+          color: #d17171;
+        }
+        .hidden {
+          display: none;
+        }
+      `,
+    ];
+  }
+
+  override render() {
+    if (!this._crdLoaded) return nothing;
+
+    return html`
+      ${this._isDependsOnSectionVisible()
+        ? html`
+            <section class="related-changes-section">
+              <h4>Depends on</h4>
+              ${this._crd.depends_on_found?.map(
+                item => html`
+                  <div class="changeContainer zuulDependencyContainer">
+                    <a
+                      href=${this._computeDependencyUrl(item)}
+                      title="${item.project}: ${item.branch}: ${item.subject}"
+                    >
+                      ${item.project}: ${item.branch}: ${item.subject}
+                    </a>
+                    <span class=${this._computeChangeStatusClass(item)}>
+                      (${this._computeChangeStatus(item)})
+                    </span>
+                    ${this._crd.cycle
+                      ? html`
+                          <span class="status dependencyCycleDetected">
+                            (Dependency cycle detected)
+                          </span>
+                        `
+                      : nothing}
+                  </div>
+                `
+              )}
+              ${this._crd.depends_on_missing?.map(
+                item => html`
+                  <div class="changeContainer zuulDependencyContainer">
+                    <span>${item}</span>
+                    <span class="status missingFromThisServer">
+                      (Missing from this server)
+                    </span>
+                  </div>
+                `
+              )}
+            </section>
+          `
+        : nothing}
+
+      ${this._crd.needed_by?.length
+        ? html`
+            <section class="related-changes-section">
+              <h4>Needed by</h4>
+              ${this._crd.needed_by.map(
+                item => html`
+                  <div class="changeContainer zuulDependencyContainer">
+                    <a
+                      href=${this._computeDependencyUrl(item)}
+                      title="${item.project}: ${item.branch}: ${item.subject}"
+                    >
+                      ${item.project}: ${item.branch}: ${item.subject}
+                    </a>
+                    <span class=${this._computeChangeStatusClass(item)}>
+                      (${this._computeChangeStatus(item)})
+                    </span>
+                    ${this._crd.cycle
+                      ? html`
+                          <span class="status dependencyCycleDetected">
+                            (Dependency cycle detected)
+                          </span>
+                        `
+                      : nothing}
+                  </div>
+                `
+              )}
+            </section>
+          `
+        : nothing}
+    `;
+  }
+
+  override updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('change')) {
+      void this._onChangeChanged();
+    }
+  }
+
+  private async _onChangeChanged(): Promise<void> {
+    this._crdLoaded = false;
+    this._setHidden(true);
+    if (!this.change?.id) return;
+
+    const url = `/changes/${this.change.id}/revisions/current/crd`;
+    const plugin = (this as any).plugin;
+
+    const crd: CrdInfo = await plugin.restApi().send('GET', url);
+    this._crd = crd;
+    this._crdLoaded = true;
+
+    const visible = this._isDependsOnSectionVisible() || (crd.needed_by?.length ?? 0) > 0;
+    this._setHidden(!visible);
+  }
+
+  private _setHidden(hidden: boolean): void {
+    if (this.hidden !== hidden) {
+      this.hidden = hidden;
+      this.dispatchEvent(
+        new CustomEvent('new-section-loaded', {
+          composed: true,
+          bubbles: true,
+        })
+      );
+    }
+  }
+
+  private _computeChangeStatusClass(change: RelatedChangeAndCommitInfo): string {
+    const classes = ['status'];
+    if (change._revision_number !== change._current_revision_number) {
+      classes.push('notCurrent');
+    } else if (change.submittable) {
+      classes.push('submittable');
+    } else if (change.status === 'NEW') {
+      classes.push('hidden');
+    }
+    return classes.join(' ');
+  }
+
+  private _computeChangeStatus(change: RelatedChangeAndCommitInfo): string {
+    switch (change.status) {
+      case 'MERGED':
+        return 'Merged';
+      case 'ABANDONED':
+        return 'Abandoned';
+      default:
+        if (change._revision_number !== change._current_revision_number) {
+          return 'Not current';
+        } else if (change.submittable) {
+          return 'Submittable';
+        }
+        return '';
+    }
+  }
+
+  private _computeDependencyUrl(changeInfo: ChangeInfo): string {
+    const base = (window as any).CANONICAL_PATH || '';
+    return `${base}/q/${changeInfo.change_id}`;
+  }
+
+  private _isDependsOnSectionVisible(): boolean {
+    const {depends_on_found, depends_on_missing} = this._crd;
+    return (depends_on_found?.length ?? 0) + (depends_on_missing?.length ?? 0) > 0;
+  }
+}
diff --git a/gr-zuul/plugin.js b/web/plugin.ts
similarity index 80%
rename from gr-zuul/plugin.js
rename to web/plugin.ts
index 475f053..d75cd7d 100644
--- a/gr-zuul/plugin.js
+++ b/web/plugin.ts
@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (C) 2020 The Android Open Source Project
+ * Copyright (C) 2025 The Android Open Source Project
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,9 +14,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import './gr-zuul.js';
 
-Gerrit.install(plugin => {
+import '@gerritcodereview/typescript-api/gerrit';
+import './gr-zuul';
+
+window.Gerrit?.install(plugin => {
   plugin.registerCustomComponent(
       'related-changes-section', 'gr-zuul', {slot: 'bottom'});
 });
diff --git a/web/tsconfig.json b/web/tsconfig.json
new file mode 100644
index 0000000..78f5cc7
--- /dev/null
+++ b/web/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig-plugins-base.json",
+  "compilerOptions": {
+    "outDir": "../../../.ts-out/plugins/zuul" /* overridden by bazel */
+  },
+  "include": [
+    "**/*.ts"
+  ]
+}