From 1b5d8efbc30423631b12e713a2f70965f94197f7 Mon Sep 17 00:00:00 2001
From: seb <sebgreenbus@gmail.com>
Date: Tue, 6 Oct 2026 12:53:32 +0200
Subject: [PATCH] u

---
 src/components/chat/ChatAttachmentItems.jsx | 259 +++++++++-----------
 src/components/chat/HealingMarkdown.jsx     |  20 +-
 2 files changed, 119 insertions(+), 160 deletions(-)

diff --git a/src/components/chat/ChatAttachmentItems.jsx b/src/components/chat/ChatAttachmentItems.jsx
index 9932626..4337460 100644
--- a/src/components/chat/ChatAttachmentItems.jsx
+++ b/src/components/chat/ChatAttachmentItems.jsx
@@ -9,7 +9,6 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import CircularProgress from '@mui/material/CircularProgress';
-import Tooltip from '@mui/material/Tooltip';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import PictureAsPdfRoundedIcon from '@mui/icons-material/PictureAsPdfRounded';
 import TableChartRoundedIcon from '@mui/icons-material/TableChartRounded';
@@ -399,7 +398,6 @@ export class VfsAttachmentLink extends PureComponent {
             target="_blank"
             rel="noopener noreferrer"
             onClick={this.handleClick}
-            title={notFound ? 'Nicht mehr vorhanden (404)' : `VFS Bild im neuen Tab öffnen: ${downloadName}`}
             sx={{
               display: 'block',
               cursor: notFound ? 'not-allowed' : 'pointer',
@@ -437,18 +435,17 @@ export class VfsAttachmentLink extends PureComponent {
             }}
           >
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, minWidth: 0, flex: 1 }}>
-              <InsertPhotoRoundedIcon sx={{ fontSize: 16, flexShrink: 0 }} />
               <Typography
                 variant="caption"
                 sx={{
-                  fontWeight: 600,
+                  fontWeight: 500,
                   fontSize: '0.72rem',
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',
                   whiteSpace: 'nowrap',
                 }}
               >
-                {downloadName}
+                {downloadName} - {effectiveType || 'image'}
               </Typography>
             </Box>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.2, flexShrink: 0 }}>
@@ -457,24 +454,22 @@ export class VfsAttachmentLink extends PureComponent {
               )}
               {!notFound && (
                 <>
-                  <Tooltip title="In neuem Tab öffnen" arrow>
-                    <IconButton
-                      size="small"
-                      onClick={this.handleOpenInNewTab}
-                      sx={{ p: 0.35, color: 'inherit', opacity: 0.85, '&:hover': { opacity: 1 } }}
-                    >
-                      <OpenInNewRoundedIcon sx={{ fontSize: 15 }} />
-                    </IconButton>
-                  </Tooltip>
-                  <Tooltip title="Herunterladen" arrow>
-                    <IconButton
-                      size="small"
-                      onClick={this.handleDownload}
-                      sx={{ p: 0.35, color: 'inherit', opacity: 0.85, '&:hover': { opacity: 1 } }}
-                    >
-                      <DownloadRoundedIcon sx={{ fontSize: 15 }} />
-                    </IconButton>
-                  </Tooltip>
+                  <IconButton
+                    size="small"
+                    aria-label="In neuem Tab öffnen"
+                    onClick={this.handleOpenInNewTab}
+                    sx={{ p: 0.35, color: 'inherit', opacity: 0.85, '&:hover': { opacity: 1 } }}
+                  >
+                    <OpenInNewRoundedIcon sx={{ fontSize: 15 }} />
+                  </IconButton>
+                  <IconButton
+                    size="small"
+                    aria-label="Herunterladen"
+                    onClick={this.handleDownload}
+                    sx={{ p: 0.35, color: 'inherit', opacity: 0.85, '&:hover': { opacity: 1 } }}
+                  >
+                    <DownloadRoundedIcon sx={{ fontSize: 15 }} />
+                  </IconButton>
                 </>
               )}
             </Box>
@@ -483,142 +478,108 @@ export class VfsAttachmentLink extends PureComponent {
       );
     }
 
