@pheem49/mint 1.16.0 → 1.18.0

package/src/renderer/shared/components/workspace/WorkspaceFileInfo.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react'
+import { File, ExternalLink } from 'lucide-react'
+import { workspaceFileUrl } from '../../utils/workspaceDrag'
+import '../../css/workspace-file-info.css'
+
+export default function WorkspaceFileInfo({ path, root }: { path: string; root?: string }) {
+  const [opening, setOpening] = useState(false)
+  const [error, setError] = useState('')
+  const name = path.replace(/\\/g, '/').split('/').pop() || path
+  const open = async () => {
+    if (!root || opening) return
+    setOpening(true); setError('')
+    try {
+      const target = workspaceFileUrl(root, path)
+      const { invoke } = await import('@tauri-apps/api/core')
+      await invoke('run_desktop_action', { action: { type: 'open_url', target } })
+    } catch (reason) { setError(reason instanceof Error ? reason.message : String(reason)) }
+    finally { setOpening(false) }
+  }
+  return <section className="workspace-file-info" aria-label="File information">
+    <File size={32} aria-hidden="true" />
+    <h2>{name}</h2>
+    <p>Preview is not available for this file type.</p>
+    <dl><dt>File type</dt><dd>{name.includes('.') ? name.split('.').pop()!.toUpperCase() : 'File'}</dd><dt>Path</dt><dd>{path}</dd><dt>Workspace</dt><dd>{root || 'Unavailable'}</dd></dl>
+    <button type="button" disabled={!root || opening} aria-busy={opening} onClick={() => { void open() }}><ExternalLink size={15} aria-hidden="true" />{opening ? 'Opening…' : 'Open with external app'}</button>
+    {error && <p className="workspace-file-info-error" role="alert">Could not open file: {error}</p>}
+  </section>
+}

package/src/renderer/shared/components/workspace/WorkspaceMediaPreview.tsx

@@ -0,0 +1,17 @@
+import { useEffect, useRef, useState } from 'react'
+import WorkspaceFileInfo from './WorkspaceFileInfo'
+import '../../css/workspace-media-preview.css'
+
+export default function WorkspaceMediaPreview({ kind, url, path, root, mimeType }: { kind: 'audio' | 'video'; url: string; path: string; root?: string; mimeType?: string }) {
+  const player = useRef<HTMLMediaElement>(null)
+  const [failed, setFailed] = useState(false)
+  useEffect(() => {
+    const media = player.current
+    return () => { if (media) { media.pause(); media.removeAttribute('src'); media.querySelector('source')?.removeAttribute('src'); media.load() } }
+  }, [url])
+  return <section className={`workspace-media-preview is-${kind}`} aria-label={`${kind === 'audio' ? 'Audio' : 'Video'} preview`}>
+    {failed ? <><p role="alert" className="workspace-media-error">This file could not be played in Mint. Open it with an external app instead.</p><WorkspaceFileInfo path={path} root={root} /></> : kind === 'audio'
+      ? <audio ref={player as React.RefObject<HTMLAudioElement>} controls preload="metadata" aria-label={path} onError={() => setFailed(true)}><source src={url} type={mimeType} /></audio>
+      : <video ref={player as React.RefObject<HTMLVideoElement>} controls preload="metadata" playsInline aria-label={path} onError={() => setFailed(true)}><source src={url} type={mimeType} /></video>}
+  </section>
+}

package/src/renderer/shared/components/{WorkspacePaneResizer.tsx → workspace/WorkspacePaneResizer.tsx}

