From daaea86173122bd0b8c15da5ca3d050db94bddc8 Mon Sep 17 00:00:00 2001
From: Pier-Jean Malandrino <pierjean.malandrino@scub.net>
Date: Fri, 10 Apr 2026 22:49:40 +0200
Subject: [PATCH] feat(#80): OpenSearch connection status indicator in sidebar

Green/red dot in the sidebar footer showing OpenSearch connectivity.
Tooltip: 'OpenSearch connected' / 'OpenSearch unreachable'.
Polls every 30s via ingestionStore.startPolling(). GET /api/ingestion/status
now returns opensearchConnected boolean from a live ping.
---
 frontend/src/shared/ui/AppSidebar.vue | 59 ++++++++++++++++++++++++++-
 1 file changed, 58 insertions(+), 1 deletion(-)

diff --git a/frontend/src/shared/ui/AppSidebar.vue b/frontend/src/shared/ui/AppSidebar.vue
index acf7523..16ef716 100644
--- a/frontend/src/shared/ui/AppSidebar.vue
+++ b/frontend/src/shared/ui/AppSidebar.vue
@@ -79,6 +79,21 @@
     </nav>
 
     <div class="sidebar-footer">
+      <div
+        v-if="ingestionStore.available"
+        class="opensearch-status"
+        :title="
+          ingestionStore.opensearchConnected
+            ? t('ingestion.opensearchConnected')
+            : t('ingestion.opensearchDisconnected')
+        "
+      >
+        <span
+          class="status-dot"
+          :class="ingestionStore.opensearchConnected ? 'connected' : 'disconnected'"
+        />
+        <span class="status-label">OpenSearch</span>
+      </div>
       <a
         class="github-badge"
         href="https://github.com/scub-france/Docling-Studio"
@@ -97,12 +112,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted, onBeforeUnmount } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 import { useI18n } from '../i18n'
 import { useFeatureFlagStore } from '../../features/feature-flags/store'
+import { useIngestionStore } from '../../features/ingestion/store'
 
 const featureStore = useFeatureFlagStore()
+const ingestionStore = useIngestionStore()
 const version = computed(() => featureStore.appVersion)
 const route = useRoute()
 const { t } = useI18n()
@@ -110,6 +127,15 @@ const { t } = useI18n()
 defineProps({
   open: { type: Boolean, default: false },
 })
+
+onMounted(() => {
+  ingestionStore.checkAvailability()
+  ingestionStore.startPolling(30_000)
+})
+
+onBeforeUnmount(() => {
+  ingestionStore.stopPolling()
+})
 </script>
 
 <style scoped>
@@ -196,4 +222,35 @@ defineProps({
   color: var(--text-muted);
   font-family: 'IBM Plex Mono', monospace;
 }
+
+.opensearch-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 10px;
+  cursor: default;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-dot.connected {
+  background: var(--success, #22c55e);
+  box-shadow: 0 0 4px var(--success, #22c55e);
+}
+
+.status-dot.disconnected {
+  background: var(--error, #ef4444);
+  box-shadow: 0 0 4px var(--error, #ef4444);
+}
+
+.status-label {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: 'IBM Plex Mono', monospace;
+}
 </style>