@ocelescope/plugin 0.7.0 → 0.9.0

package/dist/index.js

@@ -1,375 +1,124 @@
-import { BarList, FileDropzone, FullScreenUpload, OcelSelect, defineModule, defineModuleRoute, env, getModuleRoute, useInvalidate } from "@ocelescope/core";
-import { CheckIcon, Columns2Icon, DatabaseIcon, DownloadIcon, EllipsisVertical, PuzzleIcon, Rows2Icon, Trash2Icon, UploadIcon } from "lucide-react";
+import { FileDropzone, FullScreenUpload, OcelSelect, defineModule, defineModuleRoute, env, getModuleRoute } from "@ocelescope/core";
+import { ArrowRightIcon, ChevronRightIcon, EllipsisVerticalIcon, EyeClosedIcon, EyeIcon, PuzzleIcon, SearchIcon, Trash2Icon, UploadIcon } from "lucide-react";
 import { useRouter } from "next/router.js";
-import { ActionIcon, Anchor, Badge, Box, Breadcrumbs, Button, Card, Center, Container, Divider, Flex, Group, Input, Loader, LoadingOverlay, Menu, Modal, MultiSelect, ScrollArea, Select, SimpleGrid, Skeleton, Slider, Splitter, Stack, Switch, Text, ThemeIcon, Title, Tooltip, useComputedColorScheme } from "@mantine/core";
-import { useDeletePlugin, useDisableDiscoveryMethod, useDownloadPluginResults, useEnableDiscoveryMethod, useEventAttributes, useEventCounts, useEventIds, useGetComputedValues, useGetExtensionMeta, useGetPlugin, useGetPluginMethod, useGetResourceMeta, useListDiscoveryMethods, useObjectAttributes, useObjectCounts, useObjectIds, usePluginResult, usePlugins, useRunPlugin, useSavePluginResults, useUpload } from "@ocelescope/api-base";
-import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { ResourceSelect, Visualization } from "@ocelescope/resources";
+import { ActionIcon, Anchor, Badge, Box, Breadcrumbs, Button, Card, CloseButton, Divider, Group, LoadingOverlay, Menu, Modal, OverflowList, ScrollArea, SimpleGrid, Spoiler, Stack, Text, TextInput, ThemeIcon, Title, Tooltip, UnstyledButton } from "@mantine/core";
+import { useDeletePlugin, useGetPlugin, useGetPluginMethod, usePlugins, useRunPlugin, useUpload } from "@ocelescope/api-base";
+import { PluginDashboard, PluginForm } from "@ocelescope/plugin-components";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { ResourceSelect } from "@ocelescope/resources";
 import { Controller, useForm, useWatch } from "react-hook-form";
-import validator from "@rjsf/validator-ajv8";
-import { getDefaultRegistry } from "@rjsf/core";
-import Editor from "@monaco-editor/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useDebouncedValue } from "@mantine/hooks";
-import { keepPreviousData } from "@tanstack/react-query";
-import dynamic from "next/dynamic.js";
 import Link from "next/link.js";
+import { useHover } from "@mantine/hooks";
 import { generateColor } from "@marko19907/string-to-color";
