u

src/components/PicturesDialog.jsx

@@ -0,0 +1,831 @@
+// #region imports
+import { PureComponent, createRef } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import CloseIcon from '@mui/icons-material/Close';
+import ContentPasteIcon from '@mui/icons-material/ContentPaste';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
+import ImageSearchIcon from '@mui/icons-material/ImageSearch';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import { enqueueSnackbar } from 'notistack';
+import AppDialog from './AppDialog';
+import { thumb, article as articleApi } from '../api';
+import artikelAutomat from '../automats/artikelAutomat';
+import brandAutomat from '../automats/brandAutomat';
+import categoryAutomat from '../automats/categoryAutomat';
+import chatAutomat from '../automats/chatAutomat';
+import { requireArray, requireObject } from '../utils/apiShape';
+import {
+  articleWithPhotoOrder,
+  articleWithUploadedPhoto,
+  articleWithoutPhoto,
+  formatPhotoDimensions,
+  formatPhotoSizeKb,
+  sortedPhotos,
+} from '../utils/articleDetail';
+import { notifyError } from '../utils/notify';
+import { readClipboardImage } from '../utils/pasteImage';
+import { prepareArticlePhoto } from '../utils/prepareArticlePhoto';
+import ThumbHashImage from './article/ThumbHashImage';
+import ArticlePhoto from './article/ArticlePhoto';
+import BrandImageSearchDialog from './brand/BrandImageSearchDialog';
+import ArticleImageSearchDialog from './article/ArticleImageSearchDialog';
+import {
+  CHECKERBOARD,
+  SCRIM_BUTTON,
+  SCRIM_LABEL,
+  SCRIM_SOFT,
+  SCRIM_STRONG,
+  SHADOW_THUMB_RING,
+  VEIL_MUTED,
+  WHITE,
+} from '../colors';
+// #endregion
+
+// #region constants & styles
+/** Max edge (px) of the single-image preview inside the dialog. */
+const MAX_PREVIEW = 240;
+
+const overlayChipSx = {
+  height: 22,
+  bgcolor: SCRIM_LABEL,
+  color: WHITE,
+  '& .MuiChip-label': { px: 0.75, fontSize: 11 },
+};
+
+const overlayIconSx = {
+  color: WHITE,
+  bgcolor: SCRIM_BUTTON,
+  '&:hover': { bgcolor: SCRIM_STRONG },
+  '&.Mui-disabled': { color: VEIL_MUTED, bgcolor: SCRIM_SOFT },
+};
+// #endregion
+
+// #region helper functions
+function isSingleMode(props) {
+  if (typeof props.single === 'boolean') {
+    return props.single;
+  }
+  if (props.maxPictures === 1 || props.maxPhotos === 1) {
+    return true;
+  }
+  if (props.brand || props.category || props.attributeValue) {
+    return true;
+  }
+  if (props.article) {
+    return false;
+  }
+  return false;
+}
+
+function resolvePictures(props, single) {
+  if (Array.isArray(props.pictures)) {
+    return single ? props.pictures.slice(0, 1) : props.pictures;
+  }
+  if (Array.isArray(props.pics)) {
+    return single ? props.pics.slice(0, 1) : props.pics;
+  }
+
+  // Brands: only logo[0] with sort=0 fillable
+  if (props.brand) {
+    const rawPics = Array.isArray(props.brand.pics) ? props.brand.pics : [];
+    const firstPic = rawPics[0] || (props.brand.fullHash ? {
+      fullHash: props.brand.fullHash,
+      thumbHash: props.brand.thumbHash,
+      thumbW: props.brand.thumbW,
+      thumbH: props.brand.thumbH,
+      sort: 0,
+    } : null);
+    return firstPic ? [firstPic] : [];
+  }
+
+  // Articles: multiple photos allowed
+  if (props.article) {
+    const list = sortedPhotos(props.article);
+    return single ? list.slice(0, 1) : list;
+  }
+
+  // Categories: single photo
+  if (props.category) {
+    if (Array.isArray(props.category.pics) && props.category.pics.length > 0) {
+      return [props.category.pics[0]];
+    }
+    if (props.category.fullHash) {
+      return [{
+        fullHash: props.category.fullHash,
+        thumbHash: props.category.thumbHash,
+        thumbW: props.category.thumbW,
+        thumbH: props.category.thumbH,
+        sort: 0,
+      }];
+    }
+    return [];
+  }
+
+  // Attribute values: single photo
+  if (props.attributeValue) {
+    if (Array.isArray(props.attributeValue.pics) && props.attributeValue.pics.length > 0) {
+      return [props.attributeValue.pics[0]];
+    }
+    if (props.attributeValue.fullHash) {
+      return [{
+        fullHash: props.attributeValue.fullHash,
+        thumbHash: props.attributeValue.thumbHash,
+        thumbW: props.attributeValue.thumbW,
+        thumbH: props.attributeValue.thumbH,
+        sort: 0,
+      }];
+    }
+    return [];
+  }
+
+  if (props.pic) {
+    return [props.pic];
+  }
+
+  return [];
+}
+
+function resolveTitle(props, single) {
+  if (props.title) {
+    return typeof props.title === 'function' ? props.title(props) : props.title;
+  }
+  if (props.brand) {
+    const name = props.brand.name ? ` ${props.brand.name}` : '';
+    return `Logo:${name}`;
+  }
+  if (props.category) {
+    const name = props.category.name ? ` ${props.category.name}` : '';
+    return `Kategoriebild:${name}`;
+  }
+  if (props.attributeValue) {
+    const name = props.attributeValue.value || props.attributeValue.name
+      ? ` ${props.attributeValue.value || props.attributeValue.name}`
+      : '';
+    return `Bild:${name}`;
+  }
+  if (props.article) {
+    const name = props.article.name || props.article.sku
+      ? ` ${props.article.name || props.article.sku}`
+      : '';
+    return `Bilder:${name}`;
+  }
+  return single ? 'Bild' : 'Bilder';
+}
+// #endregion
+
+/**
+ * Unified class component for entity pictures and logos.
+ * Supports:
+ * - Single picture mode (Brand logo with sort=0, Category, AttributeValue)
+ * - Multi picture mode (Article photos with reorder & chat edit)
+ * - Actions: Löschen, Neues Suchen, Bild einfügen (clipboard), Bild hochladen (file), Schließen.
+ */
+// #region PicturesDialog
+export default class PicturesDialog extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.fileInputRef = createRef();
+    this.state = {
+      busy: false,
+      searchOpen: false,
+    };
+  }
+
+  // #region dialog close
+  handleClose = () => {
+    if (this.state.busy) return;
+    this.props.onClose?.();
+  };
+  // #endregion
+
+  // #region upload & paste operations
+  // MARK: prepares image and calls upload handler or automat action
+  uploadRawImage = async (rawBlob) => {
+    const { onUpload, brand, article, category, onArticleUpdated } = this.props;
+    this.setState({ busy: true });
+    try {
+      const file = await prepareArticlePhoto(rawBlob);
+
+      if (onUpload) {
+        await onUpload(file);
+      } else if (brand?.id) {
+        await brandAutomat.actions.addImage(brand.id, file);
+        enqueueSnackbar(`Markenlogo für „${brand.name || ''}“ gespeichert.`, { variant: 'success' });
+      } else if (article?.sku) {
+        const uploadStarted = performance.now();
+        const res = await articleApi.uploadImage(article.sku, file);
+        console.log('[article-photo] upload', {
+          uploadMs: Math.round(performance.now() - uploadStarted),
+          bytes: file.size,
+          sku: article.sku,
+        });
+        requireObject(res, 'POST /api/article/:sku/image');
+        requireObject(res.image, 'image');
+        const updated = articleWithUploadedPhoto(article, res.image);
+        artikelAutomat.actions.setArticle(updated);
+        onArticleUpdated?.(updated);
+        enqueueSnackbar('Artikelbild gespeichert.', { variant: 'success' });
+      } else if (category?.id) {
+        await categoryAutomat.actions.uploadCategoryImage({
+          categoryId: category.id,
+          file,
+        });
+        enqueueSnackbar('Kategoriebild gespeichert.', { variant: 'success' });
+      }
+    } catch (err) {
+      notifyError(err);
+    } finally {
+      this.setState({ busy: false });
+    }
+  };
+
+  // MARK: reads clipboard image and uploads
+  handlePasteClick = async () => {
+    if (this.state.busy || this.props.disabled) return;
+    try {
+      const image = await readClipboardImage();
+      if (image) {
+        await this.uploadRawImage(image);
+      } else {
+        enqueueSnackbar('Kein Bild in der Zwischenablage gefunden.', { variant: 'info' });
+      }
+    } catch (err) {
+      console.warn('Clipboard read error:', err);
+      enqueueSnackbar('Zugriff auf Zwischenablage nicht möglich.', { variant: 'warning' });
+    }
+  };
+
+  handleUploadClick = () => {
+    if (this.state.busy || this.props.disabled) return;
+    this.fileInputRef.current?.click();
+  };
+
+  handleFileChange = (event) => {
+    const file = event.target.files?.[0];
+    event.target.value = '';
+    if (!file) return;
+    void this.uploadRawImage(file);
+  };
+  // #endregion
+
+  // #region deletion operations
+  // MARK: deletes single image (brand, category, attributeValue)
+  handleDeleteSingle = async () => {
+    const { busy } = this.state;
+    const { disabled, brand, category, attributeValue, onDelete } = this.props;
+    if (busy || disabled) return;
+
+    const single = isSingleMode(this.props);
+    const pics = resolvePictures(this.props, single);
+    const pic = pics[0];
+    if (!pic) return;
+
+    const targetName = brand?.name || category?.name || attributeValue?.name || 'dieses Bild';
+    const label = brand ? `Logo von „${targetName}"` : `Bild von „${targetName}"`;
+    if (!window.confirm(`${label} wirklich löschen?`)) return;
+
+    this.setState({ busy: true });
+    try {
+      if (onDelete) {
+        await onDelete(pic, 0);
+      } else if (brand?.id) {
+        await brandAutomat.actions.deleteImage(brand.id);
+        enqueueSnackbar('Markenlogo gelöscht.', { variant: 'success' });
+      } else if (category?.id) {
+        await categoryAutomat.actions.deleteCategoryImage(category.id);
+        enqueueSnackbar('Kategoriebild gelöscht.', { variant: 'success' });
+      }
+    } catch (err) {
+      notifyError(err);
+    } finally {
+      this.setState({ busy: false });
+    }
+  };
+
+  // MARK: deletes multi image (article photos)
+  handleDeleteMulti = async (fullHash) => {
+    const { busy } = this.state;
+    const { disabled, article, onDelete, onArticleUpdated } = this.props;
+    if (busy || disabled) return;
+
+    this.setState({ busy: true });
+    try {
+      if (onDelete) {
+        await onDelete(fullHash);
+      } else if (article?.sku) {
+        await articleApi.deleteImage(article.sku, fullHash);
+        const updated = articleWithoutPhoto(article, fullHash);
+        artikelAutomat.actions.setArticle(updated);
+        onArticleUpdated?.(updated);
+        enqueueSnackbar('Artikelbild gelöscht.', { variant: 'success' });
+      }
+    } catch (err) {
+      notifyError(err);
+    } finally {
+      this.setState({ busy: false });
+    }
+  };
+  // #endregion
+
+  // #region reordering & chat edit (multi mode)
+  // MARK: calls orderImages via articleApi
+  handleMoveMulti = async (fullHash, delta) => {
+    const { busy } = this.state;
+    const { disabled, article, onReorder, onArticleUpdated } = this.props;
+    if (busy || disabled) return;
+
+    const photos = sortedPhotos(article);
+    const index = photos.findIndex((row) => row.fullHash === fullHash);
+    const target = index + delta;
+    if (index < 0 || target < 0 || target >= photos.length) return;
+
+    const next = [...photos];
+    const [row] = next.splice(index, 1);
+    next.splice(target, 0, row);
+    const fullHashes = next.map((item) => item.fullHash);
+
+    this.setState({ busy: true });
+    try {
+      if (onReorder) {
+        await onReorder(fullHashes);
+      } else if (article?.sku) {
+        const res = await articleApi.orderImages(article.sku, fullHashes);
+        requireObject(res, 'PUT /api/article/:sku/images/order');
+        requireArray(res.fullHashes, 'fullHashes');
+        const updated = articleWithPhotoOrder(article, res.fullHashes);
+        artikelAutomat.actions.setArticle(updated);
+        onArticleUpdated?.(updated);
+      }
+    } catch (err) {
+      notifyError(err);
+    } finally {
+      this.setState({ busy: false });
+    }
+  };
+
+  handleEditInChat = (photo, index) => {
+    const { article, onEditInChat } = this.props;
+    if (onEditInChat) {
+      onEditInChat(photo, index);
+      return;
+    }
+    const sku = article?.sku ?? '';
+    const imageNr = index + 1;
+    const prompt = `Artikelbild Nr ${imageNr} von Artikel SKU ${sku} folgende Änderung: `;
+    chatAutomat.actions.openWithPrompt(prompt);
+  };
+  // #endregion
+
+  // #region search dialog handlers
+  handleSearchOpen = () => {
+    if (this.state.busy || this.props.disabled) return;
+    if (this.props.onSearchNew) {
+      this.props.onSearchNew();
+      return;
+    }
+    this.setState({ searchOpen: true });
+  };
+
+  handleSearchClose = () => {
+    this.setState({ searchOpen: false });
+  };
+  // #endregion
+
+  // #region render helpers
+  renderSinglePreview(pic, title) {
+    const { brand, emptyText } = this.props;
+    const hasPic = Boolean(pic?.fullHash || pic?.thumbHash);
+    const { fullHash, thumbHash, thumbW, thumbH, fullW, fullH, fullSize } = pic ?? {};
+
+    const tw = Number(thumbW || fullW);
+    const th = Number(thumbH || fullH);
+    let w = MAX_PREVIEW;
+    let h = MAX_PREVIEW;
+    if (Number.isFinite(tw) && Number.isFinite(th) && tw > 0 && th > 0) {
+      const scale = Math.min(1, MAX_PREVIEW / Math.max(tw, th));
+      w = Math.max(1, Math.round(tw * scale));
+      h = Math.max(1, Math.round(th * scale));
+    }
+
+    const hasDimensions = (fullW != null && fullH != null) || (thumbW != null && thumbH != null);
+    const hasSize = fullSize != null;
+
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          py: 1,
+        }}
+      >
+        <Box
+          sx={{
+            position: 'relative',
+            width: w,
+            height: h,
+            borderRadius: 1.5,
+            overflow: 'hidden',
+            bgcolor: WHITE,
+            backgroundImage: CHECKERBOARD,
+            backgroundSize: '16px 16px',
+            backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0px',
+            boxShadow: SHADOW_THUMB_RING,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {thumbHash ? <ThumbHashImage thumbHash={thumbHash} /> : null}
+          {fullHash ? (
+            <Box
+              component="img"
+              src={thumb.url(fullHash)}
+              alt={title}
+              draggable={false}
+              sx={{
+                position: 'absolute',
+                inset: 0,
+                width: '100%',
+                height: '100%',
+                objectFit: 'contain',
+                display: 'block',
+              }}
+            />
+          ) : (
+            <Box
+              sx={{
+                position: 'absolute',
+                inset: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                p: 2,
+                textAlign: 'center',
+              }}
+            >
+              <Typography variant="caption" color="text.secondary">
+                {emptyText || (brand ? 'Kein Logo hinterlegt.' : 'Kein Bild hinterlegt.')}
+              </Typography>
+            </Box>
+          )}
+
+          {/* Dimension and size overlay chip */}
+          {hasPic && (hasDimensions || hasSize) ? (
+            <Box
+              sx={{
+                position: 'absolute',
+                top: 6,
+                left: 6,
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 0.5,
+                pointerEvents: 'none',
+              }}
+            >
+              {hasDimensions ? (
+                <Chip
+                  size="small"
+                  label={formatPhotoDimensions(fullW ?? thumbW, fullH ?? thumbH)}
+                  sx={overlayChipSx}
+                />
+              ) : null}
+              {hasSize ? (
+                <Chip
+                  size="small"
+                  label={formatPhotoSizeKb(fullSize)}
+                  sx={overlayChipSx}
+                />
+              ) : null}
+            </Box>
+          ) : null}
+        </Box>
+      </Box>
+    );
+  }
+
+  renderMultiPhotoTile(photo, index, total) {
+    const { busy } = this.state;
+    const { disabled } = this.props;
+    const hasDimensions = photo.fullW != null && photo.fullH != null;
+    const hasSize = photo.fullSize != null;
+
+    return (
+      <Box
+        key={photo.fullHash || index}
+        sx={{ position: 'relative', width: 200, height: 200, flexShrink: 0 }}
+      >
+        <ArticlePhoto photo={photo} size={200} sx={{ position: 'absolute', inset: 0 }} />
+        <Box
+          sx={{
+            position: 'absolute',
+            inset: 0,
+            zIndex: 1,
+            pointerEvents: 'none',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            p: 0.75,
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 0.5,
+              pointerEvents: 'none',
+            }}
+          >
+            {hasDimensions ? (
+              <Chip
+                size="small"
+                label={formatPhotoDimensions(photo.fullW, photo.fullH)}
+                sx={overlayChipSx}
+              />
+            ) : null}
+            {hasSize ? (
+              <Chip
+                size="small"
+                label={formatPhotoSizeKb(photo.fullSize)}
+                sx={overlayChipSx}
+              />
+            ) : null}
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              pointerEvents: 'auto',
+            }}
+          >
+            <IconButton
+              type="button"
+              size="small"
+              aria-label="Bearbeiten"
+              disabled={busy || disabled}
+              onClick={() => this.handleEditInChat(photo, index)}
+              sx={overlayIconSx}
+            >
+              <EditOutlinedIcon fontSize="small" />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 0.25 }}>
+              <IconButton
+                type="button"
+                size="small"
+                aria-label="Nach vorne"
+                disabled={busy || disabled || index === 0}
+                onClick={() => void this.handleMoveMulti(photo.fullHash, -1)}
+                sx={overlayIconSx}
+              >
+                <KeyboardArrowUpIcon fontSize="small" />
+              </IconButton>
+              <IconButton
+                type="button"
+                size="small"
+                aria-label="Nach hinten"
+                disabled={busy || disabled || index >= total - 1}
+                onClick={() => void this.handleMoveMulti(photo.fullHash, 1)}
+                sx={overlayIconSx}
+              >
+                <KeyboardArrowDownIcon fontSize="small" />
+              </IconButton>
+              <IconButton
+                type="button"
+                size="small"
+                aria-label="Löschen"
+                disabled={busy || disabled}
+                onClick={() => void this.handleDeleteMulti(photo.fullHash)}
+                sx={overlayIconSx}
+              >
+                <DeleteOutlineOutlinedIcon fontSize="small" />
+              </IconButton>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+  // #endregion
+
+  // #region main render
+  render() {
+    const { open, disabled, brand, article, searchDialog: CustomSearchDialog } = this.props;
+    const { busy, searchOpen } = this.state;
+    const single = isSingleMode(this.props);
+    const pics = resolvePictures(this.props, single);
+    const title = resolveTitle(this.props, single);
+    const hasPic = Boolean(pics[0]?.fullHash || pics[0]?.thumbHash);
+
+    return (
+      <>
+        <AppDialog
+          open={open}
+          onClose={busy ? undefined : this.handleClose}
+          maxWidth={single ? false : 'md'}
+          fullWidth={!single}
+          aria-labelledby="entity-pictures-dialog-title"
+          slotProps={{
+            paper: {
+              sx: single
+                ? { width: 360, maxWidth: '90vw' }
+                : { maxWidth: '95vw' },
+            },
+          }}
+        >
+          <DialogTitle
+            id="entity-pictures-dialog-title"
+            sx={{ px: 2.5, pt: 2, pb: 0.5 }}
+          >
+            {title}
+          </DialogTitle>
+
+          <DialogContent dividers={!single} sx={{ px: 2.5, py: single ? 1 : 1.5 }}>
+            {single ? (
+              this.renderSinglePreview(pics[0], title)
+            ) : pics.length === 0 ? (
+              <Box sx={{ color: 'text.secondary', py: 2 }}>Keine Bilder.</Box>
+            ) : (
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: 1.5,
+                }}
+              >
+                {pics.map((photo, index) =>
+                  this.renderMultiPhotoTile(photo, index, pics.length),
+                )}
+              </Box>
+            )}
+          </DialogContent>
+
+          {single ? (
+            <DialogActions
+              sx={{
+                px: 2,
+                pb: 1.5,
+                pt: 0.5,
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 1,
+              }}
+            >
+              {/* Row 1: Insert from clipboard / Upload from file */}
+              <Box sx={{ display: 'flex', gap: 1, width: '100%' }}>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  startIcon={<ContentPasteIcon />}
+                  disabled={busy || disabled}
+                  onClick={this.handlePasteClick}
+                  sx={{ flex: 1, whiteSpace: 'nowrap' }}
+                >
+                  Bild einfügen
+                </Button>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  startIcon={<UploadFileIcon />}
+                  disabled={busy || disabled}
+                  onClick={this.handleUploadClick}
+                  sx={{ flex: 1, whiteSpace: 'nowrap' }}
+                >
+                  Bild hochladen
+                </Button>
+              </Box>
+
+              {/* Row 2: Delete, Search new, Close */}
+              <Box
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  width: '100%',
+                  gap: 0.5,
+                }}
+              >
+                <Button
+                  size="small"
+                  color="error"
+                  startIcon={<DeleteOutlinedIcon />}
+                  disabled={busy || disabled || !hasPic}
+                  onClick={this.handleDeleteSingle}
+                >
+                  Löschen
+                </Button>
+                <Button
+                  size="small"
+                  startIcon={<ImageSearchIcon />}
+                  disabled={busy || disabled}
+                  onClick={this.handleSearchOpen}
+                >
+                  Neues Suchen
+                </Button>
+                <Button
+                  size="small"
+                  color="inherit"
+                  startIcon={<CloseIcon />}
+                  disabled={busy}
+                  onClick={this.handleClose}
+                >
+                  Schließen
+                </Button>
+              </Box>
+            </DialogActions>
+          ) : (
+            <DialogActions
+              sx={{
+                px: 3,
+                py: 2,
+                justifyContent: 'space-between',
+                flexWrap: 'wrap',
+                gap: 1,
+              }}
+            >
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  startIcon={<ContentPasteIcon />}
+                  disabled={busy || disabled}
+                  onClick={this.handlePasteClick}
+                >
+                  Bild einfügen
+                </Button>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  startIcon={<UploadFileIcon />}
+                  disabled={busy || disabled}
+                  onClick={this.handleUploadClick}
+                >
+                  Bild hochladen
+                </Button>
+                <Button
+                  size="small"
+                  variant="contained"
+                  startIcon={<ImageSearchIcon />}
+                  disabled={busy || disabled}
+                  onClick={this.handleSearchOpen}
+                >
+                  Bild suchen
+                </Button>
+              </Box>
+              <Button
+                size="small"
+                color="inherit"
+                disabled={busy}
+                onClick={this.handleClose}
+              >
+                Schließen
+              </Button>
+            </DialogActions>
+          )}
+        </AppDialog>
+
+        {/* Hidden file input for file uploads */}
+        <input
+          ref={this.fileInputRef}
+          type="file"
+          accept="image/*"
+          hidden
+          onChange={this.handleFileChange}
+        />
+
+        {/* Optional embedded image search dialogs */}
+        {searchOpen && CustomSearchDialog ? (
+          <CustomSearchDialog
+            open={searchOpen}
+            onClose={this.handleSearchClose}
+          />
+        ) : searchOpen && brand ? (
+          <BrandImageSearchDialog
+            open={searchOpen}
+            brand={brand}
+            onClose={this.handleSearchClose}
+          />
+        ) : searchOpen && article ? (
+          <ArticleImageSearchDialog
+            open={searchOpen}
+            article={article}
+            onClose={this.handleSearchClose}
+            onArticleUpdated={this.props.onArticleUpdated}
+          />
+        ) : null}
+      </>
+    );
+  }
+  // #endregion
+}
+// #endregion

