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')