-//#region src/components/Form/Fields/CodeField.tsx
-const EDITOR_HEIGHT = 160;
-const OPTIONS = {
-	minimap: { enabled: false },
-	quickSuggestions: false,
-	suggestOnTriggerCharacters: false,
-	wordBasedSuggestions: "off",
-	lineNumbers: "on",
-	scrollBeyondLastLine: false,
-	automaticLayout: true,
-	scrollbar: { alwaysConsumeMouseWheel: false },
-	wordWrap: "on",
-	tabSize: 2,
-	fontSize: 13,
-	padding: {
-		top: 8,
-		bottom: 8
-	}
-};
-const CodeField = memo(({ schema, required, formData, onChange, rawErrors, disabled, readonly, fieldPathId: { path } }) => {
-	const meta = schema["x-ui-meta"];
-	const colorScheme = useComputedColorScheme("light", { getInitialValueInEffect: true });
-	const readOnly = disabled || readonly;
-	const options = useMemo(() => ({
-		...OPTIONS,
-		readOnly
-	}), [readOnly]);
-	return /* @__PURE__ */ jsx(Input.Wrapper, {
-		label: schema.title,
-		description: schema.description,
-		required,
-		error: rawErrors?.[0],
-		children: /* @__PURE__ */ jsx(Box, {
-			style: {
-				border: "1px solid var(--mantine-color-default-border)",
-				borderRadius: "var(--mantine-radius-default)",
-				overflow: "hidden"
-			},
-			children: /* @__PURE__ */ jsx(Editor, {
-				height: EDITOR_HEIGHT,
-				language: meta?.language ?? "plaintext",
-				value: formData ?? "",
-				theme: colorScheme === "dark" ? "vs-dark" : "light",
-				options,
-				onChange: (value) => onChange(value ?? "", path),
-				loading: /* @__PURE__ */ jsx(Skeleton, {
-					height: EDITOR_HEIGHT,
-					radius: 0
-				})
-			})
-		})
-	});
-});
-//#endregion
-//#region src/components/Form/PluginFormContext.tsx
-const PluginFormContext = createContext(void 0);
-const usePluginForm = () => {
-	const context = useContext(PluginFormContext);
-	if (!context) throw new Error("Custom plugin fields have to be rendered inside <PluginFormProvider>");
-	return context;
-};
-const useOcelId = (ocelRef) => {
-	const { control } = usePluginForm();
-	return useWatch({
-		control,
-		name: `input_ocels.${ocelRef}`
-	});
-};
-const PluginFormProvider = ({ pluginId, methodName, control, children }) => {
-	const value = useMemo(() => ({
-		pluginId,
-		methodName,
-		control
-	}), [
-		pluginId,
-		methodName,
-		control
-	]);
-	return /* @__PURE__ */ jsx(PluginFormContext.Provider, {
-		value,
-		children
-	});
-};
-//#endregion
-//#region src/components/Form/Fields/ComputedSelect.tsx
-const compact = (record) => Object.fromEntries(Object.entries(record ?? {}).filter(([, value]) => !!value));
-const useSelectOptions = (provider) => {
-	const { pluginId, methodName, control } = usePluginForm();
-	const formValues = useWatch({ control });
-	const [debouncedBody] = useDebouncedValue(useMemo(() => JSON.stringify({
-		input: formValues.input,
-		input_ocels: compact(formValues.input_ocels),
-		input_resources: compact(formValues.input_resources)
-	}), [formValues]), 300);
-	const { data } = useGetComputedValues(pluginId, methodName, provider, useMemo(() => JSON.parse(debouncedBody), [debouncedBody]), { query: {
-		placeholderData: keepPreviousData,
-		refetchOnWindowFocus: false,
-		refetchOnReconnect: false
-	} });
-	return { options: data };
-};
-const ComputedSelect = memo(({ schema, required, formData, onChange, fieldPathId: { path } }) => {
-	const meta = schema["x-ui-meta"];
-	const isMulti = schema.type === "array";
-	const SelectComponent = isMulti ? MultiSelect : Select;
-	const { options } = useSelectOptions(meta.provider);
-	return /* @__PURE__ */ jsx(SelectComponent, {
-		label: schema.title,
-		description: schema.description,
-		required,
-		value: formData ?? (isMulti ? [] : null),
-		onChange: (value) => onChange(value, path),
-		data: options
-	});
-});
-//#endregion
-//#region src/components/Form/Fields/EnumMultiSelect.tsx
-const itemsOf = (schema, registry) => {
-	const { items } = schema;
-	if (!items || typeof items === "boolean" || Array.isArray(items)) return;
-	return registry.schemaUtils.retrieveSchema(items);
-};
-const isStringEnumArray = (schema, registry) => {
-	if (schema.type !== "array") return false;
-	const enumValues = itemsOf(schema, registry)?.enum;
-	return Array.isArray(enumValues) && enumValues.length > 0 && enumValues.every((value) => typeof value === "string");
-};
-const EnumMultiSelect = memo(({ schema, registry, required, formData, onChange, rawErrors, disabled, readonly, fieldPathId: { path } }) => {
-	const options = useMemo(() => itemsOf(schema, registry)?.enum ?? [], [schema, registry]);
-	return /* @__PURE__ */ jsx(MultiSelect, {
-		label: schema.title,
-		description: schema.description,
-		required,
-		error: rawErrors?.[0],
-		data: options,
-		value: Array.isArray(formData) ? formData : [],
-		onChange: (value) => onChange(value, path),
-		disabled: disabled || readonly,
-		clearable: true,
-		searchable: true
-	});
-});
-//#endregion
-//#region src/components/Form/Fields/OCELField.tsx
-const AttributeSelect = (useAttributes) => ({ ocelId, isMulti, value, ...props }) => {
-	const { data: attributes } = useAttributes(ocelId);
-	const names = useMemo(() => [...new Set((attributes ?? []).map(({ name }) => name))], [attributes]);
-	return /* @__PURE__ */ jsx(isMulti ? MultiSelect : Select, {
-		value: value ?? (isMulti ? [] : null),
-		...props,
-		data: names,
-		disabled: !ocelId,
-		clearable: true
-	});
-};
-const TypeSelect = (useCounts) => ({ ocelId, isMulti, value, ...props }) => {
-	const { data: counts } = useCounts(ocelId);
-	const types = useMemo(() => Object.keys(counts ?? {}), [counts]);
-	return /* @__PURE__ */ jsx(isMulti ? MultiSelect : Select, {
-		...props,
-		value: value ?? (isMulti ? [] : null),
-		data: types,
-		clearable: true
-	});
-};
-const IdSelect = (useIds) => ({ ocelId, isMulti, value, ...props }) => {
-	const [search, setSearch] = useState();
-	const [debouncedSearch] = useDebouncedValue(search, 300);
-	const { data: ids } = useIds(ocelId, { search: debouncedSearch });
-	return /* @__PURE__ */ jsx(isMulti ? MultiSelect : Select, {
-		...props,
-		value: value ?? (isMulti ? [] : null),
-		data: ids?.response,
-		searchValue: search,
-		onSearchChange: setSearch,
-		searchable: true
-	});
-};
-const OCEL_FIELDS = {
-	event_type: TypeSelect(useEventCounts),
-	object_type: TypeSelect(useObjectCounts),
-	event_attribute: AttributeSelect(useEventAttributes),
-	object_attribute: AttributeSelect(useObjectAttributes),
-	event_id: IdSelect(useEventIds),
-	object_id: IdSelect(useObjectIds)
-};
-const OCELField = memo(({ schema, required, formData, onChange, fieldPathId: { path } }) => {
-	const ocelRef = schema["x-ui-meta"]?.["ocel_id"];
-	const ocelFieldType = schema["x-ui-meta"]?.["field_type"];
-	const ocelId = useOcelId(ocelRef);
-	const isMulti = schema.type === "array";
-	useEffect(() => {
-		onChange(isMulti ? [] : void 0, path);
-	}, [
-		ocelId,
-		isMulti,
-		onChange,
-		path
-	]);
-	const Selector = OCEL_FIELDS[ocelFieldType];
-	return Selector && /* @__PURE__ */ jsx(Selector, {
-		ocelId,
-		isMulti,
-		value: formData,
-		onChange: (value) => onChange(value, path),
-		label: schema.title,
-		description: schema.description,
-		disabled: !ocelId,
-		required
-	}, ocelId);
-});
-//#endregion
-//#region src/components/Form/Fields/SliderField.tsx
-const decimalsOf = (step) => String(step).split(".")[1]?.length ?? 0;
-const SliderField = memo(({ schema, required, formData, onChange, rawErrors, disabled, readonly, fieldPathId: { path } }) => {
-	const meta = schema["x-ui-meta"];
-	const { min, max } = meta;
-	const step = meta.step ?? (schema.type === "integer" ? 1 : (max - min) / 100);
-	const decimals = decimalsOf(step);
-	const marks = useMemo(() => meta.marks?.map((value) => ({
-		value,
-		label: value.toFixed(decimals)
-	})), [meta.marks, decimals]);
-	const fallback = typeof schema.default === "number" ? schema.default : min;
-	const value = typeof formData === "number" ? formData : fallback;
-	return /* @__PURE__ */ jsx(Input.Wrapper, {
-		label: schema.title,
-		description: schema.description,
-		required,
-		error: rawErrors?.[0],
-		children: /* @__PURE__ */ jsx(Box, {
-			px: marks ? "md" : void 0,
-			pb: marks ? "xl" : void 0,
-			children: /* @__PURE__ */ jsx(Slider, {
-				mt: "xs",
-				min,
-				max,
-				step,
-				marks,
-				label: (current) => current.toFixed(decimals),
-				value,
-				onChange: (current) => onChange(current, path),
-				disabled: disabled || readonly
-			})
-		})
-	});
-});
-//#endregion
-//#region src/components/Form/Fields/index.tsx
-const DefaultSchemaField = getDefaultRegistry().fields.SchemaField;
-const CUSTOM_FORM_MAP = {
-	ocel: OCELField,
-	computed_select: ComputedSelect,
-	code: CodeField,
-	slider: SliderField
-};
-const resolveField = ({ schema, registry }) => {
-	const uiType = schema["x-ui-meta"]?.type;
-	if (uiType) return CUSTOM_FORM_MAP[uiType];
-	if (isStringEnumArray(schema, registry)) return EnumMultiSelect;
-};
-const CustomSchemaField = (props) => {
-	const FormComponent = resolveField(props);
-	return FormComponent ? /* @__PURE__ */ jsx(FormComponent, { ...props }) : /* @__PURE__ */ jsx(DefaultSchemaField, { ...props });
-};
-//#endregion
-//#region src/components/Form/MantineForm.tsx
-const Form = dynamic(() => import("@rjsf/mantine").then((m) => m.Form), { ssr: false });
-//#endregion
-//#region src/components/Form/PluginForm.tsx
-const FIELDS = { SchemaField: CustomSchemaField };
-const PluginForm = ({ schema, control, pluginId, methodName, onSubmit }) => {
-	const formSchema = useMemo(() => ({
-		...schema,
-		title: ""
-	}), [schema]);
-	return /* @__PURE__ */ jsx(PluginFormProvider, {
-		control,
-		pluginId,
-		methodName,
-		children: /* @__PURE__ */ jsx(Controller, {
-			control,
-			name: "input",
-			render: ({ field }) => /* @__PURE__ */ jsx(Form, {
-				schema: formSchema,
-				formData: field.value,
-				validator,
-				fields: FIELDS,
-				onChange: ({ formData }) => field.onChange(formData),
-				onSubmit
-			})
-		})
-	});
-};
-//#endregion
 //#region src/components/Form/index.tsx
