@pheem49/mint 1.14.0 → 1.16.0

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { TrendingUp, TrendingDown } from 'lucide-react'
 
 export interface StockData {
@@ -18,6 +18,38 @@ export default function StockCard({ data }: { data: StockData }) {
   const isPositive = data.change >= 0
   const accentColor = isPositive ? '#10b981' : '#ef4444'
 
+  const [isDark, setIsDark] = useState(
+    () => (document.documentElement.getAttribute('data-theme') || 'dark') !== 'light'
+  )
+
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setIsDark((document.documentElement.getAttribute('data-theme') || 'dark') !== 'light')
+    })
+    observer.observe(document.documentElement, { attributeFilter: ['data-theme'] })
+    return () => observer.disconnect()
+  }, [])
+
+  // Theme-aware color tokens
+  const t = {
+    cardBg: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(15,23,42,0.04)',
+    cardText: isDark ? '#ffffff' : '#0f172a',
+    cardBorder: isPositive
+      ? isDark ? 'rgba(16,185,129,0.25)' : 'rgba(16,185,129,0.45)'
+      : isDark ? 'rgba(239,68,68,0.25)' : 'rgba(239,68,68,0.45)',
+    cardShadow: isDark
+      ? '0 8px 32px 0 rgba(0,0,0,0.2)'
+      : '0 4px 20px 0 rgba(15,23,42,0.08)',
+    tagBg: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.07)',
+    tagColor: isDark ? 'rgba(255,255,255,0.7)' : '#475569',
+    subText: isDark ? 'rgba(255,255,255,0.6)' : '#64748b',
+    divider: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(15,23,42,0.1)',
+    statBg: isDark ? 'rgba(255,255,255,0.04)' : 'rgba(15,23,42,0.05)',
+    statBorder: isDark ? 'rgba(255,255,255,0.04)' : 'rgba(15,23,42,0.1)',
+    statLabel: isDark ? 'rgba(255,255,255,0.55)' : '#64748b',
+    statValue: isDark ? '#ffffff' : '#0f172a',
+  }
+
   const formattedPrice = data.price.toLocaleString(undefined, {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
@@ -40,15 +72,15 @@ export default function StockCard({ data }: { data: StockData }) {
   return (
     <div
       style={{
-        background: 'rgba(255, 255, 255, 0.03)',
+        background: t.cardBg,
         backdropFilter: 'blur(16px)',
         WebkitBackdropFilter: 'blur(16px)',
-        color: '#ffffff',
+        color: t.cardText,
         borderRadius: '12px',
         padding: '16px 20px',
         margin: '12px 0',
-        boxShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.2)',
-        border: `1px solid ${isPositive ? 'rgba(16, 185, 129, 0.25)' : 'rgba(239, 68, 68, 0.25)'}`,
+        boxShadow: t.cardShadow,
+        border: `1px solid ${t.cardBorder}`,
         fontFamily: 'system-ui, -apple-system, sans-serif',
       }}
     >
@@ -56,22 +88,24 @@ export default function StockCard({ data }: { data: StockData }) {
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px' }}>
         <div>
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <h3 style={{ margin: 0, fontSize: '20px', fontWeight: 800, letterSpacing: '-0.3px' }}>{data.symbol}</h3>
+            <h3 style={{ margin: 0, fontSize: '20px', fontWeight: 800, letterSpacing: '-0.3px', color: t.cardText }}>
+              {data.symbol}
+            </h3>
             <span
               style={{
                 fontSize: '11px',
                 fontWeight: 700,
                 padding: '2px 6px',
                 borderRadius: '4px',
-                background: 'rgba(255, 255, 255, 0.08)',
-                color: 'rgba(255, 255, 255, 0.7)',
-                textTransform: 'uppercase',
+                background: t.tagBg,
+                color: t.tagColor,
+                textTransform: 'none',
               }}
             >
               {currency}
             </span>
           </div>
-          <p style={{ margin: '2px 0 0', fontSize: '13px', opacity: 0.7, fontWeight: 500 }}>{data.name}</p>
+          <p style={{ margin: '2px 0 0', fontSize: '13px', color: t.subText, fontWeight: 500 }}>{data.name}</p>
         </div>
 
         {/* Change Badge */}
@@ -95,9 +129,9 @@ export default function StockCard({ data }: { data: StockData }) {
       </div>
 
       {/* Main Price */}
-      <div style={{ marginBottom: '14px', borderBottom: '1px solid rgba(255, 255, 255, 0.06)', paddingBottom: '12px' }}>
+      <div style={{ marginBottom: '14px', borderBottom: `1px solid ${t.divider}`, paddingBottom: '12px' }}>
         <div style={{ display: 'flex', alignItems: 'baseline', gap: '4px' }}>
-          <span style={{ fontSize: '36px', fontWeight: 800, letterSpacing: '-1px' }}>
+          <span style={{ fontSize: '36px', fontWeight: 800, letterSpacing: '-1px', color: t.cardText }}>
             {currencySymbol}{formattedPrice}
           </span>
         </div>
@@ -105,28 +139,28 @@ export default function StockCard({ data }: { data: StockData }) {
 
       {/* Stats Grid */}
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '8px' }}>
-        <div style={{ background: 'rgba(255, 255, 255, 0.04)', borderRadius: '8px', padding: '8px 10px', border: '1px solid rgba(255, 255, 255, 0.04)' }}>
-          <p style={{ margin: 0, fontSize: '10px', opacity: 0.6, textTransform: 'uppercase' }}>Day High</p>
-          <p style={{ margin: '2px 0 0', fontSize: '12px', fontWeight: 700 }}>
+        <div style={{ background: t.statBg, borderRadius: '8px', padding: '8px 10px', border: `1px solid ${t.statBorder}` }}>
+          <p style={{ margin: 0, fontSize: '10px', color: t.statLabel, textTransform: 'none' }}>Day high</p>
+          <p style={{ margin: '2px 0 0', fontSize: '12px', fontWeight: 700, color: t.statValue }}>
             {data.dayHigh ? `${currencySymbol}${data.dayHigh.toFixed(2)}` : 'N/A'}
           </p>
         </div>
 
-        <div style={{ background: 'rgba(255, 255, 255, 0.04)', borderRadius: '8px', padding: '8px 10px', border: '1px solid rgba(255, 255, 255, 0.04)' }}>
-          <p style={{ margin: 0, fontSize: '10px', opacity: 0.6, textTransform: 'uppercase' }}>Day Low</p>
-          <p style={{ margin: '2px 0 0', fontSize: '12px', fontWeight: 700 }}>
+        <div style={{ background: t.statBg, borderRadius: '8px', padding: '8px 10px', border: `1px solid ${t.statBorder}` }}>
+          <p style={{ margin: 0, fontSize: '10px', color: t.statLabel, textTransform: 'none' }}>Day low</p>
+          <p style={{ margin: '2px 0 0', fontSize: '12px', fontWeight: 700, color: t.statValue }}>
             {data.dayLow ? `${currencySymbol}${data.dayLow.toFixed(2)}` : 'N/A'}
           </p>
         </div>
 
-        <div style={{ background: 'rgba(255, 255, 255, 0.04)', borderRadius: '8px', padding: '8px 10px', border: '1px solid rgba(255, 255, 255, 0.04)' }}>
-          <p style={{ margin: 0, fontSize: '10px', opacity: 0.6, textTransform: 'uppercase' }}>Mkt Cap</p>
-          <p style={{ margin: '2px 0 0', fontSize: '12px', fontWeight: 700 }}>{formatLargeNum(data.marketCap)}</p>
+        <div style={{ background: t.statBg, borderRadius: '8px', padding: '8px 10px', border: `1px solid ${t.statBorder}` }}>
+          <p style={{ margin: 0, fontSize: '10px', color: t.statLabel, textTransform: 'none' }}>Market cap</p>
+          <p style={{ margin: '2px 0 0', fontSize: '12px', fontWeight: 700, color: t.statValue }}>{formatLargeNum(data.marketCap)}</p>
         </div>
 
-        <div style={{ background: 'rgba(255, 255, 255, 0.04)', borderRadius: '8px', padding: '8px 10px', border: '1px solid rgba(255, 255, 255, 0.04)' }}>
-          <p style={{ margin: 0, fontSize: '10px', opacity: 0.6, textTransform: 'uppercase' }}>Volume</p>
-          <p style={{ margin: '2px 0 0', fontSize: '12px', fontWeight: 700 }}>{formatLargeNum(data.volume)}</p>
+        <div style={{ background: t.statBg, borderRadius: '8px', padding: '8px 10px', border: `1px solid ${t.statBorder}` }}>
+          <p style={{ margin: 0, fontSize: '10px', color: t.statLabel, textTransform: 'none' }}>Volume</p>
+          <p style={{ margin: '2px 0 0', fontSize: '12px', fontWeight: 700, color: t.statValue }}>{formatLargeNum(data.volume)}</p>
         </div>
       </div>
     </div>

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

@@ -173,7 +173,7 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
             M
           </div>
           <div>
-            <div style={{ fontWeight: 600, fontSize: '0.88rem', color: '#f3f4f6' }}>Main Orchestrator</div>
+            <div style={{ fontWeight: 600, fontSize: '0.88rem', color: '#f3f4f6' }}>Main orchestrator</div>
             <div style={{ fontSize: '0.72rem', color: isLive ? '#10b981' : '#9ca3af', display: 'flex', alignItems: 'center', gap: '4px' }}>
               <span
                 style={{
@@ -246,7 +246,7 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
                       fontWeight: 600,
                       padding: '2px 6px',
                       borderRadius: '4px',
-                      textTransform: 'uppercase',
+                      textTransform: 'none',
                       background: `${statusColor}22`,
                       color: statusColor,
                       border: `1px solid ${statusColor}44`,
@@ -302,7 +302,7 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
               <span style={{ fontWeight: 600, fontSize: '0.86rem', color: '#10b981' }}>
                 Subagent Activity: {activeSubagent.name}
               </span>
-              <span style={{ fontSize: '0.75rem', color: '#94a3b8' }}>({activeSubagent.tools.length} steps)</span>
+              <span style={{ fontSize: '0.75rem', color: '#94a3b8' }}>({activeSubagent.tools.length})</span>
             </div>
             <button
               type="button"
@@ -333,7 +333,7 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
               >
                 <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '4px' }}>
                   <span style={{ fontWeight: 600, color: '#38bdf8' }}>{tool.action}</span>
-                  {tool.isError && <span style={{ color: '#f87171', fontWeight: 600 }}>FAILED</span>}
+                  {tool.isError && <span style={{ color: '#f87171', fontWeight: 600 }}>Failed</span>}
                 </div>
                 {tool.input && (
                   <pre

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

@@ -0,0 +1,241 @@
+import { useCallback, useEffect, useRef, useState, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent } from 'react'
+import { invoke } from '@tauri-apps/api/core'
+import { listen } from '@tauri-apps/api/event'
+import { FitAddon } from '@xterm/addon-fit'
+import { Terminal } from '@xterm/xterm'
+import '@xterm/xterm/css/xterm.css'
+
+interface TerminalDockProps {
+  visible: boolean
+  page?: boolean
+  size: number
+  cwd?: string | null
+  onClose: () => void
+  onResize: (size: number) => void
+}
+
+export default function TerminalDock({ visible, page = false, size, cwd, onClose, onResize }: TerminalDockProps) {
+  const hostRef = useRef<HTMLDivElement>(null)
+  const terminalRef = useRef<Terminal | null>(null)
+  const fitRef = useRef<FitAddon | null>(null)
+  const sessionRef = useRef<string | null>(null)
+  const decoderRef = useRef(new TextDecoder())
+  const resizeCleanupRef = useRef<(() => void) | null>(null)
+  const [resizing, setResizing] = useState(false)
+  const [terminalReady, setTerminalReady] = useState(false)
+
+  // Let the tab/header paint before xterm allocates its canvas, measurements,
+  // and event listeners. This keeps opening a terminal responsive on slower
+  // machines while the shell starts immediately after the first frame.
+  useEffect(() => {
+    const frame = window.requestAnimationFrame(() => setTerminalReady(true))
+    return () => window.cancelAnimationFrame(frame)
+  }, [])
+
+  const clampSize = useCallback((next: number) => {
+    const min = 280
+    const max = Math.max(min, Math.min(900, window.innerWidth - 560))
+    return Math.round(Math.min(max, Math.max(min, next)))
+  }, [])
+
+  const startResize = (event: ReactMouseEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    const startCoordinate = event.clientX
+    const startSize = size
+    const previousCursor = document.body.style.cursor
+    const previousUserSelect = document.body.style.userSelect
+    document.body.style.cursor = 'col-resize'
+    document.body.style.userSelect = 'none'
+    setResizing(true)
+
+    const handleMove = (moveEvent: MouseEvent) => {
+      const current = moveEvent.clientX
+      onResize(clampSize(startSize + startCoordinate - current))
+    }
+    const handleUp = () => {
+      window.removeEventListener('mousemove', handleMove)
+      window.removeEventListener('mouseup', handleUp)
+      document.body.style.cursor = previousCursor
+      document.body.style.userSelect = previousUserSelect
+      resizeCleanupRef.current = null
+      setResizing(false)
+    }
+    resizeCleanupRef.current?.()
+    resizeCleanupRef.current = handleUp
+    window.addEventListener('mousemove', handleMove)
+    window.addEventListener('mouseup', handleUp)
+  }
+
+  const resizeWithKeyboard = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    const increase = event.key === 'ArrowLeft'
+    const decrease = event.key === 'ArrowRight'
+    if (!increase && !decrease) return
+    event.preventDefault()
+    onResize(clampSize(size + (increase ? 16 : -16)))
+  }
+
+  const lastColsRef = useRef(0)
+  const lastRowsRef = useRef(0)
+
+  const fit = useCallback(() => {
+    const terminal = terminalRef.current
+    const addon = fitRef.current
+    const sessionId = sessionRef.current
+    if (!terminal || !addon || !sessionId || !visible) return
+    try {
+      addon.fit()
+      if (terminal.cols === lastColsRef.current && terminal.rows === lastRowsRef.current) {
+        return
+      }
+      lastColsRef.current = terminal.cols
+      lastRowsRef.current = terminal.rows
+      void invoke('resize_interactive_terminal', {
+        sessionId,
+        cols: terminal.cols,
+        rows: terminal.rows,
+      }).catch((error) => terminal.write(`\r\n\x1b[31mTerminal resize failed: ${String(error)}\x1b[0m\r\n`))
+    } catch {
+      // The panel may briefly have zero size during a window transition.
+    }
+  }, [visible])
+
+  useEffect(() => {
+    if (!terminalReady) return
+    if (!hostRef.current) return
+    const terminal = new Terminal({
+      cursorBlink: true,
+      convertEol: true,
+      fontFamily: '"Fira Code", "Cascadia Code", monospace',
+      fontSize: 13,
+      theme: {
+        background: '#111318',
+        foreground: '#e5e7eb',
+        cursor: '#7dd3a7',
+        selectionBackground: '#365c4a',
+      },
+    })
+    const fitAddon = new FitAddon()
+    terminal.loadAddon(fitAddon)
+    terminal.open(hostRef.current)
+    terminalRef.current = terminal
+    fitRef.current = fitAddon
+
+    const dataListener = terminal.onData((data) => {
+      const sessionId = sessionRef.current
+      if (sessionId) void invoke('write_interactive_terminal', { sessionId, data })
+    })
+    let unlistenOutput: (() => void) | undefined
+    let unlistenExit: (() => void) | undefined
+    let mounted = true
+    void listen<{ sessionId: string; data: string }>('terminal-output', (event) => {
+      if (event.payload.sessionId === sessionRef.current) {
+        const bytes = Uint8Array.from(atob(event.payload.data), (char) => char.charCodeAt(0))
+        terminal.write(decoderRef.current.decode(bytes, { stream: true }))
+      }
+    }).then((unlisten) => {
+      if (mounted) unlistenOutput = unlisten
+      else unlisten()
+    })
+    void listen<{ sessionId: string; exitCode: number | null }>('terminal-exit', (event) => {
+      if (event.payload.sessionId === sessionRef.current) {
+        const trailingText = decoderRef.current.decode()
+        if (trailingText) terminal.write(trailingText)
+        sessionRef.current = null
+        terminal.write(`\r\n\x1b[90m[process exited${event.payload.exitCode == null ? '' : ` with code ${event.payload.exitCode}`} ]\x1b[0m\r\n`)
+      }
+    }).then((unlisten) => {
+      if (mounted) unlistenExit = unlisten
+      else unlisten()
+    })
+
+    return () => {
+      mounted = false
+      dataListener.dispose()
+      unlistenOutput?.()
+      unlistenExit?.()
+      if (sessionRef.current) void invoke('stop_interactive_terminal', { sessionId: sessionRef.current })
+      sessionRef.current = null
+      terminal.dispose()
+      terminalRef.current = null
+      fitRef.current = null
+    }
+  }, [terminalReady])
+
+  useEffect(() => {
+    if (!terminalReady || !visible || sessionRef.current) return
+    const terminal = terminalRef.current
+    if (!terminal) return
+    terminal.clear()
+    decoderRef.current = new TextDecoder()
+    terminal.write('\x1b[90mStarting shell…\x1b[0m\r\n')
+    let cancelled = false
+    void invoke<string>('start_interactive_terminal', { cwd: cwd || null }).then((sessionId) => {
+      if (cancelled) {
+        void invoke('stop_interactive_terminal', { sessionId })
+        return
+      }
+      sessionRef.current = sessionId
+      terminal.clear()
+      requestAnimationFrame(() => {
+        fitRef.current?.fit()
+        if (terminalRef.current) {
+          void invoke('resize_interactive_terminal', {
+            sessionId,
+            cols: terminal.cols,
+            rows: terminal.rows,
+          })
+          terminal.focus()
+        }
+      })
+    }).catch((error) => {
+      terminal.write(`\r\n\x1b[31mCould not start terminal: ${String(error)}\x1b[0m\r\n`)
+    })
+    return () => { cancelled = true }
+  }, [terminalReady, visible, cwd])
+
+  useEffect(() => {
+    if (!terminalReady || !visible || !hostRef.current) return
+    const observer = new ResizeObserver(fit)
+    observer.observe(hostRef.current)
+    const frame = window.requestAnimationFrame(() => {
+      fit()
+      terminalRef.current?.focus()
+    })
+    return () => {
+      observer.disconnect()
+      window.cancelAnimationFrame(frame)
+    }
+  }, [terminalReady, visible, fit])
+
+  useEffect(() => () => resizeCleanupRef.current?.(), [])
+
+  return (
+    <section
+      className={`terminal-dock is-right ${visible ? 'is-open' : ''} ${page ? 'is-page' : ''} ${resizing ? 'is-resizing' : ''}`}
+      style={{ '--terminal-dock-size': `${size}px` } as CSSProperties}
+      aria-hidden={!visible}
+    >
+      {visible && !page && (
+        <div
+          className="terminal-dock-resize-handle"
+          role="separator"
+          aria-label="Resize terminal width"
+          aria-orientation="vertical"
+          aria-valuenow={size}
+          tabIndex={0}
+          onMouseDown={startResize}
+          onKeyDown={resizeWithKeyboard}
+        />
+      )}
+      {!page && (
+        <header className="terminal-dock-header">
+          <div className="terminal-dock-title"><span className="terminal-dock-status" />Terminal{cwd ? <span className="terminal-dock-cwd">{cwd}</span> : null}</div>
+          <div className="terminal-dock-header-actions">
+            <button type="button" onClick={onClose} aria-label="Close terminal" title="Close terminal">×</button>
+          </div>
+        </header>
+      )}
+      <div className="terminal-dock-surface" ref={hostRef} />
+    </section>
+  )
+}

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

@@ -9,9 +9,10 @@ import { renderFormattedMessage } from '../utils/markdown'
 
 const THINKING_LABELS = {
   live: 'Thinking…',
-  completed: (count: number) => `Thinking process (${count} steps)`,
-  step: (index: number) => `Step ${index}`,
-  emptyHint: 'Model didn\'t send thinking steps this time',
+  completed: 'Thinking process',
+  extendedLive: 'Thinking…',
+  extendedCompleted: 'Thought',
+  emptyHint: 'No thoughts recorded',
 } as const
 
 interface Props {
@@ -21,6 +22,8 @@ interface Props {
   expanded?: boolean
   onExpandedChange?: (key: string, open: boolean) => void
   showEmptyHint?: boolean
+  /** 'default' for short agent thoughts, 'extended' for model reasoning tokens */
+  variant?: 'default' | 'extended'
 }
 
 export function ThinkingBlock({
@@ -30,6 +33,7 @@ export function ThinkingBlock({
   expanded,
   onExpandedChange,
   showEmptyHint = false,
+  variant = 'default',
 }: Props) {
   const contentRef = useRef<HTMLDivElement>(null)
   const isControlled = expanded !== undefined && Boolean(onExpandedChange)
@@ -60,8 +64,10 @@ export function ThinkingBlock({
     )
   }
 
+  const variantClass = variant === 'extended' ? ' is-extended' : ''
+
   return (
-    <div className={`thinking-block${isLive ? ' is-live' : ''}${isOpen ? ' is-expanded' : ''}`}>
+    <div className={`thinking-block${isLive ? ' is-live' : ''}${isOpen ? ' is-expanded' : ''}${variantClass}`}>
       <button
         type="button"
         className="thinking-block-header"
@@ -70,7 +76,10 @@ export function ThinkingBlock({
       >
         <Brain size={14} className="thinking-block-icon" style={{ flexShrink: 0 }} />
         <span className="thinking-block-label">
-          {isLive ? THINKING_LABELS.live : THINKING_LABELS.completed(thoughts.length)}
+          {variant === 'extended'
+            ? (isLive ? THINKING_LABELS.extendedLive : THINKING_LABELS.extendedCompleted)
+            : (isLive ? THINKING_LABELS.live : THINKING_LABELS.completed)
+          }
         </span>
         {isLive && <span className="thinking-block-live-dot" aria-hidden="true" />}
         <span className={`thinking-block-chevron${isOpen ? ' is-open' : ''}`} aria-hidden="true">
@@ -82,9 +91,6 @@ export function ThinkingBlock({
           <div className="thinking-block-content" ref={contentRef}>
             {thoughts.map((thought, index) => (
               <div className="thinking-block-step" key={`${blockKey}-${index}`}>
-                {thoughts.length > 1 && (
-                  <div className="thinking-block-step-label">{THINKING_LABELS.step(index + 1)}</div>
-                )}
                 <div className="thinking-block-step-body">{renderFormattedMessage(thought)}</div>
               </div>
             ))}

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

@@ -0,0 +1,32 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import ToolSurfacePage from './ToolSurfacePage'
+
+const noop = () => {}
+const props = {
+  surfaces: [], activeSurfaceId: null, terminalSize: 440,
+  onSelect: noop, onClose: noop, onCloseAll: noop, onDuplicate: noop,
+  onRename: noop, onCloseOthers: noop, onResizeTerminal: noop, onResizePanel: noop,
+  onOpenTerminal: noop, onOpenBrowser: noop, onOpenReview: noop, onOpenFiles: noop,
+  onOpenMods: noop, onOpenBackgroundTasks: noop, onClosePanel: noop,
+  onModsPanelTarget: noop, onBackgroundPanelTarget: noop,
+}
+
+describe('Tools launcher', () => {
+  it('makes workspace mods and running background tasks discoverable on its first screen', () => {
+    const html = renderToStaticMarkup(<ToolSurfacePage {...props} backgroundTaskCount={2} />)
+    expect(html).toMatch(/role="menuitem"[^>]*title="Workspace mods"/)
+    expect(html).toMatch(/role="menuitem"[^>]*title="Background tasks"/)
+    expect(html).toContain('2 active background tasks')
+    expect(html).toContain('Integrated terminal')
+  })
+
+  it('does not offer a native shell or desktop workspace on the web', () => {
+    const html = renderToStaticMarkup(<ToolSurfacePage {...props} desktopTools={false} />)
+    expect(html).toContain('Workspace mods')
+    expect(html).toContain('Background tasks')
+    expect(html).not.toContain('Integrated terminal')
+    expect(html).not.toContain('Workspace files')
+  })
+})