@pheem49/mint 1.15.0 → 1.16.0

package/src/renderer/shared/utils/workspacePreview.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+import { createWorkspacePreview } from './workspacePreview'
+
+const root = '/projects/Demo'
+describe('workspace preview loading', () => {
+  it('reads Markdown from the selected root and pins that root to the tab', async () => {
+    const artifact = await createWorkspacePreview(root, 'docs/README.md', {
+      readWorkspaceFile: async (path, workspace) => { expect([path, workspace]).toEqual(['docs/README.md', root]); return '# Hello\n\n**Mint**' },
+      startHtmlPreview: async () => { throw new Error('Markdown should not start a server') },
+    })
+    expect(artifact).toEqual({ path: 'docs/README.md', workspacePath: root, type: 'markdown', content: '# Hello\n\n**Mint**' })
+  })
+  for (const path of ['site/index.html', 'assets/photo.png', 'assets/icon.svg']) {
+    it(`serves ${path} without reading it as plain text before opening`, async () => {
+      const artifact = await createWorkspacePreview(root, path, {
+        readWorkspaceFile: async () => { throw new Error('The panel loads text separately; binary images must not be read as UTF-8') },
+        startHtmlPreview: async (workspace, file) => { expect([workspace, file]).toEqual([root, path]); return { url: `http://127.0.0.1:12345/${path}`, jobId: 'preview-1' } },
+      })
+      expect(artifact.path).toBe(path)
+      expect((artifact as any).workspacePath).toBe(root)
+      expect((artifact as any).url).toBe(`http://127.0.0.1:12345/${path}`)
+    })
+  }
+})

package/src/renderer/shared/utils/workspacePreview.ts

@@ -0,0 +1,16 @@
+import { detectArtifactType, type ArtifactFile } from '../components/ArtifactPreviewPanel'
+
+interface PreviewApi {
+  readWorkspaceFile(path: string, root?: string): Promise<string>
+  startHtmlPreview(root: string, path: string): Promise<{ url: string; jobId: string }>
+}
+
+export async function createWorkspacePreview(root: string, path: string, api: PreviewApi): Promise<ArtifactFile> {
+  const type = detectArtifactType(path)
+  if (type === 'code') throw new Error('This file type does not support Preview')
+  if (type === 'markdown') {
+    return { path, workspacePath: root, type, content: await api.readWorkspaceFile(path, root) }
+  }
+  const { url } = await api.startHtmlPreview(root, path)
+  return { path, workspacePath: root, type, url }
+}

package/src/renderer/shared/utils/workspaceSnapshot.test.ts

@@ -0,0 +1,49 @@
+import { expect, it } from 'vitest'
+import { WorkspaceSnapshotReader } from './workspaceSnapshot'
+import type { WorkspaceSnapshot } from '../types'
+
+const snapshot = (path: string): WorkspaceSnapshot => ({ path, revision: 1, git: { isRepository: false, currentBranch: null, detachedHead: null, branches: [], remoteBranches: [], isDirty: false }, tree: { name: path, path: '', kind: 'directory', children: [] } })
+const request = (root: string) => ({ root, relativePath: '', revision: 0 })
+
+it('starts the new project load immediately and discards the late previous project snapshot', async () => {
+  let finish!: (value: WorkspaceSnapshot) => void
+  const reader = new WorkspaceSnapshotReader(async ({ root }) => root === '/old' ? new Promise(resolve => { finish = resolve }) : snapshot(root))
+  const old = reader.refresh(request('/old'))
+  expect(await reader.refresh(request('/new'))).toMatchObject({ path: '/new' })
+  finish(snapshot('/old-canonical'))
+  expect(await old).toBeNull()
+})
+it('does not publish a snapshot or canonical path after the panel unmounts', async () => {
+  let finish!: (value: WorkspaceSnapshot) => void
+  const reader = new WorkspaceSnapshotReader(() => new Promise(resolve => { finish = resolve }))
+  const pending = reader.refresh(request('/old'))
+  reader.dispose()
+  finish(snapshot('/old-canonical'))
+  expect(await pending).toBeNull()
+})
+it('suppresses errors from superseded requests while reporting the current project failure', async () => {
+  let reject!: (error: Error) => void
+  const reader = new WorkspaceSnapshotReader(async ({ root }) => {
+    if (root === '/old') return new Promise((_resolve, fail) => { reject = fail })
+    throw new Error('new project unavailable')
+  })
+  const old = reader.refresh(request('/old'))
+  await expect(reader.refresh(request('/new'))).rejects.toThrow('new project unavailable')
+  reject(new Error('old project unavailable'))
+  expect(await old).toBeNull()
+})
+it('deduplicates simultaneous refreshes for one root without dropping later refreshes', async () => {
+  let finish!: (value: WorkspaceSnapshot) => void
+  let reads = 0
+  const reader = new WorkspaceSnapshotReader(() => { reads++; return new Promise(resolve => { finish = resolve }) })
+  const first = reader.refresh(request('/project'))
+  const duplicate = reader.refresh(request('/project'))
+  expect(reads).toBe(1)
+  expect(await duplicate).toBeNull()
+  finish(snapshot('/project'))
+  expect(await first).toMatchObject({ path: '/project' })
+  const later = reader.refresh(request('/project'))
+  expect(reads).toBe(2)
+  finish(snapshot('/project'))
+  expect(await later).toMatchObject({ path: '/project' })
+})

