@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/shared/components/WorkspaceContextPopover.tsx

@@ -0,0 +1,138 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { FileCode2, FolderOpen, GitBranch, RefreshCw, Terminal } from 'lucide-react'
+import { workspacePlatform } from '../platform'
+import type { AgentProgress, FileChange, GitBranchInfo } from '../types'
+import { useSessionSources } from '../utils/useSessionSources'
+import SessionSources from './SessionSources'
+
+interface WorkspaceContextPopoverProps {
+  workspacePath: string
+  terminalCount: number
+  chatId: string
+  liveProgress: AgentProgress[]
+  recentChanges: FileChange[]
+  onOpenWorkspace: () => void
+  onOpenReview: (changes: FileChange[]) => void
+  onRefreshWorkspace: () => void
+}
+
+function workspaceLabel(path: string) {
+  const segments = path.replace(/\\/g, '/').split('/').filter(Boolean)
+  return segments.at(-1) || 'No workspace'
+}
+
+export default function WorkspaceContextPopover({
+  workspacePath,
+  terminalCount,
+  chatId,
+  liveProgress,
+  recentChanges,
+  onOpenWorkspace,
+  onOpenReview,
+  onRefreshWorkspace,
+}: WorkspaceContextPopoverProps) {
+  const [open, setOpen] = useState(false)
+  const [gitInfo, setGitInfo] = useState<GitBranchInfo | null>(null)
+  const [isRefreshing, setIsRefreshing] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const { sources, loading: sourceLoading, error: sourceError, retry: retrySources } = useSessionSources(chatId, liveProgress, open)
+
+  const refresh = useCallback(async () => {
+    if (!workspacePath.trim()) {
+      setGitInfo(null)
+      return
+    }
+    setIsRefreshing(true)
+    try {
+      setGitInfo(await workspacePlatform.getGitBranchInfo(workspacePath))
+    } catch {
+      setGitInfo(null)
+    } finally {
+      setIsRefreshing(false)
+    }
+  }, [workspacePath])
+
+  useEffect(() => {
+    if (open) void refresh()
+  }, [open, refresh])
+
+  useEffect(() => {
+    const closeOnOutsidePointer = (event: MouseEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) setOpen(false)
+    }
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('mousedown', closeOnOutsidePointer)
+    window.addEventListener('keydown', closeOnEscape)
+    return () => {
+      document.removeEventListener('mousedown', closeOnOutsidePointer)
+      window.removeEventListener('keydown', closeOnEscape)
+    }
+  }, [])
+
+  const handleRefresh = async () => {
+    onRefreshWorkspace()
+    await refresh()
+  }
+
+  const additions = recentChanges.reduce((total, change) => total + Math.max(0, change.additions || 0), 0)
+  const deletions = recentChanges.reduce((total, change) => total + Math.max(0, change.deletions || 0), 0)
+  const hasReview = recentChanges.length > 0
+
+  return (
+    <div className="workspace-context" ref={rootRef}>
+      <button
+        type="button"
+        className={`workspace-context-trigger${open ? ' is-open' : ''}`}
+        aria-label="Open workspace context"
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        title="Workspace context"
+        onClick={() => setOpen((current) => !current)}
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6.5h6l1.7 2H20v9.5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/><path d="M4 6.5v-1a2 2 0 0 1 2-2h4l1.7 2H18a2 2 0 0 1 2 2v1"/></svg>
+      </button>
+      {open && (
+        <section className="workspace-context-popover" role="dialog" aria-label="Workspace context">
+          <header className="workspace-context-heading">
+            <span className="workspace-context-heading-title"><FolderOpen size={16} aria-hidden="true" /> Workspace context</span>
+            <button type="button" onClick={handleRefresh} disabled={isRefreshing} title="Refresh workspace status" aria-label="Refresh workspace status">
+              <RefreshCw className={isRefreshing ? 'is-refreshing' : ''} size={15} aria-hidden="true" />
+            </button>
+          </header>
+
+          <button type="button" className="workspace-context-row" onClick={() => { onOpenWorkspace(); setOpen(false) }}>
+            <span className="workspace-context-icon"><FolderOpen size={16} aria-hidden="true" /></span>
+            <span className="workspace-context-copy"><strong>{workspaceLabel(workspacePath)}</strong><small title={workspacePath}>{workspacePath || 'Choose a project folder'}</small></span>
+            <span className="workspace-context-action">Open</span>
+          </button>
+
+          <div className="workspace-context-row is-static">
+            <span className="workspace-context-icon"><GitBranch size={16} aria-hidden="true" /></span>
+            <span className="workspace-context-copy"><strong>{gitInfo?.isRepository ? (gitInfo.currentBranch || gitInfo.detachedHead || 'Detached HEAD') : 'No Git repository'}</strong><small>{gitInfo?.isRepository ? (gitInfo.isDirty ? 'Working tree has changes' : 'Working tree is clean') : 'Git status is unavailable'}</small></span>
+            {gitInfo?.isRepository && <span className={`workspace-context-status${gitInfo.isDirty ? ' is-dirty' : ''}`}>{gitInfo.isDirty ? 'Changed' : 'Clean'}</span>}
+          </div>
+
+          <button type="button" className="workspace-context-row" disabled={!hasReview} onClick={() => { onOpenReview(recentChanges); setOpen(false) }}>
+            <span className="workspace-context-icon"><FileCode2 size={16} aria-hidden="true" /></span>
+            <span className="workspace-context-copy"><strong>Recent agent changes</strong><small>{hasReview ? `${recentChanges.length} file${recentChanges.length === 1 ? '' : 's'} changed in this run` : 'No changes in the current run'}</small></span>
+            {hasReview && <span className="workspace-context-diff"><b>+{additions}</b><i>-{deletions}</i></span>}
+          </button>
+
+          <div className="workspace-context-row is-static">
+            <span className="workspace-context-icon"><Terminal size={16} aria-hidden="true" /></span>
+            <span className="workspace-context-copy"><strong>Terminal</strong><small>{terminalCount === 0 ? 'No terminal tabs open' : `${terminalCount} tab${terminalCount === 1 ? '' : 's'} open`}</small></span>
+            <span className="workspace-context-status">{terminalCount}</span>
+          </div>
+
+          <SessionSources key={chatId} sources={sources} loading={sourceLoading} error={sourceError} onRetry={retrySources} onOpenLibrary={url => {
+            window.history.pushState({}, '', url)
+            window.dispatchEvent(new PopStateEvent('popstate'))
+            setOpen(false)
+          }} />
+        </section>
+      )}
+    </div>
+  )
+}

