Add Capacitor support (#483)

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

e2e-tests/capacitor.spec.ts

@@ -0,0 +1,34 @@
+import { testSkipIfWindows, Timeout } from "./helpers/test_helper";
+
+testSkipIfWindows("capacitor upgrade and sync works", async ({ po }) => {
+  await po.setUp();
+  await po.sendPrompt("hi");
+  await po.getTitleBarAppNameButton().click();
+  await po.clickAppUpgradeButton({ upgradeId: "capacitor" });
+  await po.expectNoAppUpgrades();
+  await po.snapshotAppFiles({ name: "upgraded-capacitor" });
+
+  await po.page.getByTestId("capacitor-controls").waitFor({ state: "visible" });
+
+  // Test sync & open iOS functionality - the button contains "Sync & Open iOS"
+  const iosButton = po.page.getByRole("button", { name: /Sync & Open iOS/i });
+  await iosButton.click();
+
+  // In test mode, this should complete without error and return to idle state
+  // Wait for the button to be enabled again (not in loading state)
+  await po.page
+    .getByText("Sync & Open iOS")
+    .waitFor({ state: "visible", timeout: Timeout.LONG });
+
+  // Test sync & open Android functionality - the button contains "Sync & Open Android"
+  const androidButton = po.page.getByRole("button", {
+    name: /Sync & Open Android/i,
+  });
+  await androidButton.click();
+
+  // In test mode, this should complete without error and return to idle state
+  // Wait for the button to be enabled again (not in loading state)
+  await po.page
+    .getByText("Sync & Open Android")
+    .waitFor({ state: "visible", timeout: Timeout.LONG });
+});

e2e-tests/helpers/test_helper.ts

@@ -286,6 +286,11 @@ export class PageObject {
   }
 
   async snapshotAppFiles({ name }: { name?: string } = {}) {
+    const currentAppName = await this.getCurrentAppName();
+    if (!currentAppName) {
+      throw new Error("No app selected");
+    }
+    const normalizedAppName = currentAppName.toLowerCase().replace(/-/g, "");
     const appPath = await this.getCurrentAppPath();
     if (!appPath || !fs.existsSync(appPath)) {
       throw new Error(`App path does not exist: ${appPath}`);
@@ -298,7 +303,14 @@ export class PageObject {
       filesData.sort((a, b) => a.relativePath.localeCompare(b.relativePath));
 
       const snapshotContent = filesData
-        .map((file) => `=== ${file.relativePath} ===\n${file.content}`)
+        .map(
+          (file) =>
+            `=== ${file.relativePath.replace(normalizedAppName, "[[normalizedAppName]]")} ===\n${file.content
+              .split(normalizedAppName)
+              .join("[[normalizedAppName]]")
+              .split(currentAppName)
+              .join("[[appName]]")}`,
+        )
         .join("\n\n");
 
       if (name) {
@@ -643,7 +655,7 @@ export class PageObject {
 
   async expectNoAppUpgrades() {
     await expect(this.page.getByTestId("no-app-upgrades-needed")).toBeVisible({
-      timeout: Timeout.MEDIUM,
+      timeout: Timeout.LONG,
     });
   }
 

src/components/AppUpgrades.tsx

@@ -39,8 +39,13 @@ export function AppUpgrades({ appId }: { appId: number | null }) {
         upgradeId,
       });
     },
-    onSuccess: () => {
+    onSuccess: (_, upgradeId) => {
       queryClient.invalidateQueries({ queryKey: ["app-upgrades", appId] });
+      if (upgradeId === "capacitor") {
+        // Capacitor upgrade is done, so we need to invalidate the Capacitor
+        // query to show the new status.
+        queryClient.invalidateQueries({ queryKey: ["is-capacitor", appId] });
+      }
     },
   });
 

src/components/CapacitorControls.tsx

@@ -0,0 +1,258 @@
+import { useState } from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { IpcClient } from "@/ipc/ipc_client";
+import { showSuccess } from "@/lib/toast";
+import {
+  Smartphone,
+  TabletSmartphone,
+  Loader2,
+  ExternalLink,
+  Copy,
+} from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+interface CapacitorControlsProps {
+  appId: number;
+}
+
+type CapacitorStatus = "idle" | "syncing" | "opening";
+
+export function CapacitorControls({ appId }: CapacitorControlsProps) {
+  const [errorDialogOpen, setErrorDialogOpen] = useState(false);
+  const [errorDetails, setErrorDetails] = useState<{
+    title: string;
+    message: string;
+  } | null>(null);
+  const [iosStatus, setIosStatus] = useState<CapacitorStatus>("idle");
+  const [androidStatus, setAndroidStatus] = useState<CapacitorStatus>("idle");
+
+  // Check if Capacitor is installed
+  const { data: isCapacitor, isLoading } = useQuery({
+    queryKey: ["is-capacitor", appId],
+    queryFn: () => IpcClient.getInstance().isCapacitor({ appId }),
+    enabled: appId !== undefined && appId !== null,
+  });
+
+  const showErrorDialog = (title: string, error: unknown) => {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    setErrorDetails({ title, message: errorMessage });
+    setErrorDialogOpen(true);
+  };
+
+  // Sync and open iOS mutation
+  const syncAndOpenIosMutation = useMutation({
+    mutationFn: async () => {
+      setIosStatus("syncing");
+      // First sync
+      await IpcClient.getInstance().syncCapacitor({ appId });
+      setIosStatus("opening");
+      // Then open iOS
+      await IpcClient.getInstance().openIos({ appId });
+    },
+    onSuccess: () => {
+      setIosStatus("idle");
+      showSuccess("Synced and opened iOS project in Xcode");
+    },
+    onError: (error) => {
+      setIosStatus("idle");
+      showErrorDialog("Failed to sync and open iOS project", error);
+    },
+  });
+
+  // Sync and open Android mutation
+  const syncAndOpenAndroidMutation = useMutation({
+    mutationFn: async () => {
+      setAndroidStatus("syncing");
+      // First sync
+      await IpcClient.getInstance().syncCapacitor({ appId });
+      setAndroidStatus("opening");
+      // Then open Android
+      await IpcClient.getInstance().openAndroid({ appId });
+    },
+    onSuccess: () => {
+      setAndroidStatus("idle");
+      showSuccess("Synced and opened Android project in Android Studio");
+    },
+    onError: (error) => {
+      setAndroidStatus("idle");
+      showErrorDialog("Failed to sync and open Android project", error);
+    },
+  });
+
+  // Helper function to get button text based on status
+  const getIosButtonText = () => {
+    switch (iosStatus) {
+      case "syncing":
+        return { main: "Syncing...", sub: "Building app" };
+      case "opening":
+        return { main: "Opening...", sub: "Launching Xcode" };
+      default:
+        return { main: "Sync & Open iOS", sub: "Xcode" };
+    }
+  };
+
+  const getAndroidButtonText = () => {
+    switch (androidStatus) {
+      case "syncing":
+        return { main: "Syncing...", sub: "Building app" };
+      case "opening":
+        return { main: "Opening...", sub: "Launching Android Studio" };
+      default:
+        return { main: "Sync & Open Android", sub: "Android Studio" };
+    }
+  };
+
+  // Don't render anything if loading or if Capacitor is not installed
+  if (isLoading || !isCapacitor) {
+    return null;
+  }
+
+  const iosButtonText = getIosButtonText();
+  const androidButtonText = getAndroidButtonText();
+
+  return (
+    <>
+      <Card className="mt-1" data-testid="capacitor-controls">
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            Mobile Development
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                // TODO: Add actual help link
+                IpcClient.getInstance().openExternalUrl(
+                  "https://dyad.sh/docs/guides/mobile-app#troubleshooting",
+                );
+              }}
+              className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 flex items-center gap-1"
+            >
+              Need help?
+              <ExternalLink className="h-3 w-3" />
+            </Button>
+          </CardTitle>
+          <CardDescription>
+            Sync and open your Capacitor mobile projects
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 gap-2">
+            <Button
+              onClick={() => syncAndOpenIosMutation.mutate()}
+              disabled={syncAndOpenIosMutation.isPending}
+              variant="outline"
+              size="sm"
+              className="flex items-center gap-2 h-10"
+            >
+              {syncAndOpenIosMutation.isPending ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Smartphone className="h-4 w-4" />
+              )}
+              <div className="text-left">
+                <div className="text-xs font-medium">{iosButtonText.main}</div>
+                <div className="text-xs text-gray-500">{iosButtonText.sub}</div>
+              </div>
+            </Button>
+
+            <Button
+              onClick={() => syncAndOpenAndroidMutation.mutate()}
+              disabled={syncAndOpenAndroidMutation.isPending}
+              variant="outline"
+              size="sm"
+              className="flex items-center gap-2 h-10"
+            >
+              {syncAndOpenAndroidMutation.isPending ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <TabletSmartphone className="h-4 w-4" />
+              )}
+              <div className="text-left">
+                <div className="text-xs font-medium">
+                  {androidButtonText.main}
+                </div>
+                <div className="text-xs text-gray-500">
+                  {androidButtonText.sub}
+                </div>
+              </div>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Error Dialog */}
+      <Dialog open={errorDialogOpen} onOpenChange={setErrorDialogOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle className="text-red-600 dark:text-red-400">
+              {errorDetails?.title}
+            </DialogTitle>
+            <DialogDescription>
+              An error occurred while running the Capacitor command. See details
+              below:
+            </DialogDescription>
+          </DialogHeader>
+
+          {errorDetails && (
+            <div className="relative">
+              <div className="max-h-[50vh] w-full rounded border p-4 bg-gray-50 dark:bg-gray-900 overflow-y-auto">
+                <pre className="text-xs whitespace-pre-wrap font-mono">
+                  {errorDetails.message}
+                </pre>
+              </div>
+              <Button
+                onClick={() => {
+                  navigator.clipboard.writeText(errorDetails.message);
+                  showSuccess("Error details copied to clipboard");
+                }}
+                variant="ghost"
+                size="sm"
+                className="absolute top-2 right-2 h-8 w-8 p-0"
+              >
+                <Copy className="h-4 w-4" />
+              </Button>
+            </div>
+          )}
+
+          <div className="flex justify-end gap-2">
+            <Button
+              onClick={() => {
+                if (errorDetails) {
+                  navigator.clipboard.writeText(errorDetails.message);
+                  showSuccess("Error details copied to clipboard");
+                }
+              }}
+              variant="outline"
+              size="sm"
+              className="flex items-center gap-2"
+            >
+              <Copy className="h-4 w-4" />
+              Copy Error
+            </Button>
+            <Button
+              onClick={() => setErrorDialogOpen(false)}
+              variant="outline"
+              size="sm"
+            >
+              Close
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

src/ipc/handlers/app_upgrade_handlers.ts

@@ -9,8 +9,9 @@ import fs from "node:fs";
 import path from "node:path";
 import { spawn } from "node:child_process";
 import { gitAddAll, gitCommit } from "../utils/git_utils";
+import { simpleSpawn } from "../utils/simpleSpawn";
 
-const logger = log.scope("app_upgrade_handlers");
+export const logger = log.scope("app_upgrade_handlers");
 const handle = createLoggedHandler(logger);
 
 const availableUpgrades: Omit<AppUpgrade, "isNeeded">[] = [
@@ -21,6 +22,13 @@ const availableUpgrades: Omit<AppUpgrade, "isNeeded">[] = [
       "Installs the Dyad component tagger Vite plugin and its dependencies.",
     manualUpgradeUrl: "https://dyad.sh/docs/upgrades/select-component",
   },
+  {
+    id: "capacitor",
+    title: "Upgrade to hybrid mobile app with Capacitor",
+    description:
+      "Adds Capacitor to your app lets it run on iOS and Android in addition to the web.",
+    manualUpgradeUrl: "https://dyad.sh/docs/guides/mobile-app#upgrade-your-app",
+  },
 ];
 
 async function getApp(appId: number) {
@@ -33,6 +41,13 @@ async function getApp(appId: number) {
   return app;
 }
 
+function isViteApp(appPath: string): boolean {
+  const viteConfigPathJs = path.join(appPath, "vite.config.js");
+  const viteConfigPathTs = path.join(appPath, "vite.config.ts");
+
+  return fs.existsSync(viteConfigPathTs) || fs.existsSync(viteConfigPathJs);
+}
+
 function isComponentTaggerUpgradeNeeded(appPath: string): boolean {
   const viteConfigPathJs = path.join(appPath, "vite.config.js");
   const viteConfigPathTs = path.join(appPath, "vite.config.ts");
@@ -55,6 +70,29 @@ function isComponentTaggerUpgradeNeeded(appPath: string): boolean {
   }
 }
 
+function isCapacitorUpgradeNeeded(appPath: string): boolean {
+  // Check if it's a Vite app first
+  if (!isViteApp(appPath)) {
+    return false;
+  }
+
+  // Check if Capacitor is already installed
+  const capacitorConfigJs = path.join(appPath, "capacitor.config.js");
+  const capacitorConfigTs = path.join(appPath, "capacitor.config.ts");
+  const capacitorConfigJson = path.join(appPath, "capacitor.config.json");
+
+  // If any Capacitor config exists, the upgrade is not needed
+  if (
+    fs.existsSync(capacitorConfigJs) ||
+    fs.existsSync(capacitorConfigTs) ||
+    fs.existsSync(capacitorConfigJson)
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
 async function applyComponentTagger(appPath: string) {
   const viteConfigPathJs = path.join(appPath, "vite.config.js");
   const viteConfigPathTs = path.join(appPath, "vite.config.ts");
@@ -157,6 +195,59 @@ async function applyComponentTagger(appPath: string) {
   }
 }
 
+async function applyCapacitor({
+  appName,
+  appPath,
+}: {
+  appName: string;
+  appPath: string;
+}) {
+  // Install Capacitor dependencies
+  await simpleSpawn({
+    command:
+      "pnpm add @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android || npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android --legacy-peer-deps",
+    cwd: appPath,
+    successMessage: "Capacitor dependencies installed successfully",
+    errorPrefix: "Failed to install Capacitor dependencies",
+  });
+
+  // Initialize Capacitor
+  await simpleSpawn({
+    command: `npx cap init "${appName}" "com.example.${appName.toLowerCase().replace(/[^a-z0-9]/g, "")}" --web-dir=dist`,
+    cwd: appPath,
+    successMessage: "Capacitor initialized successfully",
+    errorPrefix: "Failed to initialize Capacitor",
+  });
+
+  // Add iOS and Android platforms
+  await simpleSpawn({
+    command: "npx cap add ios && npx cap add android",
+    cwd: appPath,
+    successMessage: "iOS and Android platforms added successfully",
+    errorPrefix: "Failed to add iOS and Android platforms",
+  });
+
+  // Commit changes
+  try {
+    logger.info("Staging and committing Capacitor changes");
+    await gitAddAll({ path: appPath });
+    await gitCommit({
+      path: appPath,
+      message: "[dyad] add Capacitor for mobile app support",
+    });
+    logger.info("Successfully committed Capacitor changes");
+  } catch (err) {
+    logger.warn(
+      `Failed to commit changes. This may happen if the project is not in a git repository, or if there are no changes to commit.`,
+      err,
+    );
+    throw new Error(
+      "Failed to commit Capacitor changes. Please commit them manually. Error: " +
+        err,
+    );
+  }
+}
+
 export function registerAppUpgradeHandlers() {
   handle(
     "get-app-upgrades",
@@ -168,6 +259,8 @@ export function registerAppUpgradeHandlers() {
         let isNeeded = false;
         if (upgrade.id === "component-tagger") {
           isNeeded = isComponentTaggerUpgradeNeeded(appPath);
+        } else if (upgrade.id === "capacitor") {
+          isNeeded = isCapacitorUpgradeNeeded(appPath);
         }
         return { ...upgrade, isNeeded };
       });
@@ -188,6 +281,8 @@ export function registerAppUpgradeHandlers() {
 
       if (upgradeId === "component-tagger") {
         await applyComponentTagger(appPath);
+      } else if (upgradeId === "capacitor") {
+        await applyCapacitor({ appName: app.name, appPath });
       } else {
         throw new Error(`Unknown upgrade id: ${upgradeId}`);
       }

src/ipc/handlers/capacitor_handlers.ts

@@ -0,0 +1,121 @@
+import { createLoggedHandler } from "./safe_handle";
+import log from "electron-log";
+import { db } from "../../db";
+import { apps } from "../../db/schema";
+import { eq } from "drizzle-orm";
+import { getDyadAppPath } from "../../paths/paths";
+import fs from "node:fs";
+import path from "node:path";
+import { simpleSpawn } from "../utils/simpleSpawn";
+import { IS_TEST_BUILD } from "../utils/test_utils";
+
+const logger = log.scope("capacitor_handlers");
+const handle = createLoggedHandler(logger);
+
+async function getApp(appId: number) {
+  const app = await db.query.apps.findFirst({
+    where: eq(apps.id, appId),
+  });
+  if (!app) {
+    throw new Error(`App with id ${appId} not found`);
+  }
+  return app;
+}
+
+function isCapacitorInstalled(appPath: string): boolean {
+  const capacitorConfigJs = path.join(appPath, "capacitor.config.js");
+  const capacitorConfigTs = path.join(appPath, "capacitor.config.ts");
+  const capacitorConfigJson = path.join(appPath, "capacitor.config.json");
+
+  return (
+    fs.existsSync(capacitorConfigJs) ||
+    fs.existsSync(capacitorConfigTs) ||
+    fs.existsSync(capacitorConfigJson)
+  );
+}
+
+export function registerCapacitorHandlers() {
+  handle(
+    "is-capacitor",
+    async (_, { appId }: { appId: number }): Promise<boolean> => {
+      const app = await getApp(appId);
+      const appPath = getDyadAppPath(app.path);
+      return isCapacitorInstalled(appPath);
+    },
+  );
+
+  handle(
+    "sync-capacitor",
+    async (_, { appId }: { appId: number }): Promise<void> => {
+      const app = await getApp(appId);
+      const appPath = getDyadAppPath(app.path);
+
+      if (!isCapacitorInstalled(appPath)) {
+        throw new Error("Capacitor is not installed in this app");
+      }
+
+      await simpleSpawn({
+        command: "npm run build",
+        cwd: appPath,
+        successMessage: "App built successfully",
+        errorPrefix: "Failed to build app",
+      });
+
+      await simpleSpawn({
+        command: "npx cap sync",
+        cwd: appPath,
+        successMessage: "Capacitor sync completed successfully",
+        errorPrefix: "Failed to sync Capacitor",
+      });
+    },
+  );
+
+  handle("open-ios", async (_, { appId }: { appId: number }): Promise<void> => {
+    const app = await getApp(appId);
+    const appPath = getDyadAppPath(app.path);
+
+    if (!isCapacitorInstalled(appPath)) {
+      throw new Error("Capacitor is not installed in this app");
+    }
+
+    if (IS_TEST_BUILD) {
+      // In test mode, just log the action instead of actually opening Xcode
+      logger.info("Test mode: Simulating opening iOS project in Xcode");
+      return;
+    }
+
+    await simpleSpawn({
+      command: "npx cap open ios",
+      cwd: appPath,
+      successMessage: "iOS project opened successfully",
+      errorPrefix: "Failed to open iOS project",
+    });
+  });
+
+  handle(
+    "open-android",
+    async (_, { appId }: { appId: number }): Promise<void> => {
+      const app = await getApp(appId);
+      const appPath = getDyadAppPath(app.path);
+
+      if (!isCapacitorInstalled(appPath)) {
+        throw new Error("Capacitor is not installed in this app");
+      }
+
+      if (IS_TEST_BUILD) {
+        // In test mode, just log the action instead of actually opening Android Studio
+        logger.info(
+          "Test mode: Simulating opening Android project in Android Studio",
+        );
+        return;
+      }
+
+      await simpleSpawn({
+        command: "npx cap open android",
+        cwd: appPath,
+        successMessage: "Android project opened successfully",
+        errorPrefix: "Failed to open Android project",
+      });
+    },
+  );
+}

src/ipc/ipc_client.ts

@@ -917,4 +917,21 @@ export class IpcClient {
   }): Promise<void> {
     return this.ipcRenderer.invoke("execute-app-upgrade", params);
   }
+
+  // Capacitor methods
+  public async isCapacitor(params: { appId: number }): Promise<boolean> {
+    return this.ipcRenderer.invoke("is-capacitor", params);
+  }
+
+  public async syncCapacitor(params: { appId: number }): Promise<void> {
+    return this.ipcRenderer.invoke("sync-capacitor", params);
+  }
+
+  public async openIos(params: { appId: number }): Promise<void> {
+    return this.ipcRenderer.invoke("open-ios", params);
+  }
+
+  public async openAndroid(params: { appId: number }): Promise<void> {
+    return this.ipcRenderer.invoke("open-android", params);
+  }
 }

src/ipc/ipc_host.ts

@@ -21,6 +21,7 @@ import { registerSessionHandlers } from "./handlers/session_handlers";
 import { registerProHandlers } from "./handlers/pro_handlers";
 import { registerContextPathsHandlers } from "./handlers/context_paths_handlers";
 import { registerAppUpgradeHandlers } from "./handlers/app_upgrade_handlers";
+import { registerCapacitorHandlers } from "./handlers/capacitor_handlers";
 
 export function registerIpcHandlers() {
   // Register all IPC handlers by category
@@ -47,4 +48,5 @@ export function registerIpcHandlers() {
   registerProHandlers();
   registerContextPathsHandlers();
   registerAppUpgradeHandlers();
+  registerCapacitorHandlers();
 }

src/ipc/utils/simpleSpawn.ts

@@ -0,0 +1,57 @@
+import { spawn } from "child_process";
+import log from "electron-log/main";
+
+const logger = log.scope("simpleSpawn");
+
+export async function simpleSpawn({
+  command,
+  cwd,
+  successMessage,
+  errorPrefix,
+}: {
+  command: string;
+  cwd: string;
+  successMessage: string;
+  errorPrefix: string;
+}): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    logger.info(`Running: ${command}`);
+    const process = spawn(command, {
+      cwd,
+      shell: true,
+      stdio: "pipe",
+    });
+
+    let stdout = "";
+    let stderr = "";
+
+    process.stdout?.on("data", (data) => {
+      const output = data.toString();
+      stdout += output;
+      logger.info(output);
+    });
+
+    process.stderr?.on("data", (data) => {
+      const output = data.toString();
+      stderr += output;
+      logger.error(output);
+    });
+
+    process.on("close", (code) => {
+      if (code === 0) {
+        logger.info(successMessage);
+        resolve();
+      } else {
+        logger.error(`${errorPrefix}, exit code ${code}`);
+        const errorMessage = `${errorPrefix} (exit code ${code})\n\nSTDOUT:\n${stdout}\n\nSTDERR:\n${stderr}`;
+        reject(new Error(errorMessage));
+      }
+    });
+
+    process.on("error", (err) => {
+      logger.error(`Failed to spawn command: ${command}`, err);
+      const errorMessage = `Failed to spawn command: ${err.message}\n\nSTDOUT:\n${stdout}\n\nSTDERR:\n${stderr}`;
+      reject(new Error(errorMessage));
+    });
+  });
+}

src/pages/app-details.tsx

@@ -40,6 +40,7 @@ import { invalidateAppQuery } from "@/hooks/useLoadApp";
 import { useDebounce } from "@/hooks/useDebounce";
 import { useCheckName } from "@/hooks/useCheckName";
 import { AppUpgrades } from "@/components/AppUpgrades";
+import { CapacitorControls } from "@/components/CapacitorControls";
 
 export default function AppDetailsPage() {
   const navigate = useNavigate();
@@ -343,6 +344,7 @@ export default function AppDetailsPage() {
           </Button>
           <GitHubConnector appId={appId} folderName={selectedApp.path} />
           {appId && <SupabaseConnector appId={appId} />}
+          {appId && <CapacitorControls appId={appId} />}
           <AppUpgrades appId={appId} />
         </div>
 

src/preload.ts

@@ -84,6 +84,10 @@ const validInvokeChannels = [
   "set-context-paths",
   "get-app-upgrades",
   "execute-app-upgrade",
+  "is-capacitor",
+  "sync-capacitor",
+  "open-ios",
+  "open-android",
   // Test-only channels
   // These should ALWAYS be guarded with IS_TEST_BUILD in the main process.
   // We can't detect with IS_TEST_BUILD in the preload script because