@pheem49/mint 1.15.0 → 1.17.0

package/src/renderer/shared/components/activity/ViewedImages.tsx

@@ -0,0 +1,140 @@
+import type { ArtifactFile } from '../../utils/artifacts'
+import { memo, useEffect, useMemo, useRef, useState } from 'react'
+import { X } from 'lucide-react'
+import type { AgentProgress } from '../../types'
+import { viewedImagesFrom, type ViewedImageItem } from '../../utils/viewedImages'
+import { mediaPlatform } from '../../platform'
+import '../../css/viewed-images.css'
+
+export function ViewedImage({
+  image,
+  chatId,
+  variant = 'card',
+  onOpenArtifact,
+}: {
+  image: ViewedImageItem
+  chatId?: string
+  variant?: 'card' | 'inline'
+  onOpenArtifact?: (artifact: ArtifactFile) => void
+}) {
+  const [src, setSrc] = useState(image.src || '')
+  const [broken, setBroken] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+  const dialog = useRef<HTMLDialogElement>(null)
+
+  useEffect(() => {
+    if (image.src) {
+      setSrc(image.src)
+      setBroken(false)
+      return
+    }
+    if (image.artifactId) {
+      let active = true
+      let loaded = ''
+      mediaPlatform.readMcpArtifact(image.artifactId, chatId).then(url => {
+        if (!active) { if (url.startsWith('blob:')) URL.revokeObjectURL(url); return }
+        loaded = url
+        setSrc(url)
+        setBroken(false)
+      }).catch(() => {
+        if (active) setBroken(true)
+      })
+      return () => {
+        active = false
+        if (loaded.startsWith('blob:')) URL.revokeObjectURL(loaded)
+      }
+    }
+  }, [image.src, image.artifactId, chatId])
+
+  useEffect(() => {
+    if (expanded) dialog.current?.showModal()
+  }, [expanded])
+
+  const handleOpen = () => {
+    if (onOpenArtifact && src) {
+      onOpenArtifact({
+        path: image.path || image.name,
+        url: src,
+        type: 'image',
+      })
+      return
+    }
+    setExpanded(true)
+  }
+
+  if (variant === 'inline') {
+    return (
+      <figure className="viewed-image-inline" data-activity-image={image.id}>
+        {broken || !src ? (
+          <p className="viewed-image-inline-status" role="status">
+            {broken ? 'Image preview unavailable' : 'Loading image…'}
+          </p>
+        ) : (
+          <button
+            type="button"
+            className="viewed-image-inline-btn"
+            aria-label={`Expand ${image.name}`}
+            title={onOpenArtifact ? 'Open full image in Tools Surface' : `Expand ${image.name}`}
+            onClick={handleOpen}
+          >
+            <img src={src} alt={`Viewed image: ${image.name}`} loading="lazy" onError={() => setBroken(true)} />
+            <span className="viewed-image-inline-overlay">
+              <span className="viewed-image-inline-badge">{onOpenArtifact ? 'Open in Tools' : 'Click to zoom'}</span>
+            </span>
+          </button>
+        )}
+        <dialog
+          ref={dialog}
+          className="viewed-image-dialog"
+          aria-label={`Image preview: ${image.name}`}
+          onClose={() => setExpanded(false)}
+          onClick={event => { if (event.target === event.currentTarget) dialog.current?.close() }}
+        >
+          <header>
+            <span title={image.path}>{image.name}</span>
+            <button type="button" aria-label="Close image preview" onClick={() => dialog.current?.close()}>
+              <X size={18} />
+            </button>
+          </header>
+          {expanded && src && <img src={src} alt={image.name} />}
+        </dialog>
+      </figure>
+    )
+  }
+
+  return <figure className="viewed-image" data-viewed-image={image.id}>
+    {broken || !src ? <p className="viewed-image-error" role="status">{broken ? 'Image preview unavailable' : 'Loading image…'}</p> :
+      <button
+        type="button"
+        className="viewed-image-button"
+        aria-label={`Expand ${image.name}`}
+        title={onOpenArtifact ? 'Open full image in Tools Surface' : `Expand ${image.name}`}
+        onClick={handleOpen}
+      >
+        <img src={src} alt={`Viewed image: ${image.name}`} loading="lazy" onError={() => setBroken(true)} />
+      </button>}
+    <figcaption title={image.path}>{image.name}</figcaption>
+    <dialog ref={dialog} className="viewed-image-dialog" aria-label={`Image preview: ${image.name}`}
+      onClose={() => setExpanded(false)} onClick={event => { if (event.target === event.currentTarget) dialog.current?.close() }}>
+      <header><span title={image.path}>{image.name}</span><button type="button" aria-label="Close image preview" onClick={() => dialog.current?.close()}><X size={18} /></button></header>
+      {expanded && src && <img src={src} alt={image.name} />}
+    </dialog>
+  </figure>
+}
+
+export default memo(function ViewedImages({
+  progress,
+  chatId,
+  onOpenArtifact,
+}: {
+  progress: AgentProgress[]
+  chatId?: string
+  onOpenArtifact?: (artifact: ArtifactFile) => void
+}) {
+  const images = useMemo(() => viewedImagesFrom(progress), [progress])
+  if (!images.length) return null
+  return <section className="viewed-images" aria-label="Images viewed by Mint">
+    {images.map(image => <ViewedImage key={image.id} image={image} chatId={chatId} onOpenArtifact={onOpenArtifact} />)}
+  </section>
+})
+

