diff --git a/.gitignore b/.gitignore
index aef331fe..e68f8292 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,6 +36,7 @@ logs
 vease-back*
 vease-viewer*
 VTK.txt
+/data
 
 # Playwright
 node_modules/
diff --git a/app/components/CreateTools.vue b/app/components/CreateTools.vue
index 45850255..869e0b4a 100644
--- a/app/components/CreateTools.vue
+++ b/app/components/CreateTools.vue
@@ -1,15 +1,24 @@
 <template>
-  <v-card v-if="!selectedTool" :width="500" flat>
-    <v-card-title
-      class="text-h4 text-primary pa-4 font-weight-bold d-flex align-center"
-    >
-      <v-icon icon="mdi-creation" class="mr-3"></v-icon>
-      Create New Object
-    </v-card-title>
-    <v-card-subtitle class="ma-0 text-medium">
-      Choose a drawing tool to get started.
-    </v-card-subtitle>
-    <v-card-text class="pt-6">
+  <v-card
+    v-if="!selectedTool"
+    :width="500"
+    flat
+    class="d-flex flex-column"
+    style="height: 100%"
+  >
+    <div class="flex-shrink-0">
+      <v-card-title
+        class="text-h4 text-primary pa-4 font-weight-bold d-flex align-center"
+      >
+        <v-icon icon="mdi-creation" class="mr-3"></v-icon>
+        Create New Object
+      </v-card-title>
+      <v-card-subtitle class="ma-0 text-medium pb-4">
+        Choose a drawing tool to get started.
+      </v-card-subtitle>
+    </div>
+
+    <v-card-text class="pt-4 pb-8 flex-1-1 overflow-y-auto">
       <v-row>
         <v-col
           v-for="tool in UIStore.activeTools"
@@ -71,11 +80,13 @@
       </v-row>
     </v-card-text>
   </v-card>
-  <v-sheet v-else class="tool-component-wrapper v-sheet-tool-wrapper">
+
+  <v-sheet v-else class="position-relative tool-component-wrapper">
     <v-btn
       icon
       variant="text"
-      class="back-button ma-2 v-sheet-back-button"
+      class="ma-2 position-sticky bg-white"
+      style="top: 0; z-index: 10"
       @click="handleBack"
     >
       <v-icon>mdi-arrow-left</v-icon>
@@ -127,31 +138,40 @@
   .custom-tool-card {
     transition: all 0.2s ease-in-out;
   }
+
   .custom-tool-card:hover {
     transform: scale(1.03);
   }
 
-  .cursor-pointer {
-    cursor: pointer;
-  }
   .svg-white-filter {
     filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg)
       brightness(100%) contrast(100%);
   }
+
   .tool-title {
     min-height: 2em;
     line-height: 1.2;
   }
 
