fix: use recette status log

components/BackupRun.vue

@@ -107,6 +107,12 @@ type ScriptResult = {
   downloadFolders: string[]
 }
 
+type ApiErrorLike = {
+  data?: {
+    statusMessage?: string
+  }
+}
+
 const emit = defineEmits<{
   result: [payload: ScriptResult]
 }>()
@@ -171,7 +177,15 @@ const runScript = async (key: string) => {
       downloadFolders: data.downloadFolders || []
     })
   } catch (error: unknown) {
-    message.value = (error as any)?.data?.statusMessage || "Erreur execution script"
+    const errorMessage =
+      typeof error === "object" &&
+      error !== null &&
+      "data" in error &&
+      typeof (error as ApiErrorLike).data?.statusMessage === "string"
+        ? (error as ApiErrorLike).data?.statusMessage
+        : null
+
+    message.value = errorMessage || "Erreur execution script"
     emit("result", {
       key,
       label: scripts.value.find((item) => item.key === key)?.label || key,

components/StatusSite.vue

@@ -24,17 +24,27 @@
       v-else
       :key="`${row.label}-${row.url}`"
       class="status-row"
-      :class="row.status === 200 ? 'row-ok' : 'row-error'"
+      :class="row.ok ? 'row-ok' : 'row-error'"
     >
-      <div class="flex items-center gap-3">
-        <span class="status-dot" :class="row.status === 200 ? 'dot-ok' : 'dot-error'" />
-        <span class="font-display text-sm font-semibold text-m-text">
-          {{ row.label }}
+      <div class="status-copy">
+        <div class="flex items-center gap-3">
+          <span class="status-dot" :class="row.ok ? 'dot-ok' : 'dot-error'" />
+          <span class="font-display text-sm font-semibold text-m-text">
+            {{ row.label }}
+          </span>
+        </div>
+        <p class="status-detail">
+          {{ row.detail }}
+        </p>
+      </div>
+      <div class="status-meta">
+        <span class="font-mono text-xs" :class="row.ok ? 'text-m-success' : 'text-m-error'">
+          {{ statusLabel(row) }}
+        </span>
+        <span class="status-time">
+          {{ formatCheckedAt(row.checkedAt) }}
         </span>
       </div>
-      <span class="font-mono text-xs" :class="row.status === 200 ? 'text-m-success' : 'text-m-error'">
-        {{ statusLabel(row.status) }}
-      </span>
     </div>
   </div>
 </template>
@@ -51,6 +61,7 @@ interface StatusRow {
   ok: boolean
   status: number
   checkedAt: string
+  detail: string
   error?: string
 }
 
@@ -74,10 +85,24 @@ const loading = ref(true)
 const initialized = ref(false)
 let timer: ReturnType<typeof setInterval> | null = null
 
-const statusLabel = (status: number) => {
-  if (status === 200) return "HTTP 200"
-  if (status === 0) return "Injoignable"
-  return `KO (${status})`
+const statusLabel = (row: StatusRow) => {
+  if (row.ok) return "OK"
+  if (row.status === 0) return "DOWN"
+  return `KO (${row.status})`
+}
+
+const formatCheckedAt = (checkedAt: string) => {
+  const date = new Date(checkedAt)
+
+  if (Number.isNaN(date.getTime())) {
+    return checkedAt
+  }
+
+  return date.toLocaleTimeString("fr-FR", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  })
 }
 
 const checkStatus = async () => {
@@ -95,6 +120,7 @@ const checkStatus = async () => {
         ok: false,
         status: 0,
         checkedAt: new Date().toISOString(),
+        detail: "Lecture du statut impossible",
         error: error instanceof Error ? error.message : String(error)
       }
     ]
@@ -149,6 +175,7 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 1rem;
   min-height: 3.2rem;
   padding: 0.85rem 1rem;
   border-radius: 14px;
@@ -157,6 +184,30 @@ onBeforeUnmount(() => {
   transition: all 0.2s ease;
 }
 
+.status-copy {
+  min-width: 0;
+}
+
+.status-detail {
+  margin: 0.35rem 0 0;
+  color: rgb(var(--m-muted));
+  font-size: 0.78rem;
+  line-height: 1.4;
+}
+
+.status-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.2rem;
+  flex-shrink: 0;
+}
+
+.status-time {
+  font-size: 0.72rem;
+  color: rgb(var(--m-muted));
+}
+
 .row-ok {
   border-color: rgb(var(--m-success) / 0.08);
 }