package/src/renderer/shared/components/app/AuthGate.tsx

@@ -0,0 +1,227 @@
+import React, { createContext, useContext, useEffect, useId, useState } from 'react'
+import { Eye, EyeOff, LoaderCircle } from 'lucide-react'
+import type { AuthUser } from '../../types'
+import { authPlatform, runtimePlatform } from '../../platform'
+import '../../css/auth-gate.css'
+
+const { authGetCurrentUser, authLogin, authLogout, authRegister, resolveAvatarUrl } = authPlatform
+
+interface AuthContextValue {
+  user: AuthUser | null
+  avatarUrl: string | null
+  logout: () => Promise<void>
+  /** Update the in-memory user (e.g. after saving profile changes) without
+   * a full page reload or extra round-trip to re-fetch the session. */
+  refreshUser: (updated: AuthUser) => void
+}
+
+const AuthUserContext = createContext<AuthContextValue>({
+  user: null,
+  avatarUrl: null,
+  logout: async () => {},
+  refreshUser: () => {},
+})
+
+/** Read the currently signed-in shared Mint user (and a logout action)
+ * from anywhere under <AuthGate>, e.g. the sidebar account card. */
+export function useAuthUser(): AuthContextValue {
+  return useContext(AuthUserContext)
+}
+
+export default function AuthGate({ children }: { children: React.ReactNode }) {
+  const [status, setStatus] = useState<'loading' | 'signed-out' | 'signed-in'>('loading')
+  const [user, setUser] = useState<AuthUser | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    const fallbackTimer = setTimeout(() => {
+      if (!cancelled) {
+        setStatus('signed-out')
+      }
+    }, 6000)
+
+    authGetCurrentUser()
+      .then((current) => {
+        if (cancelled) return
+        clearTimeout(fallbackTimer)
+        setUser(current)
+        setStatus(current ? 'signed-in' : 'signed-out')
+      })
+      .catch(() => {
+        if (!cancelled) {
+          clearTimeout(fallbackTimer)
+          setStatus('signed-out')
+        }
+      })
+    return () => {
+      cancelled = true
+      clearTimeout(fallbackTimer)
+    }
+  }, [])
+
+  const handleLogout = async () => {
+    await authLogout().catch(() => {})
+    setUser(null)
+    setStatus('signed-out')
+  }
+
+  if (status === 'loading') {
+    return <div className="auth-gate-loading">Loading Mint…</div>
+  }
+
+  if (status === 'signed-out') {
+    return (
+      <AuthForm
+        onSuccess={(loggedInUser) => {
+          setUser(loggedInUser)
+          setStatus('signed-in')
+        }}
+      />
+    )
+  }
+
+  return (
+    <AuthUserContext.Provider
+      value={{
+        user,
+        avatarUrl: resolveAvatarUrl(user?.image),
+        logout: handleLogout,
+        refreshUser: setUser,
+      }}
+    >
+      {children}
+    </AuthUserContext.Provider>
+  )
+}
+
+function AuthForm({ onSuccess }: { onSuccess: (user: AuthUser) => void }) {
+  const [mode, setMode] = useState<'login' | 'register'>('login')
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const passwordId = useId()
+  const errorId = useId()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (loading) return
+    setLoading(true)
+    setError(null)
+    try {
+      const user =
+        mode === 'login'
+          ? await authLogin(email, password)
+          : await authRegister(name || undefined, email, password)
+      onSuccess(user)
+    } catch (err) {
+      setError(err instanceof Error && err.message.trim() ? err.message : 'Unable to continue. Please try again.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="auth-gate-overlay">
+      <form className="auth-gate-card" onSubmit={handleSubmit}>
+        <img src={runtimePlatform.appIconPath()} alt="" className="auth-gate-logo" />
+        <div className="auth-gate-heading">
+          <h1 className="auth-gate-title">
+            {mode === 'login' ? 'Sign in to Mint' : 'Create your Mint account'}
+          </h1>
+          <p className="auth-gate-subtitle">
+            {mode === 'login' ? 'Sign in to continue to Mint' : 'Create an account to get started with Mint'}
+          </p>
+        </div>
+
+        {mode === 'register' && (
+          <label className="auth-gate-field">
+            <span>Name</span>
+            <input
+              type="text"
+              autoComplete="name"
+              disabled={loading}
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Your name"
+            />
+          </label>
+        )}
+
+        <label className="auth-gate-field">
+          <span>Email</span>
+          <input
+            type="email"
+            autoComplete="username"
+            disabled={loading}
+            aria-describedby={error ? errorId : undefined}
+            required
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="you@example.com"
+          />
+        </label>
+
+        <div className="auth-gate-field">
+          <label htmlFor={passwordId}>Password</label>
+          <div className="auth-gate-password">
+            <input
+              id={passwordId}
+              type={showPassword ? 'text' : 'password'}
+              autoComplete={mode === 'login' ? 'current-password' : 'new-password'}
+              disabled={loading}
+              aria-describedby={error ? errorId : undefined}
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+            />
+            <button
+              type="button"
+              className="auth-gate-password-toggle"
+              aria-label={showPassword ? 'Hide password' : 'Show password'}
+              aria-controls={passwordId}
+              disabled={loading}
+              onClick={() => setShowPassword((visible) => !visible)}
+            >
+              {showPassword ? <EyeOff size={18} aria-hidden="true" /> : <Eye size={18} aria-hidden="true" />}
+            </button>
+          </div>
+        </div>
+
+        {error && <div id={errorId} className="auth-gate-error" role="alert">{error}</div>}
+
+        <button type="submit" className="auth-gate-submit" disabled={loading} aria-busy={loading}>
+          {loading && <LoaderCircle size={18} className="auth-gate-spinner" aria-hidden="true" />}
+          <span role="status">
+            {loading
+              ? mode === 'login'
+                ? 'Signing in…'
+                : 'Creating account…'
+              : mode === 'login'
+                ? 'Sign in'
+                : 'Create account'}
+          </span>
+        </button>
+
+        <div className="auth-gate-account-prompt">
+          <span>{mode === 'login' ? "Don't have an account?" : 'Already have an account?'}</span>
+          <button
+            type="button"
+            className="auth-gate-switch"
+            disabled={loading}
+            onClick={() => {
+              setMode(mode === 'login' ? 'register' : 'login')
+              setShowPassword(false)
+              setError(null)
+            }}
+          >
+            {mode === 'login' ? 'Create account' : 'Sign in'}
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}

package/src/renderer/shared/components/app/ChunkErrorBoundary.tsx

@@ -0,0 +1,186 @@
+import React from 'react'
+import { ErrorRecovery } from '../ui/error-recovery'
+
+interface State {
+  hasError: boolean
+}
+
+/** Catches failed route chunks and keeps recovery/window controls available. */
+type Props = { children: React.ReactNode }
+
+export default class ChunkErrorBoundary extends React.Component<Props, State> {
+  state: State = { hasError: false }
+  declare props: Props
+
+  static getDerivedStateFromError(): State {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: unknown) {
+    console.error('Mint failed to load:', error)
+  }
+
+  private handleReload = async () => {
+    try {
+      if (typeof window !== 'undefined') {
+        window.sessionStorage.removeItem('mint_chunk_reload_attempted')
+        window.sessionStorage.removeItem('mint_vite_preload_reload')
+        if ('caches' in window) {
+          const keys = await caches.keys().catch(() => [])
+          await Promise.all(keys.map((k) => caches.delete(k))).catch(() => {})
+        }
+        if ('serviceWorker' in navigator) {
+          const regs = await navigator.serviceWorker.getRegistrations().catch(() => [])
+          await Promise.all(regs.map((r) => r.unregister())).catch(() => {})
+        }
+      }
+    } finally {
+      window.location.reload()
+    }
+  }
+
+  private handleCloseWindow = () => {
+    try {
+      const api = typeof window !== 'undefined' ? (window as any).api : null
+      if (api?.closeWindow) {
+        api.closeWindow()
+        return
+      }
+    } catch {}
+    if (typeof window !== 'undefined') window.close()
+  }
+
+  private handleMinimize = () => {
+    try {
+      const api = typeof window !== 'undefined' ? (window as any).api : null
+      api?.minimizeWindow?.()
+    } catch {}
+  }
+
+  private handleToggleMaximize = () => {
+    try {
+      const api = typeof window !== 'undefined' ? (window as any).api : null
+      api?.toggleMaximize?.()
+    } catch {}
+  }
+
+  private handleReset = () => {
+    this.setState({ hasError: false })
+    if (typeof window !== 'undefined') {
+      window.location.hash = '#/'
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100vh',
+            width: '100vw',
+            background: 'var(--bg-canvas, #09090b)',
+            color: 'var(--text-primary, #e4e4e7)',
+            fontFamily: "'IBM Plex Sans Thai', 'Noto Sans Thai', 'Inter', ui-sans-serif, system-ui, sans-serif",
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+          }}
+        >
+          {/* Custom titlebar so desktop user can drag window, minimize, or close */}
+          <div
+            data-tauri-drag-region
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              height: 38,
+              padding: '0 12px',
+              background: 'var(--bg-surface, #141416)',
+              borderBottom: '1px solid var(--border-subtle, rgba(255, 255, 255, 0.08))',
+              userSelect: 'none',
+              WebkitAppRegion: 'drag',
+              flexShrink: 0,
+            } as React.CSSProperties}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '0.8rem', color: 'var(--text-muted, #9ca3af)' }}>
+              <span style={{ color: 'var(--interactive-fg, #10b981)', fontWeight: 700 }}>✦</span> Mint Agent
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 2,
+                WebkitAppRegion: 'no-drag',
+              } as React.CSSProperties}
+            >
+              <button
+                type="button"
+                aria-label="Minimize window"
+                title="Minimize"
+                onClick={this.handleMinimize}
+                style={{
+                  width: 34,
+                  height: 28,
+                  background: 'transparent',
+                  border: 'none',
+                  color: 'var(--text-muted, #9ca3af)',
+                  cursor: 'pointer',
+                  borderRadius: 4,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M2 6h8"/></svg>
+              </button>
+              <button
+                type="button"
+                aria-label="Maximize window"
+                title="Maximize"
+                onClick={this.handleToggleMaximize}
+                style={{
+                  width: 34,
+                  height: 28,
+                  background: 'transparent',
+                  border: 'none',
+                  color: 'var(--text-muted, #9ca3af)',
+                  cursor: 'pointer',
+                  borderRadius: 4,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="2.5" y="2.5" width="7" height="7" rx="0.8"/></svg>
+              </button>
+              <button
+                type="button"
+                aria-label="Close window"
+                title="Close"
+                onClick={this.handleCloseWindow}
+                style={{
+                  width: 34,
+                  height: 28,
+                  background: 'transparent',
+                  border: 'none',
+                  color: 'var(--text-muted, #9ca3af)',
+                  cursor: 'pointer',
+                  borderRadius: 4,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="m3 3 6 6m0-6L3 9"/></svg>
+              </button>
+            </div>
+          </div>
+
+          <ErrorRecovery onBackToChat={this.handleReset} onRefresh={this.handleReload} />
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}