fix: resolve typescript errors in frontend and enable type checks everywhere

Author: itstauq

justfile

@@ -91,9 +91,7 @@ check-frontend:
     try:
         subprocess.run(['bun', 'run', '--cwd', 'src-frontend', 'prettier', '--check', '.'], check=True)
         subprocess.run(['bun', 'run', '--cwd', 'src-frontend', 'lint'], check=True)
-
-        # TODO: Uncomment this once the type errors are fixed.
-        # subprocess.run(['bun', 'run', '--cwd', 'src-frontend', 'tsc', '--noEmit'], check=True)
+        subprocess.run(['bun', 'run', '--cwd', 'src-frontend', 'tsc', '--noEmit'], check=True)
 
         print(f"\n{{ _green }}Frontend code quality check completed successfully.{{ _nc }}\n")
     except subprocess.CalledProcessError as e:
@@ -157,6 +155,10 @@ tidy-frontend:
     try:
         subprocess.run(['bun', 'run', '--cwd', 'src-frontend', 'prettier', '--write', '.'], check=True)
         subprocess.run(['bun', 'run', '--cwd', 'src-frontend', 'lint', '--fix'], check=True)
+
+        # This doesn't fix the type errors, but it's good to ensure it returns 0 (success).
+        subprocess.run(['bun', 'run', '--cwd', 'src-frontend', 'tsc', '--noEmit'], check=True)
+
         print(f"\n{{ _green }}Frontend code tidied up successfully.{{ _nc }}\n")
     except subprocess.CalledProcessError as e:
         sys.exit(e.returncode)

src-frontend/app/(desktop-only)/updates/page.tsx