-const PluginInput = ({ pluginId, method, onSuccess }) => {
+const compact = (record) => Object.fromEntries(Object.entries(record ?? {}).filter(([, value]) => !!value));
+const PluginInput = ({ pluginId, method, onSuccess, autoShowFirstOutput, setAutoShowFirstOutput }) => {
 	const { mutate: runPlugin } = useRunPlugin({ mutation: { onSuccess } });
-	const { control, handleSubmit } = useForm({ defaultValues: {
-		input_ocels: Object.fromEntries(Object.keys(method.input_ocels ?? {}).map((name) => [name, void 0])),
-		input_resources: Object.fromEntries(Object.keys(method.input_resources ?? {}).map((name) => [name, void 0])),
+	const defaultValue = {
+		input_resources: Object.fromEntries(method.inputs.map(({ name }) => [name, void 0])),
 		formData: {}
-	} });
-	const onSubmit = useCallback(() => handleSubmit((data) => runPlugin({
-		data,
-		methodName: method.name,
-		pluginId
-	}))(), [
+	};
+	const { control, handleSubmit } = useForm({ defaultValues: defaultValue });
+	const ref = useRef(null);
+	const onSubmit = useCallback(() => {
+		if (!method.configuration_schema || ref.current?.validateForm()) handleSubmit(({ input_resources, input }) => runPlugin({
+			data: {
+				input_resources: compact(input_resources),
+				input
+			},
+			methodName: method.name,
+			pluginId
+		}))();
+	}, [
 		handleSubmit,
 		pluginId,
 		method,
 		runPlugin
 	]);
+	const inputResources = useWatch({
+		control,
+		name: "input_resources"
+	});
 	return /* @__PURE__ */ jsxs(Stack, {
-		gap: "md",
-		children: [
-			Object.entries(method.input_ocels ?? {}).map(([name, { label, description, extension }]) => /* @__PURE__ */ jsx(Controller, {
-				control,
-				name: `input_ocels.${name}`,
-				rules: { required: "Please select a value" },
-				render: ({ field, fieldState }) => /* @__PURE__ */ jsx(OcelSelect, {
-					label,
-					required: true,
-					extension: extension ?? void 0,
-					description,
-					error: fieldState.error?.message,
-					onChange: field.onChange,
-					value: field.value
-				})
-			}, name)),
-			Object.entries(method.input_resources ?? {}).map(([name, [resource_type, { label, description }]]) => /* @__PURE__ */ jsx(Controller, {
-				control,
-				name: `input_resources.${name}`,
-				rules: { required: "Please select a value" },
-				render: ({ field, fieldState }) => /* @__PURE__ */ jsx(ResourceSelect, {
-					label,
-					required: true,
-					type: resource_type,
-					description,
-					onChange: field.onChange,
-					error: fieldState.error?.message,
-					value: field.value
-				})
-			}, name)),
-			method.input_schema ? /* @__PURE__ */ jsx(PluginForm, {
-				pluginId,
-				methodName: method.name,
-				schema: method.input_schema,
-				control,
-				onSubmit
-			}) : /* @__PURE__ */ jsx(Button, {
+		gap: 0,
+		flex: 1,
+		mih: 0,
+		children: [/* @__PURE__ */ jsx(ScrollArea, {
+			flex: 1,
+			mih: 0,
+			type: "auto",
+			children: /* @__PURE__ */ jsxs(Stack, {
+				gap: "md",
+				px: "md",
+				pb: "md",
+				maw: 640,
+				mx: "auto",
+				w: "100%",
+				children: [method.inputs.map((io) => /* @__PURE__ */ jsx(Controller, {
+					control,
+					name: `input_resources.${io.name}`,
+					rules: !io.is_optional ? { required: "Please select a value" } : {},
+					render: ({ field, fieldState }) => io.type === "ocel" ? /* @__PURE__ */ jsx(OcelSelect, {
+						label: io.label,
+						clearable: io.is_optional,
+						required: !io.is_optional,
+						description: io.description,
+						searchable: true,
+						error: fieldState.error?.message,
+						onChange: field.onChange,
+						value: field.value
+					}) : /* @__PURE__ */ jsx(ResourceSelect, {
+						clearable: io.is_optional,
+						label: io.label,
+						required: !io.is_optional,
+						type: io.schema_id,
+						description: io.description,
+						onChange: field.onChange,
+						error: fieldState.error?.message,
+						value: field.value,
+						searchable: true
+					})
+				}, io.name)), method.configuration_schema && /* @__PURE__ */ jsx(Controller, {
+					control,
+					name: "input",
+					render: ({ field }) => /* @__PURE__ */ jsx(PluginForm, {
+						ref,
+						pluginId,
+						methodName: method.name,
+						schema: method.configuration_schema,
+						inputResources,
+						formData: field.value,
+						onChange: ({ formData }) => field.onChange(formData),
+						uiSchema: { "ui:submitButtonOptions": { norender: true } },
+						onSubmit
+					})
+				})]
+			})
+		}), /* @__PURE__ */ jsxs(Group, {
+			gap: "xs",
+			wrap: "nowrap",
+			p: "md",
+			maw: 640,
+			mx: "auto",
+			w: "100%",
+			children: [/* @__PURE__ */ jsx(Button, {
+				flex: 1,
 				onClick: onSubmit,
 				children: "Submit"
-			})
-		]
+			}), /* @__PURE__ */ jsx(Tooltip, {
+				label: autoShowFirstOutput ? "Opening first output after run" : "Hide outputs after run",
+				withArrow: true,
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					onClick: () => setAutoShowFirstOutput(!autoShowFirstOutput),
+					size: "input-sm",
+					variant: autoShowFirstOutput ? "light" : "default",
+					"aria-label": "Open first output after run",
+					"aria-pressed": autoShowFirstOutput,
+					children: autoShowFirstOutput ? /* @__PURE__ */ jsx(EyeIcon, { size: 18 }) : /* @__PURE__ */ jsx(EyeClosedIcon, { size: 18 })
+				})
+			})]
+		})]
 	});
 };
 //#endregion
@@ -379,408 +128,274 @@ const PluginBreadcrumbs = () => {
 	const { pluginId, methodName } = query;
 	const { data: plugin } = useGetPlugin(pluginId ?? "", { query: { enabled: !!pluginId } });
 	const pluginMethod = useMemo(() => plugin?.methods.find(({ name }) => name === methodName), [plugin, methodName]);
-	return /* @__PURE__ */ jsxs(Breadcrumbs, { children: [
-		/* @__PURE__ */ jsx(Anchor, {
-			component: Link,
-			href: { query: {
-				...query,
-				pluginId: void 0,
-				methodName: void 0
-			} },
-			children: "Plugins"
-		}),
-		plugin && /* @__PURE__ */ jsx(Anchor, {
-			component: Link,
-			href: { query: {
-				...query,
-				pluginId: plugin?.id,
-				methodName: void 0
-			} },
-			children: plugin?.meta.label
-		}),
-		pluginMethod && /* @__PURE__ */ jsx(Anchor, {
-			component: Link,
-			href: { query: {
-				...query,
-				pluginId: plugin?.id,
-				methodName: pluginMethod.name
-			} },
-			children: pluginMethod.label ?? pluginMethod.name
-		})
-	] });
-};
-//#endregion
-//#region src/components/ResultSection/ResultSection.tsx
-const ResourceView = ({ resource }) => {
-	return /* @__PURE__ */ jsx(Visualization, { visualization: resource.visualization });
-};
-const OCELView = ({ ocel }) => {
-	return /* @__PURE__ */ jsxs(Stack, {
-		gap: "md",
-		children: [/* @__PURE__ */ jsx(BarList, {
-			data: ocel.activity_count,
-			labelHeader: "Activity"
-		}), /* @__PURE__ */ jsx(BarList, {
-			data: ocel.object_count,
-			labelHeader: "Object type"
-		})]
-	});
-};
-const entityTypeOf = (output) => output.type === "ocel" ? "ocel" : output.resource_type || "resource";
-const ResultLabel = ({ label, entityType, bold }) => /* @__PURE__ */ jsxs(Group, {
-	gap: "xs",
-	wrap: "nowrap",
-	children: [/* @__PURE__ */ jsx(Text, {
-		fw: bold ? 600 : void 0,
-		truncate: true,
-		children: label
-	}), /* @__PURE__ */ jsx(Badge, {
-		size: "sm",
-		color: generateColor(entityType),
-		children: entityType
-	})]
-});
-const ResultSection = ({ pluginId, methodName, taskId }) => {
-	const { data: pluginSummary } = usePluginResult(pluginId, methodName, taskId, { query: { refetchInterval: ({ state }) => {
-		if (state.data == null) return 1e3;
-		return false;
-	} } });
-	const [selected, setSelected] = useState([0]);
-	const [orientation, setOrientation] = useState("vertical");
-	const { mutate: saveResults, isPending: isSaving, isSuccess: isSaved, reset: resetSave } = useSavePluginResults();
-	const { mutate: downloadResults, isPending: isDownloading } = useDownloadPluginResults({ request: { responseType: "blob" } });
-	const options = useMemo(() => (pluginSummary ?? []).map((output) => {
-		return {
-			value: output.result_index,
-			label: entityTypeOf(output),
-			entityType: output.type
-		};
-	}), [pluginSummary]);
-	if (!pluginSummary) return /* @__PURE__ */ jsx(Center, {
-		h: "100%",
-		children: /* @__PURE__ */ jsxs(Stack, {
-			align: "center",
-			gap: "sm",
-			children: [/* @__PURE__ */ jsx(Loader, {}), /* @__PURE__ */ jsx(Text, {
-				c: "dimmed",
-				children: "Running…"
-			})]
-		})
-	});
-	if (pluginSummary.length === 0) return /* @__PURE__ */ jsx(Center, {
-		h: "100%",
-		children: /* @__PURE__ */ jsx(Text, {
-			c: "dimmed",
-			children: "This run produced no results."
-		})
-	});
-	const handleSelectionChange = (value) => {
-		setSelected(value);
-		resetSave();
-	};
-	const handleDownload = () => {
-		downloadResults({
-			pluginId,
-			methodName,
-			taskId,
-			data: { indices: selected }
-		}, { onSuccess: (data) => {
-			const url = URL.createObjectURL(data);
-			const anchor = document.createElement("a");
-			anchor.href = url;
-			anchor.download = `${methodName}_results.zip`;
-			anchor.click();
-			URL.revokeObjectURL(url);
-		} });
-	};
-	const handleSaveToSession = () => {
-		saveResults({
-			pluginId,
-			methodName,
-			taskId,
-			data: { indices: selected }
-		});
-	};
-	return /* @__PURE__ */ jsxs(Stack, {
-		gap: 0,
-		h: "100%",
-		children: [/* @__PURE__ */ jsxs(Group, {
-			px: "sm",
-			py: "xs",
-			wrap: "nowrap",
-			style: { borderBottom: "1px solid var(--mantine-color-default-border)" },
-			children: [options.length > 1 ? /* @__PURE__ */ jsx(MultiSelect, {
-				flex: 1,
-				data: options,
-				onChange: handleSelectionChange,
-				value: selected,
-				placeholder: "Select results to display",
-				searchable: true,
-				clearable: true,
-				comboboxProps: { withinPortal: true },
-				renderOption: ({ option }) => {
-					const output = pluginSummary[Number(option.value)];
-					return /* @__PURE__ */ jsx(ResultLabel, {
-						label: option.label,
-						entityType: output ? entityTypeOf(output) : option.label
-					});
-				}
-			}) : options[0] && /* @__PURE__ */ jsx(ResultLabel, {
-				label: options[0].label,
-				entityType: options[0].entityType,
-				bold: true
-			}), /* @__PURE__ */ jsxs(Group, {
-				gap: "xs",
-				ml: "auto",
-				wrap: "nowrap",
-				children: [
-					selected.length > 1 && /* @__PURE__ */ jsx(Tooltip, {
-						label: orientation === "vertical" ? "Show side by side" : "Stack vertically",
-						children: /* @__PURE__ */ jsx(ActionIcon, {
-							variant: "default",
-							size: "lg",
-							onClick: () => setOrientation((prev) => prev === "vertical" ? "horizontal" : "vertical"),
-							children: orientation === "vertical" ? /* @__PURE__ */ jsx(Columns2Icon, { size: 16 }) : /* @__PURE__ */ jsx(Rows2Icon, { size: 16 })
-						})
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						variant: "default",
-						leftSection: /* @__PURE__ */ jsx(DownloadIcon, { size: 16 }),
-						onClick: handleDownload,
-						loading: isDownloading,
-						disabled: selected.length === 0,
-						children: "Download"
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						variant: "light",
-						color: isSaved ? "green" : void 0,
-						leftSection: isSaved ? /* @__PURE__ */ jsx(CheckIcon, { size: 16 }) : /* @__PURE__ */ jsx(DatabaseIcon, { size: 16 }),
-						onClick: handleSaveToSession,
-						loading: isSaving,
-						disabled: selected.length === 0,
-						children: isSaved ? "Saved" : "Save to session"
-					})
-				]
-			})]
-		}), selected.length === 0 ? /* @__PURE__ */ jsx(Center, {
-			style: { flex: 1 },
-			children: /* @__PURE__ */ jsx(Text, {
-				c: "dimmed",
-				children: "Select one or more results to display."
-			})
-		}) : /* @__PURE__ */ jsx(Splitter, {
-			orientation,
-			lineSize: 4,
-			handleColor: "var(--mantine-color-default-border)",
-			style: {
-				flex: 1,
-				minHeight: 0
+	return /* @__PURE__ */ jsxs(Breadcrumbs, {
+		styles: {
+			root: {
+				display: "grid",
+				gridAutoFlow: "column",
+				gridAutoColumns: "minmax(0, max-content)"
 			},
-			children: pluginSummary?.filter(({ result_index }) => selected.includes(result_index)).map((output, index) => /* @__PURE__ */ jsx(Splitter.Pane, {
-				defaultSize: 100 / selected.length,
-				min: "15%",
-				children: /* @__PURE__ */ jsx(Box, {
-					h: "100%",
-					p: "xs",
-					pos: "relative",
-					children: output.type === "ocel" ? /* @__PURE__ */ jsx(OCELView, { ocel: output }) : /* @__PURE__ */ jsx(ResourceView, { resource: output })
-				})
-			}, index))
-		}, `${orientation}:${selected.join(",")}`)]
+			breadcrumb: {
+				minWidth: 0,
+				lineHeight: "var(--mantine-line-height)"
+			}
+		},
+		children: [
+			/* @__PURE__ */ jsx(Anchor, {
+				component: Link,
+				truncate: true,
+				title: "Plugins",
+				href: { query: {
+					...query,
+					pluginId: void 0,
+					methodName: void 0
+				} },
+				children: "Plugins"
+			}),
+			plugin && /* @__PURE__ */ jsx(Anchor, {
+				component: Link,
+				truncate: true,
+				title: plugin.label,
+				href: { query: {
+					...query,
+					pluginId: plugin?.id,
+					methodName: void 0
+				} },
+				children: plugin?.label
+			}),
+			pluginMethod && /* @__PURE__ */ jsx(Anchor, {
+				component: Link,
+				truncate: true,
+				title: pluginMethod.label ?? pluginMethod.name,
+				href: { query: {
+					...query,
+					pluginId: plugin?.id,
+					methodName: pluginMethod.name
+				} },
+				children: pluginMethod.label ?? pluginMethod.name
+			})
+		]
 	});
 };
 //#endregion
 //#region src/pages/MethodPage.tsx
-const COLLAPSED_SIZES = [0, 100];
-const SPLIT_SIZES = [75, 25];
 const MethodPage = ({ pluginId, methodName }) => {
 	const { data: pluginMethod } = useGetPluginMethod(pluginId, methodName);
 	const [currentTask, setCurrentTask] = useState();
-	const [sizes, setSizes] = useState(COLLAPSED_SIZES);
+	const [autoShowFirstOutput, setAutoShowFirstOutput] = useState(true);
 	if (!pluginMethod) return /* @__PURE__ */ jsx(LoadingOverlay, { visible: true });
-	const handleSuccess = (taskId) => {
-		setCurrentTask(taskId);
-		setSizes((prev) => prev[0] === 0 ? SPLIT_SIZES : prev);
-	};
-	return /* @__PURE__ */ jsx(Flex, {
-		direction: "column",
-		h: "100%",
-		children: /* @__PURE__ */ jsxs(Splitter, {
-			sizes,
-			onSizeChange: setSizes,
-			lineSize: 4,
-			handleColor: "var(--mantine-color-default-border)",
-			px: "xs",
-			style: {
-				flex: 1,
-				minHeight: 0
-			},
-			children: [/* @__PURE__ */ jsx(Splitter.Pane, {
-				defaultSize: 0,
-				min: "20%",
-				collapsible: true,
-				children: /* @__PURE__ */ jsx(Box, {
-					h: "100%",
-					pos: "relative",
-					style: { overflow: "hidden" },
-					children: currentTask ? /* @__PURE__ */ jsx(ResultSection, {
-						pluginId,
-						methodName,
-						taskId: currentTask
-					}) : /* @__PURE__ */ jsx(Center, {
-						h: "100%",
-						p: "md",
+	return /* @__PURE__ */ jsx(PluginDashboard, {
+		taskId: currentTask,
+		autoShowFirstOutput,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			h: "100%",
+			gap: 0,
+			children: [/* @__PURE__ */ jsxs(Stack, {
+				gap: "sm",
+				p: "md",
+				maw: 640,
+				mx: "auto",
+				w: "100%",
+				children: [
+					/* @__PURE__ */ jsx(Group, {
+						justify: "center",
+						children: /* @__PURE__ */ jsx(PluginBreadcrumbs, {})
+					}),
+					/* @__PURE__ */ jsx(Title, {
+						ta: "center",
+						order: 2,
+						children: pluginMethod.label ?? methodName
+					}),
+					pluginMethod.description && /* @__PURE__ */ jsx(Spoiler, {
+						maxHeight: 120,
+						showLabel: "Show more",
+						hideLabel: "Hide",
 						children: /* @__PURE__ */ jsx(Text, {
 							c: "dimmed",
 							ta: "center",
-							children: "Run the method to see its results here."
+							children: pluginMethod.description
 						})
 					})
-				})
-			}), /* @__PURE__ */ jsx(Splitter.Pane, {
-				defaultSize: 100,
-				min: "20%",
-				collapsible: true,
-				children: /* @__PURE__ */ jsx(ScrollArea, {
-					h: "100%",
-					type: "auto",
-					children: /* @__PURE__ */ jsxs(Stack, {
-						gap: "sm",
-						p: "md",
-						maw: 640,
-						mx: "auto",
-						w: "100%",
-						children: [
-							/* @__PURE__ */ jsx(Group, {
-								justify: "center",
-								children: /* @__PURE__ */ jsx(PluginBreadcrumbs, {})
-							}),
-							/* @__PURE__ */ jsx(Title, {
-								ta: "center",
-								children: pluginMethod.label ?? methodName
-							}),
-							pluginMethod.description && /* @__PURE__ */ jsx(Text, {
-								c: "dimmed",
-								ta: "center",
-								children: pluginMethod.description
-							}),
-							/* @__PURE__ */ jsx(PluginInput, {
-								onSuccess: handleSuccess,
-								pluginId,
-								method: pluginMethod
-							})
-						]
-					})
-				})
+				]
+			}), /* @__PURE__ */ jsx(PluginInput, {
+				onSuccess: setCurrentTask,
+				pluginId,
+				method: pluginMethod,
+				autoShowFirstOutput,
+				setAutoShowFirstOutput
 			})]
 		})
 	});
 };
 //#endregion
-//#region src/components/PluginCard/GenericCard.tsx
-const GenericCard = ({ menuItems, title, description, link, tags, version }) => {
+//#region src/components/LinkCard/LinkCard.tsx
+const INTERACTIVE_LAYER = {
+	position: "relative",
+	zIndex: 1
+};
+const LinkCard = ({ href, height, children }) => {
+	const { hovered, ref } = useHover();
 	return /* @__PURE__ */ jsxs(Card, {
-		shadow: "sm",
-		padding: "sm",
-		radius: "md",
+		ref,
 		withBorder: true,
-		h: "100%",
+		shadow: hovered ? "md" : "xs",
+		radius: "md",
+		padding: "md",
+		h: height,
+		style: {
+			transition: "box-shadow 150ms ease, border-color 150ms ease",
+			...hovered && { borderColor: "var(--mantine-primary-color-filled)" }
+		},
+		children: [/* @__PURE__ */ jsx(Box, {
+			component: Link,
+			href,
+			"aria-hidden": true,
+			tabIndex: -1,
+			pos: "absolute",
+			inset: 0
+		}), children]
+	});
+};
+const LinkCardTitle = ({ href, label }) => /* @__PURE__ */ jsx(Anchor, {
+	component: Link,
+	href,
+	fw: 600,
+	title: `Open ${label}`,
+	style: INTERACTIVE_LAYER,
+	children: /* @__PURE__ */ jsxs(Group, {
+		gap: 4,
+		wrap: "nowrap",
+		children: [/* @__PURE__ */ jsx(Text, {
+			inherit: true,
+			truncate: "end",
+			children: label
+		}), /* @__PURE__ */ jsx(ChevronRightIcon, {
+			size: 16,
+			style: { flexShrink: 0 }
+		})]
+	})
+});
+const LinkCardDescription = ({ description }) => /* @__PURE__ */ jsx(Text, {
+	size: "sm",
+	c: "dimmed",
+	mt: "sm",
+	lineClamp: 2,
+	h: "calc(2em * var(--mantine-line-height-sm))",
+	children: description || "No description provided."
+});
+const ResourceTypeBadge = ({ resourceType }) => /* @__PURE__ */ jsx(Badge, {
+	size: "sm",
+	color: generateColor(resourceType),
+	style: { flexShrink: 0 },
+	children: resourceType
+});
+const ResourceTypeOverflowList = ({ resourceTypes, maxRows = 1 }) => /* @__PURE__ */ jsx(OverflowList, {
+	gap: 6,
+	maxRows,
+	data: resourceTypes,
+	renderItem: (resourceType) => /* @__PURE__ */ jsx(ResourceTypeBadge, { resourceType }, resourceType),
+	renderOverflow: (hiddenTypes) => /* @__PURE__ */ jsx(Tooltip, {
+		withArrow: true,
+		label: /* @__PURE__ */ jsx(Stack, {
+			gap: 4,
+			children: hiddenTypes.map((resourceType) => /* @__PURE__ */ jsx(ResourceTypeBadge, { resourceType }, resourceType))
+		}),
+		children: /* @__PURE__ */ jsxs(Badge, {
+			size: "sm",
+			variant: "default",
+			style: {
+				...INTERACTIVE_LAYER,
+				flexShrink: 0
+			},
+			children: ["+", hiddenTypes.length]
+		})
+	})
+});
+const getResourceTypes = (ios) => Array.from(new Set(ios.map((io) => io.type === "ocel" ? "OCEL" : io.resource_label)));
+const IOColumn = ({ label, resourceTypes }) => /* @__PURE__ */ jsxs(Stack, {
+	gap: 6,
+	flex: 1,
+	miw: 0,
+	children: [/* @__PURE__ */ jsx(Text, {
+		size: "xs",
+		fw: 600,
+		tt: "uppercase",
+		c: "dimmed",
+		children: label
+	}), resourceTypes.length > 0 ? /* @__PURE__ */ jsx(ResourceTypeOverflowList, {
+		resourceTypes,
+		maxRows: 2
+	}) : /* @__PURE__ */ jsx(Text, {
+		size: "xs",
+		c: "dimmed",
+		children: "None"
+	})]
+});
+const MethodCard = ({ pluginId, method }) => {
+	const href = getModuleRoute({
+		moduleName: "plugins",
+		routeName: "plugins",
+		query: {
+			pluginId,
+			methodName: method.name
+		}
+	});
+	return /* @__PURE__ */ jsxs(LinkCard, {
+		href,
+		height: 240,
 		children: [
+			/* @__PURE__ */ jsx(LinkCardTitle, {
+				href,
+				label: method.label ?? method.name
+			}),
+			/* @__PURE__ */ jsx(LinkCardDescription, { description: method.description }),
 			/* @__PURE__ */ jsxs(Group, {
-				justify: "space-between",
+				mt: "auto",
 				align: "start",
 				wrap: "nowrap",
-				children: [/* @__PURE__ */ jsxs(Stack, {
-					gap: "xs",
-					mb: "xs",
-					children: [tags && /* @__PURE__ */ jsx(Group, {
-						gap: "xs",
-						children: tags.map((tag) => /* @__PURE__ */ jsx(Badge, {
-							size: "sm",
-							color: generateColor(tag),
-							children: tag
-						}, tag))
-					}), /* @__PURE__ */ jsxs(Text, {
-						fw: 500,
-						children: [title, version && /* @__PURE__ */ jsx(Text, {
-							ml: "xs",
-							c: "dimmed",
-							component: "span",
-							children: `v${version}`
-						})]
-					})]
-				}), menuItems && /* @__PURE__ */ jsxs(Menu, {
-					width: 200,
-					position: "left",
-					children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, {
-						variant: "transparent",
-						size: "sm",
-						children: /* @__PURE__ */ jsx(EllipsisVertical, {})
-					}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: menuItems })]
-				})]
-			}),
-			/* @__PURE__ */ jsx(Text, {
-				size: "sm",
-				mb: "xs",
-				c: "dimmed",
-				children: description
-			}),
-			link && /* @__PURE__ */ jsx(Button, {
-				mt: "auto",
-				component: Link,
-				variant: "outline",
-				...link
+				gap: "xs",
+				children: [
+					/* @__PURE__ */ jsx(IOColumn, {
+						label: "Input",
+						resourceTypes: getResourceTypes(method.inputs)
+					}),
+					/* @__PURE__ */ jsx(ArrowRightIcon, {
+						size: 16,
+						style: {
+							flexShrink: 0,
+							marginTop: 20,
+							opacity: .5
+						}
+					}),
+					/* @__PURE__ */ jsx(IOColumn, {
+						label: "Output",
+						resourceTypes: getResourceTypes(method.outputs)
+					})
+				]
 			})
 		]
 	});
 };
 //#endregion
 //#region src/pages/PluginPage.tsx
-const MethodCard = ({ method }) => {
-	const { query } = useRouter();
-	const { data: resourceMeta = {} } = useGetResourceMeta();
-	const { data: extensionMeta = {} } = useGetExtensionMeta();
-	const tags = useMemo(() => {
-		const extensions = Object.values(method.input_ocels ?? {}).map(({ extension }) => extension ? extensionMeta[extension]?.label : void 0);
-		const inputResources = Object.values(method.input_resources ?? {}).map(([resourceName]) => resourceMeta[resourceName]?.label ?? resourceName);
-		const resultNames = (method.results ?? []).filter((result) => result.type === "resource").map((result) => resourceMeta[result.resource_type]?.label ?? result.resource_type);
-		return Array.from(/* @__PURE__ */ new Set([
-			...inputResources,
-			...resultNames,
-			...extensions
-		])).filter((tag) => !!tag);
-	}, [
-		resourceMeta,
-		extensionMeta,
-		method
-	]);
-	return /* @__PURE__ */ jsx(GenericCard, {
-		title: method.label ?? method.name,
-		description: method.description ?? "",
-		tags,
-		link: {
-			href: { query: {
-				...query,
-				methodName: method.name
-			} },
-			children: "Run Method"
-		}
-	});
-};
+const matchesSearch = (method, search) => [
+	method.name,
+	method.label,
+	method.description,
+	...[...method.inputs, ...method.outputs].map((io) => io.type === "ocel" ? "OCEL" : io.resource_label)
+].some((value) => value?.toLowerCase().includes(search));
 const PluginPage = ({ pluginId }) => {
 	const { data: plugin } = useGetPlugin(pluginId);
-	const { data: allMethods = [] } = useListDiscoveryMethods();
-	const invalidate = useInvalidate();
-	const onSuccess = () => invalidate(["discoveryMethods"]);
-	const { mutate: disableMethod } = useDisableDiscoveryMethod({ mutation: { onSuccess } });
-	const { mutate: enableMethod } = useEnableDiscoveryMethod({ mutation: { onSuccess } });
-	const discoveryMethods = useMemo(() => allMethods.flatMap((meta) => meta.variants.filter((v) => v.pluginId === pluginId).map((v) => ({
-		name: meta.name,
-		variant: v
-	}))), [allMethods, pluginId]);
-	return /* @__PURE__ */ jsx(Container, {
-		fluid: true,
-		children: /* @__PURE__ */ jsxs(Stack, { children: [
+	const [search, setSearch] = useState("");
+	const filteredMethods = useMemo(() => {
+		const normalizedSearch = search.trim().toLowerCase();
+		return (plugin?.methods ?? []).filter((method) => matchesSearch(method, normalizedSearch));
+	}, [plugin, search]);
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: 0,
+		p: "md",
+		h: "100%",
+		children: [
 			/* @__PURE__ */ jsxs(Stack, {
 				gap: 0,
 				align: "center",
@@ -788,61 +403,59 @@ const PluginPage = ({ pluginId }) => {
 					/* @__PURE__ */ jsx(PluginBreadcrumbs, {}),
 					/* @__PURE__ */ jsxs(Title, {
 						mt: "xs",
-						children: [" ", plugin?.meta.label]
+						children: [" ", plugin?.label]
 					}),
 					/* @__PURE__ */ jsx(Text, {
 						c: "dimmed",
-						children: plugin?.meta.description
+						children: plugin?.description
 					})
 				]
 			}),
-			/* @__PURE__ */ jsx(SimpleGrid, {
-				cols: {
-					base: 1,
-					sm: 2,
-					lg: 4
-				},
-				spacing: {
-					base: 10,
-					sm: "xl"
-				},
-				verticalSpacing: {
-					base: "md",
-					sm: "xl"
-				},
-				children: plugin?.methods.map((method) => /* @__PURE__ */ jsx(MethodCard, {
-					method,
-					pluginId: plugin.id
-				}, method.name))
+			/* @__PURE__ */ jsx(TextInput, {
+				mt: "md",
+				placeholder: "Search methods by name, description or resource type",
+				leftSection: /* @__PURE__ */ jsx(SearchIcon, { size: 16 }),
+				rightSection: search && /* @__PURE__ */ jsx(CloseButton, {
+					size: "sm",
+					"aria-label": "Clear search",
+					onClick: () => setSearch("")
+				}),
+				value: search,
+				onChange: (event) => setSearch(event.currentTarget.value)
 			}),
-			discoveryMethods.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsxs(Stack, {
-				gap: "xs",
-				children: [/* @__PURE__ */ jsx(Title, {
-					order: 4,
-					children: "Discovery Methods"
-				}), discoveryMethods.map(({ name, variant }) => /* @__PURE__ */ jsxs(Group, {
-					justify: "space-between",
-					children: [/* @__PURE__ */ jsxs(Stack, {
-						gap: 0,
-						children: [/* @__PURE__ */ jsx(Text, {
-							fw: 500,
-							children: name
-						}), variant.description && /* @__PURE__ */ jsx(Text, {
-							size: "sm",
-							c: "dimmed",
-							children: variant.description
-						})]
-					}), /* @__PURE__ */ jsx(Switch, {
-						label: "Active in Discovery",
-						checked: variant.enabled ?? true,
-						onChange: (e) => {
-							if (e.currentTarget.checked) enableMethod({ methodId: variant.methodId });
-							else disableMethod({ methodId: variant.methodId });
-						}
-					})]
-				}, variant.methodId))]
-			})] })
-		] })
+			plugin && filteredMethods.length === 0 ? /* @__PURE__ */ jsx(Text, {
+				c: "dimmed",
+				ta: "center",
+				mt: "xl",
+				children: search.trim() ? `No methods match "${search.trim()}".` : "This plugin has no methods."
+			}) : /* @__PURE__ */ jsx(ScrollArea, {
+				flex: 1,
+				mih: 0,
+				mt: "sm",
+				type: "auto",
+				offsetScrollbars: true,
+				children: /* @__PURE__ */ jsx(SimpleGrid, {
+					p: "xs",
+					cols: {
+						base: 1,
+						sm: 2,
+						lg: 3
+					},
+					spacing: {
+						base: 10,
+						sm: "xl"
+					},
+					verticalSpacing: {
+						base: "md",
+						sm: "xl"
+					},
+					children: plugin && filteredMethods.map((method) => /* @__PURE__ */ jsx(MethodCard, {
+						method,
+						pluginId: plugin.id
+					}, method.name))
+				})
+			})
+		]
 	});
 };
 //#endregion
@@ -855,32 +468,140 @@ const PluginUploadSection = ({ onSuccess }) => {
 		accept: ["application/x-zip-compressed", "application/zip"]
 	});
 };
-//#endregion
-//#region src/components/PluginCard/PluginCard.tsx
+const MAX_METHOD_LINKS = 3;
 const PluginCard = ({ plugin }) => {
-	const { description, label, version } = plugin.meta;
+	const { id, description, label, version, methods } = plugin;
 	const { mutate: deletePlugin } = useDeletePlugin();
-	return /* @__PURE__ */ jsx(GenericCard, {
-		title: label,
-		description: description ?? "",
-		version,
-		menuItems: /* @__PURE__ */ jsx(Menu.Item, {
-			leftSection: /* @__PURE__ */ jsx(Trash2Icon, {}),
-			color: "red",
-			fw: "bold",
-			onClick: () => {
-				deletePlugin({ pluginId: plugin.id });
-			},
-			children: "Delete"
-		}),
-		link: {
-			href: getModuleRoute({
-				routeName: "plugins",
-				moduleName: "plugins",
-				query: { pluginId: plugin.id }
+	const resourceTypes = Array.from(new Set(methods.flatMap((method) => [...method.inputs, ...method.outputs].flatMap((io) => io.type === "resource" ? [io.resource_label] : []))));
+	const pluginHref = getModuleRoute({
+		moduleName: "plugins",
+		routeName: "plugins",
+		query: { pluginId: id }
+	});
+	const visibleMethods = methods.slice(0, MAX_METHOD_LINKS);
+	const hiddenCount = methods.length - visibleMethods.length;
+	return /* @__PURE__ */ jsxs(LinkCard, {
+		href: pluginHref,
+		height: 330,
+		children: [
+			/* @__PURE__ */ jsxs(Group, {
+				justify: "space-between",
+				align: "start",
+				wrap: "nowrap",
+				gap: "sm",
+				children: [/* @__PURE__ */ jsxs(Stack, {
+					gap: 0,
+					miw: 0,
+					children: [/* @__PURE__ */ jsx(LinkCardTitle, {
+						href: pluginHref,
+						label
+					}), /* @__PURE__ */ jsxs(Text, {
+						size: "xs",
+						c: "dimmed",
+						children: ["v", version]
+					})]
+				}), /* @__PURE__ */ jsxs(Menu, {
+					width: 160,
+					position: "bottom-end",
+					children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, {
+						variant: "subtle",
+						color: "gray",
+						size: "sm",
+						style: INTERACTIVE_LAYER,
+						children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, { size: 16 })
+					}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: /* @__PURE__ */ jsx(Menu.Item, {
+						leftSection: /* @__PURE__ */ jsx(Trash2Icon, { size: 14 }),
+						color: "red",
+						onClick: () => deletePlugin({ pluginId: id }),
+						children: "Delete"
+					}) })]
+				})]
 			}),
-			children: "View Plugin"
-		}
+			/* @__PURE__ */ jsx(LinkCardDescription, { description }),
+			/* @__PURE__ */ jsx(Divider, {
+				my: "sm",
+				labelPosition: "left",
+				label: /* @__PURE__ */ jsxs(Group, {
+					gap: 6,
+					children: [/* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						fw: 600,
+						tt: "uppercase",
+						children: "Methods"
+					}), /* @__PURE__ */ jsx(Badge, {
+						size: "xs",
+						variant: "light",
+						color: "gray",
+						circle: true,
+						children: methods.length
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsxs(Stack, {
+				gap: 4,
+				flex: 1,
+				children: [visibleMethods.length === 0 ? /* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					c: "dimmed",
+					children: "This plugin has no methods."
+				}) : visibleMethods.map((method) => /* @__PURE__ */ jsx(UnstyledButton, {
+					component: Link,
+					href: getModuleRoute({
+						moduleName: "plugins",
+						routeName: "plugins",
+						query: {
+							pluginId: id,
+							methodName: method.name
+						}
+					}),
+					px: "xs",
+					py: 6,
+					style: {
+						...INTERACTIVE_LAYER,
+						borderRadius: "var(--mantine-radius-sm)"
+					},
+					bg: "var(--mantine-color-default-hover)",
+					children: /* @__PURE__ */ jsxs(Group, {
+						justify: "space-between",
+						wrap: "nowrap",
+						gap: "xs",
+						children: [/* @__PURE__ */ jsx(Text, {
+							size: "sm",
+							truncate: "end",
+							title: method.label,
+							children: method.label ?? method.name
+						}), /* @__PURE__ */ jsx(ChevronRightIcon, {
+							size: 14,
+							style: {
+								flexShrink: 0,
+								opacity: .6
+							}
+						})]
+					})
+				}, method.name)), hiddenCount > 0 && /* @__PURE__ */ jsxs(Anchor, {
+					component: Link,
+					href: pluginHref,
+					size: "xs",
+					mt: 2,
+					style: INTERACTIVE_LAYER,
+					children: [
+						"+",
+						hiddenCount,
+						" more ",
+						hiddenCount === 1 ? "method" : "methods"
+					]
+				})]
+			}),
+			resourceTypes.length > 0 && /* @__PURE__ */ jsxs(Stack, {
+				gap: 6,
+				mt: "sm",
+				children: [/* @__PURE__ */ jsx(Text, {
+					size: "xs",
+					c: "dimmed",
+					children: "Works with"
+				}), /* @__PURE__ */ jsx(ResourceTypeOverflowList, { resourceTypes })]
+			})
+		]
 	});
 };
 const UploadPluginCard = () => {
@@ -902,26 +623,37 @@ const UploadPluginCard = () => {
 			children: /* @__PURE__ */ jsx(PluginUploadSection, { onSuccess: () => setIsModalOpen(false) })
 		}),
 		/* @__PURE__ */ jsx(Card, {
-			shadow: "sm",
-			padding: "lg",
+			component: "button",
 			radius: "md",
-			withBorder: true,
-			h: "100%",
+			h: 330,
 			onClick: () => setIsModalOpen(true),
-			style: { cursor: "pointer" },
+			style: {
+				cursor: "pointer",
+				border: "2px dashed var(--mantine-color-default-border)",
+				background: "transparent"
+			},
 			children: /* @__PURE__ */ jsxs(Stack, {
 				align: "center",
 				justify: "center",
 				h: "100%",
-				children: [/* @__PURE__ */ jsx(ThemeIcon, {
-					size: "xl",
-					variant: "transparent",
-					children: /* @__PURE__ */ jsx(UploadIcon, { size: 50 })
-				}), /* @__PURE__ */ jsx(Text, {
-					fw: "bold",
-					c: "blue.6",
-					children: "Upload Plugin"
-				})]
+				gap: "xs",
+				children: [
+					/* @__PURE__ */ jsx(ThemeIcon, {
+						size: 56,
+						radius: "xl",
+						variant: "light",
+						children: /* @__PURE__ */ jsx(UploadIcon, { size: 26 })
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						fw: 600,
+						children: "Upload plugin"
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						children: ".zip archive — or drop it anywhere on this page"
+					})
+				]
 			})
 		})
 	] });
@@ -931,9 +663,11 @@ const UploadPluginCard = () => {
 const PluginsOverview = () => {
 	const { data: plugins } = usePlugins();
 	return /* @__PURE__ */ jsxs(Stack, {
-		gap: "md",
-		children: [/* @__PURE__ */ jsxs("div", {
-			style: { maxWidth: 720 },
+		gap: "xs",
+		p: "md",
+		h: "100%",
+		children: [/* @__PURE__ */ jsxs(Stack, {
+			gap: 0,
 			children: [/* @__PURE__ */ jsx(Title, {
 				order: 2,
 				children: "Plugin Overview"
@@ -1004,6 +738,11 @@ const PluginRoute = () => {
 	}
 	return /* @__PURE__ */ jsx(PluginsOverview, {});
 };
+var pages_default = defineModuleRoute({
+	name: "plugins",
+	label: "Plugins",
+	component: PluginRoute
+});
 //#endregion
 //#region src/index.ts
 var src_default = defineModule({
@@ -1011,11 +750,7 @@ var src_default = defineModule({
 	description: "Run process mining plugins inside ocelescope",
 	label: "Plugins",
 	authors: [{ name: "Öztürk, Görkem-Emre" }],
-	routes: [defineModuleRoute({
-		name: "plugins",
-		label: "Plugins",
-		component: PluginRoute
-	})],
+	routes: [pages_default],
 	icon: PuzzleIcon
 });
 //#endregion