diff --git a/crates/app/src/pages/components/details/export.tsx b/crates/app/src/pages/components/details/export.tsx
index 2e912832a..f5c185480 100644
--- a/crates/app/src/pages/components/details/export.tsx
+++ b/crates/app/src/pages/components/details/export.tsx
@@ -5,7 +5,7 @@ import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@/
 import {useEffect, useState} from "react";
 import {API} from "@/service";
 import {useParams} from "react-router-dom";
-import {ComponentList, Export, Parameter, Typ,} from "@/types/component";
+import {Case, ComponentList, Export, Parameter, Typ,} from "@/types/component";
 
 // ---------- Shadcn UI Tooltip Imports ----------
 import {TooltipProvider} from "@/components/ui/tooltip";
@@ -96,9 +96,9 @@ function parseTypeForTooltip(typ: Typ | undefined): {
             };
         }
         case "Variant": {
-            const cases = (typ.cases || []).map((c) => {
+            const cases = (typ.cases as Case[] || []).map((c) => {
                 const parsed = parseTypeForTooltip(c.typ);
-                return `${c.charAt(0).toUpperCase() + c.slice(1)}(${
+                return `${c.name.charAt(0).toUpperCase() + c.name.slice(1)}(${
                     parsed.full
                 })`;
             });
@@ -108,7 +108,7 @@ function parseTypeForTooltip(typ: Typ | undefined): {
             };
         }
         case "Enum": {
-            const cases = (typ.cases || []).map((c) => c.charAt(0).toUpperCase() + c.slice(1));
+            const cases = (typ.cases as string[] || []).map((c) => c.charAt(0).toUpperCase() + c.slice(1));
             return {
                 short: "enum",
                 full: `enum (\n  ${cases.join(",\n  ")}\n)`,
@@ -220,7 +220,7 @@ export default function Exports() {
     const [versionList, setVersionList] = useState<number[]>([]);
     const [versionChange, setVersionChange] = useState<number>(0);
     const [result, setResult] = useState<ExportResult[]>([]);
-
+    const [functions, setFunctions] = useState<ExportResult[]>([]);
     // const [functions, setFunctions] = useState<ComponentExportFunction[]>([]);
 
     useEffect(() => {
@@ -252,6 +252,7 @@ export default function Exports() {
         );
         if (!componentDetails) {
             setResult([]);
+            setFunctions([]);
             return;
         }
 
@@ -261,6 +262,7 @@ export default function Exports() {
             componentDetails.metadata?.exports || []
         );
         setResult(exportsResult);
+        setFunctions(exportsResult);
 
         // If you want to maintain a separate array of raw functions for searching:
         // const rawFunctions: ComponentExportFunction[] = calculateExportFunctions(
@@ -276,15 +278,10 @@ export default function Exports() {
     const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
         const value = e.target.value.toLowerCase();
 
-        // const searchResult = calculateExportFunctions(
-        //     component.versions?.find(
-        //         (data) => data.versionedComponentId?.version === versionChange
-        //     )?.metadata?.exports || []
-        // ).filter((fn: ComponentExportFunction) =>
-        //     fn.name.toLowerCase().includes(value)
-        // );
-
-        // setFunctions(searchResult);
+        const searchResult = functions.filter((fn: ExportResult) =>
+            fn.function_name.toLowerCase().includes(value)
+        );
+        setResult(searchResult);
     };
 
     return (
diff --git a/crates/app/src/pages/components/details/plugin.tsx b/crates/app/src/pages/components/details/plugin.tsx
index 3864613f0..44f54ed8b 100644
--- a/crates/app/src/pages/components/details/plugin.tsx
+++ b/crates/app/src/pages/components/details/plugin.tsx
@@ -1,334 +1,314 @@
-import { Search, Trash2 } from "lucide-react";
-import { Input } from "@/components/ui/input";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { useEffect, useState } from "react";
-import { API } from "@/service";
-import { useParams } from "react-router-dom";
-import {
-  Component,
-  ComponentList,
-  InstalledPlugin,
-} from "@/types/component.ts";
-import { toast } from "@/hooks/use-toast.ts";
+import {Search, Trash2} from "lucide-react";
+import {Input} from "@/components/ui/input";
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@/components/ui/table";
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select";
+import {useEffect, useState} from "react";
+import {API} from "@/service";
+import {useParams} from "react-router-dom";
+import {Component, ComponentList, InstalledPlugin,} from "@/types/component.ts";
+import {toast} from "@/hooks/use-toast.ts";
 import {
   Dialog,
-  DialogTrigger,
+  DialogClose,
   DialogContent,
-  DialogTitle,
   DialogDescription,
-  DialogClose,
+  DialogTitle,
+  DialogTrigger,
 } from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Plugin, PluginList } from "@/types/plugin";
-import { object } from "zod";
+import {Button} from "@/components/ui/button";
+import {Label} from "@/components/ui/label";
 
 export default function Plugins() {
-  const { componentId = "" } = useParams();
-  const [component, setComponent] = useState<ComponentList>(
-    {} as ComponentList
-  );
-  const [plugins, setPlugins] = useState<InstalledPlugin[]>([]);
-  const [filteredPlugins, setFilteredPlugins] = useState<InstalledPlugin[]>([]);
-  const [versionList, setVersionList] = useState<number[]>([]);
-  const [versionChange, setVersionChange] = useState(0);
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [newPlugin, setNewPlugin] = useState({
-    name: "",
-    priority: 1,
-    version: "",
-  });
-  const [availabePlugin, setAvailabePlugin] = useState<
-    Record<string, string[]>
-  >({});
-
-  // Fetch component versions & plugins on mount
+    const {componentId = ""} = useParams();
+    const [component, setComponent] = useState<ComponentList>(
+        {} as ComponentList
+    );
+    const [plugins, setPlugins] = useState<InstalledPlugin[]>([]);
+    const [filteredPlugins, setFilteredPlugins] = useState<InstalledPlugin[]>([]);
+    const [versionList, setVersionList] = useState<number[]>([]);
+    const [versionChange, setVersionChange] = useState(0);
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [newPlugin, setNewPlugin] = useState({
+        name: "",
+        priority: 1,
+        version: "",
+    });
+    const [availabePlugin, setAvailabePlugin] = useState<
+        Record<string, string[]>
+    >({});
 
-  useEffect(() => {
-    const fetchPlugins = async () => {
-      try {
-        const plugins = await API.getPlugins();
-        const pluginMap: Record<string, string[]> = {};
+    // Fetch component versions & plugins on mount
 
-        plugins.forEach(({ name, version }) => {
-          if (!pluginMap[name]) {
-            pluginMap[name] = [];
-          }
-          pluginMap[name].push(version);
-        });
-        setAvailabePlugin(pluginMap);
-      } catch (error) {
-        toast({
-          title: "Failed to fetch plugins",
-          description: "An error occurred while fetching the plugin list.",
-          variant: "destructive",
-          duration: 5000,
-        });
-      }
-    };
+    useEffect(() => {
+        const fetchPlugins = async () => {
+            try {
+                const plugins = await API.getPlugins();
+                const pluginMap: Record<string, string[]> = {};
 
-    fetchPlugins();
-    if (!componentId) return;
-    refreshComponent();
-  }, []);
+                plugins.forEach(({name, version}) => {
+                    if (!pluginMap[name]) {
+                        pluginMap[name] = [];
+                    }
+                    pluginMap[name].push(version);
+                });
+                setAvailabePlugin(pluginMap);
+            } catch (error) {
+                toast({
+                    title: "Failed to fetch plugins",
+                    description: `An error occurred while fetching the plugin list. ${error}`,
+                    variant: "destructive",
+                    duration: 5000,
+                });
+            }
+        };
 
-  const refreshComponent = () => {
-    API.getComponentByIdAsKey().then((response) => {
-      setComponent(response[componentId]);
-      const data = response[componentId];
-      const versionList = data.versionList || [];
-      setVersionList(versionList);
-      if (versionList.length > 0) {
-        handleVersionChange(versionList[versionList.length - 1]);
-      }
-    });
-  };
-
-  const handleVersionChange = (
-    version: number,
-    fetchedComponent?: Component
-  ) => {
-    setVersionChange(version);
+        fetchPlugins();
+        if (!componentId) return;
+        refreshComponent();
+    }, []);
 
-    const fetchComponent = fetchedComponent
-      ? Promise.resolve(fetchedComponent)
-      : API.getComponentByIdAndVersion(componentId, version);
+    const refreshComponent = () => {
+        API.getComponentByIdAsKey().then((response) => {
+            setComponent(response[componentId]);
+            const data = response[componentId];
+            const versionList = data.versionList || [];
+            setVersionList(versionList);
+            if (versionList.length > 0) {
+                handleVersionChange(versionList[versionList.length - 1]);
+            }
+        });
+    };
 
-    fetchComponent.then((response) => {
-      setPlugins(response.installedPlugins || []);
-      setFilteredPlugins(response.installedPlugins || []);
-    });
-  };
+    const handleVersionChange = (
+        version: number,
+        fetchedComponent?: Component
+    ) => {
+        setVersionChange(version);
 
-  // Handle search input
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const query = e.target.value.trim().toLowerCase();
-    setFilteredPlugins(
-      plugins.filter((plugin) => plugin.name.toLowerCase().includes(query))
-    );
-  };
+        const fetchComponent = fetchedComponent
+            ? Promise.resolve(fetchedComponent)
+            : API.getComponentByIdAndVersion(componentId, version);
 
-  // Handle delete action
-  const handleDeletePlugin = (pluginId: string) => {
-    const versionList = component.versionList || [];
-    const latestVersion = versionList[versionList.length - 1];
-    if (latestVersion === versionChange) {
-      API.deletePluginToComponent(componentId, pluginId).then(() => {
-        toast({
-          title: "Plugin deleted successfully",
-          description:
-            "Plugin has been deleted successfully. Please check the latest version of the component.",
-          duration: 3000,
+        fetchComponent.then((response) => {
+            setPlugins(response.installedPlugins || []);
+            setFilteredPlugins(response.installedPlugins || []);
         });
-        refreshComponent();
-      });
-    }
-  };
+    };
 
-  const handleAddPlugin = () => {
-    const pluginData = {
-      name: newPlugin.name,
-      priority: newPlugin.priority,
-      version: newPlugin.version,
-      parameters: {},
+    // Handle search input
+    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const query = e.target.value.trim().toLowerCase();
+        setFilteredPlugins(
+            plugins.filter((plugin) => plugin.name.toLowerCase().includes(query))
+        );
     };
-    API.addPluginToComponent(componentId, pluginData)
-      .then(() => {
-        toast({
-          title: "Plugin added successfully",
-          description: "The new plugin has been added successfully.",
-          duration: 3000,
-        });
-        refreshComponent();
-        setIsDialogOpen(false);
-      })
-      .catch((error) => {
-        toast({
-          title: "Failed to add plugin",
-          description: "An error occurred while adding the plugin.",
-          variant: "destructive",
-          duration: 5000,
-        });
-      });
-  };
 
-  return (
-    <div className="flex">
-      <div className="flex-1 p-8">
-        <div className="p-6 max-w-7xl mx-auto space-y-6">
-          <div className="flex items-center justify-between gap-10">
-            {/* Search Input */}
-            <div className="relative flex-1 max-full">
-              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                placeholder="Search plugins..."
-                className="pl-9"
-                onChange={handleSearch}
-              />
-            </div>
+    // Handle delete action
+    const handleDeletePlugin = (pluginId: string) => {
+        const versionList = component.versionList || [];
+        const latestVersion = versionList[versionList.length - 1];
+        if (latestVersion === versionChange) {
+            API.deletePluginToComponent(componentId, pluginId).then(() => {
+                toast({
+                    title: "Plugin deleted successfully",
+                    description:
+                        "Plugin has been deleted successfully. Please check the latest version of the component.",
+                    duration: 3000,
+                });
+                refreshComponent();
+            });
+        }
+    };
+
+    const handleAddPlugin = () => {
+        const pluginData = {
+            name: newPlugin.name,
+            priority: newPlugin.priority,
+            version: newPlugin.version,
+            parameters: {},
+        };
+        API.addPluginToComponent(componentId, pluginData)
+            .then(() => {
+                toast({
+                    title: "Plugin added successfully",
+                    description: "The new plugin has been added successfully.",
+                    duration: 3000,
+                });
+                refreshComponent();
+                setIsDialogOpen(false);
+            })
+            .catch((error) => {
+                toast({
+                    title: "Failed to add plugin",
+                    description: `An error occurred while adding the plugin. ${error}`,
+                    variant: "destructive",
+                    duration: 5000,
+                });
+            });
+    };
 
-            {/* Version Selector */}
-            {versionList.length > 0 && (
-              <Select
-                defaultValue={String(versionChange)}
-                onValueChange={(value) => handleVersionChange(Number(value))}
-              >
-                <SelectTrigger className="w-[80px]">
-                  <SelectValue>v{versionChange}</SelectValue>
-                </SelectTrigger>
-                <SelectContent>
-                  {versionList.map((version) => (
-                    <SelectItem key={version} value={String(version)}>
-                      v{version}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            )}
+    return (
+        <div className="flex">
+            <div className="flex-1 p-8">
+                <div className="p-6 max-w-7xl mx-auto space-y-6">
+                    <div className="flex items-center justify-between gap-10">
+                        {/* Search Input */}
+                        <div className="relative flex-1 max-full">
+                            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"/>
+                            <Input
+                                placeholder="Search plugins..."
+                                className="pl-9"
+                                onChange={handleSearch}
+                            />
+                        </div>
 
-            {/* Add Plugin Button */}
-            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-              <DialogTrigger asChild>
-                <Button>Add Plugin</Button>
-              </DialogTrigger>
-              <DialogContent>
-                <DialogTitle>Add New Plugin</DialogTitle>
-                <DialogDescription>
-                  Enter the details of the new plugin you want to add.
-                </DialogDescription>
-                <div className="space-y-4">
-                  <div>
-                    <Label htmlFor="plugin-name">Plugin Name</Label>
-                    <Select
-                      onValueChange={(value) => {
-                        setNewPlugin({ ...newPlugin, name: value });
-                      }}
-                    >
-                      <SelectTrigger>
-                        <SelectValue>
-                          {newPlugin.name || "Select a plugin"}
-                        </SelectValue>
-                      </SelectTrigger>
-                      <SelectContent>
-                        {Object.keys(availabePlugin).map((plugin) => (
-                          <SelectItem key={plugin} value={plugin}>
-                            {plugin}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div>
-                    <Label htmlFor="plugin-version">Version</Label>
-                    <Select
-                      id="plugin-version"
-                      placeholder="Version"
-                      disabled={!newPlugin.name}
-                      onValueChange={(value) => {
-                        setNewPlugin({ ...newPlugin, version: value });
-                      }}
-                    >
-                      <SelectTrigger>
-                        <SelectValue>
-                          {newPlugin.version || "Select a Plugin Version"}
-                        </SelectValue>
-                      </SelectTrigger>
-                      <SelectContent>
-                        {(availabePlugin[newPlugin.name || ""] || []).map(
-                          (version) => (
-                            <SelectItem key={version} value={version}>
-                              {version}
-                            </SelectItem>
-                          )
+                        {/* Version Selector */}
+                        {versionList.length > 0 && (
+                            <Select
+                                defaultValue={String(versionChange)}
+                                onValueChange={(value) => handleVersionChange(Number(value))}
+                            >
+                                <SelectTrigger className="w-[80px]">
+                                    <SelectValue>v{versionChange}</SelectValue>
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {versionList.map((version) => (
+                                        <SelectItem key={version} value={String(version)}>
+                                            v{version}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
                         )}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div>
-                    <Label htmlFor="plugin-priority">Priority</Label>
-                    <Input
-                      id="plugin-priority"
-                      placeholder="Priority"
-                      value={newPlugin.priority}
-                      onChange={(e) =>
-                        setNewPlugin({
-                          ...newPlugin,
-                          priority: Number(e.target.value),
-                        })
-                      }
-                    />
-                  </div>
-                </div>
-                <div className="flex justify-end mt-4 gap-2">
-                  <DialogClose asChild>
-                    <Button variant="outline">Cancel</Button>
-                  </DialogClose>
-                  <Button onClick={handleAddPlugin}>Add</Button>
-                </div>
-              </DialogContent>
-            </Dialog>
-          </div>
 
-          {/* Plugins Table */}
-          <div className="border rounded-lg">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-1/4">Name</TableHead>
-                  <TableHead className="w-1/4">Version</TableHead>
-                  <TableHead className="w-1/4">Priority</TableHead>
-                  <TableHead className="w-1/4 text-right">Actions</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredPlugins.length > 0 ? (
-                  filteredPlugins.map((plugin) => (
-                    <TableRow key={plugin.id} className="group">
-                      <TableCell className="font-mono text-sm">
-                        {plugin.name}
-                      </TableCell>
-                      <TableCell className="font-mono text-sm">
-                        {plugin.version}
-                      </TableCell>
-                      <TableCell className="font-mono text-sm">
-                        {plugin.priority}
-                      </TableCell>
-                      <TableCell className="w-1/4 text-right">
-                        <button
-                          onClick={() => handleDeletePlugin(plugin.id)}
-                          className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 cursor-pointer"
-                        >
-                          <Trash2 className="h-5 w-5 text-red-500 hover:text-red-700" />
-                        </button>
-                      </TableCell>
-                    </TableRow>
-                  ))
-                ) : (
-                  <tr>
-                    <td colSpan={4} className="p-4 text-center text-gray-500">
-                      No plugins found.
-                    </td>
-                  </tr>
-                )}
-              </TableBody>
-            </Table>
-          </div>
+                        {/* Add Plugin Button */}
+                        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+                            <DialogTrigger asChild>
+                                <Button>Add Plugin</Button>
+                            </DialogTrigger>
+                            <DialogContent>
+                                <DialogTitle>Add New Plugin</DialogTitle>
+                                <DialogDescription>
+                                    Enter the details of the new plugin you want to add.
+                                </DialogDescription>
+                                <div className="space-y-4">
+                                    <div>
+                                        <Label htmlFor="plugin-name">Plugin Name</Label>
+                                        <Select
+                                            onValueChange={(value) => {
+                                                setNewPlugin({...newPlugin, name: value});
+                                            }}
+                                        >
+                                            <SelectTrigger>
+                                                <SelectValue>
+                                                    {newPlugin.name || "Select a plugin"}
+                                                </SelectValue>
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                {Object.keys(availabePlugin).map((plugin) => (
+                                                    <SelectItem key={plugin} value={plugin}>
+                                                        {plugin}
+                                                    </SelectItem>
+                                                ))}
+                                            </SelectContent>
+                                        </Select>
+                                    </div>
+                                    <div>
+                                        <Label htmlFor="plugin-version">Version</Label>
+                                        <Select
+                                            name="plugin-version"
+                                            disabled={!newPlugin.name}
+                                            onValueChange={(value) => {
+                                                setNewPlugin({...newPlugin, version: value});
+                                            }}
+                                        >
+                                            <SelectTrigger>
+                                                <SelectValue>
+                                                    {newPlugin.version || "Select a Plugin Version"}
+                                                </SelectValue>
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                {(availabePlugin[newPlugin.name || ""] || []).map(
+                                                    (version) => (
+                                                        <SelectItem key={version} value={version}>
+                                                            {version}
+                                                        </SelectItem>
+                                                    )
+                                                )}
+                                            </SelectContent>
+                                        </Select>
+                                    </div>
+                                    <div>
+                                        <Label htmlFor="plugin-priority">Priority</Label>
+                                        <Input
+                                            id="plugin-priority"
+                                            placeholder="Priority"
+                                            value={newPlugin.priority}
+                                            onChange={(e) =>
+                                                setNewPlugin({
+                                                    ...newPlugin,
+                                                    priority: Number(e.target.value),
+                                                })
+                                            }
+                                        />
+                                    </div>
+                                </div>
+                                <div className="flex justify-end mt-4 gap-2">
+                                    <DialogClose asChild>
+                                        <Button variant="outline">Cancel</Button>
+                                    </DialogClose>
+                                    <Button onClick={handleAddPlugin}>Add</Button>
+                                </div>
+                            </DialogContent>
+                        </Dialog>
+                    </div>
+
+                    {/* Plugins Table */}
+                    <div className="border rounded-lg">
+                        <Table>
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHead className="w-1/4">Name</TableHead>
+                                    <TableHead className="w-1/4">Version</TableHead>
+                                    <TableHead className="w-1/4">Priority</TableHead>
+                                    <TableHead className="w-1/4 text-right">Actions</TableHead>
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                {filteredPlugins.length > 0 ? (
+                                    filteredPlugins.map((plugin) => (
+                                        <TableRow key={plugin.id} className="group">
+                                            <TableCell className="font-mono text-sm">
+                                                {plugin.name}
+                                            </TableCell>
+                                            <TableCell className="font-mono text-sm">
+                                                {plugin.version}
+                                            </TableCell>
+                                            <TableCell className="font-mono text-sm">
+                                                {plugin.priority}
+                                            </TableCell>
+                                            <TableCell className="w-1/4 text-right">
+                                                <button
+                                                    onClick={() => handleDeletePlugin(plugin.id)}
+                                                    className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 cursor-pointer"
+                                                >
+                                                    <Trash2 className="h-5 w-5 text-red-500 hover:text-red-700"/>
+                                                </button>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))
+                                ) : (
+                                    <tr>
+                                        <td colSpan={4} className="p-4 text-center text-gray-500">
+                                            No plugins found.
+                                        </td>
+                                    </tr>
+                                )}
+                            </TableBody>
+                        </Table>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
+    );
 }