-    const titleText = notFound
-      ? `Datei nicht mehr im VFS vorhanden (404): ${downloadName}`
-      : isOpening
-        ? `Wird im neuen Tab geöffnet…`
-        : isDownloading
-          ? `Wird heruntergeladen…`
-          : canView
-            ? `In neuem Tab öffnen (${downloadName})`
-            : `Herunterladen (${downloadName})`;
-
     return (
-      <Tooltip title={titleText} arrow>
-        <Box
-          component="a"
-          href={notFound ? undefined : vfsUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          onClick={this.handleClick}
+      <Box
+        component="a"
+        href={notFound ? undefined : vfsUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={this.handleClick}
+        sx={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: 0.85,
+          my: 0.35,
+          mx: 0.2,
+          pl: 1.15,
+          pr: 0.85,
+          py: 0.5,
+          borderRadius: 2,
+          border: '1px solid',
+          borderColor: notFound
+            ? (isUser ? 'rgba(255,255,255,0.2)' : 'error.light')
+            : (isUser ? 'rgba(255, 255, 255, 0.35)' : 'divider'),
+          bgcolor: notFound
+            ? (isUser ? 'rgba(0,0,0,0.2)' : 'action.disabledBackground')
+            : (isUser
+              ? 'rgba(255, 255, 255, 0.18)'
+              : (theme) => (theme.palette.mode === 'dark' ? 'background.paper' : 'rgba(0, 0, 0, 0.02)')),
+          textDecoration: notFound ? 'line-through' : 'none',
+          color: notFound
+            ? (isUser ? 'rgba(255,255,255,0.6)' : 'text.disabled')
+            : (isUser ? 'inherit' : 'primary.main'),
+          opacity: notFound ? 0.7 : ((isDownloading || isOpening) ? 0.75 : 1),
+          cursor: notFound ? 'not-allowed' : 'pointer',
+          verticalAlign: 'middle',
+          maxWidth: '100%',
+          transition: 'all 150ms ease-in-out',
+          '&:hover': notFound ? {} : {
+            bgcolor: isUser ? 'rgba(255, 255, 255, 0.28)' : 'action.hover',
+            borderColor: isUser ? '#fff' : 'primary.main',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+          },
+        }}
+      >
+        <Typography
+          component="span"
           sx={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 0.85,
-            my: 0.35,
-            mx: 0.2,
-            pl: 1.15,
-            pr: 0.85,
-            py: 0.5,
-            borderRadius: 2,
-            border: '1px solid',
-            borderColor: notFound
-              ? (isUser ? 'rgba(255,255,255,0.2)' : 'error.light')
-              : (isUser ? 'rgba(255, 255, 255, 0.35)' : 'divider'),
-            bgcolor: notFound
-              ? (isUser ? 'rgba(0,0,0,0.2)' : 'action.disabledBackground')
-              : (isUser
-                ? 'rgba(255, 255, 255, 0.18)'
-                : (theme) => (theme.palette.mode === 'dark' ? 'background.paper' : 'rgba(0, 0, 0, 0.02)')),
+            fontSize: '0.82rem',
+            fontWeight: 500,
+            color: 'inherit',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            lineHeight: 1.25,
             textDecoration: notFound ? 'line-through' : 'none',
-            color: notFound
-              ? (isUser ? 'rgba(255,255,255,0.6)' : 'text.disabled')
-              : (isUser ? 'inherit' : 'primary.main'),
-            opacity: notFound ? 0.7 : ((isDownloading || isOpening) ? 0.75 : 1),
-            cursor: notFound ? 'not-allowed' : 'pointer',
-            verticalAlign: 'middle',
-            maxWidth: '100%',
-            transition: 'all 150ms ease-in-out',
-            '&:hover': notFound ? {} : {
-              bgcolor: isUser ? 'rgba(255, 255, 255, 0.28)' : 'action.hover',
-              borderColor: isUser ? '#fff' : 'primary.main',
-              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-            },
           }}
         >
-          {isDownloading || isOpening ? (
-            <CircularProgress size={16} color="inherit" thickness={5} />
-          ) : notFound ? (
-            <ErrorOutlineRoundedIcon sx={{ fontSize: 20, color: isUser ? 'inherit' : 'error.main' }} />
-          ) : (
-            getAttachmentIcon(effectiveType, downloadName, isUser)
-          )}
-          <Box sx={{ minWidth: 0 }}>
-            <Typography
-              component="span"
+          {downloadName} - {effectiveType || 'VFS'}{notFound ? ' (404)' : ''}
+        </Typography>
+        {!notFound && (
+          <Box
+            sx={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 0.2,
+              ml: 0.5,
+              flexShrink: 0,
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {(isDownloading || isOpening) && (
+              <CircularProgress size={13} color="inherit" thickness={4} sx={{ mx: 0.4 }} />
+            )}
+            {canView && (
+              <IconButton
+                size="small"
+                aria-label="In neuem Tab öffnen"
+                onClick={this.handleOpenInNewTab}
+                sx={{
+                  p: 0.4,
+                  color: 'inherit',
+                  opacity: 0.75,
+                  '&:hover': { opacity: 1, bgcolor: 'action.hover' },
+                }}
+              >
+                <OpenInNewRoundedIcon sx={{ fontSize: 15 }} />
+              </IconButton>
+            )}
+            <IconButton
+              size="small"
+              aria-label="Herunterladen"
+              onClick={this.handleDownload}
               sx={{
-                fontSize: '0.82rem',
-                fontWeight: 600,
+                p: 0.4,
                 color: 'inherit',
-                display: 'block',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                maxWidth: 300,
-                lineHeight: 1.25,
-                textDecoration: notFound ? 'line-through' : 'none',
+                opacity: 0.75,
+                '&:hover': { opacity: 1, bgcolor: 'action.hover' },
               }}
             >
-              {displayName}
-            </Typography>
-            <Typography
-              component="span"
-              sx={{
-                fontSize: '0.68rem',
-                opacity: 0.8,
-                display: 'block',
-                lineHeight: 1,
-              }}
-            >
-              {notFound
-                ? 'nicht mehr vorhanden (404)'
-                : (label && label !== downloadName ? `${downloadName} · ${effectiveType || 'VFS'}` : (effectiveType || 'VFS Datei'))}
-            </Typography>
+              <DownloadRoundedIcon sx={{ fontSize: 15 }} />
+            </IconButton>
           </Box>
-          {!notFound && (
-            <Box
-              sx={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                gap: 0.2,
-                ml: 0.5,
-              }}
-              onClick={(e) => e.stopPropagation()}
-            >
-              {canView && (
-                <Tooltip title="In neuem Tab öffnen" arrow>
-                  <IconButton
-                    size="small"
-                    onClick={this.handleOpenInNewTab}
-                    sx={{
-                      p: 0.4,
-                      color: 'inherit',
-                      opacity: 0.75,
-                      '&:hover': { opacity: 1, bgcolor: 'action.hover' },
-                    }}
-                  >
-                    <OpenInNewRoundedIcon sx={{ fontSize: 15 }} />
-                  </IconButton>
-                </Tooltip>
-              )}
-              <Tooltip title="Herunterladen" arrow>
-                <IconButton
-                  size="small"
-                  onClick={this.handleDownload}
-                  sx={{
-                    p: 0.4,
-                    color: 'inherit',
-                    opacity: 0.75,
-                    '&:hover': { opacity: 1, bgcolor: 'action.hover' },
-                  }}
-                >
-                  <DownloadRoundedIcon sx={{ fontSize: 15 }} />
-                </IconButton>
-              </Tooltip>
-            </Box>
-          )}
-        </Box>
-      </Tooltip>
+        )}
+      </Box>
     );
   }
 }