-  .v-sheet-tool-wrapper {
-    position: relative;
+  .tool-component-wrapper {
     min-height: 400px;
   }
 
-  .v-sheet-back-button {
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    background-color: white;
+  .overflow-y-auto::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar-thumb:hover {
+    background: #555;
   }
 </style>
diff --git a/app/components/Extension.vue b/app/components/Extension.vue
new file mode 100644
index 00000000..f5dd05dd
--- /dev/null
+++ b/app/components/Extension.vue
@@ -0,0 +1,669 @@
+<template>
+  <v-card flat rounded="xl" elevation="0" class="bg-surface">
+    <v-card-title
+      class="text-h4 text-primary pa-6 font-weight-bold d-flex align-center"
+    >
+      <v-icon icon="mdi-puzzle" class="mr-3"></v-icon>
+      Extensions
+    </v-card-title>
+
+    <v-card-subtitle class="px-6 pb-4 text-medium-emphasis">
+      Enhance your application with additional features and tools.
+    </v-card-subtitle>
+
+    <v-card-text class="px-6 pb-6">
+      <v-hover v-slot="{ isHovering, props }">
+        <v-card
+          v-bind="props"
+          class="text-center cursor-pointer"
+          :class="{
+            'elevation-8': isHovering || isDragging,
+            'elevation-2': !(isHovering || isDragging),
+          }"
+          :style="{
+            position: 'relative',
+            overflow: 'hidden',
+            transition: 'all 0.3s ease',
+            background: isHovering || isDragging ? '#f5f9ff' : '#fafafa',
+            border: `2px dashed ${isHovering || isDragging ? 'rgb(var(--v-theme-primary))' : '#e0e0e0'}`,
+            transform: isHovering || isDragging ? 'translateY(-2px)' : 'none',
+            pointerEvents: loading ? 'none' : 'auto',
+            opacity: loading ? 0.6 : 1,
+          }"
+          rounded="xl"
+          @click="triggerFileDialog"
+          @dragover.prevent="isDragging = true"
+          @dragleave.prevent="isDragging = false"
+          @drop.prevent="handleDrop"
+        >
+          <v-card-text class="pa-8">
+            <v-sheet
+              class="mx-auto mb-6 d-flex align-center justify-center"
+              :color="isHovering || isDragging ? 'primary' : 'grey-lighten-2'"
+              :style="{
+                width: '100px',
+                height: '100px',
+                transition: 'all 0.3s ease',
+              }"
+              rounded="circle"
+              :elevation="isHovering || isDragging ? 4 : 0"
+            >
+              <v-icon
+                :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
+                size="56"
+                :color="isHovering || isDragging ? 'white' : 'grey-darken-1'"
+                :class="{ rotating: loading }"
+              />
+            </v-sheet>
+
+            <div
+              class="text-h6 font-weight-semibold mb-2"
+              :class="
+                isHovering || isDragging ? 'text-primary' : 'text-grey-darken-2'
+              "
+              style="transition: color 0.3s ease"
+            >
+              {{
+                loading
+                  ? "Loading Extension..."
+                  : isDragging
+                    ? "Drop to Install"
+                    : "Click or Drag & Drop Extension"
+              }}
+            </div>
+
+            <div class="text-body-2 text-grey-darken-1">
+              (.vext extension files)
+            </div>
+          </v-card-text>
+
+          <input
+            ref="hiddenFileInput"
+            type="file"
+            accept=".vext"
+            multiple
+            class="file-input-hidden"
+            @change="handleFileChange"
+          />
+        </v-card>
+      </v-hover>
+
+      <v-slide-y-transition>
+        <v-alert
+          v-if="successMessage"
+          type="success"
+          rounded="xl"
+          class="mt-4"
+          closable
+          @click:close="successMessage = ''"
+        >
+          {{ successMessage }}
+        </v-alert>
+      </v-slide-y-transition>
+
+      <v-slide-y-transition>
+        <v-alert
+          v-if="errorMessage"
+          type="info"
+          rounded="xl"
+          class="mt-4"
+          closable
+          @click:close="errorMessage = ''"
+        >
+          {{ errorMessage }}
+        </v-alert>
+      </v-slide-y-transition>
+
+      <v-fade-transition>
+        <div v-if="loadedExtensions.length" class="mt-8">
+          <div
+            class="d-flex align-center mb-4 text-h6 font-weight-semibold text-primary"
+          >
+            <v-icon icon="mdi-puzzle-check" class="mr-2" />
+            Active Extensions
+            <v-chip
+              size="small"
+              class="ml-3"
+              color="primary"
+              variant="flat"
+              elevation="2"
+            >
+              {{ loadedExtensions.length }}
+            </v-chip>
+          </div>
+
+          <v-row>
+            <v-col
+              v-for="(extension, index) in loadedExtensions"
+              :key="index"
+              cols="12"
+            >
+              <v-scale-transition :delay="index * 50">
+                <v-expansion-panels variant="accordion" class="bg-transparent">
+                  <v-expansion-panel
+                    rounded="xl"
+                    border
+                    elevation="0"
+                    :style="{
+                      transition: 'all 0.3s ease',
+                      opacity: extension.enabled ? 1 : 0.6,
+                    }"
+                  >
+                    <v-expansion-panel-title class="pa-5">
+                      <template v-slot:default="{ expanded }">
+                        <v-hover v-slot="{ isHovering, props: hoverProps }">
+                          <div
+                            v-bind="hoverProps"
+                            class="d-flex align-center ga-4"
+                            :style="{ width: '100%' }"
+                          >
+                            <v-sheet
+                              class="d-flex align-center justify-center flex-shrink-0"
+                              :color="
+                                extension.enabled
+                                  ? isHovering || expanded
+                                    ? 'primary'
+                                    : 'grey-lighten-3'
+                                  : 'grey-lighten-2'
+                              "
+                              :style="{
+                                width: '56px',
+                                height: '56px',
+                                transition: 'all 0.3s ease',
+                              }"
+                              rounded="circle"
+                              :elevation="isHovering || expanded ? 4 : 0"
+                            >
+                              <v-icon
+                                icon="mdi-puzzle"
+                                size="32"
+                                :color="
+                                  extension.enabled
+                                    ? isHovering || expanded
+                                      ? 'white'
+                                      : 'grey-darken-1'
+                                    : 'grey'
+                                "
+                              />
+                            </v-sheet>
+
+                            <div class="flex-grow-1" style="min-width: 0">
+                              <div
+                                class="text-body-1 font-weight-semibold mb-1"
+                                :class="
+                                  extension.enabled
+                                    ? 'text-grey-darken-4'
+                                    : 'text-grey'
+                                "
+                              >
+                                {{ getExtensionName(extension) }}
+                              </div>
+
+                              <div
+                                class="text-body-2 mb-2"
+                                :class="
+                                  extension.enabled
+                                    ? 'text-grey-darken-1'
+                                    : 'text-grey'
+                                "
+                                style="
+                                  line-height: 1.5;
+                                  white-space: normal;
+                                  word-wrap: break-word;
+                                "
+                              >
+                                {{ getExtensionDescription(extension) }}
+                              </div>
+
+                              <div class="d-flex align-center ga-2 flex-wrap">
+                                <v-chip
+                                  v-if="getExtensionVersion(extension)"
+                                  size="x-small"
+                                  variant="tonal"
+                                  color="primary"
+                                >
+                                  v{{ getExtensionVersion(extension) }}
+                                </v-chip>
+
+                                <v-chip
+                                  size="x-small"
+                                  :color="
+                                    extension.enabled ? 'primary' : 'grey'
+                                  "
+                                  variant="flat"
+                                  elevation="1"
+                                >
+                                  <v-icon start size="12">mdi-tools</v-icon>
+                                  {{ getExtensionToolsCount(extension) }}
+                                </v-chip>
+
+                                <v-spacer />
+
+                                <span
+                                  class="text-caption text-grey"
+                                  style="white-space: nowrap"
+                                >
+                                  {{ formatDate(extension.loadedAt) }}
+                                </span>
+                              </div>
+                            </div>
+
+                            <div
+                              class="d-flex align-center ga-1 flex-shrink-0 mr-n2"
+                            >
+                              <v-tooltip location="bottom">
+                                <template #activator="{ props: tooltipProps }">
+                                  <v-switch
+                                    v-bind="tooltipProps"
+                                    :model-value="extension.enabled"
+                                    color="success"
+                                    density="compact"
+                                    hide-details
+                                    inset
+                                    @click.stop
+                                    @update:model-value="
+                                      toggleExtensionState(extension)
+                                    "
+                                  />
+                                </template>
+                                <span>{{
+                                  extension.enabled
+                                    ? "Disable extension"
+                                    : "Enable extension"
+                                }}</span>
+                              </v-tooltip>
+
+                              <v-tooltip location="bottom">
+                                <template #activator="{ props: tooltipProps }">
+                                  <v-btn
+                                    v-bind="tooltipProps"
+                                    icon="mdi-delete"
+                                    size="small"
+                                    variant="text"
+                                    color="error"
+                                    @click.stop="confirmRemove(extension)"
+                                  />
+                                </template>
+                                <span>Remove extension</span>
+                              </v-tooltip>
+                            </div>
+                          </div>
+                        </v-hover>
+                      </template>
+                    </v-expansion-panel-title>
+
+                    <v-expansion-panel-text class="px-6 pb-6">
+                      <v-divider class="mb-4" />
+
+                      <div
+                        class="d-flex align-center justify-space-between mb-4"
+                      >
+                        <div
+                          class="d-flex align-center text-h6 font-weight-semibold text-grey-darken-3"
+                        >
+                          <v-icon icon="mdi-tools" size="22" class="mr-2" />
+                          Tools
+                        </div>
+                        <v-chip
+                          size="small"
+                          :color="extension.enabled ? 'primary' : 'grey'"
+                          variant="tonal"
+                        >
+                          {{ getExtensionToolsCount(extension) }}
+                          {{
+                            getExtensionToolsCount(extension) === 1
+                              ? "tool"
+                              : "tools"
+                          }}
+                        </v-chip>
+                      </div>
+
+                      <div
+                        v-if="getExtensionTools(extension).length"
+                        class="d-flex flex-column ga-3"
+                      >
+                        <v-fade-transition group>
+                          <v-hover
+                            v-for="(tool, toolIndex) in getExtensionTools(
+                              extension,
+                            )"
+                            :key="tool.id"
+                            v-slot="{ isHovering, props: toolProps }"
+                          >
+                            <v-card
+                              v-bind="toolProps"
+                              class="d-flex align-start ga-3 pa-4"
+                              :style="{
+                                transitionDelay: `${toolIndex * 30}ms`,
+                                transition: 'all 0.2s ease',
+                                background: extension.enabled
+                                  ? isHovering
+                                    ? '#f5f9ff'
+                                    : '#fafafa'
+                                  : '#f5f5f5',
+                                borderColor: extension.enabled
+                                  ? isHovering
+                                    ? 'rgba(33, 150, 243, 0.3)'
+                                    : '#e0e0e0'
+                                  : '#e0e0e0',
+                                opacity: extension.enabled ? 1 : 0.7,
+                              }"
+                              border
+                              rounded="lg"
+                              :elevation="
+                                isHovering && extension.enabled ? 2 : 0
+                              "
+                            >
+                              <v-sheet
+                                class="d-flex align-center justify-center flex-shrink-0"
+                                :color="
+                                  extension.enabled
+                                    ? isHovering
+                                      ? 'primary'
+                                      : 'grey-lighten-3'
+                                    : 'grey-lighten-2'
+                                "
+                                :style="{
+                                  width: '48px',
+                                  height: '48px',
+                                  transition: 'background 0.2s ease',
+                                }"
+                                rounded="lg"
+                              >
+                                <v-icon
+                                  v-if="tool.iconType === 'mdi'"
+                                  :icon="tool.iconSource"
+                                  size="24"
+                                  :color="
+                                    extension.enabled
+                                      ? isHovering
+                                        ? 'white'
+                                        : 'primary'
+                                      : 'grey'
+                                  "
+                                  :style="{ transition: 'color 0.2s ease' }"
+                                />
+                                <v-img
+                                  v-else-if="tool.iconType === 'svg'"
+                                  :src="tool.iconSource"
+                                  width="24"
+                                  height="24"
+                                  contain
+                                  :style="{
+                                    transition: 'filter 0.2s ease',
+                                    filter: extension.enabled
+                                      ? isHovering
+                                        ? 'brightness(0) invert(1)'
+                                        : 'none'
+                                      : 'grayscale(100%) opacity(0.5)',
+                                  }"
+                                />
+                              </v-sheet>
+
+                              <div class="flex-grow-1" style="min-width: 0">
+                                <div class="d-flex align-center ga-2 mb-1">
+                                  <span
+                                    class="text-body-1 font-weight-semibold"
+                                    :class="
+                                      extension.enabled
+                                        ? 'text-grey-darken-4'
+                                        : 'text-grey-darken-1'
+                                    "
+                                    style="line-height: 1.4"
+                                  >
+                                    {{ tool.title }}
+                                  </span>
+                                  <v-chip
+                                    v-if="!extension.enabled"
+                                    size="x-small"
+                                    color="grey"
+                                    variant="flat"
+                                  >
+                                    Disabled
+                                  </v-chip>
+                                </div>
+
+                                <div
+                                  class="text-body-2"
+                                  :class="
+                                    extension.enabled
+                                      ? 'text-grey-darken-1'
+                                      : 'text-grey'
+                                  "
+                                  style="line-height: 1.5"
+                                >
+                                  {{ tool.description }}
+                                </div>
+                              </div>
+                            </v-card>
+                          </v-hover>
+                        </v-fade-transition>
+                      </div>
+
+                      <v-alert
+                        v-else
+                        type="info"
+                        variant="tonal"
+                        density="comfortable"
+                        rounded="lg"
+                        class="mt-2"
+                      >
+                        This extension doesn't register any tools
+                      </v-alert>
+                    </v-expansion-panel-text>
+                  </v-expansion-panel>
+                </v-expansion-panels>
+              </v-scale-transition>
+            </v-col>
+          </v-row>
+        </div>
+      </v-fade-transition>
+
+      <v-fade-transition>
+        <v-card
+          v-if="!loadedExtensions.length"
+          rounded="xl"
+          variant="outlined"
+          class="mt-8 bg-grey-lighten-4"
+          :style="{ border: '2px dashed #e0e0e0' }"
+        >
+          <v-card-text class="text-center pa-8">
+            <v-sheet
+              class="mx-auto mb-4 d-flex align-center justify-center"
+              color="grey-lighten-3"
+              :style="{
+                width: '100px',
+                height: '100px',
+              }"
+              rounded="circle"
+            >
+              <v-icon
+                icon="mdi-puzzle-outline"
+                size="64"
+                color="grey-lighten-1"
+              />
+            </v-sheet>
+            <div
+              class="text-body-1 font-weight-semibold text-grey-darken-2 mb-2"
+            >
+              No extensions loaded yet
+            </div>
+            <div class="text-body-2 text-grey-darken-1">
+              Upload an extension file to get started
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-fade-transition>
+    </v-card-text>
+
+    <v-dialog v-model="showRemoveDialog" max-width="500" style="z-index: 10000">
+      <v-card rounded="xl" elevation="8">
+        <v-card-title
+          class="d-flex align-center text-h6 font-weight-semibold text-warning pa-6 pb-4"
+        >
+          <v-icon
+            icon="mdi-alert-circle"
+            size="28"
+            class="mr-3"
+            color="warning"
+          />
+          Remove Extension?
+        </v-card-title>
+
+        <v-card-text class="px-6 pb-6 text-body-1">
+          <div class="text-medium-emphasis mb-3">
+            Are you sure you want to remove
+            <span class="font-weight-bold text-high-emphasis">{{
+              getExtensionName(extensionToRemove)
+            }}</span
+            >?
+          </div>
+          <v-alert
+            type="info"
+            variant="tonal"
+            density="compact"
+            rounded="lg"
+            class="text-caption"
+          >
+            <template #prepend>
+              <v-icon size="18">mdi-information</v-icon>
+            </template>
+            This will remove all tools registered by this extension.
+          </v-alert>
+        </v-card-text>
+
+        <v-divider />
+
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn variant="text" size="large" @click="showRemoveDialog = false">
+            Cancel
+          </v-btn>
+          <v-btn
+            color="error"
+            variant="elevated"
+            size="large"
+            @click="removeExtension"
+          >
+            <v-icon start>mdi-delete</v-icon>
+            Remove
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-card>
+</template>
+
+<script setup>
+  import { formatRelativeTime } from "@/utils/formatDate.js"
+  import { useExtensionMetadata } from "@/composables/useExtensionMetadata.js"
+
+  const UIStore = useUIStore()
+  const extensionsStore = useExtensionsStore()
+  const hiddenFileInput = ref(null)
+  const loading = ref(false)
+  const isDragging = ref(false)
+  const errorMessage = ref("")
+  const successMessage = ref("")
+  const showRemoveDialog = ref(false)
+  const extensionToRemove = ref(null)
+
+  const loadedExtensions = computed(() => extensionsStore.getLoadedExtensions())
+
+  const {
+    getExtensionName,
+    getExtensionDescription,
+    getExtensionVersion,
+    getExtensionTools,
+    getExtensionToolsCount,
+  } = useExtensionMetadata()
+
+  const triggerFileDialog = () => hiddenFileInput.value?.click()
+
+  const handleDrop = async (event) => {
+    isDragging.value = false
+    const droppedFiles = [...event.dataTransfer.files].filter((f) =>
+      f.name.endsWith(".vext"),
+    )
+    if (!droppedFiles.length) {
+      errorMessage.value = "Please drop valid extension files (.vext)"
+      return
+    }
+    await processFiles(droppedFiles)
+  }
+
+  const handleFileChange = async (event) => {
+    const newFiles = event.target?.files
+    if (!newFiles?.length) return
+    await processFiles([...newFiles])
+    event.target.value = ""
+  }
+
+  const processFiles = async (filesToProcess) => {
+    errorMessage.value = ""
+    successMessage.value = ""
+    loading.value = true
+
+    let successCount = 0
+    const extensionManager = useExtensionManager()
+
+    try {
+      for (const file of filesToProcess) {
+        try {
+          await extensionManager.importExtensionFile(file)
+          successCount++
+        } catch (error) {
+          console.error("[Extension.vue] Failed to import extension:", error)
+          errorMessage.value = `${error.message}`
+        }
+      }
+      if (successCount)
+        successMessage.value = `Successfully loaded ${successCount} extension${successCount > 1 ? "s" : ""} !`
+    } finally {
+      loading.value = false
+      setTimeout(() => (successMessage.value = ""), 4000)
+    }
+  }
+
+  const toggleExtensionState = (extension) => {
+    extensionsStore.toggleExtension(extension.id)
+  }
+
+  const formatDate = (dateString) => formatRelativeTime(dateString)
+
+  const confirmRemove = (extension) => {
+    extensionToRemove.value = extension
+    showRemoveDialog.value = true
+  }
+
+  const removeExtension = () => {
+    if (extensionToRemove.value) {
+      extensionsStore.unloadExtension(extensionToRemove.value.id)
+      showRemoveDialog.value = false
+      extensionToRemove.value = null
+    }
+  }
+</script>
+
+<style scoped>
+  .rotating {
+    animation: rotate 1s linear infinite;
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .file-input-hidden {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+</style>
diff --git a/app/components/Layout/SideBar.vue b/app/components/Layout/SideBar.vue
index f2d7ae5f..33f0e111 100644
--- a/app/components/Layout/SideBar.vue
+++ b/app/components/Layout/SideBar.vue
@@ -86,18 +86,28 @@
 
 <script setup>
   import { useProjectManager } from "@ogw_front/composables/project_manager"
+  const UIStore = useUIStore()
 
   const drawer = ref(true)
   const newproject = ref(false)
   const openproject = ref(false)
   const importFileInput = templateRef("importFileInput")
 
+  const toggleExtensions = () => {
+    UIStore.setShowExtensions(!UIStore.showExtensions)
+  }
+
   const items = ref([
     {
       title: "Home",
       icon: "mdi-home",
       click: () => navigateTo("/"),
     },
+    {
+      title: "Extensions",
+      icon: "mdi-puzzle",
+      click: () => toggleExtensions(),
+    },
     // {
     //   title: "New Project",
     //   icon: "mdi-plus",
diff --git a/app/components/tools/CreateAOI.vue b/app/components/tools/CreateAOI.vue
deleted file mode 100644
index b5337134..00000000
--- a/app/components/tools/CreateAOI.vue
+++ /dev/null
@@ -1,340 +0,0 @@
-<template>
-  <v-card :width="500" elevation="0" class="pa-4">
-    <v-card-title
-      class="pb-2 text-h6 text-primary font-weight-bold d-flex align-center"
-    >
-      <v-img
-        src="@/assets/img/aoi.svg"
-        alt="AOI icon"
-        class="mr-3"
-        width="48"
-        height="48"
-      />
-      Create Area of Interest (Bounding Box)
-    </v-card-title>
-
-    <v-card-subtitle class="ma-0 text-medium-emphasis text-wrap">
-      Enter the name and Min/Max coordinates to define your rectangular AOI.
-    </v-card-subtitle>
-
-    <v-card-text>
-      <v-form ref="form">
-        <v-text-field
-          label="AOI Name"
-          v-model="name"
-          prepend-inner-icon="mdi-format-title"
-          type="text"
-          variant="outlined"
-          color="primary"
-          :rules="[(v) => !!v || 'Name is required']"
-          required
-          class="mb-4"
-        />
-
-        <div class="mb-4">
-          <p class="text-subtitle-1 font-weight-medium mb-2">
-            Minimum Coordinates (Min X, Min Y)
-          </p>
-          <v-row dense>
-            <v-col cols="6">
-              <v-text-field
-                label="Min X"
-                v-model="min_x"
-                prepend-inner-icon="mdi-axis-x-arrow"
-                type="text"
-                inputmode="decimal"
-                variant="outlined"
-                color="secondary"
-                density="comfortable"
-                :rules="[(v) => !!v || 'Min X is required']"
-                @paste="handlePasteAOI($event, 'min', 'x')"
-                @update:modelValue="(val) => sanitizeInputAOI(val, 'min_x')"
-              />
-            </v-col>
-            <v-col cols="6">
-              <v-text-field
-                label="Min Y"
-                v-model="min_y"
-                prepend-inner-icon="mdi-axis-y-arrow"
-                type="text"
-                inputmode="decimal"
-                variant="outlined"
-                color="secondary"
-                density="comfortable"
-                :rules="[(v) => !!v || 'Min Y is required']"
-                @paste="handlePasteAOI($event, 'min', 'y')"
-                @update:modelValue="(val) => sanitizeInputAOI(val, 'min_y')"
-              />
-            </v-col>
-          </v-row>
-        </div>
-
-        <div class="mb-4">
-          <p class="text-subtitle-1 font-weight-medium mb-2">
-            Maximum Coordinates (Max X, Max Y)
-          </p>
-          <v-row dense>
-            <v-col cols="6">
-              <v-text-field
-                label="Max X"
-                v-model="max_x"
-                prepend-inner-icon="mdi-axis-x-arrow"
-                type="text"
-                inputmode="decimal"
-                variant="outlined"
-                color="secondary"
-                density="comfortable"
-                :rules="[(v) => !!v || 'Max X is required']"
-                @paste="handlePasteAOI($event, 'max', 'x')"
-                @update:modelValue="(val) => sanitizeInputAOI(val, 'max_x')"
-              />
-            </v-col>
-            <v-col cols="6">
-              <v-text-field
-                label="Max Y"
-                v-model="max_y"
-                prepend-inner-icon="mdi-axis-y-arrow"
-                type="text"
-                inputmode="decimal"
-                variant="outlined"
-                color="secondary"
-                density="comfortable"
-                :rules="[(v) => !!v || 'Max Y is required']"
-                @paste="handlePasteAOI($event, 'max', 'y')"
-                @update:modelValue="(val) => sanitizeInputAOI(val, 'max_y')"
-              />
-            </v-col>
-          </v-row>
-        </div>
-      </v-form>
-    </v-card-text>
-
-    <v-card-actions class="px-4 pb-4">
-      <v-btn
-        variant="text"
-        color="grey-darken-1"
-        size="large"
-        @click="showCreateTools"
-        :disabled="loading"
-        class="text-none"
-      >
-        <v-icon start>mdi-close-circle-outline</v-icon>
-        Cancel
-      </v-btn>
-
-      <v-btn
-        color="primary"
-        size="large"
-        variant="flat"
-        :loading="loading"
-        :disabled="!isFormFilled"
-        @click="createAOI"
-        class="text-none ml-4"
-      >
-        <v-icon start class="ml-1">mdi-send</v-icon>
-        Create AOI
-        <template #loader>
-          <v-progress-circular
-            indeterminate
-            size="20"
-            color="white"
-            width="3"
-          />
-        </template>
-      </v-btn>
-    </v-card-actions>
-  </v-card>
-</template>
-
-<script setup>
-  import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
-  import { importItem } from "@ogw_front/utils/file_import_workflow.js"
-
-  const UIStore = useUIStore()
-  const hybridViewerStore = useHybridViewerStore()
-  const geodeStore = useGeodeStore()
-  const showCreateTools = () => {
-    UIStore.setShowCreateTools(true)
-  }
-
-  const name = ref("")
-  const min_x = ref("")
-  const min_y = ref("")
-  const max_x = ref("")
-  const max_y = ref("")
-  const z = ref("")
-  const loading = ref(false)
-
-  const isFormFilled = computed(() => {
-    const coordsFilled =
-      min_x.value !== "" &&
-      min_y.value !== "" &&
-      max_x.value !== "" &&
-      max_y.value !== ""
-    return name.value !== "" && coordsFilled
-  })
-
-  const closeDrawer = () => {
-    UIStore.setShowCreateAOI(false)
-  }
-
-  function visibleBoundingBox() {
-    if (!hybridViewerStore.genericRenderWindow.value)
-      return [-1, 1, -1, 1, -1, 1]
-    const renderer = hybridViewerStore.genericRenderWindow.value.getRenderer()
-    return renderer.computeVisiblePropBounds()
-  }
-
-  const initializeAOICoordinates = () => {
-    const bounds = visibleBoundingBox()
-    const boundsMinX = bounds[0]
-    const boundsMaxX = bounds[1]
-    const boundsMinY = bounds[2]
-    const boundsMaxY = bounds[3]
-
-    const extentX = boundsMaxX - boundsMinX
-    const extentY = boundsMaxY - boundsMinY
-
-    const paddingX = extentX * 0.1
-    const paddingY = extentY * 0.1
-
-    const newMinX = boundsMinX - paddingX
-    const newMaxX = boundsMaxX + paddingX
-    const newMinY = boundsMinY - paddingY
-    const newMaxY = boundsMaxY + paddingY
-
-    min_x.value = newMinX.toFixed(2)
-    max_x.value = newMaxX.toFixed(2)
-    min_y.value = newMinY.toFixed(2)
-    max_y.value = newMaxY.toFixed(2)
-    z.value = ((bounds[4] + bounds[5]) / 2).toFixed(2)
-  }
-
-  onMounted(() => {
-    initializeAOICoordinates()
-  })
-
-  watch(
-    () => UIStore.showCreateAOI,
-    (newVal) => {
-      if (newVal) {
-        initializeAOICoordinates()
-        name.value = ""
-      }
-    },
-  )
-
-  const sanitizeNumberString = (str) => {
-    if (str == null) return ""
-    let value = String(str)
-      .replace(/,/g, ".")
-      .replace(/[^0-9eE+\-.]/g, "")
-    if (/[eE]/.test(value)) {
-      const parts = value.split(/[eE]/)
-      if (parts.length > 2) {
-        value =
-          parts.slice(0, 2).join("e") +
-          parts
-            .slice(2)
-            .join("")
-            .replace(/[^0-9+\-.]/g, "")
-      }
-    }
-    return value
-  }
-
-  const handlePasteAOI = (event) => {
-    const pastedText =
-      (event && event.clipboardData && event.clipboardData.getData("text")) ||
-      ""
-
-    if (!pastedText) return
-
-    const coordinates = pastedText.match(/[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/g)
-    if (!coordinates || coordinates.length === 0) return
-
-    const sanitized = coordinates.map((c) => sanitizeNumberString(c))
-
-    if (sanitized.length >= 4) {
-      min_x.value = sanitized[0]
-      min_y.value = sanitized[1]
-      max_x.value = sanitized[2]
-      max_y.value = sanitized[3]
-      event.preventDefault()
-    } else if (sanitized.length >= 2) {
-      min_x.value = sanitized[0]
-      min_y.value = sanitized[1]
-      event.preventDefault()
-    }
-  }
-
-  const sanitizeInputAOI = (value, field) => {
-    const sanitizedValue = sanitizeNumberString(value)
-    if (field === "min_x") min_x.value = sanitizedValue
-    else if (field === "min_y") min_y.value = sanitizedValue
-    else if (field === "max_x") max_x.value = sanitizedValue
-    else if (field === "max_y") max_y.value = sanitizedValue
-    else if (field === "z") z.value = sanitizedValue
-  }
-
-  const safeParseFloat = (value) => {
-    const sanitizedValue = String(value).trim().replace(",", ".")
-    const result = parseFloat(sanitizedValue)
-    return isNaN(result) && sanitizedValue === "" ? NaN : result
-  }
-
-  const createAOI = async () => {
-    const min_x_val = safeParseFloat(min_x.value)
-    const min_y_val = safeParseFloat(min_y.value)
-    const max_x_val = safeParseFloat(max_x.value)
-    const max_y_val = safeParseFloat(max_y.value)
-    const z_val = safeParseFloat(z.value)
-
-    const hasNaN =
-      isNaN(min_x_val) ||
-      isNaN(min_y_val) ||
-      isNaN(max_x_val) ||
-      isNaN(max_y_val) ||
-      isNaN(z_val)
-
-    if (
-      hasNaN ||
-      min_x_val >= max_x_val ||
-      min_y_val >= max_y_val ||
-      !name.value
-    ) {
-      return
-    }
-
-    const aoiPoints = [
-      { x: min_x_val, y: min_y_val },
-      { x: max_x_val, y: min_y_val },
-      { x: max_x_val, y: max_y_val },
-      { x: min_x_val, y: max_y_val },
-    ]
-
-    const aoiData = {
-      name: name.value,
-      points: aoiPoints,
-      z: z_val,
-    }
-
-    const aoiSchema = back_schemas.opengeodeweb_back.create.create_aoi
-
-    loading.value = true
-    try {
-      const response = await geodeStore.request(aoiSchema, aoiData, {
-        response_function: async (response) => {
-          const dataToImport = {
-            ...response._data,
-          }
-          await importItem(dataToImport)
-          closeDrawer()
-        },
-      })
-    } catch (error) {
-    } finally {
-      loading.value = false
-    }
-  }
-</script>
diff --git a/app/components/tools/CreateVOI.vue b/app/components/tools/CreateVOI.vue
deleted file mode 100644
index 68d07287..00000000
--- a/app/components/tools/CreateVOI.vue
+++ /dev/null
@@ -1,322 +0,0 @@
-<template>
-  <v-card :width="500" elevation="0" class="pa-4">
-    <v-card-title
-      class="pb-2 text-h6 text-primary font-weight-bold d-flex align-center"
-    >
-      <v-img
-        src="../../assets/img/voi.svg"
-        alt="AOI icon"
-        class="mr-3"
-        width="48"
-        height="48"
-      />
-      Create Volume of Interest (Bounding Box)
-    </v-card-title>
-
-    <v-card-subtitle class="ma-0 text-medium-emphasis text-wrap">
-      Select an existing AOI and define Z min/max coordinates to create a 3D
-      volume.
-    </v-card-subtitle>
-
-    <v-card-text>
-      <v-form ref="form">
-        <v-text-field
-          label="VOI Name"
-          v-model="name"
-          prepend-inner-icon="mdi-format-title"
-          type="text"
-          variant="outlined"
-          color="primary"
-          :rules="[(v) => !!v || 'Name is required']"
-          required
-          class="mb-4"
-        />
-
-        <v-select
-          label="Select AOI"
-          v-model="selectedAOI"
-          :items="aoiList"
-          item-title="name"
-          item-value="id"
-          prepend-inner-icon="mdi-vector-square"
-          variant="outlined"
-          color="primary"
-          :rules="[(v) => !!v || 'AOI selection is required']"
-          required
-          class="mb-4"
-          no-data-text="No AOI available. Please create an AOI first."
-          @update:modelValue="onAOISelected"
-        >
-          <template #item="{ props, item }">
-            <v-list-item v-bind="props" :title="item.raw.name">
-              <template #prepend>
-                <v-img
-                  src="@/assets/img/aoi.svg"
-                  alt="AOI"
-                  width="24"
-                  height="24"
-                  class="mr-2"
-                />
-              </template>
-            </v-list-item>
-          </template>
-        </v-select>
-
-        <div class="mb-4">
-          <p class="text-subtitle-1 font-weight-medium mb-2">
-            Z Coordinates (Min / Max)
-          </p>
-          <v-row dense>
-            <v-col cols="6">
-              <v-text-field
-                label="Z Min"
-                v-model="z_min"
-                prepend-inner-icon="mdi-axis-z-arrow"
-                type="text"
-                inputmode="decimal"
-                variant="outlined"
-                color="secondary"
-                density="comfortable"
-                :rules="[
-                  (v) => !!v || 'Z Min is required',
-                  (v) =>
-                    !z_max ||
-                    parseFloat(v) < parseFloat(z_max) ||
-                    'Z Min must be less than Z Max',
-                ]"
-                @paste="handlePasteVOI($event, 'min')"
-                @update:modelValue="(val) => sanitizeInputVOI(val, 'z_min')"
-              />
-            </v-col>
-            <v-col cols="6">
-              <v-text-field
-                label="Z Max"
-                v-model="z_max"
-                prepend-inner-icon="mdi-axis-z-arrow"
-                type="text"
-                inputmode="decimal"
-                variant="outlined"
-                color="secondary"
-                density="comfortable"
-                :rules="[
-                  (v) => !!v || 'Z Max is required',
-                  (v) =>
-                    !z_min ||
-                    parseFloat(v) > parseFloat(z_min) ||
-                    'Z Max must be greater than Z Min',
-                ]"
-                @paste="handlePasteVOI($event, 'max')"
-                @update:modelValue="(val) => sanitizeInputVOI(val, 'z_max')"
-              />
-            </v-col>
-          </v-row>
-        </div>
-      </v-form>
-    </v-card-text>
-
-    <v-card-actions class="px-4 pb-4">
-      <v-btn
-        variant="text"
-        color="grey-darken-1"
-        size="large"
-        @click="openCreateTools"
-        :disabled="loading"
-        class="text-none"
-      >
-        <v-icon start>mdi-close-circle-outline</v-icon>
-        Cancel
-      </v-btn>
-
-      <v-btn
-        color="primary"
-        size="large"
-        variant="flat"
-        :loading="loading"
-        :disabled="!isFormFilled"
-        @click="createVOI"
-        class="text-none ml-4"
-      >
-        <v-icon start class="ml-1">mdi-send</v-icon>
-        Create VOI
-        <template #loader>
-          <v-progress-circular
-            indeterminate
-            size="20"
-            color="white"
-            width="3"
-          />
-        </template>
-      </v-btn>
-    </v-card-actions>
-  </v-card>
-</template>
-
-<script setup>
-  import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
-  import { importItem } from "@ogw_front/utils/file_import_workflow.js"
-
-  const UIStore = useUIStore()
-  const dataBaseStore = useDataBaseStore()
-  const hybridViewerStore = useHybridViewerStore()
-
-  const openCreateTools = () => {
-    UIStore.setShowCreateTools(true)
-    UIStore.setShowCreatePoint(false)
-    UIStore.setShowCreateAOI(false)
-    UIStore.setShowCreateVOI(false)
-  }
-
-  const name = ref("")
-  const selectedAOI = ref(null)
-  const z_min = ref("")
-  const z_max = ref("")
-  const loading = ref(false)
-
-  const aoiList = computed(() => {
-    const items = []
-    for (const [id, item] of Object.entries(dataBaseStore.db)) {
-      if (item.is_aoi === true && item.name) {
-        items.push({
-          id: id,
-          name: item.name || item.native_file || id,
-        })
-      }
-    }
-    return items
-  })
-
-  const isFormFilled = computed(() => {
-    return (
-      name.value !== "" &&
-      selectedAOI.value !== null &&
-      z_min.value !== "" &&
-      z_max.value !== ""
-    )
-  })
-
-  const closeDrawer = () => {
-    UIStore.setShowCreateVOI(false)
-  }
-
-  function visibleBoundingBox() {
-    if (!hybridViewerStore.genericRenderWindow.value)
-      return [-1, 1, -1, 1, -1, 1]
-    const renderer = hybridViewerStore.genericRenderWindow.value.getRenderer()
-    return renderer.computeVisiblePropBounds()
-  }
-
-  const initializeVOICoordinates = () => {
-    const bounds = visibleBoundingBox()
-    const boundsMinZ = bounds[4]
-    const boundsMaxZ = bounds[5]
-
-    const extentZ = boundsMaxZ - boundsMinZ
-    const paddingZ = extentZ * 0.1
-
-    const newMinZ = boundsMinZ - paddingZ
-    const newMaxZ = boundsMaxZ + paddingZ
-
-    z_min.value = newMinZ.toFixed(2)
-    z_max.value = newMaxZ.toFixed(2)
-  }
-
-  const onAOISelected = (aoiId) => {}
-
-  onMounted(() => {
-    initializeVOICoordinates()
-  })
-
-  watch(
-    () => UIStore.showCreateVOI,
-    (newVal) => {
-      if (newVal) {
-        initializeVOICoordinates()
-        selectedAOI.value = null
-      }
-    },
-  )
-
-  const createVOI = async () => {
-    if (!isFormFilled.value) {
-      return
-    }
-
-    const z_min_val = parseFloat(z_min.value)
-    const z_max_val = parseFloat(z_max.value)
-
-    const voiData = {
-      name: name.value,
-      aoi_id: selectedAOI.value,
-      z_min: z_min_val,
-      z_max: z_max_val,
-    }
-
-    const voiSchema = back_schemas.opengeodeweb_back.create.create_voi
-    const geodeStore = useGeodeStore()
-
-    loading.value = true
-    try {
-      const response = await geodeStore.request(voiSchema, voiData, {
-        response_function: async (response) => {
-          const dataToImport = {
-            ...response._data,
-          }
-          await importItem(dataToImport)
-          closeDrawer()
-        },
-      })
-    } catch (error) {
-    } finally {
-      loading.value = false
-    }
-  }
-  const sanitizeNumberString = (str) => {
-    if (str == null) return ""
-    let value = String(str)
-      .replace(/,/g, ".")
-      .replace(/[^0-9eE+\-.]/g, "")
-    if (/[eE]/.test(value)) {
-      const parts = value.split(/[eE]/)
-      if (parts.length > 2) {
-        value =
-          parts.slice(0, 2).join("e") +
-          parts
-            .slice(2)
-            .join("")
-            .replace(/[^0-9+\-.]/g, "")
-      }
-    }
-    return value
-  }
-
-  const handlePasteVOI = (event, type) => {
-    const pastedText =
-      (event && event.clipboardData && event.clipboardData.getData("text")) ||
-      ""
-
-    if (!pastedText) return
-
-    const coordinates = pastedText.match(/[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/g)
-    if (!coordinates || coordinates.length === 0) return
-
-    const sanitized = coordinates.map((c) => sanitizeNumberString(c))
-
-    if (sanitized.length >= 2) {
-      z_min.value = sanitized[0]
-      z_max.value = sanitized[1]
-      event.preventDefault()
-    } else if (sanitized.length === 1) {
-      if (type === "min") {
-        z_min.value = sanitized[0]
-      } else {
-        z_max.value = sanitized[0]
-      }
-      event.preventDefault()
-    }
-  }
-
-  const sanitizeInputVOI = (value, field) => {
-    if (field === "z_min") z_min.value = sanitizeNumberString(value)
-    else if (field === "z_max") z_max.value = sanitizeNumberString(value)
-  }
-</script>
diff --git a/app/composables/extension_manager.js b/app/composables/extension_manager.js
new file mode 100644
index 00000000..44693281
--- /dev/null
+++ b/app/composables/extension_manager.js
@@ -0,0 +1,104 @@
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
+
+export function useExtensionManager() {
+  const appStore = useAppStore()
+  const geodeStore = useGeodeStore()
+
+  const importExtensionFile = async function (file) {
+    console.log("[ExtensionManager] Importing extension file:", file.name)
+
+    // Upload .vext to backend
+    const schemaImport = back_schemas.opengeodeweb_back.import_extension
+    const form = new FormData()
+    form.append("file", file, file.name)
+
+    const result = await $fetch(schemaImport.$id, {
+      baseURL: geodeStore.base_url,
+      method: "POST",
+      body: form,
+    })
+
+    console.log("[ExtensionManager] Extension extracted:", result)
+
+    const { extension_name, frontend_content, backend_path } = result
+
+    // Create blob URL from frontend JS content
+    const blob = new Blob([frontend_content], {
+      type: "application/javascript",
+    })
+    const blobUrl = URL.createObjectURL(blob)
+
+    // Load the extension module
+    const extensionModule = await appStore.loadExtension(blobUrl, backend_path)
+
+    console.log("[ExtensionManager] Extension loaded:", extension_name)
+
+    // Register the store if present
+    if (extensionModule.metadata?.store) {
+      const storeFactory = extensionModule.metadata.store
+      const store = storeFactory()
+      appStore.registerStore(store)
+      console.log("[ExtensionManager] Store registered:", store.$id)
+
+      // Launch the microservice if the store has a launch method
+      const infraStore = useInfraStore()
+      if (typeof store.launch === "function") {
+        if (infraStore.app_mode === "DESKTOP") {
+          console.log(
+            "[ExtensionManager] Launching microservice in DESKTOP mode...",
+          )
+          await store.launch(backend_path)
+          await store.connect()
+          console.log("[ExtensionManager] Microservice connected")
+        } else if (infraStore.app_mode === "BROWSER") {
+          console.log(
+            "[ExtensionManager] Launching microservice in BROWSER mode...",
+          )
+          await store.launch(backend_path)
+          await store.connect()
+          console.log("[ExtensionManager] Microservice connected")
+        } else {
+          console.log(
+            `[ExtensionManager] Skipping microservice launch in ${infraStore.app_mode} mode`,
+          )
+        }
+      }
+    }
+
+    return {
+      extensionModule,
+      extension_name,
+      backend_path,
+    }
+  }
+
+  const unloadExtension = async function (extensionId) {
+    console.log("[ExtensionManager] Unloading extension:", extensionId)
+
+    const extensionData = appStore.getExtension(extensionId)
+    if (!extensionData) {
+      console.warn("[ExtensionManager] Extension not found:", extensionId)
+      return false
+    }
+
+    // Get the store if it exists
+    const storeFactory = extensionData.metadata?.store
+    if (storeFactory) {
+      const store = storeFactory()
+      // Stop the microservice if possible
+      if (typeof store.kill === "function") {
+        await store.kill()
+      }
+    }
+
+    // Unload from AppStore
+    appStore.unloadExtension(extensionId)
+
+    console.log("[ExtensionManager] Extension unloaded:", extensionId)
+    return true
+  }
+
+  return { importExtensionFile, unloadExtension }
+}
+
+export default useExtensionManager
diff --git a/app/composables/useExtensionMetadata.js b/app/composables/useExtensionMetadata.js
new file mode 100644
index 00000000..0c9a0010
--- /dev/null
+++ b/app/composables/useExtensionMetadata.js
@@ -0,0 +1,36 @@
+export function useExtensionMetadata() {
+  const UIStore = useUIStore()
+
+  const getExtensionName = (extension) => {
+    if (!extension) return "Unknown Extension"
+    if (extension.metadata?.name) return extension.metadata.name
+    return extension.id || "Unknown Extension"
+  }
+
+  const getExtensionDescription = (extension) => {
+    return extension?.metadata?.description || "Custom extension module"
+  }
+
+  const getExtensionVersion = (extension) => {
+    return extension?.metadata?.version || null
+  }
+
+  const getExtensionTools = (extension) => {
+    if (!extension) return []
+    return UIStore.toolsDefinitions.filter(
+      (tool) => tool.extensionPath === extension.id,
+    )
+  }
+
+  const getExtensionToolsCount = (extension) => {
+    return getExtensionTools(extension).length
+  }
+
+  return {
+    getExtensionName,
+    getExtensionDescription,
+    getExtensionVersion,
+    getExtensionTools,
+    getExtensionToolsCount,
+  }
+}
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 4599e0ae..401c94e4 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -75,15 +75,24 @@
       indeterminate
       color="white"
     />
+    <v-navigation-drawer
+      class="align-start"
+      radius="10px"
+      :width="500"
+      location="left"
+      temporary
+      v-model="UIStore.showExtensions"
+      style="z-index: 9999; left: 0 !important"
+    >
+      <Extension />
+    </v-navigation-drawer>
   </v-app>
 </template>
 
 <script setup>
-  // Third party imports
   import FeedBackSnackers from "@ogw_front/components/FeedBack/Snackers.vue"
   import InfraConnected from "@ogw_front/components/InfraConnected.vue"
 
-  // Local imports
   import CreateTools from "@vease/components/CreateTools.vue"
   import FullScrenDropZone from "@vease/components/FullScrenDropZone.vue"
   import StepImport from "@vease/components/StepImport.vue"
diff --git a/app/plugins/extension.client.js b/app/plugins/extension.client.js
new file mode 100644
index 00000000..c0f4a56c
--- /dev/null
+++ b/app/plugins/extension.client.js
@@ -0,0 +1,36 @@
+import * as Vue from "vue"
+import * as Pinia from "pinia"
+import { VeaseExtensionAPI } from "../utils/extensionAPI.js"
+
+export default defineNuxtPlugin(async (nuxtApp) => {
+  if (typeof window !== "undefined") {
+    window.Vue = Vue
+    window.Pinia = Pinia
+
+    // Expose stores as factory functions - these are auto-imported by Nuxt
+    window.__VEASE_STORES__ = {
+      useAppStore,
+      useInfraStore,
+      useFeedbackStore,
+      useGeodeStore,
+    }
+
+    // Expose utilities for extensions
+    const { api_fetch } =
+      await import("@geode/opengeodeweb-front/internal/utils/api_fetch.js")
+    window.__VEASE_UTILS__ = {
+      Status: (await import("@ogw_front/utils/status.js")).default,
+      appMode: (await import("@ogw_front/utils/app_mode.js")).appMode,
+      api_fetch,
+    }
+    window.__VEASE_SCHEMAS__ = {}
+  }
+
+  const extensionsStore = useExtensionsStore()
+  const extensionAPI = new VeaseExtensionAPI()
+
+  extensionsStore.setExtensionAPI(extensionAPI)
+  nuxtApp.vueApp.provide("extensionAPI", extensionAPI)
+
+  console.log("[Vease] Extension system initialized")
+})
diff --git a/app/plugins/tools.client.js b/app/plugins/tools.client.js
index 8a669c07..0ff8734d 100644
--- a/app/plugins/tools.client.js
+++ b/app/plugins/tools.client.js
@@ -1,44 +1,14 @@
-import AOIicon from "../assets/img/aoi.svg"
-import VOIicon from "../assets/img/voi.svg"
-
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin(() => {
   const UIStore = useUIStore()
 
-  UIStore.initializeDefaultTools()
-
-  const CreatePointComponent = defineAsyncComponent(
-    () => import("../components/tools/CreatePoint.vue"),
-  )
   UIStore.registerToolComponent({
     id: "Point",
     title: "Specific Point",
     description: "Create a point object with exact coordinates on the viewer.",
     iconType: "mdi",
     iconSource: "mdi-circle-medium",
-    component: markRaw(CreatePointComponent),
-  })
-
-  const CreateAOIComponent = defineAsyncComponent(
-    () => import("../components/tools/CreateAOI.vue"),
-  )
-  UIStore.registerToolComponent({
-    id: "AOI",
-    title: "Area of Interest",
-    description: "Define an area of interest on the viewer with 4 points.",
-    iconType: "svg",
-    iconSource: AOIicon,
-    component: markRaw(CreateAOIComponent),
-  })
-
-  const CreateVOIComponent = defineAsyncComponent(
-    () => import("../components/tools/CreateVOI.vue"),
-  )
-  UIStore.registerToolComponent({
-    id: "VOI",
-    title: "Volume of Interest",
-    description: "Create a 3D bounding box from an existing AOI with Z bounds.",
-    iconType: "svg",
-    iconSource: VOIicon,
-    component: markRaw(CreateVOIComponent),
+    component: markRaw(
+      defineAsyncComponent(() => import("../components/tools/CreatePoint.vue")),
+    ),
   })
 })
diff --git a/app/stores/UI.js b/app/stores/UI.js
index 82329e9a..d256e6dd 100644
--- a/app/stores/UI.js
+++ b/app/stores/UI.js
@@ -5,32 +5,17 @@ export const useUIStore = defineStore("UI", () => {
   const showButton = ref(false)
   const showStepImportMenu = ref(false)
   const showCreateTools = ref(false)
-  const showCreatePoint = ref(false)
-  const showCreateAOI = ref(false)
-  const showCreateVOI = ref(false)
   const toolsDefinitions = ref([])
+  const showCreateVOI = ref(false)
+  const showCreateAOI = ref(false)
+  const showExtensions = ref(false)
 
-  const initializeDefaultTools = () => {
-    const defaultTools = [
-      {
-        id: "Point",
-        title: "Specific Point",
-        description:
-          "Create a point object with exact coordinates on the viewer.",
-        iconType: "mdi",
-        iconSource: "mdi-circle-medium",
-        component: null,
-      },
-    ]
-    toolsDefinitions.value = defaultTools
-  }
-
-  const registerToolComponent = (toolDefinition) => {
+  const registerToolComponent = (toolDefinition, extensionPath = null) => {
     const { id, component, ...rest } = toolDefinition
     const existingIndex = toolsDefinitions.value.findIndex(
       (tool) => tool.id === id,
     )
-    const newDefinition = { id, component, ...rest }
+    const newDefinition = { id, component, extensionPath, ...rest }
     if (existingIndex !== -1) {
       toolsDefinitions.value[existingIndex] = {
         ...toolsDefinitions.value[existingIndex],
@@ -41,7 +26,32 @@ export const useUIStore = defineStore("UI", () => {
     }
   }
 
-  const activeTools = computed(() => toolsDefinitions.value)
+  const unregisterTool = (toolId) => {
+    const index = toolsDefinitions.value.findIndex((tool) => tool.id === toolId)
+    if (index !== -1) {
+      toolsDefinitions.value.splice(index, 1)
+      console.log(`[UIStore] Tool unregistered: ${toolId}`)
+    }
+  }
+
+  const unregisterToolsByExtension = (extensionPath) => {
+    const beforeCount = toolsDefinitions.value.length
+    toolsDefinitions.value = toolsDefinitions.value.filter(
+      (tool) => tool.extensionPath !== extensionPath,
+    )
+    const removedCount = beforeCount - toolsDefinitions.value.length
+    console.log(
+      `[UIStore] Removed ${removedCount} tools from extension: ${extensionPath}`,
+    )
+  }
+
+  const activeTools = computed(() => {
+    const extensionsStore = useExtensionsStore()
+    return toolsDefinitions.value.filter((tool) => {
+      if (!tool.extensionPath) return true
+      return extensionsStore.getExtensionEnabled(tool.extensionPath)
+    })
+  })
 
   function setShowDropZone(value) {
     showDropZone.value = value
@@ -68,40 +78,41 @@ export const useUIStore = defineStore("UI", () => {
     showCreateTools.value = value
   }
 
-  function setShowCreatePoint(value) {
-    showCreatePoint.value = value
-  }
-
-  function setShowCreateAOI(value) {
-    showCreateAOI.value = value
+  function setShowExtensions(value) {
+    showExtensions.value = value
   }
 
   function setShowCreateVOI(value) {
     showCreateVOI.value = value
   }
 
+  function setShowCreateAOI(value) {
+    showCreateAOI.value = value
+  }
+
   return {
     toolsDefinitions,
     activeTools,
-    initializeDefaultTools,
     registerToolComponent,
+    unregisterTool,
+    unregisterToolsByExtension,
     showDropZone,
     showStepper,
     droppedFiles,
     showButton,
     showStepImportMenu,
     showCreateTools,
-    showCreatePoint,
-    showCreateAOI,
+    showExtensions,
     showCreateVOI,
+    showCreateAOI,
     setShowDropZone,
     setShowStepper,
     setDroppedFiles,
     setShowButton,
     toggleDrawer,
     setShowCreateTools,
-    setShowCreatePoint,
-    setShowCreateAOI,
+    setShowExtensions,
     setShowCreateVOI,
+    setShowCreateAOI,
   }
 })
diff --git a/app/stores/extensions.js b/app/stores/extensions.js
new file mode 100644
index 00000000..8b1b8804
--- /dev/null
+++ b/app/stores/extensions.js
@@ -0,0 +1,10 @@
+import { transformExtensionCode } from "../utils/extensionCodeTransformer.js"
+import { useAppStore } from "@ogw_front/stores/app.js"
+
+export function useExtensionsStore() {
+  const appStore = useAppStore()
+
+  appStore.setCodeTransformer(transformExtensionCode)
+
+  return appStore
+}
diff --git a/app/utils/extensionAPI.js b/app/utils/extensionAPI.js
new file mode 100644
index 00000000..dd7ff7aa
--- /dev/null
+++ b/app/utils/extensionAPI.js
@@ -0,0 +1,128 @@
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
+import vease_back_schemas from "@geode/vease-back/vease_back_schemas.json"
+import { importItem } from "@ogw_front/utils/file_import_workflow.js"
+
+export class VeaseExtensionAPI {
+  registerTool(extensionId, toolDefinition) {
+    if (!toolDefinition.id) {
+      throw new Error("Tool definition must have an id")
+    }
+    if (!toolDefinition.component) {
+      throw new Error("Tool definition must have a component")
+    }
+
+    useUIStore().registerToolComponent(toolDefinition, extensionId)
+  }
+
+  unregisterTool(toolId) {
+    useUIStore().unregisterTool(toolId)
+  }
+
+  unregisterToolsByExtension(extensionId) {
+    useUIStore().unregisterToolsByExtension(extensionId)
+  }
+
+  getSchemas() {
+    return {
+      opengeodeweb_back: back_schemas.opengeodeweb_back,
+      vease_back: vease_back_schemas.vease_back,
+    }
+  }
+
+  async api_fetch(
+    { schema, params },
+    { request_error_function, response_function, response_error_function } = {},
+  ) {
+    const validate_schema = (
+      await import("@ogw_front/utils/validate_schema.js")
+    ).default
+    const feedbackStore = useFeedbackStore()
+    const geodeStore = useGeodeStore()
+
+    const body = params || {}
+
+    const { valid, error } = validate_schema(schema, body)
+
+    if (!valid) {
+      if (process.env.NODE_ENV !== "production") {
+        console.log("Bad request", error, schema, params)
+      }
+      feedbackStore.add_error(400, schema.$id, "Bad request", error)
+      throw new Error(schema.$id.concat(": ", error))
+    }
+
+    geodeStore.start_request()
+
+    const method = schema.methods.filter((m) => m !== "OPTIONS")[0]
+    const requestOptions = {
+      method: method,
+      baseURL: geodeStore.base_url,
+    }
+
+    if (body && Object.keys(body).length > 0) {
+      requestOptions.body = body
+    }
+
+    try {
+      const response = await $fetch(schema.$id, requestOptions)
+      await geodeStore.stop_request()
+
+      if (response_function) {
+        await response_function({ _data: response, ok: true })
+      }
+
+      return { data: { value: response } }
+    } catch (error) {
+      await geodeStore.stop_request()
+
+      if (error.response) {
+        await feedbackStore.add_error(
+          error.response.status,
+          schema.$id,
+          error.response._data?.name || "Error",
+          error.response._data?.description || error.message,
+        )
+        if (response_error_function) {
+          await response_error_function(error.response)
+        }
+      } else {
+        await feedbackStore.add_error(
+          error.code || 500,
+          schema.$id,
+          error.message,
+          error.stack,
+        )
+        if (request_error_function) {
+          await request_error_function(error)
+        }
+      }
+
+      throw error
+    }
+  }
+
+  importItem(item) {
+    return importItem(item)
+  }
+
+  registerStore(store) {
+    const appStore = useAppStore()
+    appStore.registerStore(store)
+  }
+
+  get UIStore() {
+    return useUIStore()
+  }
+
+  get DataBaseStore() {
+    return useDataBaseStore()
+  }
+
+  get HybridViewerStore() {
+    return useHybridViewerStore()
+  }
+
+  get AppStore() {
+    return useAppStore()
+  }
+}
diff --git a/app/utils/extensionCodeTransformer.js b/app/utils/extensionCodeTransformer.js
new file mode 100644
index 00000000..a3857238
--- /dev/null
+++ b/app/utils/extensionCodeTransformer.js
@@ -0,0 +1,111 @@
+export function transformExtensionCode(code) {
+  code = code.replace(
+    /from\s+["']vue["']/g,
+    'from "data:text/javascript,' +
+      encodeURIComponent(`
+      const Vue = window.Vue;
+      export default Vue;
+      ${Object.keys(window.Vue || {})
+        .map((key) => `export const ${key} = Vue.${key};`)
+        .join("")}
+    `) +
+      '"',
+  )
+
+  code = code.replace(
+    /from\s+["']pinia["']/g,
+    'from "data:text/javascript,' +
+      encodeURIComponent(`
+      const Pinia = window.Pinia;
+      export default Pinia;
+      ${Object.keys(window.Pinia || {})
+        .map((key) => `export const ${key} = Pinia.${key};`)
+        .join("")}
+    `) +
+      '"',
+  )
+
+  // Transform @ogw_front/app/stores/app.js specifically
+  code = code.replace(
+    /from\s+["']@ogw_front\/app\/stores\/app\.js["']/g,
+    'from "data:text/javascript,' +
+      encodeURIComponent(`
+        export const useAppStore = window.__VEASE_STORES__.useAppStore;
+        export default useAppStore;
+      `) +
+      '"',
+  )
+
+  // Transform @ogw_front/app/stores/* imports (generic pattern)
+  code = code.replace(
+    /from\s+["']@ogw_front\/app\/stores\/([^"']+)["']/g,
+    (match, storePath) => {
+      const storeName = storePath.replace(".js", "")
+      const capitalizedName =
+        storeName.charAt(0).toUpperCase() + storeName.slice(1)
+      return `from "data:text/javascript,${encodeURIComponent(`
+        export const use${capitalizedName}Store = window.__VEASE_STORES__.use${capitalizedName}Store;
+        export default use${capitalizedName}Store;
+      `)}"`
+    },
+  )
+
+  // Transform @ogw_front/app/utils/status.js
+  code = code.replace(
+    /from\s+["']@ogw_front\/app\/utils\/status\.js["']/g,
+    'from "data:text/javascript,' +
+      encodeURIComponent(`
+      const Status = window.__VEASE_UTILS__.Status;
+      export default Status;
+    `) +
+      '"',
+  )
+
+  // Transform @ogw_front/app/utils/app_mode.js
+  code = code.replace(
+    /from\s+["']@ogw_front\/app\/utils\/app_mode\.js["']/g,
+    'from "data:text/javascript,' +
+      encodeURIComponent(`
+      export const appMode = window.__VEASE_UTILS__.appMode;
+    `) +
+      '"',
+  )
+
+  // Transform @ogw_front/internal/utils/api_fetch.js (actual path in OpenGeodeWeb-Front)
+  code = code.replace(
+    /from\s+["']@ogw_front\/internal\/utils\/api_fetch\.js["']/g,
+    'from "data:text/javascript,' +
+      encodeURIComponent(`
+      export const api_fetch = window.__VEASE_UTILS__.api_fetch;
+    `) +
+      '"',
+  )
+
+  // Transform @geode/vease-modeling-back/vease_modeling_back_schemas.json
+  code = code.replace(
+    /from\s+["']@geode\/vease-modeling-back\/vease_modeling_back_schemas\.json["']/g,
+    'from "data:text/javascript,' +
+      encodeURIComponent(`
+      const schemas = window.__VEASE_SCHEMAS__.vease_modeling_back;
+      export default schemas;
+    `) +
+      '"',
+  )
+
+  // Replace direct function calls to use window globals
+  // This handles cases where functions are externalized and called without imports
+  code = code.replace(
+    /\buseInfraStore\(/g,
+    "window.__VEASE_STORES__.useInfraStore(",
+  )
+  code = code.replace(
+    /\buseAppStore\(/g,
+    "window.__VEASE_STORES__.useAppStore(",
+  )
+  code = code.replace(
+    /\buseFeedbackStore\(/g,
+    "window.__VEASE_STORES__.useFeedbackStore(",
+  )
+
+  return code
+}
diff --git a/app/utils/formatDate.js b/app/utils/formatDate.js
new file mode 100644
index 00000000..c62dd903
--- /dev/null
+++ b/app/utils/formatDate.js
@@ -0,0 +1,24 @@
+export function formatRelativeTime(dateInput) {
+  const date = typeof dateInput === "string" ? new Date(dateInput) : dateInput
+  const now = new Date()
+  const diffMs = now - date
+  const diffSecs = Math.floor(diffMs / 1000)
+  const diffMins = Math.floor(diffSecs / 60)
+  const diffHours = Math.floor(diffMins / 60)
+  const diffDays = Math.floor(diffHours / 24)
+  const diffWeeks = Math.floor(diffDays / 7)
+  const diffMonths = Math.floor(diffDays / 30)
+
+  if (diffSecs < 60) return "just now"
+  if (diffMins < 60)
+    return `${diffMins} ${diffMins === 1 ? "minute" : "minutes"} ago`
+  if (diffHours < 24)
+    return `${diffHours} ${diffHours === 1 ? "hour" : "hours"} ago`
+  if (diffDays < 7) return `${diffDays} ${diffDays === 1 ? "day" : "days"} ago`
+  if (diffWeeks < 4)
+    return `${diffWeeks} ${diffWeeks === 1 ? "week" : "weeks"} ago`
+  if (diffMonths < 12)
+    return `${diffMonths} ${diffMonths === 1 ? "month" : "months"} ago`
+
+  return date.toLocaleDateString()
+}
diff --git a/electron/main.js b/electron/main.js
index 60deb019..2cc21410 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -45,6 +45,61 @@ ipcMain.handle("new_window", async (_event) => {
   const _new_window = create_new_window()
 })
 
+// Extension microservices management
+const extensionProcesses = new Map()
+
+ipcMain.handle(
+  "run_extension",
+  async (_event, { extensionId, executablePath }) => {
+    console.log(`[Electron] Launching extension microservice: ${extensionId}`)
+    console.log(`[Electron] Executable path: ${executablePath}`)
+
+    try {
+      const { spawn } = await import("child_process")
+      const getPort = (await import("get-port-please")).getPort
+
+      // Get a free port for the extension microservice
+      const port = await getPort({ portRange: [5001, 5999] })
+      console.log(`[Electron] Extension ${extensionId} will use port ${port}`)
+
+      // Spawn the microservice process
+      const process = spawn(
+        executablePath,
+        ["--port", port.toString(), "--data_folder_path", project_folder_path],
+        {
+          stdio: "inherit",
+        },
+      )
+
+      // Store the process
+      extensionProcesses.set(extensionId, { process, port })
+
+      process.on("error", (error) => {
+        console.error(
+          `[Electron] Extension ${extensionId} process error:`,
+          error,
+        )
+        extensionProcesses.delete(extensionId)
+      })
+
+      process.on("exit", (code) => {
+        console.log(
+          `[Electron] Extension ${extensionId} process exited with code ${code}`,
+        )
+        extensionProcesses.delete(extensionId)
+      })
+
+      return { success: true, port }
+    } catch (error) {
+      console.error(
+        `[Electron] Failed to launch extension ${extensionId}:`,
+        error,
+      )
+      return { success: false, error: error.message }
+    }
+  },
+)
+
 app.whenReady().then(() => {
   mainWindow = create_new_window()
 })
@@ -54,7 +109,24 @@ let cleaned = false
 async function clean_up() {
   return new Promise((resolve) => {
     console.log("Shutting down microservices")
-    Promise.all([kill_back(back_port), kill_viewer(viewer_port)]).then(() => {
+
+    // Kill extension microservices
+    const extensionKillPromises = Array.from(extensionProcesses.values()).map(
+      ({ process, port }) => {
+        return new Promise((resolveKill) => {
+          if (process && !process.killed) {
+            process.kill()
+          }
+          resolveKill()
+        })
+      },
+    )
+
+    Promise.all([
+      kill_back(back_port),
+      kill_viewer(viewer_port),
+      ...extensionKillPromises,
+    ]).then(() => {
       delete_folder_recursive(project_folder_path)
       cleaned = true
       console.log("end clean")
diff --git a/electron/preload.js b/electron/preload.js
index 3b8e7d98..fe5e254e 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -13,4 +13,12 @@ contextBridge.exposeInMainWorld("electronAPI", {
     console.log("PRELOAD new_window", args)
     ipcRenderer.invoke("new_window", args)
   },
+  run_extension: async (extensionId, executablePath) => {
+    console.log("PRELOAD run_extension", extensionId, executablePath)
+    const result = await ipcRenderer.invoke("run_extension", {
+      extensionId,
+      executablePath,
+    })
+    return result
+  },
 })
diff --git a/microservices/back/requirements.txt b/microservices/back/requirements.txt
index cb5e5b44..812d6591 100644
--- a/microservices/back/requirements.txt
+++ b/microservices/back/requirements.txt
@@ -5,4 +5,3 @@
 #    pip-compile --output-file=microservices/back/requirements.txt microservices/back/requirements.in
 #
 
-vease-back==1.*,>=1.7.0rc1
diff --git a/microservices/viewer/requirements.txt b/microservices/viewer/requirements.txt
index 9c3a6902..68277183 100644
--- a/microservices/viewer/requirements.txt
+++ b/microservices/viewer/requirements.txt
@@ -5,4 +5,3 @@
 #    pip-compile --output-file=microservices/viewer/requirements.txt microservices/viewer/requirements.in
 #
 
-vease-viewer==2.*,>=2.4.0rc1
diff --git a/package.json b/package.json
index 7e105317..31b9dc2f 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "electron-updater": "6.6.2",
     "get-port-please": "3.2.0",
     "h3-formidable": "1.0.0",
+    "jszip": "^3.10.1",
     "utf-8-validate": "^6.0.5"
   }
 }
diff --git a/server/api/extension-launch.post.js b/server/api/extension-launch.post.js
new file mode 100644
index 00000000..5fa63aa4
--- /dev/null
+++ b/server/api/extension-launch.post.js
@@ -0,0 +1,125 @@
+import { spawn } from "node:child_process"
+import path from "node:path"
+import { defineEventHandler, readBody, createError } from "h3"
+
+// Store running extension processes
+const extensionProcesses = new Map()
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event)
+  const { extensionId, executablePath } = body
+
+  if (!extensionId || !executablePath) {
+    throw createError({
+      statusCode: 400,
+      message: "extensionId and executablePath are required",
+    })
+  }
+
+  // Check if already running
+  if (extensionProcesses.has(extensionId)) {
+    console.log(`[Extension Launcher] ${extensionId} already running`)
+    const existing = extensionProcesses.get(extensionId)
+    return {
+      success: true,
+      port: existing.port,
+      message: "Extension microservice already running",
+    }
+  }
+
+  try {
+    // Launch the extension backend
+    console.log(
+      `[Extension Launcher] Launching ${extensionId} from ${executablePath}`,
+    )
+
+    // The executablePath points to: .../extensions/vease-modeling/dist/vease-modeling-back.exe
+    // The Python source should be at: .../extensions/vease-modeling/backend_src/vease_modeling_back/app.py
+    const extensionDir = path.dirname(path.dirname(executablePath)) // Go up from dist/ to extension root
+    const pythonScript = path.join(
+      extensionDir,
+      "backend_src",
+      "vease_modeling_back",
+      "app.py",
+    )
+    const pythonPath = path.join(extensionDir, "backend_src")
+
+    const fs = await import("node:fs")
+    if (!fs.existsSync(pythonScript)) {
+      throw new Error(`Python backend source not found at ${pythonScript}`)
+    }
+
+    console.log(
+      `[Extension Launcher] Launching Python script: python ${pythonScript}`,
+    )
+
+    const extensionProcess = spawn("python", [pythonScript], {
+      stdio: ["ignore", "pipe", "pipe"],
+      env: {
+        ...process.env,
+        PYTHONPATH: pythonPath,
+      },
+    })
+
+    let port = null
+
+    // Capture stdout to get the port
+    extensionProcess.stdout.on("data", (data) => {
+      const output = data.toString()
+      console.log(`[${extensionId}] ${output}`)
+
+      // Look for port in output (format: "Running on http://0.0.0.0:5001")
+      const portMatch = output.match(/Running on .*:(\d+)/)
+      if (portMatch && !port) {
+        port = portMatch[1]
+        console.log(
+          `[Extension Launcher] ${extensionId} running on port ${port}`,
+        )
+      }
+    })
+
+    extensionProcess.stderr.on("data", (data) => {
+      console.error(`[${extensionId}] ERROR: ${data.toString()}`)
+    })
+
+    extensionProcess.on("close", (code) => {
+      console.log(
+        `[Extension Launcher] ${extensionId} exited with code ${code}`,
+      )
+      extensionProcesses.delete(extensionId)
+    })
+
+    // Store the process
+    extensionProcesses.set(extensionId, {
+      process: extensionProcess,
+      port: null, // Will be updated when we parse stdout
+      startedAt: new Date().toISOString(),
+    })
+
+    // Wait a bit for the process to start and output the port
+    await new Promise((resolve) => setTimeout(resolve, 2000))
+
+    // Update the port in the stored process info
+    if (port) {
+      const processInfo = extensionProcesses.get(extensionId)
+      if (processInfo) {
+        processInfo.port = port
+      }
+    }
+
+    return {
+      success: true,
+      port: port || "5001", // Default port if not detected
+      message: `Extension microservice ${extensionId} launched successfully`,
+    }
+  } catch (error) {
+    console.error(
+      `[Extension Launcher] Failed to launch ${extensionId}:`,
+      error,
+    )
+    throw createError({
+      statusCode: 500,
+      message: `Failed to launch extension microservice: ${error.message}`,
+    })
+  }
+})