@pheem49/mint 1.17.0 → 1.18.0

package/src/renderer/shared/components/activity/AskUserActivityCard.test.tsx

@@ -0,0 +1,122 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { AskUserActivityCard } from './AskUserActivityCard'
+import { AgentActivityTable } from './AgentActivityTable'
+import { activitiesFrom } from '../../utils/agentActivity'
+
+describe('AskUserActivityCard', () => {
+  it('returns null when questions list is empty', () => {
+    const html = renderToStaticMarkup(<AskUserActivityCard questions={[]} />)
+    expect(html).toBe('')
+  })
+
+  it('renders single question card with "1 question" header and answer', () => {
+    const html = renderToStaticMarkup(
+      <AskUserActivityCard
+        questions={[
+          {
+            question: 'Which framework should we use?',
+            answer: 'React + TypeScript',
+          },
+        ]}
+      />,
+    )
+
+    expect(html).toContain('1 question')
+    expect(html).toContain('Which framework should we use?')
+    expect(html).toContain('React + TypeScript')
+    expect(html).toContain('modern-ask-user-card')
+    expect(html).toContain('modern-ask-user-header')
+  })
+
+  it('renders multi-question card matching user design with "3 questions"', () => {
+    const html = renderToStaticMarkup(
+      <AskUserActivityCard
+        questions={[
+          {
+            question: 'คุณต้องการใช้ภาษาและเทคโนโลยีใดในการสร้าง MCP Server (Hardware Tooling)?',
+            answer: '(Recommended) Python (ใช้ FastMCP / mcp SDK + pyserial + psutil) — พัฒนาไวและมีไลบรารีฮาร์ดแวร์/OS ครบครัน',
+          },
+          {
+            question: 'คุณต้องการให้สร้างโมดูลใดบ้างในเวอร์ชันแรกนี้?',
+            answer: 'USB / Serial Bridge, Hardware Flashing & Toolchains, Process & Port Management',
+          },
+          {
+            question: 'สำหรับฝั่ง Toolchain & Flashing คุณใช้งานเครื่องมือตัวไหนเป็นหลัก?',
+            answer: 'Arduino CLI (arduino-cli), PlatformIO (pio), ESP-IDF / esptool',
+          },
+        ]}
+      />,
+    )
+
+    expect(html).toContain('3 questions')
+    expect(html).toContain('คุณต้องการใช้ภาษาและเทคโนโลยีใดในการสร้าง MCP Server')
+    expect(html).toContain('(Recommended) Python')
+    expect(html).toContain('คุณต้องการให้สร้างโมดูลใดบ้างในเวอร์ชันแรกนี้?')
+    expect(html).toContain('USB / Serial Bridge')
+    expect(html).toContain('Toolchain')
+    expect(html).toContain('Flashing คุณใช้งานเครื่องมือตัวไหนเป็นหลัก?')
+    expect(html).toContain('Arduino CLI')
+  })
+
+  it('renders optional header in headerText if specified', () => {
+    const html = renderToStaticMarkup(
+      <AskUserActivityCard
+        header="MCP Config"
+        questions={[
+          {
+            question: 'Port number?',
+            answer: '3000',
+          },
+        ]}
+      />,
+    )
+
+    expect(html).toContain('1 question · MCP Config')
+    expect(html).toContain('Port number?')
+    expect(html).toContain('3000')
+  })
+
+  it('renders within AgentActivityTable when activity is answered (done)', () => {
+    const view = activitiesFrom([
+      {
+        type: 'ToolStart',
+        data: {
+          action: 'ask_user',
+          input: { query: 'Which model should be used?' },
+        },
+      },
+      {
+        type: 'ToolEnd',
+        data: {
+          action: 'ask_user',
+          result: 'User answered: Gemini 2.5 Pro',
+        },
+      },
+    ])
+
+    const html = renderToStaticMarkup(<AgentActivityTable activityView={view} />)
+    expect(html).toContain('modern-ask-user-card')
+    expect(html).toContain('1 question')
+    expect(html).toContain('Which model should be used?')
+    expect(html).toContain('Gemini 2.5 Pro')
+  })
+
+  it('renders standard active item while ask_user is waiting to be answered', () => {
+    const view = activitiesFrom([
+      {
+        type: 'ToolStart',
+        data: {
+          action: 'ask_user',
+          input: { query: 'Waiting for your answer...' },
+        },
+      },
+    ])
+
+    const html = renderToStaticMarkup(<AgentActivityTable activityView={view} />)
+    expect(html).not.toContain('modern-ask-user-card')
+    expect(html).toContain('Asked')
+    expect(html).toContain('Waiting for your answer...')
+  })
+})

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