diff --git a/src/components/chat/HealingMarkdown.jsx b/src/components/chat/HealingMarkdown.jsx
index 7b5611d..4a576a3 100644
--- a/src/components/chat/HealingMarkdown.jsx
+++ b/src/components/chat/HealingMarkdown.jsx
@@ -9,7 +9,7 @@ import {
   TABLE_HEADER_PAIR,
   byMode,
 } from '../../colors';
-import { VfsAttachmentLink, parseAttachmentTag, classifyLinkTarget } from './ChatAttachmentItems';
+import { VfsAttachmentLink, parseAttachmentTag, classifyLinkTarget, resolveVfsUrl } from './ChatAttachmentItems';
 
 /**
  * Healing markdown renderer.
@@ -43,16 +43,14 @@ function resolveImageUrl(rawUrl) {
   const url = String(rawUrl ?? '').trim();
   if (!url) return null;
   if (/^data:image\//i.test(url)) return url;
-  if (/^https?:\/\//i.test(url) || url.startsWith('/')) return url;
-
-  // Everything else is a VFS name: strip a leading `./`, encode each segment, keep subdirs.
-  const segments = url
-    .replace(/^\.\//, '')
-    .split('/')
-    .filter((s) => s && s !== '.')
-    .map((s) => encodeURIComponent(s));
-  if (segments.length === 0 || segments.includes('..')) return null;
-  return `/api/vfs/${segments.join('/')}`;
+  const classified = classifyLinkTarget(url);
+  if (classified.kind === 'web') return classified.url;
+  if (classified.kind === 'vfs') {
+    if (classified.path.includes('..')) return null;
+    return resolveVfsUrl(classified.path);
+  }
+  if (classified.kind === 'nav') return classified.url;
+  return null;
 }
 
 /**