From a18735e5b5cec706f3cdf4c4f4ca22482ce7ea0f Mon Sep 17 00:00:00 2001
From: clabroche <corentinlabroche@gmail.com>
Date: Mon, 12 Feb 2024 01:24:13 +0100
Subject: [PATCH] fix: cosmetic changes

---
 fronts/app/src/components/Card.vue          |  25 +--
 fronts/app/src/components/Popover.vue       |  13 +-
 fronts/app/src/components/Progress.vue      |   2 +-
 fronts/app/src/components/Section.vue       |  41 +++--
 fronts/app/src/components/Tabs.vue          | 119 +++++++++-----
 fronts/app/src/views/StackMultiple.vue      |   2 +
 fronts/app/src/views/StackSingle.vue        |  99 ++++++++++--
 modules/bugs/front/src/Bugs.vue             |  13 --
 modules/configuration/front/src/Configs.vue |  13 --
 modules/documentation/front/src/Index.vue   |  14 --
 modules/git/front/src/Git.vue               | 168 +++++++++++---------
 modules/github/front/src/Index.vue          |  21 +--
 modules/logs/front/src/Logs.vue             | 140 ++++++++--------
 modules/mongo/front/src/Index.vue           |  47 +++---
 modules/npm/front/src/Npm.vue               |  21 ++-
 modules/regex/front/src/Index.vue           |   3 +
 package.json                                |   2 +-
 stack.js                                    |   5 +
 watch.js                                    |  22 ++-
 yarn.lock                                   |  39 ++---
 20 files changed, 462 insertions(+), 347 deletions(-)

diff --git a/fronts/app/src/components/Card.vue b/fronts/app/src/components/Card.vue
index 3fd0e165..f608f739 100644
--- a/fronts/app/src/components/Card.vue
+++ b/fronts/app/src/components/Card.vue
@@ -1,17 +1,16 @@
 <template>
-  <div class="card-root" :class="color">
+  <div class="card-root" :class="{[color]: true, mini}">
     <div class="card-container">
       <slot></slot>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    color: {default: 'blue'}
-  }
-}
+<script setup>
+defineProps({
+  color: {default: 'blue'},
+  mini: {default: false},
+})
 </script>
 
 <style lang="scss" scoped>
