chore: add v0.4.8 changelog and improve scroll behavior (#234)

* chore: add v0.4.8 changelog and improve scroll behavior

- Add v0.4.8 changelog entries for recent fixes
- Fix forced scroll to bottom when returning from other tabs
- Smooth session switch with loading transition overlay
- Auto-scroll to bottom after mermaid diagram rendering
- Bump version to 0.4.8

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: replace blob URLs with persistent download URLs and add image preview

- Replace blob URLs with /api/hermes/download URLs after upload so
  attachments survive page refresh
- Add click-to-preview overlay for image attachments
- Move upload directory from /tmp to ~/.hermes-web-ui/upload

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: replace findLast with reverse+find for ES2022 compat

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* chore: bump TypeScript lib target from ES2022 to ES2023

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* docs: add changelog entries for blob URL fix, image preview and upload dir

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

packages/client/src/components/hermes/chat/MessageList.vue

@@ -11,6 +11,8 @@ const chatStore = useChatStore();
 const { t } = useI18n();
 const { isDark } = useTheme();
 const listRef = ref<HTMLElement>();
+const isTransitioning = ref(false);
+let transitionTimer: ReturnType<typeof setTimeout> | null = null;
 
 const displayMessages = computed(() =>
   chatStore.messages.filter((m) => m.role !== "tool"),
@@ -54,20 +56,61 @@ function scrollToMessage(messageId: string) {
   });
 }
 
-// Scroll to bottom once when messages are first loaded
+// Scroll to bottom once when messages are first loaded after session switch
+let pendingScrollToBottom = false
+let isInitialLoad = true
+
+function showTransition(): void {
+  if (isInitialLoad) return
+  if (transitionTimer) clearTimeout(transitionTimer)
+  isTransitioning.value = true
+}
+
+function hideTransition(): void {
+  if (transitionTimer) clearTimeout(transitionTimer)
+  transitionTimer = setTimeout(() => {
+    isTransitioning.value = false
+    transitionTimer = null
+  }, 100)
+}
+
 watch(
   () => chatStore.activeSessionId,
   (id) => {
     if (!id) return;
-    if (chatStore.focusMessageId) {
-      scrollToMessage(chatStore.focusMessageId);
+    if (isInitialLoad) {
+      isInitialLoad = false
+      if (!chatStore.focusMessageId) {
+        nextTick(() => scrollToBottom())
+      } else {
+        nextTick(() => scrollToMessage(chatStore.focusMessageId!))
+      }
       return;
     }
-    scrollToBottom();
+    if (chatStore.focusMessageId) {
+      nextTick(() => scrollToMessage(chatStore.focusMessageId!));
+      return;
+    }
+    pendingScrollToBottom = true
+    showTransition()
   },
   { immediate: true },
 );
 
+// Safety: ensure overlay is always removed once messages load
+watch(
+  () => chatStore.messages.length,
+  () => {
+    if (pendingScrollToBottom && chatStore.messages.length > 0) {
+      pendingScrollToBottom = false
+      setTimeout(() => {
+        scrollToBottom()
+        hideTransition()
+      }, 300)
+    }
+  },
+);
+
 watch(
   () => chatStore.focusMessageId,
   (messageId) => {
@@ -92,7 +135,15 @@ watch(
       scrollToMessage(chatStore.focusMessageId);
       return;
     }
-    if (!chatStore.isStreaming) { scrollToBottom(); return; }
+    if (pendingScrollToBottom) {
+      pendingScrollToBottom = false
+      // Wait a moment for mermaid diagrams to render, then reveal and scroll
+      setTimeout(() => {
+        scrollToBottom()
+        hideTransition()
+      }, 300)
+      return
+    }
     if (!isNearBottom()) return;
     scrollToBottom();
   },
@@ -102,15 +153,14 @@ watch(currentToolCalls, () => {
     scrollToMessage(chatStore.focusMessageId);
     return;
   }
-  if (!chatStore.isStreaming) { scrollToBottom(); return; }
   if (!isNearBottom()) return;
   scrollToBottom();
 });
 </script>
 
 <template>
-  <div ref="listRef" class="message-list">
-    <div v-if="chatStore.messages.length === 0" class="empty-state">
+  <div ref="listRef" class="message-list" :class="{ 'is-transitioning': isTransitioning }">
+    <div v-if="chatStore.messages.length === 0 && !isTransitioning" class="empty-state">
       <img src="/logo.png" alt="Hermes" class="empty-logo" />
       <p>{{ t("chat.emptyState") }}</p>
     </div>
@@ -178,10 +228,16 @@ watch(currentToolCalls, () => {
   flex-direction: column;
   gap: 16px;
   background-color: $bg-card;
+  transition: opacity 0.15s ease;
 
   .dark & {
     background-color: #333333;
   }
+
+  &.is-transitioning {
+    opacity: 0;
+    pointer-events: none;
+  }
 }
 
 .empty-state {