@@ -57,7 +57,10 @@ export default function UpdatePage() {
     let unlisten: (() => void) | undefined;
 
     const updateWindowStateListener = async () => {
-      if (typeof window !== "undefined") {
+      if (
+        typeof window !== "undefined" &&
+        typeof window.__TAURI__ !== "undefined"
+      ) {
         // Get initial state
         const initialState =
           await window.__TAURI__.core.invoke<UpdateWindowState>(
@@ -70,7 +73,7 @@ export default function UpdatePage() {
           window.__TAURI__.webviewWindow.getCurrentWebviewWindow();
         unlisten = await appWebview.listen<UpdateWindowState>(
           "update-window-state",
-          (event) => {
+          (event: { payload: UpdateWindowState }) => {
             setState(event.payload);
           },
         );
@@ -94,22 +97,35 @@ export default function UpdatePage() {
     }
   }, [state.progress, state.updateWindowType]);
 
-  const onUpdate = () => {
+  const onUpdate = (): void => {
     setState((prev) => ({ ...prev, updateWindowType: Type.downloading }));
-    window.__TAURI__.core.invoke("update_window_response", {
-      installUpdate: true,
-    });
+    if (
+      typeof window !== "undefined" &&
+      typeof window.__TAURI__ !== "undefined"
+    ) {
+      window.__TAURI__.core.invoke("update_window_response", {
+        installUpdate: true,
+      });
+    }
   };
 
-  const onLater = () => {
-    window.__TAURI__.core.invoke("update_window_response", {
-      installUpdate: false,
-    });
+  const onLater = (): void => {
+    if (
+      typeof window !== "undefined" &&
+      typeof window.__TAURI__ !== "undefined"
+    ) {
+      window.__TAURI__.core.invoke("update_window_response", {
+        installUpdate: false,
+      });
+    }
     closeHandler();
   };
 
-  const closeHandler = () => {
-    if (window.__TAURI__) {
+  const closeHandler = (): void => {
+    if (
+      typeof window !== "undefined" &&
+      typeof window.__TAURI__ !== "undefined"
+    ) {
       window.__TAURI__.window.getCurrentWindow().close();
     }
   };
@@ -323,16 +339,19 @@ export default function UpdatePage() {
                   <Markdown
                     remarkPlugins={[remarkGfm]}
                     components={{
-                      a: ({ href, children }) => (
+                      a: (props: {
+                        href?: string;
+                        children?: React.ReactNode;
+                      }) => (
                         <a
                           href="#"
-                          onClick={(e) => {
+                          onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
                             e.preventDefault();
-                            if (href) openPath(href);
+                            if (props.href) openPath(props.href);
                           }}
                           className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                         >
-                          {children}
+                          {props.children}
                         </a>
                       ),
                     }}

src-frontend/app/workspace/page.tsx

@@ -16,7 +16,7 @@ function FilesPageContent() {
   const { setBreadcrumb, clearBreadcrumb } = useBreadcrumbStore();
 
   useEffect(() => {
-    initializeFileSystemStore(initialPath);
+    initializeFileSystemStore(initialPath ? initialPath.split("/") : []);
   }, [initialPath]);
 
   useEffect(() => {

src-frontend/bun.lockb

@@ -221,11 +221,17 @@ export function AppSidebar() {
         const item = JSON.parse(data);
         const { addFavorite } = useSidebarStore.getState();
         if (item.type === "folder") {
+          // Convert string path to array format expected by FavoriteItem
+          // FileSystemItem.path is a string like "/apps" or "/folder/subfolder"
+          const pathArray = item.path
+            ? item.path.split("/").filter(Boolean)
+            : [];
+
           addFavorite({
             id: item.id,
             name: item.name,
             type: "folder",
-            path: [...item.path, item.name],
+            path: pathArray,
           });
         } else if (item.type === "app") {
           addFavorite({

src-frontend/components/app-sidebar.tsx

@@ -269,7 +269,7 @@ export function AppDetail({ appId, onBack }: AppDetailProps) {
     }
   };
 
-  const updateActiveTab = (tab: string) => {
+  const updateActiveTab = (tab: string): void => {
     setActiveTab(tab);
     fetchApp();
   };

src-frontend/components/apps/app-detail.tsx

@@ -4,6 +4,7 @@ import { getWorkspaceItems } from "@/lib/api/workspace";
 import { Layers, FileText, ChevronLeft, Database } from "lucide-react";
 import { useEffect, useState, useCallback } from "react";
 import { FilePreview } from "../workspace/file-preview";
+import type { FileSystemItem } from "@/lib/types";
 
 export function AppFiles({ appPath }: { appPath: string }) {
   const router = useRouter();

src-frontend/components/apps/app-files.tsx

@@ -1,6 +1,7 @@
 import { ExternalLink, Play, RefreshCcw, Terminal } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useEffect } from "react";
+import { App } from "@/lib/api/apps";
 
 interface AppInterfaceProps {
   app: App;

src-frontend/components/apps/app-interface.tsx

@@ -64,9 +64,9 @@ import { AppBreadcrumb } from "./apps-breadcrumb";
 const installFormSchema = z.object({
   repoURL: z.string().url("Must be a valid Git repository URL"),
   branch: z.string(),
-  force: z.boolean().default(false),
+  force: z.boolean(),
 });
-// Install form type
+// Install form type - inferred from schema
 type InstallFormValues = z.infer<typeof installFormSchema>;
 
 interface AppListProps {
@@ -97,7 +97,7 @@ export function AppList({ onSelectApp }: AppListProps) {
   });
 
   useEffect(() => {
-    setBreadcrumb(<AppBreadcrumb />);
+    setBreadcrumb(<AppBreadcrumb app={null} />);
     return () => clearBreadcrumb();
   }, [setBreadcrumb, clearBreadcrumb]);
 

src-frontend/components/apps/app-list.tsx

@@ -3,14 +3,14 @@ import { useEffect, useState, useRef, useCallback } from "react";
 import { ArrowDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { getLogs, type LogsResponse } from "@/lib/api/logs";
+import { getLogs, type ParsedLogResponse } from "@/lib/api/logs";
 import { Badge } from "@/components/ui/badge";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 const MAX_LOGS = 5000; // Limit logs for app view
 
 export function AppLogs({ appId }: { appId: string }) {
-  const [logs, setLogs] = useState<LogsResponse["logs"]>([]);
+  const [logs, setLogs] = useState<ParsedLogResponse["logs"]>([]);
   const [nextToken, setNextToken] = useState<number>(1);
   const [isAutoScroll, setIsAutoScroll] = useState(false);
   const scrollAreaRef = useRef<HTMLDivElement>(null);