@@ -33,7 +32,13 @@ export default {
 }
 .card-root {
   width: 300px;
-  height: 100px;
+  height: auto;
+  &.mini {
+    border-radius: 1000px;
+    .card-container {
+      flex-direction: row;
+    }
+  }
   display: flex;
   align-items: center;
   position: relative;
@@ -54,10 +59,6 @@ export default {
     height: 45%;
   }
   .card-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
     width: 100%;
     z-index: 1;
     display: flex;
diff --git a/fronts/app/src/components/Popover.vue b/fronts/app/src/components/Popover.vue
index cdf8a36a..11047e80 100644
--- a/fronts/app/src/components/Popover.vue
+++ b/fronts/app/src/components/Popover.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="popover-root">
+  <div class="popover-root" v-if="!disable" :class="{fullWidth}">
     <div ref="refTrigger" class="trigger">
       <slot name="trigger" ></slot>
     </div>
@@ -7,6 +7,9 @@
       <slot name="content"/>
     </div>
   </div>
+  <div class="popover-root" v-else>
+    <slot name="trigger"/>
+  </div>
 </template>
 
 <script>
@@ -24,6 +27,8 @@ export default {
     trigger: { default: 'click' },
     placement: { default: 'bottom' },
     appendTo: {default: 'parent'},
+    disable: {default: false},
+    fullWidth: {default: false},
   },
   setup(props) {
     /** @type {import('vue').Ref<Element | import('tippy.js').MultipleTargets | null>} */
@@ -57,5 +62,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
+.fullWidth {
+  &.popover-root, .trigger {
+    width: 100%;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/fronts/app/src/components/Progress.vue b/fronts/app/src/components/Progress.vue
index 70a3f862..d5363f02 100644
--- a/fronts/app/src/components/Progress.vue
+++ b/fronts/app/src/components/Progress.vue
@@ -25,7 +25,7 @@ export default {
 .progress {
   padding: 3px;
   box-sizing: border-box;
-  border-radius: 4px;
+  border-radius: 100px;
   background: #dfdfdf;  
   box-shadow: inset 0 1px 2px 2px #ccc;
 }
diff --git a/fronts/app/src/components/Section.vue b/fronts/app/src/components/Section.vue
index 58faa3ce..f5cb4dab 100644
--- a/fronts/app/src/components/Section.vue
+++ b/fronts/app/src/components/Section.vue
@@ -2,21 +2,29 @@
   <div class="section" :class="{noStyle, noBodyPadding, headerBold,  headerCenter}">
     <div class="background">
     </div>
-    <div class="title" v-if="header || actions">
+    <div class="title" v-if="header || actions?.length">
       <div v-if="header">
         {{header}}
       </div>
       <slot v-else name="header">
       </slot>
       <div class="actions">
-        <button
-          @click="action?.click?.()"
-          v-for="action of activeActions"
-          :key="action.label"
-          class="action small" :class="{mini: !action.label && action.icon || action.small, active: action.active}">
-          <i :class="action.icon" v-if="action.icon"  aria-hidden="true"></i>
-          <span class="text" v-if="action.label">{{action.label}}</span>
-        </button>
+        <template v-for="action of activeActions" :key="action.label">
+          <Popover appendTo="parent" trigger="mouseenter" placement="top" :disable="!action.hover">
+            <template #trigger>
+              <button
+                @click="action?.click?.()"
+                class="action small" :class="{mini: !action.label && action.icon || action.small, active: action.active}">
+                <i :class="action.icon" v-if="action.icon"  aria-hidden="true"></i>
+                <span class="text" v-if="action.label">{{action.label}}</span>
+              </button>
+            </template>
+            <template #content>
+              <span class="text" v-if="action.hover">{{action.hover}}</span>
+            </template>
+          </Popover>
+        </template>
+        
       </div>
     </div>
     <div class="content" :style="{maxHeight}">
@@ -27,6 +35,7 @@
 
 <script setup>
 import { computed } from 'vue';
+import Popover from './Popover.vue';
 
 const props = defineProps({
   header: {default: ''},
@@ -50,6 +59,7 @@ const activeActions = computed(() => {
  *   icon?: string,
  *   hidden?: boolean,
  *   label?: string,
+ *   hover?: string,
  *   small?: boolean,
  *   active?: boolean,
  * }} Action
@@ -57,21 +67,18 @@ const activeActions = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-$mainColor: rgb(235, 235, 235);
-$secondaryColor: rgb(238, 238, 238);
+$mainColor: rgb(240, 240, 240);
+$secondaryColor: rgb(255, 255, 255);
 $shadow: rgb(165, 177, 179);
 .section {
   min-width: 0;
   width: calc(100%);
-  margin: 5px 0;
   box-sizing: border-box;
   border-right: 0;
   display: flex;
   flex-direction: column;
-  border: 1px solid #e8e8e8;
-  box-shadow: 10px 10px 20px rgba(0,0,0,0.1),
-    -10px -10px 20px rgba(255,255,255, 1);
-    border-radius: 2px;
+  border: 1px solid #dbdbdb;
+  border-radius: 2px;
   position: relative;
   .background{
     background: $mainColor;
@@ -124,8 +131,10 @@ $shadow: rgb(165, 177, 179);
     flex-wrap: wrap;
     width: max-content;
     justify-content: flex-end;
+    gap: 5px;
     .action {
       gap: 5px;
+      margin: 0;
     }
     .action.mini {
       width: max-content;
diff --git a/fronts/app/src/components/Tabs.vue b/fronts/app/src/components/Tabs.vue
index 78ee825f..e996107b 100644
--- a/fronts/app/src/components/Tabs.vue
+++ b/fronts/app/src/components/Tabs.vue
@@ -1,14 +1,23 @@
 <template>
-  <div class="tabs">
+  <div class="tabs" :class="{[direction]: true}">
     <div class="buttons" :class="{invert:invertColor}">
-      <button @click="currentTab = tab;save()" v-for="tab of availableTabs" :key="tab.label" :class="{active: tab?.id === currentTab?.id}">
-        <div v-if="tab.label && !tab.icon">{{tab.label}}</div>
-        <i v-if="tab.icon" :class="tab.icon" aria-hidden="true"></i>
-        <label v-if="showLabels">{{tab?.data?.value?.length || tab?.data?.length || 0}}</label>
-        <div v-if="tab?.warning" class="badge warning">{{ tab.warning }}</div>
-      </button>
+      <template v-for="tab of availableTabs" :key="tab.label" >
+        <Popover appendTo="parent" trigger="mouseenter" placement="right" :fullWidth="true">
+          <template #trigger>
+            <button @click="currentTab = tab;save()" :class="{active: tab?.id === currentTab?.id}">
+              <div v-if="tab.label && !tab.icon">{{tab.label}}</div>
+              <i v-if="tab.icon" :class="tab.icon" aria-hidden="true"></i>
+              <label v-if="showLabels">{{tab?.data?.value?.length || tab?.data?.length || 0}}</label>
+              <div v-if="tab?.warning" class="badge warning">{{ tab.warning }}</div>
+            </button>
+          </template>
+          <template #content>
+            {{ tab.label }}
+          </template>
+        </Popover>
+      </template>
     </div>
-    <div class="content">
+    <div class="content" :style="contentCss">
       <slot :key="currentTab?.id" :data="currentTab?.data?.value || currentTab?.data" :tab="currentTab" v-if="currentTab"/>
     </div>
   </div>
@@ -17,6 +26,8 @@
 <script setup>
 import { ref, onMounted, computed, watch } from 'vue'
 import { useRouter } from 'vue-router';
+import Popover from './Popover.vue';
+
 const router = useRouter(); 
 
 
@@ -25,7 +36,9 @@ const props = defineProps({
     /** @type {Tab[]} */
     default: []
   },
+  direction: {default: ''},
   showLabels: {default: true},
+  contentCss: {default: () => ({})},
   invertColor: {default: false}
 })
 /** @type {import('vue').Ref<Tab | undefined>} */
@@ -80,44 +93,75 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+
+@mixin card($mainColor, $secondaryColor, $shadow) {
+  background: $mainColor;
+  background: linear-gradient(93deg, $mainColor 0%, $secondaryColor 100%);
+  color: white;
+  box-shadow:
+    0 0 5px 0 $shadow;
+  &::before, &::after {
+    box-shadow:
+      inset 0 0 50px $mainColor,
+      inset -20px 0 300px $mainColor,
+      0 0 50px #fff,
+      -10px 0 80px $mainColor,
+      10px 0 80px $mainColor;
+  }
+}
 .tabs {
   margin-top: 10px;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  height: calc(100vh - 220px);
+  &.left {
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    .buttons {
+      flex-direction: column;
+      height: auto;
+      align-items: flex-start;
+      justify-content: flex-start;
+      width: max-content;
+      height: max-content;
+      max-height: 100%;
+      position: sticky;
+      top: 40px;
+      margin: 0;
+      button {
+        height: 45px;
+        width: 100%;
+        &.active {
+          background-color: rgba(0,0,0,0.5);
+          color: white;
+          border: 0;
+          @include card(rgb(168, 38, 180), rgb(157, 27, 209), rgb(211, 22, 229))
+        }
+      }
+    }
+  }
 }
 .buttons {
   display: flex;
   justify-content: center;
+  top: 0;
   align-items: flex-end;
   margin: auto;
   margin-bottom: 10px;
-  height: 45px;
   flex-shrink: 0;
-  width: 90%;
-  &.invert {
-    button.active {
-      color: #fff;
-      border-bottom-color: #fff;
-      background: transparent;
-      box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset,
-      -2px -2px 5px rgba(255,255,255,0.2) inset;
-    }
-    button {
-      color: #ccc;
-      border-color: rgba(0,0,0,0.1);
-      border-color: transparent;
-      box-shadow: 2px 2px 5px rgba(0,0,0,0.2),
-      -2px -2px 5px rgba(255,255,255,0.2);
-    }
-  }
+  width: max-content;
+  gap: 5px;
+  background-color: rgba(0,0,0,0.06);
+  z-index: 1;
+  border: 1px solid rgba(0,0,0,0.05);
   button {
     position: relative;
     outline: none;
-    color: #999;
-    border-radius: 5px 5px 0 0;
+    margin: 0;
+    color: #777;
     transition: 200ms;
-    transition-property: font-size, box-shadow;
     border-bottom: 0;
     height: 40px;
     padding: 0 20px;
@@ -125,25 +169,16 @@ defineExpose({
     justify-content: center;
     align-items: center;
     background: transparent;
-    margin: 0 5px;
     font-size: 1em;
-    box-shadow: 5px 5px 10px rgba(0,0,0,0.2),
-      -5px -5px 10px rgba(255,255,255,0.8);
-    border: 1px solid #efefef;
-    &:hover {
-      box-shadow: none;
-      transform: none;
-    }
+    box-shadow: none;
     i {
       font-size: 1.2em;
     }
     &.active {
-      border-radius: 5px 5px 0 0;
+      border-radius: 0;
       color: #777;
-      margin-bottom: -1px;
-      border-bottom: 3px solid #0076bc;
-      box-shadow: 2px 2px 7px rgba(0,0,0,0.2) inset,
-      -5px -5px 7px rgba(255,255,255,0.6) inset;
+      @include card(rgb(168, 38, 180), rgb(157, 27, 209), rgb(211, 22, 229))
+
     }
     label {
       background-color: #fff;
diff --git a/fronts/app/src/views/StackMultiple.vue b/fronts/app/src/views/StackMultiple.vue
index e8086bce..9fcbb0aa 100644
--- a/fronts/app/src/views/StackMultiple.vue
+++ b/fronts/app/src/views/StackMultiple.vue
@@ -154,6 +154,8 @@ export default {
   height: max-content;
   .service-container {
     min-width: 300px;
+    height: 500px;
+    overflow: auto;
     width: 100%;
   }
 }
diff --git a/fronts/app/src/views/StackSingle.vue b/fronts/app/src/views/StackSingle.vue
index 6cd4f8dd..25dc359a 100644
--- a/fronts/app/src/views/StackSingle.vue
+++ b/fronts/app/src/views/StackSingle.vue
@@ -23,20 +23,28 @@
           </section-cmp>
         </div>
         <div v-else class="system-cards">
-          <card class="card">
-            <h2>Memory</h2>
+          <card class="card to-hide-for-small-screen" :mini="true">
+            <i class="fas fa-memory"></i>
+            <div class="hovered">Memory</div>
             <progress-cmp :percent="mem"></progress-cmp>
           </card>
-          <card class="card purple">
-            <h2>CPU</h2>
+          <card class="card to-hide-for-small-screen" color="purple" :mini="true">
+            <i class="fas fa-microchip"></i>
+            <div class="hovered">CPU</div>
             <progress-cmp :percent="cpu"></progress-cmp>
           </card>
-          <card class="card orange">
-            <button @click="restart()" :disabled="restartInProgress"><i class="fas fa-sync" aria-hidden="true" :class="{rotate: restartInProgress}"></i> Restart</button>
-            <button @click="stop()"><i class="fas fa-stop" aria-hidden="true"></i> Stop</button>
+          <card class="card restart-stop-card" color="orange" :mini="true">
+            <button class="small" @click="restart()" :disabled="restartInProgress">
+              <i class="fas fa-sync" aria-hidden="true" :class="{rotate: restartInProgress}"></i>
+              <span>Restart</span>
+            </button>
+            <button class="small" @click="stop()">
+              <i class="fas fa-stop" aria-hidden="true"></i>
+              <span>Stop</span>
+            </button>
           </card>
         </div>
-        <tabs class="tabs" :tabs="tabs" :showLabels="false">
+        <tabs class="tabs" :tabs="tabs" :showLabels="false" direction="left" :contentCss="{height: '100%'}">
           <template #default="{tab}">
             <div class="tab">
               <component :is="tab.id" :service="currentService" :key="currentService.label"></component>
@@ -101,15 +109,15 @@ export default {
             /** @type {any} */ a,
             /** @type {any} */ b
           ) => a.order - b.order)
-          .map((/** @type {{ name: any; icon: any; hidden: any; }} */ service) => {
+          .map((/** @type {{ name: any; icon: any; hidden: any; }} */ plugin) => {
             const tab = {
-              label: service.name,
-              id: service.name,
-              icon:service.icon,
-              hidden: service.hidden,
+              label: plugin.name,
+              id: plugin.name,
+              icon:plugin.icon,
+              hidden: plugin.hidden,
               warning: 0
             }
-            if(service.name === "Configuration") {
+            if(plugin.name === "Configuration") {
               const overrideEnvs = Object.keys(currentService.value?.spawnOptions?.overrideEnvs || {})
               const envs = Object.keys(currentService.value?.spawnOptions?.env || {})
               if(envs.some((key => overrideEnvs.includes(key)))) {
@@ -178,6 +186,7 @@ export default {
     margin: auto;
     overflow: auto;
     scroll-behavior: smooth;
+    margin-bottom: 20px;
     .header {
       width: 100%;
       height: 85px;
@@ -239,8 +248,10 @@ export default {
       }
     }
     .sections {
-      width: 90%;
       margin: auto;
+      overflow: auto;
+      padding: 0 20px;
+      box-sizing: border-box;
     }
   }
 }
@@ -250,12 +261,63 @@ export default {
   justify-content: center;
   flex-wrap: wrap;
   gap: 10px;
+  @media (max-width: 1300px) {
+    .to-hide-for-small-screen {
+      display: none;
+    }
+  }
   .card {
+    i {
+      font-size: 20px;
+      padding: 0 10px;
+      box-sizing: border-box;
+    }
+    &:hover {
+      .hovered {
+        max-width: 100px;
+      }
+    }
+    .hovered {
+      position: absolute;
+      top: 0;
+      left: 0;
+      transition: 300ms;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      width: 100%;
+      height: 100%;
+      backdrop-filter: blur(10px) brightness(0.5);
+      z-index: 1;
+      font-weight: bold;
+      max-width: 0;
+      overflow: hidden;
+
+    }
+  }
+  .restart-stop-card {
     button {
+      border-radius: 1000px;
       background: #0000003d;
       width: 100%;
-      box-shadow: 4px 4px 8px rgba(0,0,0,0.3),
-        -4px -4px 8px rgba(255,255,255,0.2);
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      &:hover {
+        span {
+          visibility: visible;
+          max-width: 100px;
+        
+        }
+      }
+      span {
+        visibility: hidden;
+        max-width: 0;
+        overflow: hidden;
+        transition: 300ms;
+      }
       &:hover {
         box-shadow: 2px 2px 0px rgba(0,0,0,0.3);
       }
@@ -273,7 +335,10 @@ export default {
 .tabs {
   margin-top: 20px;
   .tab {
+    padding-left: 20px;
+    box-sizing: border-box;
     transform: translateZ(0);
+    height: 100%;
   }
 }
 
diff --git a/modules/bugs/front/src/Bugs.vue b/modules/bugs/front/src/Bugs.vue
index 1e90afeb..2117e891 100644
--- a/modules/bugs/front/src/Bugs.vue
+++ b/modules/bugs/front/src/Bugs.vue
@@ -94,19 +94,6 @@ export default {
     margin-right: 10px;
   }
 }
-.bug-root {
-  width: 100%;
-  margin: auto;
-  height: calc(100vh - 300px - 40px);
-
-  @media (max-width: 1300px) {
-    height: calc(100vh - 400px - 40px);
-  }
-  @media (max-width: 900px) {
-    height: calc(100vh - 500px - 40px);
-  }
-  box-sizing: border-box;
-}
 .bug {
   margin-top: 10px;
   padding: 5px 10px;
diff --git a/modules/configuration/front/src/Configs.vue b/modules/configuration/front/src/Configs.vue
index 897a8bda..74549dd3 100644
--- a/modules/configuration/front/src/Configs.vue
+++ b/modules/configuration/front/src/Configs.vue
@@ -256,19 +256,6 @@ export default {
     }
   }
 }
-.configs-root {
-  width: 100%;
-  margin: auto;
-  height: calc(100vh - 300px - 40px);
-
-  @media (max-width: 1300px) {
-    height: calc(100vh - 400px - 40px);
-  }
-  @media (max-width: 900px) {
-    height: calc(100vh - 500px - 40px);
-  }
-  box-sizing: border-box;
-}
 .header {
   display: flex;
   align-items: center;
diff --git a/modules/documentation/front/src/Index.vue b/modules/documentation/front/src/Index.vue
index b280f43a..e287ab89 100644
--- a/modules/documentation/front/src/Index.vue
+++ b/modules/documentation/front/src/Index.vue
@@ -92,20 +92,6 @@ async function goTo(leaf) {
 h2 {
   margin-top: 0;
 }
-.container {
-  display: flex;
-  gap: 10px;
-  width: 100%;
-  margin: auto;
-  height: calc(100vh - 400px - 40px);
-  @media (max-width: 1300px) {
-    height: calc(100vh - 500px - 40px);
-  }
-  @media (max-width: 800px) {
-    height: calc(100vh - 650px - 40px);
-  }
-  box-sizing: border-box;
-}
 .markdown {
   background-color: #fff;
   border-radius: 10px;
diff --git a/modules/git/front/src/Git.vue b/modules/git/front/src/Git.vue
index a523420e..e71da5a2 100644
--- a/modules/git/front/src/Git.vue
+++ b/modules/git/front/src/Git.vue
@@ -1,82 +1,91 @@
 <template>
-  <button @click="openReview">Review from AI</button>
-  <div class="git-section" v-if="service.git">
-    <section-cmp v-if="git && git.branches" class="section-branches"
-      :key="service.label"
-      header="Branches"
-      :noStyle="noStyle"
-      :actions="[
-        { label: '', click: () => addBranch(), icon: 'fas fa-plus', small: true },
-        { label: '', click: () => gitFetch(), icon: 'fas fa-sync' },
-        { label: pullLabel, hidden: git.delta != null && git.delta >= 0, click: () => pull(), icon: 'fas fa-download' }
-      ]">
-      <div>
-        <input type="text" placeholder="Search branch..." v-model="searchBranch">
-      </div>
-      <div>
-        <input type="checkbox" v-model="displayOnlyLocalBranches">
-        Display only local branches
-      </div>
-      <ul class="branches">
-        <li v-for="(branch, i) of displayBranches" :key="'branch' +i"
-          @click="branch?.name ? changeBranch(branch.name) : null" :class="{
-          active: branch?.name === service?.git?.currentBranch,
-          merged: branch?.merged
-        }">
-          <div class="actions">
-            <div v-if="branch?.merged" title="Already merged into develop">
-              <i class="fas fa-object-group" aria-hidden="true"></i>
+  <div class="git-root">
+    <div class="git-section" v-if="service.git">
+      <section-cmp v-if="git && git.branches" class="section-branches"
+        :key="service.label"
+        header="Branches"
+        :noStyle="noStyle"
+        :actions="[
+          { hover: 'Create branch', label: '', click: () => addBranch(), icon: 'fas fa-plus', small: true },
+          { hover: 'Fetch all', label: '', click: () => gitFetch(), icon: 'fas fa-sync' },
+          {
+            hover: 'Pull',
+            label: pullLabel,
+            hidden: git.delta != null && git.delta >= 0,
+            click: () => pull(),
+            icon: 'fas fa-download'
+          }
+        ]">
+        <div>
+          <input type="text" placeholder="Search branch..." v-model="searchBranch">
+        </div>
+        <div>
+          <input type="checkbox" v-model="displayOnlyLocalBranches">
+          Display only local branches
+        </div>
+        <ul class="branches">
+          <li v-for="(branch, i) of displayBranches" :key="'branch' +i"
+            @click="branch?.name ? changeBranch(branch.name) : null" :class="{
+            active: branch?.name === service?.git?.currentBranch,
+            merged: branch?.merged
+          }">
+            <div class="actions">
+              <div v-if="branch?.merged" title="Already merged into develop">
+                <i class="fas fa-object-group" aria-hidden="true"></i>
+              </div>
+              <div v-if="branch?.isRemote" title="Is in remote not local">
+                <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
+              </div>
+              {{branch?.name}}
             </div>
-            <div v-if="branch?.isRemote" title="Is in remote not local">
-              <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
+            <div class="actions">
+              <button class="small" @click.stop="branch?.name ? deleteBranch(branch.name) : null" v-if="branch.canDelete">
+                <i class="fas fa-trash" aria-hidden="true"></i>
+              </button>
             </div>
-            {{branch?.name}}
-          </div>
-          <div class="actions">
-            <button class="small" @click.stop="branch?.name ? deleteBranch(branch.name) : null" v-if="branch.canDelete">
-              <i class="fas fa-trash" aria-hidden="true"></i>
-            </button>
-          </div>
-        </li>
-      </ul>
-    </section-cmp>
-    <section-cmp v-if="git?.status" class="section-status" header="Status" :noStyle="noStyle" :actions="[
-      {label: 'Stash', click: () => stash(), icon: 'fas fa-sun',hidden: !git.status.filter(a =>a).length},
-      {label: 'Unstash', click: () => stashPop(), icon: 'far fa-sun', hidden: !git.stash},
-      {label: 'Reset', click: () => reset(), icon: 'fas fa-eraser'}
-      ]">
-      <ul v-if="git.status.filter(a =>a).length">
-        <li v-for="(status, i) of git.status" :key="'status-' + i">
-          <span v-html="colorStatus(status)"></span>
-          <div class="actions">
-            <i class="fas fa-external-link-alt" aria-hidden="true" @click.stop="openInVsCode(status)"></i>
-            <i class="fas fa-times" aria-hidden="true" @click.stop="checkoutFile(status)"></i>
-          </div>
-        </li>
-      </ul>
-      <div v-else class="check">
-        <i class="fas fa-check" aria-hidden="true"></i>
-      </div>
-    </section-cmp>
-  </div>
-  <div class="loader" v-if="loader">
-    <i class="fas fa-spinner"></i>
-  </div>
-  <section-cmp class="section-branches">
-    <div>
-      Display all branches:
-      <input type="checkbox" v-model="graphOnAll" @change="updateGraph">
+          </li>
+        </ul>
+      </section-cmp>
+      <section-cmp v-if="git?.status" class="section-status" header="Status" :noStyle="noStyle" :animateActions="true" :actions="[
+        {small: true, hover: 'Stash', click: () => stash(), icon: 'fas fa-sun',hidden: !git.status.filter(a =>a).length},
+        {small: true, hover: 'Unstash', click: () => stashPop(), icon: 'far fa-sun', hidden: !git.stash},
+        {small: true, hover: 'Reset', click: () => reset(), icon: 'fas fa-eraser'},
+        {small: true, hover: 'Review from AI', click: () => openReview(), icon: 'fas fa-brain'}
+        ]">
+        <ul v-if="git.status.filter(a =>a).length">
+          <li v-for="(status, i) of git.status" :key="'status-' + i">
+            <span v-html="colorStatus(status)"></span>
+            <div class="actions">
+              <i class="fas fa-external-link-alt" aria-hidden="true" @click.stop="openInVsCode(status)"></i>
+              <i class="fas fa-times" aria-hidden="true" @click.stop="checkoutFile(status)"></i>
+            </div>
+          </li>
+        </ul>
+        <div v-else class="check">
+          <i class="fas fa-check" aria-hidden="true"></i>
+        </div>
+      </section-cmp>
+    </div>
+    <div class="loader" v-if="loader">
+      <i class="fas fa-spinner"></i>
     </div>
-    <div class="input-container">
-      <i class="fas fa-search"></i>
-      <input type="text" v-model="search" placeholder="Search..." @keypress.enter="nextSearch">
+    <section-cmp class="section-history">
       <div>
-        <button @click="previousSearch"><i class="fas fa-chevron-up"></i></button>
-        <button @click="nextSearch"><i class="fas fa-chevron-down"></i></button>
+        Display all branches:
+        <input type="checkbox" v-model="graphOnAll" @change="updateGraph">
       </div>
-    </div>
-    <div ref="terminalRef"></div>
-  </section-cmp>
+      <div class="input-container">
+        <i class="fas fa-search"></i>
+        <input type="text" v-model="search" placeholder="Search..." @keypress.enter="nextSearch">
+        <div>
+          <button @click="previousSearch"><i class="fas fa-chevron-up"></i></button>
+          <button @click="nextSearch"><i class="fas fa-chevron-down"></i></button>
+        </div>
+      </div>
+      <div ref="terminalRef"></div>
+    </section-cmp>
+  </div>
+
   <modal ref="reset-modal" cancelString="No" validateString="Yes">
     <template #header>
       Reset
@@ -434,6 +443,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.git-root {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  box-sizing: border-box;
+}
 button {
   position: relative;
   z-index: 2;
@@ -459,9 +474,12 @@ button {
   align-items: stretch;
   margin: auto;
   height: 100%;
-  gap: 10px;
+  width: 100%;
+  flex-grow: 1;
+  gap: 20px;
+  z-index: 100;
   &>* {
-    max-height: 190px;
+    max-height: 400px;
   }
   .check {
     display: flex;
diff --git a/modules/github/front/src/Index.vue b/modules/github/front/src/Index.vue
index 320a58d2..068222c5 100644
--- a/modules/github/front/src/Index.vue
+++ b/modules/github/front/src/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <section-cmp class="configs-root" v-if="service" :key="service.label">
+  <section-cmp v-if="service" :key="service.label">
     <div class="header">
       <h2>Github</h2>
       <div class="actions">
@@ -314,22 +314,6 @@ h3 {
   align-items: center;
 }
 
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  width: 100%;
-  margin: auto;
-  height: calc(100vh - 400px - 40px);
-
-  @media (max-width: 1300px) {
-    height: calc(100vh - 500px - 40px);
-  }
-
-  @media (max-width: 800px) {
-    height: calc(100vh - 650px - 40px);
-  }
-}
 .chooser {
   .avatars {
     display: flex;
@@ -343,9 +327,6 @@ h3 {
   }
 }
 .content {
-  .section {
-    margin: 40px 10px;
-  }
   .avatars>a {
     display: flex;
     align-items: center;
diff --git a/modules/logs/front/src/Logs.vue b/modules/logs/front/src/Logs.vue
index 0eb378ee..ce8bd161 100644
--- a/modules/logs/front/src/Logs.vue
+++ b/modules/logs/front/src/Logs.vue
@@ -1,57 +1,5 @@
 <template>
-  <div  v-if="service.enabled"
-    :style="{ maxHeight: isInMultiMode ? '400px' : 'inherit' }"
-  >
-    <div class="header">
-      <template v-if="countJSON || countDebug">
-        <div class="input-container">
-          <i class="fas fa-search"></i>
-          <input type="text" v-model="jsonPathSearch" placeholder="JSON path...">
-        </div>
-        <div class="separator"></div>
-      </template>
-      <div class="input-container">
-        <i class="fas fa-times"></i>
-        <input
-          type="text" v-model="filterSearch"
-          :placeholder="isInclude ? 'Include...' : 'Exclude...'">
-        <div class="radios">
-          <div>
-            <input type="radio" id="include" :checked="isInclude" :value="isInclude" @input="isInclude = true">
-            <label for="include">Include</label>
-          </div>
-          <div>
-            <input type="radio" id="exclude" :checked="!isInclude" :value="!isInclude" @input="isInclude = false">
-            <label for="exclude">Exclude</label>
-          </div>
-        </div>
-      </div>
-      <div class="separator"></div>
-      <div class="input-container">
-        <div class="radios">
-          <div>
-            <div>Display</div>
-            <select v-model="numberToDisplay">
-              <option :value="10">10</option>
-              <option :value="50">50</option>
-              <option :value="100">100</option>
-              <option :value="150">150</option>
-              <option :value="200">200</option>
-              <option :value="500">500</option>
-              <option :value="800">800</option>
-              <option :value="1000">1000</option>
-              <option :value="1500">1500</option>
-              <option :value="2000">2000</option>
-            </select>
-            <div>lines</div>
-          </div>
-          <div>
-            <input type="checkbox" :checked="simplifiedMode" v-model="simplifiedMode">
-            <label for="exclude">Simplified mode</label>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div  v-if="service.enabled" class="logs-root">
     <div class="main-content">
       <div class="pids-container" v-if="pids">
         <div class="pid" :class="{active: !currentPidView}" @click="currentPidView = null; scroll(true)">All</div>
@@ -73,7 +21,7 @@
           </template>
         </Popover>
       </div>
-      <sectionCmp :header="'Logs' + (currentPidView?.raw ? `: ${currentPidView?.raw}` : '')" :noStyle="noStyle"
+      <sectionCmp :noStyle="noStyle"
         :actions="[
           { icon: 'fas fa-list', label: `${countLine}`, small: true, hidden: !countLine, active: !mode, click: () => mode = '' },
           { icon: 'fas fa-bug', label: `${countDebug}`, small: true, hidden: !countDebug, active: mode === 'debug', click: () => mode = 'debug' },
@@ -81,6 +29,61 @@
           { icon: 'fas fa-chevron-down', click: () => scroll(true) },
           { icon: 'fas fa-trash', click: () => clear() },
         ]" class="terminal-container">
+          <template #header>
+            <h4 class="header-title">{{ 'Logs' + (currentPidView?.raw ? `: ${currentPidView?.raw}` : '') }}</h4>
+            <div class="header">
+              <template v-if="countJSON || countDebug">
+                <div class="input-container">
+                  <i class="fas fa-search"></i>
+                  <input type="text" v-model="jsonPathSearch" placeholder="JSON path...">
+                </div>
+                <div class="separator"></div>
+              </template>
+              <div class="input-container">
+                <input
+                  type="text" v-model="filterSearch"
+                  :placeholder="isInclude ? 'Include...' : 'Exclude...'">
+                <div class="radios">
+                  <div>
+                    <input type="radio" id="include" :checked="isInclude" :value="isInclude"
+                      @input="isInclude = true">
+                    <label for="include">Include</label>
+                  </div>
+                  <div>
+                    <input type="radio" id="exclude" :checked="!isInclude" :value="!isInclude"
+                      @input="isInclude = false">
+                    <label for="exclude">Exclude</label>
+                  </div>
+                </div>
+              </div>
+              <div class="separator"></div>
+              <div class="input-container">
+                <div class="radios">
+                  <div>
+                    <div>Display</div>
+                    <select v-model="numberToDisplay">
+                      <option :value="10">10</option>
+                      <option :value="50">50</option>
+                      <option :value="100">100</option>
+                      <option :value="150">150</option>
+                      <option :value="200">200</option>
+                      <option :value="500">500</option>
+                      <option :value="800">800</option>
+                      <option :value="1000">1000</option>
+                      <option :value="1500">1500</option>
+                      <option :value="2000">2000</option>
+                    </select>
+                    <div>lines</div>
+                  </div>
+                  <div>
+                    <input type="checkbox" :checked="simplifiedMode" v-model="simplifiedMode">
+                    <label for="exclude">Simplified mode</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            </template>
           <Transition name="slide-fade">
           <div class="terminal-panel" v-if="selectedLine">
             <div class="terminal-panel-bg" @click="selectedLine = null"></div>
@@ -707,6 +710,9 @@ function setSelectedLine(line) {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+.logs-root {
+  height: 100%;
+}
 #terminal {
   width: 100%;
   position: relative;
@@ -719,14 +725,21 @@ function setSelectedLine(line) {
   font-size: 2em;
   color: #777
 }
+
+.header-title {
+  margin: 0;
+
+}
 .header {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
+  font-weight: normal !important;
   position: relative;
   z-index: 1;
-  margin: 10px 0;
+  margin: 0;
+  font-size: 0.7em !important;
   &>.separator {
     border-left: 1px solid lightgrey;
     height: 40px;
@@ -735,15 +748,13 @@ function setSelectedLine(line) {
 .terminal-container {
   width: 100%;
   margin: auto;
-  height: calc(100vh - 400px - 40px);
   position: relative;
-  @media (max-width: 1300px) {
-    height: calc(100vh - 500px - 40px);
-  }
-  @media (max-width: 800px) {
-    height: calc(100vh - 650px - 40px);
-  }
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
   box-sizing: border-box;
+  overflow: auto;
+  flex-grow: 1;
   .terminal-panel {
     position: absolute;
     z-index: 2;
@@ -792,6 +803,7 @@ function setSelectedLine(line) {
 .main-content {
   display: flex;
   flex-direction: column;
+  height: 100%;
   .pids-container {
     display: flex;
     flex-wrap: wrap;
@@ -844,8 +856,8 @@ function setSelectedLine(line) {
   background: none;
   right: 3px;
   top: 0;
-  width: calc(100% - 6px);
-  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
+  border: 1px solid #dbdbdb;
+  box-sizing: border-box;
   margin: 0;
   z-index: 100;
   .section {
diff --git a/modules/mongo/front/src/Index.vue b/modules/mongo/front/src/Index.vue
index 3fe1b797..1e73152e 100644
--- a/modules/mongo/front/src/Index.vue
+++ b/modules/mongo/front/src/Index.vue
@@ -1,26 +1,28 @@
 <template>
   <div class="uuid-root">
     <h1>MongoDB</h1>
-    <section-cmp header="ObjectId">
-      <div class="section-content">
-        <h2>ObjectId('{{ uuid }}')</h2>
-        <button @click="generate">
-          <i class="fas fa-random"></i>
-          Regenerate
-        </button>
-      </div>
-    </section-cmp>
-    <section-cmp header="Decode ObjectId">
-      <div class="section-content">
-        <h2>{{ decodedObjectId?.date?.format?.('YYYY-MM-DD hh:mm:ss') }}</h2>
-        <input type="text" v-model="uuid">
-      </div>
-    </section-cmp>
-    <section-cmp header="Encode Date">
-      <div class="section-content">
-        <input type="datetime-local" v-model="date">
-      </div>
-    </section-cmp>
+    <div class="sections">
+      <section-cmp header="ObjectId">
+        <div class="section-content">
+          <h2>ObjectId('{{ uuid }}')</h2>
+          <button @click="generate">
+            <i class="fas fa-random"></i>
+            Regenerate
+          </button>
+        </div>
+      </section-cmp>
+      <section-cmp header="Decode ObjectId">
+        <div class="section-content">
+          <h2>{{ decodedObjectId?.date?.format?.('YYYY-MM-DD hh:mm:ss') }}</h2>
+          <input type="text" v-model="uuid">
+        </div>
+      </section-cmp>
+      <section-cmp header="Encode Date">
+        <div class="section-content">
+          <input type="datetime-local" v-model="date">
+        </div>
+      </section-cmp>
+    </div>
   </div>
 </template>
 
@@ -63,6 +65,11 @@ function decodeObjectId(objectId) {
 </script>
 
 <style scoped lang="scss">
+.sections {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
 .uuid-root,.section-content {
   display: flex;
   flex-direction: column;
diff --git a/modules/npm/front/src/Npm.vue b/modules/npm/front/src/Npm.vue
index 3a2ad590..bcbd14ec 100644
--- a/modules/npm/front/src/Npm.vue
+++ b/modules/npm/front/src/Npm.vue
@@ -1,6 +1,6 @@
 <template>
-  <div header="Npm" v-if="isNpm && packageJson">
-    <section-cmp  :key="service.label" header="Scripts" maxHeight="400px">
+  <div class="npm-root" v-if="isNpm && packageJson">
+    <section-cmp class="scripts-container" :key="service.label" header="Scripts">
       <div class="command-container">
         <div class=button-container>
           <button @click="run('install')">
@@ -26,7 +26,7 @@
         </div>
       </div>
     </section-cmp>
-    <section-cmp  :key="service.label" v-if="!isInMultiMode">
+    <section-cmp class="dependencies-container" :key="service.label" v-if="!isInMultiMode">
       <div class="categ"
       v-for="categ of ['dependencies','devDependencies'].filter(categ => packageJson[categ])"
       :key="categ">
@@ -141,6 +141,21 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.npm-root {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+.scripts-container {
+  flex-grow: 1;
+  width: auto;
+  height: max-content;
+  min-width: 300px;
+}
+.dependencies-container {
+  flex-grow: 4;
+  width: auto;
+}
 button {
   width: 20px;
   height: 20px;
diff --git a/modules/regex/front/src/Index.vue b/modules/regex/front/src/Index.vue
index 84138c54..c5b5513c 100644
--- a/modules/regex/front/src/Index.vue
+++ b/modules/regex/front/src/Index.vue
@@ -95,6 +95,9 @@ watchEffect(async () => {
 </script>
 
 <style scoped lang="scss">
+h1 {
+  flex-grow: 0 !important;
+}
 .json-root,.section-content {
   display: flex;
   flex: 1 1;
diff --git a/package.json b/package.json
index c906c15a..c19d6317 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@clabroche/common-typings": "workspace:^",
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
-    "@iryu54/stack-monitor": "^1.17.14",
+    "@iryu54/stack-monitor": "^1.17.24",
     "@lerna-lite/changed": "^2.5.0",
     "@lerna-lite/cli": "^2.5.0",
     "@lerna-lite/diff": "^2.5.0",
diff --git a/stack.js b/stack.js
index 06d19571..44a9769f 100644
--- a/stack.js
+++ b/stack.js
@@ -12,6 +12,11 @@ const groups = {
 /** @type {import('@clabroche/common-typings').StackFile} */
 const stack = (stackMonitor) => ({
   monorepo: true,
+  logParsers: [
+    stackMonitor.parsers.links,
+    stackMonitor.parsers.jsons,
+    stackMonitor.parsers.debug,
+  ],
   services: [
     {
       label: 'Server',
diff --git a/watch.js b/watch.js
index 02858c05..3593097c 100644
--- a/watch.js
+++ b/watch.js
@@ -113,16 +113,21 @@ function watchDeps(watchableDeps, cb = (
 function getWatchableDeps(path) {
   const currentPackage = getPackageInfoFromPath(path);
   if (currentPackage) {
-    const depsName = getDependencies(currentPackage?.name);
-    /** @type {import('workspace-tools').PackageInfos[number][]} */
+    const ignoreDependencies = [];
+    if (currentPackage.name === '@clabroche/servers-server') {
+      ignoreDependencies.push('@clabroche/fronts-app');
+      ignoreDependencies.push('@clabroche/modules-plugins-loader-front');
+      ignoreDependencies.push((name) => name.endsWith('-front'));
+    }
+    console.log(JSON.stringify(['stack-monitor', ignoreDependencies], (_, v) => (typeof v === 'function' ? '[func]' : v)));
+    const depsName = getDependencies(currentPackage?.name, ignoreDependencies);
     const deps = depsName.map((depName) => getPackageInfos('.')[depName]);
-    // if(currentPackage.scripts?.watch)deps.push(currentPackage);
     return deps;
   }
   return [];
 }
 
-function getDependencies(packageName, recursiveAggr = []) {
+function getDependencies(packageName, ignoreDependencies = [], recursiveAggr = []) {
   const dependencies = (getPackageInfos(__dirname)[packageName].dependencies || {});
   const devDependencies = (getPackageInfos(__dirname)[packageName].devDependencies || {});
   const deps = [
@@ -130,9 +135,14 @@ function getDependencies(packageName, recursiveAggr = []) {
     ...Object.keys(devDependencies),
   ].filter((f) => (f.startsWith('@clabroche') || f.startsWith('@iryu54')) && (dependencies[f] === 'workspace:*' || devDependencies[f] === 'workspace:*'));
   deps.forEach((f) => {
-    if (!recursiveAggr.includes(f)) {
+    const isIgnored = !ignoreDependencies.some((ignoreCondition) => (
+      typeof ignoreCondition === 'function'
+        ? ignoreCondition(f)
+        : f === ignoreCondition
+    ));
+    if (!recursiveAggr.includes(f) && isIgnored) {
       recursiveAggr.push(f);
-      deps.map((dep) => getDependencies(dep, recursiveAggr)).flat();
+      deps.map((dep) => getDependencies(dep, ignoreDependencies, recursiveAggr)).flat();
     }
   });
   return recursiveAggr;
diff --git a/yarn.lock b/yarn.lock
index 28e2e541..5ef410ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1561,7 +1561,7 @@ __metadata:
     "@clabroche/common-typings": "workspace:^"
     "@commitlint/cli": "npm:^17.6.7"
     "@commitlint/config-conventional": "npm:^17.6.7"
-    "@iryu54/stack-monitor": "npm:^1.17.14"
+    "@iryu54/stack-monitor": "npm:^1.17.24"
     "@lerna-lite/changed": "npm:^2.5.0"
     "@lerna-lite/cli": "npm:^2.5.0"
     "@lerna-lite/diff": "npm:^2.5.0"
@@ -2121,18 +2121,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@iryu54/stack-monitor@npm:^1.17.14":
-  version: 1.17.14
-  resolution: "@iryu54/stack-monitor@npm:1.17.14"
+"@iryu54/stack-monitor@npm:^1.17.24":
+  version: 1.17.24
+  resolution: "@iryu54/stack-monitor@npm:1.17.24"
   dependencies:
     ansi-to-html: "npm:^0.7.2"
     bluebird: "npm:^3.7.2"
     command-exists: "npm:^1.2.9"
-    cookie-parser: "npm:~1.4.6"
+    cookie-parser: "npm:^1.4.6"
     cors: "npm:^2.8.5"
     dayjs: "npm:^1.11.10"
     debounce: "npm:^2.0.0"
     dot-object: "npm:^2.1.4"
+    dotenv: "npm:^16.4.2"
     express: "npm:^4.18.2"
     express-async-errors: "npm:^3.1.1"
     fast-sort: "npm:^3.4.0"
@@ -2144,16 +2145,17 @@ __metadata:
     mongodb: "npm:^6.3.0"
     octokit: "npm:^3.1.2"
     open: "npm:^8"
-    openai: "npm:^4.26.0"
+    openai: "npm:^4.26.1"
     os-utils: "npm:0.0.14"
     pidusage-tree: "npm:^2.0.5"
     ps-tree: "npm:^1.2.0"
     socket.io: "npm:^4.7.4"
     typescript: "npm:^5.3.3"
     uuid: "npm:^9.0.1"
+    vue-router: "npm:^4.2.5"
   bin:
-    stack-monitor: dist/www
-  checksum: 0f08624fb5c888cefc7e686069a22a86da0eb27f0460c0f96e600ce6a7775afaad0e0199cfba3ef4a3e59208f857c699503a5df8fc5a97193bbef01b16411c8a
+    stack-monitor: www
+  checksum: 412e5a6aab596f17af26c4885f6e483ef83b25d049c767bb7b60d5bc03c0cbbed78dc0499dd217cf7d86ea3c3dca86d422a8a4de8d55e2783418f95b01377404
   languageName: node
   linkType: hard
 
@@ -7043,7 +7045,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cookie-parser@npm:^1.4.6, cookie-parser@npm:~1.4.6":
+"cookie-parser@npm:^1.4.6":
   version: 1.4.6
   resolution: "cookie-parser@npm:1.4.6"
   dependencies:
@@ -13716,25 +13718,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"openai@npm:^4.26.0":
-  version: 4.26.0
-  resolution: "openai@npm:4.26.0"
-  dependencies:
-    "@types/node": "npm:^18.11.18"
-    "@types/node-fetch": "npm:^2.6.4"
-    abort-controller: "npm:^3.0.0"
-    agentkeepalive: "npm:^4.2.1"
-    digest-fetch: "npm:^1.3.0"
-    form-data-encoder: "npm:1.7.2"
-    formdata-node: "npm:^4.3.2"
-    node-fetch: "npm:^2.6.7"
-    web-streams-polyfill: "npm:^3.2.1"
-  bin:
-    openai: bin/cli
-  checksum: 19171092d2cbdb1d596ca63cd640ee911a932109b648abead1198f3c6fbefe070f229977bcababfc30f70ca184d43d8aee4c7d7f1b457eb38559bafe552f31ff
-  languageName: node
-  linkType: hard
-
 "openai@npm:^4.26.1":
   version: 4.26.1
   resolution: "openai@npm:4.26.1"