package/src/renderer/shared/utils/workspaceSnapshot.ts

@@ -0,0 +1,26 @@
+import type { WorkspaceOperation, WorkspaceSnapshot } from '../types'
+export class WorkspaceSnapshotReader {
+  private generation = 0
+  private inFlightRoot: string | null = null
+  private disposed = false
+  constructor(private read: (request: WorkspaceOperation) => Promise<WorkspaceSnapshot>) {}
+  async refresh(request: WorkspaceOperation): Promise<WorkspaceSnapshot | null> {
+    if (this.disposed || this.inFlightRoot === request.root) return null
+    const generation = ++this.generation
+    this.inFlightRoot = request.root
+    try {
+      const snapshot = await this.read(request)
+      return !this.disposed && generation === this.generation ? snapshot : null
+    } catch (error) {
+      if (this.disposed || generation !== this.generation) return null
+      throw error
+    } finally {
+      if (generation === this.generation) this.inFlightRoot = null
+    }
+  }
+  dispose() {
+    this.disposed = true
+    this.generation++
+    this.inFlightRoot = null
+  }
+}

package/src/renderer/shared/utils/workspaces.ts

@@ -0,0 +1,10 @@
+/** Workspace catalog shared by the chat and Code hub pickers. */
+export function normalizeWorkspacePath(path?: string | null): string {
+  const normalized = (path || '').trim().replace(/\\/g, '/')
+  if (/^[a-z]:\/+$/i.test(normalized)) return normalized.slice(0, 3)
+  return normalized.replace(/\/+$/, '') || (normalized.startsWith('/') ? '/' : '')
+}
+
+export function workspacePaths(recentPaths: string[], currentPath?: string, sessionPaths: (string | undefined)[] = []): string[] {
+  return [...new Set([...recentPaths, currentPath, ...sessionPaths].map(normalizeWorkspacePath).filter(Boolean))]
+}

package/src/renderer/shared/workspaceUndo.ts

