diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..423830b
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+pnpm-lock.yaml linguist-generated=true
+packages/tauri-plugins/jarvis/permissions/autogenerated linguist-generated=true
diff --git a/apps/desktop/app.d.ts b/apps/desktop/app.d.ts
new file mode 100644
index 0000000..9959563
--- /dev/null
+++ b/apps/desktop/app.d.ts
@@ -0,0 +1,8 @@
+import type { AttributifyAttributes } from "@unocss/preset-attributify"
+
+declare module "svelte/elements" {
+	// eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/no-unused-vars
+	interface HTMLAttributes<T> extends AttributifyAttributes {}
+}
+
+export {}
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 717ed17..b909e8b 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@kksh/desktop",
-	"version": "0.1.9-beta.8",
+	"version": "0.1.10",
 	"description": "",
 	"type": "module",
 	"scripts": {
@@ -15,6 +15,7 @@
 	"license": "MIT",
 	"dependencies": {
 		"@formkit/auto-animate": "^0.8.2",
+		"@huakunshen/comlink": "^4.4.1",
 		"@kksh/extension": "workspace:*",
 		"@kksh/supabase": "workspace:*",
 		"@kksh/ui": "workspace:*",
@@ -27,9 +28,11 @@
 		"lucide-svelte": "^0.454.0",
 		"lz-string": "^1.5.0",
 		"mode-watcher": "^0.4.1",
+		"semver": "^7.6.3",
 		"svelte-radix": "^2.0.1",
 		"svelte-sonner": "^0.3.28",
-		"sveltekit-superforms": "^2.20.0"
+		"sveltekit-superforms": "^2.20.0",
+		"uuid": "^11.0.2"
 	},
 	"devDependencies": {
 		"@kksh/types": "workspace:*",
@@ -42,6 +45,8 @@
 		"@tailwindcss/typography": "^0.5.15",
 		"@tauri-apps/cli": "^2.0.4",
 		"@types/bun": "latest",
+		"@types/semver": "^7.5.8",
+		"@unocss/preset-attributify": "^0.64.0",
 		"autoprefixer": "^10.4.20",
 		"clsx": "^2.1.1",
 		"embla-carousel-svelte": "^8.3.1",
@@ -52,6 +57,7 @@
 		"tailwindcss-animate": "^1.0.7",
 		"tslib": "^2.8.1",
 		"typescript": "^5.6.3",
+		"unocss": "^0.64.0",
 		"vaul-svelte": "^0.3.2",
 		"vite": "^5.4.10"
 	}
diff --git a/apps/desktop/src-tauri/src/utils/server.rs b/apps/desktop/src-tauri/src/utils/server.rs
index 53b161c..c6377f0 100644
--- a/apps/desktop/src-tauri/src/utils/server.rs
+++ b/apps/desktop/src-tauri/src/utils/server.rs
@@ -8,47 +8,14 @@ pub fn tauri_file_server(
     extension_folder_path: PathBuf,
     dist: Option<String>,
 ) -> tauri::http::Response<Vec<u8>> {
-    // let host = request.uri().host().unwrap();
-    // let host_parts: Vec<&str> = host.split(".").collect();
-    // if host_parts.len() != 3 {
-    //     return tauri::http::Response::builder()
-    //         .status(tauri::http::StatusCode::NOT_FOUND)
-    //         .header("Access-Control-Allow-Origin", "*")
-    //         .body("Invalid Host".as_bytes().to_vec())
-    //         .unwrap();
-    // }
-    // expect 3 parts, ext_identifier, dist and ext_type
-    // let ext_identifier = host_parts[0];
-    // let dist = host_parts[1];
-    // let ext_type = host_parts[2]; // ext or dev-ext
-    // let app_state = app.state::<tauri_plugin_jarvis::model::app_state::AppState>();
-    // let app_state: tauri:State<tauri_plugin_jarvis::model::app_state::AppState> = app.state();
-    // let extension_folder_path: Option<PathBuf> = match ext_type {
-    //     "ext" => Some(app_state.extension_path.lock().unwrap().clone()),
-    //     "dev-ext" => app_state.dev_extension_path.lock().unwrap().clone(),
-    //     _ => None,
-    // };
-    // let extension_folder_path = match extension_folder_path {
-    //     Some(path) => path,
-    //     None => {
-    //         return tauri::http::Response::builder()
-    //             .status(tauri::http::StatusCode::NOT_FOUND)
-    //             .header("Access-Control-Allow-Origin", "*")
-    //             .body("Extension Folder Not Found".as_bytes().to_vec())
-    //             .unwrap()
-    //     }
-    // };
-    println!("dist: {:?}", dist);
     let path = &request.uri().path()[1..]; // skip the first /
     let path = urlencoding::decode(path).unwrap().to_string();
     let mut url_file_path = extension_folder_path;
-    // .join(ext_identifier)
     match dist {
         Some(dist) => url_file_path = url_file_path.join(dist),
         None => {}
     }
     url_file_path = url_file_path.join(path);
-    println!("url_file_path: {:?}", url_file_path);
     // check if it's file or directory, if file and exist, return file, if directory, return index.html, if neither, check .html
     if url_file_path.is_file() {
         // println!("1st case url_file_path: {:?}", url_file_path);
diff --git a/apps/desktop/src/lib/cmds/builtin.ts b/apps/desktop/src/lib/cmds/builtin.ts
index e6ee94e..f6b3a01 100644
--- a/apps/desktop/src/lib/cmds/builtin.ts
+++ b/apps/desktop/src/lib/cmds/builtin.ts
@@ -1,7 +1,12 @@
-import { appState } from "@/stores"
+import { appConfig, appState, auth } from "@/stores"
+import { checkUpdateAndInstall } from "@/utils/updater"
 import type { BuiltinCmd } from "@kksh/ui/types"
-import { dev } from "$app/environment"
+import { getVersion } from "@tauri-apps/api/app"
+import { WebviewWindow } from "@tauri-apps/api/webviewWindow"
+import { exit } from "@tauri-apps/plugin-process"
 import { goto } from "$app/navigation"
+import { toast } from "svelte-sonner"
+import { v4 as uuidv4 } from "uuid"
 
 export const builtinCmds: BuiltinCmd[] = [
 	{
@@ -13,58 +18,59 @@ export const builtinCmds: BuiltinCmd[] = [
 			goto("/extension/store")
 		}
 	},
-	// {
-	// 	name: "Sign In",
-	// 	iconifyIcon: "mdi:login-variant",
-	// 	description: "",
-	// 	function: async () => {
-	// 		goto("/auth")
-	// 	}
-	// },
-	// {
-	// 	name: "Sign Out",
-	// 	iconifyIcon: "mdi:logout-variant",
-	// 	description: "",
-	// 	function: async () => {
-	// 		const supabase = useSupabaseClient()
-	// 		supabase.auth.signOut()
-	// 	}
-	// },
-	// {
-	// 	name: "Show Draggable Area",
-	// 	iconifyIcon: "mingcute:move-fill",
-	// 	description: "",
-	// 	function: async () => {
-	// 		// select all html elements with attribute data-tauri-drag-region
-	// 		const elements = document.querySelectorAll("[data-tauri-drag-region]")
-	// 		elements.forEach((el) => {
-	// 			el.classList.add("bg-red-500/30")
-	// 		})
-	// 		setTimeout(() => {
-	// 			elements.forEach((el) => {
-	// 				el.classList.remove("bg-red-500/30")
-	// 			})
-	// 		}, 2_000)
-	// 	}
-	// },
-	// {
-	// 	name: "Add Dev Extension",
-	// 	iconifyIcon: "lineicons:dev",
-	// 	description: "",
-	// 	function: async () => {
-	// 		const appStateStore = useAppStateStore()
-	// 		appStateStore.setSearchTermSync("")
-	// 		goto("/add-dev-ext")
-	// 	}
-	// },
-	// {
-	// 	name: "Kunkun Version",
-	// 	iconifyIcon: "stash:version-solid",
-	// 	description: "",
-	// 	function: async () => {
-	// 		toast.success(`Kunkun Version: ${await getVersion()}`)
-	// 	}
-	// },
+	{
+		name: "Sign In",
+		iconifyIcon: "mdi:login-variant",
+		description: "",
+		function: async () => {
+			goto("/auth")
+		}
+	},
+	{
+		name: "Sign Out",
+		iconifyIcon: "mdi:logout-variant",
+		description: "",
+		function: async () => {
+			auth
+				.signOut()
+				.then(() => toast.success("Signed out"))
+				.catch((err) => toast.error("Failed to sign out: ", { description: err.message }))
+		}
+	},
+	{
+		name: "Show Draggable Area",
+		iconifyIcon: "mingcute:move-fill",
+		description: "",
+		function: async () => {
+			// select all html elements with attribute data-tauri-drag-region
+			const elements = document.querySelectorAll("[data-tauri-drag-region]")
+			elements.forEach((el) => {
+				el.classList.add("bg-red-500/30")
+			})
+			setTimeout(() => {
+				elements.forEach((el) => {
+					el.classList.remove("bg-red-500/30")
+				})
+			}, 2_000)
+		}
+	},
+	{
+		name: "Add Dev Extension",
+		iconifyIcon: "lineicons:dev",
+		description: "",
+		function: async () => {
+			appState.clearSearchTerm()
+			goto("/settings/add-dev-extension")
+		}
+	},
+	{
+		name: "Kunkun Version",
+		iconifyIcon: "stash:version-solid",
+		description: "",
+		function: async () => {
+			toast.success(`Kunkun Version: ${await getVersion()}`)
+		}
+	},
 	{
 		name: "Set Dev Extension Path",
 		iconifyIcon: "lineicons:dev",
@@ -75,52 +81,48 @@ export const builtinCmds: BuiltinCmd[] = [
 			goto("/settings/set-dev-ext-path")
 		}
 	},
-	// {
-	// 	name: "Extension Window Troubleshooter",
-	// 	iconifyIcon: "material-symbols:window-outline",
-	// 	description: "",
-	// 	function: async () => {
-	// 		const appStateStore = useAppStateStore()
-	// 		appStateStore.setSearchTermSync("")
-	// 		// goto("/window-troubleshooter")
-	// 		const winLabel = `main:window-troubleshooter-${uuidv4()}`
-	// 		console.log(winLabel)
-	// 		new WebviewWindow(winLabel, {
-	// 			url: "/window-troubleshooter",
-	// 			title: "Window Troubleshooter"
-	// 		})
-	// 	}
-	// },
-	// {
-	// 	name: "Extension Permission Inspector",
-	// 	iconifyIcon: "hugeicons:inspect-code",
-	// 	description: "",
-	// 	function: async () => {
-	// 		const appStateStore = useAppStateStore()
-	// 		appStateStore.setSearchTermSync("")
-	// 		goto("/ext-permission-inspector")
-	// 	}
-	// },
-	// {
-	// 	name: "Extension Loading Troubleshooter",
-	// 	iconifyIcon: "material-symbols:troubleshoot",
-	// 	description: "",
-	// 	function: async () => {
-	// 		const appStateStore = useAppStateStore()
-	// 		appStateStore.setSearchTermSync("")
-	// 		goto("/extension-load-troubleshooter")
-	// 	}
-	// },
-	// {
-	// 	name: "Create Quicklink",
-	// 	iconifyIcon: "material-symbols:link",
-	// 	description: "Create a Quicklink",
-	// 	function: async () => {
-	// 		const appStateStore = useAppStateStore()
-	// 		appStateStore.setSearchTermSync("")
-	// 		goto("/create-quicklink")
-	// 	}
-	// },
+	{
+		name: "Extension Window Troubleshooter",
+		iconifyIcon: "material-symbols:window-outline",
+		description: "",
+		function: async () => {
+			appState.clearSearchTerm()
+			// goto("/window-troubleshooter")
+			const winLabel = `main:extension-window-troubleshooter-${uuidv4()}`
+			console.log(winLabel)
+			new WebviewWindow(winLabel, {
+				url: "/troubleshooters/extension-window",
+				title: "Extension Window Troubleshooter"
+			})
+		}
+	},
+	{
+		name: "Extension Permission Inspector",
+		iconifyIcon: "hugeicons:inspect-code",
+		description: "",
+		function: async () => {
+			appState.clearSearchTerm()
+			goto("/extension/permission-inspector")
+		}
+	},
+	{
+		name: "Extension Loading Troubleshooter",
+		iconifyIcon: "material-symbols:troubleshoot",
+		description: "",
+		function: async () => {
+			appState.clearSearchTerm()
+			goto("/troubleshooters/extension-loading")
+		}
+	},
+	{
+		name: "Create Quicklink",
+		iconifyIcon: "material-symbols:link",
+		description: "Create a Quicklink",
+		function: async () => {
+			appState.clearSearchTerm()
+			goto("/extension/create-quick-link")
+		}
+	},
 	// {
 	// 	name: "Settings",
 	// 	iconifyIcon: "solar:settings-linear",
@@ -143,30 +145,32 @@ export const builtinCmds: BuiltinCmd[] = [
 	// 		appStateStore.setSearchTermSync("")
 	// 	}
 	// },
-	// {
-	// 	name: "Check Update",
-	// 	iconifyIcon: "material-symbols:update",
-	// 	description: "Check for updates",
-	// 	function: async () => {
-	// 		checkUpdateAndInstall()
-	// 	}
-	// },
-	// {
-	// 	name: "Check Beta Update",
-	// 	iconifyIcon: "material-symbols:update",
-	// 	description: "Check for Beta updates",
-	// 	function: async () => {
-	// 		checkUpdateAndInstall(true)
-	// 	}
-	// },
-	// {
-	// 	name: "Reload",
-	// 	iconifyIcon: "tabler:reload",
-	// 	description: "Reload this page",
-	// 	function: async () => {
-	// 		location.reload()
-	// 	}
-	// },
+	{
+		name: "Check Update",
+		iconifyIcon: "material-symbols:update",
+		description: "Check for updates",
+		function: async () => {
+			checkUpdateAndInstall()
+			appState.clearSearchTerm()
+		}
+	},
+	{
+		name: "Check Beta Update",
+		iconifyIcon: "material-symbols:update",
+		description: "Check for Beta updates",
+		function: async () => {
+			checkUpdateAndInstall({ beta: true })
+			appState.clearSearchTerm()
+		}
+	},
+	{
+		name: "Reload",
+		iconifyIcon: "tabler:reload",
+		description: "Reload this page",
+		function: async () => {
+			location.reload()
+		}
+	},
 	{
 		name: "Dance",
 		iconifyIcon: "mdi:dance-pole",
@@ -174,33 +178,43 @@ export const builtinCmds: BuiltinCmd[] = [
 		function: async () => {
 			goto("/dance")
 		}
+	},
+	{
+		name: "Quit Kunkun",
+		iconifyIcon: "emojione:cross-mark-button",
+		description: "Quit Kunkun",
+		function: async () => {
+			exit(0)
+		}
+	},
+	{
+		name: "Toggle Dev Extension HMR",
+		iconifyIcon: "ri:toggle-line",
+		description: "Load dev extensions from their dev server URLs",
+		function: async () => {
+			appConfig.update((config) => {
+				toast.success(`Dev Extension HMR toggled to: ${!config.hmr}`)
+				return {
+					...config,
+					hmr: !config.hmr
+				}
+			})
+			appState.clearSearchTerm()
+		}
+	},
+	{
+		name: "Toggle Hide On Blur",
+		iconifyIcon: "ri:toggle-line",
+		description: "Toggle Hide On Blur",
+		function: async () => {
+			appConfig.update((config) => {
+				toast.success(`"Hide on Blur" toggled to: ${!config.hideOnBlur}`)
+				return {
+					...config,
+					hideOnBlur: !config.hideOnBlur
+				}
+			})
+			appState.clearSearchTerm()
+		}
 	}
-	// {
-	// 	name: "Quit Kunkun",
-	// 	iconifyIcon: "emojione:cross-mark-button",
-	// 	description: "Quit Kunkun",
-	// 	function: async () => {
-	// 		exit(0)
-	// 	}
-	// },
-	// {
-	// 	name: "Toggle Dev Extension Live Load Mode",
-	// 	iconifyIcon: "ri:toggle-line",
-	// 	description: "Load dev extensions from their dev server URLs",
-	// 	function: async () => {
-	// 		toggleDevExtensionLiveLoadMode()
-	// 	}
-	// },
-	// {
-	// 	name: "Toggle Hide On Blur",
-	// 	iconifyIcon: "ri:toggle-line",
-	// 	description: "Toggle Hide On Blur",
-	// 	function: async () => {
-	// 		const appConfig = useAppConfigStore()
-	// 		appConfig.setHideOnBlur(!appConfig.hideOnBlur)
-	// 		const appStateStore = useAppStateStore()
-	// 		appStateStore.setSearchTermSync("")
-	// 		toast.success(`"Hide on Blur" toggled to: ${appConfig.hideOnBlur}`)
-	// 	}
-	// }
 ]
diff --git a/apps/desktop/src/lib/cmds/ext.ts b/apps/desktop/src/lib/cmds/ext.ts
index 68fb4b6..1aede5c 100644
--- a/apps/desktop/src/lib/cmds/ext.ts
+++ b/apps/desktop/src/lib/cmds/ext.ts
@@ -1,14 +1,12 @@
+import { appState } from "@/stores"
 import { winExtMap } from "@/stores/winExtMap"
 import { trimSlash } from "@/utils/url"
 import { constructExtensionSupportDir } from "@kksh/api"
-import { CmdTypeEnum, CustomUiCmd, ExtPackageJsonExtra, TemplateUiCmd } from "@kksh/api/models"
+import { CustomUiCmd, ExtPackageJsonExtra, TemplateUiCmd } from "@kksh/api/models"
 import { launchNewExtWindow } from "@kksh/extension"
 import { convertFileSrc } from "@tauri-apps/api/core"
-import { WebviewWindow } from "@tauri-apps/api/webviewWindow"
 import * as fs from "@tauri-apps/plugin-fs"
-import { debug } from "@tauri-apps/plugin-log"
 import { goto } from "$app/navigation"
-import * as v from "valibot"
 
 export async function createExtSupportDir(extPath: string) {
 	const extSupportDir = await constructExtensionSupportDir(extPath)
@@ -23,7 +21,19 @@ export async function onTemplateUiCmdSelect(
 	{ isDev, hmr }: { isDev: boolean; hmr: boolean }
 ) {
 	await createExtSupportDir(ext.extPath)
-	console.log("onTemplateUiCmdSelect", ext, cmd, isDev, hmr)
+	// console.log("onTemplateUiCmdSelect", ext, cmd, isDev, hmr)
+	const url = `/extension/ui-worker?extPath=${encodeURIComponent(ext.extPath)}&cmdName=${encodeURIComponent(cmd.name)}`
+	if (cmd.window) {
+		const winLabel = await winExtMap.registerExtensionWithWindow({ extPath: ext.extPath })
+		const window = launchNewExtWindow(winLabel, url, cmd.window)
+		window.onCloseRequested(async (event) => {
+			await winExtMap.unregisterExtensionFromWindow(winLabel)
+		})
+	} else {
+		return winExtMap
+			.registerExtensionWithWindow({ windowLabel: "main", extPath: ext.extPath })
+			.then(() => goto(url))
+	}
 }
 
 export async function onCustomUiCmdSelect(
@@ -31,7 +41,7 @@ export async function onCustomUiCmdSelect(
 	cmd: CustomUiCmd,
 	{ isDev, hmr }: { isDev: boolean; hmr: boolean }
 ) {
-	console.log("onCustomUiCmdSelect", ext, cmd, isDev, hmr)
+	// console.log("onCustomUiCmdSelect", ext, cmd, isDev, hmr)
 	await createExtSupportDir(ext.extPath)
 	let url = cmd.main
 
@@ -48,14 +58,14 @@ export async function onCustomUiCmdSelect(
 		})
 		console.log("Launch new window, ", winLabel)
 		const window = launchNewExtWindow(winLabel, url2, cmd.window)
+		window.onCloseRequested(async (event) => {
+			await winExtMap.unregisterExtensionFromWindow(winLabel)
+		})
 	} else {
 		console.log("Launch main window")
 		return winExtMap
-			.registerExtensionWithWindow({
-				windowLabel: "main",
-				extPath: ext.extPath,
-				dist: cmd.dist
-			})
+			.registerExtensionWithWindow({ windowLabel: "main", extPath: ext.extPath, dist: cmd.dist })
 			.then(() => goto(url2))
 	}
+	appState.clearSearchTerm()
 }
diff --git a/apps/desktop/src/lib/cmds/index.ts b/apps/desktop/src/lib/cmds/index.ts
index 3efc68d..a845ef1 100644
--- a/apps/desktop/src/lib/cmds/index.ts
+++ b/apps/desktop/src/lib/cmds/index.ts
@@ -2,6 +2,7 @@ import { CmdTypeEnum, CustomUiCmd, ExtPackageJsonExtra, TemplateUiCmd } from "@k
 import type { CommandLaunchers, OnExtCmdSelect } from "@kksh/ui/types"
 import * as v from "valibot"
 import { onCustomUiCmdSelect, onTemplateUiCmdSelect } from "./ext"
+import { onQuickLinkSelect } from "./quick-links"
 
 const onExtCmdSelect: OnExtCmdSelect = (
 	ext: ExtPackageJsonExtra,
@@ -20,4 +21,4 @@ const onExtCmdSelect: OnExtCmdSelect = (
 	}
 }
 
-export const commandLaunchers = { onExtCmdSelect } satisfies CommandLaunchers
+export const commandLaunchers = { onExtCmdSelect, onQuickLinkSelect } satisfies CommandLaunchers
diff --git a/apps/desktop/src/lib/cmds/quick-links.ts b/apps/desktop/src/lib/cmds/quick-links.ts
new file mode 100644
index 0000000..43662a4
--- /dev/null
+++ b/apps/desktop/src/lib/cmds/quick-links.ts
@@ -0,0 +1,25 @@
+import { appState } from "@/stores"
+import type { CmdQuery, CmdValue } from "@kksh/ui/types"
+import { open } from "tauri-plugin-shellx-api"
+
+/**
+ * Given some link like https://google.com/search?q={argument}&query={query}
+ * Find {argument} and {query}
+ */
+export function findAllArgsInLink(link: string): string[] {
+	const regex = /\{([^}]+)\}/g
+	const matches = [...link.matchAll(regex)]
+	return matches.map((match) => match[1])
+}
+
+export function onQuickLinkSelect(quickLink: CmdValue, queries: CmdQuery[]) {
+	console.log(quickLink, queries)
+	let qlink = quickLink.data
+	for (const arg of queries) {
+		console.log(`replace all {${arg.name}} with ${arg.value}`)
+		qlink = qlink.replaceAll(`{${arg.name}}`, arg.value)
+	}
+	appState.clearSearchTerm()
+	console.log(qlink)
+	open(qlink)
+}
diff --git a/apps/desktop/src/lib/cmds/system.ts b/apps/desktop/src/lib/cmds/system.ts
new file mode 100644
index 0000000..cd7221f
--- /dev/null
+++ b/apps/desktop/src/lib/cmds/system.ts
@@ -0,0 +1,4 @@
+import { getSystemCommands } from "@kksh/api/commands"
+import type { SysCommand } from "@kksh/api/models"
+
+export const systemCommands: SysCommand[] = getSystemCommands()
diff --git a/apps/desktop/src/lib/components/common/DragNDrop.svelte b/apps/desktop/src/lib/components/common/DragNDrop.svelte
new file mode 100644
index 0000000..c74dbce
--- /dev/null
+++ b/apps/desktop/src/lib/components/common/DragNDrop.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { listen, TauriEvent, type UnlistenFn } from "@tauri-apps/api/event"
+	import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
+	import { onDestroy, onMount, type Snippet } from "svelte"
+
+	let unlisteners: UnlistenFn[] = []
+	const {
+		children,
+		onEnter,
+		onDrop,
+		onCancelled,
+		onOver
+	}: {
+		children: Snippet
+		onEnter?: (event: any) => void
+		onDrop?: (event: any) => void
+		onCancelled?: (event: any) => void
+		onOver?: (event: any) => void
+	} = $props()
+	const appWin = getCurrentWebviewWindow()
+
+	onMount(async () => {
+		if (onEnter) await appWin.listen(TauriEvent.DRAG_ENTER, onEnter)
+		if (onDrop) await appWin.listen(TauriEvent.DRAG_DROP, onDrop)
+		if (onCancelled) await appWin.listen(TauriEvent.DRAG_LEAVE, onCancelled)
+		if (onOver) await appWin.listen(TauriEvent.DRAG_OVER, onOver)
+	})
+
+	onDestroy(() => {
+		for (const unlisten of unlisteners) {
+			unlisten()
+		}
+	})
+</script>
+
+<span>
+	{@render children()}
+</span>
diff --git a/apps/desktop/src/lib/components/main/CommandPalette.svelte b/apps/desktop/src/lib/components/main/CommandPalette.svelte
deleted file mode 100644
index 8e117e4..0000000
--- a/apps/desktop/src/lib/components/main/CommandPalette.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<!-- This file renders the main command palette, a list of commands -->
-<!-- This is not placed in @kksh/ui because it depends on the app config and is very complex, 
-passing everything through props will be very complicated and hard to maintain.
--->
-<script lang="ts">
-	import { devStoreExts, installedStoreExts } from "@/stores"
-	import type { ExtPackageJsonExtra } from "@kksh/api/models"
-	import { isExtPathInDev } from "@kksh/extension/utils"
-	import { Command } from "@kksh/svelte5"
-	import type { AppConfig, AppState } from "@kksh/types"
-	import {
-		BuiltinCmds,
-		CustomCommandInput,
-		ExtCmdsGroup,
-		GlobalCommandPaletteFooter
-	} from "@kksh/ui/main"
-	import type { BuiltinCmd, CommandLaunchers } from "@kksh/ui/types"
-	import { cn } from "@kksh/ui/utils"
-	import type { Writable } from "svelte/store"
-
-	const {
-		extensions,
-		appConfig,
-		class: className,
-		commandLaunchers,
-		appState,
-		builtinCmds
-	}: {
-		extensions: ExtPackageJsonExtra[]
-		appConfig: Writable<AppConfig>
-		class?: string
-		commandLaunchers: CommandLaunchers
-		appState: Writable<AppState>
-		builtinCmds: BuiltinCmd[]
-	} = $props()
-</script>
-
-<Command.Root
-	class={cn("rounded-lg border shadow-md", className)}
-	bind:value={$appState.highlightedCmd}
-	loop
->
-	<CustomCommandInput
-		autofocus
-		placeholder="Type a command or search..."
-		bind:value={$appState.searchTerm}
-	/>
-	<Command.List class="max-h-screen grow">
-		<Command.Empty data-tauri-drag-region>No results found.</Command.Empty>
-		<BuiltinCmds {builtinCmds} />
-		{#if $appConfig.extensionPath && $devStoreExts.length > 0}
-			<ExtCmdsGroup
-				extensions={$devStoreExts}
-				heading="Dev Extensions"
-				isDev={true}
-				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
-				hmr={$appConfig.hmr}
-			/>
-		{/if}
-		{#if $appConfig.extensionPath && $installedStoreExts.length > 0}
-			<ExtCmdsGroup
-				extensions={$installedStoreExts}
-				heading="Extensions"
-				isDev={false}
-				hmr={false}
-				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
-			/>
-		{/if}
-		<Command.Separator />
-	</Command.List>
-	<GlobalCommandPaletteFooter />
-</Command.Root>
diff --git a/apps/desktop/src/lib/components/standalone/settings/AddDevExtForm.svelte b/apps/desktop/src/lib/components/standalone/settings/AddDevExtForm.svelte
new file mode 100644
index 0000000..53f66d3
--- /dev/null
+++ b/apps/desktop/src/lib/components/standalone/settings/AddDevExtForm.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+	import DragNDrop from "@/components/common/DragNDrop.svelte"
+	import DevExtPathForm from "@/components/standalone/settings/DevExtPathForm.svelte"
+	import { appConfig, extensions } from "@/stores"
+	import { goBackOnEscape } from "@/utils/key"
+	import { goBack } from "@/utils/route"
+	import { IconEnum } from "@kksh/api/models"
+	import * as extAPI from "@kksh/extension"
+	import { installFromNpmPackageName } from "@kksh/extension"
+	import { Button, Card } from "@kksh/svelte5"
+	import { cn } from "@kksh/svelte5/utils"
+	import { IconMultiplexer, Layouts, StrikeSeparator } from "@kksh/ui"
+	import { open as openFileSelector } from "@tauri-apps/plugin-dialog"
+	import * as fs from "@tauri-apps/plugin-fs"
+	import { enhance } from "$app/forms"
+	import { goto } from "$app/navigation"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import { toast } from "svelte-sonner"
+	import * as v from "valibot"
+	import InstallNpmPackageNameForm from "./install-npm-package-name-form.svelte"
+	import InstallTarballUrlForm from "./install-tarball-url-form.svelte"
+
+	let dragging = $state(false)
+
+	async function handleDragNDropInstall(paths: string[]) {
+		dragging = false
+		console.log(paths)
+		for (const path of paths) {
+			const stat = await fs.stat(path)
+			if (await stat.isDirectory) {
+				await extensions
+					.installDevExtensionDir(path)
+					.then((ext) => {
+						toast.success("Success", {
+							description: `Extension from ${ext.extPath} installed successfully`
+						})
+					})
+					.catch((err) => {
+						toast.warning("Failed to install extension", { description: err })
+					})
+			} else if (await stat.isFile) {
+				if (!$appConfig.devExtensionPath) {
+					toast.warning(
+						"Please set the dev extension path in the settings to install tarball extension"
+					)
+					continue
+				}
+				await extensions
+					.installTarball(path, $appConfig.devExtensionPath)
+					.then((ext) => {
+						toast.success("Success", {
+							description: `Extension from ${path} installed successfully`
+						})
+					})
+					.catch((err) => {
+						toast.warning("Failed to install extension", { description: err })
+					})
+			} else {
+				toast.warning(`Unsupported file type: ${path}`)
+			}
+			// await installDevExtensionDir(path)
+		}
+	}
+
+	async function pickExtFolders() {
+		const selected = await openFileSelector({
+			directory: true,
+			multiple: true // allow install multiple extensions at once
+		})
+		if (!selected) {
+			return toast.warning("No File Selected")
+		}
+		for (const dir of selected) {
+			await extensions
+				.installDevExtensionDir(dir)
+				.then((ext) => {
+					toast.success("Success", {
+						description: `Extension from ${ext.extPath} installed successfully`
+					})
+				})
+				.catch((err) => {
+					toast.warning("Failed to install extension", { description: err })
+				})
+		}
+	}
+
+	async function pickExtFiles() {
+		if (!$appConfig.devExtensionPath) {
+			toast.warning("Please set the dev extension path in the settings")
+			return goto("/settings/set-dev-ext-path")
+		}
+		const selected = await openFileSelector({
+			directory: false,
+			multiple: true, // allow install multiple extensions at once
+			filters: [
+				{
+					name: "tarball file",
+					extensions: ["tgz", "gz", "kunkun"]
+				}
+			]
+		})
+		if (!selected) {
+			return toast.warning("No File Selected")
+		}
+		console.log(selected)
+		for (const tarballPath of selected) {
+			await extensions.installTarball(tarballPath, $appConfig.devExtensionPath)
+		}
+	}
+</script>
+
+<div class="flex justify-center gap-3">
+	<Button size="sm" onclick={pickExtFolders}>Install from Extension Folders</Button>
+	<Button size="sm" onclick={pickExtFiles}>Install from Extension Tarball File</Button>
+</div>
+
+<StrikeSeparator class="my-1">
+	<h3 class="text-muted-foreground font-mono text-sm">Drag and Drop</h3>
+</StrikeSeparator>
+
+<Layouts.Center>
+	<DragNDrop
+		onDrop={(e) => {
+			handleDragNDropInstall(e.payload.paths)
+		}}
+		onEnter={() => (dragging = true)}
+		onCancelled={() => (dragging = false)}
+	>
+		<Card.Root
+			class={cn("h-36 w-96", dragging ? "border-lime-400/30" : "text-white hover:text-blue-200")}
+		>
+			<div class="flex h-full cursor-pointer items-center justify-center">
+				<div class={cn("flex flex-col items-center", dragging ? "text-lime-400/70" : "")}>
+					<IconMultiplexer
+						icon={{ value: "mdi:folder-cog-outline", type: IconEnum.Iconify }}
+						class="h-10 w-10"
+					/>
+					<small class="select-none font-mono text-xs">Drag and Drop</small>
+					<small class="select-none font-mono text-xs">Extension Folder or Tarball</small>
+				</div>
+			</div>
+		</Card.Root>
+	</DragNDrop>
+</Layouts.Center>
+<StrikeSeparator class="my-1">
+	<h3 class="text-muted-foreground font-mono text-sm">Install Tarball From URL</h3>
+</StrikeSeparator>
+<InstallTarballUrlForm />
+<InstallNpmPackageNameForm />
diff --git a/apps/desktop/src/lib/components/standalone/settings/install-npm-package-name-form.svelte b/apps/desktop/src/lib/components/standalone/settings/install-npm-package-name-form.svelte
new file mode 100644
index 0000000..4cb78b5
--- /dev/null
+++ b/apps/desktop/src/lib/components/standalone/settings/install-npm-package-name-form.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { appConfig, extensions } from "@/stores"
+	import { Input } from "@kksh/svelte5"
+	import { Form } from "@kksh/ui"
+	import { goto } from "$app/navigation"
+	import { toast } from "svelte-sonner"
+	import SuperDebug, { defaults, superForm } from "sveltekit-superforms"
+	import { valibot, valibotClient } from "sveltekit-superforms/adapters"
+	import * as v from "valibot"
+
+	const npmPackageNameFormSchema = v.object({
+		name: v.pipe(v.string(), v.minLength(1))
+	})
+
+	async function onNpmPackageNameSubmit(data: v.InferOutput<typeof npmPackageNameFormSchema>) {
+		if (!$appConfig.devExtensionPath) {
+			toast.warning(
+				"Please set the dev extension path in the settings to install tarball extension"
+			)
+			return goto("/settings/set-dev-ext-path")
+		}
+		await extensions
+			.installFromNpmPackageName(data.name, $appConfig.devExtensionPath)
+			.then(() => {
+				toast.success("Success", { description: "Extension installed successfully" })
+			})
+			.catch((err) => {
+				toast.warning("Failed to install extension", { description: err })
+			})
+	}
+
+	const form = superForm(defaults(valibot(npmPackageNameFormSchema)), {
+		validators: valibotClient(npmPackageNameFormSchema),
+		SPA: true,
+		onUpdate({ form, cancel }) {
+			if (!form.valid) {
+				console.log("invalid")
+				return
+			}
+			console.log(form.data)
+			onNpmPackageNameSubmit(form.data)
+			cancel()
+		}
+	})
+
+	const { form: formData, enhance, errors } = form
+</script>
+
+<form method="POST" use:enhance>
+	<Form.Field {form} name="name">
+		<Form.Control>
+			{#snippet children({ props })}
+				<flex items-center gap-2>
+					<Input {...props} bind:value={$formData.name} placeholder="NPM Package Name" />
+					<Form.Button class="my-1">Install</Form.Button>
+				</flex>
+			{/snippet}
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+</form>
diff --git a/apps/desktop/src/lib/components/standalone/settings/install-tarball-url-form.svelte b/apps/desktop/src/lib/components/standalone/settings/install-tarball-url-form.svelte
new file mode 100644
index 0000000..a950a64
--- /dev/null
+++ b/apps/desktop/src/lib/components/standalone/settings/install-tarball-url-form.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { appConfig, extensions } from "@/stores"
+	import { Input } from "@kksh/svelte5"
+	import { Form } from "@kksh/ui"
+	import { goto } from "$app/navigation"
+	import { toast } from "svelte-sonner"
+	import SuperDebug, { defaults, superForm } from "sveltekit-superforms"
+	import { valibot, valibotClient } from "sveltekit-superforms/adapters"
+	import * as v from "valibot"
+
+	const urlFormSchema = v.object({
+		url: v.pipe(v.string(), v.url())
+	})
+
+	async function onUrlSubmit(data: v.InferOutput<typeof urlFormSchema>) {
+		// data.url
+		// https://storage.huakun.tech/vscode-0.0.6.tgz
+		if (!$appConfig.devExtensionPath) {
+			toast.warning(
+				"Please set the dev extension path in the settings to install tarball extension"
+			)
+			return goto("/settings/set-dev-ext-path")
+		}
+		await extensions
+			.installFromTarballUrl(data.url, $appConfig.devExtensionPath)
+			.then(() => {
+				toast.success("Sucecss", { description: "Extension installed successfully" })
+			})
+			.catch((err) => {
+				toast.warning("Failed to install extension", { description: err })
+			})
+	}
+
+	const form = superForm(defaults(valibot(urlFormSchema)), {
+		validators: valibotClient(urlFormSchema),
+		SPA: true,
+		onUpdate({ form, cancel }) {
+			if (!form.valid) {
+				console.log("invalid")
+				return
+			}
+			console.log(form.data)
+			onUrlSubmit(form.data)
+			cancel()
+		}
+	})
+	const { form: formData, enhance, errors } = form
+</script>
+
+<form method="POST" use:enhance>
+	<Form.Field {form} name="url">
+		<Form.Control>
+			{#snippet children({ props })}
+				<flex items-center gap-2>
+					<Input {...props} bind:value={$formData.url} placeholder="Tarball URL" />
+					<Form.Button class="my-1">Install</Form.Button>
+				</flex>
+			{/snippet}
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+</form>
diff --git a/apps/desktop/src/lib/stores/appConfig.ts b/apps/desktop/src/lib/stores/appConfig.ts
index aa50558..78ebcd0 100644
--- a/apps/desktop/src/lib/stores/appConfig.ts
+++ b/apps/desktop/src/lib/stores/appConfig.ts
@@ -1,12 +1,10 @@
 import { getExtensionsFolder } from "@/constants"
-import { themeConfigStore, updateTheme, type ThemeConfig } from "@kksh/svelte5"
+import { createTauriSyncStore, type WithSyncStore } from "@/utils/sync-store"
+import { updateTheme, type ThemeConfig } from "@kksh/svelte5"
 import { PersistedAppConfig, type AppConfig } from "@kksh/types"
-import * as path from "@tauri-apps/api/path"
-import { remove } from "@tauri-apps/plugin-fs"
 import { debug, error } from "@tauri-apps/plugin-log"
 import * as os from "@tauri-apps/plugin-os"
 import { load } from "@tauri-apps/plugin-store"
-import { get, writable, type Writable } from "svelte/store"
 import * as v from "valibot"
 
 export const defaultAppConfig: AppConfig = {
@@ -21,7 +19,7 @@ export const defaultAppConfig: AppConfig = {
 	launchAtLogin: true,
 	showInTray: true,
 	devExtensionPath: null,
-	extensionPath: undefined,
+	extensionsInstallDir: undefined,
 	hmr: false,
 	hideOnBlur: true,
 	extensionAutoUpgrade: true,
@@ -35,25 +33,22 @@ interface AppConfigAPI {
 	setDevExtensionPath: (devExtensionPath: string | null) => void
 }
 
-function createAppConfig(): Writable<AppConfig> & AppConfigAPI {
-	const { subscribe, update, set } = writable<AppConfig>(defaultAppConfig)
+function createAppConfig(): WithSyncStore<AppConfig> & AppConfigAPI {
+	const store = createTauriSyncStore("app-config", defaultAppConfig)
 
 	async function init() {
 		debug("Initializing app config")
-		const appDataDir = await path.appDataDir()
-		// const appConfigPath = await path.join(appDataDir, "appConfig.json")
-		// debug(`appConfigPath: ${appConfigPath}`)
 		const persistStore = await load("kk-config.json", { autoSave: true })
 		const loadedConfig = await persistStore.get("config")
 		const parseRes = v.safeParse(PersistedAppConfig, loadedConfig)
 		if (parseRes.success) {
 			console.log("Parse Persisted App Config Success", parseRes.output)
-			const extensionPath = await path.join(appDataDir, "extensions")
-			update((config) => ({
+			const extensionsInstallDir = await getExtensionsFolder()
+			store.update((config) => ({
 				...config,
 				...parseRes.output,
 				isInitialized: true,
-				extensionPath,
+				extensionsInstallDir,
 				platform: os.platform()
 			}))
 		} else {
@@ -63,7 +58,7 @@ function createAppConfig(): Writable<AppConfig> & AppConfigAPI {
 			await persistStore.set("config", v.parse(PersistedAppConfig, defaultAppConfig))
 		}
 
-		subscribe(async (config) => {
+		store.subscribe(async (config) => {
 			console.log("Saving app config", config)
 			await persistStore.set("config", config)
 			updateTheme(config.theme)
@@ -71,15 +66,13 @@ function createAppConfig(): Writable<AppConfig> & AppConfigAPI {
 	}
 
 	return {
-		setTheme: (theme: ThemeConfig) => update((config) => ({ ...config, theme })),
+		...store,
+		setTheme: (theme: ThemeConfig) => store.update((config) => ({ ...config, theme })),
 		setDevExtensionPath: (devExtensionPath: string | null) => {
 			console.log("setDevExtensionPath", devExtensionPath)
-			update((config) => ({ ...config, devExtensionPath }))
+			store.update((config) => ({ ...config, devExtensionPath }))
 		},
-		init,
-		subscribe,
-		update,
-		set
+		init
 	}
 }
 
diff --git a/apps/desktop/src/lib/stores/appState.ts b/apps/desktop/src/lib/stores/appState.ts
index aaaf45d..d45c87a 100644
--- a/apps/desktop/src/lib/stores/appState.ts
+++ b/apps/desktop/src/lib/stores/appState.ts
@@ -1,26 +1,42 @@
-import type { AppState } from "@/types"
-import { get, writable, type Writable } from "svelte/store"
+import { findAllArgsInLink } from "@/cmds/quick-links"
+import { Action as ActionSchema, CmdTypeEnum } from "@kksh/api/models"
+import type { AppState } from "@kksh/types"
+import type { CmdValue } from "@kksh/ui/types"
+import { derived, get, writable, type Writable } from "svelte/store"
 
 export const defaultAppState: AppState = {
 	searchTerm: "",
-	highlightedCmd: ""
+	highlightedCmd: "",
+	loadingBar: false,
+	defaultAction: "",
+	actionPanel: undefined
 }
 
 interface AppStateAPI {
 	clearSearchTerm: () => void
 	get: () => AppState
+	setLoadingBar: (loadingBar: boolean) => void
+	setDefaultAction: (defaultAction: string) => void
+	setActionPanel: (actionPanel?: ActionSchema.ActionPanel) => void
 }
 
 function createAppState(): Writable<AppState> & AppStateAPI {
 	const store = writable<AppState>(defaultAppState)
 
 	return {
-		subscribe: store.subscribe,
-		update: store.update,
-		set: store.set,
+		...store,
 		get: () => get(store),
 		clearSearchTerm: () => {
 			store.update((state) => ({ ...state, searchTerm: "" }))
+		},
+		setLoadingBar: (loadingBar: boolean) => {
+			store.update((state) => ({ ...state, loadingBar }))
+		},
+		setDefaultAction: (defaultAction: string) => {
+			store.update((state) => ({ ...state, defaultAction }))
+		},
+		setActionPanel: (actionPanel?: ActionSchema.ActionPanel) => {
+			store.update((state) => ({ ...state, actionPanel }))
 		}
 	}
 }
diff --git a/apps/desktop/src/lib/stores/auth.ts b/apps/desktop/src/lib/stores/auth.ts
new file mode 100644
index 0000000..c88e3bd
--- /dev/null
+++ b/apps/desktop/src/lib/stores/auth.ts
@@ -0,0 +1,47 @@
+import { supabase } from "@/supabase"
+import type { AuthError, Session, User } from "@supabase/supabase-js"
+import { get, writable, type Writable } from "svelte/store"
+
+type State = { session: Session | null; user: User | null }
+
+interface AuthAPI {
+	get: () => State
+	refresh: () => Promise<void>
+	signOut: () => Promise<{ error: AuthError | null }>
+	signInExchange: (code: string) => Promise<{ error: AuthError | null }>
+}
+
+function createAuth(): Writable<State> & AuthAPI {
+	const store = writable<State>({ session: null, user: null })
+	async function refresh() {
+		const {
+			data: { session },
+			error
+		} = await supabase.auth.getSession()
+		const {
+			data: { user }
+		} = await supabase.auth.getUser()
+		store.update((state) => ({ ...state, session, user }))
+	}
+	async function signOut() {
+		return supabase.auth.signOut().then((res) => {
+			refresh()
+			return res
+		})
+	}
+	async function signInExchange(code: string) {
+		return supabase.auth.exchangeCodeForSession(code).then((res) => {
+			refresh()
+			return res
+		})
+	}
+	return {
+		...store,
+		get: () => get(store),
+		refresh,
+		signOut,
+		signInExchange
+	}
+}
+
+export const auth = createAuth()
diff --git a/apps/desktop/src/lib/stores/cmdQuery.ts b/apps/desktop/src/lib/stores/cmdQuery.ts
new file mode 100644
index 0000000..18bcb01
--- /dev/null
+++ b/apps/desktop/src/lib/stores/cmdQuery.ts
@@ -0,0 +1,23 @@
+import { findAllArgsInLink } from "@/cmds/quick-links"
+import { CmdTypeEnum } from "@kksh/api/models"
+import type { CmdQuery, CmdValue } from "@kksh/ui/main"
+import { derived, get, writable, type Writable } from "svelte/store"
+import { appState } from "./appState"
+
+function createCmdQueryStore(): Writable<CmdQuery[]> {
+	const store = writable<CmdQuery[]>([])
+	appState.subscribe(($appState) => {
+		if ($appState.highlightedCmd.startsWith("{")) {
+			const parsedCmd = JSON.parse($appState.highlightedCmd) as CmdValue
+			if (parsedCmd.cmdType === CmdTypeEnum.QuickLink && parsedCmd.data) {
+				return store.set(findAllArgsInLink(parsedCmd.data).map((arg) => ({ name: arg, value: "" })))
+			}
+		}
+		store.set([])
+	})
+	return {
+		...store
+	}
+}
+
+export const cmdQueries = createCmdQueryStore()
diff --git a/apps/desktop/src/lib/stores/extensions.ts b/apps/desktop/src/lib/stores/extensions.ts
index 0bcb1a4..770ed2a 100644
--- a/apps/desktop/src/lib/stores/extensions.ts
+++ b/apps/desktop/src/lib/stores/extensions.ts
@@ -10,22 +10,25 @@ import { appConfig } from "./appConfig"
 function createExtensionsStore(): Writable<ExtPackageJsonExtra[]> & {
 	init: () => Promise<void>
 	getExtensionsFromStore: () => ExtPackageJsonExtra[]
+	installTarball: (tarballPath: string, extsDir: string) => Promise<ExtPackageJsonExtra>
+	installDevExtensionDir: (dirPath: string) => Promise<ExtPackageJsonExtra>
 	installFromTarballUrl: (tarballUrl: string, installDir: string) => Promise<ExtPackageJsonExtra>
+	installFromNpmPackageName: (name: string, installDir: string) => Promise<ExtPackageJsonExtra>
 	findStoreExtensionByIdentifier: (identifier: string) => ExtPackageJsonExtra | undefined
 	registerNewExtensionByPath: (extPath: string) => Promise<ExtPackageJsonExtra>
 	uninstallStoreExtensionByIdentifier: (identifier: string) => Promise<ExtPackageJsonExtra>
 	upgradeStoreExtension: (identifier: string, tarballUrl: string) => Promise<ExtPackageJsonExtra>
 } {
-	const { subscribe, update, set } = writable<ExtPackageJsonExtra[]>([])
+	const store = writable<ExtPackageJsonExtra[]>([])
 
 	function init() {
 		return extAPI.loadAllExtensionsFromDb().then((exts) => {
-			set(exts)
+			store.set(exts)
 		})
 	}
 
 	function getExtensionsFromStore() {
-		const extContainerPath = get(appConfig).extensionPath
+		const extContainerPath = get(appConfig).extensionsInstallDir
 		if (!extContainerPath) return []
 		return get(extensions).filter((ext) => !extAPI.isExtPathInDev(extContainerPath, ext.extPath))
 	}
@@ -43,7 +46,7 @@ function createExtensionsStore(): Writable<ExtPackageJsonExtra[]> & {
 		return extAPI
 			.loadExtensionManifestFromDisk(await path.join(extPath, "package.json"))
 			.then((ext) => {
-				update((exts) => {
+				store.update((exts) => {
 					const existingExt = exts.find((e) => e.extPath === ext.extPath)
 					if (existingExt) return exts
 					return [...exts, ext]
@@ -56,12 +59,36 @@ function createExtensionsStore(): Writable<ExtPackageJsonExtra[]> & {
 			})
 	}
 
+	/**
+	 * Install extension from tarball file
+	 * @param tarballPath absolute path to the tarball file
+	 * @param extsDir absolute path to the extensions directory
+	 * @returns loaded extension
+	 */
+	async function installTarball(tarballPath: string, extsDir: string) {
+		return extAPI.installTarballUrl(tarballPath, extsDir).then((extInstallPath) => {
+			return registerNewExtensionByPath(extInstallPath)
+		})
+	}
+
+	async function installDevExtensionDir(dirPath: string) {
+		return extAPI.installDevExtensionDir(dirPath).then((ext) => {
+			return registerNewExtensionByPath(ext.extPath)
+		})
+	}
+
 	async function installFromTarballUrl(tarballUrl: string, extsDir: string) {
 		return extAPI.installTarballUrl(tarballUrl, extsDir).then((extInstallPath) => {
 			return registerNewExtensionByPath(extInstallPath)
 		})
 	}
 
+	async function installFromNpmPackageName(name: string, extsDir: string) {
+		return extAPI.installFromNpmPackageName(name, extsDir).then((extInstallPath) => {
+			return registerNewExtensionByPath(extInstallPath)
+		})
+	}
+
 	async function uninstallExtensionByPath(targetPath: string) {
 		const targetExt = get(extensions).find((ext) => ext.extPath === targetPath)
 		if (!targetExt) throw new Error(`Extension ${targetPath} not registered in DB`)
@@ -69,7 +96,7 @@ function createExtensionsStore(): Writable<ExtPackageJsonExtra[]> & {
 
 		return extAPI
 			.uninstallExtensionByPath(targetPath)
-			.then(() => update((exts) => exts.filter((ext) => ext.extPath !== targetExt.extPath)))
+			.then(() => store.update((exts) => exts.filter((ext) => ext.extPath !== targetExt.extPath)))
 			.then(() => targetExt)
 	}
 
@@ -83,7 +110,7 @@ function createExtensionsStore(): Writable<ExtPackageJsonExtra[]> & {
 		identifier: string,
 		tarballUrl: string
 	): Promise<ExtPackageJsonExtra> {
-		const extsDir = get(appConfig).extensionPath
+		const extsDir = get(appConfig).extensionsInstallDir
 		if (!extsDir) throw new Error("Extension path not set")
 		return uninstallStoreExtensionByIdentifier(identifier).then(() =>
 			installFromTarballUrl(tarballUrl, extsDir)
@@ -91,16 +118,17 @@ function createExtensionsStore(): Writable<ExtPackageJsonExtra[]> & {
 	}
 
 	return {
+		...store,
 		init,
 		getExtensionsFromStore,
 		findStoreExtensionByIdentifier,
 		registerNewExtensionByPath,
+		installTarball,
+		installDevExtensionDir,
 		installFromTarballUrl,
+		installFromNpmPackageName,
 		uninstallStoreExtensionByIdentifier,
-		upgradeStoreExtension,
-		subscribe,
-		update,
-		set
+		upgradeStoreExtension
 	}
 }
 
@@ -109,7 +137,7 @@ export const extensions = createExtensionsStore()
 export const installedStoreExts: Readable<ExtPackageJsonExtra[]> = derived(
 	extensions,
 	($extensionsStore) => {
-		const extContainerPath = get(appConfig).extensionPath
+		const extContainerPath = get(appConfig).extensionsInstallDir
 		if (!extContainerPath) return []
 		return $extensionsStore.filter((ext) => !extAPI.isExtPathInDev(extContainerPath, ext.extPath))
 	}
@@ -117,7 +145,7 @@ export const installedStoreExts: Readable<ExtPackageJsonExtra[]> = derived(
 export const devStoreExts: Readable<ExtPackageJsonExtra[]> = derived(
 	extensions,
 	($extensionsStore) => {
-		const extContainerPath = get(appConfig).extensionPath
+		const extContainerPath = get(appConfig).extensionsInstallDir
 		if (!extContainerPath) return []
 		return $extensionsStore.filter((ext) => extAPI.isExtPathInDev(extContainerPath, ext.extPath))
 	}
diff --git a/apps/desktop/src/lib/stores/index.ts b/apps/desktop/src/lib/stores/index.ts
index daaa348..141acbc 100644
--- a/apps/desktop/src/lib/stores/index.ts
+++ b/apps/desktop/src/lib/stores/index.ts
@@ -2,3 +2,5 @@ export * from "./appConfig"
 export * from "./appState"
 export * from "./winExtMap"
 export * from "./extensions"
+export * from "./auth"
+export * from "./quick-links"
diff --git a/apps/desktop/src/lib/stores/quick-links.ts b/apps/desktop/src/lib/stores/quick-links.ts
new file mode 100644
index 0000000..e265ca4
--- /dev/null
+++ b/apps/desktop/src/lib/stores/quick-links.ts
@@ -0,0 +1,39 @@
+import type { Icon } from "@kksh/api/models"
+import { createQuickLinkCommand, getAllQuickLinkCommands } from "@kksh/extension/db"
+import type { CmdQuery, QuickLink } from "@kksh/ui/types"
+import { get, writable, type Writable } from "svelte/store"
+
+export interface QuickLinkAPI {
+	get: () => QuickLink[]
+	init: () => Promise<void>
+	refresh: () => Promise<void>
+	createQuickLink: (name: string, link: string, icon: Icon) => Promise<void>
+}
+
+function createQuickLinksStore(): Writable<QuickLink[]> & QuickLinkAPI {
+	const store = writable<QuickLink[]>([])
+
+	async function init() {
+		refresh()
+	}
+
+	async function refresh() {
+		const cmds = await getAllQuickLinkCommands()
+		store.set(cmds.map((cmd) => ({ link: cmd.data.link, name: cmd.name, icon: cmd.data.icon })))
+	}
+
+	async function createQuickLink(name: string, link: string, icon: Icon) {
+		await createQuickLinkCommand(name, link, icon)
+		await refresh()
+	}
+
+	return {
+		...store,
+		get: () => get(store),
+		init,
+		refresh,
+		createQuickLink
+	}
+}
+
+export const quickLinks = createQuickLinksStore()
diff --git a/apps/desktop/src/lib/stores/winExtMap.ts b/apps/desktop/src/lib/stores/winExtMap.ts
index 7b5cd5f..2bea26a 100644
--- a/apps/desktop/src/lib/stores/winExtMap.ts
+++ b/apps/desktop/src/lib/stores/winExtMap.ts
@@ -40,6 +40,7 @@ function createWinExtMapStore(): Writable<WinExtMap> & API {
 	async function init() {}
 
 	return {
+		...store,
 		init,
 		registerExtensionWithWindow: async ({
 			extPath,
@@ -58,11 +59,11 @@ function createWinExtMapStore(): Writable<WinExtMap> & API {
 					await killProcesses(winExtMap[windowLabel].pids)
 					delete winExtMap[windowLabel]
 				} else {
-					winExtMap[windowLabel] = {
-						windowLabel,
-						extPath,
-						pids: []
-					}
+					// winExtMap[windowLabel] = {
+					// 	windowLabel,
+					// 	extPath,
+					// 	pids: []
+					// }
 				}
 			}
 			const returnedWinLabel = await registerExtensionWindow({
@@ -70,6 +71,11 @@ function createWinExtMapStore(): Writable<WinExtMap> & API {
 				windowLabel,
 				dist
 			})
+			winExtMap[returnedWinLabel] = {
+				windowLabel: returnedWinLabel,
+				extPath,
+				pids: []
+			}
 			store.set(winExtMap)
 			return returnedWinLabel
 		},
@@ -109,10 +115,7 @@ function createWinExtMapStore(): Writable<WinExtMap> & API {
 			return unregisterExtensionSpawnedProcess(windowLabel, pid).then(() => {
 				ext.pids = ext.pids.filter((p) => p !== pid)
 			})
-		},
-		subscribe: store.subscribe,
-		update: store.update,
-		set: store.set
+		}
 	}
 }
 
diff --git a/apps/desktop/src/lib/utils/deeplink.ts b/apps/desktop/src/lib/utils/deeplink.ts
new file mode 100644
index 0000000..11bcc7f
--- /dev/null
+++ b/apps/desktop/src/lib/utils/deeplink.ts
@@ -0,0 +1,115 @@
+import { emitRefreshDevExt } from "@/utils/tauri-events"
+import {
+	DEEP_LINK_PATH_AUTH_CONFIRM,
+	DEEP_LINK_PATH_OPEN,
+	DEEP_LINK_PATH_REFRESH_DEV_EXTENSION,
+	DEEP_LINK_PATH_STORE
+} from "@kksh/api"
+import type { UnlistenFn } from "@tauri-apps/api/event"
+import { extname } from "@tauri-apps/api/path"
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
+import * as deepLink from "@tauri-apps/plugin-deep-link"
+import { error } from "@tauri-apps/plugin-log"
+import { goto } from "$app/navigation"
+import { toast } from "svelte-sonner"
+import * as v from "valibot"
+import { isInMainWindow } from "./window"
+
+const StorePathSearchParams = v.object({
+	identifier: v.optional(v.string())
+})
+
+export function initDeeplink(): Promise<UnlistenFn> {
+	console.log("init deeplink")
+	if (!isInMainWindow()) {
+		return Promise.resolve(() => {})
+	}
+	// deepLink.getCurrent()
+	return deepLink.onOpenUrl((urls) => {
+		console.log("deep link:", urls)
+		urls.forEach(handleDeepLink)
+	})
+}
+
+/**
+ * Show and focus on the main window
+ */
+function openMainWindow() {
+	const appWindow = getCurrentWebviewWindow()
+	return appWindow
+		.show()
+		.then(() => appWindow.setFocus())
+		.catch((err) => {
+			console.error(err)
+			error(`Failed to show window upon deep link: ${err.message}`)
+			toast.error("Failed to show window upon deep link", {
+				description: err.message
+			})
+		})
+}
+
+export async function handleKunkunProtocol(parsedUrl: URL) {
+	const params = Object.fromEntries(parsedUrl.searchParams)
+	const { host, pathname, href } = parsedUrl
+	if (href.startsWith(DEEP_LINK_PATH_OPEN)) {
+		openMainWindow()
+	} else if (href.startsWith(DEEP_LINK_PATH_STORE)) {
+		const parsed = v.parse(StorePathSearchParams, params)
+		openMainWindow()
+		if (parsed.identifier) {
+			goto(`/extension/store/${parsed.identifier}`)
+		} else {
+			goto("/extension/store")
+		}
+	} else if (href.startsWith(DEEP_LINK_PATH_REFRESH_DEV_EXTENSION)) {
+		emitRefreshDevExt()
+	} else if (href.startsWith(DEEP_LINK_PATH_AUTH_CONFIRM)) {
+		openMainWindow()
+		goto(`/auth/confirm?${parsedUrl.searchParams.toString()}`)
+	} else {
+		console.error("Invalid path:", pathname)
+		toast.error("Invalid path", {
+			description: parsedUrl.href
+		})
+	}
+}
+
+export async function handleFileProtocol(parsedUrl: URL) {
+	console.log("File protocol:", parsedUrl)
+	const filePath = parsedUrl.pathname // Remove the leading '//' kunkun://open?identifier=qrcode gives "open"
+	console.log("File path:", filePath)
+	// from file absolute path, get file extension
+	const fileExt = await extname(filePath)
+	console.log("File extension:", fileExt)
+	switch (fileExt) {
+		case "kunkun":
+			// TODO: Handle file protocol, install extension from file (essentially a .tgz file)
+			break
+		default:
+			console.error("Unknown file extension:", fileExt)
+			toast.error("Unknown file extension", {
+				description: fileExt
+			})
+			break
+	}
+}
+
+/**
+ *
+ * @param url Deep Link URl, e.g. kunkun://open
+ */
+export async function handleDeepLink(url: string) {
+	const parsedUrl = new URL(url)
+	switch (parsedUrl.protocol) {
+		case "kunkun:":
+			return handleKunkunProtocol(parsedUrl)
+		case "file:":
+			return handleFileProtocol(parsedUrl)
+		default:
+			console.error("Invalid Protocol:", parsedUrl.protocol)
+			toast.error("Invalid Protocol", {
+				description: parsedUrl.protocol
+			})
+			break
+	}
+}
diff --git a/apps/desktop/src/lib/utils/dom.ts b/apps/desktop/src/lib/utils/dom.ts
new file mode 100644
index 0000000..36bcfa6
--- /dev/null
+++ b/apps/desktop/src/lib/utils/dom.ts
@@ -0,0 +1,3 @@
+export function getActiveElementNodeName(): string | undefined {
+	return document.activeElement?.nodeName
+}
diff --git a/apps/desktop/src/lib/utils/key.ts b/apps/desktop/src/lib/utils/key.ts
index 62f16f1..61e9527 100644
--- a/apps/desktop/src/lib/utils/key.ts
+++ b/apps/desktop/src/lib/utils/key.ts
@@ -23,3 +23,13 @@ export function goBackOnEscapeClearSearchTerm(e: KeyboardEvent) {
 		}
 	}
 }
+
+export function goHomeOnEscapeClearSearchTerm(e: KeyboardEvent) {
+	if (e.key === "Escape") {
+		if (appState.get().searchTerm) {
+			appState.clearSearchTerm()
+		} else {
+			goHome()
+		}
+	}
+}
diff --git a/apps/desktop/src/lib/utils/sync-store.ts b/apps/desktop/src/lib/utils/sync-store.ts
new file mode 100644
index 0000000..667f6a5
--- /dev/null
+++ b/apps/desktop/src/lib/utils/sync-store.ts
@@ -0,0 +1,44 @@
+import * as evt from "@tauri-apps/api/event"
+import { writable, type Writable } from "svelte/store"
+
+export function buildEventName(storeName: string) {
+	return `app://sync-store-${storeName}`
+}
+
+export type WithSyncStore<T> = Writable<T> & {
+	listen: () => void
+	unlisten: evt.UnlistenFn | undefined
+}
+
+export function createTauriSyncStore<T>(storeName: string, initialValue: T): WithSyncStore<T> {
+	const store = writable<T>(initialValue)
+	let unlisten: evt.UnlistenFn | undefined
+
+	async function listen() {
+		console.log("[listen] start", storeName)
+		if (unlisten) {
+			console.log("[listen] already listening, skip")
+			return
+		}
+		const _unlisten = await evt.listen<{ value: T }>(buildEventName(storeName), (evt) => {
+			console.log(`[listen] update from tauri event`, storeName, evt.payload.value)
+			store.set(evt.payload.value)
+		})
+		const unsubscribe = store.subscribe((value) => {
+			console.log("[subscribe] got update, emit data", storeName, value)
+			evt.emit(buildEventName(storeName), { value })
+		})
+		unlisten = () => {
+			_unlisten()
+			unsubscribe()
+			unlisten = undefined
+		}
+		return unlisten
+	}
+
+	return {
+		...store,
+		listen,
+		unlisten
+	}
+}
diff --git a/apps/desktop/src/lib/utils/tauri-events.ts b/apps/desktop/src/lib/utils/tauri-events.ts
new file mode 100644
index 0000000..1102342
--- /dev/null
+++ b/apps/desktop/src/lib/utils/tauri-events.ts
@@ -0,0 +1,57 @@
+import { DEEP_LINK_PATH_REFRESH_DEV_EXTENSION } from "@kksh/api"
+import {
+	emit,
+	emitTo,
+	listen,
+	TauriEvent,
+	type Event,
+	type EventCallback,
+	type UnlistenFn
+} from "@tauri-apps/api/event"
+
+export const FileDragDrop = "tauri://drag-drop"
+export const FileDragEnter = "tauri://drag-enter"
+export const FileDragLeave = "tauri://drag-leave"
+export const FileDragOver = "tauri://drag-over"
+export const NewClipboardItemAddedEvent = "new_clipboard_item_added"
+export const RefreshConfigEvent = "kunkun://refresh-config"
+export const RefreshExtEvent = "kunkun://refresh-extensions"
+export function listenToFileDrop(cb: EventCallback<{ paths: string[] }>) {
+	return listen<{ paths: string[] }>(FileDragDrop, cb)
+}
+
+export function listenToWindowBlur(cb: EventCallback<null>) {
+	return listen(TauriEvent.WINDOW_BLUR, cb)
+}
+
+export function listenToWindowFocus(cb: EventCallback<null>) {
+	return listen(TauriEvent.WINDOW_FOCUS, cb)
+}
+
+export function listenToNewClipboardItem(cb: EventCallback<null>) {
+	return listen(NewClipboardItemAddedEvent, cb)
+}
+
+export function emitRefreshConfig() {
+	return emit(RefreshConfigEvent)
+}
+
+export function listenToRefreshConfig(cb: EventCallback<null>) {
+	return listen(RefreshConfigEvent, cb)
+}
+
+export function emitRefreshExt() {
+	return emitTo("main", RefreshExtEvent)
+}
+
+export function listenToRefreshExt(cb: EventCallback<null>) {
+	return listen(RefreshExtEvent, cb)
+}
+
+export function emitRefreshDevExt() {
+	return emit(DEEP_LINK_PATH_REFRESH_DEV_EXTENSION)
+}
+
+export function listenToRefreshDevExt(cb: EventCallback<null>) {
+	return listen(DEEP_LINK_PATH_REFRESH_DEV_EXTENSION, cb)
+}
diff --git a/apps/desktop/src/lib/utils/updater.ts b/apps/desktop/src/lib/utils/updater.ts
new file mode 100644
index 0000000..17705b0
--- /dev/null
+++ b/apps/desktop/src/lib/utils/updater.ts
@@ -0,0 +1,88 @@
+import { extensions } from "@/stores"
+import { supabaseAPI } from "@/supabase"
+import { isCompatible } from "@kksh/api"
+import type { ExtPackageJsonExtra } from "@kksh/api/models"
+import { greaterThan } from "@std/semver"
+import { relaunch } from "@tauri-apps/plugin-process"
+import { check } from "@tauri-apps/plugin-updater"
+import { gt } from "semver"
+import { toast } from "svelte-sonner"
+import { get } from "svelte/store"
+
+export async function checkUpdateAndInstall({ beta }: { beta?: boolean } = {}) {
+	const update = await check({
+		headers: {
+			"kk-updater-mode": beta ? "beta" : "stable"
+		}
+	})
+	if (update?.available) {
+		const confirmUpdate = await confirm(
+			`A new version ${update.version} is available. Do you want to install and relaunch?`
+		)
+		if (confirmUpdate) {
+			await update.downloadAndInstall()
+			await relaunch()
+		}
+	} else {
+		toast.info("You are on the latest version")
+	}
+}
+
+export async function checkSingleExtensionUpdate(
+	installedExt: ExtPackageJsonExtra,
+	autoupgrade: boolean
+) {
+	const { data: sbExt, error } = await supabaseAPI.getLatestExtPublish(
+		installedExt.kunkun.identifier
+	)
+	if (error) {
+		return toast.error(`Failed to check update for ${installedExt.kunkun.identifier}: ${error}`)
+	}
+
+	if (!sbExt) {
+		return null
+	}
+
+	if (
+		gt(sbExt.version, installedExt.version) &&
+		(sbExt.api_version ? isCompatible(sbExt.api_version) : true)
+	) {
+		if (autoupgrade) {
+			await extensions
+				.upgradeStoreExtension(
+					sbExt.identifier,
+					supabaseAPI.translateExtensionFilePathToUrl(sbExt.tarball_path)
+				)
+				.then(() => {
+					toast.success(`${sbExt.name} upgraded`, {
+						description: `From ${installedExt.version} to ${sbExt.version}`
+					})
+				})
+				.catch((err) => {
+					toast.error(`Failed to upgrade ${sbExt.name}`, { description: err })
+				})
+			return true
+		} else {
+			console.log(`new version available ${installedExt.kunkun.identifier} ${sbExt.version}`)
+			toast.info(
+				`Extension ${installedExt.kunkun.identifier} has a new version ${sbExt.version}, you can upgrade in Store.`,
+				{ duration: 10_000 }
+			)
+		}
+	}
+	return false
+}
+
+export async function checkExtensionUpdate(autoupgrade: boolean = false) {
+	let upgradedCount = 0
+	for (const ext of get(extensions)) {
+		const upgraded = await checkSingleExtensionUpdate(ext, autoupgrade)
+		if (upgraded) {
+			upgradedCount++
+		}
+	}
+
+	if (upgradedCount > 0) {
+		toast.info(`${upgradedCount} extensions have been upgraded`)
+	}
+}
diff --git a/apps/desktop/src/routes/+error.svelte b/apps/desktop/src/routes/+error.svelte
index 91a5da3..a4ae1af 100644
--- a/apps/desktop/src/routes/+error.svelte
+++ b/apps/desktop/src/routes/+error.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goHome } from "@/utils/route"
 	import { Error, Layouts } from "@kksh/ui"
 	import { page } from "$app/stores"
 
@@ -11,12 +12,12 @@
 
 <svelte:window on:keydown={handleKeyDown} />
 
-<Layouts.Center class="h-screen">
+<Layouts.Center class="min-h-screen py-5">
 	<Error.RawErrorJSONPreset
-		title="Unknown Error"
-		class="w-fit max-w-screen-sm"
+		title="Error"
+		class="w-fit max-w-screen-sm border-2 border-red-500"
 		message={$page.error?.message ?? "Unknown Error"}
-		onnGoBack={() => window.history.back()}
+		onGoBack={goHome}
 		rawJsonError={JSON.stringify($page, null, 2)}
 	/>
 </Layouts.Center>
diff --git a/apps/desktop/src/routes/+layout.svelte b/apps/desktop/src/routes/+layout.svelte
index d590564..e0dfed2 100644
--- a/apps/desktop/src/routes/+layout.svelte
+++ b/apps/desktop/src/routes/+layout.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import AppContext from "@/components/context/AppContext.svelte"
 	import "../app.css"
-	import { appConfig, appState, extensions } from "@/stores"
+	import { appConfig, appState, extensions, quickLinks } from "@/stores"
+	import { initDeeplink } from "@/utils/deeplink"
 	import { isInMainWindow } from "@/utils/window"
 	import {
 		ModeWatcher,
@@ -16,11 +17,19 @@
 	import { attachConsole } from "@tauri-apps/plugin-log"
 	import { onDestroy, onMount } from "svelte"
 
+	onMount(() => {
+		setTimeout(() => {
+			import("virtual:uno.css")
+		}, 1000)
+	})
+
 	let { children } = $props()
 	const unlisteners: UnlistenFn[] = []
 
 	onMount(async () => {
-		unlisteners.push(await attachConsole())
+		attachConsole().then((unlistener) => unlisteners.push(unlistener))
+		initDeeplink().then((unlistener) => unlisteners.push(unlistener))
+		quickLinks.init()
 		appConfig.init()
 		if (isInMainWindow()) {
 			extensions.init()
diff --git a/apps/desktop/src/routes/+layout.ts b/apps/desktop/src/routes/+layout.ts
index 8d7e6d2..028840b 100644
--- a/apps/desktop/src/routes/+layout.ts
+++ b/apps/desktop/src/routes/+layout.ts
@@ -1,5 +1,12 @@
+import { getExtensionsFolder } from "@/constants"
+import type { LayoutLoad } from "./$types"
+
 // Tauri doesn't have a Node.js server to do proper SSR
 // so we will use adapter-static to prerender the app (SSG)
 // See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
 export const prerender = true
 export const ssr = false
+
+export const load: LayoutLoad = async () => {
+	return { extsInstallDir: await getExtensionsFolder() }
+}
diff --git a/apps/desktop/src/routes/+page.svelte b/apps/desktop/src/routes/+page.svelte
index 3f4ab05..be1be7f 100644
--- a/apps/desktop/src/routes/+page.svelte
+++ b/apps/desktop/src/routes/+page.svelte
@@ -1,18 +1,130 @@
+<!-- This file renders the main command palette, a list of commands -->
 <script lang="ts">
 	import { commandLaunchers } from "@/cmds"
 	import { builtinCmds } from "@/cmds/builtin"
-	import CommandPalette from "@/components/main/CommandPalette.svelte"
-	import { appState } from "@/stores"
-	import { appConfig } from "@/stores/appConfig"
-	import { extensions } from "@/stores/extensions"
-	import "@kksh/ui"
+	import { systemCommands } from "@/cmds/system"
+	import { appConfig, appState, devStoreExts, installedStoreExts, quickLinks } from "@/stores"
+	import { cmdQueries } from "@/stores/cmdQuery"
+	import { getActiveElementNodeName } from "@/utils/dom"
+	import { openDevTools } from "@kksh/api/commands"
+	import type { ExtPackageJsonExtra } from "@kksh/api/models"
+	import { isExtPathInDev } from "@kksh/extension/utils"
+	import { Button, Command, DropdownMenu } from "@kksh/svelte5"
+	import type { AppConfig, AppState } from "@kksh/types"
+	import {
+		BuiltinCmds,
+		CustomCommandInput,
+		ExtCmdsGroup,
+		GlobalCommandPaletteFooter,
+		QuickLinks,
+		SystemCmds
+	} from "@kksh/ui/main"
+	import type { BuiltinCmd, CmdValue, CommandLaunchers } from "@kksh/ui/types"
+	import { cn, commandScore } from "@kksh/ui/utils"
+	import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
+	import { exit } from "@tauri-apps/plugin-process"
+	import { EllipsisVerticalIcon } from "lucide-svelte"
+	import type { Writable } from "svelte/store"
+
+	function onKeyDown(event: KeyboardEvent) {
+		if (event.key === "Escape") {
+			if (getActiveElementNodeName() === "INPUT") {
+				;(event.target as HTMLInputElement).value = ""
+				if ((event.target as HTMLInputElement | undefined)?.id === "main-command-input") {
+					$appState.searchTerm = ""
+				}
+			}
+		}
+	}
 </script>
 
-<CommandPalette
-	class="h-screen"
-	extensions={$extensions}
-	{appState}
-	{appConfig}
-	{commandLaunchers}
-	{builtinCmds}
-/>
+<svelte:window on:keydown={onKeyDown} />
+<Command.Root
+	class={cn("h-screen rounded-lg border shadow-md")}
+	bind:value={$appState.highlightedCmd}
+	filter={(value, search, keywords) => {
+		return commandScore(
+			value.startsWith("{") ? (JSON.parse(value) as CmdValue).cmdName : value,
+			search,
+			keywords
+		)
+	}}
+	loop
+>
+	<CustomCommandInput
+		autofocus
+		id="main-command-input"
+		placeholder={$cmdQueries.length === 0 ? "Type a command or search..." : undefined}
+		bind:value={$appState.searchTerm}
+	>
+		{#snippet rightSlot()}
+			<span
+				class={cn("absolute flex space-x-2")}
+				style={`left: ${$appState.searchTerm.length + 3}ch`}
+			>
+				{#each $cmdQueries as cmdQuery}
+					{@const queryWidth = Math.max(cmdQuery.name.length, cmdQuery.value.length) + 2}
+					<input
+						class="bg-muted rounded-md border border-gray-300 pl-2 font-mono focus:outline-none dark:border-gray-600"
+						type="text"
+						placeholder={cmdQuery.name}
+						style={`width: ${queryWidth}ch`}
+						onkeydown={(evt) => {
+							if (evt.key === "Enter") {
+								evt.preventDefault()
+								evt.stopPropagation()
+								commandLaunchers.onQuickLinkSelect(
+									JSON.parse($appState.highlightedCmd),
+									$cmdQueries
+								)
+							}
+						}}
+						bind:value={cmdQuery.value}
+					/>
+				{/each}
+			</span>
+
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger>
+					<Button variant="outline" size="icon"><EllipsisVerticalIcon /></Button>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content>
+					<DropdownMenu.Group>
+						<DropdownMenu.GroupHeading>Settings</DropdownMenu.GroupHeading>
+						<DropdownMenu.Separator />
+						<DropdownMenu.Item onclick={() => exit()}>Quit</DropdownMenu.Item>
+						<DropdownMenu.Item onclick={() => openDevTools()}>Open Dev Tools</DropdownMenu.Item>
+						<DropdownMenu.Item onclick={() => getCurrentWebviewWindow().hide()}
+							>Close Window</DropdownMenu.Item
+						>
+					</DropdownMenu.Group>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		{/snippet}
+	</CustomCommandInput>
+	<Command.List class="max-h-screen grow">
+		<Command.Empty data-tauri-drag-region>No results found.</Command.Empty>
+		{#if $appConfig.extensionsInstallDir && $devStoreExts.length > 0}
+			<ExtCmdsGroup
+				extensions={$devStoreExts}
+				heading="Dev Extensions"
+				isDev={true}
+				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
+				hmr={$appConfig.hmr}
+			/>
+		{/if}
+		{#if $appConfig.extensionsInstallDir && $installedStoreExts.length > 0}
+			<ExtCmdsGroup
+				extensions={$installedStoreExts}
+				heading="Extensions"
+				isDev={false}
+				hmr={false}
+				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
+			/>
+		{/if}
+		<QuickLinks quickLinks={$quickLinks} />
+		<BuiltinCmds {builtinCmds} />
+		<SystemCmds {systemCommands} />
+	</Command.List>
+	<GlobalCommandPaletteFooter />
+</Command.Root>
diff --git a/apps/desktop/src/routes/auth/+page.svelte b/apps/desktop/src/routes/auth/+page.svelte
new file mode 100644
index 0000000..4a42802
--- /dev/null
+++ b/apps/desktop/src/routes/auth/+page.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { auth } from "@/stores"
+	import { supabase } from "@/supabase"
+	import { goBackOnEscape } from "@/utils/key"
+	import { goBack, goHome } from "@/utils/route"
+	import Icon from "@iconify/svelte"
+	import { DEEP_LINK_PATH_AUTH_CONFIRM } from "@kksh/api"
+	import { Button, Card } from "@kksh/svelte5"
+	import { Layouts } from "@kksh/ui"
+	import { goto } from "$app/navigation"
+	import { ArrowLeft } from "lucide-svelte"
+	import { onMount } from "svelte"
+	import { toast } from "svelte-sonner"
+	import { open } from "tauri-plugin-shellx-api"
+
+	const redirectTo = DEEP_LINK_PATH_AUTH_CONFIRM
+
+	const signInWithOAuth = async (provider: "github" | "google") => {
+		console.log(`Login with ${provider} redirecting to ${redirectTo}`)
+		const { error, data } = await supabase.auth.signInWithOAuth({
+			provider,
+			options: {
+				redirectTo,
+				skipBrowserRedirect: true
+			}
+		})
+		if (error) {
+			toast.error("Failed to sign in with OAuth", { description: error.message })
+		} else {
+			data.url && open(data.url)
+		}
+	}
+
+	onMount(() => {
+		if ($auth.session) {
+			toast.success("Already Signed In")
+			goHome()
+		}
+	})
+</script>
+
+<svelte:window on:keydown={goBackOnEscape} />
+<Button variant="outline" size="icon" onclick={goBack} class="absolute left-2 top-2 z-50">
+	<ArrowLeft class="size-4" />
+</Button>
+<div class="absolute h-10 w-full" data-tauri-drag-region></div>
+<Layouts.Center class="h-screen w-screen" data-tauri-drag-region>
+	<Card.Root class="w-80">
+		<Card.Header class="flex flex-col items-center">
+			<img src="/favicon.png" alt="Kunkun" class="h-12 w-12 invert" />
+			<Card.Title class="text-xl">Sign In</Card.Title>
+		</Card.Header>
+		<Card.Content class="flex flex-col gap-2">
+			<Button variant="outline" size="lg" class="w-full" onclick={() => signInWithOAuth("github")}>
+				<Icon icon="fa6-brands:github" class="h-5 w-5" />
+			</Button>
+			<Button variant="outline" size="lg" class="w-full" onclick={() => signInWithOAuth("google")}>
+				<Icon icon="logos:google-icon" class="h-5 w-5" />
+			</Button>
+		</Card.Content>
+	</Card.Root>
+</Layouts.Center>
diff --git a/apps/desktop/src/routes/auth/confirm/+page.svelte b/apps/desktop/src/routes/auth/confirm/+page.svelte
new file mode 100644
index 0000000..78e2035
--- /dev/null
+++ b/apps/desktop/src/routes/auth/confirm/+page.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { auth } from "@/stores"
+	import { supabase } from "@/supabase"
+	import { goHomeOnEscape } from "@/utils/key"
+	import { goBack, goHome } from "@/utils/route"
+	import { Avatar, Button } from "@kksh/svelte5"
+	import { goto } from "$app/navigation"
+	import { ArrowLeft } from "lucide-svelte"
+	import { onMount } from "svelte"
+	import { toast } from "svelte-sonner"
+
+	const { data } = $props()
+
+	async function authExchange() {
+		if (data.code) {
+			auth.signInExchange(data.code).then((res) => {
+				if (res.error) {
+					toast.error("Failed to sign in", { description: res.error.message })
+				} else {
+					toast.success("Signed In")
+				}
+			})
+		} else {
+			toast.error("No code found")
+		}
+	}
+
+	const avatarFallback = $derived.by(() => {
+		if (!$auth.session) return "?"
+		const nameSplit = $auth.session.user.user_metadata.name.split(" ").filter(Boolean)
+		if (nameSplit.length > 1) {
+			return nameSplit[0][0] + nameSplit.at(-1)[0]
+		} else if (nameSplit.length === 1) {
+			return nameSplit[0][0]
+		} else {
+			return "?"
+		}
+	})
+
+	onMount(() => {
+		authExchange()
+	})
+
+	function onSignOut() {
+		auth
+			.signOut()
+			.then(() => goto("/auth"))
+			.catch((err) => toast.error("Failed to sign out", { description: err.message }))
+	}
+</script>
+
+<svelte:window on:keydown={goHomeOnEscape} />
+<Button
+	class="absolute left-2 top-2 z-50"
+	variant="outline"
+	size="icon"
+	onclick={() => {
+		console.log("go Home")
+		goto("/")
+	}}
+>
+	<ArrowLeft class="size-4" />
+</Button>
+<div class="h-10 w-full" data-tauri-drag-region></div>
+<main class="container pt-10">
+	<div class="flex grow items-center justify-center pt-16">
+		<div class="flex flex-col items-center gap-4">
+			{#if $auth.session}
+				<span class="font-mono text-4xl font-bold">Welcome, You are Logged In</span>
+			{:else}
+				<span class="font-mono text-4xl font-bold">You Are Not Logged In</span>
+			{/if}
+			<span class="flex flex-col items-center gap-5 text-xl">
+				{#if $auth.session}
+					<Avatar.Root class="h-32 w-32 border">
+						<Avatar.Image src={$auth.session?.user.user_metadata.avatar_url} alt="avatar" />
+						<Avatar.Fallback>{avatarFallback}</Avatar.Fallback>
+					</Avatar.Root>
+				{/if}
+				<Button variant="outline" onclick={onSignOut}>Sign Out</Button>
+			</span>
+		</div>
+	</div>
+</main>
diff --git a/apps/desktop/src/routes/auth/confirm/+page.ts b/apps/desktop/src/routes/auth/confirm/+page.ts
new file mode 100644
index 0000000..3418ef7
--- /dev/null
+++ b/apps/desktop/src/routes/auth/confirm/+page.ts
@@ -0,0 +1,10 @@
+import { error } from "@sveltejs/kit"
+import type { PageLoad } from "./$types"
+
+export const load: PageLoad = async ({ params, url }) => {
+	const code = url.searchParams.get("code")
+	if (!code) {
+		throw error(400, "Auth Exchange Code is Required")
+	}
+	return { params, code }
+}
diff --git a/apps/desktop/src/routes/extension/create-quick-link/+page.svelte b/apps/desktop/src/routes/extension/create-quick-link/+page.svelte
new file mode 100644
index 0000000..4e782f4
--- /dev/null
+++ b/apps/desktop/src/routes/extension/create-quick-link/+page.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { quickLinks } from "@/stores/quick-links"
+	import { goBackOnEscape } from "@/utils/key"
+	import { goBack } from "@/utils/route"
+	import { Icon, IconEnum, IconType } from "@kksh/api/models"
+	import { Button, Input } from "@kksh/svelte5"
+	import { Form, IconSelector } from "@kksh/ui"
+	import { dev } from "$app/environment"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import { toast } from "svelte-sonner"
+	import SuperDebug, { defaults, superForm } from "sveltekit-superforms"
+	import { valibot, valibotClient } from "sveltekit-superforms/adapters"
+	import * as v from "valibot"
+
+	const formSchema = v.object({
+		name: v.pipe(v.string(), v.minLength(1), v.maxLength(100)),
+		link: v.pipe(v.string(), v.url(), v.minLength(5), v.maxLength(1000)),
+		iconType: IconType,
+		iconValue: v.string(),
+		invertIcon: v.boolean()
+	})
+	let icon = $state<Icon>({
+		type: IconEnum.Iconify,
+		value: "material-symbols:link",
+		invert: false
+	})
+	const form = superForm(defaults(valibot(formSchema)), {
+		validators: valibotClient(formSchema),
+		SPA: true,
+		onUpdate({ form, cancel }) {
+			cancel()
+			if (!form.valid) return
+			const { name, link, iconType, iconValue } = form.data
+			quickLinks
+				.createQuickLink(name, link, icon)
+				.then(() => {
+					toast.success("Quicklink created successfully")
+					goBack()
+				})
+				.catch((err) => {
+					toast.error("Failed to create quicklink", { description: err })
+				})
+		}
+	})
+
+	const { form: formData, enhance, errors } = form
+	const placeholders = {
+		name: "Quick Link Name",
+		link: "https://google.com/search?q={argument}"
+	}
+
+	const defaultFaviconUrl = $derived(
+		$formData.link ? new URL($formData.link).origin + "/favicon.ico" : undefined
+	)
+	$effect(() => {
+		if (defaultFaviconUrl && defaultFaviconUrl.length > 0) {
+			icon.type = IconEnum.RemoteUrl
+			icon.value = defaultFaviconUrl
+		}
+	})
+
+	$effect(() => {
+		$formData.iconType = icon.type
+		$formData.iconValue = icon.value
+		$formData.invertIcon = icon.invert ?? false
+	})
+</script>
+
+<svelte:window on:keydown={goBackOnEscape} />
+<Button variant="outline" size="icon" class="fixed left-2 top-2 z-50" onclick={goBack}>
+	<ArrowLeftIcon class="h-4 w-4" />
+</Button>
+<div class="h-12" data-tauri-drag-region></div>
+<div class="container">
+	<h1 class="text-2xl font-bold">Create Quick Link</h1>
+	<form method="POST" use:enhance>
+		<Form.Field {form} name="name">
+			<Form.Control>
+				{#snippet children({ props })}
+					<Form.Label>Name</Form.Label>
+					<Input {...props} bind:value={$formData.name} placeholder={placeholders.name} />
+				{/snippet}
+			</Form.Control>
+			<Form.Description>Quick Link Display Name</Form.Description>
+			<Form.FieldErrors />
+		</Form.Field>
+		<Form.Field {form} name="link">
+			<Form.Control>
+				{#snippet children({ props })}
+					<Form.Label>Link</Form.Label>
+					<Input {...props} bind:value={$formData.link} placeholder={placeholders.link} />
+				{/snippet}
+			</Form.Control>
+			<Form.Description>Quick Link URL</Form.Description>
+			<Form.FieldErrors />
+		</Form.Field>
+		<IconSelector class="border" bind:icon />
+		<input name="iconType" hidden type="text" bind:value={$formData.iconType} />
+		<input name="iconValue" hidden type="text" bind:value={$formData.iconValue} />
+		<input name="invertIcon" hidden type="text" bind:value={$formData.invertIcon} />
+		<Form.Button class="my-1">Submit</Form.Button>
+	</form>
+</div>
+{#if dev}
+	<div class="p-5">
+		<SuperDebug data={$formData} />
+	</div>
+{/if}
diff --git a/apps/desktop/src/routes/extension/create-quick-link/schema.ts b/apps/desktop/src/routes/extension/create-quick-link/schema.ts
new file mode 100644
index 0000000..c4de730
--- /dev/null
+++ b/apps/desktop/src/routes/extension/create-quick-link/schema.ts
@@ -0,0 +1,7 @@
+import { z } from "zod"
+
+export const formSchema = z.object({
+	username: z.string().min(2).max(50)
+})
+
+export type FormSchema = typeof formSchema
diff --git a/apps/desktop/src/routes/extension/permission-inspector/+page.svelte b/apps/desktop/src/routes/extension/permission-inspector/+page.svelte
new file mode 100644
index 0000000..2294407
--- /dev/null
+++ b/apps/desktop/src/routes/extension/permission-inspector/+page.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { goBackOnEscape } from "@/utils/key"
+	import { goBack } from "@/utils/route"
+	import { listenToFileDrop } from "@/utils/tauri-events"
+	import type { ExtPackageJsonExtra } from "@kksh/api/models"
+	import { loadExtensionManifestFromDisk } from "@kksh/extension"
+	import { Button, Card } from "@kksh/svelte5"
+	import { PermissionInspector } from "@kksh/ui/extension"
+	import type { UnlistenFn } from "@tauri-apps/api/event"
+	import { join } from "@tauri-apps/api/path"
+	import { getCurrentWebview } from "@tauri-apps/api/webview"
+	import { open as openDialog } from "@tauri-apps/plugin-dialog"
+	import { exists } from "@tauri-apps/plugin-fs"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import { onDestroy, onMount } from "svelte"
+	import { toast } from "svelte-sonner"
+
+	let pkgJsons = $state<ExtPackageJsonExtra[]>([])
+	let unlistenDropEvt: UnlistenFn
+
+	onMount(async () => {
+		unlistenDropEvt = await getCurrentWebview().onDragDropEvent((event) => {
+			if (event.payload.type === "drop") {
+				inspectPaths(event.payload.paths)
+			}
+		})
+	})
+
+	onDestroy(() => {
+		unlistenDropEvt?.()
+	})
+
+	async function inspectPaths(paths: string[]) {
+		for (const path of paths) {
+			if (!(await exists(path))) {
+				toast.error("Selected path does not exist", { description: path })
+				continue
+			}
+			const manifestPath = await join(path, "package.json")
+			if (!(await exists(manifestPath))) {
+				toast.error("Selected path is not an extension", { description: path })
+				continue
+			}
+			try {
+				pkgJsons.push(await loadExtensionManifestFromDisk(manifestPath))
+				toast.success("Extension manifest loaded", { description: path })
+			} catch (err) {
+				toast.error(`Failed to load extension manifest: ${err}`, { description: path })
+			}
+		}
+	}
+
+	async function onPick() {
+		const paths = await openDialog({
+			directory: true,
+			multiple: true
+		})
+		if (!paths) {
+			return toast.error("No folder selected")
+		}
+		inspectPaths(paths)
+	}
+</script>
+
+<svelte:window on:keydown={goBackOnEscape} />
+
+<main class="container w-screen pt-10">
+	<Button variant="outline" size="icon" class="absolute left-2 top-2 z-50" onclick={goBack}>
+		<ArrowLeftIcon class="h-4 w-4" />
+	</Button>
+	<h1 class="text-2xl font-bold">Extension Permission Inspector</h1>
+	<Button class="my-5" onclick={onPick}>Pick Extension Folder to Inspect</Button>
+	<div class="mb-5 flex flex-col gap-4">
+		{#each pkgJsons as pkgJson}
+			<Card.Root>
+				<Card.Header>
+					<Card.Title>{pkgJson.kunkun.name}</Card.Title>
+					<Card.Description>{pkgJson.kunkun.shortDescription}</Card.Description>
+				</Card.Header>
+				<Card.Content>
+					<PermissionInspector manifest={pkgJson.kunkun} />
+				</Card.Content>
+				<Card.Footer class="block">
+					<p class="text-sm">
+						<strong>Identifier:</strong> <code>{pkgJson.kunkun.identifier}</code>
+					</p>
+					<p class="text-sm">
+						<strong>Extension Path:</strong> <code>{pkgJson.extPath}</code>
+					</p>
+				</Card.Footer>
+			</Card.Root>
+		{/each}
+	</div>
+</main>
+
+<style>
+	:global(body) {
+		overflow-x: hidden;
+	}
+</style>
diff --git a/apps/desktop/src/routes/extension/store/+page.svelte b/apps/desktop/src/routes/extension/store/+page.svelte
index 7f53ef9..d8d7a1f 100644
--- a/apps/desktop/src/routes/extension/store/+page.svelte
+++ b/apps/desktop/src/routes/extension/store/+page.svelte
@@ -2,8 +2,8 @@
 	import { getExtensionsFolder } from "@/constants"
 	import { appState, extensions } from "@/stores"
 	import { supabaseAPI } from "@/supabase"
-	import { goBackOnEscapeClearSearchTerm } from "@/utils/key"
-	import { goBack } from "@/utils/route"
+	import { goBackOnEscapeClearSearchTerm, goHomeOnEscapeClearSearchTerm } from "@/utils/key"
+	import { goBack, goHome } from "@/utils/route"
 	import { SBExt } from "@kksh/api/supabase"
 	import { isUpgradable } from "@kksh/extension"
 	import { Button, Command } from "@kksh/svelte5"
@@ -64,20 +64,19 @@
 	}
 </script>
 
-<svelte:window on:keydown={goBackOnEscapeClearSearchTerm} />
-
+<svelte:window on:keydown={goHomeOnEscapeClearSearchTerm} />
 {#snippet leftSlot()}
 	<Button
 		variant="outline"
 		size="icon"
-		onclick={goBack}
+		onclick={goHome}
 		class={Constants.CLASSNAMES.BACK_BUTTON}
 		data-flip-id={Constants.CLASSNAMES.BACK_BUTTON}
 	>
 		<ArrowLeft class="size-4" />
 	</Button>
 {/snippet}
-<Command.Root class="h-screen rounded-lg border shadow-md">
+<Command.Root class="h-screen rounded-lg border shadow-md" loop>
 	<CustomCommandInput
 		autofocus
 		placeholder="Type a command or search..."
diff --git a/apps/desktop/src/routes/extension/store/[identifier]/+error.svelte b/apps/desktop/src/routes/extension/store/[identifier]/+error.svelte
index 4768785..19b2b50 100644
--- a/apps/desktop/src/routes/extension/store/[identifier]/+error.svelte
+++ b/apps/desktop/src/routes/extension/store/[identifier]/+error.svelte
@@ -12,12 +12,12 @@
 
 <svelte:window on:keydown={handleKeyDown} />
 
-<Layouts.Center class="h-screen">
+<Layouts.Center class="min-h-screen py-5">
 	<Error.RawErrorJSONPreset
 		title="Fail to Load Extension"
-		class="w-fit max-w-screen-sm"
+		class="w-fit max-w-screen-sm border-2 border-red-500"
 		message={$page.error?.message ?? "Unknown Error"}
-		onnGoBack={() => goto("/")}
+		onGoBack={() => goto("/")}
 		rawJsonError={JSON.stringify($page, null, 2)}
 	/>
 </Layouts.Center>
diff --git a/apps/desktop/src/routes/extension/store/[identifier]/+page.svelte b/apps/desktop/src/routes/extension/store/[identifier]/+page.svelte
index 67ce854..55a7f97 100644
--- a/apps/desktop/src/routes/extension/store/[identifier]/+page.svelte
+++ b/apps/desktop/src/routes/extension/store/[identifier]/+page.svelte
@@ -9,13 +9,15 @@
 	import { StoreExtDetail } from "@kksh/ui/extension"
 	import { greaterThan, parse as parseSemver } from "@std/semver"
 	import { error } from "@tauri-apps/plugin-log"
+	import { goto } from "$app/navigation"
 	import { ArrowLeftIcon } from "lucide-svelte"
 	import { onMount } from "svelte"
 	import { toast } from "svelte-sonner"
 	import { get, derived as storeDerived } from "svelte/store"
 
 	const { data } = $props()
-	let { ext, manifest } = data
+	const ext = $derived(data.ext)
+	const manifest = $derived(data.manifest)
 	const installedExt = storeDerived(installedStoreExts, ($e) => {
 		return $e.find((e) => e.kunkun.identifier === ext.identifier)
 	})
@@ -36,9 +38,9 @@
 
 	onMount(() => {
 		showBtn = {
-			install: !installedExt,
+			install: !$installedExt,
 			upgrade: isUpgradable,
-			uninstall: !!installedExt
+			uninstall: !!$installedExt
 		}
 	})
 
@@ -114,43 +116,44 @@
 			.uninstallStoreExtensionByIdentifier(ext.identifier)
 			.then((uninstalledExt) => {
 				toast.success(`${uninstalledExt.name} Uninstalled`)
+				loading.uninstall = false
+				showBtn.uninstall = false
+				showBtn.install = true
 			})
 			.catch((err) => {
 				toast.error("Fail to uninstall extension", { description: err })
 				error(`Fail to uninstall store extension (${ext.identifier}): ${err}`)
 			})
-			.finally(() => {
-				loading.uninstall = false
-				showBtn.uninstall = false
-				showBtn.install = true
-			})
+			.finally(() => {})
 	}
 
 	function onEnterPressed() {
-		return onInstallSelected()
+		if (showBtn.install) {
+			return onInstallSelected()
+		}
 	}
 
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === "Escape") {
 			if (!delayedImageDialogOpen) {
-				goBack()
+				goto("/extension/store")
 			}
 		}
 	}
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
-
 <Button
 	variant="outline"
 	size="icon"
 	class={cn("fixed left-3 top-3", Constants.CLASSNAMES.BACK_BUTTON)}
 	data-flip-id={Constants.CLASSNAMES.BACK_BUTTON}
-	onclick={goBack}
+	onclick={() => goto("/extension/store")}
 >
 	<ArrowLeftIcon />
 </Button>
 <StoreExtDetail
+	class="px-5"
 	{ext}
 	{manifest}
 	installedExt={$installedExt}
diff --git a/apps/desktop/src/routes/extension/store/[identifier]/+page.ts b/apps/desktop/src/routes/extension/store/[identifier]/+page.ts
index c79c946..db46357 100644
--- a/apps/desktop/src/routes/extension/store/[identifier]/+page.ts
+++ b/apps/desktop/src/routes/extension/store/[identifier]/+page.ts
@@ -13,7 +13,12 @@ export const load: PageLoad = async ({
 }): Promise<{
 	ext: Tables<"ext_publish">
 	manifest: KunkunExtManifest
+	params: {
+		identifier: string
+	}
 }> => {
+	console.log("store[identifier] params", params)
+
 	const { error: dbError, data: ext } = await supabaseAPI.getLatestExtPublish(params.identifier)
 	if (dbError) {
 		return error(400, {
@@ -30,6 +35,7 @@ export const load: PageLoad = async ({
 
 	return {
 		ext,
+		params,
 		manifest: parseManifest.output
 	}
 }
diff --git a/apps/desktop/src/routes/extension/ui-worker/+page.svelte b/apps/desktop/src/routes/extension/ui-worker/+page.svelte
index 5bf03f4..2dffffc 100644
--- a/apps/desktop/src/routes/extension/ui-worker/+page.svelte
+++ b/apps/desktop/src/routes/extension/ui-worker/+page.svelte
@@ -1 +1,289 @@
-<script lang="ts"></script>
+<script lang="ts">
+	import { appState } from "@/stores/appState.js"
+	import { winExtMap } from "@/stores/winExtMap.js"
+	import { listenToRefreshDevExt } from "@/utils/tauri-events.js"
+	import { isInMainWindow } from "@/utils/window.js"
+	import { type Remote } from "@huakunshen/comlink"
+	import { db } from "@kksh/api/commands"
+	import {
+		constructJarvisServerAPIWithPermissions,
+		exposeApiToWorker,
+		type IApp,
+		type IUiWorker
+	} from "@kksh/api/ui"
+	import {
+		// constructJarvisExtDBToServerDbAPI,
+		FormNodeNameEnum,
+		FormSchema,
+		ListSchema,
+		Markdown,
+		MarkdownSchema,
+		NodeNameEnum,
+		toast,
+		wrap,
+		type IComponent,
+		type IDb,
+		type WorkerExtension
+	} from "@kksh/api/ui/worker"
+	import { Button } from "@kksh/svelte5"
+	import { LoadingBar } from "@kksh/ui"
+	import { Templates } from "@kksh/ui/extension"
+	import { GlobalCommandPaletteFooter } from "@kksh/ui/main"
+	import type { UnlistenFn } from "@tauri-apps/api/event"
+	import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
+	import { readTextFile } from "@tauri-apps/plugin-fs"
+	import { debug } from "@tauri-apps/plugin-log"
+	import { goto } from "$app/navigation"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import { onDestroy, onMount } from "svelte"
+	import * as v from "valibot"
+
+	const { data } = $props()
+	let { loadedExt, scriptPath, extInfoInDB } = $derived(data)
+	let workerAPI: Remote<WorkerExtension> | undefined = undefined
+	let unlistenRefreshWorkerExt: UnlistenFn | undefined
+	let worker: Worker | undefined
+	let listViewContent = $state<ListSchema.List>()
+	let formViewContent = $state<FormSchema.Form>()
+	let markdownViewContent = $state<MarkdownSchema>()
+	let extensionLoadingBar = $state(false) // whether extension called showLoadingBar
+	let pbar = $state<number | null>(null)
+	let loading = $state(false)
+	let searchTerm = $state("")
+	let searchBarPlaceholder = $state("")
+	const appWin = getCurrentWebviewWindow()
+	const loadingBar = $derived($appState.loadingBar || extensionLoadingBar)
+	let loaded = $state(false)
+
+	async function goBack() {
+		if (isInMainWindow()) {
+			// if in main window, then winExtMap store must contain this
+			winExtMap.unregisterExtensionFromWindow(appWin.label)
+			goto("/")
+		} else {
+			appWin.close()
+		}
+	}
+
+	function clearViewContent(keep?: "list" | "form" | "markdown") {
+		if (keep !== "list") {
+			listViewContent = undefined
+		}
+		if (keep !== "form") {
+			formViewContent = undefined
+		}
+		if (keep !== "markdown") {
+			markdownViewContent = undefined
+		}
+	}
+
+	const extUiAPI: IUiWorker = {
+		async render(view: IComponent<ListSchema.List | FormSchema.Form | MarkdownSchema>) {
+			if (view.nodeName === NodeNameEnum.List) {
+				clearViewContent("list")
+				const parsedListView = v.parse(ListSchema.List, view)
+				const updateFields = {
+					sections: true,
+					items: true,
+					detail: true,
+					filter: true,
+					actions: true,
+					defaultAction: true
+				}
+				if (listViewContent) {
+					if (parsedListView.inherits && parsedListView.inherits.length > 0) {
+						if (parsedListView.inherits.includes("items")) {
+							updateFields.items = false
+						}
+						if (parsedListView.inherits.includes("sections")) {
+							updateFields.sections = false
+						}
+						if (parsedListView.inherits.includes("detail")) {
+							updateFields.detail = false
+						}
+						if (parsedListView.inherits.includes("filter")) {
+							updateFields.filter = false
+						}
+						if (parsedListView.inherits.includes("actions")) {
+							updateFields.actions = false
+						}
+						if (parsedListView.inherits.includes("defaultAction")) {
+							updateFields.defaultAction = false
+						}
+						if (updateFields.items) {
+							listViewContent.items = parsedListView.items
+						}
+						if (updateFields.sections) {
+							listViewContent.sections = parsedListView.sections
+						}
+						if (updateFields.detail) {
+							listViewContent.detail = parsedListView.detail
+						}
+						if (updateFields.filter) {
+							listViewContent.filter = parsedListView.filter
+						}
+						if (updateFields.actions) {
+							listViewContent.actions = parsedListView.actions
+						}
+						if (updateFields.defaultAction) {
+							listViewContent.defaultAction = parsedListView.defaultAction
+						}
+						listViewContent.inherits = parsedListView.inherits
+					} else {
+						listViewContent = parsedListView
+					}
+				} else {
+					listViewContent = parsedListView
+				}
+
+				// if (parsedListView.updateDetailOnly) {
+				// 	if (listViewContent) {
+				// 		listViewContent.detail = parsedListView.detail
+				// 	} else {
+				// 		listViewContent = parsedListView
+				// 	}
+				// } else {
+				// 	listViewContent = parsedListView
+				// }
+			} else if (view.nodeName === FormNodeNameEnum.Form) {
+				listViewContent = undefined
+				clearViewContent("form")
+				const parsedForm = v.parse(FormSchema.Form, view)
+				formViewContent = parsedForm
+				// TODO: convert form to zod schema
+				// const zodSchema = convertFormToZod(parsedForm)
+				// formViewZodSchema = zodSchema
+				// formFieldConfig = buildFieldConfig(parsedForm)
+			} else if (view.nodeName === NodeNameEnum.Markdown) {
+				clearViewContent("markdown")
+				markdownViewContent = v.parse(MarkdownSchema, view)
+			} else {
+				toast.error(`Unsupported view type: ${view.nodeName}`)
+			}
+		},
+		async showLoadingBar(loading: boolean) {
+			// appState.setLoadingBar(loading)
+			extensionLoadingBar = loading
+		},
+		async setProgressBar(progress: number | null) {
+			pbar = progress
+		},
+		async setScrollLoading(_loading: boolean) {
+			loading = _loading
+		},
+		async setSearchTerm(term: string) {
+			searchTerm = term
+		},
+		async setSearchBarPlaceholder(placeholder: string) {
+			console.log("setSearchBarPlaceholder", placeholder)
+			searchBarPlaceholder = placeholder
+		},
+		async goBack() {
+			goBack()
+		}
+	}
+
+	async function launchWorkerExt() {
+		if (worker) {
+			worker.terminate()
+			worker = undefined
+		}
+		const workerScript = await readTextFile(scriptPath)
+		const blob = new Blob([workerScript], { type: "application/javascript" })
+		const blobURL = URL.createObjectURL(blob)
+		worker = new Worker(blobURL)
+		const serverAPI: Record<string, any> = constructJarvisServerAPIWithPermissions(
+			loadedExt.kunkun.permissions,
+			loadedExt.extPath
+		)
+		serverAPI.iframeUi = undefined
+		serverAPI.workerUi = extUiAPI
+		serverAPI.db = new db.JarvisExtDB(extInfoInDB.extId)
+		serverAPI.app = {
+			language: () => Promise.resolve("en")
+		} satisfies IApp
+		exposeApiToWorker(worker, serverAPI)
+		workerAPI = wrap<WorkerExtension>(worker)
+		await workerAPI.load()
+	}
+
+	$effect(() => {
+		launchWorkerExt()
+
+		return () => {
+			worker?.terminate()
+		}
+	})
+	onMount(async () => {
+		setTimeout(() => {
+			appState.setLoadingBar(true)
+			appWin.show()
+		}, 100)
+		unlistenRefreshWorkerExt = await listenToRefreshDevExt(() => {
+			debug("Refreshing Worker Extension")
+			launchWorkerExt()
+		})
+		setTimeout(() => {
+			appState.setLoadingBar(false)
+			loaded = true
+		}, 500)
+	})
+
+	onDestroy(() => {
+		unlistenRefreshWorkerExt?.()
+		extensionLoadingBar = false
+		appState.setActionPanel(undefined)
+	})
+</script>
+
+{#if loadingBar}
+	<LoadingBar class="fixed left-0 top-0 w-full" color="white" />
+{/if}
+{#if loaded && listViewContent !== undefined}
+	<Templates.ListView
+		bind:searchTerm
+		bind:searchBarPlaceholder
+		{pbar}
+		{listViewContent}
+		{loading}
+		onGoBack={goBack}
+		onListScrolledToBottom={() => {
+			workerAPI?.onListScrolledToBottom()
+		}}
+		onEnterKeyPressed={() => {
+			workerAPI?.onEnterPressedOnSearchBar()
+		}}
+		onListItemSelected={(value: string) => {
+			workerAPI?.onListItemSelected(value)
+		}}
+		onSearchTermChange={(searchTerm) => {
+			workerAPI?.onSearchTermChange(searchTerm)
+		}}
+		onHighlightedItemChanged={(value) => {
+			workerAPI?.onHighlightedListItemChanged(value)
+			if (listViewContent?.defaultAction) {
+				appState.setDefaultAction(listViewContent.defaultAction)
+			}
+			if (listViewContent?.actions) {
+				appState.setActionPanel(listViewContent.actions)
+			}
+		}}
+	>
+		{#snippet footer()}
+			<GlobalCommandPaletteFooter
+				defaultAction={$appState.defaultAction}
+				actionPanel={$appState.actionPanel}
+				onDefaultActionSelected={() => {
+					workerAPI?.onEnterPressedOnSearchBar()
+				}}
+				onActionSelected={(value) => {
+					workerAPI?.onActionSelected(value)
+				}}
+			/>
+		{/snippet}
+	</Templates.ListView>
+{:else if loaded && formViewContent !== undefined}
+	<Templates.FormView {formViewContent} onGoBack={goBack} />
+{:else if loaded && markdownViewContent !== undefined}
+	<Templates.MarkdownView {markdownViewContent} onGoBack={goBack} />
+{/if}
diff --git a/apps/desktop/src/routes/extension/ui-worker/+page.ts b/apps/desktop/src/routes/extension/ui-worker/+page.ts
new file mode 100644
index 0000000..711ac4a
--- /dev/null
+++ b/apps/desktop/src/routes/extension/ui-worker/+page.ts
@@ -0,0 +1,76 @@
+import { db, unregisterExtensionWindow } from "@kksh/api/commands"
+import type { Ext as ExtInfoInDB, ExtPackageJsonExtra } from "@kksh/api/models"
+import { loadExtensionManifestFromDisk } from "@kksh/extension"
+import { error as sbError } from "@sveltejs/kit"
+import { join } from "@tauri-apps/api/path"
+import { exists, readTextFile } from "@tauri-apps/plugin-fs"
+import { error } from "@tauri-apps/plugin-log"
+import { goto } from "$app/navigation"
+import { toast } from "svelte-sonner"
+import type { PageLoad } from "./$types"
+
+// : Promise<{
+// 	extPath: string
+// 	scriptPath: string
+// 	// workerScript: string
+// 	pkgJsonPath: string
+// 	cmdName: string
+// 	loadedExt: ExtPackageJsonExtra
+// 	extInfoInDB: ExtInfoInDB
+// }>
+
+export const load: PageLoad = async ({ url }) => {
+	// both query parameter must exist
+	const extPath = url.searchParams.get("extPath")
+	const cmdName = url.searchParams.get("cmdName")
+	if (!extPath || !cmdName) {
+		toast.error("Invalid extension path or url")
+		error("Invalid extension path or url")
+		goto("/")
+	}
+
+	let _loadedExt: ExtPackageJsonExtra | undefined
+	try {
+		_loadedExt = await loadExtensionManifestFromDisk(await join(extPath!, "package.json"))
+	} catch (err) {
+		error(`Error loading extension manifest: ${err}`)
+		toast.error("Error loading extension manifest", {
+			description: `${err}`
+		})
+		goto("/")
+	}
+	const loadedExt = _loadedExt!
+	const extInfoInDB = await db.getUniqueExtensionByPath(loadedExt.extPath)
+	if (!extInfoInDB) {
+		toast.error("Unexpected Error", {
+			description: `Extension ${loadedExt.kunkun.identifier} not found in database. Run Troubleshooter.`
+		})
+		goto("/")
+	}
+	const pkgJsonPath = await join(extPath!, "package.json")
+	if (!(await exists(extPath!))) {
+		sbError(404, `Extension not found at ${extPath}`)
+	}
+	if (!(await exists(pkgJsonPath))) {
+		sbError(404, `Extension package.json not found at ${pkgJsonPath}`)
+	}
+
+	const cmd = loadedExt.kunkun.templateUiCmds.find((cmd) => cmd.name === cmdName)
+	if (!cmd) {
+		sbError(404, `Command ${cmdName} not found in extension ${loadedExt.kunkun.identifier}`)
+	}
+	const scriptPath = await join(loadedExt.extPath, cmd.main)
+	if (!(await exists(scriptPath))) {
+		sbError(404, `Command script not found at ${scriptPath}`)
+	}
+	// const workerScript = await readTextFile(scriptPath)
+	return {
+		extPath: extPath!,
+		pkgJsonPath,
+		scriptPath,
+		// workerScript,
+		cmdName: cmdName!,
+		loadedExt,
+		extInfoInDB: extInfoInDB!
+	}
+}
diff --git a/apps/desktop/src/routes/settings/add-dev-extension/+page.svelte b/apps/desktop/src/routes/settings/add-dev-extension/+page.svelte
new file mode 100644
index 0000000..e8d9d1b
--- /dev/null
+++ b/apps/desktop/src/routes/settings/add-dev-extension/+page.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import AddDevExtForm from "@/components/standalone/settings/AddDevExtForm.svelte"
+	import DevExtPathForm from "@/components/standalone/settings/DevExtPathForm.svelte"
+	import { appConfig, extensions } from "@/stores"
+	import { goBackOnEscape } from "@/utils/key"
+	import { goBack } from "@/utils/route"
+	import * as extAPI from "@kksh/extension"
+	import { installFromNpmPackageName } from "@kksh/extension"
+	import { Button, Separator } from "@kksh/svelte5"
+	import { StrikeSeparator } from "@kksh/ui"
+	import { open as openFileSelector } from "@tauri-apps/plugin-dialog"
+	import * as fs from "@tauri-apps/plugin-fs"
+	import { goto } from "$app/navigation"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import { toast } from "svelte-sonner"
+	import * as v from "valibot"
+</script>
+
+<svelte:window on:keydown={goBackOnEscape} />
+<Button variant="outline" size="icon" class="fixed left-2 top-2 z-50" onclick={goBack}>
+	<ArrowLeftIcon class="h-4 w-4" />
+</Button>
+<div class="absolute left-0 top-0 h-10 w-screen" data-tauri-drag-region></div>
+<main class="container pt-10">
+	<h2 class="text-2xl font-bold">Add Dev Extension</h2>
+	<small>
+		There are 4 options to install an extension in developer mode. Either load it from your local
+		tarball file, a tarball remote URL, npm package name or load from a remote URL.
+	</small>
+	<AddDevExtForm />
+</main>
diff --git a/apps/desktop/src/routes/settings/set-dev-ext-path/+page.svelte b/apps/desktop/src/routes/settings/set-dev-ext-path/+page.svelte
index 867100e..5d5d0ee 100644
--- a/apps/desktop/src/routes/settings/set-dev-ext-path/+page.svelte
+++ b/apps/desktop/src/routes/settings/set-dev-ext-path/+page.svelte
@@ -6,8 +6,8 @@
 	import { ArrowLeftIcon } from "lucide-svelte"
 </script>
 
-<svelte:window on:keydown|preventDefault={goBackOnEscape} />
-<Button variant="outline" size="icon" class="absolute left-2 top-2 z-50" onclick={goBack}>
+<svelte:window on:keydown={goBackOnEscape} />
+<Button variant="outline" size="icon" class="fixed left-2 top-2 z-50" onclick={goBack}>
 	<ArrowLeftIcon class="h-4 w-4" />
 </Button>
 <div class="absolute left-0 top-0 h-10 w-screen" data-tauri-drag-region></div>
diff --git a/apps/desktop/src/routes/troubleshooters/extension-loading/+page.svelte b/apps/desktop/src/routes/troubleshooters/extension-loading/+page.svelte
new file mode 100644
index 0000000..df4901d
--- /dev/null
+++ b/apps/desktop/src/routes/troubleshooters/extension-loading/+page.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+	import { goBackOnEscape } from "@/utils/key"
+	import { goBack } from "@/utils/route"
+	import { db } from "@kksh/api/commands"
+	import { loadExtensionManifestFromDisk } from "@kksh/extension"
+	import { Button, Dialog, ScrollArea, Table } from "@kksh/svelte5"
+	import { join } from "@tauri-apps/api/path"
+	import { exists } from "@tauri-apps/plugin-fs"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import { onMount } from "svelte"
+	import { toast } from "svelte-sonner"
+	import { open } from "tauri-plugin-shellx-api"
+
+	type Result = {
+		identifier: string
+		path: string
+		error?: string
+	}
+
+	let results = $state<Result[]>([])
+	let isDialogOpen = $state(false)
+	let errorMsg = $state<string | undefined>()
+
+	const sortedResults = $derived.by(() =>
+		results.slice().sort((a, b) => {
+			return a.error ? -1 : 1
+		})
+	)
+
+	async function check() {
+		results = []
+		const tmpResults = []
+		const extensions = await db.getAllExtensions()
+		for (const ext of extensions) {
+			if (!ext.path) continue
+			const _exists = await exists(ext.path)
+			let error: string | undefined = undefined
+			if (!_exists) {
+				error = `Extension path (${ext.path}) does not exist`
+			}
+			const pkgJsonPath = await join(ext.path, "package.json")
+			const _pkgJsonExists = await exists(pkgJsonPath)
+			if (!_pkgJsonExists) {
+				error = `Extension package.json (${pkgJsonPath}) does not exist`
+			}
+			try {
+				const manifest = await loadExtensionManifestFromDisk(pkgJsonPath)
+			} catch (err: any) {
+				error = `Failed to load manifest from ${pkgJsonPath}: ${err.message}`
+			}
+
+			tmpResults.push({
+				identifier: ext.identifier,
+				path: ext.path,
+				error
+			})
+		}
+		results = tmpResults
+		const numErrors = results.filter((r) => r.error).length
+		const toastFn = numErrors > 0 ? toast.error : toast.info
+		toastFn(`${numErrors} errors found`, {
+			description: numErrors > 0 ? "Click on an error to see more details" : undefined
+		})
+	}
+
+	function onErrorClick(errMsg?: string) {
+		if (errMsg) {
+			isDialogOpen = true
+			errorMsg = errMsg
+		} else {
+			toast.info("No error message")
+		}
+	}
+
+	onMount(() => {
+		check()
+	})
+</script>
+
+<svelte:window on:keydown={goBackOnEscape} />
+<Button variant="outline" size="icon" class="absolute left-2 top-2 z-50" onclick={goBack}>
+	<ArrowLeftIcon class="h-4 w-4" />
+</Button>
+<div class="absolute left-0 top-0 h-10 w-screen" data-tauri-drag-region></div>
+<div class="container pt-10">
+	<h1 class="text-2xl font-bold">Extension Loading Troubleshooter</h1>
+	<Button class="my-2" onclick={check}>Check</Button>
+	<Dialog.Root bind:open={isDialogOpen}>
+		<Dialog.Content class="sm:max-w-[425px]">
+			<Dialog.Header>
+				<Dialog.Title>Error Details</Dialog.Title>
+			</Dialog.Header>
+			{errorMsg}
+		</Dialog.Content>
+	</Dialog.Root>
+	<Table.Root>
+		<Table.Caption>A list of your extensions.</Table.Caption>
+		<Table.Header>
+			<Table.Row>
+				<Table.Head class="">Identifier</Table.Head>
+				<Table.Head>Path</Table.Head>
+				<Table.Head>Error</Table.Head>
+			</Table.Row>
+		</Table.Header>
+		<Table.Body>
+			{#each sortedResults as row}
+				<Table.Row>
+					<Table.Cell class="font-medium"><pre>{row.identifier}</pre></Table.Cell>
+					<Table.Cell class="">
+						<button onclick={() => open(row.path)} class="text-left">
+							<pre class="cursor-pointer text-wrap">{row.path}</pre>
+						</button>
+					</Table.Cell>
+					<Table.Cell class="text-right">
+						<button onclick={() => onErrorClick(row.error)}>
+							{row.error ? "⚠️" : "✅"}
+						</button>
+					</Table.Cell>
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<style>
+	:global(body) {
+		overflow-x: hidden;
+	}
+</style>
diff --git a/apps/desktop/src/routes/troubleshooters/extension-window/+page.svelte b/apps/desktop/src/routes/troubleshooters/extension-window/+page.svelte
new file mode 100644
index 0000000..08c0044
--- /dev/null
+++ b/apps/desktop/src/routes/troubleshooters/extension-window/+page.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { winExtMap } from "@/stores"
+	import { goBackOnEscape, goBackOnEscapeClearSearchTerm } from "@/utils/key"
+	import { goBack, goHome } from "@/utils/route"
+	import { getExtLabelMap, unregisterExtensionWindow } from "@kksh/api/commands"
+	import type { ExtensionLabelMap } from "@kksh/api/models"
+	import { Button, Checkbox, ScrollArea } from "@kksh/svelte5"
+	import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
+	import { ArrowLeftIcon, TrashIcon } from "lucide-svelte"
+	import { onMount } from "svelte"
+	import { toast } from "svelte-sonner"
+
+	const appWin = getCurrentWebviewWindow()
+	let winLabelMap = $state<ExtensionLabelMap>({})
+	let refreshEverySecond = $state(true)
+	let refreshCount = $state(0)
+
+	async function refresh() {
+		const extLabelMap = await getExtLabelMap()
+		winLabelMap = extLabelMap
+		refreshCount++
+	}
+
+	function refreshWinLabelMapRecursively() {
+		setTimeout(async () => {
+			await refresh()
+			if (refreshEverySecond) {
+				refreshWinLabelMapRecursively()
+			}
+		}, 1000)
+	}
+
+	onMount(async () => {
+		const extLabelMap = await getExtLabelMap()
+		winLabelMap = extLabelMap
+		refreshCount = 1
+	})
+
+	$effect(() => {
+		if (refreshEverySecond) {
+			refreshWinLabelMapRecursively()
+		}
+	})
+
+	function unregisterWindow(label: string) {
+		// winExtMap
+		// 	.unregisterExtensionFromWindow(label)
+		unregisterExtensionWindow(label)
+			.then(() => {
+				toast.success("Unregistered window")
+			})
+			.catch((err) => {
+				toast.error("Failed to unregister window", { description: err.message })
+			})
+	}
+
+	function onKeyDown(e: KeyboardEvent) {
+		if (e.key === "Escape") {
+			if (appWin.label === "main") {
+				goHome()
+			} else {
+				appWin.close()
+			}
+		}
+	}
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+<Button variant="outline" size="icon" class="absolute left-2 top-2 z-50" onclick={goBack}>
+	<ArrowLeftIcon class="h-4 w-4" />
+</Button>
+<main class="container h-screen w-screen pt-10">
+	<div class="flex items-center justify-between space-x-2">
+		<div class="flex items-center space-x-2">
+			<Checkbox id="refreshEverySecond" bind:checked={refreshEverySecond} />
+			<label
+				for="refreshEverySecond"
+				class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+			>
+				Refresh Every Second
+			</label>
+		</div>
+		<span class="flex items-center space-x-2">
+			<Button size="sm" onclick={refresh}>Refresh</Button>
+			<span>Refreshed {refreshCount} times</span>
+		</span>
+	</div>
+	<ScrollArea class="py-5" orientation="both">
+		{#each Object.entries(winLabelMap) as [label, content]}
+			<li>
+				<span class="flex gap-2">
+					<strong>Label:</strong>
+					<pre class="text-lime">{label}</pre>
+				</span>
+				<ul class="pl-5">
+					{#each Object.entries(content) as [key, value]}
+						<li>
+							<span class="flex gap-2">
+								<strong>{key}:</strong>
+								<pre class="text-lime">{value}</pre>
+							</span>
+						</li>
+					{/each}
+				</ul>
+				<Button variant="destructive" size="icon" onclick={() => unregisterWindow(label)}>
+					<TrashIcon />
+				</Button>
+			</li>
+		{/each}
+	</ScrollArea>
+</main>
diff --git a/apps/desktop/tailwind.config.ts b/apps/desktop/tailwind.config.ts
index fbc57f7..95c4e88 100644
--- a/apps/desktop/tailwind.config.ts
+++ b/apps/desktop/tailwind.config.ts
@@ -1,3 +1,4 @@
+import typography from "@tailwindcss/typography"
 import type { Config } from "tailwindcss"
 import tailwindcssAnimate from "tailwindcss-animate"
 import { fontFamily } from "tailwindcss/defaultTheme"
@@ -9,7 +10,7 @@ const config: Config = {
 		"./node_modules/@kksh/ui/src/**/*.{html,js,svelte,ts}",
 		"../../node_modules/@kksh/svelte5/src/**/*.{html,js,svelte,ts}"
 	],
-	safelist: ["dark"],
+	safelist: ["dark", "bg-red-500/30"],
 	theme: {
 		container: {
 			center: true,
@@ -94,7 +95,7 @@ const config: Config = {
 			}
 		}
 	},
-	plugins: [tailwindcssAnimate]
+	plugins: [tailwindcssAnimate, typography]
 }
 
 export default config
diff --git a/apps/desktop/tsconfig.json b/apps/desktop/tsconfig.json
index 593dc19..a2288c7 100644
--- a/apps/desktop/tsconfig.json
+++ b/apps/desktop/tsconfig.json
@@ -1,19 +1,20 @@
 {
-  "extends": "./.svelte-kit/tsconfig.json",
-  "compilerOptions": {
-    "allowJs": true,
-    "checkJs": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true,
-    "moduleResolution": "bundler"
-  }
-  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-  // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
-  //
-  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-  // from the referenced tsconfig.json - TypeScript does not merge them in
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	},
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+	"include": ["src/**/*"]
 }
diff --git a/apps/desktop/uno.config.ts b/apps/desktop/uno.config.ts
new file mode 100644
index 0000000..7ca4602
--- /dev/null
+++ b/apps/desktop/uno.config.ts
@@ -0,0 +1,5 @@
+import { defineConfig, presetAttributify, presetTagify, presetUno } from "unocss"
+
+export default defineConfig({
+	presets: [presetUno(), presetAttributify(), presetTagify()]
+})
diff --git a/apps/desktop/vite.config.js b/apps/desktop/vite.config.js
index 7aa392c..09ea201 100644
--- a/apps/desktop/vite.config.js
+++ b/apps/desktop/vite.config.js
@@ -1,4 +1,5 @@
 import { sveltekit } from "@sveltejs/kit/vite"
+import UnoCSS from "unocss/vite"
 import { defineConfig } from "vite"
 
 // @ts-expect-error process is a nodejs global
@@ -6,8 +7,7 @@ const host = process.env.TAURI_DEV_HOST
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
-	plugins: [sveltekit()],
-
+	plugins: [UnoCSS(), sveltekit()],
 	// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
 	//
 	// 1. prevent vite from obscuring rust errors
diff --git a/package.json b/package.json
index c980dcc..382d7fb 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
 	"devDependencies": {
 		"@ianvs/prettier-plugin-sort-imports": "^4.3.1",
 		"@kksh/api": "workspace:*",
-		"@kksh/svelte5": "0.1.2-beta.4",
+		"@kksh/svelte5": "0.1.2-beta.8",
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.7",
 		"prettier-plugin-tailwindcss": "^0.6.8",
diff --git a/packages/api/jsr.json b/packages/api/jsr.json
index 334de1a..37cc4c3 100644
--- a/packages/api/jsr.json
+++ b/packages/api/jsr.json
@@ -1,7 +1,7 @@
 {
 	"$schema": "https://jsr.io/schema/config-file.v1.json",
 	"name": "@kunkun/api",
-	"version": "0.0.27",
+	"version": "0.0.28",
 	"license": "MIT",
 	"exports": {
 		".": "./src/index.ts",
diff --git a/packages/api/package.json b/packages/api/package.json
index f171610..96ea468 100644
--- a/packages/api/package.json
+++ b/packages/api/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@kksh/api",
-	"version": "0.0.27",
+	"version": "0.0.28",
 	"type": "module",
 	"exports": {
 		".": "./src/index.ts",
diff --git a/packages/api/src/commands/extension.ts b/packages/api/src/commands/extension.ts
index d7b02d0..66481bb 100644
--- a/packages/api/src/commands/extension.ts
+++ b/packages/api/src/commands/extension.ts
@@ -26,7 +26,6 @@ export function registerExtensionWindow(options: {
 }
 
 export function unregisterExtensionWindow(label: string): Promise<void> {
-	console.log("unregisterExtensionWindow", label)
 	return invoke(generateJarvisPluginCommand("unregister_extension_window"), {
 		label
 	})
diff --git a/packages/api/src/commands/system.ts b/packages/api/src/commands/system.ts
index 953f7fb..40746be 100644
--- a/packages/api/src/commands/system.ts
+++ b/packages/api/src/commands/system.ts
@@ -295,7 +295,7 @@ export const rawSystemCommands = [
 	}
 ]
 
-export async function getSystemCommands(): Promise<SysCommand[]> {
+export function getSystemCommands(): SysCommand[] {
 	return rawSystemCommands
 		.filter(async (cmd) => cmd.platforms.includes(platform())) // Filter out system commands that are not supported on the current platform
 		.map((cmd) => ({
diff --git a/packages/api/src/constants.ts b/packages/api/src/constants.ts
index a3b8789..83fda7a 100644
--- a/packages/api/src/constants.ts
+++ b/packages/api/src/constants.ts
@@ -7,7 +7,7 @@ export enum KUNKUN_EXT_IDENTIFIER {
 }
 
 export const KUNKUN_DESKTOP_APP_SERVER_PORTS = [1566, 1567, 1568, 9559, 9560, 9561]
-export const DESKTOP_SERVICE_NAME = "Kunkun"
+export const DESKTOP_SERVICE_NAME = "kunkun"
 
 /* -------------------------------------------------------------------------- */
 /*                                  Deep Link                                 */
diff --git a/packages/api/src/dev/index.ts b/packages/api/src/dev/index.ts
index 196fc7b..dd04977 100644
--- a/packages/api/src/dev/index.ts
+++ b/packages/api/src/dev/index.ts
@@ -15,7 +15,7 @@ export function checkLocalKunkunService(port: number): Promise<boolean> {
 			return res.json()
 		})
 		.then((data) => {
-			return data["service_name"] === DESKTOP_SERVICE_NAME
+			return data["service_name"].toLowerCase() === DESKTOP_SERVICE_NAME.toLowerCase()
 		})
 		.catch((err) => {
 			// fetch fail, i.e. server not on this port
diff --git a/packages/api/src/models/extension.ts b/packages/api/src/models/extension.ts
index 0b1a150..4c7f2e6 100644
--- a/packages/api/src/models/extension.ts
+++ b/packages/api/src/models/extension.ts
@@ -41,6 +41,8 @@ export type Ext = InferOutput<typeof Ext>
 
 export enum CmdTypeEnum {
 	HeadlessWorker = "headless_worker",
+	Builtin = "builtin",
+	System = "system",
 	UiWorker = "ui_worker",
 	UiIframe = "ui_iframe",
 	QuickLink = "quick_link",
@@ -55,12 +57,18 @@ export const ExtCmd = object({
 	name: string(),
 	type: CmdType,
 	data: string(),
-	alias: optional(string()),
-	hotkey: optional(string()),
+	alias: nullable(optional(string())),
+	hotkey: nullable(optional(string())),
 	enabled: boolean()
 })
 export type ExtCmd = InferOutput<typeof ExtCmd>
 
+export const QuickLinkCmd = object({
+	...ExtCmd.entries,
+	data: object({ link: string(), icon: Icon })
+})
+export type QuickLinkCmd = InferOutput<typeof QuickLinkCmd>
+
 export const ExtData = object({
 	dataId: number(),
 	extId: number(),
diff --git a/packages/api/src/models/icon.ts b/packages/api/src/models/icon.ts
index 6639ba5..26872e9 100644
--- a/packages/api/src/models/icon.ts
+++ b/packages/api/src/models/icon.ts
@@ -1,4 +1,13 @@
-import { enum_, literal, object, string, type InferOutput } from "valibot"
+import {
+	boolean,
+	enum_,
+	literal,
+	nullable,
+	object,
+	optional,
+	string,
+	type InferOutput
+} from "valibot"
 import { NodeName, NodeNameEnum } from "./constants"
 
 /* -------------------------------------------------------------------------- */
@@ -16,7 +25,8 @@ export type IconType = InferOutput<typeof IconType>
 
 export const Icon = object({
 	type: IconType,
-	value: string()
+	value: string(),
+	invert: optional(boolean())
 })
 export type Icon = InferOutput<typeof Icon>
 export const IconNode = object({
diff --git a/packages/api/src/ui/client.ts b/packages/api/src/ui/client.ts
index c4aff94..d2a0d44 100644
--- a/packages/api/src/ui/client.ts
+++ b/packages/api/src/ui/client.ts
@@ -33,6 +33,7 @@ import type { fileSearch } from "../commands/fileSearch"
 import { type AppInfo } from "../models/apps"
 import type { LightMode, Position, Radius, ThemeColor } from "../models/styles"
 import type { DenoSysOptions } from "../permissions/schema"
+import type { MarkdownSchema } from "./worker"
 import { type IComponent } from "./worker/components/interfaces"
 import type { Markdown } from "./worker/components/markdown"
 import * as FormSchema from "./worker/schema/form"
@@ -116,7 +117,7 @@ export interface IToast {
 }
 
 export interface IUiWorker {
-	render: (view: IComponent<ListSchema.List | FormSchema.Form | Markdown>) => Promise<void>
+	render: (view: IComponent<ListSchema.List | FormSchema.Form | MarkdownSchema>) => Promise<void>
 	goBack: () => Promise<void>
 	showLoadingBar: (loading: boolean) => Promise<void>
 	setScrollLoading: (loading: boolean) => Promise<void>
diff --git a/packages/api/src/ui/worker/components/form-view.ts b/packages/api/src/ui/worker/components/form-view.ts
index 5f25a7c..7cb661c 100644
--- a/packages/api/src/ui/worker/components/form-view.ts
+++ b/packages/api/src/ui/worker/components/form-view.ts
@@ -145,6 +145,9 @@ export class Form implements IComponent<FormSchema.Form> {
 	constructor(model: OmitNodeName<FormSchema.Form & { fields: (AllFormFields | Form)[] }>) {
 		this.fields = model.fields
 		this.key = model.key
+		this.title = model.title
+		this.description = model.description
+		this.submitBtnText = model.submitBtnText
 	}
 
 	toModel(): FormSchema.Form {
diff --git a/packages/api/src/ui/worker/schema/form.ts b/packages/api/src/ui/worker/schema/form.ts
index 711dc82..7b1c125 100644
--- a/packages/api/src/ui/worker/schema/form.ts
+++ b/packages/api/src/ui/worker/schema/form.ts
@@ -65,7 +65,8 @@ export type BaseField = InferOutput<typeof BaseField>
 export const InputField = object({
 	...BaseField.entries,
 	type: optional(InputTypes),
-	component: optional(union([literal("textarea"), literal("default")]))
+	component: optional(union([literal("textarea"), literal("default")])),
+	default: optional(string())
 })
 export type InputField = InferOutput<typeof InputField>
 
@@ -74,7 +75,8 @@ export type InputField = InferOutput<typeof InputField>
 /* -------------------------------------------------------------------------- */
 export const NumberField = object({
 	...BaseField.entries,
-	nodeName: FormNodeName
+	nodeName: FormNodeName,
+	default: optional(number())
 })
 export type NumberField = InferOutput<typeof NumberField>
 
@@ -84,7 +86,8 @@ export type NumberField = InferOutput<typeof NumberField>
 // with zod enum
 export const SelectField = object({
 	...BaseField.entries,
-	options: array(string())
+	options: array(string()),
+	default: optional(string())
 })
 export type SelectField = InferOutput<typeof SelectField>
 
@@ -101,7 +104,8 @@ export type BooleanField = InferOutput<typeof BooleanField>
 /*                                    Date                                    */
 /* -------------------------------------------------------------------------- */
 export const DateField = object({
-	...BaseField.entries
+	...BaseField.entries,
+	default: optional(string())
 })
 export type DateField = InferOutput<typeof DateField>
 
@@ -121,14 +125,22 @@ export type ArrayField = InferOutput<typeof ArrayField>
 /* -------------------------------------------------------------------------- */
 export const FormField = union([
 	ArrayField, // this must be placed first, otherwise its content field won't be parsed
+	SelectField,
 	InputField,
 	NumberField,
-	SelectField,
 	BooleanField,
 	DateField
 ])
 export type FormField = InferOutput<typeof FormField>
 // export type Form = InferOutput<typeof Form>
+export const Form: GenericSchema<Form> = object({
+	nodeName: FormNodeName,
+	key: string(),
+	fields: array(union([lazy(() => Form), FormField])),
+	title: optional(string()),
+	description: optional(string()),
+	submitBtnText: optional(string())
+})
 export type Form = {
 	nodeName: FormNodeName
 	title?: string
@@ -137,8 +149,3 @@ export type Form = {
 	key: string
 	fields: (FormField | Form)[]
 }
-export const Form: GenericSchema<Form> = object({
-	nodeName: FormNodeName,
-	key: string(),
-	fields: array(union([lazy(() => Form), FormField]))
-})
diff --git a/packages/api/src/version.ts b/packages/api/src/version.ts
index ec7bba0..e056254 100644
--- a/packages/api/src/version.ts
+++ b/packages/api/src/version.ts
@@ -13,7 +13,7 @@ export const breakingChangesVersionCheckpoints = [
 const checkpointVersions = breakingChangesVersionCheckpoints.map((c) => c.version)
 const sortedCheckpointVersions = sort(checkpointVersions)
 
-export const version = "0.0.27"
+export const version = "0.0.28"
 
 export function isVersionBetween(v: string, start: string, end: string) {
 	const vCleaned = clean(v)
diff --git a/packages/extension/src/db.ts b/packages/extension/src/db.ts
index a6246ba..b76d7e4 100644
--- a/packages/extension/src/db.ts
+++ b/packages/extension/src/db.ts
@@ -1,5 +1,13 @@
 import { db } from "@kksh/api/commands"
-import { ExtPackageJson, ExtPackageJsonExtra } from "@kksh/api/models"
+import {
+	CmdTypeEnum,
+	ExtCmd,
+	ExtPackageJson,
+	ExtPackageJsonExtra,
+	Icon,
+	QuickLinkCmd
+} from "@kksh/api/models"
+import * as v from "valibot"
 
 export async function upsertExtension(extPkgJson: ExtPackageJson, extFullPath: string) {
 	const extInDb = await db.getUniqueExtensionByIdentifier(extPkgJson.kunkun.identifier)
@@ -12,3 +20,38 @@ export async function upsertExtension(extPkgJson: ExtPackageJson, extFullPath: s
 		})
 	}
 }
+
+export async function createQuickLinkCommand(name: string, link: string, icon: Icon) {
+	const extension = await db.getExtQuickLinks()
+	return db.createCommand({
+		extId: extension.extId,
+		name,
+		cmdType: CmdTypeEnum.QuickLink,
+		data: JSON.stringify({
+			link,
+			icon
+		}),
+		enabled: true
+	})
+}
+
+export async function getAllQuickLinkCommands(): Promise<QuickLinkCmd[]> {
+	const extension = await db.getExtQuickLinks()
+	const cmds = await db.getCommandsByExtId(extension.extId)
+	return cmds
+		.map((cmd) => {
+			try {
+				cmd.data = JSON.parse(cmd.data)
+				const parsedData = v.safeParse(QuickLinkCmd, cmd)
+				if (!parsedData.success) {
+					console.warn("Fail to parse quick link command", cmd)
+					console.error(v.flatten(parsedData.issues))
+					return null
+				}
+				return parsedData.output
+			} catch (error) {
+				return null
+			}
+		})
+		.filter((cmd) => cmd !== null)
+}
diff --git a/packages/extension/src/install.ts b/packages/extension/src/install.ts
index 0704f26..4a65756 100644
--- a/packages/extension/src/install.ts
+++ b/packages/extension/src/install.ts
@@ -88,6 +88,11 @@ export async function installTarballUrl(tarballUrl: string, extsDir: string): Pr
 	}
 }
 
+/**
+ * Install dev extension from a local directory
+ * @param extPath Path to the extension directory
+ * @returns
+ */
 export async function installDevExtensionDir(extPath: string): Promise<ExtPackageJsonExtra> {
 	const manifestPath = await path.join(extPath, "package.json")
 	if (!(await fs.exists(manifestPath))) {
diff --git a/packages/extensions/demo-worker-template-ext/.gitignore b/packages/extensions/demo-worker-template-ext/.gitignore
new file mode 100644
index 0000000..dc364a9
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/.gitignore
@@ -0,0 +1,176 @@
+# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
+
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Caches
+
+.cache
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store
+extensions_support/
diff --git a/packages/extensions/demo-worker-template-ext/CHANGELOG.md b/packages/extensions/demo-worker-template-ext/CHANGELOG.md
new file mode 100644
index 0000000..f8fbdad
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/CHANGELOG.md
@@ -0,0 +1,8 @@
+# demo-template-extension
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @kksh/api@0.0.9
diff --git a/packages/extensions/demo-worker-template-ext/README.md b/packages/extensions/demo-worker-template-ext/README.md
new file mode 100644
index 0000000..eb93d75
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/README.md
@@ -0,0 +1,15 @@
+# tempalte-ext-worker
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.1.20. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
diff --git a/packages/extensions/demo-worker-template-ext/buffer.ts b/packages/extensions/demo-worker-template-ext/buffer.ts
new file mode 100644
index 0000000..4f1715a
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/buffer.ts
@@ -0,0 +1,3 @@
+import Buffer from "node:buffer"
+
+console.log(Buffer)
diff --git a/packages/extensions/demo-worker-template-ext/build.ts b/packages/extensions/demo-worker-template-ext/build.ts
new file mode 100644
index 0000000..d85f263
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/build.ts
@@ -0,0 +1,31 @@
+import { watch } from "fs"
+import { join } from "path"
+import { refreshTemplateWorkerExtension } from "@kksh/api/dev"
+import { $ } from "bun"
+
+async function build() {
+	try {
+		// await $`bun build --minify --target=browser --outdir=./dist ./src/index.ts`
+		const output = await Bun.build({
+			entrypoints: ["./src/index.ts"],
+			outdir: "./dist",
+			minify: true,
+			target: "browser"
+		})
+		console.log(output)
+		await refreshTemplateWorkerExtension()
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+const srcDir = join(import.meta.dir, "src")
+
+await build()
+
+if (Bun.argv.includes("dev")) {
+	console.log(`Watching ${srcDir} for changes...`)
+	watch(srcDir, { recursive: true }, async (event, filename) => {
+		await build()
+	})
+}
diff --git a/packages/extensions/demo-worker-template-ext/deno-src/deno.json b/packages/extensions/demo-worker-template-ext/deno-src/deno.json
new file mode 100644
index 0000000..5861f34
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/deno-src/deno.json
@@ -0,0 +1,5 @@
+{
+	"imports": {
+		"@kunkun/api": "jsr:@kunkun/api@^0.0.14"
+	}
+}
diff --git a/packages/extensions/demo-worker-template-ext/deno-src/deno.lock b/packages/extensions/demo-worker-template-ext/deno-src/deno.lock
new file mode 100644
index 0000000..be78ed3
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/deno-src/deno.lock
@@ -0,0 +1,23 @@
+{
+  "version": "4",
+  "specifiers": {
+    "jsr:@hk/comlink-stdio@~0.1.5": "0.1.5",
+    "jsr:@kunkun/api@^0.0.14": "0.0.14"
+  },
+  "jsr": {
+    "@hk/comlink-stdio@0.1.5": {
+      "integrity": "1fd67d5d53ab4571e745584d66b480b5be402f6ca6b2c9e591230fa1d23f85ee"
+    },
+    "@kunkun/api@0.0.14": {
+      "integrity": "a21a255748164992ca93fc292451677261dffca336922a6bed7eb8703c6e880b",
+      "dependencies": [
+        "jsr:@hk/comlink-stdio"
+      ]
+    }
+  },
+  "workspace": {
+    "dependencies": [
+      "jsr:@kunkun/api@^0.0.14"
+    ]
+  }
+}
diff --git a/packages/extensions/demo-worker-template-ext/deno-src/rpc.ts b/packages/extensions/demo-worker-template-ext/deno-src/rpc.ts
new file mode 100644
index 0000000..0e09884
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/deno-src/rpc.ts
@@ -0,0 +1,13 @@
+import { expose } from "@kunkun/api/runtime/deno"
+
+export interface API {
+	add(a: number, b: number): Promise<number>
+	subtract(a: number, b: number): Promise<number>
+}
+
+// Define your API methods
+export const apiMethods: API = {
+	add: async (a: number, b: number) => a + b,
+	subtract: async (a: number, b: number) => a - b
+}
+expose(apiMethods)
diff --git a/packages/extensions/demo-worker-template-ext/package.json b/packages/extensions/demo-worker-template-ext/package.json
new file mode 100644
index 0000000..68de2ad
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/package.json
@@ -0,0 +1,114 @@
+{
+  "$schema": "../../schema/manifest-json-schema.json",
+  "name": "demo-template-extension",
+  "version": "0.0.3",
+  "type": "module",
+  "kunkun": {
+    "name": "Demo Template Extension",
+    "shortDescription": "Demo Template Extension",
+    "longDescription": "Demo Template Extension",
+    "identifier": "demo-worker-template-ext",
+    "permissions": [
+      "fetch:all",
+      "shell:kill",
+      "security:mac:all",
+      {
+        "permission": "shell:deno:execute",
+        "allow": [
+          {
+            "path": "$EXTENSION/deno-src/deno-script.ts",
+            "env": [
+              "npm_package_config_libvips",
+              "CWD"
+            ],
+            "ffi": "*",
+            "read": [
+              "$DESKTOP"
+            ]
+          },
+          {
+            "path": "$EXTENSION/deno-src/rpc.ts",
+            "ffi": "*"
+          }
+        ]
+      },
+      {
+        "permission": "open:file",
+        "allow": [
+          {
+            "path": "$EXTENSION/src/deno-script.ts"
+          }
+        ]
+      },
+      "shell:stdin-write",
+      {
+        "permission": "shell:execute",
+        "allow": [
+          {
+            "cmd": {
+              "program": "ls",
+              "args": [
+                "-l"
+              ]
+            }
+          },
+          {
+            "cmd": {
+              "program": "bash",
+              "args": [
+                "-c",
+                ".+"
+              ]
+            }
+          },
+          {
+            "cmd": {
+              "program": "deno",
+              "args": [
+                "-A",
+                ".+",
+                ".+"
+              ]
+            }
+          }
+        ]
+      }
+    ],
+    "demoImages": [],
+    "icon": {
+      "type": "iconify",
+      "value": "carbon:demo"
+    },
+    "customUiCmds": [],
+    "templateUiCmds": [
+      {
+        "name": "Demo Worker Template",
+        "main": "dist/index.js",
+        "cmds": []
+      }
+    ]
+  },
+  "scripts": {
+    "dev": "bun build.ts dev",
+    "build": "bun build.ts"
+  },
+  "dependencies": {
+    "@hk/comlink-stdio": "npm:@jsr/hk__comlink-stdio@^0.1.6",
+    "@kksh/api": "workspace:*",
+    "@kunkun/api": "npm:@jsr/kunkun__api@^0.0.13"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/bun": "latest",
+    "rollup-plugin-visualizer": "^5.12.0"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "files": [
+    "./dist",
+    ".gitignore"
+  ]
+}
diff --git a/packages/extensions/demo-worker-template-ext/rollup.config.js b/packages/extensions/demo-worker-template-ext/rollup.config.js
new file mode 100644
index 0000000..640b20b
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/rollup.config.js
@@ -0,0 +1,20 @@
+import { visualizer } from "rollup-plugin-visualizer";
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from "@rollup/plugin-typescript";
+import commonjs from '@rollup/plugin-commonjs';
+
+
+export default {
+  input: "src/index.ts",
+  output: {
+    dir: "dist",
+    format: "esm",
+  },
+  plugins: [
+    typescript(),
+    resolve(),
+    commonjs(),
+    // put it the last one
+    visualizer(),
+  ],
+};
diff --git a/packages/extensions/demo-worker-template-ext/src/index.ts b/packages/extensions/demo-worker-template-ext/src/index.ts
new file mode 100644
index 0000000..60105e1
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/src/index.ts
@@ -0,0 +1,181 @@
+import type { RPCChannel } from "@hk/comlink-stdio/browser"
+import {
+	Action,
+	app,
+	Child,
+	expose,
+	Form,
+	fs,
+	Icon,
+	IconEnum,
+	List,
+	Markdown,
+	open,
+	path,
+	security,
+	shell,
+	toast,
+	ui,
+	WorkerExtension
+} from "@kksh/api/ui/worker"
+import { IconType } from "@kunkun/api/models"
+
+const nums = Array.from({ length: 20 }, (_, i) => i + 1)
+const categories = ["Suggestion", "Advice", "Idea"]
+const itemsTitle = nums.map((n) => categories.map((c) => `${c} ${n}`)).flat()
+const allItems: List.Item[] = itemsTitle.map(
+	(title) =>
+		new List.Item({
+			title,
+			value: title,
+			defaultAction: "Item Default Action"
+		})
+)
+
+class ExtensionTemplate extends WorkerExtension {
+	async onBeforeGoBack() {
+		console.log("onBeforeGoBack")
+		// console.log(`Try killing pid: ${this.apiProcess?.pid}`)
+		// await this.apiProcess?.kill()
+		// console.log("apiProcess killed")
+	}
+	async onFormSubmit(value: Record<string, any>): Promise<void> {
+		console.log("Form submitted", value)
+	}
+
+	async onEnterPressedOnSearchBar(): Promise<void> {
+		console.log("Enter pressed on search bar")
+	}
+
+	async load() {
+		// console.log("Check screen capture permission:", await security.mac.checkScreenCapturePermission())
+		// await security.mac.revealSecurityPane("AllFiles")
+		// console.log(await security.mac.verifyFingerprint())
+		ui.setSearchBarPlaceholder("Search for items")
+		ui.showLoadingBar(true)
+		setTimeout(() => {
+			ui.showLoadingBar(false)
+		}, 2000)
+		const { rpcChannel, process } = await shell.createDenoRpcChannel<
+			{},
+			{
+				add(a: number, b: number): Promise<number>
+				subtract(a: number, b: number): Promise<number>
+			}
+		>("$EXTENSION/deno-src/rpc.ts", [], {}, {})
+		const api = rpcChannel.getApi()
+		await api.add(1, 2).then(console.log)
+		await api.subtract(1, 2).then(console.log)
+		await process.kill()
+		const extPath = await path.extensionDir()
+		// console.log("Extension path:", extPath)
+		const tagList = new List.ItemDetailMetadataTagList({
+			title: "Tag List Title",
+			tags: [
+				new List.ItemDetailMetadataTagListItem({
+					text: "red",
+					color: "#ff0000"
+				}),
+				new List.ItemDetailMetadataTagListItem({
+					text: "yellow",
+					color: "#ffff00"
+				})
+			]
+		})
+		const list = new List.List({
+			items: allItems,
+			defaultAction: "Top Default Action",
+			detail: new List.ItemDetail({
+				children: [
+					new List.ItemDetailMetadata([
+						new List.ItemDetailMetadataLabel({
+							title: "Label Title",
+							text: "Label Text"
+						}),
+						new List.ItemDetailMetadataLabel({
+							title: "Label Title",
+							text: "Label Text",
+							icon: new Icon({
+								type: IconType.enum.Iconify,
+								value: "mingcute:appstore-fill"
+							})
+						}),
+						new List.ItemDetailMetadataSeparator(),
+						new List.ItemDetailMetadataLabel({
+							title: "Label Title",
+							text: "Label Text"
+						}),
+						new List.ItemDetailMetadataLink({
+							title: "Link Title",
+							text: "Link Text",
+							url: "https://github.com/huakunshen"
+						}),
+						new List.ItemDetailMetadataLabel({
+							title: "Label Title",
+							text: "Label Text"
+						}),
+						tagList
+					]),
+					new Markdown(`
+# Hello World
+<img src="https://github.com/huakunshen.png" />
+<img src="https://github.com/huakunshen.png" />
+<img src="https://github.com/huakunshen.png" />
+							`)
+				],
+				width: 50
+			}),
+			actions: new Action.ActionPanel({
+				items: [
+					new Action.Action({
+						title: "Action 1",
+						value: "action 1",
+						icon: new Icon({ type: IconType.enum.Iconify, value: "material-symbols:add-reaction" })
+					}),
+					new Action.Action({ title: "Action 2", value: "action 2" }),
+					new Action.Action({ title: "Action 3", value: "action 3" }),
+					new Action.Action({ title: "Action 4", value: "action 4" })
+				]
+			})
+		})
+
+		return ui.render(list)
+	}
+
+	async onSearchTermChange(term: string): Promise<void> {
+		return ui.render(
+			new List.List({
+				// items: allItems.filter((item) => item.title.toLowerCase().includes(term.toLowerCase())),
+				inherits: ["items", "sections"],
+				defaultAction: "Top Default Action",
+				detail: new List.ItemDetail({
+					children: [
+						new List.ItemDetailMetadata([
+							new List.ItemDetailMetadataLabel({
+								title: "Label Title",
+								text: "Label Text"
+							})
+						])
+						// 						new Markdown(`
+						// ## Search results for "${term}"
+						// <img src="https://github.com/huakunshen.png" />
+						// <img src="https://github.com/huakunshen.png" />
+						// <img src="https://github.com/huakunshen.png" />
+						// 						`)
+					],
+					width: term.length > 3 ? 70 : 30
+				})
+			})
+		)
+	}
+
+	async onListItemSelected(value: string): Promise<void> {
+		console.log("Item selected:", value)
+	}
+
+	async onActionSelected(value: string): Promise<void> {
+		console.log("Action selected:", value)
+	}
+}
+
+expose(new ExtensionTemplate())
diff --git a/packages/extensions/demo-worker-template-ext/tsconfig.json b/packages/extensions/demo-worker-template-ext/tsconfig.json
new file mode 100644
index 0000000..49ca356
--- /dev/null
+++ b/packages/extensions/demo-worker-template-ext/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": false,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}
\ No newline at end of file
diff --git a/packages/extensions/form-view/.gitignore b/packages/extensions/form-view/.gitignore
new file mode 100644
index 0000000..8c67a06
--- /dev/null
+++ b/packages/extensions/form-view/.gitignore
@@ -0,0 +1,177 @@
+# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
+
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Caches
+
+.cache
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store
+extensions_support/
+
diff --git a/packages/extensions/form-view/README.md b/packages/extensions/form-view/README.md
new file mode 100644
index 0000000..e1c7cc7
--- /dev/null
+++ b/packages/extensions/form-view/README.md
@@ -0,0 +1,125 @@
+# Kunkun Template UI Extension
+
+This is a template for a template UI extension. (UI follows pre-defined template)
+
+[./src/index.ts](./src/index.ts) is the default entrypoint for the extension. You can import any other files in this file, but the build process will bundle them into a single file.
+
+## Pros and Cons
+
+This type of extension is suitable for simple use cases, such as a list or form. All components are pre-defined, so there is not much room for customization. If you want more flexibility on the UI, consider using [Custom UI Extension](https://docs.kunkun.sh/extensions/custom-ui-ext/), which requires some frontend knowledge but gives you full control over the UI.
+
+Read documentation at https://docs.kunkun.sh/extensions/worker-template/
+
+Make sure you understand what this type of extension is capable of.
+
+### Pros
+
+- Simple to develop, no need for any frontend knowledge.
+- Small bundle size (~40KB)
+  - [Custom UI Extension](https://docs.kunkun.sh/extensions/custom-ui-ext/) are usually larger than 300KB.
+
+### Cons
+
+- Limited UI customization. Not suitable for complex use cases.
+
+Consider [Custom UI Extension](https://docs.kunkun.sh/extensions/custom-ui-ext/) if you need more complex UI.
+
+## Development
+
+```bash
+pnpm install
+```
+
+Start extension in development mode. Every save will trigger a hot reload in Kunkun.
+
+```bash
+pnpm dev
+```
+
+- During development, right click in Kunkun to open the developer tools.
+  - Error messages will be shown in the console.
+  - If you got any permission error while calling Kunknu's APIs, make sure you've declared the permission in `package.json`. Then go back to home page and enter the extension again to re-apply the permission.
+- To develop and preview the extension in Kunkun, you need to run the `Add Dev Extension` command in Kunkun, and register this extension's path.
+
+Build the extension. Your extension source code can contain many files, but the build process will bundle them into a single file.
+
+```bash
+pnpm build
+# Due to Bun's bug, if you are on windows, and install dependencies with pnpm, you may get error during build.
+# Try install dependencies with bun or npm instead.
+```
+
+## i18n
+
+[./src/i18n](./src/i18n/) contains optional internationalization support starter code.
+
+If you want to support i18n, you can use the `t` function to translate the strings in the extension.
+
+User's language setting is available via `app.language()`.
+
+```ts
+import { app } from "@kksh/api/ui/worker"
+import { setupI18n, t } from "./src/i18n"
+
+setupI18n("zh")
+console.log(t("welcome"))
+
+setupI18n(await app.language())
+console.log(t("welcome"))
+```
+
+## Add More Commands
+
+If you want to add more template worker extension commands, simply modify the `entrypoints` array in [./build.ts](./build.ts).
+
+Then in `package.json`, register the new command.
+
+## Verify Build and Publish
+
+```bash
+pnpm build # make sure the build npm script works
+npx kksh@latest verify # Verify some basic settings
+npx kksh@latest verify --publish # Verify some basic settings before publishing
+```
+
+It is recommended to build the extension with the same environment our CI uses.
+
+The docker image used by our CI is `huakunshen/kunkun-ext-builder:latest`.
+
+You can use the following command to build the extension with the same environment our CI uses.
+This requires you to have docker installed, and the shell you are using has access to it via `docker` command.
+
+```bash
+npx kksh@latest build # Build the extension with
+```
+
+`pnpm` is used to install dependencies and build the extension.
+
+The docker image environment also has `node`, `pnpm`, `npm`, `bun`, `deno` installed.
+If your build failed, try debug with `huakunshen/kunkun-ext-builder:latest` image in interative mode and bind your extension volume to `/workspace`.
+
+After build successfully, you should find a tarball file ends with `.tgz` in the root of your extension.
+The tarball is packaged with `npm pack` command. You can uncompress it to see if it contains all the necessary files.
+
+This tarball is the final product that will be published and installed in Kunkun. You can further verify your extension by installing this tarball directly in Kunkun.
+
+After verifying the tarball, it's ready to be published.
+
+Fork [KunkunExtensions](https://github.com/kunkunsh/KunkunExtensions) repo, add your extension to the `extensions` directory, and create a PR.
+
+Once CI passed and PR merged, you can use your extension in Kunkun.
+
+## Potential Error
+
+Our CI uses `pnpm` to install dependencies. If you are on Windows, you may get error during build.
+
+See issue https://github.com/kunkunsh/kunkun/issues/78
+
+`bun` had problem building the extension when `pnpm` is used to install dependencies.
+
+### Options
+
+1. Install an older version of `bun` (1.1.27 should work)
+2. Install dependencies with `bun` or `npm` instead of `pnpm`
+
+Our CI always builds the extension with on Linux and shouldn't have this problem.
diff --git a/packages/extensions/form-view/build.ts b/packages/extensions/form-view/build.ts
new file mode 100644
index 0000000..a99deb5
--- /dev/null
+++ b/packages/extensions/form-view/build.ts
@@ -0,0 +1,30 @@
+import { watch } from "fs"
+import { join } from "path"
+import { refreshTemplateWorkerExtension } from "@kksh/api/dev"
+import { $ } from "bun"
+
+const entrypoints = ["./src/index.ts"]
+
+async function build() {
+	try {
+		for (const entrypoint of entrypoints) {
+			await $`bun build --minify --target=browser --outdir=./dist ${entrypoint}`
+		}
+		if (Bun.argv.includes("dev")) {
+			await refreshTemplateWorkerExtension()
+		}
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+const srcDir = join(import.meta.dir, "src")
+
+await build()
+
+if (Bun.argv.includes("dev")) {
+	console.log(`Watching ${srcDir} for changes...`)
+	watch(srcDir, { recursive: true }, async (event, filename) => {
+		await build()
+	})
+}
diff --git a/packages/extensions/form-view/package.json b/packages/extensions/form-view/package.json
new file mode 100644
index 0000000..d31bc05
--- /dev/null
+++ b/packages/extensions/form-view/package.json
@@ -0,0 +1,47 @@
+{
+	"$schema": "https://schema.kunkun.sh",
+	"name": "form-view",
+	"version": "0.0.2",
+	"type": "module",
+	"kunkun": {
+		"name": "Form View",
+		"shortDescription": "A Worker Extension Template",
+		"longDescription": "A Worker Extension Template",
+		"identifier": "form-view",
+		"permissions": [
+			"fetch:all",
+			"clipboard:read-all"
+		],
+		"demoImages": [],
+		"icon": {
+			"type": "iconify",
+			"value": "fluent:form-multiple-28-filled"
+		},
+		"customUiCmds": [],
+		"templateUiCmds": [
+			{
+				"name": "Dev Form View",
+				"main": "dist/index.js",
+				"cmds": []
+			}
+		]
+	},
+	"scripts": {
+		"dev": "bun build.ts dev",
+		"build": "bun build.ts"
+	},
+	"dependencies": {
+		"@kksh/api": "workspace:*",
+		"i18next": "^23.15.1"
+	},
+	"devDependencies": {
+		"@types/bun": "latest"
+	},
+	"peerDependencies": {
+		"typescript": "^5.0.0"
+	},
+	"files": [
+		"./dist",
+		".gitignore"
+	]
+}
diff --git a/packages/extensions/form-view/src/i18n/en.ts b/packages/extensions/form-view/src/i18n/en.ts
new file mode 100644
index 0000000..331e9f1
--- /dev/null
+++ b/packages/extensions/form-view/src/i18n/en.ts
@@ -0,0 +1,5 @@
+const en = {
+	welcome: "Welcome to Kunkun"
+}
+export default en
+export type Translation = typeof en
diff --git a/packages/extensions/form-view/src/i18n/index.ts b/packages/extensions/form-view/src/i18n/index.ts
new file mode 100644
index 0000000..2f0e1c8
--- /dev/null
+++ b/packages/extensions/form-view/src/i18n/index.ts
@@ -0,0 +1,20 @@
+import i18next from "i18next"
+import en, { type Translation } from "./en"
+import zh from "./zh"
+
+export function setupI18n(language: "en" | "zh" = "en") {
+	i18next.init({
+		resources: {
+			en: {
+				translation: en
+			},
+			zh: {
+				translation: zh
+			}
+		},
+		lng: language, // default language
+		fallbackLng: "en"
+	})
+}
+
+export const t = (key: keyof Translation, options?: any) => i18next.t(key, options)
diff --git a/packages/extensions/form-view/src/i18n/zh.ts b/packages/extensions/form-view/src/i18n/zh.ts
new file mode 100644
index 0000000..dc3ab95
--- /dev/null
+++ b/packages/extensions/form-view/src/i18n/zh.ts
@@ -0,0 +1,5 @@
+import type { Translation } from "./en"
+
+export default {
+	welcome: "欢迎来到Kunkun"
+} satisfies Translation
diff --git a/packages/extensions/form-view/src/index.ts b/packages/extensions/form-view/src/index.ts
new file mode 100644
index 0000000..f6b4d2c
--- /dev/null
+++ b/packages/extensions/form-view/src/index.ts
@@ -0,0 +1,95 @@
+import {
+	Action,
+	app,
+	expose,
+	Form,
+	fs,
+	Icon,
+	IconEnum,
+	List,
+	Markdown,
+	path,
+	shell,
+	toast,
+	ui,
+	WorkerExtension
+} from "@kksh/api/ui/worker"
+
+class ExtensionTemplate extends WorkerExtension {
+	async onFormSubmit(value: Record<string, any>): Promise<void> {
+		console.log("Form submitted", value)
+		toast.success(`Form submitted: ${JSON.stringify(value)}`)
+	}
+	async load() {
+		const markdown = new Markdown(`# Hello World
+<img src="https://github.com/huakunshen.png" />`)
+		// markdown.toModel
+		return ui.render(markdown)
+		const form = new Form.Form({
+			title: "Form 1",
+			key: "form1",
+			submitBtnText: "Download",
+			fields: [
+				new Form.DateField({
+					key: "birthday",
+					label: "Date of Birth",
+					hideLabel: false,
+					description: "Enter your date of birth"
+				}),
+				new Form.NumberField({
+					key: "age",
+					label: "Age",
+					default: 18,
+					placeholder: "Enter your age",
+					optional: true,
+					description: "Enter your age"
+				}),
+				new Form.InputField({
+					key: "name",
+					label: "Name",
+					default: "Huakun"
+				}),
+				new Form.InputField({
+					key: "name2",
+					label: "Name 2"
+				}),
+				new Form.BooleanField({
+					key: "isActive",
+					label: "Is Active",
+					description: "Is the user active?"
+				}),
+				new Form.SelectField({
+					key: "gender",
+					label: "Gender",
+					options: ["Male", "Female", "Other"],
+					description: "Select your gender"
+				})
+			]
+		})
+		console.log(form)
+		console.log(form.toModel())
+		return ui.render(form)
+	}
+
+	async onActionSelected(actionValue: string): Promise<void> {
+		switch (actionValue) {
+			case "open":
+				break
+
+			default:
+				break
+		}
+	}
+
+	onSearchTermChange(term: string): Promise<void> {
+		console.log("Search term changed to:", term)
+		return Promise.resolve()
+	}
+
+	onListItemSelected(value: string): Promise<void> {
+		console.log("Item selected:", value)
+		return Promise.resolve()
+	}
+}
+
+expose(new ExtensionTemplate())
diff --git a/packages/extensions/form-view/tsconfig.json b/packages/extensions/form-view/tsconfig.json
new file mode 100644
index 0000000..49ca356
--- /dev/null
+++ b/packages/extensions/form-view/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": false,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}
\ No newline at end of file
diff --git a/packages/schema/package.json b/packages/schema/package.json
index e3070c8..0b33136 100644
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@@ -15,8 +15,7 @@
 	},
 	"devDependencies": {
 		"@gcornut/valibot-json-schema": "^0.42.0",
-		"@types/bun": "latest",
-		"supabase": ">=1.8.1"
+		"@types/bun": "latest"
 	},
 	"peerDependencies": {
 		"@kksh/supabase": "workspace:*",
@@ -25,7 +24,6 @@
 	"dependencies": {
 		"@aws-sdk/client-s3": "^3.583.0",
 		"@kksh/api": "workspace:*",
-		"@supabase/supabase-js": "^2.43.4",
 		"valibot": "^0.40.0"
 	}
 }
diff --git a/packages/schema/scripts/upload-schema-to-supabase.ts b/packages/schema/scripts/upload-schema-to-supabase.ts
index f4bf48a..eddd837 100644
--- a/packages/schema/scripts/upload-schema-to-supabase.ts
+++ b/packages/schema/scripts/upload-schema-to-supabase.ts
@@ -1,10 +1,9 @@
 import { ExtPackageJson } from "@kksh/api/models"
-import { type Database } from "@kksh/supabase"
-import { createClient } from "@supabase/supabase-js"
+import { createSB } from "@kksh/supabase"
 import { parse, string } from "valibot"
 import { getJsonSchema } from "../src"
 
-const supabase = createClient<Database>(
+const supabase = createSB(
 	parse(string(), process.env.SUPABASE_URL),
 	parse(string(), process.env.SUPABASE_SERVICE_ROLE_KEY)
 )
diff --git a/packages/supabase/package.json b/packages/supabase/package.json
index 4248fdd..d4cf8bf 100644
--- a/packages/supabase/package.json
+++ b/packages/supabase/package.json
@@ -8,7 +8,8 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@kksh/api": "workspace:*"
+		"@kksh/api": "workspace:*",
+		"@supabase/supabase-js": "^2.46.1"
 	},
 	"devDependencies": {
 		"@types/bun": "latest"
diff --git a/packages/supabase/src/index.ts b/packages/supabase/src/index.ts
index 9285d65..09aae5e 100644
--- a/packages/supabase/src/index.ts
+++ b/packages/supabase/src/index.ts
@@ -2,7 +2,11 @@ import type { Database } from "@kksh/api/supabase/types"
 import { createClient } from "@supabase/supabase-js"
 
 export function createSB(supabaseUrl: string, supabaseAnonKey: string) {
-	return createClient<Database>(supabaseUrl, supabaseAnonKey)
+	return createClient<Database>(supabaseUrl, supabaseAnonKey, {
+		auth: {
+			flowType: "pkce"
+		}
+	})
 }
 export { SupabaseAPI } from "./api"
 
diff --git a/packages/types/src/appConfig.ts b/packages/types/src/appConfig.ts
index 31a2dec..289adc0 100644
--- a/packages/types/src/appConfig.ts
+++ b/packages/types/src/appConfig.ts
@@ -23,6 +23,6 @@ export type PersistedAppConfig = v.InferOutput<typeof PersistedAppConfig>
 
 export type AppConfig = PersistedAppConfig & {
 	isInitialized: boolean
-	extensionPath?: string
+	extensionsInstallDir?: string
 	platform: Platform
 }
diff --git a/packages/types/src/appState.ts b/packages/types/src/appState.ts
index dd9c9f4..4a0539c 100644
--- a/packages/types/src/appState.ts
+++ b/packages/types/src/appState.ts
@@ -1,4 +1,9 @@
+import { Action as ActionSchema } from "@kksh/api/models"
+
 export interface AppState {
 	searchTerm: string
 	highlightedCmd: string
+	loadingBar: boolean
+	defaultAction: string
+	actionPanel?: ActionSchema.ActionPanel
 }
diff --git a/packages/ui/components.json b/packages/ui/components.json
index f10b563..33c48e0 100644
--- a/packages/ui/components.json
+++ b/packages/ui/components.json
@@ -8,10 +8,10 @@
 	},
 	"aliases": {
 		"components": "@kksh/ui/src/components",
-		"utils": "@kksh/ui/src/utils",
+		"utils": "@kksh/ui/utils",
 		"ui": "@kksh/ui/src/components/ui",
 		"hooks": "@kksh/ui/src/hooks"
 	},
 	"typescript": true,
 	"registry": "https://next.shadcn-svelte.com/registry"
-}
+}
\ No newline at end of file
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 55cca6d..2a6149b 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -34,24 +34,31 @@
 		"lint": "eslint ."
 	},
 	"devDependencies": {
+		"@iconify/svelte": "^4.0.2",
 		"@kksh/api": "workspace:*",
+		"@kksh/svelte5": "^0.1.2-beta.8",
 		"@types/bun": "latest",
-		"bits-ui": "1.0.0-next.36",
+		"bits-ui": "1.0.0-next.45",
 		"clsx": "^2.1.1",
+		"formsnap": "2.0.0-next.1",
 		"lucide-svelte": "^0.454.0",
 		"mode-watcher": "^0.4.1",
 		"paneforge": "1.0.0-next.1",
 		"shiki": "^1.22.2",
 		"svelte-radix": "^2.0.1",
 		"svelte-sonner": "^0.3.28",
+		"sveltekit-superforms": "^2.20.0",
 		"tailwind-merge": "^2.5.4",
 		"tailwind-variants": "^0.2.1",
 		"tailwindcss": "^3.4.14",
-		"tailwindcss-animate": "^1.0.7"
+		"tailwindcss-animate": "^1.0.7",
+		"zod": "^3.23.8"
 	},
 	"dependencies": {
 		"@formkit/auto-animate": "^0.8.2",
+		"@internationalized/date": "^3.5.6",
 		"@std/semver": "npm:@jsr/std__semver@^1.0.3",
-		"gsap": "^3.12.5"
+		"gsap": "^3.12.5",
+		"svelte-markdown": "^0.4.1"
 	}
 }
diff --git a/packages/ui/src/components/common/IconMultiplexer.svelte b/packages/ui/src/components/common/IconMultiplexer.svelte
index e76760e..74996ee 100644
--- a/packages/ui/src/components/common/IconMultiplexer.svelte
+++ b/packages/ui/src/components/common/IconMultiplexer.svelte
@@ -12,17 +12,37 @@
 </script>
 
 {#if icon.type === IconEnum.RemoteUrl}
-	<img loading="lazy" class={cn("", className)} src={icon.value} alt="" {...restProps} />
+	<img
+		loading="lazy"
+		class={cn("", className, { invert: icon.invert })}
+		src={icon.value}
+		alt=""
+		{...restProps}
+	/>
 {:else if icon.type === IconEnum.Iconify}
-	<Icon icon={icon.value} class={cn("", className)} {...restProps} />
+	<Icon icon={icon.value} class={cn("", className, { invert: icon.invert })} {...restProps} />
 {:else if icon.type === IconEnum.Base64PNG}
-	<img loading="lazy" src="data:image/png;base64, {icon.value}" alt="" {...restProps} />
+	<img
+		class={cn(className, { invert: icon.invert })}
+		loading="lazy"
+		src="data:image/png;base64, {icon.value}"
+		alt=""
+		{...restProps}
+	/>
 {:else if icon.type === IconEnum.Text}
-	<Button class={cn("shrink-0 text-center", className)} size="icon" {...restProps}>
+	<Button
+		class={cn("shrink-0 text-center", className, { invert: icon.invert })}
+		size="icon"
+		{...restProps}
+	>
 		{icon.value}
 	</Button>
 {:else if icon.type === IconEnum.Svg}
-	<span {...restProps}>{@html icon.value}</span>
+	<span {...restProps} class={cn(className, { invert: icon.invert })}>{@html icon.value}</span>
 {:else}
-	<Icon icon="mingcute:appstore-fill" class={cn("", className)} {...restProps} />
+	<Icon
+		icon="mingcute:appstore-fill"
+		class={cn("", className, { invert: icon.invert })}
+		{...restProps}
+	/>
 {/if}
diff --git a/packages/ui/src/components/common/IconSelector.svelte b/packages/ui/src/components/common/IconSelector.svelte
new file mode 100644
index 0000000..70576ab
--- /dev/null
+++ b/packages/ui/src/components/common/IconSelector.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { Icon, IconEnum, IconType } from "@kksh/api/models"
+	import { Button, Checkbox, Label, Select, Textarea } from "@kksh/svelte5"
+	import { cn } from "@kksh/ui/utils"
+	import { open } from "tauri-plugin-shellx-api"
+	import IconMultiplexer from "./IconMultiplexer.svelte"
+
+	let { icon = $bindable<Icon>(), class: className }: { icon?: Icon; class?: string } = $props()
+	const iconOptions: Record<string, IconType> = {
+		"Remote Url": IconEnum.RemoteUrl,
+		Iconify: IconEnum.Iconify,
+		Svg: IconEnum.Svg,
+		"Base64 PNG": IconEnum.Base64PNG
+	}
+	const iconOptionsArray = $derived(Object.entries(iconOptions))
+	const triggerContent = $derived(
+		iconOptionsArray.find(([_, value]) => value === icon.type)?.[0] ?? "Select a fruit"
+	)
+</script>
+
+<div class="flex flex-col gap-2">
+	<Select.Root type="single" name="icontype" bind:value={icon.type}>
+		<Select.Trigger class="w-[180px]">
+			{triggerContent}
+		</Select.Trigger>
+		<Select.Content>
+			<Select.Group>
+				<Select.GroupHeading>Icon Type</Select.GroupHeading>
+				{#each iconOptionsArray as [label, value]}
+					<Select.Item {value}>{label}</Select.Item>
+				{/each}
+			</Select.Group>
+		</Select.Content>
+	</Select.Root>
+	<Textarea bind:value={icon.value} placeholder="Icon Value" />
+	{#if icon.type === IconEnum.Iconify}
+		<Button onclick={() => open("https://icon-sets.iconify.design/")} size="sm" variant="secondary">
+			Pick Iconify icon name
+		</Button>
+	{/if}
+
+	<div class="flex items-center space-x-2">
+		<Checkbox id="terms" bind:checked={icon.invert} aria-labelledby="terms-label" />
+		<Label
+			id="terms-label"
+			for="terms"
+			class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+		>
+			Invert Icon Color
+		</Label>
+	</div>
+	<h2 class="font-semibold">Icon Preview</h2>
+	{#if icon.type && icon.value && icon.value.length > 0}
+		<IconMultiplexer class="h-12 w-12" {icon} />
+	{/if}
+</div>
diff --git a/packages/ui/src/components/common/IconSelectorDialog.svelte b/packages/ui/src/components/common/IconSelectorDialog.svelte
new file mode 100644
index 0000000..b6d537c
--- /dev/null
+++ b/packages/ui/src/components/common/IconSelectorDialog.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { Icon, IconEnum, IconType } from "@kksh/api/models"
+	import { Button, ButtonModule, Dialog, Input, Label, Select } from "@kksh/svelte5"
+	import { cn } from "@kksh/ui/utils"
+	import { ImageIcon } from "lucide-svelte"
+	import IconMultiplexer from "./IconMultiplexer.svelte"
+
+	const { icon, class: className }: { icon?: Icon; class?: string } = $props()
+	function onClick(e: MouseEvent) {
+		e.preventDefault()
+		e.stopPropagation()
+		console.log("clicked")
+	}
+
+	let iconType = $state<string>(icon?.type ?? IconEnum.Iconify)
+	const iconOptions: Record<string, IconType> = {
+		Iconify: IconEnum.Iconify,
+		"Remote Url": IconEnum.RemoteUrl,
+		Svg: IconEnum.Svg,
+		"Base64 PNG": IconEnum.Base64PNG,
+		Text: IconEnum.Text
+	}
+	const iconOptionsArray = $derived(Object.entries(iconOptions))
+	const triggerContent = $derived(
+		iconOptionsArray.find(([_, value]) => value === iconType)?.[0] ?? "Select a fruit"
+	)
+</script>
+
+<button class={cn("block h-12 w-12", className)} onclick={onClick}>
+	{#if icon}
+		<IconMultiplexer {icon} />
+	{:else}
+		<ImageIcon class="h-full w-full" />
+	{/if}
+</button>
+
+<Dialog.Root open={true}>
+	<Dialog.Trigger class={ButtonModule.buttonVariants({ variant: "outline" })}>
+		Select Icon
+	</Dialog.Trigger>
+	<Dialog.Content class="sm:max-w-[425px]">
+		<Dialog.Header>
+			<Dialog.Title>Select Icon</Dialog.Title>
+			<!-- <Dialog.Description></Dialog.Description> -->
+		</Dialog.Header>
+
+		<Select.Root type="single" name="icontype" bind:value={iconType}>
+			<Select.Trigger class="w-[180px]">
+				{triggerContent}
+			</Select.Trigger>
+			<Select.Content>
+				<Select.Group>
+					<Select.GroupHeading>Fruits</Select.GroupHeading>
+					{#each iconOptionsArray as [label, value]}
+						<Select.Item {value}>{label}</Select.Item>
+					{/each}
+				</Select.Group>
+			</Select.Content>
+		</Select.Root>
+
+		<!-- <div class="grid gap-4 py-4">
+			<div class="grid grid-cols-4 items-center gap-4">
+				<Label for="name" class="text-right">Name</Label>
+				<Input id="name" value="Pedro Duarte" class="col-span-3" />
+			</div>
+			<div class="grid grid-cols-4 items-center gap-4">
+				<Label for="username" class="text-right">Username</Label>
+				<Input id="username" value="@peduarte" class="col-span-3" />
+			</div>
+		</div> -->
+		<Dialog.Footer>
+			<Button type="submit">Save</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/packages/ui/src/components/common/IconSelectorForm.svelte b/packages/ui/src/components/common/IconSelectorForm.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/packages/ui/src/components/common/Kbd.svelte b/packages/ui/src/components/common/Kbd.svelte
new file mode 100644
index 0000000..f2c0b40
--- /dev/null
+++ b/packages/ui/src/components/common/Kbd.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import type { Snippet } from "svelte"
+
+	let { class: className, children }: { class?: string; children: Snippet } = $props()
+</script>
+
+<kbd
+	class={cn(
+		"text-md bg-muted flex h-5 w-5 min-w-5 items-center justify-center rounded-sm border p-1 font-mono",
+		className
+	)}
+>
+	{@render children()}
+</kbd>
diff --git a/packages/ui/src/components/common/LoadingBar.svelte b/packages/ui/src/components/common/LoadingBar.svelte
new file mode 100644
index 0000000..bb7fa44
--- /dev/null
+++ b/packages/ui/src/components/common/LoadingBar.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import type { HTMLAttributes } from "svelte/elements"
+
+	const {
+		class: className,
+		color = "white",
+		duration
+	}: { class?: string; color?: string; duration?: number } = $props()
+</script>
+
+<div class={cn("h-0.5 w-full", className)}>
+	<div class="relative h-full overflow-hidden">
+		<div class="loading-bar h-full" style="--color: {color}; --width: 30em"></div>
+	</div>
+</div>
+
+<style>
+	.loading-bar::before {
+		content: "";
+		position: absolute;
+		display: block;
+		width: var(--width);
+		height: 100%;
+		background: linear-gradient(
+			to right,
+			transparent,
+			var(--color) 40%,
+			var(--color) 60%,
+			transparent
+		);
+		opacity: 0.5;
+		animation: moveLoadingBar 2s linear infinite;
+	}
+	@keyframes moveLoadingBar {
+		0% {
+			left: calc(var(--width) * -1 / 2);
+		}
+		50% {
+			left: calc(100% - var(--width) / 2);
+		}
+		100% {
+			left: calc(var(--width) * -1 / 2);
+		}
+	}
+</style>
diff --git a/packages/ui/src/components/common/StrikeSeparator.svelte b/packages/ui/src/components/common/StrikeSeparator.svelte
new file mode 100644
index 0000000..e196b12
--- /dev/null
+++ b/packages/ui/src/components/common/StrikeSeparator.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Separator } from "@kksh/svelte5"
+	import { cn } from "@kksh/ui/utils"
+	import { type Snippet } from "svelte"
+
+	const { class: className, children }: { class?: string; children: Snippet } = $props()
+</script>
+
+<div
+	class={cn(
+		"flex cursor-default select-none items-center justify-center space-x-5 whitespace-nowrap",
+		className
+	)}
+>
+	<span class="w-full">
+		<Separator />
+	</span>
+	{@render children()}
+	<span class="w-full">
+		<Separator />
+	</span>
+</div>
diff --git a/packages/ui/src/components/common/TauriLink.svelte b/packages/ui/src/components/common/TauriLink.svelte
new file mode 100644
index 0000000..a29bf52
--- /dev/null
+++ b/packages/ui/src/components/common/TauriLink.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import type { Snippet } from "svelte"
+	import type { HTMLAttributes } from "svelte/elements"
+	import { open } from "tauri-plugin-shellx-api"
+
+	const {
+		href,
+		class: className = "",
+		children
+	}: {
+		href: string
+		class?: HTMLAttributes<HTMLAnchorElement>["class"]
+		children: Snippet
+	} = $props()
+
+	function handleClick() {
+		open(href)
+	}
+</script>
+
+<button
+	class={cn(
+		"text-left font-medium text-blue-600 hover:cursor-pointer hover:underline dark:text-blue-500",
+		className
+	)}
+	onclick={handleClick}
+>
+	{@render children?.()}
+</button>
diff --git a/packages/ui/src/components/common/date/DatePicker.svelte b/packages/ui/src/components/common/date/DatePicker.svelte
new file mode 100644
index 0000000..a241c62
--- /dev/null
+++ b/packages/ui/src/components/common/date/DatePicker.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date"
+	import { ButtonModule, Calendar, Popover } from "@kksh/svelte5"
+	import { cn } from "@kksh/ui/utils"
+	import CalendarIcon from "lucide-svelte/icons/calendar"
+
+	const df = new DateFormatter("en-US", {
+		dateStyle: "long"
+	})
+	let {
+		date = $bindable(),
+		value = $bindable(),
+		class: className
+	}: { date?: DateValue; value?: string; class?: string } = $props()
+	let contentRef = $state<HTMLElement | null>(null)
+	$effect(() => {
+		value = date ? date.toString() : ""
+	})
+</script>
+
+<Popover.Root>
+	<Popover.Trigger
+		class={cn(
+			ButtonModule.buttonVariants({
+				variant: "outline",
+				class: cn("w-[280px] justify-start text-left font-normal", className)
+			}),
+			!date && "text-muted-foreground"
+		)}
+	>
+		<CalendarIcon class="mr-2 size-4" />
+		{date ? df.format(date.toDate(getLocalTimeZone())) : "Pick a date"}
+	</Popover.Trigger>
+	<Popover.Content bind:ref={contentRef} class="w-auto p-0">
+		<Calendar.Calendar type="single" bind:value={date} />
+	</Popover.Content>
+</Popover.Root>
diff --git a/packages/ui/src/components/common/date/DatePickerWithPreset.svelte b/packages/ui/src/components/common/date/DatePickerWithPreset.svelte
new file mode 100644
index 0000000..d82e34b
--- /dev/null
+++ b/packages/ui/src/components/common/date/DatePickerWithPreset.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { DateFormatter, getLocalTimeZone, today, type DateValue } from "@internationalized/date"
+	import { Button, ButtonModule, Calendar, Popover, Select } from "@kksh/svelte5"
+	import { cn } from "@kksh/ui/utils"
+	import CalendarIcon from "lucide-svelte/icons/calendar"
+
+	const df = new DateFormatter("en-US", {
+		dateStyle: "long"
+	})
+
+	let {
+		date = $bindable(),
+		class: className,
+		value = $bindable()
+	}: { date?: DateValue; class?: string; value?: string } = $props()
+	const valueString = $derived(date ? df.format(date.toDate(getLocalTimeZone())) : "")
+	$effect(() => {
+		value = date ? date.toString() : ""
+	})
+	const items = [
+		{ value: 0, label: "Today" },
+		{ value: 1, label: "Tomorrow" },
+		{ value: 3, label: "In 3 days" },
+		{ value: 7, label: "In a week" }
+	]
+</script>
+
+<Popover.Root>
+	<Popover.Trigger
+		class={cn(
+			ButtonModule.buttonVariants({
+				variant: "outline",
+				class: "w-[280px] justify-start text-left font-normal"
+			}),
+			!date && "text-muted-foreground",
+			className
+		)}
+	>
+		<CalendarIcon class="mr-2 size-4" />
+		{date ? df.format(date.toDate(getLocalTimeZone())) : "Pick a date"}
+	</Popover.Trigger>
+	<Popover.Content class="flex w-auto flex-col space-y-2 p-2">
+		<Select.Root
+			type="single"
+			value={valueString}
+			controlledValue
+			onValueChange={(v) => {
+				if (!v) return
+				date = today(getLocalTimeZone()).add({ days: Number.parseInt(v) })
+			}}
+		>
+			<Select.Trigger>
+				{valueString}
+			</Select.Trigger>
+			<Select.Content>
+				{#each items as item}
+					<Select.Item value={`${item.value}`}>{item.label}</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
+		<div class="rounded-md border">
+			<Calendar.Calendar type="single" bind:value={date} />
+		</div>
+	</Popover.Content>
+</Popover.Root>
diff --git a/packages/ui/src/components/common/date/index.ts b/packages/ui/src/components/common/date/index.ts
new file mode 100644
index 0000000..70afd82
--- /dev/null
+++ b/packages/ui/src/components/common/date/index.ts
@@ -0,0 +1,2 @@
+export { default as DatePicker } from "./DatePicker.svelte"
+export { default as DatePickerWithPreset } from "./DatePickerWithPreset.svelte"
diff --git a/packages/ui/src/components/common/index.ts b/packages/ui/src/components/common/index.ts
index 9374b63..92920a6 100644
--- a/packages/ui/src/components/common/index.ts
+++ b/packages/ui/src/components/common/index.ts
@@ -1 +1,5 @@
 export { default as IconMultiplexer } from "./IconMultiplexer.svelte"
+export { default as IconSelector } from "./IconSelector.svelte"
+export { default as StrikeSeparator } from "./StrikeSeparator.svelte"
+export { default as LoadingBar } from "./LoadingBar.svelte"
+export * from "./date"
diff --git a/packages/ui/src/components/error/raw-error-json-preset.svelte b/packages/ui/src/components/error/raw-error-json-preset.svelte
index 8f13239..c02b244 100644
--- a/packages/ui/src/components/error/raw-error-json-preset.svelte
+++ b/packages/ui/src/components/error/raw-error-json-preset.svelte
@@ -1,22 +1,25 @@
 <script lang="ts">
+	import autoAnimate from "@formkit/auto-animate"
 	import Icon from "@iconify/svelte"
-	import { Button, ScrollArea } from "@kksh/svelte5"
+	import { Button, ButtonModule, Collapsible, ScrollArea } from "@kksh/svelte5"
 	import { Error, Layouts, Shiki } from "@kksh/ui"
+	import { ChevronsUpDown } from "lucide-svelte"
 	import { type Snippet } from "svelte"
+	import { fade, slide } from "svelte/transition"
 
 	const {
 		title,
 		message,
 		class: className,
 		rawJsonError,
-		onnGoBack,
-		footer
+		onGoBack,
+		footer: footer2
 	}: {
 		title: string
 		message: string
 		class?: string
 		rawJsonError: string
-		onnGoBack?: () => void
+		onGoBack?: () => void
 		footer?: Snippet
 	} = $props()
 
@@ -38,15 +41,27 @@
 <svelte:window on:keydown={handleKeyDown} on:keyup={handleKeyUp} />
 
 <Error.General {title} {message} class={className}>
-	<ScrollArea class="" orientation="both">
-		<Shiki class="" code={rawJsonError} lang="json" />
-	</ScrollArea>
+	<Collapsible.Root class="w-full space-y-2">
+		<div class="flex items-center justify-between space-x-4 px-4">
+			<h4 class="text-sm font-semibold">Raw Error JSON</h4>
+			<Collapsible.Trigger
+				class={ButtonModule.buttonVariants({ variant: "ghost", size: "sm", class: "w-9 p-0" })}
+			>
+				<ChevronsUpDown class="size-4" />
+			</Collapsible.Trigger>
+		</div>
+		<Collapsible.Content class="space-y-2">
+			<ScrollArea class="h-64" orientation="both">
+				<Shiki class="" code={rawJsonError} lang="json" />
+			</ScrollArea>
+		</Collapsible.Content>
+	</Collapsible.Root>
 	<br />
 	{#snippet footer()}
-		{#if footer}
-			{@render footer()}
+		{#if footer2}
+			{@render footer2()}
 		{:else}
-			<Button variant="default" class="w-full" onclick={onnGoBack} disabled={enterDown}>
+			<Button variant="default" class="w-full" onclick={onGoBack} disabled={enterDown}>
 				Go Back
 				<Icon icon="mi:enter" />
 			</Button>
diff --git a/packages/ui/src/components/extension/PermissionInspector.svelte b/packages/ui/src/components/extension/PermissionInspector.svelte
index d813696..3917046 100644
--- a/packages/ui/src/components/extension/PermissionInspector.svelte
+++ b/packages/ui/src/components/extension/PermissionInspector.svelte
@@ -20,7 +20,6 @@
 			<HoverCard.Root>
 				<HoverCard.Trigger class="flex items-center">
 					<IconMultiplexer
-						class="border"
 						icon={{
 							type: IconEnum.Iconify,
 							value: "material-symbols:info-outline"
diff --git a/packages/ui/src/components/extension/StoreExtDetail.svelte b/packages/ui/src/components/extension/StoreExtDetail.svelte
index 9ef7d0c..b29a909 100644
--- a/packages/ui/src/components/extension/StoreExtDetail.svelte
+++ b/packages/ui/src/components/extension/StoreExtDetail.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import autoAnimate from "@formkit/auto-animate"
 	import Icon from "@iconify/svelte"
-	import { ExtPackageJsonExtra, IconEnum, KunkunExtManifest } from "@kksh/api/models"
+	import { ExtPackageJson, IconEnum, KunkunExtManifest } from "@kksh/api/models"
 	import { type Tables } from "@kksh/api/supabase/types"
 	import { Button, ScrollArea, Separator } from "@kksh/svelte5"
 	import { Constants, IconMultiplexer } from "@kksh/ui"
@@ -26,7 +26,7 @@
 		imageDialogOpen = $bindable(false)
 	}: {
 		ext: Tables<"ext_publish">
-		installedExt?: ExtPackageJsonExtra
+		installedExt?: ExtPackageJson
 		manifest: KunkunExtManifest
 		demoImages: string[]
 		class?: string
@@ -116,7 +116,7 @@
 {/snippet}
 
 <div data-tauri-drag-region class="h-14"></div>
-<ScrollArea class="container pb-12">
+<ScrollArea class={cn("w-full pb-12", className)}>
 	<div class="flex items-center gap-4">
 		<span class="h-12 w-12">
 			<IconMultiplexer
@@ -125,8 +125,8 @@
 				data-flip-id={`${Constants.CLASSNAMES.EXT_LOGO}-${ext.identifier}`}
 			/>
 		</span>
-		<div>
-			<span class="flex items-center">
+		<div class="w-full">
+			<span class="flex w-full items-center" use:autoAnimate>
 				<strong class="ext-name text-xl">{manifest?.name}</strong>
 				{#if isInstalled}
 					<CircleCheckBigIcon class="ml-2 inline text-green-400" />
diff --git a/packages/ui/src/components/extension/index.ts b/packages/ui/src/components/extension/index.ts
index 5e813b7..6a2b402 100644
--- a/packages/ui/src/components/extension/index.ts
+++ b/packages/ui/src/components/extension/index.ts
@@ -1,3 +1,4 @@
 export { default as ExtListItem } from "./ExtListItem.svelte"
 export { default as StoreExtDetail } from "./StoreExtDetail.svelte"
 export { default as PermissionInspector } from "./PermissionInspector.svelte"
+export * as Templates from "./templates"
diff --git a/packages/ui/src/components/extension/templates/Markdown.svelte b/packages/ui/src/components/extension/templates/Markdown.svelte
new file mode 100644
index 0000000..29c09a7
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/Markdown.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import SvelteMarkdown from "svelte-markdown"
+
+	const { markdown, class: className }: { markdown: string; class?: string } = $props()
+</script>
+
+<div class={cn("prose dark:prose-invert", className)}>
+	<SvelteMarkdown source={markdown} />
+</div>
diff --git a/packages/ui/src/components/extension/templates/MarkdownView.svelte b/packages/ui/src/components/extension/templates/MarkdownView.svelte
new file mode 100644
index 0000000..1b758a5
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/MarkdownView.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { MarkdownSchema } from "@kksh/api/ui/worker"
+	import { Button } from "@kksh/svelte5"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import Markdown from "./Markdown.svelte"
+
+	const {
+		markdownViewContent,
+		onGoBack
+	}: {
+		markdownViewContent: MarkdownSchema
+		onGoBack?: () => void
+	} = $props()
+</script>
+
+<svelte:window
+	on:keydown={(e) => {
+		if (e.key === "Escape") {
+			onGoBack?.()
+		}
+	}}
+/>
+<Button class="fixed left-2 top-2" onclick={onGoBack} variant="outline" size="icon">
+	<ArrowLeftIcon />
+</Button>
+<main class="container my-5">
+	<Markdown markdown={markdownViewContent.content} />
+</main>
diff --git a/packages/ui/src/components/extension/templates/form-view.svelte b/packages/ui/src/components/extension/templates/form-view.svelte
new file mode 100644
index 0000000..431d1b0
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/form-view.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { FormNodeNameEnum, FormSchema } from "@kksh/api/ui/worker"
+	import { Button } from "@kksh/svelte5"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import Form from "./form.svelte"
+
+	let { formViewContent, onGoBack }: { formViewContent: FormSchema.Form; onGoBack: () => void } =
+		$props()
+</script>
+
+<div data-tauri-drag-region class="h-12 w-full"></div>
+<Button class="fixed left-2 top-2" size="icon" variant="outline" onclick={onGoBack}>
+	<ArrowLeftIcon />
+</Button>
+<main class="container flex flex-col gap-2 pb-4">
+	<h1 class="text-2xl font-bold">{formViewContent.title}</h1>
+	<Form {formViewContent} />
+</main>
+<!-- <pre>{JSON.stringify(formViewContent, null, 2)}</pre> -->
diff --git a/packages/ui/src/components/extension/templates/form.svelte b/packages/ui/src/components/extension/templates/form.svelte
new file mode 100644
index 0000000..7dbb913
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/form.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+	import type { DateValue } from "@internationalized/date"
+	import { FormNodeNameEnum, FormSchema } from "@kksh/api/ui/worker"
+	import { Button, Checkbox, Form, Input, Label, Select } from "@kksh/svelte5"
+	import { DatePickerWithPreset, Shiki } from "@kksh/ui"
+	import { buildFormSchema, cn } from "@kksh/ui/utils"
+	import { onMount } from "svelte"
+	import SuperDebug, { defaults, superForm } from "sveltekit-superforms"
+	import { valibot, valibotClient } from "sveltekit-superforms/adapters"
+	import * as v from "valibot"
+	import DatePicker from "../../common/date/DatePicker.svelte"
+	import TauriLink from "../../common/TauriLink.svelte"
+
+	let {
+		formViewContent,
+		class: className,
+		onSubmit
+	}: {
+		formViewContent: FormSchema.Form
+		class?: string
+		onSubmit?: (formData: Record<string, any>) => void
+	} = $props()
+	const formSchema = $derived(buildFormSchema(formViewContent))
+	onMount(() => {
+		console.log(formSchema)
+	})
+	const form = $derived(
+		superForm(defaults(valibot(formSchema)), {
+			validators: valibotClient(formSchema),
+			SPA: true,
+			onUpdate({ form, cancel }) {
+				cancel()
+				console.log($formData)
+				if (!form.valid) return
+				const parsedData = v.parse(formSchema, $formData)
+				console.log(parsedData)
+				onSubmit?.(parsedData)
+			}
+		})
+	)
+	const { form: formData, enhance, errors } = $derived(form)
+</script>
+
+{#snippet error(messages?: string[])}
+	{#if messages}
+		<ul>
+			{#each messages as message}
+				<li><small class="text-red-500">{message}</small></li>
+			{/each}
+		</ul>
+	{/if}
+{/snippet}
+{#key formViewContent}
+	<form class={cn("flex flex-col gap-2", className)} use:enhance>
+		{#each formViewContent.fields as field}
+			{@const _field = field as FormSchema.BaseField}
+			{#if _field.label && !_field.hideLabel}
+				<Label class="select-none" for={field.key}>{_field.label}</Label>
+			{/if}
+			{#if field.nodeName === FormNodeNameEnum.Number}
+				{@const field2 = field as FormSchema.NumberField}
+				<Input
+					type="number"
+					name={field.key}
+					bind:value={$formData[field.key]}
+					placeholder={field2.placeholder}
+				/>
+			{:else if field.nodeName === FormNodeNameEnum.Input}
+				{@const field2 = field as FormSchema.InputField}
+				<Input
+					type="text"
+					name={field2.key}
+					bind:value={$formData[field2.key]}
+					placeholder={field2.placeholder}
+				/>
+			{:else if field.nodeName === FormNodeNameEnum.Date}
+				{@const field2 = field as FormSchema.DateField}
+				<DatePickerWithPreset class="w-full" bind:value={$formData[field2.key]} />
+			{:else if field.nodeName === FormNodeNameEnum.Select}
+				{@const field2 = field as FormSchema.SelectField}
+				<Select.Root type="single" name="favoriteFruit" bind:value={$formData[field2.key]}>
+					<Select.Trigger class="w-80">
+						{$formData[field2.key] ? $formData[field2.key] : "Select"}
+					</Select.Trigger>
+					<Select.Content>
+						<Select.Group>
+							<!-- <Select.GroupHeading>Fruits</Select.GroupHeading> -->
+							{#each field2.options as option}
+								<Select.Item value={option} label={option}>{option}</Select.Item>
+							{/each}
+						</Select.Group>
+					</Select.Content>
+				</Select.Root>
+			{:else if field.nodeName === FormNodeNameEnum.Array}
+				<span>
+					Array is not supported yet
+					<TauriLink href="https://github.com/kunkunsh/kunkun/issues/19"
+						>Tracked at https://github.com/kunkunsh/kunkun/issues/19</TauriLink
+					>
+				</span>
+			{:else if field.nodeName === FormNodeNameEnum.Form}
+				<span>
+					Nested Form is not supported yet
+					<TauriLink href="https://github.com/kunkunsh/kunkun/issues/19"
+						>Tracked at https://github.com/kunkunsh/kunkun/issues/19</TauriLink
+					>
+				</span>
+			{:else if field.nodeName === FormNodeNameEnum.Boolean}
+				{@const field2 = field as FormSchema.InputField}
+				<div class="flex items-center space-x-2">
+					<Checkbox name={field2.key} bind:checked={$formData[field2.key]} />
+					<Label
+						id="terms-label"
+						for={field2.key}
+						class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+					>
+						{field2.description}
+					</Label>
+				</div>
+			{:else}
+				<span>
+					{field.nodeName} is not supported yet
+					<TauriLink href="https://github.com/kunkunsh/kunkun/issues/19"
+						>Tracked at https://github.com/kunkunsh/kunkun/issues/19</TauriLink
+					>
+				</span>
+			{/if}
+			{#if field.description}
+				<p class="text-muted-foreground select-none text-sm">{field.description}</p>
+			{/if}
+			{@render error($errors[field.key] as string[] | undefined)}
+		{/each}
+		<Button type="submit">{formViewContent.submitBtnText ?? "Submit"}</Button>
+	</form>
+{/key}
+<!-- <SuperDebug data={$formData} /> -->
diff --git a/packages/ui/src/components/extension/templates/index.ts b/packages/ui/src/components/extension/templates/index.ts
new file mode 100644
index 0000000..cce64b1
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/index.ts
@@ -0,0 +1,3 @@
+export { default as ListView } from "./list-view.svelte"
+export { default as FormView } from "./form-view.svelte"
+export { default as MarkdownView } from "./MarkdownView.svelte"
diff --git a/packages/ui/src/components/extension/templates/list-detail.svelte b/packages/ui/src/components/extension/templates/list-detail.svelte
new file mode 100644
index 0000000..11e3c89
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/list-detail.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { ListSchema, MarkdownSchema, NodeNameEnum } from "@kksh/api/ui/worker"
+	import Markdown from "./Markdown.svelte"
+	import Metadata from "./metadata/Metadata.svelte"
+
+	const { detail }: { detail: ListSchema.ItemDetail } = $props()
+</script>
+
+<div class="h-full overflow-auto">
+	{#each detail.children as child}
+		{#if child.nodeName === NodeNameEnum.Markdown}
+			<Markdown markdown={(child as MarkdownSchema).content} />
+		{:else if child.nodeName === NodeNameEnum.ListItemDetailMetadata}
+			<Metadata items={(child as ListSchema.ItemDetailMetadata).items} />
+		{:else}
+			<div>Unhandled Component</div>
+		{/if}
+	{/each}
+</div>
diff --git a/packages/ui/src/components/extension/templates/list-item.svelte b/packages/ui/src/components/extension/templates/list-item.svelte
new file mode 100644
index 0000000..07e885f
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/list-item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { List, ListSchema, WorkerExtension } from "@kksh/api/ui/worker"
+	import { Command } from "@kksh/svelte5"
+	import { IconMultiplexer } from "../../common"
+
+	let { item, onSelect }: { item: ListSchema.Item; onSelect?: () => void } = $props()
+</script>
+
+<Command.Item class="gap-2" {onSelect} value={JSON.stringify(item)}>
+	{#if item.icon}
+		<IconMultiplexer icon={item.icon} class="h-5 w-5" />
+	{/if}
+	<span class="truncate">{item.title}</span>
+	<span class="text-muted-foreground">{item.subTitle}</span>
+	<Command.Shortcut>
+		<div class="flex gap-2">
+			{#each item.accessories ?? [] as acc}
+				<span class="flex items-center gap-1">
+					{#if acc.icon}
+						<IconMultiplexer icon={acc.icon} class="h-4 w-4" />
+					{/if}
+					<span>{acc.text}</span>
+				</span>
+			{/each}
+		</div>
+	</Command.Shortcut>
+</Command.Item>
diff --git a/packages/ui/src/components/extension/templates/list-view.svelte b/packages/ui/src/components/extension/templates/list-view.svelte
new file mode 100644
index 0000000..e6eee25
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/list-view.svelte
@@ -0,0 +1,156 @@
+<script lang="ts">
+	import { ListSchema } from "@kksh/api/ui/worker"
+	import { Button, Command, Progress, Resizable } from "@kksh/svelte5"
+	import { CustomCommandInput } from "@kksh/ui/main"
+	import { commandScore } from "@kksh/ui/utils"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import { type PaneAPI } from "paneforge"
+	import { onMount, type Snippet } from "svelte"
+	import { StrikeSeparator } from "../../common"
+	import ListDetail from "./list-detail.svelte"
+	import ListItem from "./list-item.svelte"
+
+	let {
+		searchTerm = $bindable(""),
+		searchBarPlaceholder = $bindable(""),
+		pbar,
+		onGoBack,
+		onListScrolledToBottom,
+		onEnterKeyPressed,
+		onListItemSelected,
+		onSearchTermChange,
+		footer,
+		onHighlightedItemChanged,
+		loading,
+		listViewContent
+	}: {
+		searchTerm: string
+		searchBarPlaceholder: string
+		pbar: number | null
+		onGoBack?: () => void
+		onListScrolledToBottom?: () => void
+		onEnterKeyPressed?: () => void
+		onListItemSelected?: (value: string) => void
+		onSearchTermChange?: (searchTerm: string) => void
+		onHighlightedItemChanged?: (value: string) => void
+		footer: Snippet
+		loading: boolean
+		listViewContent: ListSchema.List
+	} = $props()
+	let mounted = $state(false)
+	let leftPane: PaneAPI | undefined
+	let rightPane: PaneAPI | undefined
+	let isScrolling = $state(false)
+	let highlightedValue = $state<string>("")
+	let privateSearchTerm = $state("")
+	// let detailWidth = $derived()
+	let prevDetailWidth = $state(0)
+
+	const detailWidth = $derived(listViewContent.detail ? (listViewContent.detail?.width ?? 70) : 0)
+
+	$effect(() => {
+		onHighlightedItemChanged?.(highlightedValue)
+	})
+
+	$effect(() => {
+		onSearchTermChange?.(searchTerm)
+	})
+
+	function onScroll(e: Event) {
+		const element = e.target as HTMLElement
+		if (!isScrolling && element?.scrollHeight - element?.scrollTop === element?.clientHeight) {
+			isScrolling = true
+			onListScrolledToBottom?.()
+			setTimeout(() => {
+				isScrolling = false
+			}, 500)
+		}
+	}
+
+	$effect(() => {
+		if (detailWidth != prevDetailWidth) {
+			// this watches width update from extension, when pane is resized manually, this will not trigger
+			prevDetailWidth = detailWidth
+			rightPane?.resize(detailWidth)
+		}
+	})
+</script>
+
+<Command.Root
+	class="h-screen w-full rounded-lg border shadow-md"
+	shouldFilter={listViewContent.filter !== "none"}
+	bind:value={highlightedValue}
+	filter={(value, search, keywords) => {
+		if (!value.startsWith("{")) {
+			return -1
+		}
+		const item = JSON.parse(value) as ListSchema.Item
+		return (
+			commandScore(item.title, search, keywords) +
+			(item.subTitle ? commandScore(item.subTitle, search, keywords) : 0)
+		)
+	}}
+>
+	<CustomCommandInput
+		bind:value={searchTerm}
+		placeholder={searchBarPlaceholder}
+		autofocus
+		onkeydown={(e) => {
+			if (e.key === "Enter") {
+				e.preventDefault()
+				onEnterKeyPressed?.()
+			} else if (e.key === "Escape") {
+				e.preventDefault()
+				if (searchTerm.length > 0) {
+					searchTerm = ""
+				} else {
+					onGoBack?.()
+				}
+			}
+		}}
+	>
+		{#snippet leftSlot()}
+			<Button variant="outline" size="icon" onclick={onGoBack}>
+				<ArrowLeftIcon class="h-4 w-4" />
+			</Button>
+		{/snippet}
+	</CustomCommandInput>
+	{#if pbar}
+		<Progress value={50} class="h-0.4 rounded-none" />
+	{/if}
+
+	<Resizable.PaneGroup direction="horizontal">
+		<Resizable.Pane bind:this={leftPane}>
+			<Command.List class="h-full max-h-screen" onscroll={onScroll}>
+				<Command.Empty>No results found.</Command.Empty>
+				{#each listViewContent.sections || [] as section}
+					<Command.Group heading={section.title}>
+						{#each section.items as item}
+							<ListItem {item} />
+						{/each}
+					</Command.Group>
+				{/each}
+				{#each listViewContent.items || [] as item}
+					<ListItem
+						{item}
+						onSelect={() => {
+							onListItemSelected?.(item.value)
+						}}
+					/>
+				{/each}
+				{#if loading}
+					<StrikeSeparator class="h-20">
+						<span>Loading</span>
+					</StrikeSeparator>
+				{/if}
+			</Command.List>
+		</Resizable.Pane>
+		<Resizable.Handle withHandle />
+		<Resizable.Pane defaultSize={detailWidth} bind:this={rightPane}>
+			{#if listViewContent.detail}
+				<ListDetail detail={listViewContent.detail} />
+			{/if}
+		</Resizable.Pane>
+	</Resizable.PaneGroup>
+	{@render footer?.()}
+</Command.Root>
diff --git a/packages/ui/src/components/extension/templates/metadata/Metadata.svelte b/packages/ui/src/components/extension/templates/metadata/Metadata.svelte
new file mode 100644
index 0000000..aa59477
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/metadata/Metadata.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import {
+		List,
+		ListSchema,
+		MarkdownSchema,
+		NodeNameEnum,
+		WorkerExtension
+	} from "@kksh/api/ui/worker"
+	import { Separator } from "@kksh/svelte5"
+	import Label from "./label.svelte"
+	import Link from "./link.svelte"
+	import Tags from "./tags.svelte"
+
+	const { items }: { items: ListSchema.ItemDetailMetadataItem[] } = $props()
+</script>
+
+<div class="px-3">
+	{#each items as item}
+		{#if item.nodeName === NodeNameEnum.ListItemDetailMetadataLabel}
+			<Label
+				title={(item as ListSchema.ItemDetailMetadataLabel).title}
+				text={(item as ListSchema.ItemDetailMetadataLabel).text}
+				icon={(item as ListSchema.ItemDetailMetadataLabel).icon}
+			/>
+		{/if}
+		{#if item.nodeName === NodeNameEnum.ListItemDetailMetadataSeparator}
+			<Separator />
+		{/if}
+		{#if item.nodeName === NodeNameEnum.ListItemDetailMetadataLink}
+			<Link
+				title={(item as ListSchema.ItemDetailMetadataLink).title}
+				text={(item as ListSchema.ItemDetailMetadataLink).text}
+				url={(item as ListSchema.ItemDetailMetadataLink).url}
+			/>
+		{/if}
+		{#if item.nodeName === NodeNameEnum.ListItemDetailMetadataTagList}
+			<Tags
+				tags={(item as ListSchema.ItemDetailMetadataTagList).tags}
+				title={(item as ListSchema.ItemDetailMetadataTagList).title}
+			/>
+		{/if}
+	{/each}
+</div>
diff --git a/packages/ui/src/components/extension/templates/metadata/label.svelte b/packages/ui/src/components/extension/templates/metadata/label.svelte
new file mode 100644
index 0000000..e446d67
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/metadata/label.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { IconType, List, ListSchema } from "@kksh/api/ui/worker"
+	import { IconMultiplexer } from "../../../common"
+
+	const {
+		title,
+		text,
+		icon
+	}: {
+		title: string
+		text?:
+			| string
+			| {
+					text: string
+					color: string
+			  }
+		icon?: {
+			type: IconType
+			value: string
+		}
+	} = $props()
+</script>
+
+<div class="flex justify-between gap-1 py-1">
+	<span class="text-muted-foreground text-sm font-semibold">{title}</span>
+	<span class="flex items-center gap-2">
+		{#if icon}
+			<IconMultiplexer {icon} class="h-4 w-4" />
+		{/if}
+		<span class="text-sm">{text}</span>
+	</span>
+</div>
diff --git a/packages/ui/src/components/extension/templates/metadata/link.svelte b/packages/ui/src/components/extension/templates/metadata/link.svelte
new file mode 100644
index 0000000..cfd2fa1
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/metadata/link.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import Icon from "@iconify/svelte"
+	import TauriLink from "../../../common/TauriLink.svelte"
+
+	const {
+		text,
+		title,
+		url
+	}: {
+		text: string
+		title: string
+		url: string
+	} = $props()
+</script>
+
+<div class="flex justify-between gap-1 py-1">
+	<span class="text-muted-foreground text-sm font-semibold">{title}</span>
+	<TauriLink href={url} class="flex items-center justify-center gap-1">
+		<span class="text-sm">{text}</span>
+		<Icon icon="gridicons:external" />
+	</TauriLink>
+</div>
diff --git a/packages/ui/src/components/extension/templates/metadata/tag.svelte b/packages/ui/src/components/extension/templates/metadata/tag.svelte
new file mode 100644
index 0000000..5dd1b9e
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/metadata/tag.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Color, ListSchema } from "@kksh/api/ui/worker"
+	import { Badge } from "@kksh/svelte5"
+
+	const {
+		text,
+		color
+	}: {
+		text?: string
+		color?: Color
+		// icon?: Icon
+	} = $props()
+</script>
+
+<Badge
+	style={`style: ${color ? color : "var(--muted-foreground)"}; background-color: ${color ? `${color}` : "var(--muted)"};`}
+>
+	{text}
+</Badge>
diff --git a/packages/ui/src/components/extension/templates/metadata/tags.svelte b/packages/ui/src/components/extension/templates/metadata/tags.svelte
new file mode 100644
index 0000000..ff0a641
--- /dev/null
+++ b/packages/ui/src/components/extension/templates/metadata/tags.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Color, ListSchema } from "@kksh/api/ui/worker"
+	import Tag from "./tag.svelte"
+
+	const {
+		tags,
+		title
+	}: {
+		tags: Array<{ text?: string; color?: Color }>
+		title: string
+	} = $props()
+</script>
+
+<div class="flex justify-between gap-1 py-1">
+	<span class="text-muted-foreground text-sm font-semibold">{title}</span>
+	<span class="flex gap-1">
+		{#each tags as tag}
+			<Tag text={tag.text} color={tag.color} />
+		{/each}
+	</span>
+</div>
diff --git a/packages/ui/src/components/main/ActionPanel.svelte b/packages/ui/src/components/main/ActionPanel.svelte
new file mode 100644
index 0000000..c6e3e1e
--- /dev/null
+++ b/packages/ui/src/components/main/ActionPanel.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import Icon from "@iconify/svelte"
+	import { Action as ActionSchema } from "@kksh/api/models"
+	import { Button, ButtonModule, Command, Input, Label, Popover } from "@kksh/svelte5"
+	import { cn } from "@kksh/ui/utils"
+	import { Check, ChevronsUpDown } from "lucide-svelte"
+	import { tick } from "svelte"
+	import Kbd from "../common/Kbd.svelte"
+
+	let {
+		actionPanel,
+		open = $bindable(false),
+		onActionSelected
+	}: {
+		actionPanel?: ActionSchema.ActionPanel
+		open?: boolean
+		onActionSelected?: (value: string) => void
+	} = $props()
+
+	let value = $state("")
+	let triggerRef = $state<HTMLButtonElement>(null!)
+
+	// We want to refocus the trigger button when the user selects
+	// an item from the list so users can continue navigating the
+	// rest of the form with the keyboard.
+	function closeAndFocusTrigger() {
+		open = false
+		tick().then(() => {
+			triggerRef.focus()
+		})
+	}
+</script>
+
+<Popover.Root bind:open>
+	<Popover.Trigger bind:ref={triggerRef}>
+		{#snippet child({ props })}
+			<Button variant="ghost" class="" {...props} role="combobox" aria-expanded={open}>
+				Actions
+				<span class="flex items-center gap-0.5" data-tauri-drag-region>
+					<Kbd><Icon icon="ph-command" class="h-4 w-4 shrink-0" /></Kbd>
+					<Kbd>K</Kbd>
+				</span>
+				<ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
+			</Button>
+		{/snippet}
+	</Popover.Trigger>
+	<Popover.Content class="w-64 p-0">
+		<Command.Root>
+			<Command.Input placeholder="Select an Action" />
+			<Command.List>
+				<Command.Empty>No action found.</Command.Empty>
+				<Command.Group>
+					{#each actionPanel?.items ?? [] as action}
+						<Command.Item
+							value={action.value}
+							onSelect={() => {
+								value = action.value
+								closeAndFocusTrigger()
+								onActionSelected?.(action.value)
+							}}
+						>
+							{action.title}
+						</Command.Item>
+					{/each}
+				</Command.Group>
+			</Command.List>
+		</Command.Root>
+	</Popover.Content>
+</Popover.Root>
diff --git a/packages/ui/src/components/main/BuiltinCmds.svelte b/packages/ui/src/components/main/BuiltinCmds.svelte
index d4ca49d..6ef23de 100644
--- a/packages/ui/src/components/main/BuiltinCmds.svelte
+++ b/packages/ui/src/components/main/BuiltinCmds.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { IconEnum } from "@kksh/api/models"
+	import { CmdTypeEnum, IconEnum } from "@kksh/api/models"
 	import { Command } from "@kksh/svelte5"
 	import { IconMultiplexer } from "@kksh/ui"
-	import { DraggableCommandGroup } from "@kksh/ui/custom"
-	import type { BuiltinCmd } from "./types"
+	import { DraggableCommandGroup } from "../custom"
+	import type { BuiltinCmd, CmdValue } from "./types"
 
 	const { builtinCmds }: { builtinCmds: BuiltinCmd[] } = $props()
 </script>
@@ -15,6 +15,10 @@
 			onSelect={() => {
 				cmd.function()
 			}}
+			value={JSON.stringify({
+				cmdName: cmd.name,
+				cmdType: CmdTypeEnum.Builtin
+			} satisfies CmdValue)}
 		>
 			<span class="flex gap-2">
 				<IconMultiplexer
diff --git a/packages/ui/src/components/main/CustomCommandInput.svelte b/packages/ui/src/components/main/CustomCommandInput.svelte
index bf528b5..a5b5ae7 100644
--- a/packages/ui/src/components/main/CustomCommandInput.svelte
+++ b/packages/ui/src/components/main/CustomCommandInput.svelte
@@ -8,9 +8,11 @@
 		class: className,
 		value = $bindable(""),
 		leftSlot,
+		rightSlot,
 		...restProps
 	}: CommandPrimitive.InputProps & {
 		leftSlot?: Snippet
+		rightSlot?: Snippet
 	} = $props()
 </script>
 
@@ -25,4 +27,5 @@
 		bind:value
 		{...restProps}
 	/>
+	{@render rightSlot?.()}
 </div>
diff --git a/packages/ui/src/components/main/ExtCmdsGroup.svelte b/packages/ui/src/components/main/ExtCmdsGroup.svelte
index 59652b9..62102c8 100644
--- a/packages/ui/src/components/main/ExtCmdsGroup.svelte
+++ b/packages/ui/src/components/main/ExtCmdsGroup.svelte
@@ -1,11 +1,11 @@
 <!-- This file renders a group of extension commands -->
 <!-- Input props to this component is an array of ExtPackageJsonExtra[] -->
 <script lang="ts">
-	import { CustomUiCmd, ExtPackageJsonExtra, TemplateUiCmd } from "@kksh/api/models"
+	import { CmdTypeEnum, CustomUiCmd, ExtPackageJsonExtra, TemplateUiCmd } from "@kksh/api/models"
 	import { Badge, Command } from "@kksh/svelte5"
 	import { IconMultiplexer } from "@kksh/ui"
-	import { DraggableCommandGroup } from "@kksh/ui/custom"
-	import type { OnExtCmdSelect } from "./types"
+	import { DraggableCommandGroup } from "../custom"
+	import type { CmdValue, OnExtCmdSelect } from "./types"
 
 	const {
 		extensions,
@@ -28,6 +28,11 @@
 		onSelect={() => {
 			onExtCmdSelect(ext, cmd, { isDev, hmr })
 		}}
+		value={JSON.stringify({
+			cmdName: cmd.name,
+			cmdType: cmd.type,
+			data: { isDev: heading === "Dev Extensions" }
+		} satisfies CmdValue)}
 	>
 		<span class="flex gap-2">
 			<IconMultiplexer icon={cmd.icon ?? ext.kunkun.icon} class="!h-5 !w-5 shrink-0" />
diff --git a/packages/ui/src/components/main/GlobalCommandPaletteFooter.svelte b/packages/ui/src/components/main/GlobalCommandPaletteFooter.svelte
index a19c341..b8f20c6 100644
--- a/packages/ui/src/components/main/GlobalCommandPaletteFooter.svelte
+++ b/packages/ui/src/components/main/GlobalCommandPaletteFooter.svelte
@@ -1,12 +1,42 @@
 <script lang="ts">
-	import { Avatar } from "@kksh/svelte5"
+	import Icon from "@iconify/svelte"
+	import { Action as ActionSchema } from "@kksh/api/models"
+	import { Avatar, Button } from "@kksh/svelte5"
 	import { cn } from "@kksh/ui/utils"
+	import Kbd from "../common/Kbd.svelte"
+	import ActionPanel from "./ActionPanel.svelte"
 
-	const { class: className }: { class?: string } = $props()
+	const {
+		class: className,
+		defaultAction,
+		actionPanel,
+		onDefaultActionSelected,
+		onActionSelected
+	}: {
+		class?: string
+		defaultAction?: string
+		actionPanel?: ActionSchema.ActionPanel
+		onDefaultActionSelected?: () => void
+		onActionSelected?: (value: string) => void
+	} = $props()
 </script>
 
-<footer data-tauri-drag-region class={cn("h-12 select-none border-t", className)}>
+<flex
+	data-tauri-drag-region
+	class={cn("h-12 select-none items-center justify-between gap-4 border-t px-2", className)}
+>
 	<Avatar.Root class="p-2">
 		<Avatar.Image src="/favicon.png" alt="Kunkun Logo" class="select-none invert dark:invert-0" />
 	</Avatar.Root>
-</footer>
+	<flex class="items-center gap-1">
+		{#if defaultAction}
+			<Button size="default" class="h-full" variant="ghost" onclick={onDefaultActionSelected}>
+				{defaultAction}
+				<Kbd><Icon icon="tdesign:enter" /></Kbd>
+			</Button>
+		{/if}
+		{#if actionPanel}
+			<ActionPanel {actionPanel} {onActionSelected} />
+		{/if}
+	</flex>
+</flex>
diff --git a/packages/ui/src/components/main/QuickLinks.svelte b/packages/ui/src/components/main/QuickLinks.svelte
new file mode 100644
index 0000000..402bc61
--- /dev/null
+++ b/packages/ui/src/components/main/QuickLinks.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { CmdTypeEnum, IconEnum } from "@kksh/api/models"
+	import { Command } from "@kksh/svelte5"
+	import { IconMultiplexer } from "@kksh/ui"
+	import { DraggableCommandGroup } from "../custom"
+	import { CmdValue, type CmdQuery, type QuickLink } from "./types"
+
+	const { quickLinks }: { quickLinks: QuickLink[] } = $props()
+</script>
+
+<DraggableCommandGroup heading="Quick Links">
+	{#each quickLinks as cmd}
+		<Command.Item
+			class="flex justify-between"
+			onSelect={() => {
+				console.log(cmd)
+			}}
+			keywords={["quick", "link"]}
+			value={JSON.stringify({
+				cmdName: cmd.name,
+				cmdType: CmdTypeEnum.QuickLink,
+				data: cmd.link
+			} satisfies CmdValue)}
+		>
+			<span class="flex gap-2">
+				<IconMultiplexer icon={cmd.icon} class="!h-5 !w-5 shrink-0" />
+				<span>{cmd.name}</span>
+			</span>
+		</Command.Item>
+	{/each}
+</DraggableCommandGroup>
diff --git a/packages/ui/src/components/main/SystemCmds.svelte b/packages/ui/src/components/main/SystemCmds.svelte
new file mode 100644
index 0000000..afa59dc
--- /dev/null
+++ b/packages/ui/src/components/main/SystemCmds.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { CmdTypeEnum, IconEnum, SysCommand } from "@kksh/api/models"
+	import { Command } from "@kksh/svelte5"
+	import { IconMultiplexer } from "@kksh/ui"
+	import { DraggableCommandGroup } from "../custom"
+	import { CmdValue } from "./types"
+
+	const { systemCommands }: { systemCommands: SysCommand[] } = $props()
+</script>
+
+<DraggableCommandGroup heading="System Commands">
+	{#each systemCommands as cmd}
+		<Command.Item
+			class="flex justify-between"
+			onSelect={() => {
+				cmd.function()
+			}}
+			value={JSON.stringify({
+				cmdName: cmd.name,
+				cmdType: CmdTypeEnum.System
+			} satisfies CmdValue)}
+		>
+			<span class="flex gap-2">
+				{#if cmd.icon}
+					<IconMultiplexer icon={cmd.icon} class="!h-5 !w-5 shrink-0" />
+				{/if}
+				<span>{cmd.name}</span>
+			</span>
+		</Command.Item>
+	{/each}
+</DraggableCommandGroup>
diff --git a/packages/ui/src/components/main/index.ts b/packages/ui/src/components/main/index.ts
index 7ff257d..a66c3ee 100644
--- a/packages/ui/src/components/main/index.ts
+++ b/packages/ui/src/components/main/index.ts
@@ -2,4 +2,6 @@ export { default as BuiltinCmds } from "./BuiltinCmds.svelte"
 export { default as CustomCommandInput } from "./CustomCommandInput.svelte"
 export { default as GlobalCommandPaletteFooter } from "./GlobalCommandPaletteFooter.svelte"
 export { default as ExtCmdsGroup } from "./ExtCmdsGroup.svelte"
+export { default as SystemCmds } from "./SystemCmds.svelte"
+export { default as QuickLinks } from "./QuickLinks.svelte"
 export * from "./types"
diff --git a/packages/ui/src/components/main/types.ts b/packages/ui/src/components/main/types.ts
index c8492a1..fe12236 100644
--- a/packages/ui/src/components/main/types.ts
+++ b/packages/ui/src/components/main/types.ts
@@ -1,4 +1,11 @@
-import type { CustomUiCmd, ExtPackageJsonExtra, TemplateUiCmd } from "@kksh/api/models"
+import {
+	CmdType,
+	Icon,
+	type CustomUiCmd,
+	type ExtPackageJsonExtra,
+	type TemplateUiCmd
+} from "@kksh/api/models"
+import * as v from "valibot"
 
 export type BuiltinCmd = {
 	name: string
@@ -15,4 +22,18 @@ export type OnExtCmdSelect = (
 
 export type CommandLaunchers = {
 	onExtCmdSelect: OnExtCmdSelect
+	onQuickLinkSelect: (quickLink: CmdValue, queries: CmdQuery[]) => void
 }
+
+/**
+ * Command Value used in the command search
+ */
+export const CmdValue = v.object({
+	cmdName: v.string(),
+	cmdType: CmdType,
+	data: v.optional(v.any())
+})
+export type CmdValue = v.InferOutput<typeof CmdValue>
+
+export type CmdQuery = { name: string; value: string }
+export type QuickLink = { name: string; link: string; icon: Icon }
diff --git a/packages/ui/src/components/theme/mode-toggle.svelte b/packages/ui/src/components/theme/mode-toggle.svelte
new file mode 100644
index 0000000..c6d2ccd
--- /dev/null
+++ b/packages/ui/src/components/theme/mode-toggle.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Button } from "@kksh/svelte5"
+	import Moon from "lucide-svelte/icons/moon"
+	import Sun from "lucide-svelte/icons/sun"
+	import { toggleMode } from "mode-watcher"
+</script>
+
+<Button onclick={toggleMode} variant="outline" size="icon">
+	<Sun
+		class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+	/>
+	<Moon
+		class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+	/>
+	<span class="sr-only">Toggle theme</span>
+</Button>
diff --git a/packages/ui/src/components/ui/form/form-button.svelte b/packages/ui/src/components/ui/form/form-button.svelte
new file mode 100644
index 0000000..a447118
--- /dev/null
+++ b/packages/ui/src/components/ui/form/form-button.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ButtonModule } from "@kksh/svelte5"
+
+	let { ref = $bindable(null), ...restProps }: ButtonModule.Props = $props()
+</script>
+
+<ButtonModule.Root type="submit" bind:ref {...restProps} />
diff --git a/packages/ui/src/components/ui/form/form-description.svelte b/packages/ui/src/components/ui/form/form-description.svelte
new file mode 100644
index 0000000..cc21450
--- /dev/null
+++ b/packages/ui/src/components/ui/form/form-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import type { WithoutChild } from "bits-ui"
+	import * as FormPrimitive from "formsnap"
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChild<FormPrimitive.DescriptionProps> = $props()
+</script>
+
+<FormPrimitive.Description
+	bind:ref
+	class={cn("text-muted-foreground text-[0.8rem]", className)}
+	{...restProps}
+/>
diff --git a/packages/ui/src/components/ui/form/form-element-field.svelte b/packages/ui/src/components/ui/form/form-element-field.svelte
new file mode 100644
index 0000000..4d084cf
--- /dev/null
+++ b/packages/ui/src/components/ui/form/form-element-field.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" module>
+	import type { FormPathLeaves as _FormPathLeaves } from "sveltekit-superforms"
+
+	type T = Record<string, unknown>
+	type U = _FormPathLeaves<T>
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, U extends _FormPathLeaves<T>">
+	import { cn } from "@kksh/ui/utils"
+	import type { WithElementRef } from "bits-ui"
+	import * as FormPrimitive from "formsnap"
+	import type { HTMLAttributes } from "svelte/elements"
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form,
+		name,
+		children: childrenProp,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> &
+		FormPrimitive.ElementFieldProps<T, U> = $props()
+</script>
+
+<FormPrimitive.ElementField {form} {name}>
+	{#snippet children({ constraints, errors, tainted, value })}
+		<div bind:this={ref} class={cn("space-y-2", className)} {...restProps}>
+			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
+		</div>
+	{/snippet}
+</FormPrimitive.ElementField>
diff --git a/packages/ui/src/components/ui/form/form-field-errors.svelte b/packages/ui/src/components/ui/form/form-field-errors.svelte
new file mode 100644
index 0000000..2580d55
--- /dev/null
+++ b/packages/ui/src/components/ui/form/form-field-errors.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import type { WithoutChild } from "bits-ui"
+	import * as FormPrimitive from "formsnap"
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		errorClasses,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<FormPrimitive.FieldErrorsProps> & {
+		errorClasses?: string | undefined | null
+	} = $props()
+</script>
+
+<FormPrimitive.FieldErrors
+	class={cn("text-destructive text-[0.8rem] font-medium", className)}
+	{...restProps}
+>
+	{#snippet children({ errors, errorProps })}
+		{#if childrenProp}
+			{@render childrenProp({ errors, errorProps })}
+		{:else}
+			{#each errors as error}
+				<div {...errorProps} class={cn(errorClasses)}>{error}</div>
+			{/each}
+		{/if}
+	{/snippet}
+</FormPrimitive.FieldErrors>
diff --git a/packages/ui/src/components/ui/form/form-field.svelte b/packages/ui/src/components/ui/form/form-field.svelte
new file mode 100644
index 0000000..57f9107
--- /dev/null
+++ b/packages/ui/src/components/ui/form/form-field.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" module>
+	import type { FormPath as _FormPath } from "sveltekit-superforms"
+
+	type T = Record<string, unknown>
+	type U = _FormPath<T>
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, U extends _FormPath<T>">
+	import { cn } from "@kksh/ui/utils"
+	import type { WithElementRef, WithoutChildren } from "bits-ui"
+	import * as FormPrimitive from "formsnap"
+	import type { HTMLAttributes } from "svelte/elements"
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form,
+		name,
+		children: childrenProp,
+		...restProps
+	}: FormPrimitive.FieldProps<T, U> &
+		WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props()
+</script>
+
+<FormPrimitive.Field {form} {name}>
+	{#snippet children({ constraints, errors, tainted, value })}
+		<div bind:this={ref} class={cn("space-y-2", className)} {...restProps}>
+			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
+		</div>
+	{/snippet}
+</FormPrimitive.Field>
diff --git a/packages/ui/src/components/ui/form/form-fieldset.svelte b/packages/ui/src/components/ui/form/form-fieldset.svelte
new file mode 100644
index 0000000..2e46184
--- /dev/null
+++ b/packages/ui/src/components/ui/form/form-fieldset.svelte
@@ -0,0 +1,22 @@
+<script lang="ts" module>
+	import type { FormPath as _FormPath } from "sveltekit-superforms"
+
+	type T = Record<string, unknown>
+	type U = _FormPath<T>
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, U extends _FormPath<T>">
+	import { cn } from "@kksh/ui/utils"
+	import type { WithoutChild } from "bits-ui"
+	import * as FormPrimitive from "formsnap"
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form,
+		name,
+		...restProps
+	}: WithoutChild<FormPrimitive.FieldsetProps<T, U>> = $props()
+</script>
+
+<FormPrimitive.Fieldset bind:ref {form} {name} class={cn("space-y-2", className)} {...restProps} />
diff --git a/packages/ui/src/components/ui/form/form-label.svelte b/packages/ui/src/components/ui/form/form-label.svelte
new file mode 100644
index 0000000..952670f
--- /dev/null
+++ b/packages/ui/src/components/ui/form/form-label.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Label } from "@kksh/svelte5"
+	import { cn } from "@kksh/ui/utils"
+	import type { WithoutChild } from "bits-ui"
+	import * as FormPrimitive from "formsnap"
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: WithoutChild<FormPrimitive.LabelProps> = $props()
+</script>
+
+<FormPrimitive.Label {...restProps} bind:ref>
+	{#snippet child({ props })}
+		<Label {...props} class={cn("data-[fs-error]:text-destructive", className)}>
+			{@render children?.()}
+		</Label>
+	{/snippet}
+</FormPrimitive.Label>
diff --git a/packages/ui/src/components/ui/form/form-legend.svelte b/packages/ui/src/components/ui/form/form-legend.svelte
new file mode 100644
index 0000000..c82042f
--- /dev/null
+++ b/packages/ui/src/components/ui/form/form-legend.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import type { WithoutChild } from "bits-ui"
+	import * as FormPrimitive from "formsnap"
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChild<FormPrimitive.LegendProps> = $props()
+</script>
+
+<FormPrimitive.Legend
+	bind:ref
+	{...restProps}
+	class={cn("data-[fs-error]:text-destructive text-sm font-medium leading-none", className)}
+/>
diff --git a/packages/ui/src/components/ui/form/index.ts b/packages/ui/src/components/ui/form/index.ts
new file mode 100644
index 0000000..bfb9159
--- /dev/null
+++ b/packages/ui/src/components/ui/form/index.ts
@@ -0,0 +1,33 @@
+import * as FormPrimitive from "formsnap"
+import Button from "./form-button.svelte"
+import Description from "./form-description.svelte"
+import ElementField from "./form-element-field.svelte"
+import FieldErrors from "./form-field-errors.svelte"
+import Field from "./form-field.svelte"
+import Fieldset from "./form-fieldset.svelte"
+import Label from "./form-label.svelte"
+import Legend from "./form-legend.svelte"
+
+const Control = FormPrimitive.Control as typeof FormPrimitive.Control
+
+export {
+	Field,
+	Control,
+	Label,
+	FieldErrors,
+	Description,
+	Fieldset,
+	Legend,
+	ElementField,
+	Button,
+	//
+	Field as FormField,
+	Control as FormControl,
+	Description as FormDescription,
+	Label as FormLabel,
+	FieldErrors as FormFieldErrors,
+	Fieldset as FormFieldset,
+	Legend as FormLegend,
+	ElementField as FormElementField,
+	Button as FormButton
+}
diff --git a/packages/ui/src/components/ui/label/index.ts b/packages/ui/src/components/ui/label/index.ts
new file mode 100644
index 0000000..7a80917
--- /dev/null
+++ b/packages/ui/src/components/ui/label/index.ts
@@ -0,0 +1,7 @@
+import Root from "./label.svelte"
+
+export {
+	Root,
+	//
+	Root as Label
+}
diff --git a/packages/ui/src/components/ui/label/label.svelte b/packages/ui/src/components/ui/label/label.svelte
new file mode 100644
index 0000000..b70f58d
--- /dev/null
+++ b/packages/ui/src/components/ui/label/label.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import { Label as LabelPrimitive } from "bits-ui"
+
+	let { ref = $bindable(null), class: className, ...restProps }: LabelPrimitive.RootProps = $props()
+</script>
+
+<LabelPrimitive.Root
+	bind:ref
+	class={cn(
+		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 6d40e1a..462f48c 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,11 +1,14 @@
 export { default as Shiki } from "./components/code/shiki.svelte"
-export { IconMultiplexer } from "./components/common"
+export * from "./components/common"
 export * as Layouts from "./components/layouts/index"
 export * as Error from "./components/error/index"
 export * as Common from "./components/common/index"
+export * from "./components/common/index"
 export * as Custom from "./components/custom"
 export * as Main from "./components/main/index"
 export * as Extension from "./components/extension/index"
 export { default as GridAnimation } from "./components/animation/grid-animation.svelte"
 export { default as ViewTransition } from "./components/transition/view-transition.svelte"
 export * as Constants from "./constants"
+export * as Form from "./components/ui/form"
+export { default as ModeToggle } from "./components/theme/mode-toggle.svelte"
diff --git a/packages/ui/src/utils/command-score.ts b/packages/ui/src/utils/command-score.ts
new file mode 100644
index 0000000..0e6c837
--- /dev/null
+++ b/packages/ui/src/utils/command-score.ts
@@ -0,0 +1,175 @@
+// This file is taken from https://github.com/huntabyte/bits-ui/blob/7f7bf6f6b736cf34e57a0d87aab01074c33efd46/packages/bits-ui/src/lib/bits/command/command.svelte.ts#L1
+
+// eslint-disable-next-line ts/ban-ts-comment
+// @ts-nocheck
+// The scores are arranged so that a continuous match of characters will
+// result in a total score of 1.
+//
+// The best case, this character is a match, and either this is the start
+// of the string, or the previous character was also a match.
+const SCORE_CONTINUE_MATCH = 1
+// A new match at the start of a word scores better than a new match
+// elsewhere as it's more likely that the user will type the starts
+// of fragments.
+// NOTE: We score word jumps between spaces slightly higher than slashes, brackets
+// hyphens, etc.
+const SCORE_SPACE_WORD_JUMP = 0.9
+const SCORE_NON_SPACE_WORD_JUMP = 0.8
+// Any other match isn't ideal, but we include it for completeness.
+const SCORE_CHARACTER_JUMP = 0.17
+// If the user transposed two letters, it should be significantly penalized.
+//
+// i.e. "ouch" is more likely than "curtain" when "uc" is typed.
+const SCORE_TRANSPOSITION = 0.1
+// The goodness of a match should decay slightly with each missing
+// character.
+//
+// i.e. "bad" is more likely than "bard" when "bd" is typed.
+//
+// This will not change the order of suggestions based on SCORE_* until
+// 100 characters are inserted between matches.
+const PENALTY_SKIPPED = 0.999
+// The goodness of an exact-case match should be higher than a
+// case-insensitive match by a small amount.
+//
+// i.e. "HTML" is more likely than "haml" when "HM" is typed.
+//
+// This will not change the order of suggestions based on SCORE_* until
+// 1000 characters are inserted between matches.
+const PENALTY_CASE_MISMATCH = 0.9999
+// Match higher for letters closer to the beginning of the word
+const PENALTY_DISTANCE_FROM_START = 0.9
+// If the word has more characters than the user typed, it should
+// be penalised slightly.
+//
+// i.e. "html" is more likely than "html5" if I type "html".
+//
+// However, it may well be the case that there's a sensible secondary
+// ordering (like alphabetical) that it makes sense to rely on when
+// there are many prefix matches, so we don't make the penalty increase
+// with the number of tokens.
+const PENALTY_NOT_COMPLETE = 0.99
+
+const IS_GAP_REGEXP = /[\\/_+.#"@[({&]/
+const COUNT_GAPS_REGEXP = /[\\/_+.#"@[({&]/g
+const IS_SPACE_REGEXP = /[\s-]/
+const COUNT_SPACE_REGEXP = /[\s-]/g
+
+function commandScoreInner(
+	string,
+	abbreviation,
+	lowerString,
+	lowerAbbreviation,
+	stringIndex,
+	abbreviationIndex,
+	memoizedResults
+) {
+	if (abbreviationIndex === abbreviation.length) {
+		if (stringIndex === string.length) {
+			return SCORE_CONTINUE_MATCH
+		}
+		return PENALTY_NOT_COMPLETE
+	}
+
+	const memoizeKey = `${stringIndex},${abbreviationIndex}`
+	if (memoizedResults[memoizeKey] !== undefined) {
+		return memoizedResults[memoizeKey]
+	}
+
+	const abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex)
+	let index = lowerString.indexOf(abbreviationChar, stringIndex)
+	let highScore = 0
+
+	let score, transposedScore, wordBreaks, spaceBreaks
+
+	while (index >= 0) {
+		score = commandScoreInner(
+			string,
+			abbreviation,
+			lowerString,
+			lowerAbbreviation,
+			index + 1,
+			abbreviationIndex + 1,
+			memoizedResults
+		)
+		if (score > highScore) {
+			if (index === stringIndex) {
+				score *= SCORE_CONTINUE_MATCH
+			} else if (IS_GAP_REGEXP.test(string.charAt(index - 1))) {
+				score *= SCORE_NON_SPACE_WORD_JUMP
+				wordBreaks = string.slice(stringIndex, index - 1).match(COUNT_GAPS_REGEXP)
+				if (wordBreaks && stringIndex > 0) {
+					score *= PENALTY_SKIPPED ** wordBreaks.length
+				}
+			} else if (IS_SPACE_REGEXP.test(string.charAt(index - 1))) {
+				score *= SCORE_SPACE_WORD_JUMP
+				spaceBreaks = string.slice(stringIndex, index - 1).match(COUNT_SPACE_REGEXP)
+				if (spaceBreaks && stringIndex > 0) {
+					score *= PENALTY_SKIPPED ** spaceBreaks.length
+				}
+			} else {
+				score *= SCORE_CHARACTER_JUMP
+				if (stringIndex > 0) {
+					score *= PENALTY_SKIPPED ** (index - stringIndex)
+				}
+			}
+
+			if (string.charAt(index) !== abbreviation.charAt(abbreviationIndex)) {
+				score *= PENALTY_CASE_MISMATCH
+			}
+		}
+
+		if (
+			(score < SCORE_TRANSPOSITION &&
+				lowerString.charAt(index - 1) === lowerAbbreviation.charAt(abbreviationIndex + 1)) ||
+			(lowerAbbreviation.charAt(abbreviationIndex + 1) ===
+				lowerAbbreviation.charAt(abbreviationIndex) && // allow duplicate letters. Ref #7428
+				lowerString.charAt(index - 1) !== lowerAbbreviation.charAt(abbreviationIndex))
+		) {
+			transposedScore = commandScoreInner(
+				string,
+				abbreviation,
+				lowerString,
+				lowerAbbreviation,
+				index + 1,
+				abbreviationIndex + 2,
+				memoizedResults
+			)
+
+			if (transposedScore * SCORE_TRANSPOSITION > score) {
+				score = transposedScore * SCORE_TRANSPOSITION
+			}
+		}
+
+		if (score > highScore) {
+			highScore = score
+		}
+
+		index = lowerString.indexOf(abbreviationChar, index + 1)
+	}
+
+	memoizedResults[memoizeKey] = highScore
+	return highScore
+}
+
+function formatInput(string) {
+	// convert all valid space characters to space so they match each other
+	return string.toLowerCase().replace(COUNT_SPACE_REGEXP, " ")
+}
+
+export function commandScore(string: string, abbreviation: string, aliases?: string[]): number {
+	/* NOTE:
+	 * in the original, we used to do the lower-casing on each recursive call, but this meant that toLowerCase()
+	 * was the dominating cost in the algorithm, passing both is a little ugly, but considerably faster.
+	 */
+	string = aliases && aliases.length > 0 ? `${`${string} ${aliases?.join(" ")}`}` : string
+	return commandScoreInner(
+		string,
+		abbreviation,
+		formatInput(string),
+		formatInput(abbreviation),
+		0,
+		0,
+		{}
+	)
+}
diff --git a/packages/ui/src/utils/form.ts b/packages/ui/src/utils/form.ts
new file mode 100644
index 0000000..779d7d8
--- /dev/null
+++ b/packages/ui/src/utils/form.ts
@@ -0,0 +1,47 @@
+import { FormNodeNameEnum, type FormSchema } from "@kksh/api/ui/worker"
+import type { BaseIssue, BaseSchema } from "valibot"
+import * as v from "valibot"
+
+function addDefaultToSchema(
+	schema: BaseSchema<unknown, unknown, BaseIssue<unknown>>,
+	field: FormSchema.BaseField
+) {
+	if (field.default) {
+		schema = v.optional(schema, field.default)
+	}
+	return schema
+}
+
+export function buildFormSchema(form: FormSchema.Form): v.ObjectSchema<any, undefined> {
+	let schema = v.object({})
+	for (const field of form.fields) {
+		let fieldSchema: any = undefined
+		if (field.nodeName === FormNodeNameEnum.Input) {
+			fieldSchema = v.string()
+		} else if (field.nodeName === FormNodeNameEnum.Number) {
+			fieldSchema = v.number()
+		} else if (field.nodeName === FormNodeNameEnum.Select) {
+			fieldSchema = v.string()
+			// fieldSchema = v.picklist((field as FormSchema.SelectField).options)
+			// schema = v.object({ ...schema.entries, [field.key]: fieldSchema })
+			// continue
+		} else if (field.nodeName === FormNodeNameEnum.Boolean) {
+			fieldSchema = v.boolean()
+		} else if (field.nodeName === FormNodeNameEnum.Date) {
+			fieldSchema = v.date()
+		} else {
+			console.warn(`Unknown field type: ${field.nodeName}`)
+		}
+		fieldSchema = addDefaultToSchema(fieldSchema, field)
+		if ((field as FormSchema.BaseField).optional) {
+			fieldSchema = v.nullable(v.optional(fieldSchema))
+		}
+		if ((field as FormSchema.BaseField).description) {
+			fieldSchema = v.pipe(fieldSchema, v.description((field as FormSchema.BaseField).description!))
+		}
+		if (fieldSchema) {
+			schema = v.object({ ...schema.entries, [field.key]: fieldSchema })
+		}
+	}
+	return schema
+}
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index 245e021..0194dfa 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -1,2 +1,4 @@
 export * from "./tailwind"
 export * from "./format"
+export { commandScore } from "./command-score"
+export * from "./form"
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 9c56bda..a87d0db 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,3 +1,7 @@
 {
-	"extends": "../typescript-config/base.json"
+	"extends": "../typescript-config/base.json",
+	"compilerOptions": {
+		"verbatimModuleSyntax": true
+	},
+	"include": ["src/**/*"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 010c4eb..5caf9ec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -88,8 +88,8 @@ importers:
         specifier: workspace:*
         version: link:packages/api
       '@kksh/svelte5':
-        specifier: 0.1.2-beta.4
-        version: 0.1.2-beta.4(lucide-svelte@0.454.0(svelte@5.1.9))(svelte-sonner@0.3.28(svelte@5.1.9))(svelte@5.1.9)
+        specifier: 0.1.2-beta.8
+        version: 0.1.2-beta.8(lucide-svelte@0.454.0(svelte@5.1.9))(svelte-sonner@0.3.28(svelte@5.1.9))(svelte@5.1.9)
       prettier:
         specifier: ^3.2.5
         version: 3.3.3
@@ -117,6 +117,9 @@ importers:
       '@formkit/auto-animate':
         specifier: ^0.8.2
         version: 0.8.2
+      '@huakunshen/comlink':
+        specifier: ^4.4.1
+        version: 4.4.1
       '@kksh/extension':
         specifier: workspace:*
         version: link:../../packages/extension
@@ -153,6 +156,9 @@ importers:
       mode-watcher:
         specifier: ^0.4.1
         version: 0.4.1(svelte@5.1.9)
+      semver:
+        specifier: ^7.6.3
+        version: 7.6.3
       svelte-radix:
         specifier: ^2.0.1
         version: 2.0.1(svelte@5.1.9)
@@ -162,6 +168,9 @@ importers:
       sveltekit-superforms:
         specifier: ^2.20.0
         version: 2.20.0(@sveltejs/kit@2.7.4(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(@types/json-schema@7.0.15)(svelte@5.1.9)(typescript@5.6.3)
+      uuid:
+        specifier: ^11.0.2
+        version: 11.0.2
     devDependencies:
       '@kksh/types':
         specifier: workspace:*
@@ -193,6 +202,12 @@ importers:
       '@types/bun':
         specifier: latest
         version: 1.1.13
+      '@types/semver':
+        specifier: ^7.5.8
+        version: 7.5.8
+      '@unocss/preset-attributify':
+        specifier: ^0.64.0
+        version: 0.64.0
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.47)
@@ -223,6 +238,9 @@ importers:
       typescript:
         specifier: ^5.6.3
         version: 5.6.3
+      unocss:
+        specifier: ^0.64.0
+        version: 0.64.0(postcss@8.4.47)(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
       vaul-svelte:
         specifier: ^0.3.2
         version: 0.3.2(svelte@5.1.9)
@@ -395,6 +413,53 @@ importers:
         specifier: latest
         version: 1.1.13
 
+  packages/extensions/demo-worker-template-ext:
+    dependencies:
+      '@hk/comlink-stdio':
+        specifier: npm:@jsr/hk__comlink-stdio@^0.1.6
+        version: '@jsr/hk__comlink-stdio@0.1.7'
+      '@kksh/api':
+        specifier: workspace:*
+        version: link:../../api
+      '@kunkun/api':
+        specifier: npm:@jsr/kunkun__api@^0.0.13
+        version: '@jsr/kunkun__api@0.0.13(tslib@2.8.1)(typescript@5.6.3)'
+      typescript:
+        specifier: ^5.0.0
+        version: 5.6.3
+    devDependencies:
+      '@rollup/plugin-commonjs':
+        specifier: ^26.0.1
+        version: 26.0.3(rollup@4.24.3)
+      '@rollup/plugin-node-resolve':
+        specifier: ^15.2.3
+        version: 15.3.0(rollup@4.24.3)
+      '@rollup/plugin-typescript':
+        specifier: ^11.1.6
+        version: 11.1.6(rollup@4.24.3)(tslib@2.8.1)(typescript@5.6.3)
+      '@types/bun':
+        specifier: latest
+        version: 1.1.13
+      rollup-plugin-visualizer:
+        specifier: ^5.12.0
+        version: 5.12.0(rollup@4.24.3)
+
+  packages/extensions/form-view:
+    dependencies:
+      '@kksh/api':
+        specifier: workspace:*
+        version: link:../../api
+      i18next:
+        specifier: ^23.15.1
+        version: 23.16.5
+      typescript:
+        specifier: ^5.0.0
+        version: 5.6.3
+    devDependencies:
+      '@types/bun':
+        specifier: latest
+        version: 1.1.13
+
   packages/schema:
     dependencies:
       '@aws-sdk/client-s3':
@@ -406,9 +471,6 @@ importers:
       '@kksh/supabase':
         specifier: workspace:*
         version: link:../supabase
-      '@supabase/supabase-js':
-        specifier: ^2.43.4
-        version: 2.46.1
       typescript:
         specifier: ^5.0.0
         version: 5.5.4
@@ -422,15 +484,15 @@ importers:
       '@types/bun':
         specifier: latest
         version: 1.1.13
-      supabase:
-        specifier: '>=1.8.1'
-        version: 1.207.9
 
   packages/supabase:
     dependencies:
       '@kksh/api':
         specifier: workspace:*
         version: link:../api
+      '@supabase/supabase-js':
+        specifier: ^2.46.1
+        version: 2.46.1
       typescript:
         specifier: ^5.0.0
         version: 5.5.4
@@ -456,25 +518,40 @@ importers:
       '@formkit/auto-animate':
         specifier: ^0.8.2
         version: 0.8.2
+      '@internationalized/date':
+        specifier: ^3.5.6
+        version: 3.5.6
       '@std/semver':
         specifier: npm:@jsr/std__semver@^1.0.3
         version: '@jsr/std__semver@1.0.3'
       gsap:
         specifier: ^3.12.5
         version: 3.12.5
+      svelte-markdown:
+        specifier: ^0.4.1
+        version: 0.4.1(svelte@5.1.9)
     devDependencies:
+      '@iconify/svelte':
+        specifier: ^4.0.2
+        version: 4.0.2(svelte@5.1.9)
       '@kksh/api':
         specifier: workspace:*
         version: link:../api
+      '@kksh/svelte5':
+        specifier: ^0.1.2-beta.8
+        version: 0.1.2-beta.8(lucide-svelte@0.454.0(svelte@5.1.9))(svelte-sonner@0.3.28(svelte@5.1.9))(svelte@5.1.9)
       '@types/bun':
         specifier: latest
         version: 1.1.13
       bits-ui:
-        specifier: 1.0.0-next.36
-        version: 1.0.0-next.36(svelte@5.1.9)
+        specifier: 1.0.0-next.45
+        version: 1.0.0-next.45(svelte@5.1.9)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      formsnap:
+        specifier: 2.0.0-next.1
+        version: 2.0.0-next.1(svelte@5.1.9)(sveltekit-superforms@2.20.0(@sveltejs/kit@2.7.4(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(@types/json-schema@7.0.15)(svelte@5.1.9)(typescript@5.6.3))
       lucide-svelte:
         specifier: ^0.454.0
         version: 0.454.0(svelte@5.1.9)
@@ -493,6 +570,9 @@ importers:
       svelte-sonner:
         specifier: ^0.3.28
         version: 0.3.28(svelte@5.1.9)
+      sveltekit-superforms:
+        specifier: ^2.20.0
+        version: 2.20.0(@sveltejs/kit@2.7.4(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(@types/json-schema@7.0.15)(svelte@5.1.9)(typescript@5.6.3)
       tailwind-merge:
         specifier: ^2.5.4
         version: 2.5.4
@@ -505,6 +585,9 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.14)
+      zod:
+        specifier: ^3.23.8
+        version: 3.23.8
 
   packages/utils:
     dependencies:
@@ -579,6 +662,12 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@antfu/install-pkg@0.4.1':
+    resolution: {integrity: sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==}
+
+  '@antfu/utils@0.7.10':
+    resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}
+
   '@ark/schema@0.10.0':
     resolution: {integrity: sha512-zpfXwWLOzj9aUK+dXQ6aleJAOgle4/WrHDop5CMX2M88dFQ85NdH8O0v0pvMAQnfFcaQAZ/nVDYLlBJsFc09XA==}
 
@@ -885,6 +974,12 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
+  '@esbuild/aix-ppc64@0.23.1':
+    resolution: {integrity: sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
   '@esbuild/aix-ppc64@0.24.0':
     resolution: {integrity: sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==}
     engines: {node: '>=18'}
@@ -897,6 +992,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@esbuild/android-arm64@0.23.1':
+    resolution: {integrity: sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
   '@esbuild/android-arm64@0.24.0':
     resolution: {integrity: sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==}
     engines: {node: '>=18'}
@@ -909,6 +1010,12 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@esbuild/android-arm@0.23.1':
+    resolution: {integrity: sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
   '@esbuild/android-arm@0.24.0':
     resolution: {integrity: sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==}
     engines: {node: '>=18'}
@@ -921,6 +1028,12 @@ packages:
     cpu: [x64]
     os: [android]
 
+  '@esbuild/android-x64@0.23.1':
+    resolution: {integrity: sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
   '@esbuild/android-x64@0.24.0':
     resolution: {integrity: sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==}
     engines: {node: '>=18'}
@@ -933,6 +1046,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@esbuild/darwin-arm64@0.23.1':
+    resolution: {integrity: sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@esbuild/darwin-arm64@0.24.0':
     resolution: {integrity: sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==}
     engines: {node: '>=18'}
@@ -945,6 +1064,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@esbuild/darwin-x64@0.23.1':
+    resolution: {integrity: sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
   '@esbuild/darwin-x64@0.24.0':
     resolution: {integrity: sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==}
     engines: {node: '>=18'}
@@ -957,6 +1082,12 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
+  '@esbuild/freebsd-arm64@0.23.1':
+    resolution: {integrity: sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@esbuild/freebsd-arm64@0.24.0':
     resolution: {integrity: sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==}
     engines: {node: '>=18'}
@@ -969,6 +1100,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  '@esbuild/freebsd-x64@0.23.1':
+    resolution: {integrity: sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@esbuild/freebsd-x64@0.24.0':
     resolution: {integrity: sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==}
     engines: {node: '>=18'}
@@ -981,6 +1118,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@esbuild/linux-arm64@0.23.1':
+    resolution: {integrity: sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
   '@esbuild/linux-arm64@0.24.0':
     resolution: {integrity: sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==}
     engines: {node: '>=18'}
@@ -993,6 +1136,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@esbuild/linux-arm@0.23.1':
+    resolution: {integrity: sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
   '@esbuild/linux-arm@0.24.0':
     resolution: {integrity: sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==}
     engines: {node: '>=18'}
@@ -1005,6 +1154,12 @@ packages:
     cpu: [ia32]
     os: [linux]
 
+  '@esbuild/linux-ia32@0.23.1':
+    resolution: {integrity: sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
   '@esbuild/linux-ia32@0.24.0':
     resolution: {integrity: sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==}
     engines: {node: '>=18'}
@@ -1017,6 +1172,12 @@ packages:
     cpu: [loong64]
     os: [linux]
 
+  '@esbuild/linux-loong64@0.23.1':
+    resolution: {integrity: sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
   '@esbuild/linux-loong64@0.24.0':
     resolution: {integrity: sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==}
     engines: {node: '>=18'}
@@ -1029,6 +1190,12 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
+  '@esbuild/linux-mips64el@0.23.1':
+    resolution: {integrity: sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
   '@esbuild/linux-mips64el@0.24.0':
     resolution: {integrity: sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==}
     engines: {node: '>=18'}
@@ -1041,6 +1208,12 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
+  '@esbuild/linux-ppc64@0.23.1':
+    resolution: {integrity: sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
   '@esbuild/linux-ppc64@0.24.0':
     resolution: {integrity: sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==}
     engines: {node: '>=18'}
@@ -1053,6 +1226,12 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
+  '@esbuild/linux-riscv64@0.23.1':
+    resolution: {integrity: sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
   '@esbuild/linux-riscv64@0.24.0':
     resolution: {integrity: sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==}
     engines: {node: '>=18'}
@@ -1065,6 +1244,12 @@ packages:
     cpu: [s390x]
     os: [linux]
 
+  '@esbuild/linux-s390x@0.23.1':
+    resolution: {integrity: sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
   '@esbuild/linux-s390x@0.24.0':
     resolution: {integrity: sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==}
     engines: {node: '>=18'}
@@ -1077,6 +1262,12 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  '@esbuild/linux-x64@0.23.1':
+    resolution: {integrity: sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
   '@esbuild/linux-x64@0.24.0':
     resolution: {integrity: sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==}
     engines: {node: '>=18'}
@@ -1089,12 +1280,24 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/netbsd-x64@0.23.1':
+    resolution: {integrity: sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
   '@esbuild/netbsd-x64@0.24.0':
     resolution: {integrity: sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/openbsd-arm64@0.23.1':
+    resolution: {integrity: sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
   '@esbuild/openbsd-arm64@0.24.0':
     resolution: {integrity: sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==}
     engines: {node: '>=18'}
@@ -1107,6 +1310,12 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
+  '@esbuild/openbsd-x64@0.23.1':
+    resolution: {integrity: sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
   '@esbuild/openbsd-x64@0.24.0':
     resolution: {integrity: sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==}
     engines: {node: '>=18'}
@@ -1119,6 +1328,12 @@ packages:
     cpu: [x64]
     os: [sunos]
 
+  '@esbuild/sunos-x64@0.23.1':
+    resolution: {integrity: sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
   '@esbuild/sunos-x64@0.24.0':
     resolution: {integrity: sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==}
     engines: {node: '>=18'}
@@ -1131,6 +1346,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@esbuild/win32-arm64@0.23.1':
+    resolution: {integrity: sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
   '@esbuild/win32-arm64@0.24.0':
     resolution: {integrity: sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==}
     engines: {node: '>=18'}
@@ -1143,6 +1364,12 @@ packages:
     cpu: [ia32]
     os: [win32]
 
+  '@esbuild/win32-ia32@0.23.1':
+    resolution: {integrity: sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
   '@esbuild/win32-ia32@0.24.0':
     resolution: {integrity: sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==}
     engines: {node: '>=18'}
@@ -1155,6 +1382,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@esbuild/win32-x64@0.23.1':
+    resolution: {integrity: sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@esbuild/win32-x64@0.24.0':
     resolution: {integrity: sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==}
     engines: {node: '>=18'}
@@ -1241,6 +1474,9 @@ packages:
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
+  '@iconify/utils@2.1.33':
+    resolution: {integrity: sha512-jP9h6v/g0BIZx0p7XGJJVtkVnydtbgTgt9mVNcGDYwaa7UhdHdI9dvoq+gKj9sijMSJKxUPEG2JyjsgXjxL7Kw==}
+
   '@internationalized/date@3.5.6':
     resolution: {integrity: sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==}
 
@@ -1273,15 +1509,21 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@jsr/hk__comlink-stdio@0.1.7':
+    resolution: {integrity: sha512-Jd0V3CwI9ELuklx6pY7lz2bwhy5+aN9EF0eL3pcNzdkglIuRJUvIuVvxonWDQyQ2OedvOJRpivlTfEbpdyeNdw==, tarball: https://npm.jsr.io/~/11/@jsr/hk__comlink-stdio/0.1.7.tgz}
+
+  '@jsr/kunkun__api@0.0.13':
+    resolution: {integrity: sha512-BjV+E9+xyQo2VG6yz45vS7o2dwliyUHnXz60c0ymqthQV5Sk7RsIyuF4v8mOdD8CJ/DbUrx82EMrWHtegntcKQ==, tarball: https://npm.jsr.io/~/11/@jsr/kunkun__api/0.0.13.tgz}
+
   '@jsr/std__semver@1.0.3':
     resolution: {integrity: sha512-d1uBT0Muxhd3yBIw9ZE1Q/4N1Y0td0EJe1AqwM3hP05IMwaWQV/miksQOPR3rup3bVovuIvqBm7WJcoUripdQA==, tarball: https://npm.jsr.io/~/11/@jsr/std__semver/1.0.3.tgz}
 
-  '@kksh/svelte5@0.1.2-beta.4':
-    resolution: {integrity: sha512-QUA3wl4aOUcnfTo37/l37fWlhwf0lbtnNugDiwBJgrjaLeNF6nEzlYFKxxsA7erR6hY6VZCeVlf01S3ZgPva4w==}
+  '@kksh/svelte5@0.1.2-beta.8':
+    resolution: {integrity: sha512-cXReqYbZ/KXICucNREz6T/1DguTlGjvkq2qlUriYH/lgfgsUjbq8ZPhVsCIb0qlDT9IYIu5Pc/8X+azGqFirRA==}
     peerDependencies:
-      lucide-svelte: ^0.416.0
-      svelte: ^5.0.0
-      svelte-sonner: ^0.3.27
+      lucide-svelte: ^0.454.0
+      svelte: ^5.1.10
+      svelte-sonner: ^0.3.28
 
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
@@ -1326,6 +1568,24 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/plugin-commonjs@26.0.3':
+    resolution: {integrity: sha512-2BJcolt43MY+y5Tz47djHkodCC3c1VKVrBDKpVqHKpQ9z9S158kCCqB8NF6/gzxLdNlYW9abB3Ibh+kOWLp8KQ==}
+    engines: {node: '>=16.0.0 || 14 >= 14.17'}
+    peerDependencies:
+      rollup: ^2.68.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-node-resolve@15.3.0':
+    resolution: {integrity: sha512-9eO5McEICxMzJpDW9OnMYSv4Sta3hmt7VtBFz5zR9273suNOydOyq/FrGeGy+KsTRFm8w0SLVhzig2ILFT63Ag==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.78.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/plugin-typescript@11.1.6':
     resolution: {integrity: sha512-R92yOmIACgYdJ7dJ97p4K69I8gg6IEHt8M7dUBxN3W6nrO8uUxX5ixl0yU/N3aZTi8WhPuICvOHXQvF6FaykAA==}
     engines: {node: '>=14.0.0'}
@@ -1745,6 +2005,9 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20'
 
+  '@tauri-apps/api@2.0.0-rc.3':
+    resolution: {integrity: sha512-k1erUfnoOFJwL5VNFZz0BQZ2agNstG7CNOjwpdWMl1vOaVuSn4DhJtXB0Deh9lZaaDlfrykKOyZs9c3XXpMi5Q==}
+
   '@tauri-apps/api@2.0.1':
     resolution: {integrity: sha512-eoQWT+Tq1qSwQpHV+nw1eNYe5B/nm1PoRjQCRiEOS12I1b+X4PUcREfXVX8dPcBT6GrzWGDtaecY0+1p0Rfqlw==}
 
@@ -1822,6 +2085,9 @@ packages:
   '@tauri-apps/plugin-dialog@2.0.1':
     resolution: {integrity: sha512-fnUrNr6EfvTqdls/ufusU7h6UbNFzLKvHk/zTuOiBq01R3dTODqwctZlzakdbfSp/7pNwTKvgKTAgl/NAP/Z0Q==}
 
+  '@tauri-apps/plugin-fs@2.0.0-rc.1':
+    resolution: {integrity: sha512-r6N5dqBNXy9YAK9XbiEqAq3ZKBIN+TWevE7ZFmSRdvdSB1urrLweYu4wxycY2kDaDPzSeeOIJhCmqdNrFT9OSA==}
+
   '@tauri-apps/plugin-fs@2.0.1':
     resolution: {integrity: sha512-PkeZG2WAob9Xpmr66aPvj+McDVgFjV2a7YBzYVZjiCvbGeMs6Yk09tlXhCe3EyZdT/pwWMSi8lXUace+hlsjsw==}
 
@@ -1840,6 +2106,9 @@ packages:
   '@tauri-apps/plugin-os@2.0.0':
     resolution: {integrity: sha512-M7hG/nNyQYTJxVG/UhTKhp9mpXriwWzrs9mqDreB8mIgqA3ek5nHLdwRZJWhkKjZrnDT4v9CpA9BhYeplTlAiA==}
 
+  '@tauri-apps/plugin-os@2.0.0-rc.0':
+    resolution: {integrity: sha512-OWAl8mooKnGykSD4iog8WRqcnOSx0gGmTJBlEExHdFeIuOHg0Ezvd+WiVLhT9LBg7go3ibNWRWpe/ZG7YEp4Vw==}
+
   '@tauri-apps/plugin-process@2.0.0':
     resolution: {integrity: sha512-OYzi0GnkrF4NAnsHZU7U3tjSoP0PbeAlO7T1Z+vJoBUH9sFQ1NSLqWYWQyf8hcb3gVWe7P1JggjiskO+LST1ug==}
 
@@ -1892,6 +2161,9 @@ packages:
   '@types/madge@5.0.3':
     resolution: {integrity: sha512-NlQJd0qRAoyu+pawTDhLxkW940QT2dqASfwd2g/xEZu2F4Xjwa7TVRSPdbmZwUF1ygvAh0/nepeN7JjwEuOXCA==}
 
+  '@types/marked@5.0.2':
+    resolution: {integrity: sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg==}
+
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
@@ -1907,6 +2179,9 @@ packages:
   '@types/phoenix@1.6.5':
     resolution: {integrity: sha512-xegpDuR+z0UqG9fwHqNoy3rI7JDlvaPh2TY47Fl80oq6g+hXT+c/LEuE43X48clZ6lOfANl5WrPur9fYO1RJ/w==}
 
+  '@types/resolve@1.20.2':
+    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
+
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
@@ -1996,6 +2271,86 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
+  '@unocss/astro@0.64.0':
+    resolution: {integrity: sha512-4Ijf3cQblSjdC3XV4SvzkEj17z6gNsuMGy7M+TvNN4cZhGLWQCIChtHR525ESGxJ4kdZ6FoIUoxmLdWHMOpX4Q==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
+  '@unocss/cli@0.64.0':
+    resolution: {integrity: sha512-xfY/qm7vr/4Qaf+CcQHuBJSg5ApZBvvGVD1zwyGFgfhfOFYR1hI3DS2zl75zav6btEwwXsjY7AUv6uYGF4M7dA==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  '@unocss/config@0.64.0':
+    resolution: {integrity: sha512-L97x4vEk7jNG5ptZY5Xp0xgEk//tbMpQVm2BzfyL7w+Hg8X3AV4YjFL6hysHvpYiTdUCVaZg+S0s3b7wuj8Mqw==}
+    engines: {node: '>=14'}
+
+  '@unocss/core@0.64.0':
+    resolution: {integrity: sha512-Qb8wWPYNlTagCdJGzULew+e3NMM8Bd7fr38lDLgrMj+njop+wzkSe1ZZOyMMH9yHSq/Rznn5eCjnyzyHwxGslQ==}
+
+  '@unocss/extractor-arbitrary-variants@0.64.0':
+    resolution: {integrity: sha512-oVB8l8zM+x0MQJTkraRcsrfJnWEwyPVgMgtzmNUm//HqV+xTrjZCNtOqHFNIZdj/+w0gkErGQLxzRwyPjlHq4g==}
+
+  '@unocss/inspector@0.64.0':
+    resolution: {integrity: sha512-aFEfxEuPOpbPNH3j1CLLnN7ZyZkc64XoxZbz7RbG20Wy5oJxonOnlu+Wikz9SfGvIyF16MVAMCkHu12WFRRC+g==}
+
+  '@unocss/postcss@0.64.0':
+    resolution: {integrity: sha512-OMDhAUDEzbb7i+fcYEYNxwdWJLSYklMrFGSC60ADK96UPX/B9S0z1pBz7N34DRPPIzg6shO6NQfDHOaxLelAeg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  '@unocss/preset-attributify@0.64.0':
+    resolution: {integrity: sha512-3T1mktq5rAQxHXtdLkjjj1UOjPwy9iGbVUChvxyaGV5oOsj1mvfe1oetxz8HqAVQak8MtvsJzFzvuuQQln/6OA==}
+
+  '@unocss/preset-icons@0.64.0':
+    resolution: {integrity: sha512-jhozA4r583agZZpKttdootaWfvQ29lY/kHxNU1Ah2xeRQcVXXEh7M3cG0bo9HSIX9/BgXSk5rWQlqSPIqFl4Lw==}
+
+  '@unocss/preset-mini@0.64.0':
+    resolution: {integrity: sha512-bc7zanalVQUrETJ06eyS7y/lhceRlY8kBG/lRCV/dYmKl4Ho/s57LrpZH0G63OcO6IfWIjwoZHVC8/RHAqnYvQ==}
+
+  '@unocss/preset-tagify@0.64.0':
+    resolution: {integrity: sha512-WlRQXYgtVzJpVlZ+itXhrQyvMj6XW1InNIfvAHMorr5BGvMGETLRnuWwYYhGg2YDF/g+/EucU5PQmk9UkurBzg==}
+
+  '@unocss/preset-typography@0.64.0':
+    resolution: {integrity: sha512-hMKxhHTRUjvwB0gcdWOh6zWWolH9pvIvgB4p2GaFT1vKyFD0wkTZ/7S/Q3OMKJyevSKHyIgKd+PhNGKTx5FuQQ==}
+
+  '@unocss/preset-uno@0.64.0':
+    resolution: {integrity: sha512-gUmuL8anty551r/Q2XU5wc0aNZ+te4yydnamXHSUv3EkX6PCphOaiWsQ5f95fj26G8EYH9fLBvxqXurFBPM7og==}
+
+  '@unocss/preset-web-fonts@0.64.0':
+    resolution: {integrity: sha512-qraIhS0tCFHvdPQnzGTfi/dggwyboWPU8UQn8oLMsmPKogNPsYQfjrtTZs8X6F1KNaPV18c6saaWYvVZ8tXPoA==}
+
+  '@unocss/preset-wind@0.64.0':
+    resolution: {integrity: sha512-cJbZI4etFrIIQoC1VhRqyEZU5fUaYqOH3uIt5lM3osxBdAvHds7SPjLRbdR612US7JbuPeFhMMRnA1EYoo39sQ==}
+
+  '@unocss/reset@0.64.0':
+    resolution: {integrity: sha512-75SiDtRX/mtg/7GWeoLfDfdWF4z59zF1XesL46FNd2hDZL36a+SZHIKB/J+PPzLyX9irqm3mAETS2PNfynuJpA==}
+
+  '@unocss/rule-utils@0.64.0':
+    resolution: {integrity: sha512-R5b/uspq6XsmpEqhxSzOOePHsS+pdxya+0pkQw7m6thsUxNDL7kVDpBiz2iNX5lnwagvhyhUWYu85a8XmZ8ymw==}
+    engines: {node: '>=14'}
+
+  '@unocss/transformer-attributify-jsx@0.64.0':
+    resolution: {integrity: sha512-/kG7NFmqMCftK5DJUgMUbe9SWRJt20Z55o36aaCkBcEsrTSYBmWYDyIJPZa3TxsjO8H1qDekRVu7CgDxwlxMEQ==}
+
+  '@unocss/transformer-compile-class@0.64.0':
+    resolution: {integrity: sha512-p1LZG2AUsD0FrkCSo1JOsWVQ+sEMcgnVCm6XtCgxBraV3nPFeZUyxmj9yEkt0HhfYkMTvdT155c3rDhbwP8AFw==}
+
+  '@unocss/transformer-directives@0.64.0':
+    resolution: {integrity: sha512-+e2bDEQMEsfq4KZ2R+GQNrEv0bL3E1KbXGPQXUiMGitmZzzagDfIBk9VTP3gNhU+hgTaWtjXlReeap1eSmwKGQ==}
+
+  '@unocss/transformer-variant-group@0.64.0':
+    resolution: {integrity: sha512-c4CN+W8ShBhGIma3KHHcBe7CRljRwZ0f5UamRrUIMs28a2jfa1TlPlr/4Ke5b6icr0mwTGajJEUaPanOK0Fp1A==}
+
+  '@unocss/vite@0.64.0':
+    resolution: {integrity: sha512-QrfXlI8YcIaqQc4WRVrLbCho8eEi5pjs1/C8AwnUHGximEDN6MZNUk0htjo4QZ+50IA2b4RrYdz1N3875bJoFg==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
+
   '@vinejs/compiler@2.5.0':
     resolution: {integrity: sha512-hg4ekaB5Y2zh+IWzBiC/WCDWrIfpVnKu/ubUvelKlidc/VbulsexoFRw5kJGHZenPVI5YzNnDeTdYSALkTV7jQ==}
     engines: {node: '>=18.0.0'}
@@ -2016,6 +2371,20 @@ packages:
   '@vue/compiler-ssr@3.5.12':
     resolution: {integrity: sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==}
 
+  '@vue/reactivity@3.5.12':
+    resolution: {integrity: sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==}
+
+  '@vue/runtime-core@3.5.12':
+    resolution: {integrity: sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==}
+
+  '@vue/runtime-dom@3.5.12':
+    resolution: {integrity: sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==}
+
+  '@vue/server-renderer@3.5.12':
+    resolution: {integrity: sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==}
+    peerDependencies:
+      vue: 3.5.12
+
   '@vue/shared@3.5.12':
     resolution: {integrity: sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==}
 
@@ -2135,6 +2504,12 @@ packages:
     peerDependencies:
       svelte: ^5.0.0-next.1
 
+  bits-ui@1.0.0-next.45:
+    resolution: {integrity: sha512-kt7gYIirEo2Rg1hMudcGEzSHogQTA22d/j1x8v+wIshsIqqcCN6DXJZpTojSCQWxny8IEa9CRnLwAzY4B2qf1Q==}
+    engines: {node: '>=18', pnpm: '>=8.7.0'}
+    peerDependencies:
+      svelte: ^5.0.0-next.1
+
   bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
 
@@ -2165,6 +2540,16 @@ packages:
   bun-types@1.1.34:
     resolution: {integrity: sha512-br5QygTEL/TwB4uQOb96Ky22j4Gq2WxWH/8Oqv20fk5HagwKXo/akB+LiYgSfzexCt6kkcUaVm+bKiPl71xPvw==}
 
+  bundle-require@5.0.0:
+    resolution: {integrity: sha512-GuziW3fSSmopcx4KRymQEJVbZUfqlCqcq7dvs6TYwKRZiegK/2buMxQTPs6MGlNv50wms1699qYO54R8XfRX4w==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    peerDependencies:
+      esbuild: '>=0.18'
+
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
   callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -2223,6 +2608,10 @@ packages:
     resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
     engines: {node: '>=6'}
 
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
   clone@1.0.4:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
@@ -2242,6 +2631,9 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+
   comlink-stdio@0.1.7:
     resolution: {integrity: sha512-LTTyZfEq3KuDKnNSFDsDbJzNh5F6h+MTd13D6K7yRt9zvnP2nxZ5DgyaAaw2H87vQUzJ1T93Se1o3FHk9Ch7cw==}
     peerDependencies:
@@ -2278,6 +2670,13 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  consola@3.2.3:
+    resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -2292,11 +2691,18 @@ packages:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
 
+  css-tree@3.0.1:
+    resolution: {integrity: sha512-8Fxxv+tGhORlshCdCwnNJytvlvq46sOLSYEx2ZIGurahWvMucSRnyjPA3AmrMq4VPRYbHVpWj5VkiVasrM2H4Q==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
 
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
   data-uri-to-buffer@4.0.1:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
@@ -2327,6 +2733,13 @@ packages:
   defaults@1.0.4:
     resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
 
+  define-lazy-prop@2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
+
+  defu@6.1.4:
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+
   dependency-tree@11.0.1:
     resolution: {integrity: sha512-eCt7HSKIC9NxgIykG2DRq3Aewn9UhVS14MB3rEn6l/AsEI1FBg6ZGSlCU0SZ6Tjm2kkhj6/8c2pViinuyKELhg==}
     engines: {node: '>=18'}
@@ -2336,6 +2749,9 @@ packages:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
 
+  destr@2.0.3:
+    resolution: {integrity: sha512-2N3BOUU4gYMpTP24s5rF5iP7BDr7uNTCs4ozw3kf/eKfvWSIu93GEBi5m427YoyJoeOzQ5smuu4nNAPGb8idSQ==}
+
   detect-indent@6.1.0:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
     engines: {node: '>=8'}
@@ -2407,6 +2823,9 @@ packages:
     resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
     engines: {node: '>=12'}
 
+  duplexer@0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
+
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
@@ -2458,6 +2877,11 @@ packages:
     engines: {node: '>=12'}
     hasBin: true
 
+  esbuild@0.23.1:
+    resolution: {integrity: sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   esbuild@0.24.0:
     resolution: {integrity: sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==}
     engines: {node: '>=18'}
@@ -2644,6 +3068,13 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.1
       sveltekit-superforms: ^2.3.0
 
+  formsnap@2.0.0-next.1:
+    resolution: {integrity: sha512-ha8r9eMmsGEGMY+ljV3FEyTtB72E7dt95y9HHUbCcaDnjbz3Q6n00BHLz7dfBZ9rqyaMeIO200EmP1IcYMExeg==}
+    engines: {node: '>=18', pnpm: '>=8.7.0'}
+    peerDependencies:
+      svelte: ^5.0.0
+      sveltekit-superforms: ^2.19.0
+
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
@@ -2678,9 +3109,16 @@ packages:
     resolution: {integrity: sha512-hFM7oivtlgJ3d6XWD6G47l8Wyh/C6vFw5G24Kk1Tbq85yh5gcM8Fne5/lFhiuxB+RT6+SI7I1ThB9lG4FBh3jw==}
     engines: {node: '>=18'}
 
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
   get-own-enumerable-property-symbols@3.0.2:
     resolution: {integrity: sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==}
 
+  get-tsconfig@4.8.1:
+    resolution: {integrity: sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==}
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -2729,6 +3167,10 @@ packages:
   gsap@3.12.5:
     resolution: {integrity: sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==}
 
+  gzip-size@6.0.0:
+    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
+    engines: {node: '>=10'}
+
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -2753,6 +3195,9 @@ packages:
   human-id@1.0.2:
     resolution: {integrity: sha512-UNopramDEhHJD+VR+ehk8rOslwSfByxPIZyJRfV739NDhN5LF1fa1MqnzKm2lGTQRjNrjK19Q5fhkgIfjlVUKw==}
 
+  i18next@23.16.5:
+    resolution: {integrity: sha512-KTlhE3EP9x6pPTAW7dy0WKIhoCpfOGhRQlO+jttQLgzVaoOjWwBWramu7Pp0i+8wDNduuzXfe3kkVbzrKyrbTA==}
+
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -2771,6 +3216,9 @@ packages:
   import-meta-resolve@4.1.0:
     resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}
 
+  importx@0.4.4:
+    resolution: {integrity: sha512-Lo1pukzAREqrBnnHC+tj+lreMTAvyxtkKsMxLY8H15M/bvLl54p3YuoTI70Tz7Il0AsgSlD7Lrk/FaApRcBL7w==}
+
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -2800,6 +3248,11 @@ packages:
     resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==}
     engines: {node: '>= 0.4'}
 
+  is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -2816,6 +3269,9 @@ packages:
     resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
     engines: {node: '>=8'}
 
+  is-module@1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -2828,6 +3284,9 @@ packages:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
     engines: {node: '>=8'}
 
+  is-reference@1.2.1:
+    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+
   is-reference@3.0.2:
     resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
 
@@ -2854,6 +3313,10 @@ packages:
     resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
     engines: {node: '>=0.10.0'}
 
+  is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -2864,6 +3327,10 @@ packages:
     resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
     hasBin: true
 
+  jiti@2.0.0-beta.3:
+    resolution: {integrity: sha512-pmfRbVRs/7khFrSAYnSiJ8C0D5GvzkE4Ey2pAvUcJsw1ly/p+7ut27jbJrjY79BpAJQJ4gXYFtK6d1Aub+9baQ==}
+    hasBin: true
+
   joi@17.13.3:
     resolution: {integrity: sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==}
 
@@ -2920,6 +3387,9 @@ packages:
   known-css-properties@0.35.0:
     resolution: {integrity: sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==}
 
+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -2941,6 +3411,14 @@ packages:
   linkify-it@5.0.0:
     resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
 
+  load-tsconfig@0.2.5:
+    resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  local-pkg@0.5.0:
+    resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
+    engines: {node: '>=14'}
+
   locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
 
@@ -3009,9 +3487,17 @@ packages:
     resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
     hasBin: true
 
+  marked@5.1.2:
+    resolution: {integrity: sha512-ahRPGXJpjMjwSOlBoTMZAK7ATXkli5qCPxZ21TG44rx1KEo44bii4ekgTDQPNRQ4Kh7JMb9Ub1PVk1NxRSsorg==}
+    engines: {node: '>= 16'}
+    hasBin: true
+
   mdast-util-to-hast@13.2.0:
     resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
 
+  mdn-data@2.12.1:
+    resolution: {integrity: sha512-rsfnCbOHjqrhWxwt5/wtSLzpoKTzW7OXdT5lLOIH1OTYhWu9rRJveGq0sKvDZODABH7RX+uoR+DYcpFnq4Tf6Q==}
+
   mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
@@ -3076,6 +3562,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  mlly@1.7.2:
+    resolution: {integrity: sha512-tN3dvVHYVz4DhSXinXIk7u9syPYaJvio118uomkovAtWBT+RdbP6Lfh/5Lvo519YMmwBafwlh20IPTXIStscpA==}
+
   mode-watcher@0.4.1:
     resolution: {integrity: sha512-bNC+1NXmwEFZtziCdZSgP7HFQTpqJPcQn9GwwJQGSf6SBF3neEPYV1uRwkYuAQwbsvsXIYtzaqgedDzJ7D1mhg==}
     peerDependencies:
@@ -3126,6 +3615,9 @@ packages:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
     engines: {node: '>=10.5.0'}
 
+  node-fetch-native@1.6.4:
+    resolution: {integrity: sha512-IhOigYzAKHd244OC0JIMIUrjzctirCmPkaIfhDeGcEETWof5zKYUW7e7MYvChGWh/4CJeXEgsRyGzuF334rOOQ==}
+
   node-fetch@3.3.2:
     resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -3161,6 +3653,9 @@ packages:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
 
+  ofetch@1.4.1:
+    resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
+
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
@@ -3171,6 +3666,10 @@ packages:
   oniguruma-to-js@0.4.3:
     resolution: {integrity: sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==}
 
+  open@8.4.2:
+    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
+    engines: {node: '>=12'}
+
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -3256,6 +3755,12 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+
+  perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+
   picocolors@1.1.0:
     resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
 
@@ -3282,6 +3787,9 @@ packages:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
 
+  pkg-types@1.2.1:
+    resolution: {integrity: sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==}
+
   plimit-lit@1.6.1:
     resolution: {integrity: sha512-B7+VDyb8Tl6oMJT9oSO2CW8XC/T4UcJGrwOVoNGwOQsQYhlpfajmrMj5xeejqaASq3V/EqThyOeATEOMuSEXiA==}
     engines: {node: '>=12'}
@@ -3520,6 +4028,10 @@ packages:
   regex@4.4.0:
     resolution: {integrity: sha512-uCUSuobNVeqUupowbdZub6ggI5/JZkYyJdDogddJr60L764oxC2pMZov1fQ3wM9bdyzUILDG+Sqx6NAKAz9rKQ==}
 
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
   requirejs-config-file@4.0.0:
     resolution: {integrity: sha512-jnIre8cbWOyvr8a5F2KuqBnY+SDA4NXr/hzEZJG79Mxm2WiFQz2dzhC8ibtPJS7zkmBEl1mxSwp5HhC1W4qpxw==}
     engines: {node: '>=10.13.0'}
@@ -3541,6 +4053,9 @@ packages:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
 
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
   resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
@@ -3562,6 +4077,16 @@ packages:
     resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==}
     hasBin: true
 
+  rollup-plugin-visualizer@5.12.0:
+    resolution: {integrity: sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+    peerDependencies:
+      rollup: 2.x || 3.x || 4.x
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   rollup@4.24.3:
     resolution: {integrity: sha512-HBW896xR5HGmoksbi3JBDtmVzWiPAYqp7wip50hjQ67JbDz61nyoMPdqu1DvVW9asYb2M65Z20ZHsyJCMqMyDg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -3638,6 +4163,10 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
+    engines: {node: '>= 10'}
+
   sirv@3.0.0:
     resolution: {integrity: sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==}
     engines: {node: '>=18'}
@@ -3657,6 +4186,10 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  source-map@0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
+
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
@@ -3757,11 +4290,16 @@ packages:
       svelte:
         optional: true
 
-  svelte-persisted-store@0.11.0:
-    resolution: {integrity: sha512-9RgJ5DrawGyyfK22A80cfu8Jose3CV8YjEZKz9Tn94rQ0tWyEmYr+XI+wrVF6wjRbW99JMDSVcFRiM3XzVJj/w==}
+  svelte-markdown@0.4.1:
+    resolution: {integrity: sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw==}
+    peerDependencies:
+      svelte: ^4.0.0
+
+  svelte-persisted-store@0.12.0:
+    resolution: {integrity: sha512-BdBQr2SGSJ+rDWH8/aEV5GthBJDapVP0GP3fuUCA7TjYG5ctcB+O9Mj9ZC0+Jo1oJMfZUd1y9H68NFRR5MyIJA==}
     engines: {node: '>=0.14'}
     peerDependencies:
-      svelte: ^3.48.0 || ^4.0.0 || ^5.0.0-next.0
+      svelte: ^3.48.0 || ^4 || ^5
 
   svelte-radix@2.0.1:
     resolution: {integrity: sha512-YrX44Dj+Rp6YZuPSjdmyd6P8QTkb2NXwySUCZYzjwkP6Cl3dZaTBPPeaSOutP3v3ycQ2XwyNOpyn4p0QcN+uYQ==}
@@ -3862,6 +4400,13 @@ packages:
   tiny-glob@0.2.9:
     resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
 
+  tinyexec@0.3.1:
+    resolution: {integrity: sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==}
+
+  tinyglobby@0.2.10:
+    resolution: {integrity: sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==}
+    engines: {node: '>=12.0.0'}
+
   tmp@0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
@@ -3917,6 +4462,11 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tsx@4.19.2:
+    resolution: {integrity: sha512-pOUl6Vo2LUq/bSa8S5q7b91cgNSjctn9ugq/+Mvow99qW6x/UZYwzxy/3NmqoT66eHYfCVvFvACC58UBPFf28g==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
   turbo-darwin-64@2.2.3:
     resolution: {integrity: sha512-Rcm10CuMKQGcdIBS3R/9PMeuYnv6beYIHqfZFeKWVYEWH69sauj4INs83zKMTUiZJ3/hWGZ4jet9AOwhsssLyg==}
     cpu: [x64]
@@ -3983,6 +4533,12 @@ packages:
   uc.micro@2.1.0:
     resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
 
+  ufo@1.5.4:
+    resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
+
+  unconfig@0.5.5:
+    resolution: {integrity: sha512-VQZ5PT9HDX+qag0XdgQi8tJepPhXiR/yVOkn707gJDKo31lGjRilPREiQJ9Z6zd/Ugpv6ZvO5VxVIcatldYcNQ==}
+
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
@@ -4012,6 +4568,18 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
+  unocss@0.64.0:
+    resolution: {integrity: sha512-wiEFRjGXSogzf/4+KICXjFDgSGloSCV1Ka2Dct/8Z8U+iwRqeVpHGVQcGjBFg9Uh0DH1fSVBbis2aPuIkT0nEA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@unocss/webpack': 0.64.0
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
+    peerDependenciesMeta:
+      '@unocss/webpack':
+        optional: true
+      vite:
+        optional: true
+
   update-browserslist-db@1.1.1:
     resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
     hasBin: true
@@ -4113,6 +4681,22 @@ packages:
       vite:
         optional: true
 
+  vue-flow-layout@0.1.1:
+    resolution: {integrity: sha512-JdgRRUVrN0Y2GosA0M68DEbKlXMqJ7FQgsK8CjQD2vxvNSqAU6PZEpi4cfcTVtfM2GVOMjHo7GKKLbXxOBqDqA==}
+    peerDependencies:
+      vue: ^3.4.37
+
+  vue-sonner@1.2.5:
+    resolution: {integrity: sha512-dAFCdq2cYxEwvW4gHuJhySCXklmxOWzjl5QwkNL9IIdkqyvSkdu+YnAbnJBdIAH/zo1bhXTuGG+m0Two4AX/KA==}
+
+  vue@3.5.12:
+    resolution: {integrity: sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   walkdir@0.4.1:
     resolution: {integrity: sha512-3eBwRyEln6E1MSzcxcVpQIhRG8Q1jLvEqRmCZqS3dsfXEDR/AhOF4d+jHg1qvDCpYaVRZjENPQyrVxAkQqxPgQ==}
     engines: {node: '>=6.0.0'}
@@ -4170,6 +4754,10 @@ packages:
       utf-8-validate:
         optional: true
 
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
   yallist@2.1.2:
     resolution: {integrity: sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==}
 
@@ -4189,6 +4777,14 @@ packages:
     engines: {node: '>= 14'}
     hasBin: true
 
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -4219,6 +4815,13 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@antfu/install-pkg@0.4.1':
+    dependencies:
+      package-manager-detector: 0.2.2
+      tinyexec: 0.3.1
+
+  '@antfu/utils@0.7.10': {}
+
   '@ark/schema@0.10.0':
     dependencies:
       '@ark/util': 0.10.0
@@ -4990,141 +5593,213 @@ snapshots:
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
+  '@esbuild/aix-ppc64@0.23.1':
+    optional: true
+
   '@esbuild/aix-ppc64@0.24.0':
     optional: true
 
   '@esbuild/android-arm64@0.21.5':
     optional: true
 
+  '@esbuild/android-arm64@0.23.1':
+    optional: true
+
   '@esbuild/android-arm64@0.24.0':
     optional: true
 
   '@esbuild/android-arm@0.21.5':
     optional: true
 
+  '@esbuild/android-arm@0.23.1':
+    optional: true
+
   '@esbuild/android-arm@0.24.0':
     optional: true
 
   '@esbuild/android-x64@0.21.5':
     optional: true
 
+  '@esbuild/android-x64@0.23.1':
+    optional: true
+
   '@esbuild/android-x64@0.24.0':
     optional: true
 
   '@esbuild/darwin-arm64@0.21.5':
     optional: true
 
+  '@esbuild/darwin-arm64@0.23.1':
+    optional: true
+
   '@esbuild/darwin-arm64@0.24.0':
     optional: true
 
   '@esbuild/darwin-x64@0.21.5':
     optional: true
 
+  '@esbuild/darwin-x64@0.23.1':
+    optional: true
+
   '@esbuild/darwin-x64@0.24.0':
     optional: true
 
   '@esbuild/freebsd-arm64@0.21.5':
     optional: true
 
+  '@esbuild/freebsd-arm64@0.23.1':
+    optional: true
+
   '@esbuild/freebsd-arm64@0.24.0':
     optional: true
 
   '@esbuild/freebsd-x64@0.21.5':
     optional: true
 
+  '@esbuild/freebsd-x64@0.23.1':
+    optional: true
+
   '@esbuild/freebsd-x64@0.24.0':
     optional: true
 
   '@esbuild/linux-arm64@0.21.5':
     optional: true
 
+  '@esbuild/linux-arm64@0.23.1':
+    optional: true
+
   '@esbuild/linux-arm64@0.24.0':
     optional: true
 
   '@esbuild/linux-arm@0.21.5':
     optional: true
 
+  '@esbuild/linux-arm@0.23.1':
+    optional: true
+
   '@esbuild/linux-arm@0.24.0':
     optional: true
 
   '@esbuild/linux-ia32@0.21.5':
     optional: true
 
+  '@esbuild/linux-ia32@0.23.1':
+    optional: true
+
   '@esbuild/linux-ia32@0.24.0':
     optional: true
 
   '@esbuild/linux-loong64@0.21.5':
     optional: true
 
+  '@esbuild/linux-loong64@0.23.1':
+    optional: true
+
   '@esbuild/linux-loong64@0.24.0':
     optional: true
 
   '@esbuild/linux-mips64el@0.21.5':
     optional: true
 
+  '@esbuild/linux-mips64el@0.23.1':
+    optional: true
+
   '@esbuild/linux-mips64el@0.24.0':
     optional: true
 
   '@esbuild/linux-ppc64@0.21.5':
     optional: true
 
+  '@esbuild/linux-ppc64@0.23.1':
+    optional: true
+
   '@esbuild/linux-ppc64@0.24.0':
     optional: true
 
   '@esbuild/linux-riscv64@0.21.5':
     optional: true
 
+  '@esbuild/linux-riscv64@0.23.1':
+    optional: true
+
   '@esbuild/linux-riscv64@0.24.0':
     optional: true
 
   '@esbuild/linux-s390x@0.21.5':
     optional: true
 
+  '@esbuild/linux-s390x@0.23.1':
+    optional: true
+
   '@esbuild/linux-s390x@0.24.0':
     optional: true
 
   '@esbuild/linux-x64@0.21.5':
     optional: true
 
+  '@esbuild/linux-x64@0.23.1':
+    optional: true
+
   '@esbuild/linux-x64@0.24.0':
     optional: true
 
   '@esbuild/netbsd-x64@0.21.5':
     optional: true
 
+  '@esbuild/netbsd-x64@0.23.1':
+    optional: true
+
   '@esbuild/netbsd-x64@0.24.0':
     optional: true
 
+  '@esbuild/openbsd-arm64@0.23.1':
+    optional: true
+
   '@esbuild/openbsd-arm64@0.24.0':
     optional: true
 
   '@esbuild/openbsd-x64@0.21.5':
     optional: true
 
+  '@esbuild/openbsd-x64@0.23.1':
+    optional: true
+
   '@esbuild/openbsd-x64@0.24.0':
     optional: true
 
   '@esbuild/sunos-x64@0.21.5':
     optional: true
 
+  '@esbuild/sunos-x64@0.23.1':
+    optional: true
+
   '@esbuild/sunos-x64@0.24.0':
     optional: true
 
   '@esbuild/win32-arm64@0.21.5':
     optional: true
 
+  '@esbuild/win32-arm64@0.23.1':
+    optional: true
+
   '@esbuild/win32-arm64@0.24.0':
     optional: true
 
   '@esbuild/win32-ia32@0.21.5':
     optional: true
 
+  '@esbuild/win32-ia32@0.23.1':
+    optional: true
+
   '@esbuild/win32-ia32@0.24.0':
     optional: true
 
   '@esbuild/win32-x64@0.21.5':
     optional: true
 
+  '@esbuild/win32-x64@0.23.1':
+    optional: true
+
   '@esbuild/win32-x64@0.24.0':
     optional: true
 
@@ -5229,6 +5904,18 @@ snapshots:
 
   '@iconify/types@2.0.0': {}
 
+  '@iconify/utils@2.1.33':
+    dependencies:
+      '@antfu/install-pkg': 0.4.1
+      '@antfu/utils': 0.7.10
+      '@iconify/types': 2.0.0
+      debug: 4.3.7
+      kolorist: 1.8.0
+      local-pkg: 0.5.0
+      mlly: 1.7.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@internationalized/date@3.5.6':
     dependencies:
       '@swc/helpers': 0.5.13
@@ -5269,13 +5956,33 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@jsr/hk__comlink-stdio@0.1.7': {}
+
+  '@jsr/kunkun__api@0.0.13(tslib@2.8.1)(typescript@5.6.3)':
+    dependencies:
+      '@huakunshen/comlink': 4.4.1
+      '@jsr/hk__comlink-stdio': 0.1.7
+      '@tauri-apps/api': 2.0.0-rc.3
+      '@tauri-apps/plugin-fs': 2.0.0-rc.1
+      '@tauri-apps/plugin-os': 2.0.0-rc.0
+      lodash: 4.17.21
+      minimatch: 10.0.1
+      semver: 7.6.3
+      tauri-api-adapter: 0.3.8(tslib@2.8.1)(typescript@5.6.3)
+      tauri-plugin-shellx-api: 2.0.11
+      valibot: 0.40.0(typescript@5.6.3)
+      vue-sonner: 1.2.5
+    transitivePeerDependencies:
+      - tslib
+      - typescript
+
   '@jsr/std__semver@1.0.3': {}
 
-  '@kksh/svelte5@0.1.2-beta.4(lucide-svelte@0.454.0(svelte@5.1.9))(svelte-sonner@0.3.28(svelte@5.1.9))(svelte@5.1.9)':
+  '@kksh/svelte5@0.1.2-beta.8(lucide-svelte@0.454.0(svelte@5.1.9))(svelte-sonner@0.3.28(svelte@5.1.9))(svelte@5.1.9)':
     dependencies:
       lucide-svelte: 0.454.0(svelte@5.1.9)
       svelte: 5.1.9
-      svelte-persisted-store: 0.11.0(svelte@5.1.9)
+      svelte-persisted-store: 0.12.0(svelte@5.1.9)
       svelte-sonner: 0.3.28(svelte@5.1.9)
 
   '@manypkg/find-root@1.1.0':
@@ -5328,6 +6035,27 @@ snapshots:
     optionalDependencies:
       rollup: 4.24.3
 
+  '@rollup/plugin-commonjs@26.0.3(rollup@4.24.3)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.3(rollup@4.24.3)
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      glob: 10.4.5
+      is-reference: 1.2.1
+      magic-string: 0.30.12
+    optionalDependencies:
+      rollup: 4.24.3
+
+  '@rollup/plugin-node-resolve@15.3.0(rollup@4.24.3)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.3(rollup@4.24.3)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-module: 1.0.0
+      resolve: 1.22.8
+    optionalDependencies:
+      rollup: 4.24.3
+
   '@rollup/plugin-typescript@11.1.6(rollup@4.24.3)(tslib@2.8.1)(typescript@5.5.4)':
     dependencies:
       '@rollup/pluginutils': 5.1.3(rollup@4.24.3)
@@ -5337,6 +6065,15 @@ snapshots:
       rollup: 4.24.3
       tslib: 2.8.1
 
+  '@rollup/plugin-typescript@11.1.6(rollup@4.24.3)(tslib@2.8.1)(typescript@5.6.3)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.3(rollup@4.24.3)
+      resolve: 1.22.8
+      typescript: 5.6.3
+    optionalDependencies:
+      rollup: 4.24.3
+      tslib: 2.8.1
+
   '@rollup/pluginutils@5.1.3(rollup@4.24.3)':
     dependencies:
       '@types/estree': 1.0.6
@@ -5890,6 +6627,8 @@ snapshots:
       postcss-selector-parser: 6.0.10
       tailwindcss: 3.4.14
 
+  '@tauri-apps/api@2.0.0-rc.3': {}
+
   '@tauri-apps/api@2.0.1': {}
 
   '@tauri-apps/api@2.0.3': {}
@@ -5945,6 +6684,10 @@ snapshots:
     dependencies:
       '@tauri-apps/api': 2.0.3
 
+  '@tauri-apps/plugin-fs@2.0.0-rc.1':
+    dependencies:
+      '@tauri-apps/api': 2.0.3
+
   '@tauri-apps/plugin-fs@2.0.1':
     dependencies:
       '@tauri-apps/api': 2.0.3
@@ -5969,6 +6712,10 @@ snapshots:
     dependencies:
       '@tauri-apps/api': 2.0.3
 
+  '@tauri-apps/plugin-os@2.0.0-rc.0':
+    dependencies:
+      '@tauri-apps/api': 2.0.3
+
   '@tauri-apps/plugin-process@2.0.0':
     dependencies:
       '@tauri-apps/api': 2.0.3
@@ -6025,6 +6772,8 @@ snapshots:
     dependencies:
       '@types/node': 22.8.7
 
+  '@types/marked@5.0.2': {}
+
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -6041,6 +6790,8 @@ snapshots:
 
   '@types/phoenix@1.6.5': {}
 
+  '@types/resolve@1.20.2': {}
+
   '@types/semver@7.5.8': {}
 
   '@types/unist@3.0.3': {}
@@ -6149,6 +6900,157 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
+  '@unocss/astro@0.64.0(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@unocss/core': 0.64.0
+      '@unocss/reset': 0.64.0
+      '@unocss/vite': 0.64.0(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+    optionalDependencies:
+      vite: 5.4.10(@types/node@22.8.7)(terser@5.36.0)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - vue
+
+  '@unocss/cli@0.64.0(rollup@4.24.3)':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@rollup/pluginutils': 5.1.3(rollup@4.24.3)
+      '@unocss/config': 0.64.0
+      '@unocss/core': 0.64.0
+      '@unocss/preset-uno': 0.64.0
+      cac: 6.7.14
+      chokidar: 3.6.0
+      colorette: 2.0.20
+      consola: 3.2.3
+      magic-string: 0.30.12
+      pathe: 1.1.2
+      perfect-debounce: 1.0.0
+      tinyglobby: 0.2.10
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+
+  '@unocss/config@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+      unconfig: 0.5.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@unocss/core@0.64.0': {}
+
+  '@unocss/extractor-arbitrary-variants@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+
+  '@unocss/inspector@0.64.0(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@unocss/core': 0.64.0
+      '@unocss/rule-utils': 0.64.0
+      gzip-size: 6.0.0
+      sirv: 2.0.4
+      vue-flow-layout: 0.1.1(vue@3.5.12(typescript@5.6.3))
+    transitivePeerDependencies:
+      - vue
+
+  '@unocss/postcss@0.64.0(postcss@8.4.47)':
+    dependencies:
+      '@unocss/config': 0.64.0
+      '@unocss/core': 0.64.0
+      '@unocss/rule-utils': 0.64.0
+      css-tree: 3.0.1
+      postcss: 8.4.47
+      tinyglobby: 0.2.10
+    transitivePeerDependencies:
+      - supports-color
+
+  '@unocss/preset-attributify@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+
+  '@unocss/preset-icons@0.64.0':
+    dependencies:
+      '@iconify/utils': 2.1.33
+      '@unocss/core': 0.64.0
+      ofetch: 1.4.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@unocss/preset-mini@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+      '@unocss/extractor-arbitrary-variants': 0.64.0
+      '@unocss/rule-utils': 0.64.0
+
+  '@unocss/preset-tagify@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+
+  '@unocss/preset-typography@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+      '@unocss/preset-mini': 0.64.0
+
+  '@unocss/preset-uno@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+      '@unocss/preset-mini': 0.64.0
+      '@unocss/preset-wind': 0.64.0
+      '@unocss/rule-utils': 0.64.0
+
+  '@unocss/preset-web-fonts@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+      ofetch: 1.4.1
+
+  '@unocss/preset-wind@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+      '@unocss/preset-mini': 0.64.0
+      '@unocss/rule-utils': 0.64.0
+
+  '@unocss/reset@0.64.0': {}
+
+  '@unocss/rule-utils@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+      magic-string: 0.30.12
+
+  '@unocss/transformer-attributify-jsx@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+
+  '@unocss/transformer-compile-class@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+
+  '@unocss/transformer-directives@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+      '@unocss/rule-utils': 0.64.0
+      css-tree: 3.0.1
+
+  '@unocss/transformer-variant-group@0.64.0':
+    dependencies:
+      '@unocss/core': 0.64.0
+
+  '@unocss/vite@0.64.0(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@rollup/pluginutils': 5.1.3(rollup@4.24.3)
+      '@unocss/config': 0.64.0
+      '@unocss/core': 0.64.0
+      '@unocss/inspector': 0.64.0(vue@3.5.12(typescript@5.6.3))
+      chokidar: 3.6.0
+      magic-string: 0.30.12
+      tinyglobby: 0.2.10
+      vite: 5.4.10(@types/node@22.8.7)(terser@5.36.0)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - vue
+
   '@vinejs/compiler@2.5.0':
     optional: true
 
@@ -6194,6 +7096,28 @@ snapshots:
       '@vue/compiler-dom': 3.5.12
       '@vue/shared': 3.5.12
 
+  '@vue/reactivity@3.5.12':
+    dependencies:
+      '@vue/shared': 3.5.12
+
+  '@vue/runtime-core@3.5.12':
+    dependencies:
+      '@vue/reactivity': 3.5.12
+      '@vue/shared': 3.5.12
+
+  '@vue/runtime-dom@3.5.12':
+    dependencies:
+      '@vue/reactivity': 3.5.12
+      '@vue/runtime-core': 3.5.12
+      '@vue/shared': 3.5.12
+      csstype: 3.1.3
+
+  '@vue/server-renderer@3.5.12(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.12
+      '@vue/shared': 3.5.12
+      vue: 3.5.12(typescript@5.6.3)
+
   '@vue/shared@3.5.12': {}
 
   acorn-jsx@5.3.2(acorn@8.12.1):
@@ -6307,6 +7231,16 @@ snapshots:
       svelte: 5.1.9
       svelte-toolbelt: 0.4.6(svelte@5.1.9)
 
+  bits-ui@1.0.0-next.45(svelte@5.1.9):
+    dependencies:
+      '@floating-ui/core': 1.6.8
+      '@floating-ui/dom': 1.6.12
+      '@internationalized/date': 3.5.6
+      esm-env: 1.1.4
+      runed: 0.15.3(svelte@5.1.9)
+      svelte: 5.1.9
+      svelte-toolbelt: 0.4.6(svelte@5.1.9)
+
   bl@4.1.0:
     dependencies:
       buffer: 5.7.1
@@ -6348,6 +7282,13 @@ snapshots:
       '@types/node': 20.12.14
       '@types/ws': 8.5.13
 
+  bundle-require@5.0.0(esbuild@0.21.5):
+    dependencies:
+      esbuild: 0.21.5
+      load-tsconfig: 0.2.5
+
+  cac@6.7.14: {}
+
   callsites@3.1.0: {}
 
   camelcase-css@2.0.1: {}
@@ -6403,6 +7344,12 @@ snapshots:
 
   cli-spinners@2.9.2: {}
 
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
   clone@1.0.4: {}
 
   clsx@2.1.1: {}
@@ -6415,6 +7362,8 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  colorette@2.0.20: {}
+
   comlink-stdio@0.1.7(typescript@5.5.4):
     dependencies:
       typescript: 5.5.4
@@ -6438,6 +7387,10 @@ snapshots:
 
   concat-map@0.0.1: {}
 
+  confbox@0.1.8: {}
+
+  consola@3.2.3: {}
+
   convert-source-map@2.0.0: {}
 
   cookie@0.6.0: {}
@@ -6454,8 +7407,15 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-tree@3.0.1:
+    dependencies:
+      mdn-data: 2.12.1
+      source-map-js: 1.2.1
+
   cssesc@3.0.0: {}
 
+  csstype@3.1.3: {}
+
   data-uri-to-buffer@4.0.1: {}
 
   dayjs@1.11.13:
@@ -6475,6 +7435,10 @@ snapshots:
     dependencies:
       clone: 1.0.4
 
+  define-lazy-prop@2.0.0: {}
+
+  defu@6.1.4: {}
+
   dependency-tree@11.0.1:
     dependencies:
       commander: 12.1.0
@@ -6486,6 +7450,8 @@ snapshots:
 
   dequal@2.0.3: {}
 
+  destr@2.0.3: {}
+
   detect-indent@6.1.0: {}
 
   detective-amd@6.0.0:
@@ -6564,6 +7530,8 @@ snapshots:
 
   dotenv@16.0.3: {}
 
+  duplexer@0.1.2: {}
+
   eastasianwidth@0.2.0: {}
 
   effect@3.10.8:
@@ -6634,6 +7602,33 @@ snapshots:
       '@esbuild/win32-ia32': 0.21.5
       '@esbuild/win32-x64': 0.21.5
 
+  esbuild@0.23.1:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.23.1
+      '@esbuild/android-arm': 0.23.1
+      '@esbuild/android-arm64': 0.23.1
+      '@esbuild/android-x64': 0.23.1
+      '@esbuild/darwin-arm64': 0.23.1
+      '@esbuild/darwin-x64': 0.23.1
+      '@esbuild/freebsd-arm64': 0.23.1
+      '@esbuild/freebsd-x64': 0.23.1
+      '@esbuild/linux-arm': 0.23.1
+      '@esbuild/linux-arm64': 0.23.1
+      '@esbuild/linux-ia32': 0.23.1
+      '@esbuild/linux-loong64': 0.23.1
+      '@esbuild/linux-mips64el': 0.23.1
+      '@esbuild/linux-ppc64': 0.23.1
+      '@esbuild/linux-riscv64': 0.23.1
+      '@esbuild/linux-s390x': 0.23.1
+      '@esbuild/linux-x64': 0.23.1
+      '@esbuild/netbsd-x64': 0.23.1
+      '@esbuild/openbsd-arm64': 0.23.1
+      '@esbuild/openbsd-x64': 0.23.1
+      '@esbuild/sunos-x64': 0.23.1
+      '@esbuild/win32-arm64': 0.23.1
+      '@esbuild/win32-ia32': 0.23.1
+      '@esbuild/win32-x64': 0.23.1
+
   esbuild@0.24.0:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.24.0
@@ -6894,6 +7889,12 @@ snapshots:
       svelte: 5.1.9
       sveltekit-superforms: 2.20.0(@sveltejs/kit@2.7.4(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(@types/json-schema@7.0.15)(svelte@5.1.9)(typescript@5.6.3)
 
+  formsnap@2.0.0-next.1(svelte@5.1.9)(sveltekit-superforms@2.20.0(@sveltejs/kit@2.7.4(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(@types/json-schema@7.0.15)(svelte@5.1.9)(typescript@5.6.3)):
+    dependencies:
+      svelte: 5.1.9
+      svelte-toolbelt: 0.4.6(svelte@5.1.9)
+      sveltekit-superforms: 2.20.0(@sveltejs/kit@2.7.4(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(@types/json-schema@7.0.15)(svelte@5.1.9)(typescript@5.6.3)
+
   fraction.js@4.3.7: {}
 
   fs-extra@11.2.0:
@@ -6928,8 +7929,14 @@ snapshots:
       ast-module-types: 6.0.0
       node-source-walk: 7.0.0
 
+  get-caller-file@2.0.5: {}
+
   get-own-enumerable-property-symbols@3.0.2: {}
 
+  get-tsconfig@4.8.1:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -6985,6 +7992,10 @@ snapshots:
 
   gsap@3.12.5: {}
 
+  gzip-size@6.0.0:
+    dependencies:
+      duplexer: 0.1.2
+
   has-flag@4.0.0: {}
 
   hasown@2.0.2:
@@ -7020,6 +8031,10 @@ snapshots:
 
   human-id@1.0.2: {}
 
+  i18next@23.16.5:
+    dependencies:
+      '@babel/runtime': 7.26.0
+
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
@@ -7035,6 +8050,18 @@ snapshots:
 
   import-meta-resolve@4.1.0: {}
 
+  importx@0.4.4:
+    dependencies:
+      bundle-require: 5.0.0(esbuild@0.21.5)
+      debug: 4.3.7
+      esbuild: 0.21.5
+      jiti: 2.0.0-beta.3
+      jiti-v1: jiti@1.21.6
+      pathe: 1.1.2
+      tsx: 4.19.2
+    transitivePeerDependencies:
+      - supports-color
+
   imurmurhash@0.1.4: {}
 
   inflight@1.0.6:
@@ -7058,6 +8085,8 @@ snapshots:
     dependencies:
       hasown: 2.0.2
 
+  is-docker@2.2.1: {}
+
   is-extglob@2.1.1: {}
 
   is-fullwidth-code-point@3.0.0: {}
@@ -7068,12 +8097,18 @@ snapshots:
 
   is-interactive@1.0.0: {}
 
+  is-module@1.0.0: {}
+
   is-number@7.0.0: {}
 
   is-obj@1.0.1: {}
 
   is-path-inside@3.0.3: {}
 
+  is-reference@1.2.1:
+    dependencies:
+      '@types/estree': 1.0.6
+
   is-reference@3.0.2:
     dependencies:
       '@types/estree': 1.0.6
@@ -7092,6 +8127,10 @@ snapshots:
 
   is-windows@1.0.2: {}
 
+  is-wsl@2.2.0:
+    dependencies:
+      is-docker: 2.2.1
+
   isexe@2.0.0: {}
 
   jackspeak@3.4.3:
@@ -7102,6 +8141,8 @@ snapshots:
 
   jiti@1.21.6: {}
 
+  jiti@2.0.0-beta.3: {}
+
   joi@17.13.3:
     dependencies:
       '@hapi/hoek': 9.3.0
@@ -7158,6 +8199,8 @@ snapshots:
 
   known-css-properties@0.35.0: {}
 
+  kolorist@1.8.0: {}
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
@@ -7176,6 +8219,13 @@ snapshots:
     dependencies:
       uc.micro: 2.1.0
 
+  load-tsconfig@0.2.5: {}
+
+  local-pkg@0.5.0:
+    dependencies:
+      mlly: 1.7.2
+      pkg-types: 1.2.1
+
   locate-character@3.0.0: {}
 
   locate-path@5.0.0:
@@ -7252,6 +8302,8 @@ snapshots:
       punycode.js: 2.3.1
       uc.micro: 2.1.0
 
+  marked@5.1.2: {}
+
   mdast-util-to-hast@13.2.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -7264,6 +8316,8 @@ snapshots:
       unist-util-visit: 5.0.0
       vfile: 6.0.3
 
+  mdn-data@2.12.1: {}
+
   mdurl@2.0.0: {}
 
   memoize-weak@1.0.2: {}
@@ -7319,6 +8373,13 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
+  mlly@1.7.2:
+    dependencies:
+      acorn: 8.12.1
+      pathe: 1.1.2
+      pkg-types: 1.2.1
+      ufo: 1.5.4
+
   mode-watcher@0.4.1(svelte@5.1.9):
     dependencies:
       svelte: 5.1.9
@@ -7357,6 +8418,8 @@ snapshots:
 
   node-domexception@1.0.0: {}
 
+  node-fetch-native@1.6.4: {}
+
   node-fetch@3.3.2:
     dependencies:
       data-uri-to-buffer: 4.0.1
@@ -7382,6 +8445,12 @@ snapshots:
 
   object-hash@3.0.0: {}
 
+  ofetch@1.4.1:
+    dependencies:
+      destr: 2.0.3
+      node-fetch-native: 1.6.4
+      ufo: 1.5.4
+
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -7394,6 +8463,12 @@ snapshots:
     dependencies:
       regex: 4.4.0
 
+  open@8.4.2:
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -7473,6 +8548,10 @@ snapshots:
 
   path-type@4.0.0: {}
 
+  pathe@1.1.2: {}
+
+  perfect-debounce@1.0.0: {}
+
   picocolors@1.1.0: {}
 
   picocolors@1.1.1: {}
@@ -7487,6 +8566,12 @@ snapshots:
 
   pirates@4.0.6: {}
 
+  pkg-types@1.2.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.7.2
+      pathe: 1.1.2
+
   plimit-lit@1.6.1:
     dependencies:
       queue-lit: 1.5.2
@@ -7661,6 +8746,8 @@ snapshots:
 
   regex@4.4.0: {}
 
+  require-directory@2.1.1: {}
+
   requirejs-config-file@4.0.0:
     dependencies:
       esprima: 4.0.1
@@ -7674,6 +8761,8 @@ snapshots:
 
   resolve-from@5.0.0: {}
 
+  resolve-pkg-maps@1.0.0: {}
+
   resolve@1.22.8:
     dependencies:
       is-core-module: 2.15.1
@@ -7695,6 +8784,15 @@ snapshots:
     dependencies:
       glob: 10.4.5
 
+  rollup-plugin-visualizer@5.12.0(rollup@4.24.3):
+    dependencies:
+      open: 8.4.2
+      picomatch: 2.3.1
+      source-map: 0.7.4
+      yargs: 17.7.2
+    optionalDependencies:
+      rollup: 4.24.3
+
   rollup@4.24.3:
     dependencies:
       '@types/estree': 1.0.6
@@ -7782,6 +8880,12 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  sirv@2.0.4:
+    dependencies:
+      '@polka/url': 1.0.0-next.28
+      mrmime: 2.0.0
+      totalist: 3.0.1
+
   sirv@3.0.0:
     dependencies:
       '@polka/url': 1.0.0-next.28
@@ -7801,6 +8905,8 @@ snapshots:
   source-map@0.6.1:
     optional: true
 
+  source-map@0.7.4: {}
+
   space-separated-tokens@2.0.2: {}
 
   spawndamnit@2.0.0:
@@ -7915,7 +9021,13 @@ snapshots:
     optionalDependencies:
       svelte: 5.1.9
 
-  svelte-persisted-store@0.11.0(svelte@5.1.9):
+  svelte-markdown@0.4.1(svelte@5.1.9):
+    dependencies:
+      '@types/marked': 5.0.2
+      marked: 5.1.2
+      svelte: 5.1.9
+
+  svelte-persisted-store@0.12.0(svelte@5.1.9):
     dependencies:
       svelte: 5.1.9
 
@@ -8056,6 +9168,33 @@ snapshots:
     transitivePeerDependencies:
       - tslib
 
+  tauri-api-adapter@0.3.8(tslib@2.8.1)(typescript@5.6.3):
+    dependencies:
+      '@huakunshen/comlink': 4.4.1
+      '@rollup/plugin-alias': 5.1.1(rollup@4.24.3)
+      '@rollup/plugin-typescript': 11.1.6(rollup@4.24.3)(tslib@2.8.1)(typescript@5.6.3)
+      '@tauri-apps/api': 2.0.3
+      '@tauri-apps/plugin-dialog': 2.0.1
+      '@tauri-apps/plugin-fs': 2.0.1
+      '@tauri-apps/plugin-http': 2.0.1
+      '@tauri-apps/plugin-log': 2.0.0
+      '@tauri-apps/plugin-notification': 2.0.0
+      '@tauri-apps/plugin-os': 2.0.0
+      '@tauri-apps/plugin-shell': 2.0.1
+      '@tauri-apps/plugin-upload': 2.0.0
+      rimraf: 5.0.10
+      rollup: 4.24.3
+      shx: 0.3.4
+      tauri-plugin-clipboard-api: 2.1.11(typescript@5.6.3)
+      tauri-plugin-network-api: 2.0.4(typescript@5.6.3)
+      tauri-plugin-shellx-api: 2.0.11
+      tauri-plugin-system-info-api: 2.0.8(typescript@5.6.3)
+      tsc-alias: 1.8.10
+      typescript: 5.6.3
+      valibot: 0.40.0(typescript@5.6.3)
+    transitivePeerDependencies:
+      - tslib
+
   tauri-plugin-clipboard-api@2.1.11(typescript@5.5.4):
     dependencies:
       '@tauri-apps/api': 2.0.1
@@ -8063,6 +9202,13 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  tauri-plugin-clipboard-api@2.1.11(typescript@5.6.3):
+    dependencies:
+      '@tauri-apps/api': 2.0.1
+      valibot: 0.40.0(typescript@5.6.3)
+    transitivePeerDependencies:
+      - typescript
+
   tauri-plugin-network-api@2.0.4(typescript@5.5.4):
     dependencies:
       '@tauri-apps/api': 2.0.3
@@ -8070,6 +9216,13 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  tauri-plugin-network-api@2.0.4(typescript@5.6.3):
+    dependencies:
+      '@tauri-apps/api': 2.0.3
+      valibot: 0.40.0(typescript@5.6.3)
+    transitivePeerDependencies:
+      - typescript
+
   tauri-plugin-shellx-api@2.0.11:
     dependencies:
       '@tauri-apps/api': 2.0.3
@@ -8081,6 +9234,13 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  tauri-plugin-system-info-api@2.0.8(typescript@5.6.3):
+    dependencies:
+      '@tauri-apps/api': 2.0.3
+      valibot: 0.40.0(typescript@5.6.3)
+    transitivePeerDependencies:
+      - typescript
+
   term-size@2.2.1: {}
 
   terser@5.36.0:
@@ -8109,6 +9269,13 @@ snapshots:
       globalyzer: 0.1.0
       globrex: 0.1.2
 
+  tinyexec@0.3.1: {}
+
+  tinyglobby@0.2.10:
+    dependencies:
+      fdir: 6.4.2(picomatch@4.0.2)
+      picomatch: 4.0.2
+
   tmp@0.0.33:
     dependencies:
       os-tmpdir: 1.0.2
@@ -8164,6 +9331,13 @@ snapshots:
 
   tslib@2.8.1: {}
 
+  tsx@4.19.2:
+    dependencies:
+      esbuild: 0.23.1
+      get-tsconfig: 4.8.1
+    optionalDependencies:
+      fsevents: 2.3.3
+
   turbo-darwin-64@2.2.3:
     optional: true
 
@@ -8215,6 +9389,16 @@ snapshots:
 
   uc.micro@2.1.0: {}
 
+  ufo@1.5.4: {}
+
+  unconfig@0.5.5:
+    dependencies:
+      '@antfu/utils': 0.7.10
+      defu: 6.1.4
+      importx: 0.4.4
+    transitivePeerDependencies:
+      - supports-color
+
   undici-types@5.26.5: {}
 
   undici-types@6.19.8: {}
@@ -8246,6 +9430,33 @@ snapshots:
 
   universalify@2.0.1: {}
 
+  unocss@0.64.0(postcss@8.4.47)(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)):
+    dependencies:
+      '@unocss/astro': 0.64.0(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+      '@unocss/cli': 0.64.0(rollup@4.24.3)
+      '@unocss/core': 0.64.0
+      '@unocss/postcss': 0.64.0(postcss@8.4.47)
+      '@unocss/preset-attributify': 0.64.0
+      '@unocss/preset-icons': 0.64.0
+      '@unocss/preset-mini': 0.64.0
+      '@unocss/preset-tagify': 0.64.0
+      '@unocss/preset-typography': 0.64.0
+      '@unocss/preset-uno': 0.64.0
+      '@unocss/preset-web-fonts': 0.64.0
+      '@unocss/preset-wind': 0.64.0
+      '@unocss/transformer-attributify-jsx': 0.64.0
+      '@unocss/transformer-compile-class': 0.64.0
+      '@unocss/transformer-directives': 0.64.0
+      '@unocss/transformer-variant-group': 0.64.0
+      '@unocss/vite': 0.64.0(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+    optionalDependencies:
+      vite: 5.4.10(@types/node@22.8.7)(terser@5.36.0)
+    transitivePeerDependencies:
+      - postcss
+      - rollup
+      - supports-color
+      - vue
+
   update-browserslist-db@1.1.1(browserslist@4.24.2):
     dependencies:
       browserslist: 4.24.2
@@ -8269,6 +9480,10 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.4
 
+  valibot@0.40.0(typescript@5.6.3):
+    optionalDependencies:
+      typescript: 5.6.3
+
   valibot@0.41.0(typescript@5.6.3):
     optionalDependencies:
       typescript: 5.6.3
@@ -8310,6 +9525,22 @@ snapshots:
     optionalDependencies:
       vite: 5.4.10(@types/node@22.8.7)(terser@5.36.0)
 
+  vue-flow-layout@0.1.1(vue@3.5.12(typescript@5.6.3)):
+    dependencies:
+      vue: 3.5.12(typescript@5.6.3)
+
+  vue-sonner@1.2.5: {}
+
+  vue@3.5.12(typescript@5.6.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.12
+      '@vue/compiler-sfc': 3.5.12
+      '@vue/runtime-dom': 3.5.12
+      '@vue/server-renderer': 3.5.12(vue@3.5.12(typescript@5.6.3))
+      '@vue/shared': 3.5.12
+    optionalDependencies:
+      typescript: 5.6.3
+
   walkdir@0.4.1: {}
 
   wcwidth@1.0.1:
@@ -8356,6 +9587,8 @@ snapshots:
 
   ws@8.18.0: {}
 
+  y18n@5.0.8: {}
+
   yallist@2.1.2: {}
 
   yallist@3.1.1: {}
@@ -8366,6 +9599,18 @@ snapshots:
 
   yaml@2.6.0: {}
 
+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
   yocto-queue@0.1.0: {}
 
   yup@1.4.0: