Add attachment hover previews

src-tauri/Cargo.toml

@@ -19,7 +19,7 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = ["macos-private-api"] }
+tauri = { version = "2", features = ["protocol-asset", "macos-private-api"] }
 tauri-plugin-opener = "2"
 tauri-plugin-process = "2"
 serde = { version = "1", features = ["derive"] }

src-tauri/tauri.conf.json

@@ -33,7 +33,11 @@
       }
     ],
     "security": {
-      "csp": null
+      "csp": null,
+      "assetProtocol": {
+        "enable": true,
+        "scope": ["**/*"]
+      }
     }
   },
   "bundle": {

src/features/composer/components/ComposerAttachments.tsx

@@ -1,3 +1,4 @@
+import { convertFileSrc } from "@tauri-apps/api/core";
 import { Image, X } from "lucide-react";
 
 type ComposerAttachmentsProps = {
@@ -18,6 +19,20 @@ function fileTitle(path: string) {
   return parts.length ? parts[parts.length - 1] : path;
 }
 
+function attachmentPreviewSrc(path: string) {
+  if (path.startsWith("data:")) {
+    return path;
+  }
+  if (path.startsWith("http://") || path.startsWith("https://")) {
+    return path;
+  }
+  try {
+    return convertFileSrc(path);
+  } catch {
+    return "";
+  }
+}
+
 export function ComposerAttachments({
   attachments,
   disabled,
@@ -32,15 +47,27 @@ export function ComposerAttachments({
       {attachments.map((path) => {
         const title = fileTitle(path);
         const titleAttr = path.startsWith("data:") ? "Pasted image" : path;
+        const previewSrc = attachmentPreviewSrc(path);
         return (
           <div
             key={path}
             className="composer-attachment"
             title={titleAttr}
           >
-            <span className="composer-icon" aria-hidden>
-              <Image size={14} />
-            </span>
+            {previewSrc && (
+              <span className="composer-attachment-preview" aria-hidden>
+                <img src={previewSrc} alt="" />
+              </span>
+            )}
+            {previewSrc ? (
+              <span className="composer-attachment-thumb" aria-hidden>
+                <img src={previewSrc} alt="" />
+              </span>
+            ) : (
+              <span className="composer-icon" aria-hidden>
+                <Image size={14} />
+              </span>
+            )}
             <span className="composer-attachment-name">{title}</span>
             <button
               type="button"

src/features/composer/components/ComposerInput.attachments.test.tsx

@@ -11,6 +11,10 @@ vi.mock("@tauri-apps/api/window", () => ({
   }),
 }));
 
+vi.mock("@tauri-apps/api/core", () => ({
+  convertFileSrc: (path: string) => `tauri://${path}`,
+}));
+
 type HarnessProps = {
   activeThreadId: string | null;
   activeWorkspaceId: string | null;

src/styles/composer.css

@@ -134,6 +134,58 @@
   color: var(--text-muted);
   font-size: 11px;
   max-width: 100%;
+  position: relative;
+}
+
+.composer-attachment:hover .composer-attachment-preview,
+.composer-attachment:focus-within .composer-attachment-preview {
+  opacity: 1;
+  transform: translate(-50%, -6px) scale(1);
+  pointer-events: auto;
+}
+
+.composer-attachment-preview {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 8px);
+  width: 240px;
+  height: 180px;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  background: var(--surface-quiet);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
+  opacity: 0;
+  transform: translate(-50%, -2px) scale(0.98);
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+  pointer-events: none;
+  z-index: 20;
+}
+
+.composer-attachment-preview img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.composer-attachment-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  background: var(--surface-item);
+  flex: 0 0 auto;
+}
+
+.composer-attachment-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .composer-attachment-name {