@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { workspacePlatform } from './platform'
+import type { WorkspaceHistoryEntry, WorkspaceSnapshot } from './types'
+
+const busyRoots = new Set<string>()
+const HISTORY_EVENT = 'mint:workspace-history-changed'
+
+export function announceWorkspaceChange(snapshot: WorkspaceSnapshot) {
+  window.dispatchEvent(new CustomEvent(HISTORY_EVENT, { detail: snapshot }))
+}
+
+/** Shared by the workspace panel and titlebar; actions stay scoped to a root. */
+export function useWorkspaceUndo(root: string, revision = 0, onSnapshot?: (snapshot: WorkspaceSnapshot) => void) {
+  const [entries, setEntries] = useState<WorkspaceHistoryEntry[]>([])
+  const [loading, setLoading] = useState(false)
+  const loadedRoot = useRef(root)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const rootRef = useRef(root)
+  rootRef.current = root
+  const snapshotHandler = useRef(onSnapshot)
+  snapshotHandler.current = onSnapshot
+
+  useEffect(() => {
+    let active = true
+    let request = 0
+    if (loadedRoot.current !== root) {
+      loadedRoot.current = root
+      setEntries([])
+      setError('')
+      setBusy(false)
+    }
+    const refresh = async () => {
+      const current = ++request
+      if (!root.trim()) { setLoading(false); return }
+      setLoading(true)
+      try {
+        const result = await workspacePlatform.listWorkspaceHistory(root)
+        if (active && current === request) setEntries(result)
+      } catch (reason) {
+        if (active && current === request) setError(reason instanceof Error ? reason.message : String(reason))
+      } finally {
+        if (active && current === request) setLoading(false)
+      }
+    }
+    const changed = (event: Event) => {
+      const snapshot = (event as CustomEvent<WorkspaceSnapshot>).detail
+      if (snapshot?.path === root) {
+        snapshotHandler.current?.(snapshot)
+        void refresh()
+      }
+    }
+    void refresh()
+    window.addEventListener('focus', refresh)
+    window.addEventListener(HISTORY_EVENT, changed)
+    return () => {
+      active = false
+      window.removeEventListener('focus', refresh)
+      window.removeEventListener(HISTORY_EVENT, changed)
+    }
+  }, [root, revision])
+
+  const undo = useCallback(async (expectedId?: string) => {
+    if (!entries.length || busyRoots.has(root)) return false
+    if (expectedId && entries[0].id !== expectedId) {
+      setError("Workspace history changed; review the latest action before undoing")
+      return false
+    }
+    busyRoots.add(root)
+    setBusy(true)
+    setError('')
+    try {
+      const snapshot = await workspacePlatform.undoWorkspaceAction(root, revision, expectedId || entries[0].id)
+      announceWorkspaceChange(snapshot)
+      const result = await workspacePlatform.listWorkspaceHistory(root)
+      if (rootRef.current === root) setEntries(result)
+      return true
+    } catch (reason) {
+      if (rootRef.current === root) setError(reason instanceof Error ? reason.message : String(reason))
+      return false
+    } finally {
+      busyRoots.delete(root)
+      if (rootRef.current === root) setBusy(false)
+    }
+  }, [entries, root, revision])
+
+  return { entries, busy, loading, error, undo }
+}

package/src/renderer/src/App.tsx

@@ -12,6 +12,7 @@ const SpotlightWindow = lazy(() => import('./components/SpotlightWindow'))
 const WidgetWindow = lazy(() => import('./components/WidgetWindow'))
 const ProactiveGlow = lazy(() => import('./components/ProactiveGlow'))
 const ScreenPicker = lazy(() => import('./components/ScreenPicker'))
