From b1303cf05dc04539e9088326519a1264dc7b4599 Mon Sep 17 00:00:00 2001
From: TheMeinerLP <github@themeinerlp.dev>
Date: Sat, 8 Aug 2026 22:41:43 +0200
Subject: [PATCH] fix(frontend): tell the user what is wrong instead of showing
 nothing

Four places reported failure by not reporting it, and two of them lost
the message entirely.

The console rendered an empty white rectangle whenever the log stream
did not come up. The only signal was a toast, which faded after a few
seconds and left no trace, so the panel was indistinguishable from a
server that simply had nothing to say. It now carries its own state:
connecting, connected but quiet, or disconnected with the reason and a
Reconnect button. The command input is disabled while the stream is
down instead of silently swallowing what gets typed into it. The three
toasts are gone, because the information belongs where the reader is
already looking.

Toasts appeared in the top right corner, which is where the header
keeps the account name and the logout button. While one was up, logging
out was not clickable. They come up bottom right now, decided once in
helpers/toast.js rather than per call site. Four files reached for
`createToast` directly and picked a corner each; one login attempt
could put its success message in one corner and its failure in another.

The sign-in button was filled light grey on white, the same treatment
this interface gives a disabled control, and the fields carried no
label beyond a placeholder that disappears as soon as anything is
typed. It is a primary button now, in the same blue the token page
already uses, with real labels and the failure shown inside the dialog
rather than behind it.

Upload sat inside the file list as a rounded row the same size and
shape as a directory entry, told apart from real content by the colour
of a dot. It is a labelled drop area below the listing now, so an
action no longer looks like content.

Two defects surfaced while reading that code and are fixed here:

- Nothing ever closed the log stream. `close()` on unmount was
  commented out, so every visit to the tab left another EventSource
  running against the server. Verified: one connection per mount, none
  left behind after leaving.
- Every `.catch` that formatted an error read `error.response.status`
  and `error.response.data.message` directly. That works for a server
  that answered and throws for one that did not, and the throw happened
  inside the catch, taking the handler with it. A refused connection or
  an unreachable host, the most common failure of all, produced no
  message at all. There is one `errorMessage` helper now, lifted out of
  the tokens store where a correct version was already hiding, and the
  five call sites use it.

Verified against the previous state view by view: overview and tokens
come out pixel identical, settings differs only in the two bands where
the toast moved from one corner to the other, and the dashboard only in
its live values. Console is the intended redesign.

Also removes five stray semicolons that eslint flagged in the console
store, which the rewrite touched anyway. Errors on the branch drop from
seven to two; both survivors sit in files this change does not open.

Signed-off-by: TheMeinerLP <github@themeinerlp.dev>
---
 .../components/browser/DeleteEntryModal.vue   |   6 +-
 .../src/components/browser/FileList.vue       |   6 +-
 .../src/components/browser/FileUpload.vue     |  41 +++--
 .../src/components/console/ConsoleView.vue    | 152 +++++++++++-------
 .../src/components/header/LoginModal.vue      | 109 +++++++++----
 reposilite-frontend/src/helpers/toast.js      |  37 ++++-
 reposilite-frontend/src/pages/IndexPage.vue   |   2 +-
 .../src/store/configuration.js                |  10 +-
 .../src/store/console/connection.js           |  61 ++++++-
 reposilite-frontend/src/store/tokens.js       |   5 +-
 10 files changed, 294 insertions(+), 135 deletions(-)

diff --git a/reposilite-frontend/src/components/browser/DeleteEntryModal.vue b/reposilite-frontend/src/components/browser/DeleteEntryModal.vue
index 6e411867f..6c0423c27 100644
--- a/reposilite-frontend/src/components/browser/DeleteEntryModal.vue
+++ b/reposilite-frontend/src/components/browser/DeleteEntryModal.vue
@@ -19,7 +19,7 @@ import { VueFinalModal } from 'vue-final-modal'
 import '@vueform/toggle/themes/default.css'
 import CloseIcon from '../icons/CloseIcon.vue'
 import { useSession } from '../../store/session'
