Add initial frontend quality gates and TS hardening (#418)

Co-authored-by: Erion De Andrade <[email protected]>

app/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
     "preview": "vite preview",
     "lint": "biome lint src",
     "lint:fix": "biome lint --write src",

app/src/App.tsx

@@ -121,7 +121,6 @@ function App() {
       console.log('Dev mode: Skipping auto-start of server (run it separately)');
       setServerReady(true); // Mark as ready so UI doesn't show loading screen
       // Mark that server was not started by app (so we don't try to stop it on close)
-      // @ts-expect-error - adding property to window
       window.__voiceboxServerStartedByApp = false;
       return;
     }
@@ -144,13 +143,11 @@ function App() {
         useServerStore.getState().setServerUrl(serverUrl);
         setServerReady(true);
         // Mark that we started the server (so we know to stop it on close)
-        // @ts-expect-error - adding property to window
         window.__voiceboxServerStartedByApp = true;
       })
       .catch((error) => {
         console.error('Failed to auto-start server:', error);
         serverStartingRef.current = false;
-        // @ts-expect-error - adding property to window
         window.__voiceboxServerStartedByApp = false;
 
         // Only fall back to health-check polling when the error indicates the

app/src/components/AudioTab/AudioTab.tsx

@@ -124,7 +124,7 @@ export function AudioTab() {
     );
   }
 
-  const handleChannelDelete = async (e, channelId) => {
+  const handleChannelDelete = async (e: React.MouseEvent, channelId: string) => {
     e.stopPropagation();
     if (await confirm('Delete this channel?')) {
       deleteChannel.mutate(channelId);

app/src/components/ServerSettings/ModelManagement.tsx

@@ -1076,105 +1076,3 @@ export function ModelManagement() {
   );
 }
 
-interface ModelItemProps {
-  model: {
-    model_name: string;
-    display_name: string;
-    downloaded: boolean;
-    downloading?: boolean; // From server - true if download in progress
-    size_mb?: number;
-    loaded: boolean;
-  };
-  onDownload: () => void;
-  onDelete: () => void;
-  isDownloading: boolean; // Local state - true if user just clicked download
-  formatSize: (sizeMb?: number) => string;
-}
-
-function ModelItem({ model, onDownload, onDelete, isDownloading, formatSize }: ModelItemProps) {
-  // Use server's downloading state OR local state (for immediate feedback before server updates)
-  const showDownloading = model.downloading || isDownloading;
-
-  const statusText = model.loaded
-    ? 'Loaded'
-    : showDownloading
-      ? 'Downloading'
-      : model.downloaded
-        ? 'Downloaded'
-        : 'Not downloaded';
-  const sizeText =
-    model.downloaded && model.size_mb && !showDownloading ? `, ${formatSize(model.size_mb)}` : '';
-  const rowLabel = `${model.display_name}, ${statusText}${sizeText}. Use Tab to reach Download or Delete.`;
-
-  return (
-    <div
-      className="flex items-center justify-between p-3 border rounded-lg"
-      role="group"
-      tabIndex={0}
-      aria-label={rowLabel}
-    >
-      <div className="flex-1">
-        <div className="flex items-center gap-2">
-          <span className="font-medium text-sm">{model.display_name}</span>
-          {model.loaded && (
-            <Badge variant="default" className="text-xs">
-              Loaded
-            </Badge>
-          )}
-          {/* Only show Downloaded if actually downloaded AND not downloading */}
-          {model.downloaded && !model.loaded && !showDownloading && (
-            <Badge variant="secondary" className="text-xs">
-              Downloaded
-            </Badge>
-          )}
-        </div>
-        {model.downloaded && model.size_mb && !showDownloading && (
-          <div className="text-xs text-muted-foreground mt-1">
-            Size: {formatSize(model.size_mb)}
-          </div>
-        )}
-      </div>
-      <div className="flex items-center gap-2">
-        {model.downloaded && !showDownloading ? (
-          <div className="flex items-center gap-2">
-            <div className="flex items-center gap-1 text-sm text-muted-foreground">
-              <span>Ready</span>
-            </div>
-            <Button
-              size="sm"
-              onClick={onDelete}
-              variant="outline"
-              disabled={model.loaded}
-              title={model.loaded ? 'Unload model before deleting' : 'Delete model'}
-              aria-label={
-                model.loaded ? 'Unload model before deleting' : `Delete ${model.display_name}`
-              }
-            >
-              <Trash2 className="h-4 w-4" />
-            </Button>
-          </div>
-        ) : showDownloading ? (
-          <Button
-            size="sm"
-            variant="outline"
-            disabled
-            aria-label={`${model.display_name} downloading`}
-          >
-            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-            Downloading...
-          </Button>
-        ) : (
-          <Button
-            size="sm"
-            onClick={onDownload}
-            variant="outline"
-            aria-label={`Download ${model.display_name}`}
-          >
-            <Download className="h-4 w-4 mr-2" />
-            Download
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}

app/src/components/StoriesTab/StoryTrackEditor.tsx

@@ -371,7 +371,7 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
     }
   }, [isResizing, handleResizeMove, handleResizeEnd]);
 
-  const handleTimelineClick = (e: React.MouseEvent<HTMLDivElement>) => {
+  const handleTimelineClick = (e: React.MouseEvent<HTMLElement>) => {
     if (!tracksRef.current || draggingItem || trimmingItem) return;
     const rect = tracksRef.current.getBoundingClientRect();
     const x = e.clientX - rect.left + tracksRef.current.scrollLeft;

app/src/hooks/useAutoUpdater.ts

@@ -5,7 +5,15 @@ import type { UpdateStatus } from '@/platform/types';
 // Re-export UpdateStatus for backwards compatibility
 export type { UpdateStatus };
 
-export function useAutoUpdater(checkOnMount = false) {
+interface UseAutoUpdaterOptions {
+  checkOnMount?: boolean;
+  showToast?: boolean;
+}
+
+export function useAutoUpdater(options: boolean | UseAutoUpdaterOptions = false) {
+  const { checkOnMount } =
+    typeof options === 'boolean' ? { checkOnMount: options } : { checkOnMount: options.checkOnMount ?? false };
+
   const platform = usePlatform();
   const [status, setStatus] = useState<UpdateStatus>(platform.updater.getStatus());
   const hasCheckedRef = useRef(false);
@@ -38,10 +46,11 @@ export function useAutoUpdater(checkOnMount = false) {
   useEffect(() => {
     if (checkOnMount && platform.metadata.isTauri && !hasCheckedRef.current) {
       hasCheckedRef.current = true;
-      checkForUpdates();
+      checkForUpdates().catch((error) => {
+        console.error('Auto update check failed:', error);
+      });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [platform.metadata.isTauricheckOnMountcheckForUpdates]);
+  }, [checkOnMount, checkForUpdates, platform.metadata.isTauri]);
 
   return {
     status,

app/src/hooks/useAutoUpdater.tsx

@@ -73,7 +73,7 @@ export function useAutoUpdater(options: boolean | UseAutoUpdaterOptions = false)
     }
     // Empty dependency array - only run once on mount
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [platform.metadata.isTauricheckOnMountcheckForUpdates]);
+  }, [checkOnMount, checkForUpdates, platform.metadata.isTauri]);
 
   // Show toast when update is available
   useEffect(() => {