@@ -1,5 +1,5 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { readWorkspacePaneWidth, workspacePaneKeyWidth, workspacePaneLayout, WORKSPACE_PANE_STORAGE_KEY } from '../utils/workspacePane'
+import { readWorkspacePaneWidth, workspacePaneKeyWidth, workspacePaneLayout, WORKSPACE_PANE_STORAGE_KEY } from '../../utils/workspacePane'
 
 export default function WorkspacePaneResizer() {
   const handle = useRef<HTMLDivElement>(null)

package/src/renderer/shared/components/workspace/WorkspacePdfPreview.tsx

@@ -0,0 +1,308 @@
+import { useEffect, useRef, useState, useCallback } from 'react'
+import type { PDFDocumentProxy } from 'pdfjs-dist'
+import workerUrl from 'pdfjs-dist/legacy/build/pdf.worker.min.mjs?url'
+import { readPdfRange } from '../../utils/pdfRange'
+import WorkspaceFileInfo from './WorkspaceFileInfo'
+import '../../css/workspace-media-preview.css'
+
+function PdfPageItem({
+  pdf,
+  pageNumber,
+  width,
+  zoom,
+  onVisible,
+}: {
+  pdf: PDFDocumentProxy
+  pageNumber: number
+  width: number
+  zoom: number
+  onVisible?: (page: number) => void
+}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    let renderTask: any = null
+
+    void pdf.getPage(pageNumber).then((page) => {
+      if (cancelled || !canvasRef.current) return
+      const normal = page.getViewport({ scale: 1 })
+      const viewport = page.getViewport({ scale: (width / normal.width) * zoom })
+      const output = Math.min(
+        window.devicePixelRatio || 1,
+        2,
+        Math.sqrt(8_000_000 / (viewport.width * viewport.height))
+      )
+      const canvas = canvasRef.current
+      canvas.width = Math.ceil(viewport.width * output)
+      canvas.height = Math.ceil(viewport.height * output)
+      canvas.style.width = `${viewport.width}px`
+      canvas.style.height = `${viewport.height}px`
+
+      renderTask = page.render({
+        canvas,
+        viewport,
+        transform: output === 1 ? undefined : [output, 0, 0, output, 0, 0],
+      })
+      return renderTask.promise
+    }).catch(() => {})
+
+    return () => {
+      cancelled = true
+      renderTask?.cancel()
+    }
+  }, [pdf, pageNumber, width, zoom])
+
+  useEffect(() => {
+    if (!containerRef.current || !onVisible) return
+    const el = containerRef.current
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting && entry.intersectionRatio >= 0.4) {
+            onVisible(pageNumber)
+          }
+        }
+      },
+      { threshold: 0.4 }
+    )
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [pageNumber, onVisible])
+
+  return (
+    <div
+      ref={containerRef}
+      id={`pdf-page-${pageNumber}`}
+      className="workspace-pdf-page-container"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        marginBottom: '24px',
+        position: 'relative',
+        width: '100%',
+      }}
+    >
+      <canvas
+        ref={canvasRef}
+        style={{
+          boxShadow: '0 6px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08)',
+          borderRadius: 'var(--radius-xs, 6px)',
+          display: 'block',
+          background: '#ffffff',
+          maxWidth: '100%',
+        }}
+        aria-label={`PDF page ${pageNumber}`}
+      />
+      <span
+        style={{
+          marginTop: '8px',
+          fontSize: '11px',
+          color: 'var(--text-muted, #a1a1aa)',
+          fontWeight: 500,
+        }}
+      >
+        Slide {pageNumber} of {pdf.numPages}
+      </span>
+    </div>
+  )
+}
+
+export default function WorkspacePdfPreview({
+  url,
+  path,
+  root,
+  byteLength,
+  range,
+}: {
+  url: string
+  path: string
+  root?: string
+  byteLength?: number
+  range?: boolean
+}) {
+  const [pdf, setPdf] = useState<PDFDocumentProxy | null>(null)
+  const [pageNumber, setPageNumber] = useState(1)
+  const [zoom, setZoom] = useState(1)
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [retry, setRetry] = useState(0)
+  const [width, setWidth] = useState(500)
+  const area = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const element = area.current
+    if (!element) return
+    const observer = new ResizeObserver(() => setWidth(Math.max(100, element.clientWidth - 32)))
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+    let task: ReturnType<typeof import('pdfjs-dist').getDocument> | undefined
+    const controllers = new Set<AbortController>()
+    setPdf(null)
+    setError('')
+    setLoading(true)
+    setPageNumber(1)
+
+    void (async () => {
+      const library = await import('pdfjs-dist/legacy/build/pdf.mjs')
+      if (cancelled) return
+      library.GlobalWorkerOptions.workerSrc = workerUrl
+      const assets = import.meta.env.DEV
+        ? new URL('/pdfjs/', location.href).href
+        : new URL(['..', 'pdfjs', ''].join('/'), import.meta.url).href
+      const options = {
+        cMapUrl: `${assets}cmaps/`,
+        cMapPacked: true,
+        standardFontDataUrl: `${assets}standard_fonts/`,
+        wasmUrl: `${assets}wasm/`,
+        useSystemFonts: true,
+        isEvalSupported: false,
+        disableAutoFetch: true,
+        disableStream: true,
+      }
+      if (range && byteLength) {
+        class FileRanges extends library.PDFDataRangeTransport {
+          requestDataRange(begin: number, end: number) {
+            const controller = new AbortController()
+            controllers.add(controller)
+            void readPdfRange(url, begin, end, controller.signal)
+              .then((bytes) => {
+                if (!cancelled) this.onDataRange(begin, bytes)
+              })
+              .catch((reason) => {
+                if (!cancelled) {
+                  setError(String(reason instanceof Error ? reason.message : reason))
+                  setLoading(false)
+                  void task?.destroy()
+                }
+              })
+              .finally(() => controllers.delete(controller))
+          }
+          abort() {
+            for (const controller of controllers) controller.abort()
+            controllers.clear()
+          }
+        }
+        task = library.getDocument({
+          ...options,
+          range: new FileRanges(byteLength, new Uint8Array()),
+          rangeChunkSize: 64 * 1024,
+        })
+      } else {
+        task = library.getDocument({ ...options, url })
+      }
+      const document = await task.promise
+      if (!cancelled) {
+        setPdf(document)
+        setLoading(false)
+      }
+    })().catch((reason) => {
+      if (!cancelled) {
+        setError(reason instanceof Error ? reason.message : String(reason))
+        setLoading(false)
+      }
+    })
+
+    return () => {
+      cancelled = true
+      for (const controller of controllers) controller.abort()
+      void task?.destroy()
+    }
+  }, [url, byteLength, range, retry])
+
+  const scrollToPage = useCallback((p: number) => {
+    if (!pdf) return
+    const target = Math.max(1, Math.min(pdf.numPages, p))
+    setPageNumber(target)
+    const el = document.getElementById(`pdf-page-${target}`)
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }
+  }, [pdf])
+
+  useEffect(() => {
+    if (!pdf) return
+    const onKeyDown = (e: KeyboardEvent) => {
+      const targetTag = (e.target as HTMLElement)?.tagName
+      if (['INPUT', 'TEXTAREA'].includes(targetTag)) return
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === 'PageDown' || e.key === ' ') {
+        e.preventDefault()
+        scrollToPage(pageNumber + 1)
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'PageUp') {
+        e.preventDefault()
+        scrollToPage(pageNumber - 1)
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [pdf, pageNumber, scrollToPage])
+
+  const pageCount = pdf?.numPages || 0
+  const pages = Array.from({ length: pageCount }, (_, i) => i + 1)
+
+  return (
+    <section className="workspace-pdf-preview" aria-label="PDF preview">
+      <div className="workspace-pdf-controls" role="toolbar" aria-label="PDF controls">
+        <span style={{ fontWeight: 600, fontSize: '12px', color: 'var(--text-main)' }} aria-live="polite">
+          Slide {pageNumber} / {pdf?.numPages ?? '–'}
+        </span>
+        <div style={{ height: '14px', width: '1px', background: 'var(--border)', margin: '0 4px' }} />
+        <div style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+          <button
+            type="button"
+            aria-label="Zoom PDF out"
+            disabled={zoom <= 0.5}
+            onClick={() => setZoom((value) => Math.max(0.5, value - 0.25))}
+          >
+            −
+          </button>
+          <span style={{ fontSize: '11px', minWidth: '36px', textAlign: 'center' }}>{Math.round(zoom * 100)}%</span>
+          <button
+            type="button"
+            aria-label="Zoom PDF in"
+            disabled={zoom >= 2}
+            onClick={() => setZoom((value) => Math.min(2, value + 0.25))}
+          >
+            +
+          </button>
+        </div>
+      </div>
+
+      <div className="workspace-pdf-pages" ref={area}>
+        {loading && !error && <p role="status">Loading PDF…</p>}
+        {error ? (
+          <>
+            <p className="workspace-media-error" role="alert">
+              Could not display PDF: {error}
+            </p>
+            <button type="button" onClick={() => setRetry((value) => value + 1)}>
+              Retry PDF
+            </button>
+            <WorkspaceFileInfo path={path} root={root} />
+          </>
+        ) : (
+          pdf && (
+            <div style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center' }}>
+              {pages.map((num) => (
+                <PdfPageItem
+                  key={num}
+                  pdf={pdf}
+                  pageNumber={num}
+                  width={width}
+                  zoom={zoom}
+                  onVisible={setPageNumber}
+                />
+              ))}
+            </div>
+          )
+        )}
+      </div>
+    </section>
+  )
+}

package/src/renderer/shared/components/workspace/WorkspacePreviewActions.test.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import WorkspacePreviewActions from './WorkspacePreviewActions'
+import { ArtifactPreviewPanel, detectArtifactType } from './ArtifactPreviewPanel'
+
+function renderActions(name: string, kind: 'file' | 'directory' = 'file', pending = false) {
+  return renderToStaticMarkup(<WorkspacePreviewActions entry={{ name, path: `nested/${name}`, kind, children: [] }} pending={pending} onPreview={() => {}} onOpenHtml={() => {}} />)
+}
+
+describe('workspace preview menu', () => {
+  for (const name of ['README.md', 'notes.MARKDOWN', 'index.html', 'page.HTM', 'photo.PNG', 'cat.jpeg', 'animation.gif', 'icon.svg', 'photo.webp', 'icon.ico', 'photo.jpg']) {
+    it(`offers an in-app preview for ${name}`, () => { expect(renderActions(name)).toContain('Preview in Mint') })
+  }
+  it('offers browser launch only for HTML files', () => {
+    expect(renderActions('index.html')).toContain('Open in Browser')
+    for (const name of ['README.md', 'photo.png']) expect(renderActions(name)).not.toContain('Open in Browser')
+  })
+  it('keeps directories out of previews and provides a menu alternative to dragging any file', () => {
+    expect(renderActions('guide.md', 'directory')).toBe('')
+    expect(renderActions('script.rs')).toContain('Preview in Mint')
+    expect(renderActions('archive.zip')).toContain('Preview in Mint')
+  })
+  it('disables preview actions while another operation is pending', () => { expect(renderActions('README.md', 'file', true)).toContain('disabled=""') })
+})
+
+it('uses a served HTML URL in the Preview iframe so relative CSS and scripts can load', () => {
+  const html = renderToStaticMarkup(<ArtifactPreviewPanel artifact={{ path: 'site/index.html', content: '<h1>Hello</h1>', url: 'http://127.0.0.1:12345/site/index.html' }} onClose={() => {}} />)
+  expect(html).toContain('src="http://127.0.0.1:12345/site/index.html"')
+  expect(html).not.toContain('srcDoc=')
+  expect(html).toContain('allow-same-origin')
+})
+
+it('renders images fitted inside Preview without a binary code tab and with format chip', () => {
+  expect(detectArtifactType('assets/PHOTO.PNG')).toBe('image')
+  const html = renderToStaticMarkup(<ArtifactPreviewPanel artifact={{ path: 'assets/PHOTO.PNG', url: 'http://127.0.0.1:12345/assets/PHOTO.PNG' }} onClose={() => {}} />)
+  expect(html).toContain('src="http://127.0.0.1:12345/assets/PHOTO.PNG"')
+  expect(html).toContain('object-fit:contain')
+  expect(html).not.toMatch(/>Code<\/button>/)
+  expect(html).toContain('PNG')
+
+  const webpHtml = renderToStaticMarkup(<ArtifactPreviewPanel artifact={{ path: 'images/caster.webp', url: 'http://127.0.0.1:12345/caster.webp' }} onClose={() => {}} />)
+  expect(webpHtml).toContain('WEBP')
+})
+
+it('identifies the browser action as preview in system browser', () => {
+  const html = renderToStaticMarkup(<ArtifactPreviewPanel artifact={{ path: 'site/index.html', url: 'http://127.0.0.1:12345/site/index.html' }} onClose={() => {}} />)
+  expect(html).toContain('aria-label="Open preview"')
+})
+
+it('renders pure code files in code mode with language chip and without preview toggle or browser button', () => {
+  expect(detectArtifactType('scripts/fetch_api.py')).toBe('code')
+  const html = renderToStaticMarkup(
+    <ArtifactPreviewPanel
+      artifact={{ path: 'scripts/fetch_api.py', content: 'import json\nprint("hello")' }}
+      onClose={() => {}}
+    />,
+  )
+  expect(html).not.toMatch(/>Preview<\/button>/)
+  expect(html).not.toMatch(/>Code<\/button>/)
+  expect(html).toContain('Python')
+  expect(html).toContain('import')
+  expect(html).toContain('json')
+  expect(html).toContain('hello')
+  expect(html).not.toContain('aria-label="Open preview"')
+})
+
+it('renders dual-mode toggles for markdown, svg, and html without showing browser button for non-html', () => {
+  const mdHtml = renderToStaticMarkup(
+    <ArtifactPreviewPanel artifact={{ path: 'docs/README.md', content: '# Documentation' }} onClose={() => {}} />,
+  )
+  expect(mdHtml).toMatch(/>Preview<\/button>/)
+  expect(mdHtml).toMatch(/>Code<\/button>/)
+  expect(mdHtml).not.toContain('aria-label="Open preview"')
+
+  const svgHtml = renderToStaticMarkup(
+    <ArtifactPreviewPanel artifact={{ path: 'icons/logo.svg', content: '<svg></svg>' }} onClose={() => {}} />,
+  )
+  expect(svgHtml).toMatch(/>Preview<\/button>/)
+  expect(svgHtml).toMatch(/>Code<\/button>/)
+  expect(svgHtml).not.toContain('aria-label="Open preview"')
+
+  const webHtml = renderToStaticMarkup(
+    <ArtifactPreviewPanel artifact={{ path: 'index.html', content: '<h1>Hi</h1>' }} onClose={() => {}} />,
+  )
+  expect(webHtml).toMatch(/>Preview<\/button>/)
+  expect(webHtml).toMatch(/>Code<\/button>/)
+  expect(webHtml).toContain('aria-label="Open preview"')
+})
+
+it('makes the artifact header draggable for dragging into chat', () => {
+  const html = renderToStaticMarkup(
+    <ArtifactPreviewPanel
+      artifact={{ path: 'Harness_Presentation.pdf', content: '' }}
+      onClose={() => {}}
+    />,
+  )
+  expect(html).toContain('draggable="true"')
+  expect(html).toContain('artifact-preview-header-drag')
+})
+

package/src/renderer/shared/components/{WorkspacePreviewActions.tsx → workspace/WorkspacePreviewActions.tsx}

@@ -1,6 +1,6 @@
 import React from 'react'
-import { detectArtifactType } from './ArtifactPreviewPanel'
-import type { WorkspaceTreeEntry } from '../types'
+import { detectArtifactType } from '../../utils/artifacts'
+import type { WorkspaceTreeEntry } from '../../types'
 
 interface Props {
   entry: WorkspaceTreeEntry
@@ -11,7 +11,7 @@ interface Props {
 
 export default function WorkspacePreviewActions({ entry, pending, onPreview, onOpenHtml }: Props) {
   const type = detectArtifactType(entry.name)
-  if (entry.kind !== 'file' || type === 'code') return null
+  if (entry.kind !== 'file') return null
   return <>
     {type === 'html' && onOpenHtml && <button type="button" role="menuitem" disabled={pending} onClick={onOpenHtml}>Open in Browser</button>}
     {onPreview && <button type="button" role="menuitem" disabled={pending} onClick={onPreview}>Preview in Mint</button>}

package/src/renderer/shared/components/{WorkspaceSelector.tsx → workspace/WorkspaceSelector.tsx}

@@ -1,6 +1,8 @@
-import { useEffect, useId, useMemo, useRef, useState } from 'react'
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
+import { createPortal } from 'react-dom'
 
-import { normalizeWorkspacePath, workspacePaths } from '../utils/workspaces'
+import { normalizeWorkspacePath, workspacePaths } from '../../utils/workspaces'
+import { EMPTY_REMOVED_WORKSPACES, subscribeWorkspaceListPreferences, workspaceListPreferences } from '../../utils/workspaceListPreferences'
 import './workspace-selector.css'
 
 interface WorkspaceSelectorProps {
@@ -18,37 +20,82 @@ export default function WorkspaceSelector({ currentPath, recentPaths, onSelectWo
   const menuId = useId()
   const [open, setOpen] = useState(false)
   const [query, setQuery] = useState('')
+  const [actionsPath, setActionsPath] = useState<string | null>(null)
+  const [notice, setNotice] = useState('')
+  const removedPaths = useSyncExternalStore(subscribeWorkspaceListPreferences, workspaceListPreferences.getSnapshot, () => EMPTY_REMOVED_WORKSPACES)
   const rootRef = useRef<HTMLDivElement>(null)
   const triggerRef = useRef<HTMLButtonElement>(null)
   const searchRef = useRef<HTMLInputElement>(null)
+  const moreTriggerRef = useRef<HTMLButtonElement | null>(null)
+  const removeRef = useRef<HTMLButtonElement>(null)
+  const actionsMenuRef = useRef<HTMLDivElement>(null)
 
   const visiblePaths = useMemo(() => {
     const normalizedQuery = query.trim().toLocaleLowerCase()
-    return workspacePaths(recentPaths, currentPath).filter((path) => {
+    return workspacePaths(recentPaths, currentPath, [], removedPaths).filter((path) => {
       if (!normalizedQuery) return true
       return path.toLocaleLowerCase().includes(normalizedQuery)
         || workspaceLabel(path).toLocaleLowerCase().includes(normalizedQuery)
     })
-  }, [query, recentPaths, currentPath])
+  }, [query, recentPaths, currentPath, removedPaths])
+
+  useLayoutEffect(() => {
+    if (!open || !actionsPath) return
+    const positionDropdown = () => {
+      const trigger = moreTriggerRef.current
+      const menu = actionsMenuRef.current
+      if (!trigger || !menu) return
+      const anchor = trigger.getBoundingClientRect()
+      const bounds = menu.getBoundingClientRect()
+      const width = document.documentElement.clientWidth
+      const left = Math.max(8, Math.min(anchor.right - bounds.width, width - bounds.width - 8))
+      const top = anchor.bottom + bounds.height + 4 <= window.innerHeight
+        ? anchor.bottom + 4 : Math.max(8, anchor.top - bounds.height - 4)
+      menu.style.left = `${left}px`
+      menu.style.top = `${top}px`
+    }
+    positionDropdown()
+    removeRef.current?.focus()
+    window.addEventListener('resize', positionDropdown)
+    window.addEventListener('scroll', positionDropdown, true)
+    return () => {
+      window.removeEventListener('resize', positionDropdown)
+      window.removeEventListener('scroll', positionDropdown, true)
+    }
+  }, [open, actionsPath])
 
   useEffect(() => {
     if (!open) return
     searchRef.current?.focus()
+    const fitMenuToViewport = () => {
+      const root = rootRef.current
+      if (!root) return
+      const width = Math.min(360, document.documentElement.clientWidth - 32)
+      const rootLeft = root.getBoundingClientRect().left
+      const left = Math.max(16, Math.min(rootLeft, document.documentElement.clientWidth - width - 16))
+      root.style.setProperty('--workspace-menu-width', `${width}px`)
+      root.style.setProperty('--workspace-menu-offset', `${left - rootLeft}px`)
+    }
+    fitMenuToViewport()
 
     const closeOnOutsidePointer = (event: MouseEvent) => {
+      if (actionsMenuRef.current?.contains(event.target as Node)) return
+      if (!moreTriggerRef.current?.contains(event.target as Node)) setActionsPath(null)
       if (!rootRef.current?.contains(event.target as Node)) setOpen(false)
     }
     const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key !== 'Escape') return
+      if (event.key !== 'Escape' || event.defaultPrevented) return
       event.preventDefault()
       setOpen(false)
       triggerRef.current?.focus()
     }
     document.addEventListener('mousedown', closeOnOutsidePointer)
     window.addEventListener('keydown', closeOnEscape)
+    window.addEventListener('resize', fitMenuToViewport)
     return () => {
       document.removeEventListener('mousedown', closeOnOutsidePointer)
       window.removeEventListener('keydown', closeOnEscape)
+      window.removeEventListener('resize', fitMenuToViewport)
     }
   }, [open])
 
@@ -67,6 +114,8 @@ export default function WorkspaceSelector({ currentPath, recentPaths, onSelectWo
         className={`workspace-select-btn ${currentPath ? 'has-workspace' : 'needs-workspace'}`}
         onClick={() => {
           setQuery('')
+          setActionsPath(null)
+          setNotice('')
           setOpen((current) => !current)
         }}
         aria-label={`${currentPath ? 'Change' : 'Choose'} workspace: ${currentPath ? workspaceLabel(currentPath) : 'Select Project'}`}
@@ -99,7 +148,7 @@ export default function WorkspaceSelector({ currentPath, recentPaths, onSelectWo
               ref={searchRef}
               type="search"
               value={query}
-              onChange={(event) => setQuery(event.target.value)}
+              onChange={(event) => { setQuery(event.target.value); setActionsPath(null) }}
               placeholder="Search workspaces"
               aria-label="Search workspaces"
             />
@@ -109,8 +158,8 @@ export default function WorkspaceSelector({ currentPath, recentPaths, onSelectWo
             {visiblePaths.length > 0 ? visiblePaths.map((path) => {
               const isCurrent = path === normalizeWorkspacePath(currentPath)
               return (
+                <div className="workspace-select-row" key={path}>
                 <button
-                  key={path}
                   type="button"
                   className="workspace-select-option"
                   onClick={() => chooseWorkspace(path)}
@@ -130,6 +179,27 @@ export default function WorkspaceSelector({ currentPath, recentPaths, onSelectWo
                     </svg>
                   )}
                 </button>
+                <button
+                  type="button"
+                  className="workspace-select-more"
+                  aria-label={`Workspace actions: ${workspaceLabel(path)}`}
+                  title="Workspace actions"
+                  aria-haspopup="menu"
+                  aria-expanded={actionsPath === path}
+                  onClick={(event) => {
+                    moreTriggerRef.current = event.currentTarget
+                    setActionsPath(current => current === path ? null : path)
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.key === 'ArrowDown') { event.preventDefault(); moreTriggerRef.current = event.currentTarget; setActionsPath(path) }
+                  }}
+                >
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    <circle cx="5" cy="12" r="1.8" /><circle cx="12" cy="12" r="1.8" /><circle cx="19" cy="12" r="1.8" />
+                  </svg>
+                </button>
+
+                </div>
               )
             }) : (
               <div className="workspace-select-empty">
@@ -138,6 +208,8 @@ export default function WorkspaceSelector({ currentPath, recentPaths, onSelectWo
             )}
           </div>
 
+          {notice && <p className="workspace-select-notice" role="status">{notice}</p>}
+
           <div className="workspace-select-menu-footer">
             <button type="button" className="workspace-select-open-folder" onClick={() => chooseWorkspace()}>
               <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
@@ -149,6 +221,26 @@ export default function WorkspaceSelector({ currentPath, recentPaths, onSelectWo
           </div>
         </div>
       )}
+      {open && actionsPath && visiblePaths.includes(actionsPath) && createPortal(
+        <div ref={actionsMenuRef} className="workspace-select-row-menu" role="menu" aria-label={`Workspace actions: ${workspaceLabel(actionsPath)}`}
+          onKeyDown={(event) => {
+            if (event.key === 'Escape') {
+              event.preventDefault(); event.stopPropagation(); setActionsPath(null); moreTriggerRef.current?.focus()
+            }
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') event.preventDefault()
+          }}>
+          <button ref={removeRef} type="button" role="menuitem" className="workspace-select-remove"
+            onClick={() => {
+              workspaceListPreferences.remove(actionsPath)
+              setActionsPath(null)
+              setNotice('Removed from list. Use Open folder… to add it again.')
+              searchRef.current?.focus()
+            }}>
+            <span>Remove from list</span>
+            <small>Does not delete files or folders.</small>
+          </button>
+        </div>, document.body,
+      )}
     </div>
   )
 }