src/components/article/ArticlePhotosDialog.jsx

@@ -1,374 +1,17 @@
-import { Component, createRef } from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Chip from '@mui/material/Chip';
-import AppDialog from '../AppDialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import IconButton from '@mui/material/IconButton';
-import ContentPasteIcon from '@mui/icons-material/ContentPaste';
-import UploadFileIcon from '@mui/icons-material/UploadFile';
-import ImageSearchIcon from '@mui/icons-material/ImageSearch';
-import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
-import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import { enqueueSnackbar } from 'notistack';
-import { article as articleApi } from '../../api';
-import artikelAutomat from '../../automats/artikelAutomat';
-import chatAutomat from '../../automats/chatAutomat';
-import { requireArray, requireObject } from '../../utils/apiShape';
-import {
-  articleWithPhotoOrder,
-  articleWithUploadedPhoto,
-  articleWithoutPhoto,
-  formatPhotoDimensions,
-  formatPhotoSizeKb,
-  sortedPhotos,
-} from '../../utils/articleDetail';
-import { notifyError } from '../../utils/notify';
-import { readClipboardImage } from '../../utils/pasteImage';
-import {
-  SCRIM_BUTTON,
-  SCRIM_LABEL,
-  SCRIM_SOFT,
-  SCRIM_STRONG,
-  VEIL_MUTED,
-  WHITE,
-} from '../../colors';
-import { prepareArticlePhoto } from '../../utils/prepareArticlePhoto';
-import ArticlePhoto from './ArticlePhoto';
-import ArticleImageSearchDialog from './ArticleImageSearchDialog';
-
-const overlayChipSx = {
-  height: 22,
-  bgcolor: SCRIM_LABEL,
-  color: WHITE,
-  '& .MuiChip-label': { px: 0.75, fontSize: 11 },
-};
-
-const overlayIconSx = {
-  color: WHITE,
-  bgcolor: SCRIM_BUTTON,
-  '&:hover': { bgcolor: SCRIM_STRONG },
-  '&.Mui-disabled': { color: VEIL_MUTED, bgcolor: SCRIM_SOFT },
-};
-
-class ArticlePhotosDialog extends Component {
-  constructor(props) {
-    super(props);
-    this.fileInputRef = createRef();
-    this.state = { busy: false, searchOpen: false };
-    this.handleClose = this.handleClose.bind(this);
-    this.handlePasteClick = this.handlePasteClick.bind(this);
-    this.handleUploadClick = this.handleUploadClick.bind(this);
-    this.handleSearchOpen = this.handleSearchOpen.bind(this);
-    this.handleSearchClose = this.handleSearchClose.bind(this);
-    this.handleFileChange = this.handleFileChange.bind(this);
-    this.uploadRawImage = this.uploadRawImage.bind(this);
-    this.handleEditInChat = this.handleEditInChat.bind(this);
-  }
-
-  handleClose() {
-    if (this.state.busy) return;
-    this.props.onClose();
-  }
-
-  handleEditInChat(photo, index) {
-    const { article: articleData } = this.props;
-    const sku = articleData?.sku ?? '';
-    const imageNr = index + 1;
-    const prompt = `Artikelbild Nr ${imageNr} von Artikel SKU ${sku} folgende Änderung: `;
-    chatAutomat.actions.openWithPrompt(prompt);
-  }
-
-  async uploadRawImage(rawBlob) {
-    const { article: articleData, onArticleUpdated } = this.props;
-    this.setState({ busy: true });
-    try {
-      const file = await prepareArticlePhoto(rawBlob);
-      const uploadStarted = performance.now();
-      const res = await articleApi.uploadImage(articleData.sku, file);
-      console.log('[article-photo] upload', {
-        uploadMs: Math.round(performance.now() - uploadStarted),
-        bytes: file.size,
-        sku: articleData.sku,
-      });
-      requireObject(res, 'POST /api/article/:sku/image');
-      requireObject(res.image, 'image');
-      const updated = articleWithUploadedPhoto(articleData, res.image);
-      artikelAutomat.actions.setArticle(updated);
-      onArticleUpdated?.(updated);
-    } catch (err) {
-      notifyError(err);
-    } finally {
-      this.setState({ busy: false });
-    }
-  }
-
-  async handlePasteClick() {
-    if (this.state.busy) return;
-    try {
-      const image = await readClipboardImage();
-      if (image) {
-        await this.uploadRawImage(image);
-      } else {
-        enqueueSnackbar('Kein Bild in der Zwischenablage gefunden.', { variant: 'info' });
-      }
-    } catch (err) {
-      console.warn('Clipboard read error:', err);
-      enqueueSnackbar('Zugriff auf Zwischenablage nicht möglich.', { variant: 'warning' });
-    }
-  }
-
-  handleUploadClick() {
-    if (this.state.busy) return;
-    this.fileInputRef.current?.click();
-  }
-
-  handleSearchOpen() {
-    if (this.state.busy) return;
-    this.setState({ searchOpen: true });
-  }
-
-  handleSearchClose() {
-    this.setState({ searchOpen: false });
-  }
-
-  handleFileChange(event) {
-    const file = event.target.files?.[0];
-    event.target.value = '';
-    if (!file) return;
-    void this.uploadRawImage(file);
-  }
-
-  async deletePhoto(fullHash) {
-    const { article: articleData, onArticleUpdated } = this.props;
-    this.setState({ busy: true });
-    try {
-      await articleApi.deleteImage(articleData.sku, fullHash);
-      const updated = articleWithoutPhoto(articleData, fullHash);
-      artikelAutomat.actions.setArticle(updated);
-      onArticleUpdated?.(updated);
-    } catch (err) {
-      notifyError(err);
-    } finally {
-      this.setState({ busy: false });
-    }
-  }
-
-  async movePhoto(fullHash, delta) {
-    const { article: articleData, onArticleUpdated } = this.props;
-    const photos = sortedPhotos(articleData);
-    const index = photos.findIndex((row) => row.fullHash === fullHash);
-    const target = index + delta;
-    if (index < 0 || target < 0 || target >= photos.length) return;
-
-    const next = [...photos];
-    const [row] = next.splice(index, 1);
-    next.splice(target, 0, row);
-    const fullHashes = next.map((item) => item.fullHash);
-
-    this.setState({ busy: true });
-    try {
-      const res = await articleApi.orderImages(articleData.sku, fullHashes);
-      requireObject(res, 'PUT /api/article/:sku/images/order');
-      requireArray(res.fullHashes, 'fullHashes');
-      const updated = articleWithPhotoOrder(articleData, res.fullHashes);
-      artikelAutomat.actions.setArticle(updated);
-      onArticleUpdated?.(updated);
-    } catch (err) {
-      notifyError(err);
-    } finally {
-      this.setState({ busy: false });
-    }
-  }
-
-  renderPhotoTile(photo, index, total) {
-    const { busy } = this.state;
-    const hasDimensions = photo.fullW != null && photo.fullH != null;
-    const hasSize = photo.fullSize != null;
-
-    return (
-      <Box
-        key={photo.fullHash}
-        sx={{ position: 'relative', width: 200, height: 200, flexShrink: 0 }}
-      >
-        <ArticlePhoto photo={photo} size={200} sx={{ position: 'absolute', inset: 0 }} />
-        <Box
-          sx={{
-            position: 'absolute',
-            inset: 0,
-            zIndex: 1,
-            pointerEvents: 'none',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'space-between',
-            p: 0.75,
-          }}
-        >
-          <Box
-            sx={{
-              display: 'flex',
-              flexWrap: 'wrap',
-              gap: 0.5,
-              pointerEvents: 'none',
-            }}
-          >
-            {hasDimensions ? (
-              <Chip
-                size="small"
-                label={formatPhotoDimensions(photo.fullW, photo.fullH)}
-                sx={overlayChipSx}
-              />
-            ) : null}
-            {hasSize ? (
-              <Chip
-                size="small"
-                label={formatPhotoSizeKb(photo.fullSize)}
-                sx={overlayChipSx}
-              />
-            ) : null}
-          </Box>
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              pointerEvents: 'auto',
-            }}
-          >
-            <IconButton
-              type="button"
-              size="small"
-              aria-label="Bearbeiten"
-              disabled={busy}
-              onClick={() => this.handleEditInChat(photo, index)}
-              sx={overlayIconSx}
-            >
-              <EditOutlinedIcon fontSize="small" />
-            </IconButton>
-            <Box
-              sx={{
-                display: 'flex',
-                gap: 0.25,
-              }}
-            >
-              <IconButton
-                type="button"
-                size="small"
-                aria-label="Nach vorne"
-                disabled={busy || index === 0}
-                onClick={() => void this.movePhoto(photo.fullHash, -1)}
-                sx={overlayIconSx}
-              >
-                <KeyboardArrowUpIcon fontSize="small" />
-              </IconButton>
-              <IconButton
-                type="button"
-                size="small"
-                aria-label="Nach hinten"
-                disabled={busy || index >= total - 1}
-                onClick={() => void this.movePhoto(photo.fullHash, 1)}
-                sx={overlayIconSx}
-              >
-                <KeyboardArrowDownIcon fontSize="small" />
-              </IconButton>
-              <IconButton
-                type="button"
-                size="small"
-                aria-label="Löschen"
-                disabled={busy}
-                onClick={() => void this.deletePhoto(photo.fullHash)}
-                sx={overlayIconSx}
-              >
-                <DeleteOutlineOutlinedIcon fontSize="small" />
-              </IconButton>
-            </Box>
-          </Box>
-        </Box>
-      </Box>
-    );
-  }
+import { PureComponent } from 'react';
+import PicturesDialog from '../PicturesDialog';
 