-import { createToast } from 'mosha-vue-toastify'
+import { createErrorToast, errorMessage } from '../../helpers/toast'
 import { computed } from 'vue'
 import useQualifier from '../../store/qualifier'
 import { property } from '../../helpers/vue-extensions'
@@ -35,9 +35,7 @@ const { refreshQualifier } = useQualifier()
 const deleteEntry = ({ path, file }) => {
   client.value.maven.delete(path + '/' + file)
     .then(() => refreshQualifier())
-    .catch(error => createToast(`Cannot delete file - ${error.response.status}: ${error.response.data.message}`, {
-      type: 'danger'
-    }))
+    .catch(error => createErrorToast(`Cannot delete file: ${errorMessage(error)}`))
 }
 
 const deleteAndClose = () => {
diff --git a/reposilite-frontend/src/components/browser/FileList.vue b/reposilite-frontend/src/components/browser/FileList.vue
index f5dbeb533..49b4a190d 100644
--- a/reposilite-frontend/src/components/browser/FileList.vue
+++ b/reposilite-frontend/src/components/browser/FileList.vue
@@ -17,7 +17,7 @@
 <script setup lang="jsx">
 import download from 'downloadjs'
 import { useRoute } from 'vue-router'
-import { createToast } from 'mosha-vue-toastify'
+import { createErrorToast, errorMessage } from '../../helpers/toast'
 import { createURL } from '../../store/client'
 import { useSession } from '../../store/session'
 import ListEntry from './DetailedListEntry.vue'
@@ -49,9 +49,7 @@ const { client } = useSession()
 const downloadHandler = (path, name) => {
   client.value.maven.download(path.substring(1) + '/' + name)
     .then(response => download(response.data, name, response.headers['content-type']))
-    .catch(error => createToast(`Cannot download file - ${error.response.status}: ${error.response.data.message}`, {
-      type: 'danger'
-    }))
+    .catch(error => createErrorToast(`Cannot download file: ${errorMessage(error)}`))
 }
 
 const deleteModalValue = ref()
diff --git a/reposilite-frontend/src/components/browser/FileUpload.vue b/reposilite-frontend/src/components/browser/FileUpload.vue
index adfe5bb25..5b9b19dd6 100644
--- a/reposilite-frontend/src/components/browser/FileUpload.vue
+++ b/reposilite-frontend/src/components/browser/FileUpload.vue
@@ -100,16 +100,23 @@ const uploadFiles = () => {
 
 <template>
   <div id="browser-upload">
-    <div 
-      :class="[ isEnabled ? 'rounded-t-3xl rounded-b' : 'rounded-3xl' ]"
+    <!--
+      Set apart from the entries above it on purpose. This used to be a rounded pill of the
+      same size and shape as a directory row, separated from real content only by the colour
+      of a dot, so an action sat in the middle of a list of things.
+    -->
+    <p class="pt-6 pb-2 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
+      Upload to <span class="normal-case">{{ '/' + destination }}</span>
+    </p>
+    <div
       class="
-        border border-dashed mt-1.5 cursor-pointer
-        bg-gray-50 border-gray-300 hover:transition-colors hover:duration-200 hover:bg-white
-        dark:bg-black dark:border-gray-800 dark:hover:transition-colors dark:hover:duration-400 dark:hover:bg-gray-900
+        mt-1.5 cursor-pointer rounded-lg border-2 border-dashed
+        border-gray-300 bg-gray-50 hover:transition-colors hover:duration-200 hover:bg-white
+        dark:border-gray-700 dark:bg-black dark:hover:transition-colors dark:hover:bg-gray-900
       "
     >
       <FileUpload
-        class="btn btn-primary flex text-left"
+        class="flex text-left"
         post-action="/upload/post"
         :multiple="true"
         :drop="true"
@@ -117,17 +124,19 @@ const uploadFiles = () => {
         v-model="files"
         ref="upload"
       >
-        <div class="my-3 px-6">
-          <div v-if="isEnabled" class="py-1">
-            <p class="font-bold">
-              Deploy selected files to
-              <span class="text-gray-500">{{'/' + destination}}</span>
+        <div class="w-full px-6 py-6 text-center">
+          <p v-if="isEnabled" class="font-bold">
+            Deploy selected files to
+            <span class="text-gray-500">{{ '/' + destination }}</span>
+          </p>
+          <template v-else>
+            <p class="font-semibold text-gray-700 dark:text-gray-200">
+              Drop files here, or click to choose them
             </p>
-          </div>
-          <div v-else class="flex">
-            <span class="text-xm pt-[0.4rem]">🟣</span>
-            <span class="font-bold px-5">Select files</span>
-          </div>
+            <p class="pt-1 text-xs text-gray-500 dark:text-gray-400">
+              Whole directories work too. Nothing is sent until you confirm.
+            </p>
+          </template>
         </div>
       </FileUpload>
       <div v-if="isEnabled">
diff --git a/reposilite-frontend/src/components/console/ConsoleView.vue b/reposilite-frontend/src/components/console/ConsoleView.vue
index f23285166..d0817e885 100644
--- a/reposilite-frontend/src/components/console/ConsoleView.vue
+++ b/reposilite-frontend/src/components/console/ConsoleView.vue
@@ -15,100 +15,142 @@
   -->
 
 <script setup>
-import { watch, nextTick } from 'vue'
-import { createToast } from 'mosha-vue-toastify'
+import { computed, nextTick, onBeforeUnmount, onMounted } from 'vue'
 import { useSession } from '../../store/session'
 import useLog from '../../store/console/log'
 import useConsole from '../../store/console/connection'
 
-const props = defineProps({
-  selectedTab: {
-    type: String,
-    required: true
-  }
-})
-
 const { levels, log, logMessage, filter, clearLog } = useLog()
 
 const {
   onOpen, onMessage, onClose, onError,
   connect,
-  //close,
+  close,
+  status,
+  failure,
   command,
   execute,
   previousCommand,
-  nextCommand,
-  isConnected
+  nextCommand
 } = useConsole()
 
-// onUnmounted(() => close())
-
 const scrollToEnd = () => {
   const console = document.getElementById('console')
   if (console) console.scrollTop = console.scrollHeight
 }
 
-//const focusInput = () =>
-//  document.getElementById('consoleInput').focus()
-
 const setupConnection = () => {
   onOpen.value = () => clearLog()
   onMessage.value = message => {
     logMessage(message)
     nextTick(() => scrollToEnd())
-    //focusInput()
   }
-  onError.value = error => {
-    console.log(error)
-    createToast(`Console connection error - Cannot establish SSE connection.`, { type: 'danger' })
-  }
-  onClose.value = () => createToast('Connection with console has been lost', { type: 'danger' })
-  createToast('Connecting to the remote console', { type: 'info', })
+  // The connection used to announce itself through three toasts, one of which landed on
+  // the header while the panel below stayed an empty white rectangle. The state belongs
+  // where the reader is already looking, so the panel renders it and the toasts are gone.
+  onError.value = error => console.error(error)
+  onClose.value = () => {}
   const { token } = useSession()
   connect(token.value)
 }
 
-watch(
-  () => props.selectedTab,
-  (selectedTab, previous) => {
-    if (selectedTab === 'Console' && previous == undefined && !isConnected()) {
-      setupConnection()
-    }
-  },
-  { immediate: true }
-)
+// This view is mounted only while its tab is open, so the stream follows the same life.
+// Previously nothing closed it and every visit left another one running.
+onMounted(setupConnection)
+onBeforeUnmount(close)
+
+const connecting = computed(() => status.value === 'connecting')
+const disconnected = computed(() => status.value === 'error' || status.value === 'closed')
+const awaitingFirstLine = computed(() => status.value === 'open' && log.value.length === 0)
 </script>
 
 <template>
-  <div class="container mx-auto pt-7 px-15 pb-12 text-xs">
-    <div class="flex text-sm flex-col xl:flex-row w-full py-2 justify-between">
-      <input placeholder="Filter" v-model="filter" class="w-full xl:w-1/2 mr-5 py-1 px-4 rounded-lg bg-white dark:bg-gray-900" />
-      <div class="flex flex-row justify-around w-full xl:w-1/2 max-md:flex-wrap">
-        <div v-for="level in levels" :key="level.name" class="pt-[0.475rem] xl:pt-[0.2rem] font-sans whitespace-nowrap">
+  <div class="container mx-auto px-15 pt-7 pb-12 text-xs max-sm:px-4">
+    <div class="flex w-full flex-col justify-between py-2 text-sm xl:flex-row">
+      <label class="w-full xl:w-1/2 xl:mr-5">
+        <span class="sr-only">Filter log output</span>
+        <input
+          v-model="filter"
+          placeholder="Filter"
+          class="w-full rounded-lg bg-white px-4 py-1 dark:bg-gray-900"
+        >
+      </label>
+      <div class="flex w-full flex-row justify-around max-md:flex-wrap xl:w-1/2">
+        <label
+          v-for="level in levels"
+          :key="level.name"
+          class="flex cursor-pointer items-center gap-2 whitespace-nowrap py-1 font-sans"
+        >
           <input
-            type="checkbox" 
-            :checked="level.enabled" 
+            type="checkbox"
+            :checked="level.enabled"
             @change="level.enabled = !level.enabled"
           >
-          <span class="pl-2 pr-4">{{ level.name }} ({{ level.count }})</span>
-        </div>
+          <span class="pr-4">{{ level.name }} ({{ level.count }})</span>
+        </label>
       </div>
     </div>
-    <div class="bg-white dark:bg-gray-900 rounded-lg">
-      <div id="console" class="overflow-scroll h-144 px-4 py-2 whitespace-pre-wrap font-mono text-xs">
-        <p v-for="entry in log" :key="entry.id" v-html="entry.message" class="whitespace-nowrap"/>
+
+    <div class="rounded-lg bg-white dark:bg-gray-900">
+      <div
+        id="console"
+        class="h-144 overflow-scroll whitespace-pre-wrap px-4 py-2 font-mono text-xs"
+        aria-live="polite"
+      >
+        <p
+          v-for="entry in log"
+          :key="entry.id"
+          v-html="entry.message"
+          class="whitespace-nowrap"
+        />
+
+        <!--
+          whitespace-normal on each of these: the panel around them keeps pre-wrap so log
+          lines survive verbatim, and without resetting it the indentation of this template
+          is rendered as part of the sentence.
+        -->
+        <p v-if="connecting" class="whitespace-normal font-sans text-gray-500 dark:text-gray-400">
+          Connecting to the remote console...
+        </p>
+
+        <p v-else-if="awaitingFirstLine" class="whitespace-normal font-sans text-gray-500 dark:text-gray-400">
+          Connected. Waiting for the first log line.
+        </p>
+
+        <div v-else-if="disconnected" class="max-w-prose whitespace-normal font-sans">
+          <p class="font-semibold text-gray-800 dark:text-gray-100">
+            Not connected to the remote console
+          </p>
+          <p class="pt-1 text-gray-500 dark:text-gray-400">
+            {{ failure || 'The stream was closed.' }}
+            Log output stops until the connection is restored. Anything already printed
+            stays visible above.
+          </p>
+          <button
+            class="mt-3 rounded-md bg-blue-700 px-3 py-2 font-medium text-white hover:bg-blue-800"
+            @click="setupConnection()"
+          >
+            Reconnect
+          </button>
+        </div>
       </div>
+
       <hr class="dark:border-dark-300">
-      <input
-        id="consoleInput"
-        placeholder="Type command or '?' to get help"
-        class="w-full py-2 px-4 rounded-b-lg bg-white dark:bg-gray-900 dark:text-white"
-        autocomplete="off"
-        v-model="command"
-        @keyup.enter="execute()"
-        @keyup.up="previousCommand()"
-        @keyup.down="nextCommand()"
-      />
+
+      <label>
+        <span class="sr-only">Console command</span>
+        <input
+          id="consoleInput"
+          v-model="command"
+          :disabled="disconnected"
+          :placeholder="disconnected ? 'Reconnect to run commands' : `Type command or '?' to get help`"
+          class="w-full rounded-b-lg bg-white px-4 py-2 disabled:cursor-not-allowed disabled:text-gray-400 dark:bg-gray-900 dark:text-white"
+          autocomplete="off"
+          @keyup.enter="execute()"
+          @keyup.up="previousCommand()"
+          @keyup.down="nextCommand()"
+        >
+      </label>
     </div>
   </div>
 </template>
diff --git a/reposilite-frontend/src/components/header/LoginModal.vue b/reposilite-frontend/src/components/header/LoginModal.vue
index 22b1fccf7..6eced3242 100644
--- a/reposilite-frontend/src/components/header/LoginModal.vue
+++ b/reposilite-frontend/src/components/header/LoginModal.vue
@@ -17,7 +17,7 @@
 <script setup>
 import { ref } from 'vue'
 import { VueFinalModal } from 'vue-final-modal'
-import { createToast } from 'mosha-vue-toastify'
+import { createSuccessToast, errorMessage } from '../../helpers/toast'
 import { useSession } from '../../store/session'
 import CloseIcon from '../icons/CloseIcon.vue'
 
@@ -25,15 +25,30 @@ const { login } = useSession()
 const showLogin = ref(false)
 const name = ref('')
 const secret = ref('')
+const failure = ref(null)
+const busy = ref(false)
 
-const close = () => 
-  (showLogin.value = false)
+const close = () => {
+  showLogin.value = false
+  failure.value = null
+}
+
+// The failure belongs in the dialog, not in a toast: the form that has to be corrected is
+// right here, and a toast about it appears somewhere else entirely and then leaves.
+const signin = (name, secret) => {
+  busy.value = true
+  failure.value = null
 
-const signin = (name, secret) =>
-  login(name, secret)
-    .then(() => createToast(`Dashboard accessed as ${name}`, { position: 'bottom-right' }))
+  return login(name, secret)
+    .then(() => createSuccessToast(`Dashboard accessed as ${name}`))
     .then(() => close())
-    .catch(error => createToast(`${error.response.status}: ${error.response.data.message}`, { type: 'danger' }))
+    .catch(error => {
+      failure.value = errorMessage(error)
+    })
+    .finally(() => {
+      busy.value = false
+    })
+}
 </script>
 
 <script>
@@ -47,19 +62,63 @@ export default {
     <VueFinalModal
       v-model="showLogin"
       v-bind="$attrs"
-      class="flex justify-center items-center"
+      class="flex items-center justify-center"
     >
-      <div class="relative border bg-white dark:bg-gray-900 border-gray-100 dark:border-black m-w-20 py-5 px-10 rounded-2xl shadow-xl text-center">
-        <p class="font-bold text-xl pb-4">Login with access token</p>
-        <form class="flex flex-col w-96 max-sm:w-65" @submit.prevent="signin(name, secret)">
-          <input placeholder="Name" v-model="name" type="text" class="input"/>
-          <input placeholder="Secret" v-model="secret" type="password" class="input"/>
-          <div class="text-right mt-1">
-            <button @click="close()" class="text-blue-400 text-xs">← Back to index</button>
-          </div>
-          <button class="bg-gray-100 dark:bg-gray-800 py-2 my-3 rounded-md cursor-pointer">Sign in</button>
+      <div class="relative rounded-2xl border border-gray-100 bg-white px-10 py-5 shadow-xl dark:border-black dark:bg-gray-900">
+        <p class="pb-4 text-center text-xl font-bold">Login with access token</p>
+
+        <form class="flex w-96 flex-col max-sm:w-65" @submit.prevent="signin(name, secret)">
+          <label class="flex flex-col text-left text-sm">
+            <span class="pb-1 text-gray-600 dark:text-gray-300">Name</span>
+            <input
+              v-model="name"
+              type="text"
+              autocomplete="username"
+              class="rounded-md bg-gray-50 p-2 dark:bg-gray-800"
+            >
+          </label>
+
+          <label class="flex flex-col pt-3 text-left text-sm">
+            <span class="pb-1 text-gray-600 dark:text-gray-300">Secret</span>
+            <input
+              v-model="secret"
+              type="password"
+              autocomplete="current-password"
+              class="rounded-md bg-gray-50 p-2 dark:bg-gray-800"
+            >
+          </label>
+
+          <p
+            v-if="failure"
+            class="pt-3 text-left text-sm text-red-600 dark:text-red-400"
+            role="alert"
+          >
+            {{ failure }}
+          </p>
+
+          <button
+            type="submit"
+            :disabled="busy"
+            class="mt-4 cursor-pointer rounded-md bg-blue-700 py-2 font-medium text-white hover:bg-blue-800 disabled:cursor-not-allowed disabled:bg-blue-700/60"
+          >
+            {{ busy ? 'Signing in...' : 'Sign in' }}
+          </button>
+
+          <button
+            type="button"
+            class="pt-3 text-xs text-blue-600 dark:text-blue-300"
+            @click="close()"
+          >
+            Back to index
+          </button>
         </form>
-        <button class="absolute top-0 right-0 mt-5 mr-5" @click="close()">
+
+        <button
+          type="button"
+          class="absolute top-0 right-0 mt-5 mr-5"
+          aria-label="Close the login dialog"
+          @click="close()"
+        >
           <CloseIcon />
         </button>
       </div>
@@ -69,17 +128,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style scoped>
-@reference "../../style.css";
-.input {
-  @apply p-2;
-  @apply my-1;
-  @apply bg-gray-50 dark:bg-gray-800;
-  @apply rounded-md;
-}
-#login-modal button:hover {
-  @apply bg-gray-200 dark:bg-gray-700;
-  transition: background-color 0.5s;
-}
-</style>
\ No newline at end of file
diff --git a/reposilite-frontend/src/helpers/toast.js b/reposilite-frontend/src/helpers/toast.js
index 40133b263..91fd2ae9e 100644
--- a/reposilite-frontend/src/helpers/toast.js
+++ b/reposilite-frontend/src/helpers/toast.js
@@ -1,20 +1,45 @@
 import { createToast } from 'mosha-vue-toastify'
 
+/*
+ * Bottom right, and in one place. The library defaults to the top right corner, which is
+ * exactly where the header keeps the account name and the logout button: while a toast was
+ * up, logging out was not clickable. Callers used to reach for `createToast` directly and
+ * pick a corner each, so a single login attempt could put its success message in one corner
+ * and its failure in another.
+ */
+const options = (type) => ({ type, position: 'bottom-right' })
+
+/**
+ * The readable part of a failed request.
+ *
+ * Callers reached into `error.response.status` and `error.response.data.message` directly,
+ * which works for a server that answered and throws for one that did not. The throw
+ * happened inside a `.catch`, so it took the handler with it: exactly when the connection
+ * was refused or the host was unreachable, the user was told nothing at all. That is the
+ * most common failure there is, and it was the one case with no message.
+ */
+const errorMessage = (error) =>
+  error?.response?.data?.message ||
+  (error?.response?.status ? `Request failed with status ${error.response.status}` : null) ||
+  error?.message ||
+  `${error}`
+
 const createInfoToast = (message) =>
-  createToast(message, { type: 'info' })
+  createToast(message, options('info'))
 
 const createSuccessToast = (message) =>
-  createToast(message, { type: 'success' })
+  createToast(message, options('success'))
 
 const createWarningToast = (message) =>
-  createToast(message, { type: 'warning' })
+  createToast(message, options('warning'))
 
 const createErrorToast = (message) =>
-  createToast(message, { type: 'danger' })
+  createToast(message, options('danger'))
 
 export {
   createInfoToast,
   createSuccessToast,
   createWarningToast,
-  createErrorToast
-}
\ No newline at end of file
+  createErrorToast,
+  errorMessage
+}
diff --git a/reposilite-frontend/src/pages/IndexPage.vue b/reposilite-frontend/src/pages/IndexPage.vue
index 11fc1bc9c..043b250d9 100644
--- a/reposilite-frontend/src/pages/IndexPage.vue
+++ b/reposilite-frontend/src/pages/IndexPage.vue
@@ -99,7 +99,7 @@ const selectHomepage = () =>
             <DashboardView v-if="selectedTab == 'Dashboard'" />
           </TabPanel>
           <TabPanel :val="'Console'" v-show="isManager">
-            <ConsoleView v-if="selectedTab == 'Console'" :selectedTab="selectedTab" />
+            <ConsoleView v-if="selectedTab == 'Console'" />
           </TabPanel>
           <TabPanel :val="'Tokens'" v-show="isManager">
             <TokensView v-if="selectedTab == 'Tokens'" :selectedTab="selectedTab" />
diff --git a/reposilite-frontend/src/store/configuration.js b/reposilite-frontend/src/store/configuration.js
index 582609b93..5b11ce485 100644
--- a/reposilite-frontend/src/store/configuration.js
+++ b/reposilite-frontend/src/store/configuration.js
@@ -1,6 +1,6 @@
 import {computed, markRaw, ref, toRaw} from 'vue'
 import { useSession } from './session'
-import { createToast } from 'mosha-vue-toastify'
+import { createSuccessToast, createErrorToast, errorMessage } from '../helpers/toast'
 import { createAjv } from '@jsonforms/core'
 import { vanillaRenderers } from '@dzikoysk/vue-vanilla'
 import { default as ObjectRenderer, tester as objectTester } from '../components/renderers/ObjectRenderer.vue'
@@ -26,8 +26,8 @@ const fetchConfiguration = () => {
         .then(configurationResponse => configurations.value[domain] = configurationResponse.data)))
     )
     .then(() => selectedDomain.value = domains.value[0])
