Fix bugs

caido.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   id: "devtools",
   name: "Devtools",
   description: "Devtools plugin",
-  version: "1.0.0",
+  version: "0.0.1",
   author: {
     name: "Caido Labs Inc.",
     email: "[email protected]",

package.json

@@ -15,7 +15,7 @@
     "watch": "caido-dev watch"
   },
   "devDependencies": {
-    "@caido-community/dev": "0.0.3",
+    "@caido-community/dev": "0.0.4",
     "@caido/tailwindcss": "0.0.1",
     "@types/node": "22.10.5",
     "@vitejs/plugin-vue": "5.2.1",

packages/backend/src/index.ts

@@ -2,15 +2,22 @@ import type { DefineAPI, SDK } from "caido:plugin";
 import { fetch } from "caido:http";
 import { Buffer } from "buffer";
 
-let serverUrl: string | null = null;
+type Settings = {
+  serverUrl: string | undefined;
+  packageId: string | undefined;
+} ;
 
-const setServerUrl = (sdk: SDK, url: string) => {
-  serverUrl = url;
-  sdk.console.log(`Connected to: ${url}`);
+const settings: Settings = {
+  serverUrl: undefined,
+  packageId: undefined,
 };
 
-const getServerUrl = (sdk: SDK) => {
-  return serverUrl;
+const setSettings = (sdk: SDK, newSettings: Settings) => {
+  Object.assign(settings, newSettings);
+};
+
+const getSettings = (sdk: SDK): Settings => {
+  return settings;
 };
 
 const downloadPackage = async (sdk: SDK, url: string) => {
@@ -21,13 +28,13 @@ const downloadPackage = async (sdk: SDK, url: string) => {
 };
 
 export type API = DefineAPI<{
-  setServerUrl: typeof setServerUrl;
-  getServerUrl: typeof getServerUrl;
+  setSettings: typeof setSettings;
+  getSettings: typeof getSettings;
   downloadPackage: typeof downloadPackage;
 }>;
 
 export function init(sdk: SDK<API>) {
-  sdk.api.register("setServerUrl", setServerUrl);
-  sdk.api.register("getServerUrl", getServerUrl);
+  sdk.api.register("setSettings", setSettings);
+  sdk.api.register("getSettings", getSettings);
   sdk.api.register("downloadPackage", downloadPackage);
 }

packages/frontend/src/composables/useLogs.ts

@@ -2,16 +2,17 @@ import { computed, ref } from "vue";
 
 type Log = {
     kind: "Log";
+    origin: string;
     timestamp: Date;
     message: string;
 };
 
 export const useLogs = () => {
 
     const entries = ref<Log[]>([]);
-    const logs = computed(() => entries.value.map((log) => `${log.timestamp.toISOString()} - ${log.message}`).join("\n"));
-    const addLog = (message: string) => {
-        entries.value.push({ kind: "Log", timestamp: new Date(), message });
+    const logs = computed(() => entries.value.map((log) => `${log.timestamp.toISOString()} | ${log.origin} | ${log.message}`).join("\n"));
+    const addLog = (origin: string, message: string) => {
+        entries.value.push({ kind: "Log", origin, timestamp: new Date(), message });
     };
 
     return { logs, addLog };

packages/frontend/src/composables/usePluginPackage.ts

@@ -1,47 +1,53 @@
 import { useSDK } from "@/plugins/sdk";
-import { ref } from "vue";
 
 export const usePluginPackage = () => {
     const sdk = useSDK();
 
-    const pluginPackageId = ref<string | undefined>(undefined);
+    const getInstalledPackage = async (packageId: string) => {
+        const { pluginPackages } = await sdk.graphql.pluginPackages();
+        return pluginPackages.find((pluginPackage) => pluginPackage.manifestId === packageId);
+    }
 
-    const reinstallPackage = async (options: {
+    const installPackage = async (options: {
         downloadUrl: string,
     }) => {
-        try {
-            console.log("Uninstalling package");
-            if (pluginPackageId.value) {
-                const { uninstallPluginPackage } = await sdk.graphql.uninstallPluginPackage({
-                    id: pluginPackageId.value,
-                })
 
-                if (uninstallPluginPackage.error) {
-                    sdk.window.showToast(JSON.stringify(uninstallPluginPackage.error), {
-                        variant: "error",
-                    });
+        const dataUri = await sdk.backend.downloadPackage(options.downloadUrl);
+        const response = await fetch(dataUri);
+        const blob = await response.blob();
+
+        const { installPluginPackage } = await sdk.graphql.installPluginPackage({
+            input: {
+                source: {
+                    file: new File([blob], "plugin_package.zip"),
+
                 }
-            }
+            },
+        })
 
-            const dataUri = await sdk.backend.downloadPackage(options.downloadUrl);
-            const response = await fetch(dataUri);
-            const blob = await response.blob();
+        if (installPluginPackage.package) {
+            return {
+                packageId: installPluginPackage.package.id,
+            };
+        }
 
-            const { installPluginPackage } = await sdk.graphql.installPluginPackage({
-                input: {
-                    source: {
-                        file: new File([blob], "plugin_package.zip"),
+        if (installPluginPackage.error) {
+            sdk.window.showToast(JSON.stringify(installPluginPackage.error), {
+                variant: "error",
+            });
+        }
+    }
 
-                    }
-                },
+    const removePackage = async (options: {
+        packageId: string,
+    }) => {
+        try {
+            const { uninstallPluginPackage } = await sdk.graphql.uninstallPluginPackage({
+                id: options.packageId,
             })
 
-            if (installPluginPackage.package) {
-                pluginPackageId.value = installPluginPackage.package.id;
-            } 
-
-            if (installPluginPackage.error) {
-                sdk.window.showToast(JSON.stringify(installPluginPackage.error), {
+            if (uninstallPluginPackage.error) {
+                sdk.window.showToast(JSON.stringify(uninstallPluginPackage.error), {
                     variant: "error",
                 });
             }
@@ -51,14 +57,16 @@ export const usePluginPackage = () => {
                     variant: "error",
                 });
             } else {
-                sdk.window.showToast("Failed to reinstall package", {
+                sdk.window.showToast("Failed to uninstall package", {
                     variant: "error",
                 });
             }
         }
     }
 
     return {
-        reinstallPackage,
+        installPackage,
+        removePackage,
+        getInstalledPackage,
     }
 }

packages/frontend/src/composables/useSettings.ts

@@ -0,0 +1,36 @@
+import { useSDK } from "@/plugins/sdk";
+import { ref } from "vue";
+
+type Settings = {
+    serverUrl: string | undefined;
+    packageId: string | undefined;
+}
+
+export const useSettings = () => {
+    const sdk = useSDK();
+
+    const settings = ref<Settings>({
+        serverUrl: undefined,
+        packageId: undefined,
+    });
+
+    const initializeSettings = async () => {
+        const newSettings = await sdk.backend.getSettings();
+        settings.value = newSettings;
+    }
+
+    const setSettings = async (newSettings: Settings) => { 
+        settings.value = newSettings;
+        await sdk.backend.setSettings(newSettings);
+    }
+
+    const getSettings = () => {
+        return settings.value;
+    }
+
+    return {
+        initializeSettings,
+        setSettings,
+        getSettings,
+    }
+}

packages/frontend/src/composables/useState.ts

@@ -0,0 +1,19 @@
+import { ref } from "vue";
+
+type State =
+    | { kind: "Idle" }
+    | { kind: "Connecting"; url: string }
+    | { kind: "Connected"; ws: WebSocket };
+
+export const useState = () => {
+
+    const state = ref<State>({ kind: "Idle" });
+    const setState = (newState: State) => {
+        state.value = newState;
+    };
+
+    return {
+        state,
+        setState,
+    }
+};

packages/frontend/src/utils/watcher.ts

@@ -1,6 +1,7 @@
 type ConnectedMessage = {
     kind: "connected";
     downloadUrl: string;
+    packageId: string;
 }
 
 type RebuildMessage = {
@@ -26,7 +27,7 @@ const isConnectedMessage = (data: unknown): data is ConnectedMessage => {
         return false;
     }
 
-    return "kind" in data && data.kind === "connected" && "downloadUrl" in data;
+    return "kind" in data && data.kind === "connected" && "downloadUrl" in data && "packageId" in data;
 }
 
 const isErrorMessage = (data: unknown): data is ErrorMessage => {