+const LiveTranslateControls = lazy(() => import('./components/LiveTranslateControls'))
 const MintDashboard = lazyWithRetry(() => import('./components/MintDashboard'))
 function getCurrentRoute(): string {
   if (typeof window === 'undefined') return '/'
@@ -32,7 +33,7 @@ export default function App() {
     window.addEventListener('popstate', handleUrlChange)
     window.addEventListener('hashchange', handleUrlChange)
 
-    // Fired by the tray "Settings" item (src-tauri/src/lib.rs) so it opens
+    // Fired by the tray "Settings" item (src-tauri/src/app/tray.rs) so it opens
     // the settings view in this window instead of spawning a separate one.
     const unlistenPromise = listen('open-settings', () => {
       window.location.hash = '#/settings'
@@ -101,6 +102,13 @@ export default function App() {
       </Suspense>
     )
   }
+  if (route.startsWith('/live-translate-controls')) {
+    return (
+      <Suspense fallback={null}>
+        <LiveTranslateControls />
+      </Suspense>
+    )
+  }
 
   const content = route.startsWith('/settings') ? (
     <>

package/src/renderer/src/components/LiveTranslateControls.tsx

@@ -0,0 +1,65 @@
+import SelectField from '../../shared/components/SelectField'
+import { useState } from 'react'
+import { invoke } from '@tauri-apps/api/core'
+import { emitTo } from '@tauri-apps/api/event'
+import { LANGUAGE_KEY, LANGUAGES } from './liveTranslateLanguage'
+import './ScreenPicker.css'
+
+type ControlAction = { type: 'pause' | 'resume' | 'change-area' | 'language'; languageChoice?: string; customLanguage?: string }
+
+export default function LiveTranslateControls() {
+  const [savedLanguage] = useState(() => window.localStorage.getItem(LANGUAGE_KEY) || 'Thai')
+  const [languageChoice, setLanguageChoice] = useState(() => LANGUAGES.includes(savedLanguage) ? savedLanguage : 'custom')
+  const [customLanguage, setCustomLanguage] = useState(() => LANGUAGES.includes(savedLanguage) ? '' : savedLanguage)
+  const [paused, setPaused] = useState(false)
+  const [error, setError] = useState('')
+
+  const send = async (action: ControlAction) => {
+    try {
+      await emitTo('screen-picker', 'live-translate-control', action)
+      setError('')
+      return true
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason))
+      return false
+    }
+  }
+
+  const chooseLanguage = (choice: string, custom = customLanguage) => {
+    setLanguageChoice(choice)
+    if (choice === 'custom') setCustomLanguage(custom)
+    const language = choice === 'custom' ? custom.trim() : choice
+    if (language) window.localStorage.setItem(LANGUAGE_KEY, language)
+    void send({ type: 'language', languageChoice: choice, customLanguage: custom })
+  }
+
+  const close = async () => {
+    try {
+      await invoke('close_desktop_window', { label: 'screen-picker' })
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason))
+    }
+  }
+
+  return (
+    <div className="live-translate-controls">
+      <div className="live-translate-toolbar">
+        <div className="live-translate-brand" data-tauri-drag-region>
+          <span aria-hidden="true">◈</span>
+          <div><strong>Live translate</strong><small>Click through the frame</small></div>
+        </div>
+        <label className="live-translate-language">To
+          <SelectField fullWidth={false} value={languageChoice} onValueChange={(nextValue) => chooseLanguage(nextValue)} aria-label="Target language">
+            {LANGUAGES.map((language) => <option key={language} value={language}>{language}</option>)}
+            <option value="custom">Other language…</option>
+          </SelectField>
+        </label>
+        {languageChoice === 'custom' && <input className="live-translate-custom-language" value={customLanguage} onChange={(event) => { setCustomLanguage(event.target.value); chooseLanguage('custom', event.target.value) }} maxLength={64} placeholder="Language name" aria-label="Custom target language" />}
+        <button type="button" onClick={() => { void send({ type: paused ? 'resume' : 'pause' }).then((sent) => { if (sent) setPaused(!paused) }) }}>{paused ? 'Resume' : 'Pause'}</button>
+        <button type="button" onClick={() => { void send({ type: 'change-area' }) }}>Change area</button>
+        <button type="button" className="live-translate-close" onClick={() => void close()} aria-label="Close live translate">×</button>
+      </div>
+      {error && <div className="live-translate-controls-error" role="alert">{error}</div>}
+    </div>
+  )
+}

package/src/renderer/src/components/PicturesLibrary.tsx