-    .then(() => createToast('Configuration loaded', { type: 'success' }))
-    .catch(error => createToast(`${error || ''}`, { type: 'danger' }))
+    .then(() => createSuccessToast('Configuration loaded'))
+    .catch(error => createErrorToast(`Cannot load configuration: ${errorMessage(error)}`))
 }
 
 const updateConfiguration = () =>
@@ -36,8 +36,8 @@ const updateConfiguration = () =>
       .then(() => client.value.settings.fetch(domain))
       .then(response => configurations.value[domain] = response.data)
   ))
-    .then(() => createToast('Configuration updated', { type: 'success' }))
-    .catch(error => createToast(`${error || ''}`, { type: 'danger' }))
+    .then(() => createSuccessToast('Configuration updated'))
+    .catch(error => createErrorToast(`Cannot update configuration: ${errorMessage(error)}`))
 
 const renderers = markRaw([
   { tester: arrayListTester, renderer: ArrayListRenderer },
diff --git a/reposilite-frontend/src/store/console/connection.js b/reposilite-frontend/src/store/console/connection.js
index 297b2af42..f9fc62cbb 100644
--- a/reposilite-frontend/src/store/console/connection.js
+++ b/reposilite-frontend/src/store/console/connection.js
@@ -16,16 +16,26 @@
 
 import { ref } from "vue"
 import { createURL } from '../client'
-import { EventSource as Eventsource } from 'extended-eventsource';
-import { useSession } from "../session.js";
+import { EventSource as Eventsource } from 'extended-eventsource'
+import { useSession } from "../session.js"
 
 const { client } = useSession()
 
 const connection = ref()
 const command = ref("")
 
+/**
+ * Where the stream stands, as something a template can render. `readyState` alone cannot
+ * do that job: it is not reactive, and it collapses "never tried" and "gave up" into the
+ * same value, which are the two cases a reader most needs told apart.
+ *
+ * One of 'idle', 'connecting', 'open', 'closed' or 'error'.
+ */
+const status = ref('idle')
+const failure = ref(null)
+
 export default function useConsole() {
-  const consoleAddress = createURL("/api/console/log");
+  const consoleAddress = createURL("/api/console/log")
 
   const isConnected = () => {
     // using built-in EventSource for readystate constants
@@ -34,8 +44,12 @@ export default function useConsole() {
   }
 
   const close = () => {
-    if (isConnected())
-      connection.value.close()
+    // Not gated on isConnected: a stream still opening has a readyState of CONNECTING and
+    // would slip through, which is how leaving the tab mid-handshake used to leave the
+    // request running.
+    connection.value?.close()
+    connection.value = undefined
+    status.value = 'closed'
   }
 
   const history = ref([''])
@@ -78,11 +92,17 @@ export default function useConsole() {
   const onClose = ref()
 
   const connect = (token) => {
+    status.value = 'connecting'
+    failure.value = null
+
     try {
       connection.value = new Eventsource(consoleAddress, {
         headers: {
           Authorization: `xBasic ${btoa(`${token.name}:${token.secret}`)}`
         },
+        // No automatic retry, on purpose. A stream that fails because the server is
+        // struggling is the worst moment to start reconnecting in a loop. The view offers
+        // a button instead, so the retry happens when somebody decides it should.
         disableRetry: true
       })
 
@@ -90,9 +110,10 @@ export default function useConsole() {
         // this is needed to stop an error from appearing in console when
         // switching/refreshing the page without closing the connection
         window.onbeforeunload = function () {
-          close();
-        };
+          close()
+        }
 
+        status.value = 'open'
         onOpen?.value()
       }
 
@@ -102,13 +123,20 @@ export default function useConsole() {
       })
 
       connection.value.onerror = (error) => {
+        status.value = 'error'
+        failure.value = describe(error)
         onError?.value(error)
       }
 
-      connection.value.onclose = () =>
+      connection.value.onclose = () => {
+        // An error already says more than a close does, so it keeps the field.
+        if (status.value !== 'error') status.value = 'closed'
         onClose?.value()
+      }
 
     } catch (error) {
+      status.value = 'error'
+      failure.value = describe(error)
       onError?.value(error)
     }
   }
@@ -117,6 +145,8 @@ export default function useConsole() {
     connection,
     connect,
     close,
+    status,
+    failure,
     onOpen,
     onMessage,
     onError,
@@ -128,3 +158,18 @@ export default function useConsole() {
     isConnected
   }
 }
+
+/**
+ * An EventSource error event carries no reason, so there is nothing to quote back. Say what
+ * is actually known instead of inventing a cause: whether the browser is offline is the one
+ * distinction that changes what the reader should do next.
+ */
+function describe(error) {
+  if (typeof navigator !== 'undefined' && navigator.onLine === false) {
+    return 'This browser is offline.'
+  }
+  if (error instanceof Error && error.message) {
+    return error.message
+  }
+  return 'The server closed the stream or could not be reached.'
+}
diff --git a/reposilite-frontend/src/store/tokens.js b/reposilite-frontend/src/store/tokens.js
index 12a2f207a..45045b31d 100644
--- a/reposilite-frontend/src/store/tokens.js
+++ b/reposilite-frontend/src/store/tokens.js
@@ -16,14 +16,11 @@
 
 import { ref } from 'vue'
 import { useSession } from './session'
-import { createSuccessToast, createErrorToast } from '../helpers/toast'
+import { createSuccessToast, createErrorToast, errorMessage } from '../helpers/toast'
 
 const { client } = useSession()
 const tokens = ref([])
 
-const errorMessage = (error) =>
-  error?.response?.data?.message || `${error}`
-
 const tokenIsManager = (token) =>
   (token.permissions || []).some(permission => permission.identifier === 'access-token:manager')