From 6a1c39101ac6e9e3e3fb9996b7efbc27a3d380e8 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 19 Jan 2026 16:07:30 +0000
Subject: [PATCH 1/4] Initial plan


From 45b5828e5d6f53e9a47f0519b8321f6f97404bba Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 19 Jan 2026 16:15:19 +0000
Subject: [PATCH 2/4] Fix TypeScript type errors in event handlers and refs

Co-authored-by: d10c <9970661+d10c@users.noreply.github.com>
---
 .../src/view/common/CodePaths/CodeFlowsDropdown.tsx       | 6 +++---
 extensions/ql-vscode/src/view/common/DataGrid.tsx         | 4 ++--
 extensions/ql-vscode/src/view/common/TextButton.tsx       | 2 +-
 .../ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx   | 2 +-
 .../ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx  | 5 ++---
 .../ql-vscode/src/view/variant-analysis/RepoRow.tsx       | 8 ++++----
 .../src/view/variant-analysis/RepositoriesFilter.tsx      | 2 +-
 .../view/variant-analysis/RepositoriesResultFormat.tsx    | 2 +-
 .../src/view/variant-analysis/RepositoriesSort.tsx        | 2 +-
 .../src/view/variant-analysis/VariantAnalysisActions.tsx  | 1 -
 10 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx b/extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx
index cc232060f0a..12af1de42d2 100644
--- a/extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx
+++ b/extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx
@@ -1,4 +1,4 @@
-import type { ChangeEvent, SetStateAction } from "react";
+import type { SetStateAction } from "react";
 import { useCallback } from "react";
 import {
   VscodeOption,
@@ -25,8 +25,8 @@ export const CodeFlowsDropdown = ({
   setSelectedCodeFlow,
 }: CodeFlowsDropdownProps) => {
   const handleChange = useCallback(
-    (e: ChangeEvent<HTMLSelectElement>) => {
-      const selectedOption = e.target;
+    (e: Event) => {
+      const selectedOption = e.target as HTMLSelectElement;
       const selectedIndex = parseInt(selectedOption.value);
       setSelectedCodeFlow(codeFlows[selectedIndex]);
     },
diff --git a/extensions/ql-vscode/src/view/common/DataGrid.tsx b/extensions/ql-vscode/src/view/common/DataGrid.tsx
index a8bce90b0a3..2dc3bfa95ad 100644
--- a/extensions/ql-vscode/src/view/common/DataGrid.tsx
+++ b/extensions/ql-vscode/src/view/common/DataGrid.tsx
@@ -83,7 +83,7 @@ export const DataGridRow = forwardRef(
       "data-testid": testId,
       onClick,
     }: DataGridRowProps,
-    ref?: React.Ref<HTMLElement | undefined>,
+    ref?: React.Ref<HTMLDivElement>,
   ) => (
     <StyledDataGridRow
       $focused={focused}
@@ -135,7 +135,7 @@ export const DataGridCell = forwardRef(
       className,
       children,
     }: DataGridCellProps,
-    ref?: React.Ref<HTMLElement | undefined>,
+    ref?: React.Ref<HTMLDivElement>,
   ) => {
     return (
       <StyledDataGridCell
diff --git a/extensions/ql-vscode/src/view/common/TextButton.tsx b/extensions/ql-vscode/src/view/common/TextButton.tsx
index eb073f51969..b91a6ab9474 100644
--- a/extensions/ql-vscode/src/view/common/TextButton.tsx
+++ b/extensions/ql-vscode/src/view/common/TextButton.tsx
@@ -2,7 +2,7 @@ import { styled } from "styled-components";
 
 type Size = "x-small" | "small" | "medium" | "large" | "x-large";
 
-const StyledButton = styled.button<{ $size: Size }>`
+const StyledButton = styled.button<{ $size?: Size }>`
   background: none;
   color: var(--vscode-textLink-foreground);
   border: none;
diff --git a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx
index e5d4e9f2eb6..c2053575587 100644
--- a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx
+++ b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx
@@ -20,7 +20,7 @@ type Props = {
 
 export const ModelAlertsSort = ({ value, onChange, className }: Props) => {
   const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {
       const target = e.target as HTMLSelectElement;
 
       onChange(target.value as SortKey);
diff --git a/extensions/ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx b/extensions/ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx
index 69f9a0829b9..e9ba55c9a8a 100644
--- a/extensions/ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx
+++ b/extensions/ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx
@@ -1,4 +1,3 @@
-import type { ChangeEvent } from "react";
 import { useCallback, useEffect, useState } from "react";
 import type {
   ModeledMethod,
@@ -33,8 +32,8 @@ export const ModelTypeTextbox = ({
     setValue(modeledMethod[typeInfo]);
   }, [modeledMethod, typeInfo]);
 
-  const handleChange = useCallback((e: ChangeEvent<HTMLSelectElement>) => {
-    const target = e.target as HTMLSelectElement;
+  const handleChange = useCallback((e: Event) => {
+    const target = e.target as HTMLInputElement;
 
     setValue(target.value);
   }, []);
diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx
index 19edad08cc2..06fa7ec8705 100644
--- a/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx
+++ b/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx
@@ -1,4 +1,3 @@
-import type { ChangeEvent } from "react";
 import { useCallback, useEffect, useState } from "react";
 import { styled } from "styled-components";
 import { VscodeCheckbox } from "@vscode-elements/react-elements";
@@ -229,9 +228,10 @@ export const RepoRow = ({
     e.stopPropagation();
   }, []);
   const onChangeCheckbox = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
+    (e: Event) => {
+      const target = e.target as HTMLInputElement;
       // This is called on first render, but we don't really care about this value
-      if (e.target.checked === undefined) {
+      if (target.checked === undefined) {
         return;
       }
 
@@ -239,7 +239,7 @@ export const RepoRow = ({
         return;
       }
 
-      onSelectedChange?.(repository.id, e.target.checked);
+      onSelectedChange?.(repository.id, target.checked);
     },
     [onSelectedChange, repository],
   );
diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx
index 206b33586fb..8605296bcac 100644
--- a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx
+++ b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx
@@ -20,7 +20,7 @@ type Props = {
 
 export const RepositoriesFilter = ({ value, onChange, className }: Props) => {
   const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {
       const target = e.target as HTMLSelectElement;
 
       onChange(target.value as FilterKey);
diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx
index 380599017eb..cc7455bab25 100644
--- a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx
+++ b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx
@@ -24,7 +24,7 @@ export const RepositoriesResultFormat = ({
   className,
 }: Props) => {
   const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {
       const target = e.target as HTMLSelectElement;
 
       onChange(target.value as ResultFormat);
diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx
index 96ec4c43dd4..b067b68d110 100644
--- a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx
+++ b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx
@@ -20,7 +20,7 @@ type Props = {
 
 export const RepositoriesSort = ({ value, onChange, className }: Props) => {
   const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {
       const target = e.target as HTMLSelectElement;
 
       onChange(target.value as SortKey);
diff --git a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx
index abec9443946..bf7261d5149 100644
--- a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx
+++ b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx
@@ -102,7 +102,6 @@ export const VariantAnalysisActions = ({
             })}
           </Button>
           <Button
-            appearance="primary"
             onClick={onExportResultsClick}
             disabled={exportResultsDisabled}
           >

From 1d805dd6468cf79928848dc06efc5e77d3524aed Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 19 Jan 2026 17:04:06 +0000
Subject: [PATCH 3/4] Fix MethodRow ref types to match DataGridCell

Co-authored-by: d10c <9970661+d10c@users.noreply.github.com>
---
 extensions/ql-vscode/src/view/model-editor/MethodRow.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
index 03a1abdd44c..357cf6bd69f 100644
--- a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
+++ b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
@@ -103,7 +103,7 @@ export const MethodRow = (props: MethodRowProps) => {
   }
 };
 
-const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
+const ModelableMethodRow = forwardRef<HTMLDivElement, MethodRowProps>(
   (props: MethodRowProps, ref) => {
     const {
       method,
@@ -360,7 +360,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
 ModelableMethodRow.displayName = "ModelableMethodRow";
 
 const UnmodelableMethodRow = forwardRef<
-  HTMLElement | undefined,
+  HTMLDivElement,
   MethodRowProps
 >((props: MethodRowProps, ref) => {
   const { method, viewState, revealedMethodSignature } = props;

From 42b1cb7588eb17f76188b7db10c4ab604a8e3e03 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 19 Jan 2026 17:07:22 +0000
Subject: [PATCH 4/4] Fix useRef type in MethodRow parent component

Co-authored-by: d10c <9970661+d10c@users.noreply.github.com>
---
 .../src/view/model-editor/MethodRow.tsx       | 67 +++++++++----------
 1 file changed, 33 insertions(+), 34 deletions(-)

diff --git a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
index 357cf6bd69f..c3c6b646f79 100644
--- a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
+++ b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
@@ -85,7 +85,7 @@ export type MethodRowProps = {
 export const MethodRow = (props: MethodRowProps) => {
   const { method, methodCanBeModeled, revealedMethodSignature } = props;
 
-  const ref = useRef<HTMLElement | undefined>(undefined);
+  const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (method.signature === revealedMethodSignature) {
@@ -359,39 +359,38 @@ const ModelableMethodRow = forwardRef<HTMLDivElement, MethodRowProps>(
 );
 ModelableMethodRow.displayName = "ModelableMethodRow";
 
-const UnmodelableMethodRow = forwardRef<
-  HTMLDivElement,
-  MethodRowProps
->((props: MethodRowProps, ref) => {
-  const { method, viewState, revealedMethodSignature } = props;
-
-  const jumpToMethod = useCallback(
-    () => sendJumpToMethodMessage(method),
-    [method],
-  );
-
-  return (
-    <DataGridRow
-      data-testid="unmodelable-method-row"
-      focused={revealedMethodSignature === method.signature}
-    >
-      <DataGridCell ref={ref}>
-        <ApiOrMethodRow>
-          <ModelingStatusIndicator status="saved" />
-          <MethodClassifications method={method} />
-          <MethodName {...props.method} />
-          {viewState.mode === Mode.Application && (
-            <UsagesButton onClick={jumpToMethod}>
-              {method.usages.length}
-            </UsagesButton>
-          )}
-          <ViewLink onClick={jumpToMethod}>View</ViewLink>
-        </ApiOrMethodRow>
-      </DataGridCell>
-      <DataGridCell gridColumn="span 5">Method already modeled</DataGridCell>
-    </DataGridRow>
-  );
-});
+const UnmodelableMethodRow = forwardRef<HTMLDivElement, MethodRowProps>(
+  (props: MethodRowProps, ref) => {
+    const { method, viewState, revealedMethodSignature } = props;
+
+    const jumpToMethod = useCallback(
+      () => sendJumpToMethodMessage(method),
+      [method],
+    );
+
+    return (
+      <DataGridRow
+        data-testid="unmodelable-method-row"
+        focused={revealedMethodSignature === method.signature}
+      >
+        <DataGridCell ref={ref}>
+          <ApiOrMethodRow>
+            <ModelingStatusIndicator status="saved" />
+            <MethodClassifications method={method} />
+            <MethodName {...props.method} />
+            {viewState.mode === Mode.Application && (
+              <UsagesButton onClick={jumpToMethod}>
+                {method.usages.length}
+              </UsagesButton>
+            )}
+            <ViewLink onClick={jumpToMethod}>View</ViewLink>
+          </ApiOrMethodRow>
+        </DataGridCell>
+        <DataGridCell gridColumn="span 5">Method already modeled</DataGridCell>
+      </DataGridRow>
+    );
+  },
+);
 UnmodelableMethodRow.displayName = "UnmodelableMethodRow";
 
 function sendJumpToMethodMessage(method: Method) {