@@ -1,288 +1,2 @@
-import { useEffect, useMemo, useState, memo } from 'react'
-import '../css/pictures.css'
-import { createPortal } from 'react-dom'
-import { type PictureEntry, convertFileSrc, isTauriRuntime, getLocalApiBase, deleteSavedPicture } from '../tauri'
-import type { DashboardView } from './DashboardSidebar'
-
-const getPictureSrc = (picture: PictureEntry, useThumbnail = false) => {
-  if (isTauriRuntime()) {
-    if (useThumbnail && (picture.thumbnailPath || picture.thumbnailUrl)) {
-      return convertFileSrc(picture.thumbnailPath || picture.thumbnailUrl || '');
-    }
-    return convertFileSrc(picture.path || picture.url || '');
-  } else {
-    const apiBase = getLocalApiBase();
-    if (useThumbnail && (picture.thumbnailPath || picture.thumbnailUrl)) {
-      return `${apiBase}/thumbnails/${picture.id}.thumb.png`;
-    }
-    return `${apiBase}/pictures/${encodeURIComponent(picture.filename)}`;
-  }
-}
-
-interface PictureCardItemProps {
-  picture: PictureEntry
-  filterType: 'photo' | 'video'
-  index: number
-  onDeleteClick: (picture: PictureEntry) => void
-}
-
-const PictureCardItem = memo(({ picture, filterType, index, onDeleteClick }: PictureCardItemProps) => {
-  const isVideo = filterType === 'video'
-  return (
-    <article className="picture-card" key={picture.id}>
-      <button
-        type="button"
-        className="picture-card-delete-btn"
-        title="Delete item"
-        onClick={(e) => {
-          e.stopPropagation()
-          onDeleteClick(picture)
-        }}
-      >
-        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <polyline points="3 6 5 6 21 6"></polyline>
-          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-        </svg>
-      </button>
-      {isVideo ? (
-        <div style={{ position: 'relative', width: '100%', aspectRatio: '4 / 3', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#1a1a1a' }}>
-          {picture.thumbnailPath || picture.thumbnailUrl ? (
-            <img
-              src={getPictureSrc(picture, true)}
-              alt={picture.message || picture.filename}
-              loading={index < 8 ? 'eager' : 'lazy'}
-              decoding="async"
-              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-              onError={(e) => {
-                const img = e.currentTarget
-                if (!img.dataset.fallback) {
-                  img.dataset.fallback = 'true'
-                  img.src = getPictureSrc(picture, false)
-                }
-              }}
-            />
-          ) : (
-            <video
-              src={getPictureSrc(picture, false)}
-              preload="metadata"
-              style={{ width: '100%', height: '100%', objectFit: 'cover', pointerEvents: 'none' }}
-            />
-          )}
-          <div style={{
-            position: 'absolute',
-            top: '8px',
-            left: '8px',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '4px',
-            backgroundColor: 'rgba(0, 0, 0, 0.75)',
-            color: '#fff',
-            padding: '4px 8px',
-            borderRadius: '4px',
-            fontSize: '11px',
-            fontWeight: 600,
-            pointerEvents: 'none',
-            backdropFilter: 'blur(4px)',
-            border: '1px solid rgba(255, 255, 255, 0.1)'
-          }}>
-            <span>📹 Video</span>
-          </div>
-        </div>
-      ) : (
-        <div style={{ position: 'relative', width: '100%', aspectRatio: '4 / 3', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#1a1a1a' }}>
-          <img
-            src={getPictureSrc(picture, true)}
-            alt={picture.message || picture.filename}
-            loading={index < 8 ? 'eager' : 'lazy'}
-            decoding="async"
-            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-            onError={(e) => {
-              const img = e.currentTarget
-              if (!img.dataset.fallback) {
-                img.dataset.fallback = 'true'
-                img.src = getPictureSrc(picture, false)
-              }
-            }}
-          />
-        </div>
-      )}
-      <div className="picture-card-meta"><span>{picture.message || picture.filename}</span></div>
-    </article>
-  )
-})
-
-interface PicturesLibraryProps {
-  view: DashboardView
-  pictures: PictureEntry[]
-  onSetView: (view: DashboardView) => void
-  onRefreshPictures?: () => Promise<void>
-}
-
-export default function PicturesLibrary({ view, pictures, onSetView, onRefreshPictures }: PicturesLibraryProps) {
-  const [filterType, setFilterType] = useState<'photo' | 'video'>('photo')
-  const [visibleCount, setVisibleCount] = useState(24)
-  const [deletingPicture, setDeletingPicture] = useState<PictureEntry | null>(null)
-  const [isDeleting, setIsDeleting] = useState(false)
-
-  const filteredPictures = useMemo(() => {
-    return pictures.filter((picture) => {
-      const pathLower = (picture.path || '').toLowerCase()
-      const urlLower = (picture.url || '').toLowerCase()
-      const mimeLower = (picture.mimeType || '').toLowerCase()
-
-      const isVideo =
-        mimeLower.startsWith('video/') ||
-        pathLower.endsWith('.mp4') ||
-        pathLower.endsWith('.webm') ||
-        pathLower.endsWith('.mov') ||
-        pathLower.endsWith('.avi') ||
-        pathLower.endsWith('.mkv') ||
-        urlLower.endsWith('.mp4') ||
-        urlLower.endsWith('.webm') ||
-        urlLower.endsWith('.mov')
-
-      return filterType === 'video' ? isVideo : !isVideo
-    })
-  }, [pictures, filterType])
-
-  const visiblePictures = useMemo(
-    () => filteredPictures.slice(0, visibleCount),
-    [filteredPictures, visibleCount],
-  )
-
-  useEffect(() => {
-    setVisibleCount(24)
-  }, [view, pictures, filterType])
-
-  const handleDeleteConfirm = async () => {
-    if (!deletingPicture) return
-    const target = deletingPicture
-    setIsDeleting(true)
-    try {
-      await deleteSavedPicture(target.id || target.filename)
-      await onRefreshPictures?.()
-    } catch (err) {
-      console.error('Failed to delete picture:', err)
-    } finally {
-      setIsDeleting(false)
-      setDeletingPicture(null)
-    }
-  }
-
-  return (
-    <section className={`pictures-library ${view === 'pictures' ? 'is-visible' : ''}`} aria-hidden={view !== 'pictures'}>
-      <header className="pictures-header">
-        <div><span className="pictures-kicker">Gallery</span><h2>Saved pictures</h2></div>
-        <div className="pictures-header-actions">
-          <button className="pictures-close-btn" onClick={() => onSetView('chat')}>Close gallery</button>
-          <button type="button" className="picture-refresh-btn" title="Refresh" onClick={() => onRefreshPictures?.()}>
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.13-3.36L23 10"/><path d="M20.49 15a9 9 0 0 1-14.13 3.36L1 14"/></svg>
-          </button>
-          <button type="button" className="picture-folder-btn" disabled={pictures.length === 0} onClick={() => window.settingsApi?.openFolder(pictures[0]?.path || '')}>
-            Open Folder
-          </button>
-        </div>
-      </header>
-
-      {/* Tabs Filter */}
-      <div className="pictures-type-filter">
-        <button
-          type="button"
-          className={`filter-tab-btn ${filterType === 'photo' ? 'active' : ''}`}
-          onClick={() => setFilterType('photo')}
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-            <circle cx="8.5" cy="8.5" r="1.5"></circle>
-            <polyline points="21 15 16 10 5 21"></polyline>
-          </svg>
-          Photos
-        </button>
-        <button
-          type="button"
-          className={`filter-tab-btn ${filterType === 'video' ? 'active' : ''}`}
-          onClick={() => setFilterType('video')}
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <polygon points="23 7 16 12 23 17 23 7"></polygon>
-            <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
-          </svg>
-          Videos
-        </button>
-      </div>
-
-      {filteredPictures.length === 0 ? (
-        <div className="pictures-empty">
-          <div className="pictures-empty-icon" style={{ display: 'flex', justifyContent: 'center', marginBottom: '12px', opacity: 0.3 }}>
-            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline>
-            </svg>
-          </div>
-          <p>No saved {filterType === 'video' ? 'videos' : 'pictures'} yet</p>
-          <span>Items appear here after a message with an attachment is sent successfully.</span>
-        </div>
-      ) : (
-        <>
-          <div className="pictures-grid">
-            {visiblePictures.map((picture, index) => (
-              <PictureCardItem
-                key={picture.id}
-                picture={picture}
-                filterType={filterType}
-                index={index}
-                onDeleteClick={setDeletingPicture}
-              />
-            ))}
-          </div>
-          {visibleCount < filteredPictures.length && (
-            <div className="pictures-load-more-container">
-              <button
-                type="button"
-                className="pictures-load-more-btn"
-                onClick={() => setVisibleCount((prev) => prev + 24)}
-              >
-                Load More ({filteredPictures.length - visibleCount} remaining)
-              </button>
-            </div>
-          )}
-        </>
-      )}
-
-      {deletingPicture && typeof document !== 'undefined' && createPortal(
-        <div className="picture-delete-modal-overlay" onClick={() => setDeletingPicture(null)}>
-          <div className="picture-delete-modal" onClick={(e) => e.stopPropagation()}>
-            <div className="picture-delete-modal-header">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <polyline points="3 6 5 6 21 6"></polyline>
-                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-              </svg>
-              <span>Delete {filterType === 'video' ? 'Video' : 'Picture'}</span>
-            </div>
-            <p className="picture-delete-modal-body">
-              Are you sure you want to permanently delete <strong>{deletingPicture.message || deletingPicture.filename}</strong>? This action cannot be undone.
-            </p>
-            <div className="picture-delete-modal-actions">
-              <button
-                type="button"
-                className="picture-modal-btn cancel"
-                onClick={() => setDeletingPicture(null)}
-                disabled={isDeleting}
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                className="picture-modal-btn delete"
-                onClick={handleDeleteConfirm}
-                disabled={isDeleting}
-              >
-                {isDeleting ? 'Deleting...' : 'Delete'}
-              </button>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
-    </section>
-  )
-}
+// Compatibility import; all Library behavior lives in the shared feature.
+export { default } from '../../shared/components/LibraryPage'