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/MessageItem.vue

@@ -22,6 +22,7 @@ const toast = useMessage();
 
 const isSystem = computed(() => props.message.role === "system");
 const toolExpanded = ref(false);
+const previewUrl = ref<string | null>(null);
 
 const chatStore = useChatStore();
 const settingsStore = useSettingsStore();
@@ -338,6 +339,7 @@ const renderedToolResult = computed(() => {
                     :src="att.url"
                     :alt="att.name"
                     class="msg-attachment-thumb"
+                    @click="previewUrl = att.url"
                   />
                 </template>
                 <template v-else>
@@ -417,6 +419,11 @@ const renderedToolResult = computed(() => {
       </div>
     </template>
   </div>
+  <Teleport to="body">
+    <div v-if="previewUrl" class="image-preview-overlay" @click.self="previewUrl = null">
+      <img :src="previewUrl" class="image-preview-img" @click="previewUrl = null" />
+    </div>
+  </Teleport>
 </template>
 
 <style scoped lang="scss">
@@ -531,6 +538,7 @@ const renderedToolResult = computed(() => {
   max-width: 200px;
   max-height: 160px;
   object-fit: contain;
+  cursor: pointer;
 }
 
 .msg-attachment-file {
@@ -776,6 +784,24 @@ const renderedToolResult = computed(() => {
   }
 }
 
+.image-preview-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.image-preview-img {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  border-radius: 4px;
+}
+
 @media (max-width: $breakpoint-mobile) {
   .message.user .msg-body {
     max-width: 100%;