package/src/renderer/shared/components/WorkspacePaneResizer.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { readWorkspacePaneWidth, workspacePaneKeyWidth, workspacePaneLayout, WORKSPACE_PANE_STORAGE_KEY } from '../utils/workspacePane'
+
+export default function WorkspacePaneResizer() {
+  const handle = useRef<HTMLDivElement>(null)
+  const [preferred, setPreferred] = useState(() => readWorkspacePaneWidth(() => localStorage.getItem(WORKSPACE_PANE_STORAGE_KEY)))
+  const preferredRef = useRef(preferred)
+  const [available, setAvailable] = useState(1500)
+  const [dragging, setDragging] = useState(false)
+  const drag = useRef<{ x: number; width: number; preferred: number; pointer: number; element: HTMLDivElement; cursor: string; select: string } | null>(null)
+  const layout = workspacePaneLayout(preferred, available)
+
+  const change = (width: number, persist = false) => {
+    preferredRef.current = width
+    setPreferred(width)
+    if (persist) {
+      try { localStorage.setItem(WORKSPACE_PANE_STORAGE_KEY, String(width)) } catch { /* Storage may be disabled. */ }
+    }
+  }
+  const finish = (cancel = false, unmount = false) => {
+    const current = drag.current
+    if (!current) return
+    drag.current = null
+    document.body.style.cursor = current.cursor
+    document.body.style.userSelect = current.select
+    if (current.element.hasPointerCapture(current.pointer)) current.element.releasePointerCapture(current.pointer)
+    if (!unmount) {
+      setDragging(false)
+      change(cancel ? current.preferred : preferredRef.current, !cancel)
+    }
+  }
+
+  useLayoutEffect(() => {
+    const main = handle.current?.closest<HTMLElement>('.assistant-workspace')
+    if (!main) return
+    const measure = () => setAvailable(main.getBoundingClientRect().width)
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(main)
+    return () => {
+      observer.disconnect()
+      main.style.removeProperty('--workspace-panel-width')
+      delete main.dataset.workspaceStacked
+      main.classList.remove('is-workspace-resizing')
+    }
+  }, [])
+
+  useLayoutEffect(() => {
+    const main = handle.current?.closest<HTMLElement>('.assistant-workspace')
+    if (!main) return
+    main.style.setProperty('--workspace-panel-width', `${layout.width}px`)
+    main.dataset.workspaceStacked = String(layout.stacked)
+    main.classList.toggle('is-workspace-resizing', dragging)
+    if (layout.stacked) finish(true)
+  }, [layout.width, layout.stacked, dragging])
+
+  useEffect(() => {
+    const blur = () => finish(true)
+    window.addEventListener('blur', blur)
+    return () => { window.removeEventListener('blur', blur); finish(true, true) }
+  }, [])
+
+  return <div ref={handle} className="workspace-pane-resizer" role="separator" aria-label="Resize Workspace"
+    aria-orientation="vertical" aria-valuemin={layout.min} aria-valuemax={layout.max} aria-valuenow={layout.width}
+    aria-controls="workspace-file-panel" tabIndex={layout.stacked ? -1 : 0} hidden={layout.stacked}
+    title="Drag to resize Workspace. Double-click or press Enter to reset."
+    onPointerDown={event => {
+      if (event.button !== 0 || drag.current || layout.stacked) return
+      event.preventDefault()
+      event.currentTarget.focus()
+      event.currentTarget.setPointerCapture(event.pointerId)
+      drag.current = { x: event.clientX, width: layout.width, preferred: preferredRef.current, pointer: event.pointerId,
+        element: event.currentTarget, cursor: document.body.style.cursor, select: document.body.style.userSelect }
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+      setDragging(true)
+    }}
+    onPointerMove={event => {
+      const current = drag.current
+      if (current?.pointer === event.pointerId) change(workspacePaneLayout(current.width + event.clientX - current.x, available).width)
+    }}
+    onPointerUp={event => { if (drag.current?.pointer === event.pointerId) finish() }}
+    onPointerCancel={event => { if (drag.current?.pointer === event.pointerId) finish(true) }}
+    onLostPointerCapture={() => finish(true)}
+    onDoubleClick={() => change(workspacePaneLayout(400, available).width, true)}
+    onKeyDown={event => {
+      if (event.key === 'Escape' && drag.current) { event.preventDefault(); finish(true); return }
+      if (drag.current) return
+      const width = workspacePaneKeyWidth(event.key, layout)
+      if (width !== null) { event.preventDefault(); change(width, true) }
+    }} />
+}

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

