@pheem49/mint 1.14.0 → 1.15.0

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

@@ -20,7 +20,7 @@ export function PlanChecklistWidget({ plan, className = '' }: PlanChecklistWidge
     <div className={`plan-checklist-card ${className}`}>
       <div className="plan-checklist-header">
         <div className="plan-checklist-title">
-          <ListTodo style={{ width: '15px', height: '15px', color: 'var(--accent, #10b981)' }} />
+          <ListTodo style={{ width: '15px', height: '15px', color: 'var(--interactive-fg)' }} />
           <span>{plan.objective || 'Task Plan'}</span>
         </div>
         <span className="plan-checklist-count">

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

@@ -294,7 +294,7 @@ export const PluginsView: React.FC<PluginsViewProps> = React.memo(function Plugi
 
                 {p.hasCredentials && p.fields && (
                   <div style={{ marginTop: '20px', paddingTop: '16px', borderTop: '1px solid var(--border, rgba(255, 255, 255, 0.08))' }}>
-                    <h4 style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--accent, #10b981)', textTransform: 'uppercase', letterSpacing: '0.5px', margin: '0 0 12px' }}>
+                    <h4 style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--interactive-fg)', textTransform: 'none', letterSpacing: '0.5px', margin: '0 0 12px' }}>
                       Credentials
                     </h4>
                     <div style={{ display: 'grid', gap: '12px' }}>

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

@@ -188,7 +188,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
             }}
           >
             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-              <span style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+              <span style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'none', letterSpacing: '0.05em' }}>
                 Target Checkpoint
               </span>
               {checkpoints.length > 1 && (
@@ -222,7 +222,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
                     padding: '3px 8px',
                     borderRadius: '6px',
                     background: 'color-mix(in srgb, var(--accent) 15%, transparent)',
-                    color: 'var(--accent)',
+                    color: 'var(--interactive-fg)',
                     fontWeight: 600,
                     fontSize: '12px',
                   }}
@@ -262,7 +262,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
           {/* Affected Files List */}
           {changes.length > 0 && (
             <div>
-              <div style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+              <div style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', marginBottom: '8px', textTransform: 'none', letterSpacing: '0.05em' }}>
                 Files in this turn ({changes.length})
               </div>
               <div
@@ -316,7 +316,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
                             padding: '1px 6px',
                             borderRadius: '4px',
                             background: 'color-mix(in srgb, var(--accent) 15%, transparent)',
-                            color: 'var(--accent)',
+                            color: 'var(--interactive-fg)',
                           }}
                         >
                           [NEW FILE]
@@ -324,7 +324,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
                       ) : (
                         <>
                           {file.additions > 0 && (
-                            <span style={{ fontSize: '11px', color: 'var(--accent)', fontWeight: 600 }}>
+                            <span style={{ fontSize: '11px', color: 'var(--interactive-fg)', fontWeight: 600 }}>
                               +{file.additions}
                             </span>
                           )}
@@ -408,7 +408,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
                   <polyline points="1 4 1 10 7 10" />
                   <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
                 </svg>
-                <span>Confirm Rewind</span>
+                <span>Confirm rewind</span>
               </>
             )}
           </button>

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

@@ -44,7 +44,7 @@ export function RunSummaryDashboard({ summary, className = '' }: Props) {
       <div className="run-summary-header">
         <div className="run-summary-title">
           <Activity style={{ width: '15px', height: '15px', color: statusColor }} />
-          <span>Run Telemetry #{summary.runId}</span>
+          <span>Run telemetry #{summary.runId}</span>
         </div>
         <div>
           <span className={badgeClass}>
@@ -110,10 +110,10 @@ export function RunSummaryDashboard({ summary, className = '' }: Props) {
         </div>
       </div>
 
-      {/* Tool Calls Timeline */}
+      {/* Tool call timeline */}
       {summary.toolTimeline && summary.toolTimeline.length > 0 && (
         <div className="run-timeline-container">
-          <div className="run-timeline-title">Tool Calls Timeline</div>
+          <div className="run-timeline-title">Tool call timeline</div>
           <div className="run-timeline-list">
             {summary.toolTimeline.map((item, idx) => (
               <div key={idx} className="run-timeline-item">

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

@@ -94,7 +94,7 @@ export const ScheduledTasksView: React.FC<ScheduledTasksViewProps> = React.memo(
     const [showAddModal, setShowAddModal] = useState(false)
     const [detailJob, setDetailJob] = useState<CronJob | null>(null)
 
-    // Picker inputs for the "New Scheduled Task" form — build the cron
+    // Picker inputs for the "New scheduled task" form — build the cron
     // expression `newSchedule` from a clock/calendar UI instead of asking
     // everyone to type raw cron syntax. "custom" leaves newSchedule as a
     // free-text field for anyone who wants to type cron directly.
@@ -276,7 +276,7 @@ export const ScheduledTasksView: React.FC<ScheduledTasksViewProps> = React.memo(
               <span className="management-title-icon" style={{ display: 'inline-flex', alignItems: 'center' }}>
                 {renderScheduledTasksSvgIcon(22, 'var(--accent)')}
               </span>
-              Scheduled Tasks
+              Scheduled tasks
             </h1>
             <p className="management-subtitle">
               Tasks that run on a schedule in the background.
@@ -287,7 +287,7 @@ export const ScheduledTasksView: React.FC<ScheduledTasksViewProps> = React.memo(
               <line x1="12" y1="5" x2="12" y2="19" />
               <line x1="5" y1="12" x2="19" y2="12" />
             </svg>
-            New Scheduled Task
+            New scheduled task
           </button>
         </div>
 
@@ -442,7 +442,7 @@ export const ScheduledTasksView: React.FC<ScheduledTasksViewProps> = React.memo(
           <div className="management-modal-overlay">
             <div className="management-modal">
               <div className="management-modal-header">
-                <h2 className="management-modal-title">New Scheduled Task</h2>
+                <h2 className="management-modal-title">New scheduled task</h2>
                 <button type="button" className="management-modal-close" onClick={() => setShowAddModal(false)}>
                   ✕
                 </button>

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>
+  )
+}