@@ -0,0 +1,70 @@
+/**
+ * shared/components/activity/AskUserActivityCard.tsx
+ * Sleek questions & answers card rendered in the agent activity timeline after
+ * the user has answered an ask_user prompt.
+ * Shared across Desktop and Web — do NOT duplicate.
+ */
+import React, { memo } from 'react'
+import type { AskUserItem } from '../../utils/agentActivity'
+import { renderFormattedMessage } from '../../utils/markdown'
+
+export interface AskUserActivityCardProps {
+  questions: AskUserItem[]
+  header?: string
+  className?: string
+}
+
+export const AskUserActivityCard = memo(function AskUserActivityCard({
+  questions,
+  header,
+  className,
+}: AskUserActivityCardProps) {
+  if (!questions || questions.length === 0) return null
+
+  const count = questions.length
+  const countLabel = count === 1 ? '1 question' : `${count} questions`
+  const headerText = header ? `${countLabel} · ${header}` : countLabel
+
+  return (
+    <div
+      className={`modern-ask-user-card ${className || ''}`.trim()}
+      data-testid="ask-user-activity-card"
+    >
+      <div className="modern-ask-user-header">
+        <span className="modern-ask-user-header-icon" aria-hidden="true">
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="modern-ask-user-icon"
+          >
+            <rect x="3" y="3" width="18" height="18" rx="4" />
+            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+            <line x1="12" y1="17" x2="12.01" y2="17" strokeWidth="2.5" />
+          </svg>
+        </span>
+        <span className="modern-ask-user-header-text">{headerText}</span>
+      </div>
+
+      <div className="modern-ask-user-items">
+        {questions.map((item, index) => (
+          <div key={index} className="modern-ask-user-item">
+            <div className="modern-ask-user-question">
+              {renderFormattedMessage(item.question) ?? item.question}
+            </div>
+            {item.answer && (
+              <div className="modern-ask-user-answer">
+                {renderFormattedMessage(item.answer) ?? item.answer}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+})

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

@@ -46,7 +46,21 @@ function Artifact({ artifact, chatId }: { artifact: McpArtifact; chatId?: string
   </div>
 }
 
-export default memo(function McpToolResults({ progress, running = false, interrupted = false, chatId }: { progress: AgentProgress[]; running?: boolean; interrupted?: boolean; chatId?: string }) {
+export interface McpToolResultsProps {
+  progress: AgentProgress[]
+  running?: boolean
+  interrupted?: boolean
+  chatId?: string
+  mode?: 'full' | 'artifacts-only'
+}
+
+export default memo(function McpToolResults({
+  progress,
+  running = false,
+  interrupted = false,
+  chatId,
+  mode = 'full',
+}: McpToolResultsProps) {
   const [, tick] = useState(0)
   const started = useRef(new Map<string, number>())
   const { calls, discovery, artifacts, warnings } = useMemo(() => {
@@ -86,8 +100,31 @@ export default memo(function McpToolResults({ progress, running = false, interru
     const timer = setInterval(() => tick(n => n + 1), 1000)
     return () => clearInterval(timer)
   }, [hasActiveCalls])
-  if (!calls.size && !displayedArtifacts.length && !warnings.size && !discovery.size) return null
   const isOnlyWarnings = !calls.size && !displayedArtifacts.length && !discovery.size && warnings.size > 0
+
+  if (mode === 'artifacts-only') {
+    if (!displayedArtifacts.length && !warnings.size) return null
+    const artifactsOnlyWarnings = !displayedArtifacts.length && warnings.size > 0
+    return (
+      <section className={`mcp-results${artifactsOnlyWarnings ? ' mcp-results-compact' : ''}`} aria-label="MCP results">
+        {displayedArtifacts.length > 0 && (
+          <div className="mcp-artifacts">
+            {displayedArtifacts.map(artifact => (
+              <Artifact key={artifact.id} artifact={artifact} chatId={chatId} />
+            ))}
+          </div>
+        )}
+        {[...warnings].map(warning => (
+          <div key={warning} className="mcp-warning-banner" role="status">
+            <Info size={14} className="mcp-warning-icon" aria-hidden="true" />
+            <span className="mcp-warning-text">{warning}</span>
+          </div>
+        ))}
+      </section>
+    )
+  }
+
+  if (!calls.size && !displayedArtifacts.length && !warnings.size && !discovery.size) return null
   return <section className={`mcp-results${isOnlyWarnings ? ' mcp-results-compact' : ''}`} aria-label="MCP results">
     {[...discovery].map(([label,message])=><div key={label} className="mcp-call-status" role="status"><strong>{label}</strong><span>{message}</span></div>)}
     {[...calls].map(([id, call]) => {

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

@@ -202,7 +202,7 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
             alignItems: 'center',
             gap: '10px',
             padding: '10px 18px',
-            borderRadius: '12px',
+            borderRadius: 'var(--radius-xl, 18px)',
             background: 'linear-gradient(135deg, var(--accent-subtle), color-mix(in srgb, var(--status-info, #3b82f6) 15%, transparent))',
             border: '1px solid var(--accent-border)',
             boxShadow: 'var(--shadow-md)',
@@ -213,7 +213,7 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
             style={{
               width: '32px',
               height: '32px',
-              borderRadius: '8px',
+              borderRadius: 'var(--radius-sm, 8px)',
               background: 'var(--accent)',
               color: 'var(--text-on-accent)',
               display: 'flex',
@@ -272,7 +272,7 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
                   flexDirection: 'column',
                   width: '260px',
                   padding: '12px',
-                  borderRadius: '10px',
+                  borderRadius: 'var(--radius-lg, 14px)',
                   background: isSelected ? 'var(--bg-surface-raised)' : 'var(--bg-surface)',
                   border: `1px solid ${isSelected ? statusColor : 'var(--border-default)'}`,
                   cursor: 'pointer',
@@ -298,7 +298,7 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
                       fontSize: '0.68rem',
                       fontWeight: 600,
                       padding: '2px 6px',
-                      borderRadius: '4px',
+                      borderRadius: 'var(--radius-2xs, 4px)',
                       textTransform: 'none',
                       background: `color-mix(in srgb, ${statusColor} 15%, transparent)`,
                       color: statusColor,
@@ -345,7 +345,7 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
           style={{
             background: 'var(--bg-surface-raised)',
             border: '1px solid var(--border-default)',
-            borderRadius: '10px',
+            borderRadius: 'var(--radius-lg, 14px)',
             padding: '14px',
             marginTop: '8px',
           }}
@@ -379,7 +379,7 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
                 style={{
                   background: 'var(--bg-surface-soft)',
                   border: '1px solid var(--border-subtle)',
-                  borderRadius: '6px',
+                  borderRadius: 'var(--radius-xs, 6px)',
                   padding: '8px 10px',
                   fontSize: '0.76rem',
                 }}
@@ -395,7 +395,7 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
                       padding: '4px 6px',
                       background: 'var(--bg-canvas)',
                       border: '1px solid var(--border-subtle)',
-                      borderRadius: '4px',
+                      borderRadius: 'var(--radius-2xs, 4px)',
                       color: 'var(--text-secondary)',
                       fontSize: '0.72rem',
                       overflowX: 'auto',

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

@@ -3,6 +3,7 @@ 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 { setWorkspaceDragData } from '../../utils/workspaceDrag'
 import { mediaPlatform } from '../../platform'
 import '../../css/viewed-images.css'
 
@@ -76,8 +77,27 @@ export function ViewedImage({
             aria-label={`Expand ${image.name}`}
             title={onOpenArtifact ? 'Open full image in Tools Surface' : `Expand ${image.name}`}
             onClick={handleOpen}
+            draggable
+            onDragStart={(event) => {
+              setWorkspaceDragData(event.dataTransfer, {
+                path: image.path || image.name,
+                url: src,
+              })
+            }}
           >
-            <img src={src} alt={`Viewed image: ${image.name}`} loading="lazy" onError={() => setBroken(true)} />
+            <img
+              src={src}
+              alt={`Viewed image: ${image.name}`}
+              loading="lazy"
+              onError={() => setBroken(true)}
+              draggable
+              onDragStart={(event) => {
+                setWorkspaceDragData(event.dataTransfer, {
+                  path: image.path || image.name,
+                  url: src,
+                })
+              }}
+            />
             <span className="viewed-image-inline-overlay">
               <span className="viewed-image-inline-badge">{onOpenArtifact ? 'Open in Tools' : 'Click to zoom'}</span>
             </span>
@@ -110,8 +130,27 @@ export function ViewedImage({
         aria-label={`Expand ${image.name}`}
         title={onOpenArtifact ? 'Open full image in Tools Surface' : `Expand ${image.name}`}
         onClick={handleOpen}
+        draggable
+        onDragStart={(event) => {
+          setWorkspaceDragData(event.dataTransfer, {
+            path: image.path || image.name,
+            url: src,
+          })
+        }}
       >
-        <img src={src} alt={`Viewed image: ${image.name}`} loading="lazy" onError={() => setBroken(true)} />
+        <img
+          src={src}
+          alt={`Viewed image: ${image.name}`}
+          loading="lazy"
+          onError={() => setBroken(true)}
+          draggable
+          onDragStart={(event) => {
+            setWorkspaceDragData(event.dataTransfer, {
+              path: image.path || image.name,
+              url: src,
+            })
+          }}
+        />
       </button>}
     <figcaption title={image.path}>{image.name}</figcaption>
     <dialog ref={dialog} className="viewed-image-dialog" aria-label={`Image preview: ${image.name}`}

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

@@ -126,7 +126,7 @@ export default class ChunkErrorBoundary extends React.Component<Props, State> {
                   border: 'none',
                   color: 'var(--text-muted, #9ca3af)',
                   cursor: 'pointer',
-                  borderRadius: 4,
+                  borderRadius: 'var(--radius-2xs, 4px)',
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
@@ -146,7 +146,7 @@ export default class ChunkErrorBoundary extends React.Component<Props, State> {
                   border: 'none',
                   color: 'var(--text-muted, #9ca3af)',
                   cursor: 'pointer',
-                  borderRadius: 4,
+                  borderRadius: 'var(--radius-2xs, 4px)',
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
@@ -166,7 +166,7 @@ export default class ChunkErrorBoundary extends React.Component<Props, State> {
                   border: 'none',
                   color: 'var(--text-muted, #9ca3af)',
                   cursor: 'pointer',
-                  borderRadius: 4,
+                  borderRadius: 'var(--radius-2xs, 4px)',
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',

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

@@ -381,7 +381,7 @@ export function CommandPalette({
           maxWidth: '620px',
           background: 'var(--bg-overlay)',
           border: '1px solid var(--border-default)',
-          borderRadius: '14px',
+          borderRadius: 'var(--radius-2xl, 22px)',
           boxShadow: 'var(--shadow-lg)',
           overflow: 'hidden',
           display: 'flex',
@@ -435,7 +435,7 @@ export function CommandPalette({
           <kbd
             style={{
               padding: '2px 7px',
-              borderRadius: '4px',
+              borderRadius: 'var(--radius-2xs, 4px)',
               background: 'var(--bg-surface-soft)',
               color: 'var(--text-muted)',
               fontSize: '0.7rem',
@@ -493,7 +493,7 @@ export function CommandPalette({
                         alignItems: 'center',
                         justifyContent: 'space-between',
                         padding: '9px 12px',
-                        borderRadius: '8px',
+                        borderRadius: 'var(--radius-sm, 8px)',
                         cursor: 'pointer',
                         background: isSelected ? 'var(--accent-subtle)' : 'transparent',
                         border: `1px solid ${isSelected ? 'var(--accent-border)' : 'transparent'}`,
@@ -506,7 +506,7 @@ export function CommandPalette({
                             fontSize: '0.68rem',
                             fontWeight: 700,
                             padding: '2px 5px',
-                            borderRadius: '4px',
+                            borderRadius: 'var(--radius-2xs, 4px)',
                             background: 'var(--bg-surface-soft)',
                             color: isSelected ? 'var(--interactive-fg)' : 'var(--text-muted)',
                             fontFamily: 'monospace',
@@ -553,7 +553,7 @@ export function CommandPalette({
                             color: 'var(--interactive-fg)',
                             fontWeight: 600,
                             padding: '2px 6px',
-                            borderRadius: '4px',
+                            borderRadius: 'var(--radius-2xs, 4px)',
                             background: 'var(--accent-subtle)',
                           }}
                         >
@@ -582,8 +582,8 @@ export function CommandPalette({
           }}
         >
           <div style={{ display: 'flex', gap: '12px' }}>
-            <span><kbd style={{ background: 'var(--bg-surface-soft)', border: '1px solid var(--border-subtle)', padding: '1px 4px', borderRadius: '3px' }}>↑</kbd> <kbd style={{ background: 'var(--bg-surface-soft)', border: '1px solid var(--border-subtle)', padding: '1px 4px', borderRadius: '3px' }}>↓</kbd> to navigate</span>
-            <span><kbd style={{ background: 'var(--bg-surface-soft)', border: '1px solid var(--border-subtle)', padding: '1px 4px', borderRadius: '3px' }}>↵</kbd> to select</span>
+            <span><kbd style={{ background: 'var(--bg-surface-soft)', border: '1px solid var(--border-subtle)', padding: '1px 4px', borderRadius: 'var(--radius-2xs, 4px)' }}>↑</kbd> <kbd style={{ background: 'var(--bg-surface-soft)', border: '1px solid var(--border-subtle)', padding: '1px 4px', borderRadius: 'var(--radius-2xs, 4px)' }}>↓</kbd> to navigate</span>
+            <span><kbd style={{ background: 'var(--bg-surface-soft)', border: '1px solid var(--border-subtle)', padding: '1px 4px', borderRadius: 'var(--radius-2xs, 4px)' }}>↵</kbd> to select</span>
           </div>
           <span>Universal command palette</span>
         </div>

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

@@ -235,7 +235,7 @@ export default function DesktopTitlebar({
     View: [
       { label: sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar', shortcut: 'Ctrl+B', action: onToggleSidebar },
       { label: 'Toggle terminal', shortcut: 'Ctrl+`', action: onToggleTerminal },
-      { label: 'Open Browser panel', shortcut: 'Ctrl+Shift+B', action: onOpenBrowser },
+      { label: 'Open in default browser', shortcut: 'Ctrl+Shift+B', action: onOpenBrowser },
       { label: 'Zoom in', shortcut: 'Ctrl++', action: () => updateZoom(zoom + 0.1) },
       { label: 'Zoom out', shortcut: 'Ctrl+-', action: () => updateZoom(zoom - 0.1) },
       { label: 'Reset zoom', shortcut: 'Ctrl+0', disabled: zoom === 1, action: () => updateZoom(1) },
@@ -328,7 +328,7 @@ export default function DesktopTitlebar({
               <div><dt>Open workspace</dt><dd><kbd>Ctrl+O</kbd></dd></div>
               <div><dt>Toggle sidebar</dt><dd><kbd>Ctrl+B</kbd></dd></div>
               <div><dt>Toggle terminal</dt><dd><kbd>Ctrl+`</kbd></dd></div>
-              <div><dt>Open Browser panel</dt><dd><kbd>Ctrl+Shift+B</kbd></dd></div>
+              <div><dt>Open in default browser</dt><dd><kbd>Ctrl+Shift+B</kbd></dd></div>
               <div><dt>Settings</dt><dd><kbd>Ctrl+,</kbd></dd></div>
               <div><dt>Zoom</dt><dd><kbd>Ctrl++</kbd> <kbd>Ctrl+-</kbd> <kbd>Ctrl+0</kbd></dd></div>
               <div><dt>Fullscreen</dt><dd><kbd>F11</kbd></dd></div>

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

@@ -751,33 +751,25 @@ export default function MintDashboard() {
   }
 
   const openMintBrowser = async (url: string, throwOnError = false) => {
-    if (!isDesktopApp) {
-      window.open(url, '_blank', 'noopener,noreferrer')
-      return
-    }
     try {
-      showToast('Opening Co-browsing browser (Mint Auto)...')
-      const { invoke } = await import('@tauri-apps/api/core')
-      await invoke('open_mint_browser', { url })
+      showToast('Opening in system browser...')
+      await runtimePlatform.openExternal(url)
     } catch (error) {
       if (throwOnError) throw error
       showToast(`Could not open browser: ${String(error)}`)
     }
   }
 
-  const openHtmlFile = async (root: string, relativePath: string, mode: 'external' | 'mint') => {
+  const openHtmlFile = async (root: string, relativePath: string, _mode: 'external' | 'mint' = 'external') => {
     if (!isDesktopApp && !['localhost', '127.0.0.1', '[::1]', '::1'].includes(window.location.hostname)) {
       throw new Error('HTML preview requires a browser on the same machine as the Mint backend.')
     }
-    const popup = !isDesktopApp && mode === 'external' ? window.open('about:blank', '_blank') : null
+    const popup = !isDesktopApp ? window.open('about:blank', '_blank') : null
     if (popup) popup.opener = null
     try {
-      const preview = await workspacePlatform.startHtmlPreview(root, relativePath, !isDesktopApp && mode === 'mint')
-      if (mode === 'mint') {
-        if (isDesktopApp) await openMintBrowser(preview.url, true)
-      } else if (isDesktopApp) {
-        const { invoke } = await import('@tauri-apps/api/core')
-        await invoke('run_desktop_action', { action: { type: 'open_url', target: preview.url } })
+      const preview = await workspacePlatform.startHtmlPreview(root, relativePath)
+      if (isDesktopApp) {
+        await runtimePlatform.openExternal(preview.url)
       } else {
         if (!popup) throw new Error('Allow browser popups, then open the HTML file again.')
         popup.location.replace(preview.url)
@@ -1061,6 +1053,9 @@ export default function MintDashboard() {
         } else if (slashResult.action === 'open_settings') {
           window.location.hash = '#/settings'
           return
+        } else if (slashResult.action === 'start_voice') {
+          window.dispatchEvent(new CustomEvent('mint:trigger-voice'))
+          return
         } else if (slashResult.action === 'resume_session') {
           const query = (slashResult.payload?.query || '').trim().toLowerCase()
           const target = query
@@ -1747,6 +1742,7 @@ export default function MintDashboard() {
     onSelectVideo: selectVideo,
     onSelectDocument: selectDocument,
     onPasteImage: pasteImage,
+    onAttachImage: (image) => conversationActions.attachImage(image),
     onSetMessage: conversationActions.compose,
     subscribeMessage: conversationActions.subscribe,
     getMessage: () => conversationActions.getSnapshot().message,
@@ -1771,12 +1767,26 @@ export default function MintDashboard() {
     onToggleMobileSidebar: () => setMobileSidebarOpen(!mobileSidebarOpen),
     onBackToCode: () => changeView('code'),
     onOpenArtifact: openArtifactSurface,
-    onOpenReview: isDesktopApp ? openReviewSurface : undefined,
+    onOpenReview: openReviewSurface,
     onRemoveQueuedPrompt: conversationActions.removeQueuedPrompt,
     onEditQueuedPrompt: conversationActions.editQueuedPrompt,
     onClearQueuedPrompts: conversationActions.clearQueuedPrompts,
     onSteerQueuedPrompt: conversationActions.steerQueuedPrompt,
     onResumeQueue: conversationActions.resumeQueue,
+    onSyncHistory: () => {
+      void conversationActions.syncHistory()
+    },
+    onReceiveApproval: (approval) => {
+      conversationActions.receiveApproval(conversationId, approval)
+    },
+    onResendFrom: async (fromId: number, newPrompt: string) => {
+      if (conversationActions.getSnapshot().sending) return
+      setError('')
+      liveThinkingOpenRef.current = true
+      liveExtendedThinkingOpenRef.current = true
+      setThinkingExpanded(current => ({ ...current, live: true, 'live-extended': true }))
+      await conversationActions.resendFromInteraction(fromId, newPrompt, { agentMode, planMode })
+    },
   }
 
   const stableToggleSidebar = useLatestCallback(toggleSidebar)
@@ -1876,7 +1886,7 @@ export default function MintDashboard() {
             }}
           />
         )}
-        {toastMessage && <div role="status" style={{ position: 'fixed', bottom: 22, right: 22, zIndex: 10000, padding: '12px 18px', borderRadius: 10, background: 'var(--bg-surface)', color: 'var(--text-main)', border: '1px solid var(--border-color)' }}>{toastMessage}</div>}
+        {toastMessage && <div role="status" style={{ position: 'fixed', bottom: 22, right: 22, zIndex: 10000, padding: '12px 18px', borderRadius: 'var(--radius-lg, 14px)', background: 'var(--bg-surface)', color: 'var(--text-main)', border: '1px solid var(--border-color)' }}>{toastMessage}</div>}
         <DashboardSidebar
           view={view}
           sidebarCollapsed={sidebarCollapsed}

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

@@ -77,7 +77,7 @@ export default class ModalErrorBoundary extends React.Component<Props, State> {
                 color: 'var(--status-error, #ef4444)',
                 background: 'color-mix(in srgb, var(--status-error, #ef4444) 12%, transparent)',
                 padding: '6px 12px',
-                borderRadius: 6,
+                borderRadius: 'var(--radius-xs, 6px)',
                 maxWidth: 460,
                 wordBreak: 'break-word',
               }}
@@ -91,7 +91,7 @@ export default class ModalErrorBoundary extends React.Component<Props, State> {
               onClick={this.handleRetry}
               style={{
                 padding: '8px 20px',
-                borderRadius: 8,
+                borderRadius: 'var(--radius-sm, 8px)',
                 border: 'none',
                 background: 'var(--accent, #10b981)',
                 color: 'var(--text-on-accent, #ffffff)',
@@ -107,7 +107,7 @@ export default class ModalErrorBoundary extends React.Component<Props, State> {
               onClick={() => this.props.onClose?.()}
               style={{
                 padding: '8px 20px',
-                borderRadius: 8,
+                borderRadius: 'var(--radius-sm, 8px)',
                 border: '1px solid var(--border-default, rgba(255, 255, 255, 0.15))',
                 background: 'transparent',
                 color: 'var(--text-main, #e4e4e7)',

package/src/renderer/shared/components/cards/CalculationCard.tsx

@@ -31,7 +31,7 @@ export default function CalculationCard({ data }: { data: CalculationData }) {
       style={{
         background: t.cardBg,
         color: t.cardText,
-        borderRadius: '12px',
+        borderRadius: 'var(--radius-xl, 18px)',
         padding: '16px 20px',
         margin: '12px 0',
         boxShadow: t.cardShadow,
@@ -52,7 +52,7 @@ export default function CalculationCard({ data }: { data: CalculationData }) {
         style={{
           background: t.exprBg,
           border: `1px solid ${t.exprBorder}`,
-          borderRadius: '8px',
+          borderRadius: 'var(--radius-sm, 8px)',
           padding: '10px 14px',
           fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
           fontSize: '14px',
@@ -73,7 +73,7 @@ export default function CalculationCard({ data }: { data: CalculationData }) {
         style={{
           background: t.resultBg,
           border: `1px solid ${t.resultBorder}`,
-          borderRadius: '10px',
+          borderRadius: 'var(--radius-md, 10px)',
           padding: '12px 18px',
         }}
       >

package/src/renderer/shared/components/cards/ImageGenCard.tsx

@@ -41,7 +41,7 @@ function GeneratedImageTile({ url, single }: { url: string; single: boolean }) {
       style={{
         position: 'relative',
         display: 'block',
-        borderRadius: '10px',
+        borderRadius: 'var(--radius-md, 10px)',
         overflow: 'hidden',
         aspectRatio: single ? undefined : '1 / 1',
         background: 'var(--surface-strong)',
@@ -81,7 +81,7 @@ export default function ImageGenCard({ data }: { data: ImageGenData }) {
       style={{
         background: cardBg,
         color: cardText,
-        borderRadius: '12px',
+        borderRadius: 'var(--radius-xl, 18px)',
         padding: '16px 20px',
         margin: '12px 0',
         boxShadow: 'var(--shadow-md)',