@@ -0,0 +1,44 @@
+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('does not offer previews for directories or unsupported files', () => {
+    expect(renderActions('guide.md', 'directory')).toBe('')
+    expect(renderActions('script.rs')).toBe('')
+  })
+  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', () => {
+  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>/)
+})
+
+it('identifies the browser action as Mint Browser instead of a generic popup', () => {
+  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 in Mint Browser (Mint Auto)"')
+})

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

@@ -0,0 +1,19 @@
+import React from 'react'
+import { detectArtifactType } from './ArtifactPreviewPanel'
+import type { WorkspaceTreeEntry } from '../types'
+
+interface Props {
+  entry: WorkspaceTreeEntry
+  pending: boolean
+  onPreview?: () => void
+  onOpenHtml?: () => void
+}
+
+export default function WorkspacePreviewActions({ entry, pending, onPreview, onOpenHtml }: Props) {
+  const type = detectArtifactType(entry.name)
+  if (entry.kind !== 'file' || type === 'code') 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

@@ -0,0 +1,154 @@
+import { useEffect, useId, useMemo, useRef, useState } from 'react'
+
+import { normalizeWorkspacePath, workspacePaths } from '../utils/workspaces'
+import './workspace-selector.css'
+
+interface WorkspaceSelectorProps {
+  placement?: 'above' | 'below'
+  currentPath: string
+  recentPaths: string[]
+  onSelectWorkspace: (path?: string) => void
+}
+
+function workspaceLabel(path: string): string {
+  return path.split(/[\\/]/).filter(Boolean).pop() || path
+}
+
+export default function WorkspaceSelector({ currentPath, recentPaths, onSelectWorkspace, placement = 'above' }: WorkspaceSelectorProps) {
+  const menuId = useId()
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const rootRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const searchRef = useRef<HTMLInputElement>(null)
+
+  const visiblePaths = useMemo(() => {
+    const normalizedQuery = query.trim().toLocaleLowerCase()
+    return workspacePaths(recentPaths, currentPath).filter((path) => {
+      if (!normalizedQuery) return true
+      return path.toLocaleLowerCase().includes(normalizedQuery)
+        || workspaceLabel(path).toLocaleLowerCase().includes(normalizedQuery)
+    })
+  }, [query, recentPaths, currentPath])
+
+  useEffect(() => {
+    if (!open) return
+    searchRef.current?.focus()
+
+    const closeOnOutsidePointer = (event: MouseEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) setOpen(false)
+    }
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return
+      event.preventDefault()
+      setOpen(false)
+      triggerRef.current?.focus()
+    }
+    document.addEventListener('mousedown', closeOnOutsidePointer)
+    window.addEventListener('keydown', closeOnEscape)
+    return () => {
+      document.removeEventListener('mousedown', closeOnOutsidePointer)
+      window.removeEventListener('keydown', closeOnEscape)
+    }
+  }, [open])
+
+  const chooseWorkspace = (path?: string) => {
+    setOpen(false)
+    setQuery('')
+    triggerRef.current?.focus()
+    onSelectWorkspace(path)
+  }
+
+  return (
+    <div className={`workspace-selector ${currentPath ? 'has-workspace' : 'needs-workspace'} opens-${placement}`} ref={rootRef}>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={`workspace-select-btn ${currentPath ? 'has-workspace' : 'needs-workspace'}`}
+        onClick={() => {
+          setQuery('')
+          setOpen((current) => !current)
+        }}
+        aria-label={`${currentPath ? 'Change' : 'Choose'} workspace: ${currentPath ? workspaceLabel(currentPath) : 'Select Project'}`}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-controls={menuId}
+        title={currentPath || 'Choose a workspace folder'}
+      >
+        <span className="workspace-select-icon" aria-hidden="true">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M3 6h7l2 2h9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />
+          </svg>
+        </span>
+        <span className="workspace-select-copy">
+          <span className="workspace-select-name">{currentPath ? workspaceLabel(currentPath) : 'Select Project'}</span>
+        </span>
+        <svg className="workspace-select-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="workspace-select-menu" id={menuId} role="dialog" aria-label="Choose workspace">
+          <label className="workspace-select-search">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+              <circle cx="11" cy="11" r="7" />
+              <path d="m20 20-4-4" />
+            </svg>
+            <input
+              ref={searchRef}
+              type="search"
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Search workspaces"
+              aria-label="Search workspaces"
+            />
+          </label>
+
+          <div className="workspace-select-list" role="group" aria-label="Recent workspaces">
+            {visiblePaths.length > 0 ? visiblePaths.map((path) => {
+              const isCurrent = path === normalizeWorkspacePath(currentPath)
+              return (
+                <button
+                  key={path}
+                  type="button"
+                  className="workspace-select-option"
+                  onClick={() => chooseWorkspace(path)}
+                  aria-current={isCurrent ? 'true' : undefined}
+                  title={path}
+                >
+                  <svg className="workspace-select-option-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <path d="M3 6h7l2 2h9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />
+                  </svg>
+                  <span className="workspace-select-option-copy">
+                    <span className="workspace-select-option-name">{workspaceLabel(path)}</span>
+                    <span className="workspace-select-option-path">{path}</span>
+                  </span>
+                  {isCurrent && (
+                    <svg className="workspace-select-current" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                      <path d="m5 12 4 4L19 6" />
+                    </svg>
+                  )}
+                </button>
+              )
+            }) : (
+              <div className="workspace-select-empty">
+                {query.trim() ? 'No matching workspaces' : 'No recent workspaces yet'}
+              </div>
+            )}
+          </div>
+
+          <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">
+                <path d="M3 6h7l2 2h9v12H3z" />
+                <path d="M12 10v6m-3-3h6" />
+              </svg>
+              <span>Open folder…</span>
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}