+/**
+ * Article photos dialog wrapping the unified PicturesDialog.
+ * Allows multiple photos with reordering, edit in chat, clipboard paste, upload, search, and delete.
+ *
+ * Props: open, article, onClose, onArticleUpdated
+ */
+// #region component
+export default class ArticlePhotosDialog extends PureComponent {
   render() {
-    const { open, article: articleData } = this.props;
-    const { busy } = this.state;
-    const photos = sortedPhotos(articleData);
-
-    return (
-      <>
-        <AppDialog open={open} onClose={this.handleClose} maxWidth="md" fullWidth>
-          <DialogTitle>Bilder</DialogTitle>
-          <DialogContent dividers>
-            {photos.length === 0 ? (
-              <Box sx={{ color: 'text.secondary', py: 2 }}>Keine Bilder.</Box>
-            ) : (
-              <Box
-                sx={{
-                  display: 'flex',
-                  flexWrap: 'wrap',
-                  gap: 1.5,
-                }}
-              >
-                {photos.map((photo, index) =>
-                  this.renderPhotoTile(photo, index, photos.length),
-                )}
-              </Box>
-            )}
-          </DialogContent>
-          <DialogActions sx={{ px: 3, py: 2, justifyContent: 'space-between', flexWrap: 'wrap', gap: 1 }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
-              <Button
-                type="button"
-                variant="outlined"
-                startIcon={<ContentPasteIcon />}
-                onClick={this.handlePasteClick}
-                disabled={busy}
-              >
-                Bild einfügen
-              </Button>
-              <Button
-                type="button"
-                variant="outlined"
-                startIcon={<UploadFileIcon />}
-                onClick={this.handleUploadClick}
-                disabled={busy}
-              >
-                Bild hochladen
-              </Button>
-              <Button
-                type="button"
-                variant="contained"
-                startIcon={<ImageSearchIcon />}
-                onClick={this.handleSearchOpen}
-                disabled={busy}
-              >
-                Bild suchen
-              </Button>
-            </Box>
-            <Button type="button" onClick={this.handleClose} disabled={busy} color="inherit">
-              Schließen
-            </Button>
-          </DialogActions>
-        </AppDialog>
-        <input
-          ref={this.fileInputRef}
-          type="file"
-          accept="image/*"
-          hidden
-          onChange={this.handleFileChange}
-        />
-        <ArticleImageSearchDialog
-          open={this.state.searchOpen}
-          article={articleData}
-          onClose={this.handleSearchClose}
-          onArticleUpdated={this.props.onArticleUpdated}
-        />
-      </>
-    );
+    return <PicturesDialog {...this.props} single={false} entityType="article" />;
   }
 }
+// #endregion
 
-export default ArticlePhotosDialog;

src/components/brand/ArtikelMarke.jsx

@@ -85,8 +85,8 @@ class ArtikelMarke extends PureComponent {
     this.setState({ logoOpen: false });
   };
 
-  handleThumbClick = () => {
-    if (this.props.disabled || !this.hasLogo()) return;
+  handleOpenLogo = () => {
+    if (this.props.disabled) return;
     this.setState({ previewOpen: true });
   };
 
@@ -124,7 +124,7 @@ class ArtikelMarke extends PureComponent {
           {hasLogo ? (
             <Box
               component="span"
-              onClick={this.handleThumbClick}
+              onClick={this.handleOpenLogo}
               sx={{
                 display: 'inline-flex',
                 flexShrink: 0,
@@ -137,9 +137,9 @@ class ArtikelMarke extends PureComponent {
             </Box>
           ) : (
             <IconButton
-              aria-label={`Logo für „${name}" suchen`}
+              aria-label={`Logo für „${name}" bearbeiten`}
               disabled={disabled}
-              onClick={this.handleSearchLogo}
+              onClick={this.handleOpenLogo}
               sx={{ width: 40, height: 40, flexShrink: 0 }}
             >
               <ImageSearchIcon sx={{ fontSize: 24 }} />

src/components/brand/BrandLogoPreviewDialog.jsx

@@ -1,176 +1,17 @@
 import { PureComponent } from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import AppDialog from '../AppDialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import Typography from '@mui/material/Typography';
-import CloseIcon from '@mui/icons-material/Close';
-import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
-import ImageSearchIcon from '@mui/icons-material/ImageSearch';
-import { enqueueSnackbar } from 'notistack';
-import { thumb } from '../../api';
-import brandAutomat from '../../automats/brandAutomat';
-import { notifyError } from '../../utils/notify';
-import ThumbHashImage from '../article/ThumbHashImage';
-import {
-  CHECKERBOARD,
-  SHADOW_THUMB_RING,
-  WHITE,
-} from '../../colors';
-
-/** Max edge (px) of the presized logo preview inside the dialog. */
-const MAX_PREVIEW = 240;
+import PicturesDialog from '../PicturesDialog';
 
 /**
- * Small fixed-size brand logo preview.
- * Shows the stored thumb presized with thumbW/thumbH and offers
- * Löschen / Neues Suchen / Schließen.
+ * Brand logo dialog wrapping the unified PicturesDialog.
+ * Offers Löschen, Neues Suchen, Schließen, Bild einfügen (clipboard), Bild hochladen.
  *
  * Props: open, brand, onClose, onSearchNew, disabled?
  */
+// #region component
 export default class BrandLogoPreviewDialog extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = { busy: false };
-  }
-
-  handleDelete = async () => {
-    const { brand } = this.props;
-    if (!brand?.id || this.state.busy) return;
-    if (!window.confirm(`Logo von „${brand.name ?? ''}" wirklich löschen?`)) return;
-    this.setState({ busy: true });
-    try {
-      await brandAutomat.actions.deleteImage(brand.id);
-      enqueueSnackbar('Markenlogo gelöscht.', { variant: 'success' });
-      this.props.onClose?.();
-    } catch (err) {
-      notifyError(err);
-    } finally {
-      this.setState({ busy: false });
-    }
-  };
-
   render() {
-    const { open, brand, disabled, onClose, onSearchNew } = this.props;
-    const { busy } = this.state;
-    const pic = brand?.pics?.[0];
-    const { fullHash, thumbHash, thumbW, thumbH } = pic ?? {};
-    const name = brand?.name ?? '';
-
-    // Presize the preview with thumbW/thumbH, capped to MAX_PREVIEW.
-    const tw = Number(thumbW);
-    const th = Number(thumbH);
-    let w = MAX_PREVIEW;
-    let h = MAX_PREVIEW;
-    if (Number.isFinite(tw) && Number.isFinite(th) && tw > 0 && th > 0) {
-      const scale = Math.min(1, MAX_PREVIEW / Math.max(tw, th));
-      w = Math.max(1, Math.round(tw * scale));
-      h = Math.max(1, Math.round(th * scale));
-    }
-
-    return (
-      <AppDialog
-        open={open}
-        onClose={busy ? undefined : onClose}
-        maxWidth={false}
-        fullWidth={false}
-        aria-labelledby="brand-logo-preview-title"
-        slotProps={{
-          paper: { sx: { width: 360, maxWidth: '90vw' } },
-        }}
-      >
-        <DialogTitle id="brand-logo-preview-title" sx={{ px: 2.5, pt: 2, pb: 0.5 }}>
-          Logo: {name}
-        </DialogTitle>
-
-        <DialogContent sx={{ px: 2.5, py: 1 }}>
-          <Box
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              py: 1,
-            }}
-          >
-            <Box
-              sx={{
-                position: 'relative',
-                width: w,
-                height: h,
-                borderRadius: 1.5,
-                overflow: 'hidden',
-                bgcolor: WHITE,
-                backgroundImage: CHECKERBOARD,
-                backgroundSize: '16px 16px',
-                backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0px',
-                boxShadow: SHADOW_THUMB_RING,
-              }}
-            >
-              {thumbHash ? <ThumbHashImage thumbHash={thumbHash} /> : null}
-              {fullHash ? (
-                <Box
-                  component="img"
-                  src={thumb.url(fullHash)}
-                  alt={`Logo von „${name}"`}
-                  draggable={false}
-                  sx={{
-                    position: 'absolute',
-                    inset: 0,
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'contain',
-                    display: 'block',
-                  }}
-                />
-              ) : (
-                <Box
-                  sx={{
-                    position: 'absolute',
-                    inset: 0,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <Typography variant="caption" color="text.secondary">
-                    Kein Logo hinterlegt.
-                  </Typography>
-                </Box>
-              )}
-            </Box>
-          </Box>
-        </DialogContent>
-
-        <DialogActions sx={{ px: 2, pb: 1.5, gap: 0.5 }}>
-          <Button
-            size="small"
-            color="error"
-            startIcon={<DeleteOutlinedIcon />}
-            disabled={busy || disabled}
-            onClick={this.handleDelete}
-          >
-            Löschen
-          </Button>
-          <Button
-            size="small"
-            startIcon={<ImageSearchIcon />}
-            disabled={busy || disabled}
-            onClick={onSearchNew}
-          >
-            Neues Suchen
-          </Button>
-          <Button
-            size="small"
-            startIcon={<CloseIcon />}
-            disabled={busy}
-            onClick={onClose}
-          >
-            Schließen
-          </Button>
-        </DialogActions>
-      </AppDialog>
-    );
+    return <PicturesDialog {...this.props} single entityType="brand" />;
   }
 }
+// #endregion
+

src/components/chat/ChatDrawer.jsx

@@ -46,6 +46,44 @@ import {
 } from '../../colors';
 
 const DEFAULT_DRAWER_WIDTH = 460;
+
+/** Sort by updated_at desc; subagents (started_by set) directly below their parent. */
+function sortConversations(list) {
+  const ts = (c) => new Date(c.updated_at || c.created_at || 0).getTime() || 0;
+  const byUpdated = (a, b) => ts(b) - ts(a);
+  const ids = new Set(list.map((c) => c.id));
+  const children = new Map();
+  const roots = [];
+  for (const c of list) {
+    if (c.started_by != null && ids.has(c.started_by)) {
+      if (!children.has(c.started_by)) children.set(c.started_by, []);
+      children.get(c.started_by).push(c);
+    } else {
+      roots.push(c);
+    }
+  }
+  const out = [];
+  const walk = (c, depth) => {
+    out.push({ conv: c, depth });
+    (children.get(c.id) || []).sort(byUpdated).forEach((k) => walk(k, depth + 1));
+  };
+  roots.sort(byUpdated).forEach((c) => walk(c, 0));
+  return out;
+}
+
+function formatUpdated(value) {
+  if (!value) return '';
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return '';
+  return d.toLocaleString('de-DE', {
+    day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit',
+  });
+}
+
+function conversationTitle(c) {
+  const msg = (c.first_message || '').replace(/\s+/g, ' ').trim();
+  return msg || '…';
+}
 const MIN_DRAWER_WIDTH = 320;
 
 export default class ChatDrawer extends PureComponent {
@@ -1085,24 +1123,32 @@ export default class ChatDrawer extends PureComponent {
                   if (!conv) return '';
                   return (
                     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, overflow: 'hidden' }}>
-                      <Typography variant="body2" fontWeight={600} noWrap>
-                        #{conv.id}
+                      <Typography variant="body2" fontWeight={600} noWrap sx={{ flexGrow: 1, minWidth: 0 }}>
+                        {conversationTitle(conv)}
                       </Typography>
-                      <Typography variant="caption" color="text.secondary" noWrap>
-                        {conv.model || 'Standard'}
+                      <Typography variant="caption" color="text.secondary" noWrap sx={{ flexShrink: 0 }}>
+                        {formatUpdated(conv.updated_at)}
                       </Typography>
                     </Box>
                   );
                 }}
               >
-                {conversations.map((c) => (
-                  <MenuItem key={c.id} value={c.id}>
+                {sortConversations(conversations).map(({ conv: c, depth }) => (
+                  <MenuItem key={c.id} value={c.id} sx={{ pl: 2 + depth * 2.5 }}>
                     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, width: '100%', overflow: 'hidden' }}>
-                      <Typography variant="body2" fontWeight={600} noWrap>
-                        #{c.id}
+                      {depth > 0 && (
+                        <Typography variant="caption" color="text.secondary">↳</Typography>
+                      )}
+                      <Typography
+                        variant="body2"
+                        fontWeight={depth > 0 ? 400 : 600}
+                        noWrap
+                        sx={{ flexGrow: 1, minWidth: 0 }}
+                      >
+                        {conversationTitle(c)}
                       </Typography>
-                      <Typography variant="caption" color="text.secondary" noWrap sx={{ flexGrow: 1 }}>
-                        {c.model || 'Standard'}
+                      <Typography variant="caption" color="text.secondary" noWrap sx={{ flexShrink: 0 }}>
+                        {formatUpdated(c.updated_at)}
                       </Typography>
                     </Box>
                   </MenuItem>