@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/shared/components/ScreenCaptureDialog.css

@@ -0,0 +1,221 @@
+.screen-capture-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: color-mix(in srgb, #000 70%, transparent);
+  color: var(--text-main);
+}
+
+.screen-capture-dialog.is-capturing { visibility: hidden; }
+
+.screen-capture-panel {
+  display: flex;
+  flex-direction: column;
+  width: min(1100px, 100%);
+  max-height: min(900px, calc(100dvh - 48px));
+  overflow: hidden;
+  background: var(--panel-raised);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-2xl);
+  box-shadow: var(--shadow-md);
+}
+
+.screen-capture-header,
+.screen-capture-footer {
+  padding: 18px 24px;
+}
+
+.screen-capture-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.screen-capture-header h2 {
+  margin: 3px 0 4px;
+  font-size: 1.3rem;
+  line-height: 1.3;
+}
+
+.screen-capture-header p,
+.screen-capture-instruction,
+.screen-capture-empty p {
+  margin: 0;
+  color: var(--text-soft);
+  font-size: 0.83rem;
+}
+
+.screen-capture-header .screen-capture-eyebrow {
+  color: var(--interactive-fg);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.screen-capture-close {
+  border: 0;
+  background: transparent;
+  color: var(--text-soft);
+  font-size: 1.6rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.screen-capture-body {
+  display: grid;
+  min-height: 200px;
+  flex: 1;
+  overflow: hidden;
+  background: var(--surface-strong);
+}
+
+.screen-capture-stage {
+  display: grid;
+  place-items: center;
+  min-height: 0;
+  padding: 20px;
+  overflow: auto;
+}
+
+.screen-capture-image-wrap {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  max-height: 100%;
+  line-height: 0;
+  box-shadow: var(--shadow-md);
+  touch-action: none;
+}
+
+.screen-capture-image-wrap.is-selecting { cursor: crosshair; }
+
+.screen-capture-image-wrap img {
+  display: block;
+  max-width: 100%;
+  max-height: calc(100dvh - 290px);
+  width: auto;
+  height: auto;
+  user-select: none;
+}
+
+.screen-capture-selection {
+  position: absolute;
+  border: 2px solid var(--accent);
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  box-shadow: 0 0 0 9999px color-mix(in srgb, #000 35%, transparent);
+  pointer-events: none;
+}
+
+.screen-capture-empty {
+  align-self: center;
+  justify-self: center;
+  padding: 42px 24px;
+  text-align: center;
+}
+
+.screen-capture-empty-icon {
+  display: block;
+  margin-bottom: 10px;
+  color: var(--interactive-fg);
+  font-size: 2rem;
+}
+
+.screen-capture-empty h3 { margin: 0 0 6px; font-size: 1.1rem; }
+.screen-capture-empty .screen-capture-primary { margin-top: 22px; }
+
+.screen-capture-footer {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+  border-top: 1px solid var(--border);
+}
+
+.screen-capture-modes {
+  display: flex;
+  gap: 3px;
+  padding: 3px;
+  border-radius: var(--radius-lg);
+  background: var(--surface-strong);
+}
+
+.screen-capture-modes button,
+.screen-capture-secondary,
+.screen-capture-primary {
+  min-height: 36px;
+  padding: 7px 12px;
+  border-radius: var(--radius-lg);
+  font: inherit;
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.screen-capture-modes button {
+  border: 0;
+  background: transparent;
+  color: var(--text-soft);
+}
+
+.screen-capture-modes button.active {
+  background: var(--panel-raised);
+  color: var(--text-main);
+  box-shadow: var(--shadow-sm);
+}
+
+.screen-capture-instruction { flex: 1 1 180px; }
+.screen-capture-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
+
+.screen-capture-secondary {
+  border: 1px solid var(--border);
+  background: var(--surface-strong);
+  color: var(--text-main);
+}
+
+.screen-capture-primary {
+  border: 1px solid var(--accent);
+  background: var(--accent);
+  color: var(--accent-contrast, var(--text-on-accent));
+}
+
+:root[data-accent-mode="monochrome"] .screen-capture-primary:not(:disabled) {
+  color: var(--zinc-950);
+}
+
+.screen-capture-primary:disabled {
+  border-color: var(--border-strong);
+  background: var(--surface-strong);
+  color: var(--text-soft);
+  cursor: not-allowed;
+}
+
+.screen-capture-secondary:disabled { opacity: 0.45; cursor: not-allowed; }
+
+.screen-capture-dialog button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.screen-capture-error {
+  margin: 0;
+  padding: 10px 24px;
+  color: var(--danger);
+  font-size: 0.82rem;
+  border-top: 1px solid var(--border);
+}
+
+@media (max-width: 680px) {
+  .screen-capture-dialog { padding: 0; }
+  .screen-capture-panel { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
+  .screen-capture-header, .screen-capture-footer { padding: 14px 16px; }
+  .screen-capture-stage { padding: 10px; }
+  .screen-capture-image-wrap img { max-height: calc(100dvh - 330px); }
+  .screen-capture-actions { width: 100%; margin-left: 0; }
+  .screen-capture-actions button { flex: 1 1 calc(50% - 8px); }
+}

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

@@ -0,0 +1,199 @@
+import { useEffect, useRef, useState, type PointerEvent } from 'react'
+import './ScreenCaptureDialog.css'
+
+type Selection = { x: number; y: number; width: number; height: number }
+type Point = { x: number; y: number }
+
+interface Props {
+  onClose: () => void
+  onAttach: (image: string) => void
+  capture: () => Promise<string>
+  onLiveTranslate?: () => void
+}
+
+function pointInImage(event: PointerEvent, element: HTMLElement): Point {
+  const bounds = element.getBoundingClientRect()
+  return {
+    x: Math.max(0, Math.min(1, (event.clientX - bounds.left) / bounds.width)),
+    y: Math.max(0, Math.min(1, (event.clientY - bounds.top) / bounds.height)),
+  }
+}
+
+function selectionFromPoints(start: Point, end: Point): Selection {
+  return {
+    x: Math.min(start.x, end.x),
+    y: Math.min(start.y, end.y),
+    width: Math.abs(end.x - start.x),
+    height: Math.abs(end.y - start.y),
+  }
+}
+
+export default function ScreenCaptureDialog({ onClose, onAttach, capture, onLiveTranslate }: Props) {
+  const [image, setImage] = useState('')
+  const [imageReady, setImageReady] = useState(false)
+  const [selection, setSelection] = useState<Selection | null>(null)
+  const [error, setError] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [mode, setMode] = useState<'region' | 'full'>('region')
+  const [attaching, setAttaching] = useState(false)
+  const dragStart = useRef<Point | null>(null)
+  const imageRef = useRef<HTMLImageElement>(null)
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const closeRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null
+    closeRef.current?.focus()
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose()
+      if (event.key !== 'Tab') return
+      const buttons = Array.from(dialogRef.current?.querySelectorAll<HTMLButtonElement>('button:not(:disabled)') ?? [])
+      if (!buttons.length) return
+      const first = buttons[0]
+      const last = buttons[buttons.length - 1]
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault()
+        last.focus()
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault()
+        first.focus()
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+      previousFocus?.focus()
+    }
+  }, [onClose])
+
+  const takeCapture = async () => {
+    if (busy) return
+    setBusy(true)
+    setError('')
+    setSelection(null)
+    setImage('')
+    setImageReady(false)
+    try {
+      const result = await capture()
+      if (!result.startsWith('data:image/')) throw new Error('The screen capture returned no image.')
+      setImage(result)
+    } catch (reason) {
+      const message = reason instanceof Error ? reason.message : String(reason)
+      setError(message || 'Screen capture failed. Please try again.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const startSelection = (event: PointerEvent<HTMLDivElement>) => {
+    if (mode !== 'region' || !image) return
+    const start = pointInImage(event, event.currentTarget)
+    dragStart.current = start
+    setSelection(null)
+    event.currentTarget.setPointerCapture(event.pointerId)
+  }
+
+  const moveSelection = (event: PointerEvent<HTMLDivElement>) => {
+    if (!dragStart.current) return
+    setSelection(selectionFromPoints(dragStart.current, pointInImage(event, event.currentTarget)))
+  }
+
+  const finishSelection = (event: PointerEvent<HTMLDivElement>) => {
+    if (!dragStart.current) return
+    const next = selectionFromPoints(dragStart.current, pointInImage(event, event.currentTarget))
+    dragStart.current = null
+    setSelection(next.width > 0.003 && next.height > 0.003 ? next : null)
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId)
+  }
+
+  const attach = () => {
+    if (!image || !imageReady || attaching || (mode === 'region' && !selection)) return
+    setAttaching(true)
+    try {
+      if (mode === 'full') {
+        onAttach(image)
+        return
+      }
+      const source = imageRef.current
+      if (!source || !source.naturalWidth || !source.naturalHeight || !selection) {
+        throw new Error('The screenshot is still loading. Please try again.')
+      }
+      const canvas = document.createElement('canvas')
+      const x = Math.floor(selection.x * source.naturalWidth)
+      const y = Math.floor(selection.y * source.naturalHeight)
+      canvas.width = Math.max(1, Math.min(source.naturalWidth - x, Math.ceil(selection.width * source.naturalWidth)))
+      canvas.height = Math.max(1, Math.min(source.naturalHeight - y, Math.ceil(selection.height * source.naturalHeight)))
+      const context = canvas.getContext('2d')
+      if (!context) throw new Error('Unable to prepare the selected image.')
+      context.drawImage(source, x, y, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height)
+      onAttach(canvas.toDataURL('image/png'))
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason))
+      setAttaching(false)
+    }
+  }
+
+  return (
+    <div ref={dialogRef} className={`screen-capture-dialog ${busy ? 'is-capturing' : ''}`} role="dialog" aria-modal="true" aria-labelledby="screen-capture-title">
+      <div className="screen-capture-panel">
+        <header className="screen-capture-header">
+          <div>
+            <p className="screen-capture-eyebrow">Mint Agent · Screen capture</p>
+            <h2 id="screen-capture-title">Choose what Mint can see</h2>
+            <p>Only the image you attach will be included in your message.</p>
+          </div>
+          <button ref={closeRef} type="button" className="screen-capture-close" onClick={onClose} aria-label="Close screen capture">×</button>
+        </header>
+
+        <div className="screen-capture-body">
+          {image ? (
+            <div className="screen-capture-stage">
+              <div
+                className={`screen-capture-image-wrap ${mode === 'region' ? 'is-selecting' : ''}`}
+                onPointerDown={startSelection}
+                onPointerMove={moveSelection}
+                onPointerUp={finishSelection}
+                onPointerCancel={finishSelection}
+              >
+                <img
+                  ref={imageRef}
+                  src={image}
+                  alt="Captured screen preview"
+                  draggable={false}
+                  onLoad={() => setImageReady(true)}
+                  onError={() => { setImage(''); setError('Unable to display the screenshot. Please capture it again.') }}
+                />
+                {mode === 'region' && selection && (
+                  <div className="screen-capture-selection" style={{ left: `${selection.x * 100}%`, top: `${selection.y * 100}%`, width: `${selection.width * 100}%`, height: `${selection.height * 100}%` }} />
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="screen-capture-empty">
+              <span className="screen-capture-empty-icon" aria-hidden="true">▣</span>
+              <h3>{busy ? 'Waiting for your screen…' : 'Capture your screen'}</h3>
+              <p>{busy ? 'Choose the screen or window in your system prompt.' : 'You can review and crop it before attaching it to the chat.'}</p>
+              {!busy && <button type="button" className="screen-capture-primary" onClick={takeCapture}>Capture screen</button>}
+            </div>
+          )}
+        </div>
+
+        {error && <p className="screen-capture-error" role="alert">{error}</p>}
+
+        <footer className="screen-capture-footer">
+          <div className="screen-capture-modes" role="group" aria-label="Capture area">
+            <button type="button" className={mode === 'region' ? 'active' : ''} onClick={() => setMode('region')} aria-pressed={mode === 'region'}>Select area</button>
+            <button type="button" className={mode === 'full' ? 'active' : ''} onClick={() => setMode('full')} aria-pressed={mode === 'full'}>Full screen</button>
+          </div>
+          <p className="screen-capture-instruction">{mode === 'region' ? 'Drag across the preview to select an area.' : 'The entire captured image will be attached.'}</p>
+          <div className="screen-capture-actions">
+            {onLiveTranslate && <button type="button" className="screen-capture-secondary" onClick={onLiveTranslate}>Live translate</button>}
+            {image && <button type="button" className="screen-capture-secondary" onClick={takeCapture} disabled={busy || attaching}>Retake</button>}
+            <button type="button" className="screen-capture-secondary" onClick={onClose}>Cancel</button>
+            <button type="button" className="screen-capture-primary" onClick={attach} disabled={!image || !imageReady || busy || attaching || (mode === 'region' && !selection)}>Attach to chat</button>
+          </div>
+        </footer>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,27 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+
+import SelectField from './SelectField'
+
+describe('Mint dropdown field', () => {
+  it('preserves a controlled numeric checkpoint and its accessible label', async () => {
+    const html = renderToStaticMarkup(<SelectField value={2} id="checkpoint" aria-label="Target checkpoint" disabled>
+      <option value={1}>Step 1</option><option value={2}>Step 2</option>
+    </SelectField>)
+    expect(html).toContain('Step 2')
+    expect(html).toContain('role="combobox"')
+    expect(html).toContain('id="checkpoint"')
+    expect(html).toContain('aria-label="Target checkpoint"')
+    expect(html).toContain('disabled=""')
+  })
+  it('preserves conditional and mapped labels, including a custom model entry', async () => {
+    const html = renderToStaticMarkup(<SelectField value="custom">
+      {['a','b'].map(v=><option key={v} value={v}>{v}</option>)}
+      {false && <option value="hidden">Hidden</option>}
+      <option value="custom">Custom model ID…</option>
+    </SelectField>)
+    expect(html).toContain('Custom model ID…')
+    expect(html).not.toContain('Hidden')
+  })
+})

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

@@ -0,0 +1,38 @@
+import { Children, Fragment, isValidElement, type CSSProperties, type ReactNode } from 'react'
+import GlideSelect, { type GlideOption } from './GlideSelect'
+
+interface SelectFieldProps {
+  children: ReactNode
+  value?: string | number
+  defaultValue?: string | number
+  onValueChange?: (value: string) => void
+  disabled?: boolean
+  id?: string
+  'aria-label'?: string
+  'aria-labelledby'?: string
+  className?: string
+  title?: string
+  style?: CSSProperties
+  fullWidth?: boolean
+}
+
+function optionsFromChildren(children: ReactNode): GlideOption[] {
+  return Children.toArray(children).flatMap(child => {
+    if (!isValidElement<{ value?: string | number; children?: ReactNode }>(child)) return []
+    if (child.type === Fragment) return optionsFromChildren(child.props.children)
+    if (child.type !== 'option') return []
+    const label = Children.toArray(child.props.children).join('')
+    return [{ value: String(child.props.value ?? label), label }]
+  })
+}
+
+/** Shared field adapter keeps Mint's dynamic option lists and value callbacks intact. */
+export default function SelectField({ children, value, defaultValue, onValueChange, disabled,
+  id, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, className, title, style, fullWidth = true }: SelectFieldProps) {
+  return <GlideSelect options={optionsFromChildren(children)}
+    value={value === undefined ? undefined : String(value)}
+    defaultValue={defaultValue === undefined ? undefined : String(defaultValue)}
+    onChange={onValueChange} disabled={disabled} id={id} ariaLabel={ariaLabel ?? title ?? 'Select'} labelledBy={labelledBy}
+    className={className ? `mint-select-field ${className}` : 'mint-select-field'} title={title}
+    style={style} fullWidth={fullWidth} />
+}

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

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import { File, FileText, Globe, Image, Paperclip, Video } from 'lucide-react'
+import type { SessionSource } from '../utils/sessionSources'
+import '../css/session-sources.css'
+
+function SourceIcon({ source }: { source: SessionSource }) {
+  const src = source.kind === 'web' ? source.faviconUrl : source.thumbnailDataUri
+  const [failedSrc, setFailedSrc] = useState<string>()
+  const Icon = source.kind === 'web' ? Globe : source.kind === 'image' ? Image : source.kind === 'video' ? Video : /\.(pdf|md|txt|docx?)$/i.test(source.name) ? FileText : File
+  return <span className={`session-source-icon is-${source.kind}`}>
+    {src && src !== failedSrc ? <img src={src} alt="" loading="lazy" referrerPolicy="no-referrer" onError={() => setFailedSrc(src)} /> : <Icon size={15} aria-hidden="true" />}
+  </span>
+}
+
+export default function SessionSources({ sources, loading, error, onRetry, onOpenLibrary }: {
+  sources: SessionSource[]; loading: boolean; error: string; onRetry: () => void; onOpenLibrary: (url: string) => void
+}) {
+  const [expanded, setExpanded] = useState(false)
+  const groups = [
+    { label: 'Images', kinds: ['image'] },
+    { label: 'Files', kinds: ['file', 'video'] },
+    { label: 'Web searches', kinds: ['web'] },
+  ]
+  const initialSources = groups.flatMap(group => sources.filter(source => group.kinds.includes(source.kind)).slice(0, 2))
+  const shown = expanded ? sources : initialSources
+  return <section className="session-sources" aria-label="Session sources">
+    <header className="session-sources-heading"><span><Paperclip size={13} aria-hidden="true" />Sources <small>This session</small></span><span>{sources.length}</span></header>
+    {loading && <p className="session-sources-empty" role="status">Loading session sources…</p>}
+    {error && <div className="session-sources-error" role="status"><span>Could not load saved sources.</span><button type="button" onClick={onRetry}>Retry</button></div>}
+    {!loading && !error && sources.length === 0 && <p className="session-sources-empty">Images and files you send, and pages found by web search, will appear here.</p>}
+    {groups.map(group => {
+      const items = shown.filter(source => group.kinds.includes(source.kind))
+      if (!items.length) return null
+      return <div className="session-sources-group" key={group.label}>
+        <h3>{group.label}</h3>
+        <ul>{items.map(source => {
+          const content = <><SourceIcon source={source} /><span className="session-source-copy"><strong>{source.name}</strong><small>{source.detail}</small></span></>
+          return <li key={source.id}>{source.url ? <a className="session-source-row" href={source.url} target={source.kind === 'web' ? '_blank' : undefined} rel={source.kind === 'web' ? 'noopener noreferrer' : undefined} title={source.url} onClick={event => {
+            if (source.kind === 'web' || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return
+            event.preventDefault()
+            onOpenLibrary(source.url)
+          }}>{content}</a> : <div className="session-source-row" title={source.name}>{content}</div>}</li>
+        })}</ul>
+      </div>
+    })}
+    {sources.length > initialSources.length && <button type="button" className="session-sources-more" aria-expanded={expanded} onClick={() => setExpanded(value => !value)}>{expanded ? 'Show less' : `Show ${sources.length - shown.length} more sources`}</button>}
+  </section>
+}

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

@@ -0,0 +1,61 @@
+import { useCallback, useEffect, useId, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Paperclip, X } from 'lucide-react'
+import type { AgentProgress } from '../types'
+import { useSessionSources } from '../utils/useSessionSources'
+import SessionSources from './SessionSources'
+import '../css/session-sources-popover.css'
+
+export default function SessionSourcesPopover({ chatId, liveProgress, open, onOpenChange }: {
+  chatId: string; liveProgress: AgentProgress[]; open: boolean; onOpenChange: (open: boolean) => void
+}) {
+  const [position, setPosition] = useState({ left: 12, top: 64, maxHeight: 400 })
+  const trigger = useRef<HTMLButtonElement>(null)
+  const panel = useRef<HTMLElement>(null)
+  const closeButton = useRef<HTMLButtonElement>(null)
+  const id = useId()
+  const { sources, loading, error, retry } = useSessionSources(chatId, liveProgress, open)
+  const close = useCallback((restoreFocus = false) => {
+    onOpenChange(false)
+    if (restoreFocus) trigger.current?.focus()
+  }, [onOpenChange])
+  const reposition = useCallback(() => {
+    const bounds = trigger.current?.getBoundingClientRect()
+    if (!bounds) return
+    const width = Math.min(360, window.innerWidth - 24)
+    const top = bounds.bottom + 8
+    setPosition({ left: Math.max(12, Math.min(bounds.right - width, window.innerWidth - width - 12)), top, maxHeight: Math.max(0, window.innerHeight - top - 12) })
+  }, [])
+  useEffect(() => {
+    if (!open) return
+    reposition()
+    closeButton.current?.focus()
+    const outside = (event: MouseEvent) => {
+      if (!trigger.current?.contains(event.target as Node) && !panel.current?.contains(event.target as Node)) close()
+    }
+    const key = (event: KeyboardEvent) => { if (event.key === 'Escape') { event.preventDefault(); close(true) } }
+    document.addEventListener('mousedown', outside)
+    window.addEventListener('keydown', key)
+    window.addEventListener('resize', reposition)
+    window.addEventListener('scroll', reposition, true)
+    return () => {
+      document.removeEventListener('mousedown', outside)
+      window.removeEventListener('keydown', key)
+      window.removeEventListener('resize', reposition)
+      window.removeEventListener('scroll', reposition, true)
+    }
+  }, [open, close, reposition])
+  return <>
+    <button ref={trigger} type="button" className={`session-sources-toggle${open ? ' is-open' : ''}`} aria-label="Open session sources" aria-haspopup="dialog" aria-expanded={open} aria-controls={open ? id : undefined} title="Sources for this session" onClick={() => { reposition(); onOpenChange(!open) }}>
+      <Paperclip size={15} aria-hidden="true" /><span>Sources</span>
+    </button>
+    {open && createPortal(<section ref={panel} id={id} className="session-sources-popover" role="dialog" aria-label="Session sources" style={position}>
+      <button ref={closeButton} type="button" className="session-sources-close" aria-label="Close session sources" onClick={() => close(true)}><X size={16} aria-hidden="true" /></button>
+      <SessionSources key={chatId} sources={sources} loading={loading} error={error} onRetry={retry} onOpenLibrary={url => {
+        window.history.pushState({}, '', url)
+        window.dispatchEvent(new PopStateEvent('popstate'))
+        close()
+      }} />
+    </section>, document.body)}
+  </>
+}