refactor: restructure state to target->app->session with nested apps

Author: pd4d10

src/main.ts

@@ -6,7 +6,7 @@ const __dirname = path.dirname(__filename);
 
 import { app, BrowserWindow, ipcMain, Menu, MenuItem, nativeImage, shell } from "electron";
 
-import type { AppInfo } from "./reducers/app";
+import type { AppInfo } from "./reducers/target";
 
 import { addRemoteDevice, debug, debugPath, init, refreshDeviceApps, removeDevice } from "./main/actions";
 import { store } from "./main/store";
@@ -101,10 +101,10 @@ if (!gotTheLock) {
       );
     }
 
-    ipcMain.on("debug", (e, appInfo: AppInfo) => {
+    ipcMain.on("debug", (e, payload: { targetId: string; app: AppInfo }) => {
       store.dispatch(
         // @ts-expect-error - Redux thunk action dispatch
-        debug(appInfo),
+        debug(payload),
       );
     });
     ipcMain.on("debug-path", (_, path: string) => {

src/main/actions.ts

@@ -2,9 +2,8 @@ import type { Action, ThunkDispatch } from "@reduxjs/toolkit";
 import { dialog } from "electron";
 import { chunk } from "lodash-es";
 
-import { type AppInfo, appSlice } from "../reducers/app";
+import { type AppInfo, targetSlice } from "../reducers/target";
 import { type PageInfo, sessionSlice } from "../reducers/session";
-import { targetSlice } from "../reducers/target";
 
 import type { State } from "./store";
 import type { RemoteDeviceOptions } from "./targets/types";
@@ -22,24 +21,25 @@ export const init: ThunkActionCreator = () => async (dispatch, getState) => {
   // Initialize local targets
   await targetRegistry.initializeLocalTargets();
 
-  // Register all targets in Redux store
+  // Register all targets in Redux store and discover their apps
   const targets = targetRegistry.getAllInfo();
-  targets.forEach((target) => {
-    dispatch(targetSlice.actions.registered(target));
-  });
+  for (const targetInfo of targets) {
+    dispatch(targetSlice.actions.registered(targetInfo));
 
-  // Discover apps from all targets
-  const allApps: AppInfo[] = [];
-  for (const target of targetRegistry.getAll()) {
-    const appsResult = await target.discoverApps();
-    if (appsResult.ok) {
-      allApps.push(...appsResult.val);
-      dispatch(targetSlice.actions.discoveryCompleted(target.id));
+    // Discover apps for this target
+    const target = targetRegistry.getById(targetInfo.id);
+    if (target) {
+      const appsResult = await target.discoverApps();
+      if (appsResult.ok) {
+        dispatch(targetSlice.actions.appsUpdated({
+          targetId: target.id,
+          apps: appsResult.val,
+        }));
+        dispatch(targetSlice.actions.discoveryCompleted(target.id));
+      }
     }
   }
 
-  dispatch(appSlice.actions.found(allApps));
-
   // Timer for polling debug endpoints
   setInterval(() => {
     void (async () => {
@@ -78,79 +78,80 @@ export const init: ThunkActionCreator = () => async (dispatch, getState) => {
   }, 3000);
 };
 
-export const debug: ThunkActionCreator<AppInfo> = (app) => async (dispatch) => {
-  try {
-    // Get the target adapter for this app
-    const target = targetRegistry.getById(app.targetId);
-    if (!target) {
-      throw new Error(`Target ${app.targetId} not found`);
-    }
-
-    // Launch the app using the target adapter
-    const connectionResult = await target.launch(app, {});
+export const debug: ThunkActionCreator<{ targetId: string; app: AppInfo }>
+  = ({ targetId, app }) => async (dispatch) => {
+    try {
+      // Get the target adapter
+      const target = targetRegistry.getById(targetId);
+      if (!target) {
+        throw new Error(`Target ${targetId} not found`);
+      }
 
-    if (!connectionResult.ok) {
-      throw connectionResult.val;
-    }
+      // Launch the app using the target adapter
+      const connectionResult = await target.launch(app, {});
 
-    const connection = connectionResult.val;
-    const sessionId = connection.connectionId;
-
-    // Determine connection type
-    let connectionType: "local-process" | "remote-adb" | "remote-websocket";
-    if (target.type === "local") {
-      connectionType = "local-process";
-    } else if (target.id.startsWith("remote-adb")) {
-      connectionType = "remote-adb";
-    } else {
-      connectionType = "remote-websocket";
-    }
+      if (!connectionResult.ok) {
+        throw connectionResult.val;
+      }
 
-    // Add session to Redux store
-    dispatch(
-      sessionSlice.actions.added({
-        sessionId,
-        appId: app.id,
-        targetId: app.targetId,
-        connection: {
-          type: connectionType,
-          nodePort: connection.debugPorts.node,
-          windowPort: connection.debugPorts.renderer,
-          websocketUrl: connection.debugPorts.websocket,
-        },
-      }),
-    );
-
-    // Handle local process events
-    if (connection.processHandle) {
-      const sp = connection.processHandle;
-
-      sp.on("error", (err: Error) => {
-        dialog.showErrorBox(`Error: ${app.name}`, err.message);
-      });
+      const connection = connectionResult.val;
+      const sessionId = connection.connectionId;
+
+      // Determine connection type
+      let connectionType: "local-process" | "remote-adb" | "remote-websocket";
+      if (target.type === "local") {
+        connectionType = "local-process";
+      } else if (target.id.startsWith("remote-adb")) {
+        connectionType = "remote-adb";
+      } else {
+        connectionType = "remote-websocket";
+      }
 
-      sp.on("close", () => {
-        dispatch(sessionSlice.actions.removed(sessionId));
-        void connection.cleanup();
-      });
+      // Add session to Redux store
+      dispatch(
+        sessionSlice.actions.added({
+          sessionId,
+          targetId,
+          appId: app.id,
+          connection: {
+            type: connectionType,
+            nodePort: connection.debugPorts.node,
+            windowPort: connection.debugPorts.renderer,
+            websocketUrl: connection.debugPorts.websocket,
+          },
+        }),
+      );
 
-      const handleStdout = (chunk: Buffer) => {
-        dispatch(
-          sessionSlice.actions.logAppended({
-            sessionId,
-            content: chunk.toString(),
-          }),
-        );
-      };
-
-      sp.stdout?.on("data", handleStdout);
-      sp.stderr?.on("data", handleStdout);
+      // Handle local process events
+      if (connection.processHandle) {
+        const sp = connection.processHandle;
+
+        sp.on("error", (err: Error) => {
+          dialog.showErrorBox(`Error: ${app.name}`, err.message);
+        });
+
+        sp.on("close", () => {
+          dispatch(sessionSlice.actions.removed(sessionId));
+          void connection.cleanup();
+        });
+
+        const handleStdout = (chunk: Buffer) => {
+          dispatch(
+            sessionSlice.actions.logAppended({
+              sessionId,
+              content: chunk.toString(),
+            }),
+          );
+        };
+
+        sp.stdout?.on("data", handleStdout);
+        sp.stderr?.on("data", handleStdout);
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      dialog.showErrorBox(`Error: ${app.name}`, errorMessage);
     }
-  } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : String(error);
-    dialog.showErrorBox(`Error: ${app.name}`, errorMessage);
-  }
-};
+  };
 
 export const debugPath: ThunkActionCreator<string> = () => async () => {
   // TODO:
@@ -181,9 +182,10 @@ export const addRemoteDevice: ThunkActionCreator<RemoteDeviceOptions>
       // Discover apps from the new target
       const appsResult = await target.discoverApps();
       if (appsResult.ok) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const existingApps = Object.values((dispatch as any).getState?.()?.app ?? {});
-        dispatch(appSlice.actions.found([...(existingApps as AppInfo[]), ...appsResult.val]));
+        dispatch(targetSlice.actions.appsUpdated({
+          targetId: target.id,
+          apps: appsResult.val,
+        }));
         dispatch(targetSlice.actions.discoveryCompleted(target.id));
       }
 
@@ -200,17 +202,11 @@ export const addRemoteDevice: ThunkActionCreator<RemoteDeviceOptions>
 
 export const removeDevice: ThunkActionCreator<string> = (targetId) => (dispatch) => {
   try {
-    // Remove device from registry
+    // Remove target from registry
     targetRegistry.unregister(targetId);
 
-    // Remove from Redux store
+    // Remove from Redux store (apps will be removed automatically as they're nested)
     dispatch(targetSlice.actions.unregistered(targetId));
-
-    // Remove all apps from this device
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const existingApps = Object.values((dispatch as any).getState?.()?.app ?? {});
-    const filteredApps = (existingApps as AppInfo[]).filter((app) => app.targetId !== targetId);
-    dispatch(appSlice.actions.found(filteredApps));
   } catch (error) {
     const errorMessage = error instanceof Error ? error.message : String(error);
     dialog.showErrorBox("Remove Device Error", errorMessage);
@@ -227,13 +223,10 @@ export const refreshDeviceApps: ThunkActionCreator<string> = (targetId) => async
     // Discover apps from the target
     const appsResult = await target.discoverApps();
     if (appsResult.ok) {
-      // Get existing apps from other devices
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const existingApps = Object.values((dispatch as any).getState?.()?.app ?? {});
-      const otherDeviceApps = (existingApps as AppInfo[]).filter((app) => app.targetId !== targetId);
-
-      // Merge with new apps from this device
-      dispatch(appSlice.actions.found([...otherDeviceApps, ...appsResult.val]));
+      dispatch(targetSlice.actions.appsUpdated({
+        targetId,
+        apps: appsResult.val,
+      }));
       dispatch(targetSlice.actions.discoveryCompleted(targetId));
     }
   } catch (error) {

src/main/store.ts

@@ -1,15 +1,13 @@
 import { configureStore } from "@reduxjs/toolkit";
 import { stateSyncEnhancer } from "electron-redux/main";
 
-import { appSlice } from "../reducers/app";
-import { sessionSlice } from "../reducers/session";
 import { targetSlice } from "../reducers/target";
+import { sessionSlice } from "../reducers/session";
 
 export const store = configureStore({
   reducer: {
-    app: appSlice.reducer,
-    session: sessionSlice.reducer,
     target: targetSlice.reducer,
+    session: sessionSlice.reducer,
   },
   enhancers: (g) => g().concat(stateSyncEnhancer()),
 });

src/main/targets/local/adapter.ts

@@ -5,7 +5,7 @@ import getPort from "get-port";
 import { Result } from "ts-results";
 import { v4 } from "uuid";
 
-import type { AppInfo } from "../../../reducers/app";
+import type { AppInfo } from "../../../reducers/target";
 import type { DebugConnection, LaunchOptions, TargetAdapter } from "../types";
 
 import { importByPlatform } from "./platforms";
@@ -44,12 +44,9 @@ export class LocalTargetAdapter implements TargetAdapter {
 
       const apps = result.val;
 
-      // Add target metadata to each app
+      // Return apps with metadata (device context is added by caller)
       return apps.map((app) => ({
         ...app,
-        id: `${this.id}:${app.id}`,
-        targetId: this.id,
-        targetType: "local" as const,
         metadata: {
           platform: process.platform,
         },

src/main/targets/remote/adb.ts

@@ -4,7 +4,7 @@ import { promisify } from "util";
 import { Result } from "ts-results";
 import { v4 } from "uuid";
 
-import type { AppInfo } from "../../../reducers/app";
+import type { AppInfo } from "../../../reducers/target";
 import type { DebugConnection, TargetAdapter } from "../types";
 
 const execAsync = promisify(exec);
@@ -59,19 +59,17 @@ export class AdbTargetAdapter implements TargetAdapter {
         .filter((line) => line.startsWith("package:"))
         .map((line) => line.replace("package:", "").trim());
 
-      // Get app labels for each package
+      // Get app labels for each package (device context is added by caller)
       const apps: AppInfo[] = packageNames.map((packageName) => {
         const label = packageName;
         // TODO: Try to get app label from package manager
         // This is a simplified approach - ideally we'd parse the APK using aapt
         // For now, we just use the package name
 
         return {
-          id: `${this.id}:${packageName}`,
+          id: packageName,
           name: label,
           icon: "", // TODO: Extract app icon from APK
-          targetId: this.id,
-          targetType: "remote" as const,
           metadata: {
             packageName,
             deviceInfo: `ADB ${this.address}:${this.port}`,
@@ -88,7 +86,7 @@ export class AdbTargetAdapter implements TargetAdapter {
   ): Promise<Result<DebugConnection, Error>> {
     return Result.wrapAsync(async () => {
       // Extract package name from app metadata or ID
-      const packageName = app.metadata?.packageName ?? app.id.replace(`${this.id}:`, "");
+      const packageName = app.metadata?.packageName ?? app.id;
 
       // Get the main activity for the package
       const activityOutput = await this.execAdb([

src/main/targets/types.ts

@@ -1,7 +1,7 @@
 import type { ChildProcess } from "child_process";
 import type { Result } from "ts-results";
 
-import type { AppInfo } from "../../reducers/app";
+import type { AppInfo } from "../../reducers/target";
 
 export type TargetType = "local" | "remote";