Migrate diagnostics app

Author: simolus3

tools/diagnostics-app/Dockerfile

@@ -1,7 +1,7 @@
-FROM node:22.5 AS builder
+FROM node:24.11 AS builder
 WORKDIR /app
 
-RUN npm i -g pnpm@9
+RUN corepack enable
 
 COPY . /app
 

tools/diagnostics-app/src/app/page.tsx

@@ -36,7 +36,7 @@ export default function EntryPage() {
 
   return (
     <S.MainGrid container>
-      <S.CenteredGrid item xs={12} md={6} lg={5}>
+      <S.CenteredGrid size={{ xs: 12, md: 6, lg: 5 }}>
         <CircularProgress />
       </S.CenteredGrid>
     </S.MainGrid>

tools/diagnostics-app/src/app/views/client-params.tsx

@@ -119,7 +119,7 @@ function ClientParamsPage() {
         <form onSubmit={onSubmit}>
           {params.map(({ key, value, type, error }, idx: number) => (
             <S.CenteredGrid container key={idx}>
-              <S.CenteredGrid item xs={12} md={10}>
+              <S.CenteredGrid size={{ xs: 12, md: 10 }}>
                 <TextField
                   label="Key"
                   value={key}

tools/diagnostics-app/src/app/views/sql-console.tsx

@@ -7,7 +7,7 @@ import { NavigationPage } from '@/components/navigation/NavigationPage';
 const DEFAULT_QUERY = `SELECT name FROM ps_buckets`;
 
 export default function SQLConsolePage() {
-  const inputRef = React.useRef<HTMLInputElement>();
+  const inputRef = React.useRef<HTMLInputElement>(null);
   const [query, setQuery] = React.useState(DEFAULT_QUERY);
   const { data: querySQLResult, isLoading, error } = useQuery(query);
 
@@ -31,7 +31,7 @@ export default function SQLConsolePage() {
     <NavigationPage title="SQL Console">
       <S.MainContainer>
         <S.CenteredGrid container>
-          <S.CenteredGrid item xs={12} md={10}>
+          <S.CenteredGrid size={{ xs: 12, md: 10 }}>
             <TextField
               inputRef={inputRef}
               fullWidth
@@ -47,7 +47,7 @@ export default function SQLConsolePage() {
               helperText={errorMessage}
             />
           </S.CenteredGrid>
-          <S.CenteredGrid item xs={12} md={2}>
+          <S.CenteredGrid size={{ xs: 12, md: 2 }}>
             <Button
               sx={{ margin: '10px' }}
               variant="contained"

tools/diagnostics-app/src/app/views/sync-diagnostics.tsx

@@ -128,7 +128,7 @@ export default function SyncDiagnosticsPage() {
 
   const columns: GridColDef[] = [
     { field: 'name', headerName: 'Name', flex: 2 },
-    { field: 'tables', headerName: 'Table(s)', flex: 1, type: 'text' },
+    { field: 'tables', headerName: 'Table(s)', flex: 1, type: 'string' },
     { field: 'row_count', headerName: 'Row Count', flex: 1, type: 'number' },
     { field: 'downloaded_operations', headerName: 'Downloaded Operations', flex: 1, type: 'number' },
     { field: 'total_operations', headerName: 'Total Operations', flex: 1, type: 'number' },
@@ -137,27 +137,27 @@ export default function SyncDiagnosticsPage() {
       headerName: 'Data Size',
       flex: 1,
       type: 'number',
-      valueFormatter: (v) => formatBytes(v.value)
+      valueFormatter: formatBytes
     },
     {
       field: 'metadata_size',
       headerName: 'Metadata Size',
       flex: 1,
       type: 'number',
-      valueFormatter: (v) => formatBytes(v.value)
+      valueFormatter: formatBytes
     },
     {
       field: 'download_size',
       headerName: 'Downloaded Size',
       flex: 1,
       type: 'number',
-      valueFormatter: (v) => formatBytes(v.value)
+      valueFormatter: formatBytes
     },
     {
       field: 'status',
       headerName: 'Status',
       flex: 1,
-      type: 'text'
+      type: 'string'
     }
   ];
 
@@ -194,7 +194,7 @@ export default function SyncDiagnosticsPage() {
       headerName: 'Data Size',
       flex: 1,
       type: 'number',
-      valueFormatter: (v) => formatBytes(v.value)
+      valueFormatter: formatBytes
     }
   ];
 
@@ -325,7 +325,7 @@ function StreamsState() {
 function StreamsGrid(props: { streams: SyncStreamStatus[] }) {
   const columns: GridColDef[] = [
     { field: 'name', headerName: 'Stream name', flex: 2 },
-    { field: 'parameters', headerName: 'Parameters', flex: 3, type: 'text' },
+    { field: 'parameters', headerName: 'Parameters', flex: 3, type: 'string' },
     { field: 'default', headerName: 'Default', flex: 1, type: 'boolean' },
     { field: 'active', headerName: 'Active', flex: 1, type: 'boolean' },
     { field: 'has_explicit_subscription', headerName: 'Explicit', flex: 1, type: 'boolean' },

tools/diagnostics-app/vite.config.mts

@@ -34,6 +34,9 @@ export default defineConfig({
     VitePWA({
       registerType: 'autoUpdate',
       includeAssets: ['powersync-logo.svg', 'supabase-logo.png', 'favicon.ico'],
+      workbox: {
+        maximumFileSizeToCacheInBytes: 3000000
+      },
       manifest: {
         theme_color: '#c44eff',
         background_color: '#c44eff',