feat: implement VM SKU chooser tool with filtering and location persistence

app/frontend/package-lock.json

@@ -13,6 +13,7 @@
         "@emotion/styled": "^11.14.1",
         "@mui/icons-material": "^9.0.0",
         "@mui/material": "^9.0.0",
+        "@mui/x-data-grid": "^9.0.2",
         "@tanstack/react-query": "^5.99.2",
         "react": "^19.2.5",
         "react-dom": "^19.2.5"
@@ -1265,6 +1266,88 @@
         }
       }
     },
+    "node_modules/@mui/x-data-grid": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-9.0.2.tgz",
+      "integrity": "sha512-9hkBS73x3G5MniOpkCh54iH5iwBr55obchF5IS1eybURZEgPxSXFizNMrDbyM2EGaYG9DQ87MvC5IoV7g0F2Vw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "@mui/utils": "9.0.0",
+        "@mui/x-internals": "^9.0.0",
+        "@mui/x-virtualizer": "9.0.0-alpha.0",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^7.3.0 || ^9.0.0",
+        "@mui/system": "^7.3.0 || ^9.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-internals": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-9.0.0.tgz",
+      "integrity": "sha512-E/4rdg69JjhyybpPGypCjAKSKLLnSdCFM+O6P/nkUg47+qt3uftxQEhjQO53rcn6ahHl6du/uNZ9BLgeY6kYxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "@mui/utils": "9.0.0",
+        "reselect": "^5.1.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@mui/x-virtualizer": {
+      "version": "9.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-virtualizer/-/x-virtualizer-9.0.0-alpha.0.tgz",
+      "integrity": "sha512-K52TKCuWlkMEWOeB2nPfhIAHaWsYEb9h1ME9Wb+gmw4FloMA03VvKsrqvn8o6l8hYUi4/5F8NfYOIfPwqW3EhA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "@mui/utils": "9.0.0",
+        "@mui/x-internals": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
@@ -3547,6 +3630,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.12",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
@@ -3909,6 +3998,15 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "8.0.8",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.8.tgz",

app/frontend/package.json

@@ -16,6 +16,7 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^9.0.0",
     "@mui/material": "^9.0.0",
+    "@mui/x-data-grid": "^9.0.2",
     "@tanstack/react-query": "^5.99.2",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"

app/frontend/src/api.ts

@@ -1,4 +1,4 @@
-import type { LocationOption, SelectionState, UsageTemplate } from "./types";
+import type { LocationOption, SelectionState, UsageTemplate, VmSkuOption } from "./types";
 
 const json = async <T>(path: string): Promise<T> => {
   const response = await fetch(path);
@@ -31,6 +31,7 @@ export const api = {
     json<string[]>(
       `/api/versions?location=${encodeURIComponent(location)}&publisher=${encodeURIComponent(publisher)}&offer=${encodeURIComponent(offer)}&sku=${encodeURIComponent(sku)}`
     ),
+  vmSkus: (location: string) => json<VmSkuOption[]>(`/api/vm-skus?location=${encodeURIComponent(location)}`),
   templates: () => json<UsageTemplate[]>("/api/templates"),
   render: async (templateFile: string, selection: SelectionState): Promise<string> => {
     const response = await fetch("/api/render", {

app/frontend/src/help/vm-sku-chooser-help.md

@@ -0,0 +1 @@
+Use this tool to list VM SKUs available in a selected Azure region.

app/frontend/src/location-helper.ts

@@ -0,0 +1,33 @@
+export const SHARED_LOCATION_COOKIE_NAME = "location";
+
+export const readSharedLocation = (): string => {
+  if (typeof document === "undefined") {
+    return "";
+  }
+
+  const cookies = document.cookie ? document.cookie.split("; ") : [];
+  for (const entry of cookies) {
+    const separatorIndex = entry.indexOf("=");
+    if (separatorIndex === -1) {
+      continue;
+    }
+
+    const key = entry.slice(0, separatorIndex);
+    if (key !== SHARED_LOCATION_COOKIE_NAME) {
+      continue;
+    }
+
+    return decodeURIComponent(entry.slice(separatorIndex + 1));
+  }
+
+  return "";
+};
+
+export const writeSharedLocation = (location: string): void => {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  // Keep selected location for 30 days across tools.
+  document.cookie = `${SHARED_LOCATION_COOKIE_NAME}=${encodeURIComponent(location)}; Max-Age=${60 * 60 * 24 * 30}; Path=/; SameSite=Lax`;
+};

app/frontend/src/tools/ImageChooserTool.tsx

@@ -18,6 +18,7 @@ import {
 } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import { api } from "../api";
+import { readSharedLocation, writeSharedLocation } from "../location-helper";
 import type { SelectionState } from "../types";
 
 const EMPTY_SELECTION: SelectionState = {
@@ -29,7 +30,10 @@ const EMPTY_SELECTION: SelectionState = {
 };
 
 const ImageChooserTool = () => {
-  const [selection, setSelection] = useState<SelectionState>(EMPTY_SELECTION);
+  const [selection, setSelection] = useState<SelectionState>(() => ({
+    ...EMPTY_SELECTION,
+    location: readSharedLocation()
+  }));
   const [templateFile, setTemplateFile] = useState("");
   const [renderedUsage, setRenderedUsage] = useState("");
   const [skuExport, setSkuExport] = useState("");
@@ -161,7 +165,11 @@ const ImageChooserTool = () => {
                     labelId="location-label"
                     label="Location"
                     value={selection.location}
-                    onChange={(event) => setSelection((prev) => ({ ...prev, location: event.target.value }))}
+                    onChange={(event) => {
+                      const nextLocation = event.target.value;
+                      setSelection((prev) => ({ ...prev, location: nextLocation }));
+                      writeSharedLocation(nextLocation);
+                    }}
                   >
                     {(locationsQuery.data ?? []).map((location) => (
                       <MenuItem key={location.name} value={location.name}>

app/frontend/src/tools/VmSkuChooserTool.tsx

@@ -0,0 +1,361 @@
+import { useMemo, useState } from "react";
+import {
+  Alert,
+  Box,
+  Card,
+  CardContent,
+  CircularProgress,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  TextField,
+  Typography
+} from "@mui/material";
+import { DataGrid, type GridColDef } from "@mui/x-data-grid";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "../api";
+import { readSharedLocation, writeSharedLocation } from "../location-helper";
+import type { VmSkuOption } from "../types";
+
+const HEADER_CLASS_NAME = "vm-sku-grid-header";
+
+type VmSkuRow = {
+  id: string;
+  name: string;
+  family: string;
+  vcpus: string;
+  memoryGb: string;
+  maxDataDiskCount: string;
+};
+
+const formatValue = (value: number | null): string => {
+  if (value === null) {
+    return "-";
+  }
+
+  return Number.isInteger(value) ? String(value) : value.toFixed(1);
+};
+
+const parseNumericFilter = (value: string): number | null => {
+  if (!value.trim()) {
+    return null;
+  }
+
+  const parsed = Number.parseFloat(value);
+  if (!Number.isFinite(parsed)) {
+    return null;
+  }
+
+  return parsed;
+};
+
+const extractFamilyCode = (sku: VmSkuOption): string => {
+  const skuName = sku.name ?? "";
+  const skuFamily = sku.family ?? "";
+
+  const byName = skuName.match(/^Standard_([A-Za-z])/i);
+  if (byName?.[1]) {
+    return byName[1].toUpperCase();
+  }
+
+  const byFamily = skuFamily.match(/([A-Za-z])Family/i);
+  if (byFamily?.[1]) {
+    return byFamily[1].toUpperCase();
+  }
+
+  return "";
+};
+
+const VmSkuChooserTool = () => {
+  const [location, setLocation] = useState(() => readSharedLocation());
+  const [nameFilter, setNameFilter] = useState("");
+  const [familyFilter, setFamilyFilter] = useState("");
+  const [minVcpusFilter, setMinVcpusFilter] = useState("");
+  const [maxVcpusFilter, setMaxVcpusFilter] = useState("");
+  const [minMemoryFilter, setMinMemoryFilter] = useState("");
+  const [maxMemoryFilter, setMaxMemoryFilter] = useState("");
+
+  const healthQuery = useQuery({ queryKey: ["health"], queryFn: api.health });
+  const locationsQuery = useQuery({ queryKey: ["locations"], queryFn: api.locations });
+  const vmSkusQuery = useQuery({
+    queryKey: ["vm-skus", location],
+    queryFn: () => api.vmSkus(location),
+    enabled: Boolean(location)
+  });
+
+  const healthError = healthQuery.error instanceof Error ? healthQuery.error.message : "";
+  const appNotConfigured = healthError.includes("Missing AZURE_SUBSCRIPTION_ID");
+
+  const familyOptions = useMemo(() => {
+    const source = vmSkusQuery.data ?? [];
+    const families = new Set<string>();
+
+    for (const sku of source) {
+      const code = extractFamilyCode(sku);
+      if (code) {
+        families.add(code);
+      }
+    }
+
+    return Array.from(families).sort((a, b) => a.localeCompare(b));
+  }, [vmSkusQuery.data]);
+
+  const filteredSkus = useMemo(() => {
+    const source = vmSkusQuery.data ?? [];
+    const nameQuery = nameFilter.trim().toLowerCase();
+    const minVcpus = parseNumericFilter(minVcpusFilter);
+    const maxVcpus = parseNumericFilter(maxVcpusFilter);
+    const minMemory = parseNumericFilter(minMemoryFilter);
+    const maxMemory = parseNumericFilter(maxMemoryFilter);
+
+    return source.filter((item) => {
+      const itemName = item.name ?? "";
+      if (nameQuery && !itemName.toLowerCase().includes(nameQuery)) {
+        return false;
+      }
+
+      const familyCode = extractFamilyCode(item);
+      if (familyFilter && familyCode !== familyFilter) {
+        return false;
+      }
+
+      if (minVcpus !== null && (item.vcpus === null || item.vcpus < minVcpus)) {
+        return false;
+      }
+
+      if (maxVcpus !== null && (item.vcpus === null || item.vcpus > maxVcpus)) {
+        return false;
+      }
+
+      if (minMemory !== null && (item.memoryGb === null || item.memoryGb < minMemory)) {
+        return false;
+      }
+
+      if (maxMemory !== null && (item.memoryGb === null || item.memoryGb > maxMemory)) {
+        return false;
+      }
+
+      return true;
+    });
+  }, [vmSkusQuery.data, nameFilter, familyFilter, minVcpusFilter, maxVcpusFilter, minMemoryFilter, maxMemoryFilter]);
+
+  const rows = useMemo<VmSkuRow[]>(
+    () =>
+      filteredSkus.map((sku) => ({
+        id: sku.name || `${sku.size || "sku"}-${sku.family || "unknown"}`,
+        name: sku.name || "-",
+        family: sku.family || sku.size || sku.tier || "-",
+        vcpus: formatValue(sku.vcpus),
+        memoryGb: formatValue(sku.memoryGb),
+        maxDataDiskCount: formatValue(sku.maxDataDiskCount)
+      })),
+    [filteredSkus]
+  );
+
+  const columns = useMemo<GridColDef<VmSkuRow>[]>(
+    () => [
+      {
+        field: "name",
+        headerName: "SKU",
+        minWidth: 220,
+        flex: 1.4,
+        headerClassName: HEADER_CLASS_NAME
+      },
+      {
+        field: "family",
+        headerName: "Family",
+        minWidth: 140,
+        flex: 0.9,
+        headerClassName: HEADER_CLASS_NAME
+      },
+      {
+        field: "vcpus",
+        headerName: "vCPUs",
+        minWidth: 110,
+        align: "right",
+        headerAlign: "right",
+        headerClassName: HEADER_CLASS_NAME
+      },
+      {
+        field: "memoryGb",
+        headerName: "Memory (GB)",
+        minWidth: 130,
+        align: "right",
+        headerAlign: "right",
+        headerClassName: HEADER_CLASS_NAME
+      },
+      {
+        field: "maxDataDiskCount",
+        headerName: "Max Data Disks",
+        minWidth: 150,
+        align: "right",
+        headerAlign: "right",
+        headerClassName: HEADER_CLASS_NAME
+      }
+    ],
+    []
+  );
+
+  return (
+    <Stack spacing={3}>
+      <Typography variant="h4" sx={{ fontWeight: 500 }}>
+        VM SKU Chooser
+      </Typography>
+      <Typography color="text.secondary">
+        Browse available VM SKUs in a region using Azure API data.
+      </Typography>
+
+      {appNotConfigured ? (
+        <Alert severity="warning">
+          App is not configured. Set AZURE_SUBSCRIPTION_ID (and Azure credentials) in the container start environment, then restart the app.
+        </Alert>
+      ) : null}
+
+      <Card>
+        <CardContent>
+          <Stack spacing={2}>
+            <Box
+              sx={{
+                display: "grid",
+                gridTemplateColumns: {
+                  xs: "1fr",
+                  lg: "repeat(2, minmax(0, 1fr))"
+                },
+                gap: 2
+              }}
+            >
+              <FormControl fullWidth>
+                <InputLabel id="vm-sku-location-label">Location</InputLabel>
+                <Select
+                  labelId="vm-sku-location-label"
+                  label="Location"
+                  value={location}
+                  onChange={(event) => {
+                    const nextLocation = event.target.value;
+                    setLocation(nextLocation);
+                    writeSharedLocation(nextLocation);
+                  }}
+                >
+                  {(locationsQuery.data ?? []).map((option) => (
+                    <MenuItem key={option.name} value={option.name}>
+                      {option.displayName}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+
+              <TextField
+                label="Filter by SKU name"
+                value={nameFilter}
+                onChange={(event) => setNameFilter(event.target.value)}
+                disabled={!location}
+                fullWidth
+              />
+            </Box>
+
+            <Box
+              sx={{
+                display: "grid",
+                gridTemplateColumns: {
+                  xs: "1fr",
+                  sm: "repeat(2, minmax(0, 1fr))",
+                  lg: "repeat(5, minmax(0, 1fr))"
+                },
+                gap: 2
+              }}
+            >
+              <FormControl fullWidth disabled={!location}>
+                <InputLabel id="vm-sku-family-filter-label">VM Family</InputLabel>
+                <Select
+                  labelId="vm-sku-family-filter-label"
+                  label="VM Family"
+                  value={familyFilter}
+                  onChange={(event) => setFamilyFilter(event.target.value)}
+                >
+                  <MenuItem value="">All families</MenuItem>
+                  {familyOptions.map((family) => (
+                    <MenuItem key={family} value={family}>
+                      {family}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+
+              <TextField
+                type="number"
+                label="Min vCPUs"
+                value={minVcpusFilter}
+                onChange={(event) => setMinVcpusFilter(event.target.value)}
+                disabled={!location}
+              />
+
+              <TextField
+                type="number"
+                label="Max vCPUs"
+                value={maxVcpusFilter}
+                onChange={(event) => setMaxVcpusFilter(event.target.value)}
+                disabled={!location}
+              />
+
+              <TextField
+                type="number"
+                label="Min Memory (GB)"
+                value={minMemoryFilter}
+                onChange={(event) => setMinMemoryFilter(event.target.value)}
+                disabled={!location}
+              />
+
+              <TextField
+                type="number"
+                label="Max Memory (GB)"
+                value={maxMemoryFilter}
+                onChange={(event) => setMaxMemoryFilter(event.target.value)}
+                disabled={!location}
+              />
+            </Box>
+          </Stack>
+        </CardContent>
+      </Card>
+
+      {locationsQuery.isLoading ? <CircularProgress /> : null}
+      {locationsQuery.error instanceof Error ? <Alert severity={appNotConfigured ? "warning" : "error"}>{locationsQuery.error.message}</Alert> : null}
+
+      {vmSkusQuery.isLoading ? <CircularProgress /> : null}
+      {vmSkusQuery.error instanceof Error ? <Alert severity="error">{vmSkusQuery.error.message}</Alert> : null}
+
+      {location && !vmSkusQuery.isLoading && !vmSkusQuery.isError ? (
+        <Card>
+          <CardContent>
+            <Stack spacing={2}>
+              <Typography variant="h6">Available SKUs ({filteredSkus.length})</Typography>
+              <Box sx={{ height: 520 }}>
+                <DataGrid
+                  rows={rows}
+                  columns={columns}
+                  sx={{
+                    [`& .${HEADER_CLASS_NAME}`]: {
+                      bgcolor: "grey.200"
+                    }
+                  }}
+                  pageSizeOptions={[25, 50, 100]}
+                  initialState={{
+                    pagination: {
+                      paginationModel: { pageSize: 25, page: 0 }
+                    }
+                  }}
+                  disableRowSelectionOnClick
+                />
+              </Box>
+
+              {rows.length === 0 ? <Typography color="text.secondary">No SKUs found for this filter.</Typography> : null}
+            </Stack>
+          </CardContent>
+        </Card>
+      ) : null}
+    </Stack>
+  );
+};
+
+export default VmSkuChooserTool;

app/frontend/src/tools/toolRegistry.tsx

@@ -1,8 +1,13 @@
 import ImageChooserTool from "./ImageChooserTool";
 import EmptyTool from "./EmptyTool";
+import VmSkuChooserTool from "./VmSkuChooserTool";
 import imageChooserHelp from "../help/image-chooser-help.md?raw";
+import vmSkuChooserHelp from "../help/vm-sku-chooser-help.md?raw";
 import type { ToolDefinition } from "./types";
 
+const isProductionMode =
+  import.meta.env.PROD || import.meta.env.MODE === "production" || import.meta.env.VITE_NODE === "production";
+
 export const TOOLS: ToolDefinition[] = [
   {
     id: "image-chooser",
@@ -11,8 +16,18 @@ export const TOOLS: ToolDefinition[] = [
     render: () => <ImageChooserTool />
   },
   {
-    id: "empty-tool",
-    name: "Empty Tool",
-    render: () => <EmptyTool />
-  }
+    id: "vm-sku-chooser",
+    name: "VM SKU Chooser",
+    helpContent: vmSkuChooserHelp,
+    render: () => <VmSkuChooserTool />
+  },
+  ...(!isProductionMode
+    ? [
+        {
+          id: "empty-tool",
+          name: "Empty Tool",
+          render: () => <EmptyTool />
+        }
+      ]
+    : [])
 ];

app/frontend/src/types.ts

@@ -16,3 +16,13 @@ export type SelectionState = {
   sku: string;
   version: string;
 };
+
+export type VmSkuOption = {
+  name: string;
+  size: string;
+  family: string;
+  tier: string;
+  vcpus: number | null;
+  memoryGb: number | null;
+  maxDataDiskCount: number | null;
+};