App Setup (#2)

* chore: add vendor submodules * feat: add packages for db,ci,schema,api,jarvis cmds * feat: add tauri-jarvis-plugin * feat: implement extension commands list * fix(desktop): import path errors after packages refactor * chore: add self signed cert * fix: prevent prerender for desktop * fix(desktop): desktop sveltekit static build, use csr for dynamic route * feat: add error handling page and components * refactor: component lib * refactor: move more types, functions and components out of desktop * refactor(ui): more refactor * refactor(ui): move store components to @kksh/ui * ci: add CI for build & test * refactor: rename @kksh/extensions to @kksh/extension * ci: add 2 more ci * ci: fix * fix: CI env var * chore: add changeset * feat: implement extension store item detail view * feat: implement extension store install, uninstall, upgrade * format * revert: upgradable logic, the new one doesn't work yet * refactor: make @kksh/ui dependent only on @kksh/api Reason: @kksh/ui may be published later for building website, all its dependency packages must be also published. To avoid trouble it should be standalone, depend only on packages already published * refactor: cleanup * fixed: some typescript error * chore: got typedoc working on @kksh/api * ci: disable manifest schema upload CI on push
2025-04-03 22:26:43 +00:00 · 2024-11-03 13:54:44 -05:00 · 2024-11-03 13:54:44 -05:00 · ed87fc6c12
commit ed87fc6c12
parent 2f2404bd1f
411 changed files with 39869 additions and 2204 deletions
--- a/.changeset/README.md
+++ b/.changeset/README.md
@ -0,0 +1 @@
+# Changesets
--- a/.changeset/config.json
+++ b/.changeset/config.json
@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -0,0 +1,2 @@
+github: [HuakunShen]
+buy_me_a_coffee: huakun
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@ -0,0 +1,43 @@
+name: Bug Report
+description: File a bug report.
+title: "[Bug]: "
+labels: ["bug", "triage"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: A clear description of what the bug is. Include screenshots if applicable. If you intend to submit a PR for this issue, tell us in the description. Thanks!
+      placeholder: Bug description
+    validations:
+      required: true
+  
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: A clear description of what you expected to happen.
+    validations:
+      required: true
+
+  - type: textarea
+    id: system-info
+    attributes:
+      label: System Info
+      description: Output of `npx envinfo --system --npmPackages @kksh/api --binaries --browsers`
+      render: bash
+      placeholder: System, Binaries, Browsers
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: contributes
+    attributes:
+      label: Contributes
+      options:
+        - label: I am willing to submit a PR to fix this issue
+        - label: I am willing to submit a PR with failing tests
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: GitHub Discussions
+    url: https://github.com/kunkunsh/kunkun/discussions
+    about: Please ask and answer questions here.
+  - name: 💬 Discord
+    url: https://discord.gg/7dzw3TYeTU
+    about: Please ask and answer questions here.
--- a/.github/ISSUE_TEMPLATE/feature_request.yml
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@ -0,0 +1,44 @@
+name: 💡 Feature Request
+title: "[feat] "
+description: Suggest an idea
+labels: ["type: feature request"]
+
+body:
+  - type: textarea
+    id: problem
+    attributes:
+      label: Describe the problem
+      description: A clear description of the problem this feature would solve
+      placeholder: "I'm always frustrated when..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: solution
+    attributes:
+      label: "Describe the solution you'd like"
+      description: A clear description of what change you would like
+      placeholder: "I would like to..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternatives considered
+      description: "Any alternative solutions you've considered"
+
+  - type: textarea
+    id: context
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.
+
+  - type: checkboxes
+    id: contributes
+    attributes:
+      label: Contributes
+      options:
+        - label: I am willing to submit a PR to implement this feature
+
+
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -0,0 +1,39 @@
+name: CI
+on:
+  push:
+  workflow_dispatch:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build-test:
+    strategy:
+      matrix:
+        os: [ubuntu-24.04, macos-14, windows-latest]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: "true"
+      - uses: pnpm/action-setup@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "pnpm"
+          cache-dependency-path: ./pnpm-lock.yaml
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: 1.1.27
+      - uses: denoland/setup-deno@v2
+        with:
+          deno-version: v2.x
+      - name: Install Dependencies
+        run: pnpm install
+      - name: Setup
+        run: pnpm prepare
+      - name: Build
+        run: pnpm build
+      - name: Test
+        run: pnpm test
--- a/.github/workflows/jsr-publish.yml
+++ b/.github/workflows/jsr-publish.yml
@ -0,0 +1,22 @@
+name: JSR Publish
+on:
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: denoland/setup-deno@v2
+        with:
+          deno-version: v2.x
+      - name: Publish package
+        working-directory: ./packages/api
+        run: |
+          deno install
+          npx jsr publish --allow-slow-types
--- a/.github/workflows/manifest-schema-upload.yml
+++ b/.github/workflows/manifest-schema-upload.yml
@ -0,0 +1,33 @@
+name: Update Extension Manifest Schema
+
+on:
+  workflow_dispatch:
+
+jobs:
+  upload:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: "true"
+      - uses: pnpm/action-setup@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "pnpm"
+          cache-dependency-path: ./pnpm-lock.yaml
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: 1.1.27
+      - uses: denoland/setup-deno@v2
+        with:
+          deno-version: v2.x
+      - name: Install Dependencies
+        run: pnpm install
+      - name: Setup
+        run: pnpm prepare
+      - name: Update Schema
+        env:
+          SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.SUPABASE_SERVICE_ROLE_KEY }}
+        run: pnpm --filter @kksh/schema upload-schema-to-supabase
--- a/.gitignore
+++ b/.gitignore
@ -36,3 +36,5 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+stats.html
+target/
--- a/.gitmodules
+++ b/.gitmodules
@ -0,0 +1,9 @@
+[submodule "vendors/applications-rs"]
+	path = vendors/applications-rs
+	url = https://github.com/HuakunShen/applications-rs.git
+[submodule "vendors/tauri-plugin-network"]
+	path = vendors/tauri-plugin-network
+	url = https://github.com/HuakunShen/tauri-plugin-network.git
+[submodule "vendors/tauri-plugin-system-info"]
+	path = vendors/tauri-plugin-system-info
+	url = https://github.com/HuakunShen/tauri-plugin-system-info.git
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+@jsr:registry=https://npm.jsr.io
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,3 @@
+.svelte-kit/
+target/
+vendors
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -2,6 +2,7 @@
  "recommendations": [
    "svelte.svelte-vscode",
    "tauri-apps.tauri-vscode",
-    "rust-lang.rust-analyzer"
+    "rust-lang.rust-analyzer",
+    "denoland.vscode-deno"
  ]
 }
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -0,0 +1,45 @@
+# Contributing
+
+If you are interested in contributing to the project, please read the following guidelines.
+
+## Development
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/en)
+- [pnpm](https://pnpm.io/)
+- [Bun](https://bun.sh/)
+- [Deno](https://deno.com/)
+- [Rust](https://www.rust-lang.org/)
+- [protobuf](https://grpc.io/docs/protoc-installation/)
+  - MacOS: `brew install protobuf`
+  - Linux: `sudo apt install -y protobuf-compiler`
+  - Windows:
+    ```powershell
+    choco install protoc
+    choco install openssl
+    ```
+    Then configure the environment variables (yours may differ):
+    - `OPENSSL_DIR`: `C:\Program Files\OpenSSL-Win64`
+    - `OPENSSL_INCLUDE_DIR`: `C:\Program Files\OpenSSL-Win64\include`
+    - `OPENSSL_LIB_DIR`: `C:\Program Files\OpenSSL-Win64\lib`
+- [cmake](https://cmake.org/)
+  - MacOS: `brew install cmake`
+  - Linux: `sudo apt install -y cmake`
+
+### Setup
+
+```bash
+git clone https://github.com/kunkunsh/kunkun.git --recursive
+pnpm install
+pnpm prepare
+```
+
+### Run Desktop App
+
+```bash
+pnpm --filter @kksh/desktop tauri dev
+# or run it within the desktop app directory
+cd apps/desktop
+pnpm tauri dev
+```
--- a/Cargo.lock
+++ b/Cargo.lock
--- a/Cargo.toml
+++ b/Cargo.toml
@ -0,0 +1,28 @@
+[workspace]
+resolver = "2"
+
+members = [
+    "apps/desktop/src-tauri",
+    "packages/tauri-plugins/jarvis",
+    "packages/db",
+    "packages/mac-security-rs",
+    "packages/tauri-plugins/jarvis",
+]
+
+[workspace.dependencies]
+serde = { version = "1", features = ["derive"] }
+anyhow = "1.0.86"
+serde_json = "1"
+tokio = { version = "1.0", features = ["macros", "rt-multi-thread", "signal"] }
+mdns-sd = "0.11.1"
+tauri-plugin-network = { path = "./vendors/tauri-plugin-network" }
+tauri-plugin-clipboard = "2.1.8"
+mac-security-rs = { path = "./packages/mac-security-rs" }
+log = "0.4.22"
+strum = "0.26"
+strum_macros = "0.26"
+chrono = "0.4.38"
+applications = { path = "./vendors/applications-rs" }
+tauri-plugin-jarvis = { path = "./packages/tauri-plugins/jarvis" }
+tauri-plugin-system-info = { path = "./vendors/tauri-plugin-system-info" }
+db = { path = "./packages/db" }
--- a/README.md
+++ b/README.md
@ -5,4 +5,3 @@

 - Website: https://kunkun.sh/
 - Documentation: https://docs.kunkun.sh/
-
--- a/apps/desktop/README.md
+++ b/apps/desktop/README.md
@ -5,4 +5,3 @@
 - Keep all components as modular as possible
  - Don't use global store directly in components, pass them through context or props instead
  - The components may be exported as a package and used by other projects such as docs, extension
-
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@ -1,6 +1,6 @@
 {
 	"name": "@kksh/desktop",
-  "version": "0.1.0",
+	"version": "0.1.9-beta.8",
 	"description": "",
 	"type": "module",
 	"scripts": {
@ -13,29 +13,39 @@
 	},
 	"license": "MIT",
 	"dependencies": {
+		"@kksh/extension": "workspace:*",
+		"@kksh/supabase": "workspace:*",
+		"@kksh/ui": "workspace:*",
+		"@kksh/utils": "workspace:*",
+		"@std/semver": "npm:@jsr/std__semver@^1.0.3",
 		"@tauri-apps/api": "^2",
-    "@tauri-apps/plugin-shell": "^2"
+		"@tauri-apps/plugin-shell": "^2",
+		"bits-ui": "1.0.0-next.36",
+		"lucide-svelte": "^0.454.0",
+		"svelte-radix": "^2.0.1",
+		"svelte-sonner": "^0.3.28",
+		"sveltekit-superforms": "^2.20.0"
 	},
 	"devDependencies": {
-    "@kksh/ui": "workspace:*",
-    "@sveltejs/adapter-static": "^3.0.5",
-    "@sveltejs/kit": "^2.7.0",
+		"@kksh/types": "workspace:*",
+		"@sveltejs/adapter-static": "^3.0.6",
+		"@sveltejs/kit": "^2.7.4",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/container-queries": "^0.1.1",
 		"@tailwindcss/forms": "^0.5.9",
 		"@tailwindcss/typography": "^0.5.15",
-    "@tauri-apps/cli": "^2",
+		"@tauri-apps/cli": "^2.0.4",
 		"autoprefixer": "^10.4.20",
 		"clsx": "^2.1.1",
 		"embla-carousel-svelte": "^8.3.1",
 		"formsnap": "^1.0.1",
 		"tailwind-merge": "^2.5.4",
 		"tailwind-variants": "^0.2.1",
-    "tailwindcss": "^3.4.9",
+		"tailwindcss": "^3.4.14",
 		"tailwindcss-animate": "^1.0.7",
-    "tslib": "^2.8.0",
-    "typescript": "^5.5.0",
+		"tslib": "^2.8.1",
+		"typescript": "^5.6.3",
 		"vaul-svelte": "^0.3.2",
 		"vite": "^5.4.10"
 	}
--- a/apps/desktop/src-tauri/Cargo.toml
+++ b/apps/desktop/src-tauri/Cargo.toml
@ -1,10 +1,9 @@
 [package]
 name = "kunkun"
-version = "0.1.0"
-description = "A Tauri App"
-authors = ["you"]
+version = "0.0.0"
+description = "Kunkun Desktop App"
+authors = ["Huakun"]
 edition = "2021"
-
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

 [lib]
@ -15,11 +14,50 @@ name = "kunkun_lib"
 crate-type = ["staticlib", "cdylib", "rlib"]

 [build-dependencies]
-tauri-build = { version = "2", features = [] }
+tauri-build = { version = "2.0.2", features = [] }

 [dependencies]
-tauri = { version = "2", features = [] }
+tauri = { version = "2.0.6", features = [ "macos-private-api",
+    "image-png",
+    "image-ico",
+    "tray-icon",
+    "devtools",
+] }
 tauri-plugin-shell = "2"
-serde = { version = "1", features = ["derive"] }
-serde_json = "1"
+serde = { workspace = true }
+serde_json = { workspace = true }
+anyhow = { workspace = true }
+tokio = { workspace = true }
+mdns-sd = { workspace = true }
+chrono = { workspace = true }
+log = { workspace = true }
+urlencoding = "2.1.3"
+tauri-plugin-process = "2.0.1"
+tauri-plugin-shellx = "2.0.11"
+tauri-plugin-fs = "2.0.1"
+tauri-plugin-dialog = "2.0.1"
+tauri-plugin-notification = "2.0.1"
+tauri-plugin-os = "2.0.1"
+tauri-plugin-http = "2.0.1"
+tauri-plugin-upload = "2.0.1"
+tauri-plugin-jarvis = { workspace = true }
+tauri-plugin-network = { workspace = true }
+tauri-plugin-system-info = { workspace = true }
+tauri-plugin-clipboard = { workspace = true }
+tauri-plugin-store = "2.1.0"
+tauri-plugin-deep-link = "2"
+tauri-plugin-log = { version = "2.0.1", features = ["colored"] }
+zip = "2.1.3"
+# tauri-plugin-devtools = "2.0.0"

+[target."cfg(target_os = \"macos\")".dependencies]
+cocoa = "0.24.1"
+mac-security-rs = { workspace = true }
+objc = "0.2.7"
+
+
+[target."cfg(not(any(target_os = \"android\", target_os = \"ios\")))".dependencies]
+tauri-plugin-cli = "2"
+tauri-plugin-global-shortcut = "2.0.1"
+tauri-plugin-single-instance = { version = "2", features = ["deep-link"] }
+tauri-plugin-updater = "2.0.2"
--- a/apps/desktop/src-tauri/capabilities/default.json
+++ b/apps/desktop/src-tauri/capabilities/default.json
@ -2,9 +2,163 @@
 	"$schema": "../gen/schemas/desktop-schema.json",
 	"identifier": "default",
 	"description": "Capability for the main window",
-  "windows": ["main"],
+	"windows": ["main*"],
 	"permissions": [
-    "core:default",
-    "shell:allow-open"
+		{
+			"identifier": "http:default",
+			"allow": [
+				{
+					"url": "https://*"
+				},
+				{
+					"url": "http://*"
+				},
+				{
+					"url": "http://*:*"
+				}
+			]
+		},
+		"os:default",
+		"os:allow-platform",
+		"core:path:default",
+		"core:event:default",
+		"core:window:default",
+		"core:window:allow-start-dragging",
+		"core:window:allow-set-focus",
+		"core:window:allow-toggle-maximize",
+		"core:window:allow-internal-toggle-maximize",
+		"core:window:allow-close",
+		"core:window:allow-create",
+		"core:window:allow-set-decorations",
+		"core:window:allow-show",
+		"core:window:allow-hide",
+		"core:window:allow-destroy",
+		"core:image:default",
+		"core:webview:default",
+		"core:webview:allow-create-webview",
+		"core:webview:allow-create-webview-window",
+		"core:app:default",
+		"core:resources:default",
+		"core:menu:default",
+		"core:tray:default",
+		"core:tray:allow-new",
+		"core:tray:allow-set-tooltip",
+		"core:tray:allow-set-icon",
+		"core:tray:allow-set-menu",
+		"core:tray:allow-set-title",
+		"core:tray:allow-set-visible",
+		"core:tray:allow-set-show-menu-on-left-click",
+		"notification:default",
+		"clipboard:monitor-all",
+		"clipboard:read-all",
+		"clipboard:write-all",
+		"fs:default",
+		"fs:allow-app-meta",
+		"fs:allow-home-read-recursive",
+		"shellx:allow-execute",
+		"shellx:allow-open",
+		"shellx:allow-kill",
+		"shellx:allow-spawn",
+		"shellx:allow-stdin-write",
+		"shellx:allow-fix-path-env",
+		"dialog:default",
+		"dialog:allow-open",
+		"dialog:allow-confirm",
+		"dialog:allow-save",
+		"dialog:allow-message",
+		"dialog:allow-ask",
+		"global-shortcut:default",
+		"global-shortcut:allow-is-registered",
+		"global-shortcut:allow-register",
+		"global-shortcut:allow-unregister",
+		"jarvis:allow-all",
+		"store:default",
+		"store:allow-clear",
+		"store:allow-delete",
+		"store:allow-entries",
+		"store:allow-get",
+		"store:allow-has",
+		"store:allow-keys",
+		"store:allow-length",
+		"store:allow-load",
+		"store:allow-reset",
+		"store:allow-save",
+		"store:allow-set",
+		"store:allow-values",
+		"log:default",
+		"updater:default",
+		"log:allow-log",
+		"fs:allow-exists",
+		"fs:allow-stat",
+		"fs:read-all",
+		"fs:write-all",
+		"fs:allow-rename",
+		"fs:scope-temp-recursive",
+		"fs:scope-temp",
+		"fs:scope-home-recursive",
+		"fs:allow-mkdir",
+		"fs:allow-app-write-recursive",
+		"fs:allow-app-read-recursive",
+		"fs:allow-appcache-write",
+		"fs:allow-appcache-write-recursive",
+		"fs:allow-appconfig-write",
+		"fs:allow-home-write-recursive",
+		"fs:allow-appdata-read-recursive",
+		"fs:allow-appdata-write-recursive",
+		{
+			"identifier": "fs:scope",
+			"allow": [
+				{
+					"path": "$DESKTOP"
+				},
+				{
+					"path": "$DESKTOP/**"
+				},
+				{
+					"path": "$DOWNLOAD"
+				},
+				{
+					"path": "$DOWNLOAD/**"
+				},
+				{
+					"path": "$DOCUMENT"
+				},
+				{
+					"path": "$DOCUMENT/**"
+				},
+				{
+					"path": "$TEMP/**"
+				},
+				{
+					"path": "$TEMP"
+				}
+			]
+		},
+		"notification:allow-is-permission-granted",
+		"notification:allow-notify",
+		"notification:allow-request-permission",
+		"global-shortcut:allow-register-all",
+		"global-shortcut:allow-unregister-all",
+		"clipboard:allow-clear",
+		"cli:default",
+		"upload:default",
+		"process:default",
+		"system-info:allow-all",
+		"shell:default",
+		{
+			"identifier": "shell:allow-spawn",
+			"allow": [
+				{
+					"name": "deno",
+					"cmd": "deno",
+					"args": [
+						{
+							"validator": ".+"
+						}
+					]
+				}
+			]
+		},
+		"deep-link:default"
 	]
 }
--- a/apps/desktop/src-tauri/src/lib.rs
+++ b/apps/desktop/src-tauri/src/lib.rs
@ -1,14 +1,241 @@
-// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
-#[tauri::command]
-fn greet(name: &str) -> String {
-    format!("Hello, {}! You've been greeted from Rust!", name)
-}
+use std::{path::PathBuf, sync::Mutex};
+mod setup;
+pub mod utils;
+use log;
+#[cfg(target_os = "macos")]
+use tauri::ActivationPolicy;
+use tauri::Manager;
+use tauri_plugin_deep_link::DeepLinkExt;
+use tauri_plugin_jarvis::{
+    db::JarvisDB,
+    server::Protocol,
+    utils::{
+        path::{get_default_extensions_dir, get_kunkun_db_path},
+        settings::AppSettings,
+    },
+};
+pub use tauri_plugin_log::fern::colors::ColoredLevelConfig;
+use tauri_plugin_store::{StoreBuilder, StoreExt};
+use utils::server::tauri_file_server;

 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
-    tauri::Builder::default()
-        .plugin(tauri_plugin_shell::init())
-        .invoke_handler(tauri::generate_handler![greet])
-        .run(tauri::generate_context!())
-        .expect("error while running tauri application");
+    let context = tauri::generate_context!();
+    let mut builder = tauri::Builder::default();
+
+    #[cfg(debug_assertions)]
+    {
+        println!("Install crabnebula devtools");
+        // let devtools = tauri_plugin_devtools::init(); // initialize the plugin as early as possible
+        // builder = builder.plugin(devtools);
+    }
+    // #[cfg(not(debug_assertions))]
+    // {
+    //     builder = builder.plugin(
+    //         tauri_plugin_log::Builder::new()
+    //             .targets(utils::log::get_log_targets())
+    //             .level(utils::log::get_log_level())
+    //             .filter(|metadata| !metadata.target().starts_with("mdns_sd"))
+    //             .with_colors(ColoredLevelConfig::default())
+    //             .max_file_size(10_000_000) // max 10MB
+    //             .format(|out, message, record| {
+    //                 out.finish(format_args!(
+    //                     "{}[{}] {}",
+    //                     chrono::Local::now().format("[%Y-%m-%d][%H:%M:%S]"),
+    //                     // record.target(),
+    //                     record.level(),
+    //                     message
+    //                 ))
+    //             })
+    //             .build(),
+    //     );
+    // }
+
+    let shell_unlocked = true;
+    builder = builder
+        .plugin(tauri_plugin_single_instance::init(|app, args, cwd| {
+            let _ = app
+                .get_webview_window("main")
+                .expect("no main window")
+                .set_focus();
+        }))
+        .plugin(
+            tauri_plugin_log::Builder::new()
+                .targets(utils::log::get_log_targets())
+                .level(utils::log::get_log_level())
+                .filter(|metadata| !metadata.target().starts_with("mdns_sd"))
+                .with_colors(ColoredLevelConfig::default())
+                .max_file_size(10_000_000) // max 10MB
+                .format(|out, message, record| {
+                    out.finish(format_args!(
+                        "{}[{}] {}",
+                        chrono::Local::now().format("[%Y-%m-%d][%H:%M:%S]"),
+                        // record.target(),
+                        record.level(),
+                        message
+                    ))
+                })
+                .build(),
+        )
+        .plugin(tauri_plugin_cli::init())
+        .plugin(tauri_plugin_deep_link::init())
+        .plugin(tauri_plugin_shell::init())
+        .plugin(tauri_plugin_os::init())
+        .plugin(tauri_plugin_process::init())
+        .plugin(tauri_plugin_upload::init())
+        .plugin(tauri_plugin_updater::Builder::new().build())
+        .plugin(tauri_plugin_store::Builder::default().build())
+        .plugin(tauri_plugin_global_shortcut::Builder::new().build())
+        .plugin(tauri_plugin_dialog::init())
+        .plugin(tauri_plugin_http::init())
+        .plugin(tauri_plugin_notification::init())
+        .plugin(tauri_plugin_fs::init())
+        .plugin(tauri_plugin_shellx::init(shell_unlocked))
+        .plugin(tauri_plugin_jarvis::init())
+        .plugin(tauri_plugin_clipboard::init())
+        .plugin(tauri_plugin_network::init())
+        .plugin(tauri_plugin_system_info::init());
+
+    let app = builder
+        .register_uri_scheme_protocol("appicon", |_app, request| {
+            let url = &request.uri().path()[1..];
+            let url = urlencoding::decode(url).unwrap().to_string();
+            let path = PathBuf::from(url);
+            return tauri_plugin_jarvis::utils::icns::load_icon(path);
+        })
+        .register_uri_scheme_protocol("ext", |app, request| {
+            let app_handle = app.app_handle();
+            // app_handle.
+            let win_label = app.webview_label();
+            let jarvis_state = app_handle.state::<tauri_plugin_jarvis::JarvisState>();
+            let window_ext_map = jarvis_state.window_label_ext_map.lock().unwrap();
+            match window_ext_map.get(win_label) {
+                Some(ext) => {
+                    // let app_state = app_handle.state::<tauri_plugin_jarvis::model::app_state::AppState>();
+                    // let extension_path = app_state.extension_path.lock().unwrap().clone();
+                    // tauri_file_server(app_handle, request, extension_path)
+                    tauri_file_server(app_handle, request, ext.path.clone(), ext.dist.clone())
+                }
+                None => tauri::http::Response::builder()
+                    .status(tauri::http::StatusCode::NOT_FOUND)
+                    .header("Access-Control-Allow-Origin", "*")
+                    .body("Extension Not Found".as_bytes().to_vec())
+                    .unwrap(),
+            }
+        })
+        .setup(|app| {
+            setup::window::setup_window(app.handle());
+            setup::tray::create_tray(app.handle())?;
+            #[cfg(all(not(target_os = "macos"), debug_assertions))]
+            {
+                app.deep_link().register("kunkun")?;
+            }
+            // setup::deeplink::setup_deeplink(app);
+            // #[cfg(all(target_os = "macos", debug_assertions))]
+            // app.set_activation_policy(ActivationPolicy::Accessory);
+            // let mut store = StoreBuilder::new("appConfig.bin").build(app.handle().clone());
+            // let store = app.handle().store_builder("appConfig.json").build()?;
+
+            // let app_settings = match AppSettings::load_from_store(&store) {
+            //     Ok(settings) => settings,
+            //     Err(_) => AppSettings::default(),
+            // };
+            // let dev_extension_path: Option<PathBuf> = app_settings.dev_extension_path.clone();
+            let my_port = tauri_plugin_network::network::scan::find_available_port_from_list(
+                tauri_plugin_jarvis::server::CANDIDATE_PORTS.to_vec(),
+            )
+            .unwrap();
+            log::info!("Jarvis Server Port: {}", my_port);
+            // log::info!(
+            //     "App Settings Dev Extension Path: {:?}",
+            //     app_settings.dev_extension_path.clone(),
+            // );
+            app.manage(tauri_plugin_jarvis::server::http::Server::new(
+                app.handle().clone(),
+                my_port,
+                Protocol::Http,
+                // Protocol::Https,
+            ));
+            app.manage(tauri_plugin_jarvis::model::app_state::AppState {});
+            tauri_plugin_jarvis::setup::server::setup_server(app.handle())?; // start the server
+
+            let mdns = tauri_plugin_jarvis::setup::peer_discovery::setup_mdns(my_port)?;
+            tauri_plugin_jarvis::setup::peer_discovery::handle_mdns_service_evt(
+                app.handle(),
+                mdns.browse()?,
+            );
+
+            /* ----------------------------- Database Setup ----------------------------- */
+            // setup::db::setup_db(app)?;
+            /* ------------------------- Clipboard History Setup ------------------------ */
+            let db_path = get_kunkun_db_path(app.app_handle())?;
+            let db_key: Option<String> = None;
+            let jarvis_db = JarvisDB::new(db_path.clone(), db_key.clone())?;
+            // The clipboard extension should be created in setup_db, ext is guaranteed to be Some
+            let ext = jarvis_db.get_unique_extension_by_identifier(
+                tauri_plugin_jarvis::constants::KUNKUN_CLIPBOARD_EXT_IDENTIFIER,
+            )?;
+
+            app.manage(
+                tauri_plugin_jarvis::model::clipboard_history::ClipboardHistory::new(
+                    jarvis_db,
+                    ext.unwrap().ext_id,
+                ),
+            );
+            let (clipboard_update_tx, clipboard_update_rx) = tokio::sync::broadcast::channel::<
+                tauri_plugin_jarvis::model::clipboard_history::Record,
+            >(10);
+            /* --------------------------- Cliipboard Listener -------------------------- */
+            setup::clipboard::setup_clipboard_listener(
+                &app.app_handle(),
+                clipboard_update_tx.clone(),
+            );
+            app.state::<tauri_plugin_clipboard::Clipboard>()
+                .start_monitor(app.app_handle().clone())?;
+            setup::clipboard::setup_clipboard_update_handler(app.app_handle(), clipboard_update_rx);
+
+            #[cfg(debug_assertions)] // only include this code on debug builds
+            {
+                let window = app.get_webview_window("main").unwrap();
+                window.open_devtools();
+                // window.close_devtools();
+            }
+
+            let main_window = app.get_webview_window("main").unwrap();
+            std::thread::spawn(move || {
+                // this is a backup plan, if frontend is not properly loaded, show() will not be called, then we need to call it manually from rust after a long delay
+                std::thread::sleep(std::time::Duration::from_secs(1));
+                main_window.show().unwrap();
+            });
+            Ok(())
+        })
+        .build(context)
+        .expect("error while running tauri application");
+    app.run(|_app_handle, event| match event {
+        // tauri::RunEvent::Exit => todo!(),
+        // tauri::RunEvent::ExitRequested { code, api, .. } => todo!(),
+        // tauri::RunEvent::WindowEvent { label, event, .. } => todo!(),
+        // tauri::RunEvent::WebviewEvent { label, event, .. } => todo!(),
+        // tauri::RunEvent::Ready => todo!(),
+        // tauri::RunEvent::Resumed => todo!(),
+        // tauri::RunEvent::MainEventsCleared => todo!(),
+        // tauri::RunEvent::Opened { urls } => todo!(),
+        // tauri::RunEvent::MenuEvent(_) => todo!(),
+        // tauri::RunEvent::TrayIconEvent(_) => todo!(),
+        #[cfg(target_os = "macos")]
+        tauri::RunEvent::Reopen {
+            has_visible_windows,
+            ..
+        } => {
+            _app_handle
+                .webview_windows()
+                .iter()
+                .for_each(|(label, window)| {
+                    window.show().unwrap();
+                });
+            // let main_window = _app_handle.get_webview_window("main").unwrap();
+            // main_window.show().unwrap();
+        }
+        _ => {}
+    });
 }
--- a/apps/desktop/src-tauri/src/setup/clipboard.rs
+++ b/apps/desktop/src-tauri/src/setup/clipboard.rs
@ -0,0 +1,83 @@
+use log::error;
+use std::time::SystemTime;
+use tauri::{AppHandle, Emitter, Listener, Manager, Runtime};
+use tauri_plugin_jarvis::model::clipboard_history;
+use tokio::sync::broadcast::{Receiver, Sender};
+
+pub fn setup_clipboard_listener<R: Runtime>(
+    app: &tauri::AppHandle<R>,
+    clipboard_update_tx: Sender<clipboard_history::Record>,
+) {
+    let app2 = app.clone();
+    app.listen(
+        "plugin:clipboard://clipboard-monitor/update",
+        move |_event| {
+            let clipboard = app2.state::<tauri_plugin_clipboard::Clipboard>();
+            // let clipboard_history = app2.state::<clipboard_history::ClipboardHistory>();
+            let available_types = clipboard.available_types().unwrap();
+            let mut rec = clipboard_history::Record {
+                timestamp: SystemTime::now()
+                    .duration_since(SystemTime::UNIX_EPOCH)
+                    .unwrap()
+                    .as_millis(),
+                content_type: clipboard_history::ClipboardContentType::Text,
+                value: "test".to_string(),
+                text: "test".to_string(),
+            };
+            if available_types.image {
+                rec.content_type = clipboard_history::ClipboardContentType::Image;
+                rec.value = clipboard.read_image_base64().unwrap();
+                rec.text = "Image".to_string();
+            } else if available_types.html {
+                rec.content_type = clipboard_history::ClipboardContentType::Html;
+                let html = clipboard.read_html().unwrap();
+                rec.value = html.clone();
+                if available_types.text {
+                    rec.text = clipboard.read_text().unwrap();
+                } else {
+                    rec.text = html;
+                }
+            } else if available_types.rtf {
+                rec.content_type = clipboard_history::ClipboardContentType::Rtf;
+                let rtf = clipboard.read_rtf().unwrap();
+                rec.value = rtf.clone();
+                if available_types.text {
+                    rec.text = clipboard.read_text().unwrap();
+                } else {
+                    rec.text = rtf;
+                }
+            } else if available_types.files {
+                rec.content_type = clipboard_history::ClipboardContentType::Text;
+                rec.value = clipboard.read_files().unwrap().join("\n");
+                rec.text = "Files".to_string();
+            } else if available_types.text {
+                rec.content_type = clipboard_history::ClipboardContentType::Text;
+                rec.value = clipboard.read_text().unwrap();
+                rec.text = rec.value.clone();
+            }
+            match clipboard_update_tx.send(rec) {
+                Ok(_) => {}
+                Err(e) => {
+                    error!("Error sending clipboard record: {:?}", e);
+                }
+            };
+            // clipboard_history.add_record(rec);
+            // app2.emit("new_clipboard_item_added", ()).unwrap();
+        },
+    );
+}
+
+pub fn setup_clipboard_update_handler<R: Runtime>(
+    app_handle: &AppHandle<R>,
+    mut clipboard_update_rx: Receiver<clipboard_history::Record>,
+) {
+    let app_handle = app_handle.clone();
+    tauri::async_runtime::spawn(async move {
+        loop {
+            let record = clipboard_update_rx.recv().await.unwrap();
+            let clipboard_history = app_handle.state::<clipboard_history::ClipboardHistory>();
+            clipboard_history.add_record(record).unwrap();
+            app_handle.emit("new_clipboard_item_added", ()).unwrap();
+        }
+    });
+}
--- a/apps/desktop/src-tauri/src/setup/deeplink.rs
+++ b/apps/desktop/src-tauri/src/setup/deeplink.rs
@ -0,0 +1 @@
+
--- a/apps/desktop/src-tauri/src/setup/mod.rs
+++ b/apps/desktop/src-tauri/src/setup/mod.rs
@ -0,0 +1,4 @@
+pub mod clipboard;
+pub mod deeplink;
+pub mod tray;
+pub mod window;
--- a/apps/desktop/src-tauri/src/setup/tray.rs
+++ b/apps/desktop/src-tauri/src/setup/tray.rs
@ -0,0 +1,72 @@
+use tauri::{
+    menu::{Menu, MenuItem},
+    tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent},
+    Manager, Runtime,
+};
+
+fn toggle_main_window<R: Runtime>(app: &tauri::AppHandle<R>) {
+    let main_win = app.get_webview_window("main");
+
+    if let Some(main_win) = main_win {
+        if main_win.is_visible().unwrap() {
+            main_win.hide().unwrap();
+        } else {
+            main_win.show().unwrap();
+            main_win.set_focus().unwrap();
+        }
+    }
+}
+
+pub fn create_tray<R: Runtime>(app: &tauri::AppHandle<R>) -> tauri::Result<()> {
+    let toggle_i = MenuItem::with_id(app, "toggle", "Toggle", true, None::<&str>)?;
+    let quit_i = MenuItem::with_id(app, "quit", "Quit", true, None::<&str>)?;
+    let menu1 = Menu::with_items(app, &[&toggle_i, &quit_i])?;
+    let _ = TrayIconBuilder::with_id("tray-1")
+        .tooltip("Kunkun")
+        .icon(app.default_window_icon().unwrap().clone())
+        .menu(&menu1)
+        .menu_on_left_click(true)
+        .on_tray_icon_event(move |icon, event: TrayIconEvent| {
+            // println!("on tray icon event: {:?}", event);
+            match event {
+                TrayIconEvent::Click {
+                    button_state,
+                    button,
+                    ..
+                } => match button {
+                    MouseButton::Left => match button_state {
+                        MouseButtonState::Up => {
+                            toggle_main_window(icon.app_handle());
+                        }
+                        _ => {}
+                    },
+                    _ => {}
+                },
+
+                _ => {}
+            }
+        })
+        .menu_on_left_click(false)
+        .on_menu_event(|app, event| match event.id.as_ref() {
+            "toggle" => {
+                toggle_main_window(app);
+            }
+            "quit" => {
+                app.exit(0);
+            }
+            _ => {
+                println!("unknown menu item: {:?}", event.id);
+            }
+        })
+        // .on_menu_event(move |app, event| {
+        //     println!("event: {:?}", event);
+        //     let main_win = app.get_webview_window("main");
+        //     if let Some(main_win) = main_win {
+        //         main_win.show().unwrap();
+        //         main_win.set_focus().unwrap();
+        //     }
+        // })
+        .build(app);
+
+    Ok(())
+}
--- a/apps/desktop/src-tauri/src/setup/window.rs
+++ b/apps/desktop/src-tauri/src/setup/window.rs
@ -0,0 +1,59 @@
+use tauri::{is_dev, App, AppHandle, LogicalSize, Manager, Runtime, Size, WebviewWindow, Window};
+
+#[cfg(target_os = "macos")]
+use cocoa::appkit::{NSWindow, NSWindowButton, NSWindowStyleMask, NSWindowTitleVisibility};
+
+#[cfg(target_os = "macos")]
+use objc::runtime::YES;
+
+pub trait WindowExt {
+    #[cfg(target_os = "macos")]
+    fn set_transparent_titlebar(&self, title_transparent: bool, remove_toolbar: bool);
+}
+
+impl<R: Runtime> WindowExt for WebviewWindow<R> {
+    #[cfg(target_os = "macos")]
+    fn set_transparent_titlebar(&self, title_transparent: bool, remove_tool_bar: bool) {
+        use objc::{msg_send, sel, sel_impl};
+
+        unsafe {
+            let id = self.ns_window().unwrap() as cocoa::base::id;
+            NSWindow::setTitlebarAppearsTransparent_(id, cocoa::base::YES);
+            let mut style_mask = id.styleMask();
+            style_mask.set(
+                NSWindowStyleMask::NSFullSizeContentViewWindowMask,
+                title_transparent,
+            );
+
+            id.setStyleMask_(style_mask);
+
+            if remove_tool_bar {
+                let close_button = id.standardWindowButton_(NSWindowButton::NSWindowCloseButton);
+                let _: () = msg_send![close_button, setHidden: YES];
+                let min_button =
+                    id.standardWindowButton_(NSWindowButton::NSWindowMiniaturizeButton);
+                let _: () = msg_send![min_button, setHidden: YES];
+                let zoom_button = id.standardWindowButton_(NSWindowButton::NSWindowZoomButton);
+                let _: () = msg_send![zoom_button, setHidden: YES];
+            }
+
+            id.setTitleVisibility_(if title_transparent {
+                NSWindowTitleVisibility::NSWindowTitleHidden
+            } else {
+                NSWindowTitleVisibility::NSWindowTitleVisible
+            });
+
+            id.setTitlebarAppearsTransparent_(if title_transparent {
+                cocoa::base::YES
+            } else {
+                cocoa::base::NO
+            });
+        }
+    }
+}
+
+pub fn setup_window<R: Runtime>(app: &AppHandle<R>) {
+    let window = app.get_webview_window("main").unwrap();
+    #[cfg(target_os = "macos")]
+    window.set_transparent_titlebar(true, true);
+}
--- a/apps/desktop/src-tauri/src/utils/log.rs
+++ b/apps/desktop/src-tauri/src/utils/log.rs
@ -0,0 +1,54 @@
+use log::info;
+use tauri::{AppHandle, Manager};
+use tauri_plugin_log::{Target as LogTarget, TargetKind};
+
+pub fn get_log_targets() -> Vec<LogTarget> {
+    #[cfg(debug_assertions)]
+    let log_targets = vec![
+        LogTarget::new(TargetKind::Stdout),
+        LogTarget::new(TargetKind::LogDir {
+            file_name: Some(format!(
+                "dev:kunkun-{}",
+                chrono::Local::now().format("%Y-%m-%d")
+            )),
+        }),
+        LogTarget::new(TargetKind::Webview),
+    ];
+    #[cfg(not(debug_assertions))]
+    let log_targets = vec![
+        LogTarget::new(TargetKind::Stdout),
+        LogTarget::new(TargetKind::LogDir {
+            file_name: Some(format!(
+                "kunkun-{}",
+                chrono::Local::now().format("%Y-%m-%d")
+            )),
+        }),
+    ];
+    log_targets
+}
+
+pub fn get_log_level() -> log::LevelFilter {
+    #[cfg(debug_assertions)]
+    return log::LevelFilter::Debug;
+    #[cfg(not(debug_assertions))]
+    return log::LevelFilter::Info;
+}
+
+/// Remove log files that are older than 3 days
+pub fn clear_old_log_files(app_handle: &AppHandle) -> Result<(), tauri::Error> {
+    let log_dir = app_handle.path().app_log_dir()?;
+    let files = std::fs::read_dir(log_dir)?;
+    for file in files {
+        let file = file?;
+        let path = file.path();
+        let metadata = std::fs::metadata(&path)?;
+        let modified_datetime: chrono::DateTime<chrono::Local> = metadata.modified()?.into();
+        let now = chrono::Local::now();
+        let duration = now.signed_duration_since(modified_datetime);
+        if duration.num_days() > 3 {
+            info!("Removing old log file: {:?}", path);
+            std::fs::remove_file(&path)?;
+        }
+    }
+    Ok(())
+}
--- a/apps/desktop/src-tauri/src/utils/mod.rs
+++ b/apps/desktop/src-tauri/src/utils/mod.rs
@ -0,0 +1,2 @@
+pub mod log;
+pub mod server;
--- a/apps/desktop/src-tauri/src/utils/server.rs
+++ b/apps/desktop/src-tauri/src/utils/server.rs
@ -0,0 +1,125 @@
+use std::path::PathBuf;
+
+use tauri::{AppHandle, Manager};
+
+pub fn tauri_file_server(
+    app: &AppHandle,
+    request: tauri::http::Request<Vec<u8>>,
+    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);
+        let mime_type = match url_file_path.extension().and_then(std::ffi::OsStr::to_str) {
+            Some("js") => "application/javascript",
+            Some("html") => "text/html",
+            Some("css") => "text/css",
+            _ => "application/octet-stream",
+        };
+        return tauri::http::Response::builder()
+            .status(tauri::http::StatusCode::OK)
+            .header("Access-Control-Allow-Origin", "*")
+            .header("Content-Type", mime_type)
+            .body(std::fs::read(url_file_path).unwrap())
+            .unwrap();
+    } else if url_file_path.is_dir() {
+        /*
+         * there are two cases:
+         * 1. directory conntains a index.html, then return index.html
+         * 2. directory has a sibling file with .html extension, return that file
+         */
+        let index_html_path = url_file_path.join("index.html");
+        if index_html_path.is_file() {
+            // println!("2nd case index_html_path: {:?}", index_html_path);
+            return tauri::http::Response::builder()
+                .status(tauri::http::StatusCode::OK)
+                .header("Access-Control-Allow-Origin", "*")
+                .body(std::fs::read(index_html_path).unwrap())
+                .unwrap();
+        }
+        // check if path has a sibling file with .html extension
+        // get folder name
+        match url_file_path.file_name() {
+            Some(folder_name) => {
+                let parent_path = url_file_path.parent().unwrap();
+                let html_file_path =
+                    parent_path.join(format!("{}.html", folder_name.to_str().unwrap()));
+                if html_file_path.is_file() {
+                    // println!("3rd case html_file_path: {:?}", html_file_path);
+                    return tauri::http::Response::builder()
+                        .status(tauri::http::StatusCode::OK)
+                        .header("Access-Control-Allow-Origin", "*")
+                        .body(std::fs::read(html_file_path).unwrap())
+                        .unwrap();
+                }
+            }
+            None => {}
+        }
+
+        // check if url_file_path's parent has a file with name folder_name.html
+    } else {
+        // file not found, check if end with .html works. if path ends with /, remove the / and check if adding .html makes a file
+        let mut path_str = url_file_path.to_str().unwrap().to_string();
+        if path_str.ends_with("/") {
+            path_str.pop();
+        }
+        path_str.push_str(".html");
+        let path_str = PathBuf::from(path_str);
+        if path_str.is_file() {
+            // println!("4rd case path_str: {:?}", path_str);
+            return tauri::http::Response::builder()
+                .status(tauri::http::StatusCode::OK)
+                .header("Access-Control-Allow-Origin", "*")
+                .body(std::fs::read(path_str).unwrap())
+                .unwrap();
+        }
+    }
+    // println!("5th case file not found");
+    return tauri::http::Response::builder()
+        .status(tauri::http::StatusCode::NOT_FOUND)
+        .header("Access-Control-Allow-Origin", "*")
+        .body("file not found".as_bytes().to_vec())
+        .unwrap();
+}
--- a/apps/desktop/src-tauri/tauri.conf.json
+++ b/apps/desktop/src-tauri/tauri.conf.json
@ -1,7 +1,7 @@
 {
 	"$schema": "https://schema.tauri.app/config/2",
 	"productName": "kunkun",
-  "version": "0.1.0",
+	"version": "../package.json",
 	"identifier": "sh.kunkun.desktop",
 	"build": {
 		"beforeDevCommand": "pnpm dev",
@ -10,9 +10,10 @@
 		"frontendDist": "../build"
 	},
 	"app": {
+		"macOSPrivateApi": true,
 		"windows": [
 			{
-        "title": "kunkun",
+				"hiddenTitle": true,
 				"width": 800,
 				"height": 600
 			}
@ -22,6 +23,15 @@
 		}
 	},
 	"bundle": {
+		"createUpdaterArtifacts": true,
+		"fileAssociations": [
+			{
+				"ext": ["kunkun"],
+				"mimeType": "text/plain",
+				"description": "Used to install Kunkun Extensions with a installer file",
+				"role": "Viewer"
+			}
+		],
 		"active": true,
 		"targets": "all",
 		"icon": [
@ -31,5 +41,26 @@
 			"icons/icon.icns",
 			"icons/icon.ico"
 		]
+	},
+	"plugins": {
+		"updater": {
+			"endpoints": ["https://updater.kunkun.sh"],
+			"pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDc1NENCRjZFM0JBOEQ0ODMKUldTRDFLZzdicjlNZFhHS0ZKYk13WkdZUTFUM01LNjkvVW5Bb2x1SnB1R0crbFRuMnlRSlJ0STgK"
+		},
+		"deep-link": {
+			"desktop": {
+				"schemes": ["kunkun"]
+			}
+		},
+		"cli": {
+			"description": "Kunkun CLI",
+			"args": [
+				{
+					"short": "v",
+					"name": "verbose",
+					"description": "Verbosity level"
+				}
+			]
+		}
 	}
 }
--- a/apps/desktop/src/lib/cmds/builtin.ts
+++ b/apps/desktop/src/lib/cmds/builtin.ts
@ -0,0 +1,206 @@
+import { appState } from "@/stores"
+import type { BuiltinCmd } from "@kksh/ui/types"
+import { dev } from "$app/environment"
+import { goto } from "$app/navigation"
+
+export const builtinCmds: BuiltinCmd[] = [
+	{
+		name: "Store",
+		iconifyIcon: "streamline:store-2-solid",
+		description: "Go to Extension Store",
+		function: async () => {
+			appState.clearSearchTerm()
+			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: "Set Dev Extension Path",
+		iconifyIcon: "lineicons:dev",
+		description: "",
+		function: async () => {
+			// const appStateStore = useAppStateStore()
+			appState.clearSearchTerm()
+			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: "Settings",
+	// 	iconifyIcon: "solar:settings-linear",
+	// 	description: "Open Settings",
+	// 	function: async () => {
+	// 		const windows = await getAllWebviewWindows()
+	// 		const found = windows.find((w) => w.label === SettingsWindowLabel)
+	// 		if (found) {
+	// 			ElNotification.error("Settings Page is already open")
+	// 		} else {
+	// 			const win = await newSettingsPage()
+	// 			setTimeout(() => {
+	// 				// this is a backup, if window is not properly loaded,
+	// 				// the show() will not be called within setting page, we call it here with a larger delay,
+	// 				// at least the window will be shown
+	// 				win.show()
+	// 			}, 800)
+	// 		}
+	// 		const appStateStore = useAppStateStore()
+	// 		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: "Dance",
+	// 	iconifyIcon: "mdi:dance-pole",
+	// 	description: "Dance",
+	// 	function: async () => {
+	// 		goto("/dance")
+	// 	}
+	// },
+	// {
+	// 	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}`)
+	// 	}
+	// }
+]
--- a/apps/desktop/src/lib/cmds/ext.ts
+++ b/apps/desktop/src/lib/cmds/ext.ts
@ -0,0 +1,57 @@
+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 { 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)
+	if (!(await fs.exists(extSupportDir))) {
+		await fs.mkdir(extSupportDir, { recursive: true })
+	}
+}
+
+export async function onTemplateUiCmdSelect(
+	ext: ExtPackageJsonExtra,
+	cmd: TemplateUiCmd,
+	{ isDev, hmr }: { isDev: boolean; hmr: boolean }
+) {
+	await createExtSupportDir(ext.extPath)
+	console.log("onTemplateUiCmdSelect", ext, cmd, isDev, hmr)
+}
+
+export async function onCustomUiCmdSelect(
+	ext: ExtPackageJsonExtra,
+	cmd: CustomUiCmd,
+	{ isDev, hmr }: { isDev: boolean; hmr: boolean }
+) {
+	console.log("onCustomUiCmdSelect", ext, cmd, isDev, hmr)
+	await createExtSupportDir(ext.extPath)
+	let url = cmd.main
+
+	if (hmr && isDev && cmd.devMain) {
+		url = cmd.devMain
+	} else {
+		url = decodeURIComponent(convertFileSrc(`${trimSlash(cmd.main)}`, "ext"))
+	}
+	const url2 = `/extension/ui-iframe?url=${encodeURIComponent(url)}&extPath=${encodeURIComponent(ext.extPath)}`
+	if (cmd.window) {
+		const winLabel = await winExtMap.registerExtensionWithWindow({
+			extPath: ext.extPath,
+			dist: cmd.dist
+		})
+		console.log("Launch new window, ", winLabel)
+		const window = launchNewExtWindow(winLabel, url2, cmd.window)
+	} else {
+		console.log("Launch main window")
+		return winExtMap
+			.registerExtensionWithWindow({ windowLabel: "main", extPath: ext.extPath, dist: cmd.dist })
+			.then(() => goto(url2))
+	}
+}
--- a/apps/desktop/src/lib/cmds/index.ts
+++ b/apps/desktop/src/lib/cmds/index.ts
@ -0,0 +1,23 @@
+import { CmdTypeEnum, CustomUiCmd, ExtPackageJsonExtra, TemplateUiCmd } from "@kksh/api/models"
+import type { CommandLaunchers, OnExtCmdSelect } from "@kksh/ui/types"
+import * as v from "valibot"
+import { onCustomUiCmdSelect, onTemplateUiCmdSelect } from "./ext"
+
+const onExtCmdSelect: OnExtCmdSelect = (
+	ext: ExtPackageJsonExtra,
+	cmd: CustomUiCmd | TemplateUiCmd,
+	{ isDev, hmr }: { isDev: boolean; hmr: boolean }
+) => {
+	switch (cmd.type) {
+		case CmdTypeEnum.UiIframe:
+			onCustomUiCmdSelect(ext, v.parse(CustomUiCmd, cmd), { isDev, hmr })
+			break
+		case CmdTypeEnum.UiWorker:
+			onTemplateUiCmdSelect(ext, v.parse(TemplateUiCmd, cmd), { isDev, hmr })
+			break
+		default:
+			console.error("Unknown command type", cmd.type)
+	}
+}
+
+export const commandLaunchers = { onExtCmdSelect } satisfies CommandLaunchers
--- a/apps/desktop/src/lib/components/context/AppContext.svelte
+++ b/apps/desktop/src/lib/components/context/AppContext.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	import { setAppConfigContext } from "@/context"
+	import { setAppStateContext } from "@/context/appState"
+	import type { AppConfig, AppState } from "@kksh/types"
+	import type { Snippet } from "svelte"
+	import type { Writable } from "svelte/store"
+
+	const {
+		appConfig,
+		appState,
+		children
+	}: { appConfig: Writable<AppConfig>; appState: Writable<AppState>; children: Snippet<[]> } =
+		$props()
+
+	setAppConfigContext(appConfig)
+	setAppStateContext(appState)
+</script>
+
+{@render children?.()}
--- a/apps/desktop/src/lib/components/main/CommandPalette.svelte
+++ b/apps/desktop/src/lib/components/main/CommandPalette.svelte
@ -0,0 +1,75 @@
+<!-- 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 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}
+			<ExtCmdsGroup
+				extensions={extensions.filter((ext) =>
+					isExtPathInDev($appConfig.extensionPath!, ext.extPath)
+				)}
+				heading="Dev Extensions"
+				isDev={true}
+				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
+				hmr={$appConfig.hmr}
+			/>
+		{/if}
+		{#if $appConfig.extensionPath}
+			<ExtCmdsGroup
+				extensions={extensions.filter(
+					(ext) => !isExtPathInDev($appConfig.extensionPath!, ext.extPath)
+				)}
+				heading="Extensions"
+				isDev={false}
+				hmr={false}
+				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
+			/>
+		{/if}
+		<Command.Separator />
+	</Command.List>
+	<GlobalCommandPaletteFooter />
+</Command.Root>
--- a/apps/desktop/src/lib/components/standalone/settings/DevExtPathForm.svelte
+++ b/apps/desktop/src/lib/components/standalone/settings/DevExtPathForm.svelte
@ -0,0 +1,43 @@
+<script lang="ts">
+	import { appConfig } from "@/stores"
+	import Icon from "@iconify/svelte"
+	import { Button, Input } from "@kksh/svelte5"
+	import { open } from "@tauri-apps/plugin-dialog"
+	import { exists } from "@tauri-apps/plugin-fs"
+	import { toast } from "svelte-sonner"
+	import { superForm, type Infer, type SuperValidated } from "sveltekit-superforms"
+	import { zodClient } from "sveltekit-superforms/adapters"
+	import { z } from "zod"
+
+	let devExtPath = $state<string | undefined>(undefined)
+
+	async function pickDirectory() {
+		const dir = await open({
+			multiple: false,
+			directory: true
+		})
+		if (dir && (await exists(dir))) {
+			devExtPath = dir
+			appConfig.setDevExtensionPath(dir)
+		} else {
+			return toast.error("Invalid Path")
+		}
+	}
+
+	function clear() {
+		devExtPath = undefined
+		appConfig.setDevExtensionPath(null)
+	}
+</script>
+
+<form class="flex w-full items-center space-x-2">
+	<Input disabled type="text" placeholder="Enter Path" bind:value={$appConfig.devExtensionPath} />
+	<Button size="sm" type="button" onclick={clear}>
+		Clear
+		<Icon icon="material-symbols:delete-outline" class="ml-1 h-5 w-5" />
+	</Button>
+	<Button size="sm" type="button" onclick={pickDirectory}>
+		Edit
+		<Icon icon="flowbite:edit-outline" class="ml-1 h-5 w-5" />
+	</Button>
+</form>
--- a/apps/desktop/src/lib/constants.ts
+++ b/apps/desktop/src/lib/constants.ts
@ -0,0 +1,20 @@
+import { appIsDev } from "@kksh/api/commands"
+import { appDataDir, join } from "@tauri-apps/api/path"
+import * as fs from "@tauri-apps/plugin-fs"
+import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_PROJECT_ID } from "$env/static/public"
+
+export const SUPABASE_ANON_KEY = PUBLIC_SUPABASE_ANON_KEY
+export const SUPABASE_URL = `https://${PUBLIC_SUPABASE_PROJECT_ID}.supabase.co`
+export const SUPABASE_GRAPHQL_ENDPOINT = `${SUPABASE_URL}/graphql/v1`
+export function getExtensionsFolder() {
+	return appDataDir()
+		.then((appDataDirPath) => join(appDataDirPath, "extensions"))
+		.then(async (path) => {
+			if (!(await fs.exists(path))) {
+				await fs.mkdir(path)
+			}
+			return path
+		})
+}
+export const IS_IN_TAURI =
+	typeof window !== "undefined" && (window as any).__TAURI_INTERNALS__ !== undefined
--- a/apps/desktop/src/lib/context/appConfig.ts
+++ b/apps/desktop/src/lib/context/appConfig.ts
@ -0,0 +1,18 @@
+/**
+ * This is app state context.
+ * It's designed to allow all components to access a shared state.
+ * With context, we can avoid prop drilling, and avoid using stores which makes components hard to encapsulate.
+ */
+import type { AppConfig } from "@/types/appConfig"
+import { getContext, setContext } from "svelte"
+import type { Writable } from "svelte/store"
+
+export const APP_CONFIG_CONTEXT_KEY = Symbol("appConfig")
+
+export function getAppConfigContext(): Writable<AppConfig> {
+	return getContext(APP_CONFIG_CONTEXT_KEY)
+}
+
+export function setAppConfigContext(appConfig: Writable<AppConfig>) {
+	setContext(APP_CONFIG_CONTEXT_KEY, appConfig)
+}
--- a/apps/desktop/src/lib/context/appState.ts
+++ b/apps/desktop/src/lib/context/appState.ts
@ -0,0 +1,13 @@
+import type { AppState } from "@/types/appState"
+import { getContext, setContext } from "svelte"
+import type { Writable } from "svelte/store"
+
+export const APP_STATE_CONTEXT_KEY = Symbol("appState")
+
+export function getAppStateContext(): Writable<AppState> {
+	return getContext(APP_STATE_CONTEXT_KEY)
+}
+
+export function setAppStateContext(appState: Writable<AppState>) {
+	setContext(APP_STATE_CONTEXT_KEY, appState)
+}
--- a/apps/desktop/src/lib/context/index.ts
+++ b/apps/desktop/src/lib/context/index.ts
@ -0,0 +1 @@
+export * from "./appConfig"
--- a/apps/desktop/src/lib/stores/appConfig.ts
+++ b/apps/desktop/src/lib/stores/appConfig.ts
@ -0,0 +1,86 @@
+import { getExtensionsFolder } from "@/constants"
+import { themeConfigStore, 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 = {
+	isInitialized: false,
+	platform: "macos",
+	theme: {
+		theme: "zinc",
+		radius: 0.5,
+		lightMode: "auto"
+	},
+	triggerHotkey: null,
+	launchAtLogin: true,
+	showInTray: true,
+	devExtensionPath: null,
+	extensionPath: undefined,
+	hmr: false,
+	hideOnBlur: true,
+	extensionAutoUpgrade: true,
+	joinBetaProgram: false,
+	onBoarded: false
+}
+
+interface AppConfigAPI {
+	init: () => Promise<void>
+	setTheme: (theme: ThemeConfig) => void
+	setDevExtensionPath: (devExtensionPath: string | null) => void
+}
+
+function createAppConfig(): Writable<AppConfig> & AppConfigAPI {
+	const { subscribe, update, set } = writable<AppConfig>(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) => ({
+				...config,
+				...parseRes.output,
+				isInitialized: true,
+				extensionPath,
+				platform: os.platform()
+			}))
+		} else {
+			error("Failed to parse app config, going to remove it and reinitialize")
+			console.error(v.flatten<typeof PersistedAppConfig>(parseRes.issues))
+			await persistStore.clear()
+			await persistStore.set("config", v.parse(PersistedAppConfig, defaultAppConfig))
+		}
+
+		subscribe(async (config) => {
+			console.log("Saving app config", config)
+			await persistStore.set("config", config)
+			updateTheme(config.theme)
+		})
+	}
+
+	return {
+		setTheme: (theme: ThemeConfig) => update((config) => ({ ...config, theme })),
+		setDevExtensionPath: (devExtensionPath: string | null) => {
+			console.log("setDevExtensionPath", devExtensionPath)
+			update((config) => ({ ...config, devExtensionPath }))
+		},
+		init,
+		subscribe,
+		update,
+		set
+	}
+}
+
+export const appConfig = createAppConfig()
--- a/apps/desktop/src/lib/stores/appState.ts
+++ b/apps/desktop/src/lib/stores/appState.ts
@ -0,0 +1,28 @@
+import type { AppState } from "@/types"
+import { get, writable, type Writable } from "svelte/store"
+
+export const defaultAppState: AppState = {
+	searchTerm: "",
+	highlightedCmd: ""
+}
+
+interface AppStateAPI {
+	clearSearchTerm: () => void
+	get: () => AppState
+}
+
+function createAppState(): Writable<AppState> & AppStateAPI {
+	const store = writable<AppState>(defaultAppState)
+
+	return {
+		subscribe: store.subscribe,
+		update: store.update,
+		set: store.set,
+		get: () => get(store),
+		clearSearchTerm: () => {
+			store.update((state) => ({ ...state, searchTerm: "" }))
+		}
+	}
+}
+
+export const appState = createAppState()
--- a/apps/desktop/src/lib/stores/cmds.ts
+++ b/apps/desktop/src/lib/stores/cmds.ts
@ -0,0 +1 @@
+import { derived, fromStore, get, readable, readonly, toStore, writable } from "svelte/store"
--- a/apps/desktop/src/lib/stores/extensions.ts
+++ b/apps/desktop/src/lib/stores/extensions.ts
@ -0,0 +1,124 @@
+import { getExtensionsFolder } from "@/constants"
+import { db } from "@kksh/api/commands"
+import type { ExtPackageJsonExtra } from "@kksh/api/models"
+import * as extAPI from "@kksh/extension"
+import * as path from "@tauri-apps/api/path"
+import * as fs from "@tauri-apps/plugin-fs"
+import { derived, get, writable, type Readable, type Writable } from "svelte/store"
+import { appConfig } from "./appConfig"
+
+function createExtensionsStore(): Writable<ExtPackageJsonExtra[]> & {
+	init: () => Promise<void>
+	getExtensionsFromStore: () => ExtPackageJsonExtra[]
+	installFromTarballUrl: (tarballUrl: 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[]>([])
+
+	function init() {
+		return extAPI.loadAllExtensionsFromDb().then((exts) => {
+			set(exts)
+		})
+	}
+
+	function getExtensionsFromStore() {
+		const extContainerPath = get(appConfig).extensionPath
+		if (!extContainerPath) return []
+		return get(extensions).filter((ext) => !extAPI.isExtPathInDev(extContainerPath, ext.extPath))
+	}
+
+	function findStoreExtensionByIdentifier(identifier: string) {
+		return get(extensions).find((ext) => ext.kunkun.identifier === identifier)
+	}
+
+	/**
+	 * After install, register the extension to the store
+	 * @param extPath absolute path to the extension folder
+	 * @returns loaded extension
+	 */
+	async function registerNewExtensionByPath(extPath: string) {
+		return extAPI
+			.loadExtensionManifestFromDisk(await path.join(extPath, "package.json"))
+			.then((ext) => {
+				update((exts) => {
+					const existingExt = exts.find((e) => e.extPath === ext.extPath)
+					if (existingExt) return exts
+					return [...exts, ext]
+				})
+				return ext
+			})
+			.catch((err) => {
+				console.error(err)
+				return Promise.reject(err)
+			})
+	}
+
+	async function installFromTarballUrl(tarballUrl: string, extsDir: string) {
+		return extAPI.installTarballUrl(tarballUrl, 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`)
+		console.log(extAPI)
+
+		return extAPI
+			.uninstallExtensionByPath(targetPath)
+			.then(() => update((exts) => exts.filter((ext) => ext.extPath !== targetExt.extPath)))
+			.then(() => targetExt)
+	}
+
+	async function uninstallStoreExtensionByIdentifier(identifier: string) {
+		const targetExt = getExtensionsFromStore().find((ext) => ext.kunkun.identifier === identifier)
+		if (!targetExt) throw new Error(`Extension ${identifier} not found`)
+		return uninstallExtensionByPath(targetExt.extPath)
+	}
+
+	async function upgradeStoreExtension(
+		identifier: string,
+		tarballUrl: string
+	): Promise<ExtPackageJsonExtra> {
+		const extsDir = get(appConfig).extensionPath
+		if (!extsDir) throw new Error("Extension path not set")
+		return uninstallStoreExtensionByIdentifier(identifier).then(() =>
+			installFromTarballUrl(tarballUrl, extsDir)
+		)
+	}
+
+	return {
+		init,
+		getExtensionsFromStore,
+		findStoreExtensionByIdentifier,
+		registerNewExtensionByPath,
+		installFromTarballUrl,
+		uninstallStoreExtensionByIdentifier,
+		upgradeStoreExtension,
+		subscribe,
+		update,
+		set
+	}
+}
+
+export const extensions = createExtensionsStore()
+
+// export const devExtensions: Readable<ExtPackageJsonExtra[]> = derived(
+// 	extensions,
+// 	($extensionsStore, set) => {
+// 		getExtensionsFolder().then((extFolder) => {
+// 			set($extensionsStore.filter((ext) => !ext.extPath.startsWith(extFolder)))
+// 		})
+// 	}
+// )
+export const installedStoreExts: Readable<ExtPackageJsonExtra[]> = derived(
+	extensions,
+	($extensionsStore) => {
+		const extContainerPath = get(appConfig).extensionPath
+		if (!extContainerPath) return []
+		return $extensionsStore.filter((ext) => !extAPI.isExtPathInDev(extContainerPath, ext.extPath))
+	}
+)
--- a/apps/desktop/src/lib/stores/index.ts
+++ b/apps/desktop/src/lib/stores/index.ts
@ -0,0 +1,4 @@
+export * from "./appConfig"
+export * from "./appState"
+export * from "./winExtMap"
+export * from "./extensions"
--- a/apps/desktop/src/lib/stores/winExtMap.ts
+++ b/apps/desktop/src/lib/stores/winExtMap.ts
@ -0,0 +1,119 @@
+/**
+ * Store in this file is used to map window labels to extension paths and pids
+ * The purpose is to keep track of which extensions are running in which windows, and the left over processes when the extension is closed
+ */
+import { killProcesses } from "@/utils/process"
+import {
+	getExtLabelMap,
+	registerExtensionSpawnedProcess,
+	registerExtensionWindow,
+	unregisterExtensionSpawnedProcess,
+	unregisterExtensionWindow
+} from "@kksh/api/commands"
+import { warn } from "@tauri-apps/plugin-log"
+import { get, writable, type Writable } from "svelte/store"
+
+export type WinExtMap = Record<
+	string,
+	{
+		windowLabel: string
+		extPath: string
+		pids: number[]
+	}
+>
+
+type API = {
+	init: () => Promise<void>
+	registerExtensionWithWindow: (options: {
+		windowLabel?: string
+		extPath: string
+		dist?: string
+	}) => Promise<string>
+	unregisterExtensionFromWindow: (windowLabel: string) => Promise<void>
+	registerProcess: (windowLabel: string, pid: number) => Promise<void>
+	unregisterProcess: (pid: number) => Promise<void>
+}
+
+function createWinExtMapStore(): Writable<WinExtMap> & API {
+	const store = writable<WinExtMap>({})
+
+	async function init() {}
+
+	return {
+		init,
+		registerExtensionWithWindow: async ({
+			extPath,
+			windowLabel,
+			dist
+		}: {
+			extPath: string
+			windowLabel?: string
+			dist?: string
+		}) => {
+			const winExtMap = get(store)
+			if (windowLabel) {
+				if (winExtMap[windowLabel]) {
+					// there is a previous extension registered in this window but not cleaned up properly
+					warn(`Window ${windowLabel} has a previous extension registered but not cleaned up`)
+					await killProcesses(winExtMap[windowLabel].pids)
+					delete winExtMap[windowLabel]
+				} else {
+					winExtMap[windowLabel] = {
+						windowLabel,
+						extPath,
+						pids: []
+					}
+				}
+			}
+			const returnedWinLabel = await registerExtensionWindow({
+				extensionPath: extPath,
+				windowLabel,
+				dist
+			})
+			store.set(winExtMap)
+			return returnedWinLabel
+		},
+		unregisterExtensionFromWindow: async (windowLabel: string) => {
+			const winExtMap = get(store)
+			if (winExtMap[windowLabel]) {
+				// clean up processes spawned by extension but not killed by itself
+				const extLabelMap = await getExtLabelMap() // realtime data from core process
+				Object.entries(extLabelMap).forEach(([label, ext]) => {
+					if (label === windowLabel) {
+						killProcesses(ext.processes)
+					}
+				})
+				await unregisterExtensionWindow(windowLabel)
+				delete winExtMap[windowLabel]
+				store.set(winExtMap)
+			} else {
+				warn(`Window ${windowLabel} does not have an extension registered`)
+			}
+		},
+		registerProcess: async (windowLabel: string, pid: number) => {
+			const winExtMap = get(store)
+			registerExtensionSpawnedProcess(windowLabel, pid)
+			if (!winExtMap[windowLabel]) {
+				throw new Error(`Window ${windowLabel} does not have an extension registered`)
+			}
+			winExtMap[windowLabel].pids.push(pid)
+			store.set(winExtMap)
+		},
+		unregisterProcess: async (pid: number) => {
+			const winExtMap = get(store)
+			const found = Object.entries(winExtMap).find(([windowLabel, ext]) => ext.pids.includes(pid))
+			if (!found) {
+				return
+			}
+			const [windowLabel, ext] = found
+			return unregisterExtensionSpawnedProcess(windowLabel, pid).then(() => {
+				ext.pids = ext.pids.filter((p) => p !== pid)
+			})
+		},
+		subscribe: store.subscribe,
+		update: store.update,
+		set: store.set
+	}
+}
+
+export const winExtMap = createWinExtMapStore()
--- a/apps/desktop/src/lib/supabase.ts
+++ b/apps/desktop/src/lib/supabase.ts
@ -0,0 +1,7 @@
+import { createSB, SupabaseAPI } from "@kksh/supabase"
+import { SUPABASE_ANON_KEY, SUPABASE_URL } from "./constants"
+
+export const supabase = createSB(SUPABASE_URL, SUPABASE_ANON_KEY)
+export const storage = supabase.storage
+export const supabaseExtensionsStorage = supabase.storage.from("extensions")
+export const supabaseAPI = new SupabaseAPI(supabase)
--- a/apps/desktop/src/lib/types/index.ts
+++ b/apps/desktop/src/lib/types/index.ts
--- a/apps/desktop/src/lib/utils.ts
+++ b/apps/desktop/src/lib/utils.ts
@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
-}
--- a/apps/desktop/src/lib/utils/key.ts
+++ b/apps/desktop/src/lib/utils/key.ts
@ -0,0 +1,25 @@
+import { appState } from "@/stores"
+import { goto } from "$app/navigation"
+import { goBack, goHome } from "./route"
+
+export function goHomeOnEscape(e: KeyboardEvent) {
+	if (e.key === "Escape") {
+		goHome()
+	}
+}
+
+export function goBackOnEscape(e: KeyboardEvent) {
+	if (e.key === "Escape") {
+		goBack()
+	}
+}
+
+export function goBackOnEscapeClearSearchTerm(e: KeyboardEvent) {
+	if (e.key === "Escape") {
+		if (appState.get().searchTerm) {
+			appState.clearSearchTerm()
+		} else {
+			goBack()
+		}
+	}
+}
--- a/apps/desktop/src/lib/utils/process.ts
+++ b/apps/desktop/src/lib/utils/process.ts
@ -0,0 +1,13 @@
+import { error } from "@tauri-apps/plugin-log"
+import { Child } from "tauri-plugin-shellx-api"
+
+export function killProcesses(pids: number[]) {
+	return Promise.all(
+		pids.map((pid) => {
+			return new Child(pid).kill().catch((err) => {
+				error(`Failed to kill process ${pid}, ${err}`)
+				console.error(`Failed to kill process ${pid}`, err)
+			})
+		})
+	)
+}
--- a/apps/desktop/src/lib/utils/route.ts
+++ b/apps/desktop/src/lib/utils/route.ts
@ -0,0 +1,9 @@
+import { goto } from "$app/navigation"
+
+export function goBack() {
+	window.history.back()
+}
+
+export function goHome() {
+	goto("/")
+}
--- a/apps/desktop/src/lib/utils/style.ts
+++ b/apps/desktop/src/lib/utils/style.ts
@ -0,0 +1,16 @@
+import { type Position } from "@kksh/api/models"
+
+export function positionToTailwindClasses(position: Position) {
+	switch (position) {
+		case "top-left":
+			return "top-2 left-2"
+		case "top-right":
+			return "top-2 right-2"
+		case "bottom-left":
+			return "bottom-2 left-2"
+		case "bottom-right":
+			return "bottom-2 right-2"
+		default:
+			return ""
+	}
+}
--- a/apps/desktop/src/lib/utils/url.ts
+++ b/apps/desktop/src/lib/utils/url.ts
@ -0,0 +1,3 @@
+export function trimSlash(str: string) {
+	return str.replace(/^\/+|\/+$/g, "")
+}
--- a/apps/desktop/src/lib/utils/window.ts
+++ b/apps/desktop/src/lib/utils/window.ts
@ -0,0 +1,5 @@
+import { getCurrentWindow } from "@tauri-apps/api/window"
+
+export function isInMainWindow() {
+	return getCurrentWindow().label == "main"
+}
--- a/apps/desktop/src/routes/+error.svelte
+++ b/apps/desktop/src/routes/+error.svelte
@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Error, Layouts } from "@kksh/ui"
+	import { page } from "$app/stores"
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === "Enter") {
+			window.history.back()
+		}
+	}
+</script>
+
+<svelte:window on:keydown={handleKeyDown} />
+
+<Layouts.Center class="h-screen">
+	<Error.RawErrorJSONPreset
+		title="Unknown Error"
+		class="w-fit max-w-screen-sm"
+		message={$page.error?.message ?? "Unknown Error"}
+		onnGoBack={() => window.history.back()}
+		rawJsonError={JSON.stringify($page, null, 2)}
+	/>
+</Layouts.Center>
--- a/apps/desktop/src/routes/+layout.svelte
+++ b/apps/desktop/src/routes/+layout.svelte
@ -1,9 +1,41 @@
 <script lang="ts">
+	import AppContext from "@/components/context/AppContext.svelte"
 	import "../app.css"
-	import { Toaster } from "@kksh/svelte5"
+	import { appConfig, appState, extensions } from "@/stores"
+	import { isInMainWindow } from "@/utils/window"
+	import {
+		ModeWatcher,
+		themeConfigStore,
+		ThemeWrapper,
+		Toaster,
+		updateTheme,
+		type ThemeConfig
+	} from "@kksh/svelte5"
+	import type { UnlistenFn } from "@tauri-apps/api/event"
+	import { attachConsole } from "@tauri-apps/plugin-log"
+	import { onDestroy, onMount } from "svelte"

 	let { children } = $props()
+	const unlisteners: UnlistenFn[] = []
+
+	onMount(async () => {
+		unlisteners.push(await attachConsole())
+		appConfig.init()
+		if (isInMainWindow()) {
+			extensions.init()
+		} else {
+		}
+	})
+
+	onDestroy(() => {
+		unlisteners.forEach((unlistener) => unlistener())
+	})
 </script>

+<ModeWatcher />
 <Toaster richColors />
+<AppContext {appConfig} {appState}>
+	<ThemeWrapper>
 		{@render children()}
+	</ThemeWrapper>
+</AppContext>
--- a/apps/desktop/src/routes/+layout.ts
+++ b/apps/desktop/src/routes/+layout.ts
@ -1,5 +1,5 @@
 // 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 prerender = true
+export const ssr = false
--- a/apps/desktop/src/routes/+page.svelte
+++ b/apps/desktop/src/routes/+page.svelte
@ -1,14 +1,18 @@
 <script lang="ts">
-	import { Alert, Avatar, Button } from "@kksh/svelte5"
+	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"
 </script>

-<Button>Click me</Button>
-<button class="bg-red-500">hi</button>
-<Alert.Root>
-	<Alert.Title>Heads up!</Alert.Title>
-	<Alert.Description>You can add components to your app using the cli.</Alert.Description>
-</Alert.Root>
-<Avatar.Root>
-	<Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
-	<Avatar.Fallback>CN</Avatar.Fallback>
-</Avatar.Root>
+<CommandPalette
+	class="h-screen"
+	extensions={$extensions}
+	{appState}
+	{appConfig}
+	{commandLaunchers}
+	{builtinCmds}
+/>
--- a/apps/desktop/src/routes/extension/store/+page.svelte
+++ b/apps/desktop/src/routes/extension/store/+page.svelte
@ -0,0 +1,77 @@
+<script lang="ts">
+	import { getExtensionsFolder } from "@/constants"
+	import { appState, extensions } from "@/stores"
+	import { supabaseAPI } from "@/supabase"
+	import { goBackOnEscape, goBackOnEscapeClearSearchTerm } from "@/utils/key"
+	import { goBack } from "@/utils/route"
+	import { isCompatible } from "@kksh/api"
+	import { SBExt } from "@kksh/api/supabase"
+	import { isUpgradable } from "@kksh/extension"
+	import { Command } from "@kksh/svelte5"
+	import { StoreListing } from "@kksh/ui/extension"
+	import { greaterThan, parse as parseSemver } from "@std/semver"
+	import { goto } from "$app/navigation"
+	import { onMount } from "svelte"
+	import { toast } from "svelte-sonner"
+	import { get } from "svelte/store"
+	import { type PageData } from "./$types"
+
+	let { data }: { data: PageData } = $props()
+	const { storeExtList, installedStoreExts, installedExtsMap, upgradableExpsMap } = data
+
+	// function isUpgradeable(item: DbExtItem): boolean {
+	// 	if (!item.version) return true // latest extensions always have version, this check should be removed later
+	// 	const installed = installedExtMap.value[item.identifier]
+	// 	if (!installed) return false
+	// 	return (
+	// 		gt(item.version, installed.version) &&
+	// 		(item.api_version ? isCompatible(item.api_version) : true)
+	// 	)
+	// }
+
+	function onExtItemSelected(ext: SBExt) {
+		goto(`./store/${ext.identifier}`)
+	}
+
+	async function onExtItemUpgrade(ext: SBExt) {
+		const res = await supabaseAPI.getLatestExtPublish(ext.identifier)
+		if (res.error)
+			return toast.error("Fail to get latest extension", { description: res.error.message })
+		const tarballUrl = supabaseAPI.translateExtensionFilePathToUrl(res.data.tarball_path)
+		return extensions.upgradeStoreExtension(ext.identifier, tarballUrl).then((newExt) => {
+			toast.success(`${ext.name} Upgraded to ${newExt.version}`)
+		})
+	}
+
+	async function onExtItemInstall(ext: SBExt) {
+		console.log("onExtItemInstall", ext)
+		const res = await supabaseAPI.getLatestExtPublish(ext.identifier)
+		if (res.error)
+			return toast.error("Fail to get latest extension", { description: res.error.message })
+
+		const tarballUrl = supabaseAPI.translateExtensionFilePathToUrl(res.data.tarball_path)
+		const installDir = await getExtensionsFolder()
+		return extensions
+			.installFromTarballUrl(tarballUrl, installDir)
+			.then(() => toast.success(`Plugin ${ext.name} Installed`))
+			.then(() =>
+				supabaseAPI.incrementDownloads({
+					identifier: ext.identifier,
+					version: ext.version
+				})
+			)
+	}
+</script>
+
+<svelte:window on:keydown={goBackOnEscapeClearSearchTerm} />
+<StoreListing
+	{storeExtList}
+	{appState}
+	installedExtsMap={$installedExtsMap}
+	upgradableExpsMap={$upgradableExpsMap}
+	{onExtItemSelected}
+	{onExtItemUpgrade}
+	{onExtItemInstall}
+	{isUpgradable}
+	onGoBack={goBack}
+/>
--- a/apps/desktop/src/routes/extension/store/+page.ts
+++ b/apps/desktop/src/routes/extension/store/+page.ts
@ -0,0 +1,39 @@
+import { appConfig, extensions, installedStoreExts } from "@/stores"
+import { supabaseAPI } from "@/supabase"
+import type { ExtPackageJsonExtra } from "@kksh/api/models"
+import { SBExt } from "@kksh/api/supabase"
+import { isExtPathInDev, isUpgradable } from "@kksh/extension"
+import { error } from "@sveltejs/kit"
+import { derived, get, type Readable } from "svelte/store"
+import type { PageLoad } from "./$types"
+
+export const load: PageLoad = async (): Promise<{
+	storeExtList: SBExt[]
+	installedStoreExts: Readable<ExtPackageJsonExtra[]>
+	installedExtsMap: Readable<Record<string, string>>
+	upgradableExpsMap: Readable<Record<string, boolean>>
+}> => {
+	const storeExtList = await supabaseAPI.getExtList()
+	// map identifier to extItem
+	const storeExtsMap = Object.fromEntries(storeExtList.map((ext) => [ext.identifier, ext]))
+	const _appConfig = get(appConfig)
+	// const installedStoreExts = derived(extensions, ($extensions) => {
+	// 	if (!_appConfig.extensionPath) return []
+	// 	return $extensions.filter((ext) => !isExtPathInDev(_appConfig.extensionPath!, ext.extPath))
+	// })
+	// map installed extension identifier to version
+	const installedExtsMap = derived(installedStoreExts, ($exts) =>
+		Object.fromEntries($exts.map((ext) => [ext.kunkun.identifier, ext.version]))
+	)
+	const upgradableExpsMap = derived(installedStoreExts, ($exts) =>
+		Object.fromEntries(
+			$exts.map((ext) => {
+				const dbExt: SBExt | undefined = storeExtsMap[ext.kunkun.identifier]
+				return [ext.kunkun.identifier, dbExt ? isUpgradable(dbExt, ext.version) : false]
+			})
+		)
+	)
+	console.log(get(upgradableExpsMap))
+
+	return { storeExtList, installedStoreExts, installedExtsMap, upgradableExpsMap }
+}
--- a/apps/desktop/src/routes/extension/store/[identifier]/+error.svelte
+++ b/apps/desktop/src/routes/extension/store/[identifier]/+error.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Error, Layouts } from "@kksh/ui"
+	import { goto } from "$app/navigation"
+	import { page } from "$app/stores"
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === "Enter") {
+			goto("/")
+		}
+	}
+</script>
+
+<svelte:window on:keydown={handleKeyDown} />
+
+<Layouts.Center class="h-screen">
+	<Error.RawErrorJSONPreset
+		title="Fail to Load Extension"
+		class="w-fit max-w-screen-sm"
+		message={$page.error?.message ?? "Unknown Error"}
+		onnGoBack={() => goto("/")}
+		rawJsonError={JSON.stringify($page, null, 2)}
+	/>
+</Layouts.Center>
--- a/apps/desktop/src/routes/extension/store/[identifier]/+page.svelte
+++ b/apps/desktop/src/routes/extension/store/[identifier]/+page.svelte
@ -0,0 +1,120 @@
+<script lang="ts">
+	import { getExtensionsFolder } from "@/constants.js"
+	import { appConfig } from "@/stores/appConfig.js"
+	import { extensions, installedStoreExts } from "@/stores/extensions.js"
+	import { supabase, supabaseAPI, supabaseExtensionsStorage } from "@/supabase"
+	import { goBackOnEscape } from "@/utils/key"
+	import { goBack } from "@/utils/route.js"
+	import { isExtPathInDev } from "@kksh/extension"
+	import { installTarballUrl } from "@kksh/extension/install"
+	import { Button } from "@kksh/svelte5"
+	import { StoreExtDetail } from "@kksh/ui/extension"
+	import * as path from "@tauri-apps/api/path"
+	import { error } from "@tauri-apps/plugin-log"
+	import { ArrowLeftIcon } from "lucide-svelte"
+	import { toast } from "svelte-sonner"
+	import { get, derived as storeDerived } from "svelte/store"
+	import * as v from "valibot"
+
+	const { data } = $props()
+	let { ext, manifest } = data
+	const installedExt = storeDerived(installedStoreExts, ($e) => {
+		return $e.find((e) => e.kunkun.identifier === ext.identifier)
+	})
+	let btnLoading = $state(false)
+	let imageDialogOpen = $state(false)
+	let delayedImageDialogOpen = $state(false)
+	$effect(() => {
+		imageDialogOpen // do not remove this line, $effect only subscribe to synchronous variable inside it
+		setTimeout(() => {
+			delayedImageDialogOpen = imageDialogOpen
+		}, 500)
+	})
+
+	const demoImages = $derived(
+		ext.demo_images.map((src) => supabaseAPI.translateExtensionFilePathToUrl(src))
+	)
+
+	async function onInstallSelected() {
+		btnLoading = true
+		const tarballUrl = supabaseAPI.translateExtensionFilePathToUrl(ext.tarball_path)
+		const installDir = await getExtensionsFolder()
+		return extensions
+			.installFromTarballUrl(tarballUrl, installDir)
+			.then(() => toast.success(`Plugin ${ext.name} Installed`))
+			.then(async (loadedExt) =>
+				supabaseAPI.incrementDownloads({
+					identifier: ext.identifier,
+					version: ext.version
+				})
+			)
+			.catch((err) => {
+				toast.error("Fail to install tarball", { description: err })
+			})
+			.finally(() => {
+				btnLoading = false
+			})
+	}
+
+	function onUpgradeSelected() {
+		btnLoading = true
+		const tarballUrl = supabaseAPI.translateExtensionFilePathToUrl(ext.tarball_path)
+		return extensions
+			.upgradeStoreExtension(ext.identifier, tarballUrl)
+			.then((newExt) => {
+				toast.success(`${ext.name} Upgraded from ${$installedExt?.version} to ${newExt.version}`)
+			})
+			.catch((err) => {
+				toast.error("Fail to upgrade extension", { description: err })
+			})
+			.finally(() => {
+				btnLoading = false
+			})
+	}
+
+	function onUninstallSelected() {
+		btnLoading = true
+		return extensions
+			.uninstallStoreExtensionByIdentifier(ext.identifier)
+			.then((uninstalledExt) => {
+				toast.success(`${uninstalledExt.name} Uninstalled`)
+			})
+			.catch((err) => {
+				toast.error("Fail to uninstall extension", { description: err })
+				error(`Fail to uninstall store extension (${ext.identifier}): ${err}`)
+			})
+			.finally(() => {
+				btnLoading = false
+			})
+	}
+
+	function onEnterPressed() {
+		return onInstallSelected()
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === "Escape") {
+			if (!delayedImageDialogOpen) {
+				goBack()
+			}
+		}
+	}
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<Button variant="outline" size="icon" class="fixed left-3 top-3" onclick={goBack}>
+	<ArrowLeftIcon />
+</Button>
+<StoreExtDetail
+	{ext}
+	{manifest}
+	installedExt={$installedExt}
+	{demoImages}
+	bind:btnLoading
+	{onInstallSelected}
+	{onUpgradeSelected}
+	{onUninstallSelected}
+	{onEnterPressed}
+	bind:imageDialogOpen
+/>
--- a/apps/desktop/src/routes/extension/store/[identifier]/+page.ts
+++ b/apps/desktop/src/routes/extension/store/[identifier]/+page.ts
@ -0,0 +1,38 @@
+import { extensions } from "@/stores"
+import { supabaseAPI } from "@/supabase"
+import { KunkunExtManifest, type ExtPackageJsonExtra } from "@kksh/api/models"
+import type { Tables } from "@kksh/api/supabase/types"
+import { error } from "@sveltejs/kit"
+import { toast } from "svelte-sonner"
+import { get } from "svelte/store"
+import * as v from "valibot"
+import type { PageLoad } from "./$types"
+
+export const load: PageLoad = async ({
+	params
+}): Promise<{
+	ext: Tables<"ext_publish">
+	manifest: KunkunExtManifest
+}> => {
+	const { error: dbError, data: ext } = await supabaseAPI.getLatestExtPublish(params.identifier)
+	if (dbError) {
+		return error(400, {
+			message: dbError.message
+		})
+	}
+
+	const parseManifest = v.safeParse(KunkunExtManifest, ext.manifest)
+	if (!parseManifest.success) {
+		const errMsg = "Invalid extension manifest, you may need to upgrade your app."
+		toast.error(errMsg)
+		throw error(400, errMsg)
+	}
+
+	return {
+		ext,
+		manifest: parseManifest.output
+	}
+}
+
+export const csr = true
+export const prerender = false
--- a/apps/desktop/src/routes/extension/ui-iframe/+page.svelte
+++ b/apps/desktop/src/routes/extension/ui-iframe/+page.svelte
@ -0,0 +1,202 @@
+<script lang="ts">
+	import { appConfig, winExtMap } from "@/stores"
+	import { goBackOnEscape } from "@/utils/key"
+	import { goHome } from "@/utils/route"
+	import { positionToTailwindClasses } from "@/utils/style"
+	import { isInMainWindow } from "@/utils/window"
+	import { db, getExtLabelMap } from "@kksh/api/commands"
+	import {
+		CustomPosition,
+		ExtPackageJsonExtra,
+		LightMode,
+		Radius,
+		ThemeColor,
+		type Position
+	} from "@kksh/api/models"
+	import {
+		constructJarvisServerAPIWithPermissions,
+		exposeApiToWindow,
+		type IApp,
+		type IUiIframe
+	} from "@kksh/api/ui"
+	import { toast, type IUiIframeServer2 } from "@kksh/api/ui/iframe"
+	import { Button } from "@kksh/svelte5"
+	import { cn } from "@kksh/ui/utils"
+	import { getCurrentWindow } from "@tauri-apps/api/window"
+	import { goto } from "$app/navigation"
+	import { page } from "$app/stores"
+	import { ArrowLeftIcon, MoveIcon, RefreshCcwIcon, XIcon } from "lucide-svelte"
+	import { onDestroy, onMount } from "svelte"
+	import type { PageData } from "./$types"
+
+	let { data }: { data: PageData } = $props()
+	const { loadedExt, url, extPath, extInfoInDB } = data
+	const appWin = getCurrentWindow()
+	let iframeRef: HTMLIFrameElement
+	let uiControl = $state<{
+		iframeLoaded: boolean
+		showBackBtn: boolean
+		showMoveBtn: boolean
+		showRefreshBtn: boolean
+		backBtnPosition: Position
+		moveBtnPosition: Position
+		refreshBtnPosition: Position
+		transparentBg: boolean
+	}>({
+		iframeLoaded: false,
+		showBackBtn: true, // if open in new window, hide back button
+		showMoveBtn: true,
+		showRefreshBtn: true,
+		backBtnPosition: "top-left",
+		moveBtnPosition: "bottom-left",
+		refreshBtnPosition: "top-right",
+		transparentBg: false
+	})
+
+	const iframeUiAPI: IUiIframeServer2 = {
+		// async iframeUiStartDragging() {
+		// 	console.log("start dragging")
+		// 	appWin.startDragging().catch(console.error)
+		// },
+		// iframeUiGoHome: async () => {
+		// 	navigateTo(localePath("/"))
+		// },
+		goBack: async () => {
+			if (isInMainWindow()) {
+				goto("/")
+			} else {
+				appWin.close()
+			}
+		},
+		hideBackButton: async () => {
+			uiControl.showBackBtn = false
+		},
+		hideMoveButton: async () => {
+			uiControl.showMoveBtn = false
+		},
+		hideRefreshButton: async () => {
+			uiControl.showRefreshBtn = false
+		},
+		showBackButton: async (position?: Position) => {
+			uiControl.showBackBtn = true
+			uiControl.backBtnPosition = position ?? "top-left"
+		},
+		showMoveButton: async (position?: Position) => {
+			uiControl.showMoveBtn = true
+			uiControl.moveBtnPosition = position ?? "bottom-left"
+		},
+		showRefreshButton: async (position?: Position) => {
+			uiControl.showRefreshBtn = true
+			uiControl.refreshBtnPosition = position ?? "top-right"
+		},
+		getTheme: () => {
+			const theme = $appConfig.theme
+			return Promise.resolve({
+				theme: theme.theme as ThemeColor,
+				radius: theme.radius,
+				lightMode: theme.lightMode
+			})
+		},
+		async reloadPage() {
+			location.reload()
+		},
+		async setTransparentWindowBackground(transparent: boolean) {
+			if (isInMainWindow()) {
+				throw new Error("Cannot set background in main window")
+			}
+			if (transparent) {
+				document.body.style.backgroundColor = "transparent"
+			} else {
+				document.body.style.backgroundColor = ""
+			}
+		}
+	}
+
+	const serverAPI: Record<string, any> = constructJarvisServerAPIWithPermissions(
+		loadedExt.kunkun.permissions,
+		loadedExt.extPath
+	)
+	serverAPI.iframeUi = {
+		...serverAPI.iframeUi,
+		...iframeUiAPI
+	} satisfies IUiIframe
+	serverAPI.db = new db.JarvisExtDB(extInfoInDB.extId)
+	serverAPI.app = {
+		language: () => Promise.resolve("en") // TODO: get locale
+	} satisfies IApp
+
+	function onBackBtnClicked() {
+		if (isInMainWindow()) {
+			goHome()
+		} else {
+			appWin.close()
+		}
+	}
+
+	onMount(() => {
+		appWin.show()
+		console.log("how", appWin.label)
+
+		console.log(iframeRef.contentWindow)
+		if (iframeRef?.contentWindow) {
+			exposeApiToWindow(iframeRef.contentWindow, serverAPI)
+		} else {
+			toast.warning("iframeRef.contentWindow not available")
+		}
+	})
+
+	onDestroy(() => {
+		winExtMap.unregisterExtensionFromWindow(appWin.label)
+	})
+</script>
+
+<svelte:window on:keydown|preventDefault={goBackOnEscape} />
+
+{#if uiControl.backBtnPosition}
+	<Button
+		class={cn("absolute", positionToTailwindClasses(uiControl.backBtnPosition))}
+		size="icon"
+		variant="outline"
+		data-tauri-drag-region
+		onclick={onBackBtnClicked}
+	>
+		{#if appWin.label === "main"}
+			<ArrowLeftIcon class="w-4" data-tauri-drag-region />
+		{:else}
+			<XIcon class="w-4" data-tauri-drag-region />
+		{/if}
+	</Button>
+{/if}
+{#if uiControl.moveBtnPosition}
+	<Button
+		class={cn("absolute", positionToTailwindClasses(uiControl.moveBtnPosition))}
+		size="icon"
+		variant="outline"
+		data-tauri-drag-region
+	>
+		<MoveIcon data-tauri-drag-region class="w-4" />
+	</Button>
+{/if}
+{#if uiControl.refreshBtnPosition}
+	<Button
+		class={cn("absolute", positionToTailwindClasses(uiControl.refreshBtnPosition))}
+		size="icon"
+		variant="outline"
+		data-tauri-drag-region
+		onclick={iframeUiAPI.reloadPage}
+	>
+		<RefreshCcwIcon class="w-4" />
+	</Button>
+{/if}
+
+<main class="h-screen">
+	<iframe
+		bind:this={iframeRef}
+		class="h-full"
+		width="100%"
+		height="100%"
+		frameborder="0"
+		src={data.url}
+		title={data.extPath}
+	></iframe>
+</main>
--- a/apps/desktop/src/routes/extension/ui-iframe/+page.ts
+++ b/apps/desktop/src/routes/extension/ui-iframe/+page.ts
@ -0,0 +1,50 @@
+import { db, unregisterExtensionWindow } from "@kksh/api/commands"
+import type { Ext as ExtInfoInDB, ExtPackageJsonExtra } from "@kksh/api/models"
+import { loadExtensionManifestFromDisk } from "@kksh/extension"
+import { join } from "@tauri-apps/api/path"
+import { error } from "@tauri-apps/plugin-log"
+import { goto } from "$app/navigation"
+import { toast } from "svelte-sonner"
+import { z } from "zod"
+import type { PageLoad } from "./$types"
+
+export const load: PageLoad = async ({
+	url,
+	params,
+	route
+}): Promise<{
+	extPath: string
+	url: string
+	loadedExt: ExtPackageJsonExtra
+	extInfoInDB: ExtInfoInDB
+}> => {
+	// both query parameter must exist
+	const _extPath = url.searchParams.get("extPath")
+	const _extUrl = url.searchParams.get("url")
+	if (!_extPath || !_extUrl) {
+		toast.error("Invalid extension path or url")
+		error("Invalid extension path or url")
+		goto("/")
+	}
+	const extPath = z.string().parse(_extPath)
+	const extUrl = z.string().parse(_extUrl)
+	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("/")
+	}
+	return { extPath, url: extUrl, loadedExt, extInfoInDB: extInfoInDB! }
+}
--- a/apps/desktop/src/routes/extension/ui-worker/+page.svelte
+++ b/apps/desktop/src/routes/extension/ui-worker/+page.svelte
@ -0,0 +1 @@
+<script lang="ts"></script>
--- a/apps/desktop/src/routes/settings/set-dev-ext-path/+page.svelte
+++ b/apps/desktop/src/routes/settings/set-dev-ext-path/+page.svelte
@ -0,0 +1,18 @@
+<script lang="ts">
+	import DevExtPathForm from "@/components/standalone/settings/DevExtPathForm.svelte"
+	import { goBackOnEscape } from "@/utils/key"
+	import { goBack } from "@/utils/route"
+	import { Button } from "@kksh/svelte5"
+	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}>
+	<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">Set Dev Extension Path</h2>
+	<p>This is where your extensions will be installed.</p>
+	<DevExtPathForm />
+</main>
--- a/apps/desktop/static/favicon.png
+++ b/apps/desktop/static/favicon.png
--- a/apps/desktop/static/svelte.svg
+++ b/apps/desktop/static/svelte.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
--- a/apps/desktop/static/tauri.svg
+++ b/apps/desktop/static/tauri.svg
@ -1,6 +0,0 @@
-<svg width="206" height="231" viewBox="0 0 206 231" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M143.143 84C143.143 96.1503 133.293 106 121.143 106C108.992 106 99.1426 96.1503 99.1426 84C99.1426 71.8497 108.992 62 121.143 62C133.293 62 143.143 71.8497 143.143 84Z" fill="#FFC131"/>
-<ellipse cx="84.1426" cy="147" rx="22" ry="22" transform="rotate(180 84.1426 147)" fill="#24C8DB"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M166.738 154.548C157.86 160.286 148.023 164.269 137.757 166.341C139.858 160.282 141 153.774 141 147C141 144.543 140.85 142.121 140.558 139.743C144.975 138.204 149.215 136.139 153.183 133.575C162.73 127.404 170.292 118.608 174.961 108.244C179.63 97.8797 181.207 86.3876 179.502 75.1487C177.798 63.9098 172.884 53.4021 165.352 44.8883C157.82 36.3744 147.99 30.2165 137.042 27.1546C126.095 24.0926 114.496 24.2568 103.64 27.6274C92.7839 30.998 83.1319 37.4317 75.8437 46.1553C74.9102 47.2727 74.0206 48.4216 73.176 49.5993C61.9292 50.8488 51.0363 54.0318 40.9629 58.9556C44.2417 48.4586 49.5653 38.6591 56.679 30.1442C67.0505 17.7298 80.7861 8.57426 96.2354 3.77762C111.685 -1.01901 128.19 -1.25267 143.769 3.10474C159.348 7.46215 173.337 16.2252 184.056 28.3411C194.775 40.457 201.767 55.4101 204.193 71.404C206.619 87.3978 204.374 103.752 197.73 118.501C191.086 133.25 180.324 145.767 166.738 154.548ZM41.9631 74.275L62.5557 76.8042C63.0459 72.813 63.9401 68.9018 65.2138 65.1274C57.0465 67.0016 49.2088 70.087 41.9631 74.275Z" fill="#FFC131"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M38.4045 76.4519C47.3493 70.6709 57.2677 66.6712 67.6171 64.6132C65.2774 70.9669 64 77.8343 64 85.0001C64 87.1434 64.1143 89.26 64.3371 91.3442C60.0093 92.8732 55.8533 94.9092 51.9599 97.4256C42.4128 103.596 34.8505 112.392 30.1816 122.756C25.5126 133.12 23.9357 144.612 25.6403 155.851C27.3449 167.09 32.2584 177.598 39.7906 186.112C47.3227 194.626 57.153 200.784 68.1003 203.846C79.0476 206.907 90.6462 206.743 101.502 203.373C112.359 200.002 122.011 193.568 129.299 184.845C130.237 183.722 131.131 182.567 131.979 181.383C143.235 180.114 154.132 176.91 164.205 171.962C160.929 182.49 155.596 192.319 148.464 200.856C138.092 213.27 124.357 222.426 108.907 227.222C93.458 232.019 76.9524 232.253 61.3736 227.895C45.7948 223.538 31.8055 214.775 21.0867 202.659C10.3679 190.543 3.37557 175.59 0.949823 159.596C-1.47592 143.602 0.768139 127.248 7.41237 112.499C14.0566 97.7497 24.8183 85.2327 38.4045 76.4519ZM163.062 156.711L163.062 156.711C162.954 156.773 162.846 156.835 162.738 156.897C162.846 156.835 162.954 156.773 163.062 156.711Z" fill="#24C8DB"/>
-</svg>
--- a/apps/desktop/static/vite.svg
+++ b/apps/desktop/static/vite.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/apps/desktop/svelte.config.js
+++ b/apps/desktop/svelte.config.js
@ -1,20 +1,23 @@
 // 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
-import adapter from "@sveltejs/adapter-static";
-import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import adapter from "@sveltejs/adapter-static"
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"

 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	preprocess: vitePreprocess(),
 	kit: {
-    adapter: adapter(),
+		adapter: adapter({
+			fallback: "400.html"
+			// fallback: "index.html"
+		}),
 		alias: {
 			"@/*": "./src/lib/*",
-      "@kksh/ui/*": "../../packages/ui/*",
-      "@kksh/svelte5/*": "../../node_modules/@kksh/svelte5/src/lib/*",
-    },
-  },
-};
+			// "@kksh/ui/*": "../../packages/ui/*",
+			"@kksh/svelte5/*": "../../node_modules/@kksh/svelte5/src/lib/*"
+		}
+	}
+}

-export default config;
+export default config
--- a/package.json
+++ b/package.json
@ -4,12 +4,15 @@
 	"scripts": {
 		"build": "turbo build",
 		"dev": "turbo dev",
+		"test": "turbo run test",
+		"prepare": "turbo run prepare",
 		"lint": "turbo lint",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\""
+		"format": "prettier --write \"**/*.{ts,tsx,md,svelte}\""
 	},
 	"devDependencies": {
 		"@ianvs/prettier-plugin-sort-imports": "^4.3.1",
-    "@kksh/svelte5": "0.1.2-beta.3",
+		"@kksh/api": "workspace:*",
+		"@kksh/svelte5": "0.1.2-beta.4",
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.7",
 		"prettier-plugin-tailwindcss": "^0.6.8",
@ -18,8 +21,34 @@
 		"turbo": "^2.2.3",
 		"typescript": "5.5.4"
 	},
-  "packageManager": "pnpm@8.15.6",
+	"packageManager": "pnpm@9.12.3",
 	"engines": {
-    "node": ">=18"
+		"node": ">=22"
+	},
+	"dependencies": {
+		"@changesets/cli": "^2.27.9",
+		"@iconify/svelte": "^4.0.2",
+		"@supabase/supabase-js": "^2.46.1",
+		"@tauri-apps/api": "^2.0.3",
+		"@tauri-apps/cli": "^2.0.4",
+		"@tauri-apps/plugin-deep-link": "^2.0.0",
+		"@tauri-apps/plugin-dialog": "^2.0.1",
+		"@tauri-apps/plugin-fs": "^2.0.1",
+		"@tauri-apps/plugin-global-shortcut": "^2.0.0",
+		"@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-process": "2.0.0",
+		"@tauri-apps/plugin-shell": "^2.0.1",
+		"@tauri-apps/plugin-store": "^2.1.0",
+		"@tauri-apps/plugin-updater": "^2.0.0",
+		"@tauri-apps/plugin-upload": "^2.0.0",
+		"supabase": "^1.207.9",
+		"tauri-plugin-network-api": "workspace:*",
+		"tauri-plugin-shellx-api": "^2.0.11",
+		"tauri-plugin-system-info-api": "workspace:*",
+		"valibot": "^0.40.0",
+		"zod": "^3.23.8"
 	}
 }
--- a/packages/api/.gitignore
+++ b/packages/api/.gitignore
@ -0,0 +1,178 @@
+# 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
+docs
+stats.html
+deno.d.ts
--- a/packages/api/.npmrc
+++ b/packages/api/.npmrc
@ -0,0 +1 @@
+@jsr:registry=https://npm.jsr.io
--- a/packages/api/README.md
+++ b/packages/api/README.md
@ -0,0 +1,43 @@
+# @kksh/api
+
+![NPM Version](https://img.shields.io/npm/v/%40kksh%2Fapi)
+
+[Kunkun API](https://www.npmjs.com/package/@kksh/api) is an NPM package designed for developers to create extensions for Kunkun.
+
+`@kksh/api` provides a set of APIs for extensions to interact with Kunkun and System APIs. The APIs include:
+
+- Clipboard
+- Database
+- Dialog
+- Event
+- Fetch
+- File System
+- Logger
+- Network
+- Notification
+- Open
+- OS
+- Path
+- Shell
+- System Info
+- System Commands
+- Toast
+- UI
+- etc.
+
+Read more details in documentation at https://docs.kunkun.sh,
+and generated docs at https://docs.api.kunkun.sh/
+
+## Dev
+
+### Dependency Graph
+
+To detect circular dependencies
+
+```bash
+pnpm madge ./src/ui/worker/index.ts --circular # detect circular dependencies
+pnpm dep-tree ./src/ui/worker/index.ts
+
+
+pnpm test # this will detect circular dependencies in all files
+```
--- a/packages/api/tests/verify-package-export.test.ts
+++ b/packages/api/tests/verify-package-export.test.ts
@ -0,0 +1,41 @@
+import path from "path"
+import { describe, expect, test } from "bun:test"
+import madge from "madge"
+import * as v from "valibot"
+import { exports } from "../package.json"
+
+const buildEntries: string[] = Object.entries(exports).filter((e) => typeof e === "string")
+
+describe("Verify Bundled Package", () => {
+	test("Test Circular Dependency", async () => {
+		const pkgRoot = path.join(__dirname, "..")
+		const paths = buildEntries.map((p) => path.join(pkgRoot, p)).map((p) => path.resolve(p))
+		// expect each paths to exist
+		paths.forEach(async (p) => {
+			expect(await Bun.file(p).exists()).toBe(true)
+			const madgeRes = await madge(p)
+			expect(madgeRes.circular()).toEqual([])
+		})
+	})
+
+	test("Verify Package Export Path", async () => {
+		const pkgRoot = path.join(__dirname, "..")
+		const pkgJsonPath = path.join(pkgRoot, "package.json")
+		const file = Bun.file(pkgJsonPath)
+		const pkgJson = await file.json()
+		const exports = pkgJson["exports"]
+		Object.entries(exports).forEach(async ([key, value]) => {
+			const exportPaths = v.parse(v.union([v.record(v.string(), v.string()), v.string()]), value)
+			if (typeof exportPaths === "string") {
+				// special case for "./package.json"
+				const resolvedPath = path.join(pkgRoot, exportPaths)
+				expect(await Bun.file(resolvedPath).exists()).toBe(true)
+			} else {
+				Object.values(exportPaths).forEach(async (_path: string) => {
+					const resolvedPath = path.join(pkgRoot, _path)
+					expect(await Bun.file(resolvedPath).exists()).toBe(true)
+				})
+			}
+		})
+	})
+})
--- a/packages/api/build.ts
+++ b/packages/api/build.ts
@ -0,0 +1,20 @@
+import fs from "fs"
+import { $ } from "bun"
+
+// add package version
+
+if (fs.existsSync("dist")) {
+	await $`rm -rf dist`
+}
+fs.mkdirSync("dist")
+// await $`pnpm build:rollup`
+// await $`cp ../schema/manifest-json-schema.json ./dist/schema.json`
+await $`bun ../schema/scripts/print-schema.ts > dist/schema.json`
+
+// Post Build Verify
+const schemaFile = Bun.file("dist/schema.json")
+if (!schemaFile.exists()) {
+	throw new Error("schema.json not found")
+}
+
+await $`bun patch-version.ts`
--- a/packages/api/deno.lock
+++ b/packages/api/deno.lock
--- a/packages/api/jsr.json
+++ b/packages/api/jsr.json
@ -0,0 +1,23 @@
+{
+	"$schema": "https://jsr.io/schema/config-file.v1.json",
+	"name": "@kunkun/api",
+	"version": "0.0.27",
+	"license": "MIT",
+	"exports": {
+		".": "./src/index.ts",
+		"./ui": "./src/ui/index.ts",
+		"./ui/iframe": "./src/ui/iframe/index.ts",
+		"./ui/worker": "./src/ui/worker/index.ts",
+		"./models": "./src/models/index.ts",
+		"./commands": "./src/commands/index.ts",
+		"./runtime/deno": "./src/runtime/deno.ts",
+		"./permissions": "./src/permissions/index.ts",
+		"./supabase": "./src/supabase/index.ts",
+		"./supabase/types": "./src/supabase/database.types.ts",
+		"./dev": "./src/dev/index.ts",
+		"./events": "./src/events.ts"
+	},
+	"imports": {
+		"@hk/comlink-stdio": "jsr:@hk/comlink-stdio@^0.1.6"
+	}
+}
--- a/packages/api/package.json
+++ b/packages/api/package.json
@ -0,0 +1,74 @@
+{
+	"name": "@kksh/api",
+	"version": "0.0.27",
+	"type": "module",
+	"exports": {
+		".": "./src/index.ts",
+		"./ui": "./src/ui/index.ts",
+		"./ui/iframe": "./src/ui/iframe/index.ts",
+		"./ui/worker": "./src/ui/worker/index.ts",
+		"./models": "./src/models/index.ts",
+		"./commands": "./src/commands/index.ts",
+		"./runtime/deno": "./src/runtime/deno.ts",
+		"./permissions": "./src/permissions/index.ts",
+		"./dev": "./src/dev/index.ts",
+		"./events": "./src/events.ts",
+		"./supabase": "./src/supabase/index.ts",
+		"./supabase/types": "./src/supabase/database.types.ts",
+		"./package.json": "./package.json"
+	},
+	"license": "MIT",
+	"scripts": {
+		"test": "bun test --coverage",
+		"gen:deno:types": "deno types > deno.d.ts",
+		"build:docs": "npx typedoc",
+		"dev": "bun --watch build.ts",
+		"build": "bun build.ts",
+		"prepare": "bun setup.ts",
+		"format": "prettier --write \"**/*.{ts,tsx,md,vue,json,yaml,yml}\""
+	},
+	"devDependencies": {
+		"@types/bun": "latest",
+		"@types/lodash": "^4.17.13",
+		"@types/madge": "^5.0.3",
+		"@types/node": "^22.8.7",
+		"@types/semver": "^7.5.8",
+		"fs-extra": "^11.2.0",
+		"madge": "^8.0.0",
+		"typedoc": "^0.26.11",
+		"typescript": "^5.0.0"
+	},
+	"dependencies": {
+		"@hk/comlink-stdio": "npm:comlink-stdio@^0.1.7",
+		"@huakunshen/comlink": "^4.4.1",
+		"@tauri-apps/api": "^2.0.3",
+		"@tauri-apps/cli": "^2.0.4",
+		"@tauri-apps/plugin-deep-link": "^2.0.0",
+		"@tauri-apps/plugin-dialog": "^2.0.1",
+		"@tauri-apps/plugin-fs": "^2.0.1",
+		"@tauri-apps/plugin-global-shortcut": "^2.0.0",
+		"@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-process": "2.0.0",
+		"@tauri-apps/plugin-shell": "^2.0.1",
+		"@tauri-apps/plugin-store": "^2.1.0",
+		"@tauri-apps/plugin-updater": "^2.0.0",
+		"@tauri-apps/plugin-upload": "^2.0.0",
+		"comlink": "^4.4.1",
+		"lodash": "^4.17.21",
+		"minimatch": "^10.0.1",
+		"semver": "^7.6.3",
+		"svelte-sonner": "^0.3.28",
+		"tauri-api-adapter": "0.3.8",
+		"tauri-plugin-network-api": "2.0.4",
+		"tauri-plugin-shellx-api": "^2.0.11",
+		"tauri-plugin-system-info-api": "2.0.8",
+		"valibot": "^0.40.0"
+	},
+	"files": [
+		"src",
+		"dist"
+	]
+}
--- a/packages/api/patch-version.ts
+++ b/packages/api/patch-version.ts
@ -0,0 +1,13 @@
+import fs from "fs"
+import { version } from "./package.json"
+
+const versionTsContent = fs.readFileSync("./src/version.ts", "utf-8")
+const lines: string[] = []
+for (const line of versionTsContent.split("\n")) {
+	if (line.includes("export const version")) {
+		lines.push(`export const version = "${version}"`)
+	} else {
+		lines.push(line)
+	}
+}
+fs.writeFileSync("./src/version.ts", lines.join("\n"))
--- a/packages/api/setup.ts
+++ b/packages/api/setup.ts
@ -0,0 +1,7 @@
+import { $ } from "bun"
+
+// Generate deno.d.ts under packages/api
+let denoTypes = await $`deno types`.text()
+// grep to filter out the line in denoTypes that contains "no-default-lib"
+denoTypes = denoTypes.split("\n").filter((line) => !line.includes("no-default-lib")).join("\n")
+Bun.write("deno.d.ts", denoTypes)
--- a/packages/api/src/commands/apps.ts
+++ b/packages/api/src/commands/apps.ts
@ -0,0 +1,26 @@
+import { invoke } from "@tauri-apps/api/core"
+import { AppInfo } from "../models"
+import { generateJarvisPluginCommand } from "./common"
+
+export function getAllApps(): Promise<AppInfo[]> {
+	return invoke(generateJarvisPluginCommand("get_applications"))
+}
+
+export function refreshApplicationsList(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("refresh_applications_list"))
+}
+
+export function refreshApplicationsListInBg(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("refresh_applications_list_in_bg"))
+}
+
+// export function convertAppToTListItem(app: AppInfo): TListItem {
+//   return {
+//     title: app.name,
+//     value: app.app_desktop_path,
+//     description: "",
+//     type: "Application",
+//     icon: null,
+//     keywords: app.name.split(" "),
+//   };
+// }
--- a/packages/api/src/commands/clipboard.ts
+++ b/packages/api/src/commands/clipboard.ts
@ -0,0 +1,35 @@
+import { invoke } from "@tauri-apps/api/core"
+import { array, literal, number, object, parse, string, union, type InferOutput } from "valibot"
+import { generateJarvisPluginCommand } from "./common"
+
+export const ClipboardContentType = union([
+	literal("Text"),
+	literal("Image"),
+	literal("Html"),
+	literal("Rtf")
+	// z.literal("File"),
+])
+export type ClipboardContentType = InferOutput<typeof ClipboardContentType>
+export const ClipboardRecord = object({
+	value: string(),
+	contentType: ClipboardContentType,
+	timestamp: number(),
+	text: string()
+})
+export type ClipboardRecord = InferOutput<typeof ClipboardRecord>
+export const ClipboardRecords = array(ClipboardRecord)
+export type ClipboardRecords = InferOutput<typeof ClipboardRecords>
+
+export function addClipboardHistory(value: string) {
+	return invoke<null>(generateJarvisPluginCommand("add_to_history"), { value })
+}
+
+export function getClipboardHistory() {
+	return invoke<ClipboardRecord[]>(generateJarvisPluginCommand("get_history")).then((records) => {
+		return parse(ClipboardRecords, records)
+	})
+}
+
+// export function setCandidateFilesForServer(files: string[]) {
+//   return invoke<null>(generateJarvisPluginCommand("set_candidate_files"), { files })
+// }
--- a/packages/api/src/commands/common.ts
+++ b/packages/api/src/commands/common.ts
@ -0,0 +1,5 @@
+export const JarvisPluginCommandPrefix = "plugin:jarvis"
+
+export function generateJarvisPluginCommand(command: string) {
+	return `${JarvisPluginCommandPrefix}|${command}`
+}
--- a/packages/api/src/commands/db.ts
+++ b/packages/api/src/commands/db.ts
@ -0,0 +1,338 @@
+import { invoke } from "@tauri-apps/api/core"
+import { array, literal, optional, parse, safeParse, union, type InferOutput } from "valibot"
+import { KUNKUN_EXT_IDENTIFIER } from "../constants"
+import { CmdType, Ext, ExtCmd, ExtData } from "../models/extension"
+import { convertDateToSqliteString, SQLSortOrder } from "../models/sql"
+import { generateJarvisPluginCommand } from "./common"
+
+/* -------------------------------------------------------------------------- */
+/*                               Extension CRUD                               */
+/* -------------------------------------------------------------------------- */
+export function createExtension(ext: {
+	identifier: string
+	version: string
+	enabled?: boolean
+	path?: string
+	data?: any
+}) {
+	return invoke<void>(generateJarvisPluginCommand("create_extension"), ext)
+}
+
+export function getAllExtensions() {
+	return invoke<Ext[]>(generateJarvisPluginCommand("get_all_extensions"))
+}
+
+export function getUniqueExtensionByIdentifier(identifier: string) {
+	return invoke<Ext | undefined>(
+		generateJarvisPluginCommand("get_unique_extension_by_identifier"),
+		{
+			identifier
+		}
+	)
+}
+
+export function getUniqueExtensionByPath(path: string) {
+	return invoke<Ext | undefined>(generateJarvisPluginCommand("get_unique_extension_by_path"), {
+		path
+	})
+}
+
+export function getAllExtensionsByIdentifier(identifier: string) {
+	return invoke<Ext[]>(generateJarvisPluginCommand("get_all_extensions_by_identifier"), {
+		identifier
+	})
+}
+
+/**
+ * Use this function when you expect the extension to exist. Such as builtin extensions.
+ * @param identifier
+ * @returns
+ */
+export function getExtensionByIdentifierExpectExists(identifier: string): Promise<Ext> {
+	return getUniqueExtensionByIdentifier(identifier).then((ext) => {
+		if (!ext) {
+			throw new Error(`Unexpexted Error: Extension ${identifier} not found`)
+		}
+		return ext
+	})
+}
+
+// TODO: clean this up
+// export function deleteExtensionByIdentifier(identifier: string) {
+// 	return invoke<void>(generateJarvisPluginCommand("delete_extension_by_identifier"), { identifier })
+// }
+
+export function deleteExtensionByPath(path: string) {
+	return invoke<void>(generateJarvisPluginCommand("delete_extension_by_path"), { path })
+}
+
+export function deleteExtensionByExtId(extId: string) {
+	return invoke<void>(generateJarvisPluginCommand("delete_extension_by_ext_id"), { extId })
+}
+
+/* -------------------------------------------------------------------------- */
+/*                           Extension Command CRUD                           */
+/* -------------------------------------------------------------------------- */
+export function createCommand(data: {
+	extId: number
+	name: string
+	cmdType: CmdType
+	data: string
+	alias?: string
+	hotkey?: string
+	enabled?: boolean
+}) {
+	return invoke<void>(generateJarvisPluginCommand("create_command"), {
+		...data,
+		enabled: data.enabled ?? false
+	})
+}
+
+export function getCommandById(cmdId: number) {
+	return invoke<ExtCmd | undefined>(generateJarvisPluginCommand("get_command_by_id"), { cmdId })
+}
+
+export function getCommandsByExtId(extId: number) {
+	return invoke<ExtCmd[]>(generateJarvisPluginCommand("get_commands_by_ext_id"), { extId })
+}
+
+export function deleteCommandById(cmdId: number) {
+	return invoke<void>(generateJarvisPluginCommand("delete_command_by_id"), { cmdId })
+}
+
+export function updateCommandById(data: {
+	cmdId: number
+	name: string
+	cmdType: CmdType
+	data: string
+	alias?: string
+	hotkey?: string
+	enabled: boolean
+}) {
+	return invoke<void>(generateJarvisPluginCommand("update_command_by_id"), data)
+}
+
+/* -------------------------------------------------------------------------- */
+/*                             Extension Data CRUD                            */
+/* -------------------------------------------------------------------------- */
+export const ExtDataField = union([literal("data"), literal("search_text")])
+export type ExtDataField = InferOutput<typeof ExtDataField>
+
+function convertRawExtDataToExtData(rawData?: {
+	createdAt: string
+	updatedAt: string
+	data: null | string
+	searchText: null | string
+}): ExtData | undefined {
+	if (!rawData) {
+		return rawData
+	}
+	const parsedRes = safeParse(ExtData, {
+		...rawData,
+		createdAt: new Date(rawData.createdAt),
+		updatedAt: new Date(rawData.updatedAt),
+		data: rawData.data ?? undefined,
+		searchText: rawData.searchText ?? undefined
+	})
+	if (parsedRes.success) {
+		return parsedRes.output
+	} else {
+		console.error("Extension Data Parse Failure", parsedRes.issues)
+		throw new Error("Fail to parse extension data")
+	}
+}
+
+export function createExtensionData(data: {
+	extId: number
+	dataType: string
+	data: string
+	searchText?: string
+}) {
+	return invoke<void>(generateJarvisPluginCommand("create_extension_data"), data)
+}
+
+export function getExtensionDataById(dataId: number) {
+	return invoke<
+		| (ExtData & {
+				createdAt: string
+				updatedAt: string
+				data: null | string
+				searchText: null | string
+		  })
+		| undefined
+	>(generateJarvisPluginCommand("get_extension_data_by_id"), {
+		dataId
+	}).then(convertRawExtDataToExtData)
+}
+
+/**
+ * Fields option can be used to select optional fields. By default, if left empty, data and searchText are not returned.
+ * This is because data and searchText can be large and we don't want to return them by default.
+ * If you just want to get data ids in order to delete them, retrieving all data is not necessary.
+ * @param searchParams
+ */
+export async function searchExtensionData(searchParams: {
+	extId: number
+	searchExactMatch: boolean
+	dataId?: number
+	dataType?: string
+	searchText?: string
+	afterCreatedAt?: string
+	beforeCreatedAt?: string
+	limit?: number
+	orderByCreatedAt?: SQLSortOrder
+	orderByUpdatedAt?: SQLSortOrder
+	fields?: ExtDataField[]
+}): Promise<ExtData[]> {
+	const fields = parse(optional(array(ExtDataField), []), searchParams.fields)
+	let items = await invoke<
+		(ExtData & {
+			createdAt: string
+			updatedAt: string
+			data: null | string
+			searchText: null | string
+		})[]
+	>(generateJarvisPluginCommand("search_extension_data"), { ...searchParams, fields })
+
+	return items.map(convertRawExtDataToExtData).filter((item) => item) as ExtData[]
+}
+
+export function deleteExtensionDataById(dataId: number) {
+	return invoke<void>(generateJarvisPluginCommand("delete_extension_data_by_id"), { dataId })
+}
+
+export function updateExtensionDataById(data: {
+	dataId: number
+	data: string
+	searchText?: string
+}) {
+	return invoke<void>(generateJarvisPluginCommand("update_extension_data_by_id"), data)
+}
+
+/* -------------------------------------------------------------------------- */
+/*                             Built-in Extensions                            */
+/* -------------------------------------------------------------------------- */
+export function getExtClipboard() {
+	return getExtensionByIdentifierExpectExists(KUNKUN_EXT_IDENTIFIER.KUNKUN_CLIPBOARD_EXT_IDENTIFIER)
+}
+export function getExtQuickLinks() {
+	return getExtensionByIdentifierExpectExists(
+		KUNKUN_EXT_IDENTIFIER.KUNKUN_QUICK_LINKS_EXT_IDENTIFIER
+	)
+}
+export function getExtRemote() {
+	return getExtensionByIdentifierExpectExists(KUNKUN_EXT_IDENTIFIER.KUNKUN_REMOTE_EXT_IDENTIFIER)
+}
+export function getExtScriptCmd() {
+	return getExtensionByIdentifierExpectExists(
+		KUNKUN_EXT_IDENTIFIER.KUNKUN_SCRIPT_CMD_EXT_IDENTIFIER
+	)
+}
+export function getExtDev() {
+	return getExtensionByIdentifierExpectExists(KUNKUN_EXT_IDENTIFIER.KUNKUN_DEV_EXT_IDENTIFIER)
+}
+
+/**
+ * Database API for extensions.
+ * Extensions shouldn't have full access to the database, they can only access their own data.
+ * When an extension is loaded, the main thread will create an instance of this class and
+ * expose it to the extension.
+ */
+export class JarvisExtDB {
+	extId: number
+
+	constructor(extId: number) {
+		this.extId = extId
+	}
+
+	async add(data: { data: string; dataType?: string; searchText?: string }) {
+		return createExtensionData({
+			data: data.data,
+			dataType: data.dataType ?? "default",
+			searchText: data.searchText,
+			extId: this.extId
+		})
+	}
+
+	async delete(dataId: number): Promise<void> {
+		// Verify if this data belongs to this extension
+		const d = await getExtensionDataById(dataId)
+		if (!d || d.extId !== this.extId) {
+			throw new Error("Extension Data not found")
+		}
+		return await deleteExtensionDataById(dataId)
+	}
+
+	async search(searchParams: {
+		dataId?: number
+		fullTextSearch?: boolean
+		dataType?: string
+		searchText?: string
+		afterCreatedAt?: Date
+		beforeCreatedAt?: Date
+		limit?: number
+		orderByCreatedAt?: SQLSortOrder
+		orderByUpdatedAt?: SQLSortOrder
+		fields?: ExtDataField[]
+	}): Promise<ExtData[]> {
+		const beforeCreatedAt = searchParams.beforeCreatedAt
+			? convertDateToSqliteString(searchParams.beforeCreatedAt)
+			: undefined
+		const afterCreatedAt = searchParams.afterCreatedAt
+			? convertDateToSqliteString(searchParams.afterCreatedAt)
+			: undefined
+		return searchExtensionData({
+			...searchParams,
+			searchExactMatch: searchParams.fullTextSearch ?? true,
+			extId: this.extId,
+			beforeCreatedAt,
+			afterCreatedAt
+		})
+	}
+
+	/**
+	 * Retrieve all data of this extension.
+	 * Use `search()` method for more advanced search.
+	 * @param options optional fields to retrieve. By default, data and searchText are not returned.
+	 * @returns
+	 */
+	retrieveAll(options: { fields?: ExtDataField[] }): Promise<ExtData[]> {
+		return this.search({ fields: options.fields })
+	}
+
+	/**
+	 * Retrieve all data of this extension by type.
+	 * Use `search()` method for more advanced search.
+	 * @param dataType
+	 * @returns
+	 */
+	retrieveAllByType(dataType: string): Promise<ExtData[]> {
+		return this.search({ dataType })
+	}
+
+	/**
+	 * Delete all data of this extension.
+	 */
+	deleteAll(): Promise<void> {
+		return this.search({})
+			.then((items) => {
+				return Promise.all(items.map((item) => this.delete(item.dataId)))
+			})
+			.then(() => {})
+	}
+
+	/**
+	 * Update data and searchText of this extension.
+	 * @param dataId unique id of the data
+	 * @param data
+	 * @param searchText
+	 * @returns
+	 */
+	async update(data: { dataId: number; data: string; searchText?: string }): Promise<void> {
+		const d = await getExtensionDataById(data.dataId)
+		if (!d || d.extId !== this.extId) {
+			throw new Error("Extension Data not found")
+		}
+		return updateExtensionDataById(data)
+	}
+}
--- a/packages/api/src/commands/extension.ts
+++ b/packages/api/src/commands/extension.ts
@ -0,0 +1,47 @@
+import { invoke } from "@tauri-apps/api/core"
+import { ExtensionLabelMap } from "../models/extension"
+import { generateJarvisPluginCommand } from "./common"
+
+export function isWindowLabelRegistered(label: string): Promise<boolean> {
+	return invoke(generateJarvisPluginCommand("is_window_label_registered"), { label })
+}
+
+/**
+ * @param extensionPath
+ * @returns Window Label
+ */
+export function registerExtensionWindow(options: {
+	extensionPath: string
+	windowLabel?: string
+	dist?: string
+}): Promise<string> {
+	const { extensionPath, windowLabel, dist } = options
+	return invoke(generateJarvisPluginCommand("register_extension_window"), {
+		extensionPath,
+		windowLabel,
+		dist
+	})
+}
+
+export function unregisterExtensionWindow(label: string): Promise<void> {
+	console.log("unregisterExtensionWindow", label)
+	return invoke(generateJarvisPluginCommand("unregister_extension_window"), { label })
+}
+
+export function registerExtensionSpawnedProcess(windowLabel: string, pid: number): Promise<void> {
+	return invoke(generateJarvisPluginCommand("register_extension_spawned_process"), {
+		windowLabel,
+		pid
+	})
+}
+
+export function unregisterExtensionSpawnedProcess(windowLabel: string, pid: number): Promise<void> {
+	return invoke(generateJarvisPluginCommand("unregister_extension_spawned_process"), {
+		windowLabel,
+		pid
+	})
+}
+
+export function getExtLabelMap(): Promise<ExtensionLabelMap> {
+	return invoke(generateJarvisPluginCommand("get_ext_label_map"))
+}
--- a/packages/api/src/commands/fileSearch.ts
+++ b/packages/api/src/commands/fileSearch.ts
@ -0,0 +1,42 @@
+import { invoke } from "@tauri-apps/api/core"
+import {
+	array,
+	boolean,
+	nullable,
+	number,
+	object,
+	optional,
+	parse,
+	string,
+	type InferOutput
+} from "valibot"
+import { generateJarvisPluginCommand } from "./common"
+
+export const FileSearchParams = object({
+	locations: array(string()),
+	query: optional(string()),
+	ext: optional(string()),
+	depth: optional(number()),
+	limit: optional(number()),
+	hidden: optional(boolean(), false),
+	ignore_case: optional(boolean(), false),
+	file_size_greater: optional(number()),
+	file_size_smaller: optional(number()),
+	file_size_equal: optional(number()),
+	created_after: optional(number()),
+	created_before: optional(number()),
+	modified_after: optional(number()),
+	modified_before: optional(number())
+})
+export type FileSearchParams = InferOutput<typeof FileSearchParams>
+
+export function fileSearch(
+	searchParams: Omit<FileSearchParams, "hidden" | "ignore_case"> & {
+		hidden?: boolean
+		ignore_case?: boolean
+	}
+): Promise<string[]> {
+	return invoke(generateJarvisPluginCommand("file_search"), {
+		searchParams: parse(FileSearchParams, searchParams)
+	})
+}
--- a/packages/api/src/commands/fs.ts
+++ b/packages/api/src/commands/fs.ts
@ -0,0 +1,70 @@
+import { invoke } from "@tauri-apps/api/core"
+import { generateJarvisPluginCommand } from "./common"
+
+export function pathExists(path: string): Promise<boolean> {
+	return invoke(generateJarvisPluginCommand("path_exists"), { path })
+}
+
+/**
+ * This command is built into Jarvis App
+ * Used to decompress a tarball file
+ * @param path
+ * @param destinationFolder
+ * @param options
+ * @returns
+ */
+export function decompressTarball(
+	path: string,
+	destinationFolder: string,
+	options?: {
+		overwrite?: boolean
+	}
+): Promise<string> {
+	return invoke(generateJarvisPluginCommand("decompress_tarball"), {
+		path,
+		destinationFolder,
+		overwrite: options?.overwrite ?? false
+	})
+}
+
+/**
+ * Compress a given directory into a tarball file
+ * @param srcDir Directory to compress
+ * @param destFile destination file, should end with .tar.gz or .tgz
+ * @param options
+ * @returns
+ */
+export function compressTarball(
+	srcDir: string,
+	destFile: string,
+	options?: {
+		overwrite?: boolean
+	}
+): Promise<string> {
+	return invoke(generateJarvisPluginCommand("compress_tarball"), {
+		srcDir,
+		destFile,
+		overwrite: options?.overwrite ?? false
+	})
+}
+
+/**
+ *
+ * @param path Path of file to unzip
+ * @param destinationFolder where to unzip the file
+ * @param options use overwrite to overwrite existing files
+ * @returns
+ */
+export function unzip(
+	path: string,
+	destinationFolder: string,
+	options?: {
+		overwrite?: boolean
+	}
+): Promise<void> {
+	return invoke(generateJarvisPluginCommand("unzip"), {
+		path,
+		destinationFolder,
+		overwrite: options?.overwrite ?? false
+	})
+}
--- a/packages/api/src/commands/index.ts
+++ b/packages/api/src/commands/index.ts
@ -0,0 +1,14 @@
+export * from "./apps"
+export * from "./fs"
+export * from "./server"
+export * from "./system"
+export * from "./tools"
+export * from "./extension"
+export * from "./store"
+export * as db from "./db"
+export { JarvisExtDB } from "./db"
+export * from "./clipboard"
+export * from "./fileSearch"
+export * from "./utils"
+export * as macSecurity from "./mac-security"
+export * from "./mdns"
--- a/packages/api/src/commands/mac-security.ts
+++ b/packages/api/src/commands/mac-security.ts
@ -0,0 +1,14 @@
+import { invoke } from "@tauri-apps/api/core"
+import { generateJarvisPluginCommand } from "./common"
+
+export function verifyAuth(): Promise<boolean> {
+	return invoke(generateJarvisPluginCommand("verify_auth"))
+}
+
+export function requestScreenCaptureAccess(): Promise<boolean> {
+	return invoke(generateJarvisPluginCommand("request_screen_capture_access"))
+}
+
+export function checkScreenCaptureAccess(): Promise<boolean> {
+	return invoke(generateJarvisPluginCommand("check_screen_capture_access"))
+}
--- a/packages/api/src/commands/mdns.ts
+++ b/packages/api/src/commands/mdns.ts
@ -0,0 +1,7 @@
+import { invoke } from "@tauri-apps/api/core"
+import type { MdnsPeers } from "../models/mdns"
+import { generateJarvisPluginCommand } from "./common"
+
+export function getPeers(): Promise<MdnsPeers> {
+	return invoke<MdnsPeers>(generateJarvisPluginCommand("get_peers"))
+}
--- a/packages/api/src/commands/path.ts
+++ b/packages/api/src/commands/path.ts
@ -0,0 +1,16 @@
+import { invoke } from "@tauri-apps/api/core"
+import { generateJarvisPluginCommand } from "./common"
+
+/**
+ * @returns <app data dir>/extensions
+ */
+export function getDefaultExtensionsDir(): Promise<String> {
+	return invoke(generateJarvisPluginCommand("get_default_extensions_dir"))
+}
+
+/**
+ * @returns <app data dir>/extensions_storage
+ */
+export function getDefaultExtensionsStorageDir(): Promise<String> {
+	return invoke(generateJarvisPluginCommand("get_default_extensions_storage_dir"))
+}
--- a/packages/api/src/commands/server.ts
+++ b/packages/api/src/commands/server.ts
@ -0,0 +1,41 @@
+import { invoke } from "@tauri-apps/api/core"
+import { appDataDir, join } from "@tauri-apps/api/path"
+import { generateJarvisPluginCommand } from "./common"
+
+export function startServer(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("start_server"))
+}
+
+export function stopServer(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("stop_server"))
+}
+
+export function restartServer(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("restart_server"))
+}
+
+export function serverIsRunning(): Promise<boolean> {
+	return invoke(generateJarvisPluginCommand("server_is_running"))
+}
+
+// TODO: clean this up
+// export function setDevExtensionFolder(devExtFolder: string | null): Promise<void> {
+// 	return invoke(generateJarvisPluginCommand("set_dev_extension_folder"), { devExtFolder })
+// }
+
+// export function setExtensionFolder(extFolder: string | null): Promise<void> {
+// 	return invoke(generateJarvisPluginCommand("set_extension_folder"), { extFolder })
+// }
+
+// export function getExtensionFolder(): Promise<string | null> {
+// return invoke(generateJarvisPluginCommand("get_extension_folder"))
+// 	return appDataDir().then((dir) => join(dir, "extensions"))
+// }
+
+// export function getDevExtensionFolder(): Promise<string | null> {
+// return invoke(generateJarvisPluginCommand("get_dev_extension_folder"))
+// }
+
+export function getServerPort() {
+	return invoke<number>(generateJarvisPluginCommand("get_server_port"))
+}
--- a/packages/api/src/commands/store.ts
+++ b/packages/api/src/commands/store.ts
@ -0,0 +1,223 @@
+import { invoke } from "@tauri-apps/api/core"
+import { listen, type UnlistenFn } from "@tauri-apps/api/event"
+import { generateJarvisPluginCommand } from "./common"
+
+const storageCmdPrefix = `ext_store_wrapper_`
+
+function computeCommandName(command: string): string {
+	return generateJarvisPluginCommand(`${storageCmdPrefix}${command}`)
+}
+
+interface ChangePayload<T> {
+	path: string
+	key: string
+	value: T | null
+}
+
+/**
+ * This Store is actually a wrapper over the tauri-plugin-store. Customized to be used with Jarvis Extensions, the APIs are exactly the same.
+ * A key-value store for Jarvis Extensions. Create a store in UI Extensions to store any data.
+ * filename is optional for the constructor if you only need one store file.
+ * If you plan to have multiple stores, e.g. one for settings, one for data, you can specify different filenames.
+ * @example
+ * ```ts
+ * const store = new JarvisStore("settings.bin");
+ * await store.set("theme", "dark");
+ * const theme = await store.get("theme");
+ * console.log(theme); // dark
+ * ```
+ */
+export class JarvisStore {
+	path: string
+	/**
+	 * filename is optional if you only need one store file.
+	 * If you plan to have multiple stores, e.g. one for settings, one for data, you can specify different filenames.
+	 * @example
+	 * ```ts
+	 * const store = new JarvisStore("settings.bin");
+	 * await store.set("theme", "dark");
+	 * const theme = await store.get("theme");
+	 * console.log(theme); // dark
+	 * ```
+	 * @param filename filename for the store. Defaults to `default.bin`.
+	 */
+	constructor(filename: string = "default.bin") {
+		this.path = filename
+	}
+
+	/**
+	 * Inserts a key-value pair into the store.
+	 *
+	 * @param key
+	 * @param value
+	 * @returns
+	 */
+	async set(key: string, value: unknown): Promise<void> {
+		await invoke(computeCommandName("set"), {
+			path: this.path,
+			key,
+			value
+		})
+	}
+
+	/**
+	 * Returns the value for the given `key` or `null` the key does not exist.
+	 *
+	 * @param key
+	 * @returns
+	 */
+	async get<T>(key: string): Promise<T | null> {
+		return await invoke(computeCommandName("get"), {
+			path: this.path,
+			key
+		})
+	}
+
+	/**
+	 * Returns `true` if the given `key` exists in the store.
+	 *
+	 * @param key
+	 * @returns
+	 */
+	async has(key: string): Promise<boolean> {
+		return await invoke(computeCommandName("has"), {
+			path: this.path,
+			key
+		})
+	}
+
+	/**
+	 * Removes a key-value pair from the store.
+	 *
+	 * @param key
+	 * @returns
+	 */
+	async delete(key: string): Promise<boolean> {
+		return await invoke(computeCommandName("delete"), {
+			path: this.path,
+			key
+		})
+	}
+
+	/**
+	 * Clears the store, removing all key-value pairs.
+	 *
+	 * Note: To clear the storage and reset it to it's `default` value, use `reset` instead.
+	 * @returns
+	 */
+	async clear(): Promise<void> {
+		await invoke(computeCommandName("clear"), {
+			path: this.path
+		})
+	}
+
+	/**
+	 * Resets the store to it's `default` value.
+	 *
+	 * If no default value has been set, this method behaves identical to `clear`.
+	 * @returns
+	 */
+	async reset(): Promise<void> {
+		await invoke(computeCommandName("reset"), {
+			path: this.path
+		})
+	}
+
+	/**
+	 * Returns a list of all key in the store.
+	 *
+	 * @returns
+	 */
+	async keys(): Promise<string[]> {
+		return await invoke(computeCommandName("keys"), {
+			path: this.path
+		})
+	}
+
+	/**
+	 * Returns a list of all values in the store.
+	 *
+	 * @returns
+	 */
+	async values<T>(): Promise<T[]> {
+		return await invoke(computeCommandName("values"), {
+			path: this.path
+		})
+	}
+
+	/**
+	 * Returns a list of all entries in the store.
+	 *
+	 * @returns
+	 */
+	async entries<T>(): Promise<Array<[key: string, value: T]>> {
+		return await invoke(computeCommandName("entries"), {
+			path: this.path
+		})
+	}
+
+	/**
+	 * Returns the number of key-value pairs in the store.
+	 *
+	 * @returns
+	 */
+	async length(): Promise<number> {
+		return await invoke(computeCommandName("length"), {
+			path: this.path
+		})
+	}
+
+	/**
+	 * Attempts to load the on-disk state at the stores `path` into memory.
+	 *
+	 * This method is useful if the on-disk state was edited by the user and you want to synchronize the changes.
+	 *
+	 * Note: This method does not emit change events.
+	 * @returns
+	 */
+	async load(): Promise<void> {
+		await invoke(computeCommandName("load"), {
+			path: this.path
+		})
+	}
+
+	/**
+	 * Saves the store to disk at the stores `path`.
+	 *
+	 * As the store is only persisted to disk before the apps exit, changes might be lost in a crash.
+	 * This method lets you persist the store to disk whenever you deem necessary.
+	 * @returns
+	 */
+	async save(): Promise<void> {
+		await invoke(computeCommandName("save"), {
+			path: this.path
+		})
+	}
+
+	/**
+	 * Listen to changes on a store key.
+	 * @param key
+	 * @param cb
+	 * @returns A promise resolving to a function to unlisten to the event.
+	 */
+	async onKeyChange<T>(key: string, cb: (value: T | null) => void): Promise<UnlistenFn> {
+		return await listen<ChangePayload<T>>("store://change", (event) => {
+			if (event.payload.path === this.path && event.payload.key === key) {
+				cb(event.payload.value)
+			}
+		})
+	}
+
+	/**
+	 * Listen to changes on the store.
+	 * @param cb
+	 * @returns A promise resolving to a function to unlisten to the event.
+	 */
+	async onChange<T>(cb: (key: string, value: T | null) => void): Promise<UnlistenFn> {
+		return await listen<ChangePayload<T>>("store://change", (event) => {
+			if (event.payload.path === this.path) {
+				cb(event.payload.key, event.payload.value)
+			}
+		})
+	}
+}
--- a/packages/api/src/commands/system.ts
+++ b/packages/api/src/commands/system.ts
@ -0,0 +1,312 @@
+import { invoke } from "@tauri-apps/api/core"
+import { platform } from "@tauri-apps/plugin-os"
+import { parse } from "valibot"
+import { AppInfo, IconEnum, SysCommand } from "../models"
+import { generateJarvisPluginCommand } from "./common"
+
+export function openTrash(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("open_trash"))
+}
+
+export function emptyTrash(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("empty_trash"))
+}
+
+export function shutdown(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("shutdown"))
+}
+
+export function reboot(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("reboot"))
+}
+
+export function sleep(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("sleep"))
+}
+
+export function toggleSystemAppearance(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("toggle_system_appearance"))
+}
+
+export function showDesktop(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("show_desktop"))
+}
+
+export function quitAllApps(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("quit_app_apps"))
+}
+
+export function sleepDisplays(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("sleep_displays"))
+}
+
+export function setVolume(percentage: number): Promise<void> {
+	return invoke(generateJarvisPluginCommand("set_volume"), { percentage })
+}
+
+export function setVolumeTo0(): Promise<void> {
+	return setVolume(0)
+}
+
+export function setVolumeTo25(): Promise<void> {
+	return setVolume(25)
+}
+
+export function setVolumeTo50(): Promise<void> {
+	return setVolume(50)
+}
+
+export function setVolumeTo75(): Promise<void> {
+	return setVolume(75)
+}
+
+export function setVolumeTo100(): Promise<void> {
+	return setVolume(100)
+}
+
+export function turnVolumeUp(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("turn_volume_up"))
+}
+
+export function turnVolumeDown(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("turn_volume_down"))
+}
+
+export function toggleStageManager(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("toggle_stage_manager"))
+}
+
+export function toggleBluetooth(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("toggle_bluetooth"))
+}
+
+export function toggleHiddenFiles(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("toggle_hidden_files"))
+}
+
+export function ejectAllDisks(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("eject_all_disks"))
+}
+
+export function logoutUser(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("logout_user"))
+}
+
+export function toggleMute(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("toggle_mute"))
+}
+
+export function mute(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("mute"))
+}
+
+export function unmute(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("unmute"))
+}
+
+export function getFrontmostApp(): Promise<AppInfo> {
+	return invoke(generateJarvisPluginCommand("get_frontmost_app")).then((app) => parse(AppInfo, app))
+}
+
+export function hideAllAppsExceptFrontmost(): Promise<void> {
+	return invoke(generateJarvisPluginCommand("hide_all_apps_except_frontmost"))
+}
+
+export function getSelectedFilesInFileExplorer(): Promise<string[]> {
+	return invoke(generateJarvisPluginCommand("get_selected_files_in_file_explorer"))
+}
+
+export const rawSystemCommands = [
+	{
+		name: "Open Trash",
+		icon: "uil:trash",
+		confirmRequired: false,
+		function: openTrash,
+		platforms: ["macos", "linux", "windows"]
+	},
+	{
+		name: "Empty Trash",
+		icon: "uil:trash",
+		confirmRequired: true,
+		function: emptyTrash,
+		platforms: ["macos", "linux", "windows"]
+	},
+	{
+		name: "Shutdown",
+		icon: "mdi:shutdown",
+		confirmRequired: true,
+		function: shutdown,
+		platforms: ["macos", "linux", "windows"]
+	},
+	{
+		name: "Reboot",
+		icon: "mdi:restart",
+		confirmRequired: true,
+		function: reboot,
+		platforms: ["macos", "linux", "windows"]
+	},
+	{
+		name: "Sleep",
+		icon: "carbon:asleep",
+		confirmRequired: false,
+		function: sleep,
+		platforms: ["macos", "linux", "windows"]
+	},
+	{
+		name: "Toggle System Appearance",
+		icon: "line-md:light-dark",
+		confirmRequired: false,
+		function: toggleSystemAppearance,
+		platforms: ["macos"]
+	},
+	{
+		name: "Show Desktop",
+		icon: "bi:window-desktop",
+		confirmRequired: false,
+		function: showDesktop,
+		platforms: ["macos"]
+	},
+	{
+		name: "Quit App",
+		icon: "charm:cross",
+		confirmRequired: false,
+		function: quitAllApps,
+		platforms: []
+		// platforms: ["macos"]
+	},
+	{
+		name: "Sleep Displays",
+		icon: "solar:display-broken",
+		confirmRequired: false,
+		function: sleepDisplays,
+		platforms: ["macos"]
+	},
+	{
+		name: "Set Volume to 0%",
+		icon: "flowbite:volume-mute-outline",
+		confirmRequired: false,
+		function: setVolumeTo0,
+		platforms: ["macos", "linux", "windows"]
+	},
+	{
+		name: "Set Volume to 25%",
+		icon: "flowbite:volume-down-solid",
+		confirmRequired: false,
+		function: setVolumeTo25,
+		platforms: ["macos", "linux", "windows"]
+	},
+	{
+		name: "Set Volume to 50%",
+		icon: "flowbite:volume-down-solid",
+		confirmRequired: false,
+		function: setVolumeTo50,
+		platforms: ["macos", "linux", "windows"]
+	},
+	{
+		name: "Set Volume to 75%",
+		icon: "flowbite:volume-down-solid",
+		confirmRequired: false,
+		function: setVolumeTo75,
+		platforms: ["macos", "linux", "windows"]
+	},
+	{
+		name: "Set Volume to 100%",
+		icon: "flowbite:volume-up-solid",
+		confirmRequired: false,
+		function: setVolumeTo100,
+		platforms: ["macos", "linux", "windows"]
+	},
+	{
+		name: "Turn Volume Up",
+		icon: "flowbite:volume-down-solid",
+		confirmRequired: false,
+		function: turnVolumeUp,
+		platforms: ["macos", "linux", "windows"]
+	},
+	{
+		name: "Turn Volume Down",
+		icon: "flowbite:volume-down-outline",
+		confirmRequired: false,
+		function: turnVolumeDown,
+		platforms: ["macos", "linux", "windows"]
+	},
+	{
+		name: "Toggle Mute",
+		icon: "flowbite:volume-down-outline",
+		confirmRequired: false,
+		function: toggleMute,
+		platforms: ["macos", "linux", "windows"]
+	},
+	{
+		name: "Mute",
+		icon: "flowbite:volume-mute-solid",
+		confirmRequired: false,
+		function: mute,
+		platforms: ["macos", "linux"]
+	},
+	{
+		name: "Unmute",
+		icon: "flowbite:volume-mute-solid",
+		confirmRequired: false,
+		function: unmute,
+		platforms: ["macos", "linux"]
+	},
+	{
+		name: "Toggle Stage Manager",
+		icon: "material-symbols:dashboard",
+		confirmRequired: false,
+		function: toggleStageManager,
+		platforms: []
+	},
+	{
+		name: "Toggle Bluetooth",
+		icon: "material-symbols:bluetooth",
+		confirmRequired: false,
+		function: toggleBluetooth,
+		platforms: []
+	},
+	{
+		name: "Toggle Hidden Files",
+		icon: "mdi:hide",
+		confirmRequired: false,
+		function: toggleHiddenFiles,
+		platforms: []
+	},
+	{
+		name: "Eject All Disks",
+		icon: "ph:eject-fill",
+		confirmRequired: true,
+		function: ejectAllDisks,
+		platforms: ["macos"]
+	},
+	{
+		name: "Log Out User",
+		icon: "ic:baseline-logout",
+		confirmRequired: false,
+		function: logoutUser,
+		platforms: ["macos", "linux", "windows"]
+	},
+	{
+		name: "Hide All Apps Except Frontmost",
+		icon: "mdi:hide",
+		confirmRequired: false,
+		function: hideAllAppsExceptFrontmost,
+		platforms: []
+	}
+]
+
+export async function getSystemCommands(): Promise<SysCommand[]> {
+	return rawSystemCommands
+		.filter(async (cmd) => cmd.platforms.includes(platform())) // Filter out system commands that are not supported on the current platform
+		.map((cmd) => ({
+			name: cmd.name,
+			value: "system-cmd" + cmd.name.split(" ").join("-").toLowerCase(),
+			icon: {
+				value: cmd.icon,
+				type: IconEnum.Iconify
+			},
+			keywords: cmd.name.split(" "),
+			function: cmd.function,
+			confirmRequired: cmd.confirmRequired
+		}))
+}
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`import { derived, fromStore, get, readable, readonly, toStore, writable } from "svelte/store"`
				`@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>