@pheem49/mint 1.15.0 → 1.17.0

package/src/renderer/shared/components/chat/ApprovalCard.tsx

@@ -0,0 +1,347 @@
+/**
+ * shared/components/ApprovalCard.tsx
+ * Claude Desktop styled interactive Choice Cards for tool & action approvals.
+ * Shared by both Desktop and Web ChatPanel — do NOT duplicate this.
+ */
+import React, { useState, useEffect } from 'react'
+import { renderApprovalDetails, renderDiff } from '../../utils/approval'
+import { DiffReviewModal } from './DiffReviewModal'
+
+interface Props {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  pendingApproval: any
+  onApproval: (approved: boolean, autoApproveSession?: boolean, answer?: string) => void
+  key?: any
+}
+
+interface AskUserOption {
+  label: string
+  description?: string
+}
+
+export function ApprovalCard({ pendingApproval, onApproval }: Props) {
+  const [askAnswer, setAskAnswer] = useState('')
+  const [selectedOptions, setSelectedOptions] = useState<Set<string>>(new Set())
+  const [showDiffModal, setShowDiffModal] = useState(false)
+
+  const details = renderApprovalDetails(pendingApproval.approval)
+  const writeFile = pendingApproval.approval?.WriteFile
+  const applyPatch = pendingApproval.approval?.ApplyPatch
+  const skillWrite = pendingApproval.approval?.SkillWrite
+  const runShell = pendingApproval.approval?.RunShell
+  const targetFilePath = skillWrite?.path || writeFile?.path || applyPatch?.path || 'Code Change'
+  const diffText = skillWrite?.diff || writeFile?.diff || applyPatch?.diff
+  const isAskUser = !!pendingApproval.approval?.AskUser
+  const mcpTool = pendingApproval.approval?.McpTool
+  const MCP_ALLOW_ALL_SENTINEL = '__mcp_allow_all__'
+  const askOptions: AskUserOption[] = Array.isArray(pendingApproval.approval?.AskUser?.options)
+    ? pendingApproval.approval.AskUser.options
+    : []
+  const isMultiSelect = !!pendingApproval.approval?.AskUser?.multiSelect
+  const askHeader: string | undefined = pendingApproval.approval?.AskUser?.header || undefined
+
+  const buildMultiSelectAnswer = () => {
+    const joined = Array.from(selectedOptions).join(', ')
+    const freeText = askAnswer.trim()
+    if (!freeText) return joined
+    return joined ? `${joined} — ${freeText}` : freeText
+  }
+
+  const toggleOption = (label: string) => {
+    setSelectedOptions((prev) => {
+      const next = new Set(prev)
+      if (next.has(label)) next.delete(label)
+      else next.add(label)
+      return next
+    })
+  }
+
+  // Get badge label based on action type
+  const getToolMeta = () => {
+    if (skillWrite) return { badge: 'Skill Change', badgeClass: 'edit' }
+    if (runShell) return { badge: 'Run Command', badgeClass: details.isDangerous ? 'dangerous' : 'command' }
+    if (writeFile || applyPatch) return { badge: 'File Edit', badgeClass: 'edit' }
+    if (mcpTool) return { badge: `MCP: ${mcpTool.server}`, badgeClass: 'mcp' }
+    if (isAskUser) return { badge: askHeader || 'Question', badgeClass: 'question' }
+    return { badge: 'Action Approval', badgeClass: details.isDangerous ? 'dangerous' : 'default' }
+  }
+
+  const toolMeta = getToolMeta()
+
+  // Standard non-AskUser choices
+  const actionChoices = skillWrite
+    ? [
+        { key: '1', title: 'Allow once', variant: 'approve', action: () => onApproval(true, false) },
+        { key: '2', title: 'Reject', variant: 'cancel', action: () => onApproval(false) },
+      ]
+    : mcpTool
+    ? [
+        {
+          key: '1',
+          title: 'Allow once',
+          variant: 'approve',
+          action: () => onApproval(true, false),
+        },
+        {
+          key: '2',
+          title: `Always allow for "${mcpTool.server}"`,
+          variant: 'session',
+          action: () => onApproval(true, false, MCP_ALLOW_ALL_SENTINEL),
+        },
+        {
+          key: '3',
+          title: 'Reject',
+          variant: 'cancel',
+          action: () => onApproval(false),
+        },
+      ]
+    : [
+        {
+          key: '1',
+          title: 'Allow once',
+          variant: 'approve',
+          action: () => onApproval(true, false),
+        },
+        {
+          key: '2',
+          title: 'Always allow for this session',
+          variant: 'session',
+          action: () => onApproval(true, true),
+        },
+        {
+          key: '3',
+          title: 'Reject',
+          variant: 'cancel',
+          action: () => onApproval(false),
+        },
+      ]
+
+  // Keyboard shortcut listener for numbers (1, 2, 3...) when not inside an input
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const activeEl = document.activeElement as HTMLElement | null
+      if (
+        activeEl &&
+        (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA' || activeEl.isContentEditable)
+      ) {
+        return
+      }
+
+      if (!isAskUser) {
+        const num = parseInt(e.key, 10)
+        if (!isNaN(num) && num >= 1 && num <= actionChoices.length) {
+          e.preventDefault()
+          actionChoices[num - 1].action()
+        }
+      } else if (!isMultiSelect && askOptions.length > 0) {
+        const num = parseInt(e.key, 10)
+        if (!isNaN(num) && num >= 1 && num <= askOptions.length) {
+          e.preventDefault()
+          onApproval(true, false, askOptions[num - 1].label)
+        }
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isAskUser, isMultiSelect, askOptions, actionChoices])
+
+  return (
+    <div className="message ai-message" style={{ width: '100%' }}>
+      <div className="bubble-wrapper" style={{ width: '100%' }}>
+        <div
+          className="action-card approval-card"
+          data-tier={details.isDangerous ? 'dangerous' : undefined}
+          style={{ width: '100%', alignItems: 'stretch', textAlign: 'left' }}
+        >
+          {/* Card Header */}
+          <div className="approval-card-header" style={{ width: '100%', textAlign: 'left' }}>
+            <div className="approval-title-group" style={{ textAlign: 'left' }}>
+              <div className="approval-title-text" style={{ textAlign: 'left' }}>{details.title}</div>
+            </div>
+            <span className={`approval-badge-chip ${toolMeta.badgeClass}`}>
+              {toolMeta.badge}
+            </span>
+          </div>
+
+          {/* Action / Question Content */}
+          {diffText ? (
+            <div className="approval-card-diff-container" style={{ width: '100%' }}>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
+                <span style={{ fontSize: '0.82rem', fontWeight: 600, color: 'var(--text-soft, #a1a1aa)' }}>
+                  Diff: <code style={{ color: 'var(--text-main, #f4f4f5)' }}>{targetFilePath}</code>
+                </span>
+                <button
+                  type="button"
+                  className="management-action-btn"
+                  onClick={() => setShowDiffModal(true)}
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    padding: '4px 10px',
+                    fontSize: '0.75rem',
+                    borderRadius: '8px',
+                    background: 'var(--accent-subtle)',
+                    border: '1px solid var(--accent-border)',
+                    color: 'var(--interactive-fg)',
+                    cursor: 'pointer',
+                  }}
+                >
+                  Review Side-by-Side
+                </button>
+              </div>
+              {renderDiff(diffText)}
+            </div>
+          ) : (
+            <div className={`approval-content-box ${isAskUser ? 'question-text' : ''}`}>
+              {details.body}
+            </div>
+          )}
+
+          {details.reason && !diffText && (
+            <div className="approval-reason-text">{details.reason}</div>
+          )}
+
+          {/* Claude Desktop Choice Cards Stack */}
+          {isAskUser ? (
+            <div className="claude-choice-stack">
+              {askOptions.length > 0 && (
+                <div className="claude-choice-options">
+                  {askOptions.map((option, i) => {
+                    const isSelected = isMultiSelect && selectedOptions.has(option.label)
+                    return (
+                      <button
+                        key={i}
+                        type="button"
+                        className={`claude-choice-card ${isSelected ? 'selected' : ''}`}
+                        onClick={() =>
+                          isMultiSelect
+                            ? toggleOption(option.label)
+                            : onApproval(true, false, option.label)
+                        }
+                      >
+                        <div className="claude-choice-left">
+                          <span className="claude-choice-key">{i + 1}</span>
+                          <div className="claude-choice-text">
+                            <span className="claude-choice-title">{option.label}</span>
+                            {option.description && (
+                              <span className="claude-choice-desc">{option.description}</span>
+                            )}
+                          </div>
+                        </div>
+                        <div className="claude-choice-right">
+                          {isMultiSelect ? (
+                            <span style={{ fontSize: '1.1rem', color: isSelected ? 'var(--interactive-fg)' : 'var(--text-muted)' }}>
+                              {isSelected ? '☑' : '☐'}
+                            </span>
+                          ) : (
+                            <span style={{ fontSize: '1rem', opacity: 0.6 }}>›</span>
+                          )}
+                        </div>
+                      </button>
+                    )
+                  })}
+                </div>
+              )}
+
+              {/* Custom Answer Input Box */}
+              <div className="claude-choice-custom-box">
+                <div style={{ display: 'flex', gap: 8, alignItems: 'center', width: '100%' }}>
+                  <input
+                    type="text"
+                    className="claude-choice-input"
+                    placeholder={
+                      askOptions.length > 0
+                        ? 'Or type custom response (press Enter to submit)...'
+                        : 'Type your response (press Enter to submit)...'
+                    }
+                    value={askAnswer}
+                    onChange={(e) => setAskAnswer(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault()
+                        if (isMultiSelect) {
+                          onApproval(true, false, buildMultiSelectAnswer())
+                        } else if (askAnswer.trim()) {
+                          onApproval(true, false, askAnswer.trim())
+                        }
+                      }
+                    }}
+                  />
+                  {(isMultiSelect || askAnswer.trim()) && (
+                    <button
+                      type="button"
+                      className="approval-btn approval-btn-approve"
+                      style={{ whiteSpace: 'nowrap', padding: '9px 16px', borderRadius: '8px' }}
+                      disabled={isMultiSelect ? selectedOptions.size === 0 && !askAnswer.trim() : !askAnswer.trim()}
+                      onClick={() =>
+                        onApproval(true, false, isMultiSelect ? buildMultiSelectAnswer() : askAnswer.trim())
+                      }
+                    >
+                      Submit
+                    </button>
+                  )}
+                </div>
+              </div>
+
+              {/* Decline Choice Card */}
+              <button
+                type="button"
+                className="claude-choice-card variant-cancel"
+                onClick={() => onApproval(false)}
+                style={{ marginTop: 2 }}
+              >
+                <div className="claude-choice-left">
+                  <span className="claude-choice-key">✕</span>
+                  <div className="claude-choice-text">
+                    <span className="claude-choice-title">Decline / Skip</span>
+                  </div>
+                </div>
+                <div className="claude-choice-right">›</div>
+              </button>
+            </div>
+          ) : (
+            <div className="claude-choice-stack">
+              {actionChoices.map((choice) => (
+                <button
+                  key={choice.key}
+                  type="button"
+                  className={`claude-choice-card variant-${choice.variant}`}
+                  onClick={choice.action}
+                >
+                  <div className="claude-choice-left">
+                    <span className="claude-choice-key">{choice.key}</span>
+                    <div className="claude-choice-text">
+                      <span className="claude-choice-title">{choice.title}</span>
+                    </div>
+                  </div>
+                  <div className="claude-choice-right">›</div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {showDiffModal && diffText && (
+        <DiffReviewModal
+          isOpen={showDiffModal}
+          onClose={() => setShowDiffModal(false)}
+          filePath={targetFilePath}
+          diffText={diffText}
+          isDangerous={details.isDangerous}
+          onApprove={() => {
+            setShowDiffModal(false)
+            onApproval(true)
+          }}
+          onReject={() => {
+            setShowDiffModal(false)
+            onApproval(false)
+          }}
+        />
+      )}
+    </div>
+  )
+}
+

package/src/renderer/shared/components/chat/ChatCodeBlock.tsx

@@ -0,0 +1,109 @@
+/**
+ * shared/components/ChatCodeBlock.tsx
+ * Syntax-highlighted code block with copy + download actions.
+ * Shared by both Desktop and Web ChatPanel — do NOT duplicate this.
+ */
+import { memo, useState, useMemo } from 'react'
+import { renderHighlightedCode } from '../../utils/syntaxHighlight'
+
+interface Props {
+  code: string
+  language: string
+  key?: any
+}
+
+export const ChatCodeBlock = memo(function ChatCodeBlock({ code, language }: Props) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy code: ', err)
+    }
+  }
+
+  const handleDownload = () => {
+    try {
+      const blob = new Blob([code], { type: 'text/plain;charset=utf-8' })
+      const url = URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = url
+      const ext = language === 'plaintext' || !language ? 'txt' : language.toLowerCase()
+      link.download = `code.${ext}`
+      link.click()
+      URL.revokeObjectURL(url)
+    } catch (err) {
+      console.error('Failed to download code: ', err)
+    }
+  }
+
+  const cleanLang = (language || 'plaintext').toLowerCase().trim()
+  const displayLang = cleanLang === 'plaintext' ? 'text' : cleanLang
+
+  const lineCount = useMemo(() => {
+    if (!code) return 1
+    return code.split('\n').length
+  }, [code])
+
+  const showLineNumbers = lineCount > 1
+  const highlightedCode = useMemo(
+    () => renderHighlightedCode(code, cleanLang, showLineNumbers),
+    [code, cleanLang, showLineNumbers],
+  )
+
+  return (
+    <div className="chat-code-block-container" style={{ whiteSpace: 'normal' }}>
+      <div className="chat-code-block-header">
+        <div className="chat-code-block-meta">
+          <span className="chat-code-block-lang">{displayLang}</span>
+          {lineCount > 3 && (
+            <span className="chat-code-block-lines">{lineCount} lines</span>
+          )}
+        </div>
+        <div className="chat-code-block-actions">
+          <button
+            type="button"
+            onClick={handleDownload}
+            title="Download code"
+            className="chat-code-action-btn chat-code-download-btn"
+          >
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="7 10 12 15 17 10" />
+              <line x1="12" y1="15" x2="12" y2="3" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            onClick={handleCopy}
+            title="Copy code"
+            className={`chat-code-action-btn chat-code-copy-btn ${copied ? 'is-copied' : ''}`}
+          >
+            {copied ? (
+              <>
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+                <span className="chat-code-btn-label">Copied!</span>
+              </>
+            ) : (
+              <>
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                </svg>
+                <span className="chat-code-btn-label">Copy</span>
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+      <pre className="chat-code-block-body">
+        <code>{highlightedCode}</code>
+      </pre>
+    </div>
+  )
+})

package/src/renderer/shared/components/chat/ChatMessageItem.test.tsx

@@ -0,0 +1,145 @@
+/// <reference path="../../env.d.ts" />
+import { describe, expect, it, vi } from 'vitest'
+// @ts-ignore react-dom/server lacks types without @types/react-dom
+import { renderToStaticMarkup } from 'react-dom/server'
+import { FormattedMessage } from '../../utils/markdown'
+import ChatMessageItem, { type ChatMessageItemProps } from './ChatMessageItem'
+import { TurnFileChanges } from './TurnFileChanges'
+import type { AgentProgress } from '../../types'
+import { compactAgentProgressForPersistence, reduceLiveAgentProgress } from '../../agentProgress'
+
+const action = () => {}
+const base: ChatMessageItemProps = {
+  interaction: { id: 7, status: 'completed', aiText: 'Ready', userText: 'Hello', createdAt: '2026-10-10T00:00:00Z' },
+  copiedId: null,
+  speakingText: null,
+  agentActivitySnapshots: {},
+  handleCopyMessage: action,
+  speak: action,
+  toggleActivity: action,
+}
+const unchanged = (next: Partial<ChatMessageItemProps>) => (ChatMessageItem as any).compare(base, { ...base, ...next })
+
+it('does not render duplicate completion status pills in message bubble', () => {
+  const progress: any[] = [{ type: 'RunCompleted', data: { summary: { outcome: 'UNVERIFIED' } } }]
+  const html = renderToStaticMarkup(<ChatMessageItem {...base} interaction={{ ...base.interaction, agentActivity: progress }} />)
+  expect(html).not.toContain('data-completion-status')
+})
+
+it('renders provider brand logo instead of a plain colored dot in provider-model-chip', () => {
+  const html = renderToStaticMarkup(
+    <ChatMessageItem
+      {...base}
+      interaction={{
+        ...base.interaction,
+        status: 'completed',
+        provider: 'deepseek',
+        model: 'deepseek-flash',
+      }}
+    />
+  )
+  expect(html).toContain('provider-model-chip')
+  expect(html).toContain('provider-chip-logo')
+  expect(html).toContain('deepseek')
+  expect(html).toContain('deepseek-flash')
+  expect(html).not.toContain('provider-chip-dot')
+})
+
+describe('message update isolation and TurnFileChanges deep module', () => {
+  it('updates only the message whose activity drawer state or snapshot changed', () => {
+    expect(unchanged({ openActivityIds: { '8': true } })).toBe(true)
+    expect(unchanged({ openActivityIds: { '7': true } })).toBe(false)
+  })
+  it('renders TurnFileChanges summary and show-more button when >3 files changed', () => {
+    const changes = [1, 2, 3, 4].map((i) => ({
+      path: `src/file-${i}.ts`,
+      created: i === 1,
+      additions: 5,
+      deletions: 1,
+      hunks: [{ oldText: 'old', newText: 'new' }],
+    }))
+    const html = renderToStaticMarkup(<TurnFileChanges changes={changes} />)
+    expect(html).toContain('1 created, 3 modified')
+    expect(html).toContain('Show 1 more file')
+  })
+  it('does not retain stale user actions', () => {
+    expect(unchanged({ onEditMessage: () => {} })).toBe(false)
+  })
+})
+
+describe('pasted message line breaks on Desktop and Web', () => {
+  it('renders CR-only bullet lines from TUI history as separate list items', () => {
+    const html = renderToStaticMarkup(<FormattedMessage text={'Token weather\r\r• ☀ Clear\r• 134.4k / 200k\r• ▲ +98.3k last turn'} />)
+    expect(html.match(/class="chat-list-item chat-bullet-item"/g) ?? []).toHaveLength(3)
+    expect(html).toContain('☀ Clear')
+    expect(html).toContain('▲ +98.3k last turn')
+  })
+})
+
+describe('view_image results on Desktop and Web', () => {
+  const image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+jRZkAAAAASUVORK5CYII='
+  const progress: AgentProgress[] = [
+    { type: 'ToolStart', data: { callId: 'view-1', action: 'view_image', input: { path: '/workspace/screens/mobile.png' } } },
+    { type: 'ToolEnd', data: { callId: 'view-1', action: 'view_image', input: { path: '/workspace/screens/mobile.png' }, result: `${image}\n\n[Hook] Image inspected` } },
+    { type: 'ToolEnd', data: { action: 'view_image', input: { path: '/private/denied.png' }, status: 'failed', result: image } },
+    { type: 'ToolEnd', data: { action: 'read_file', input: { path: 'note.txt' }, result: image } },
+  ]
+  it.each(['completed', 'failed', 'interrupted'])('keeps viewed images visible in %s history with Activity collapsed', status => {
+    const saved = JSON.parse(JSON.stringify(compactAgentProgressForPersistence(progress)))
+    const html = renderToStaticMarkup(<ChatMessageItem {...base} interaction={{ ...base.interaction, status, agentActivity: saved }} />)
+    expect(html).toContain(`src="${image}"`)
+    expect(html).toContain('alt="Viewed image: mobile.png"')
+    expect(html).toContain('aria-label="Expand mobile.png"')
+    expect(html.match(/data-viewed-image=/g)).toHaveLength(1)
+    expect(html).not.toContain('Expand denied.png')
+  })
+  it('keeps a viewed image after many later tools complete in the same run', () => {
+    const later: AgentProgress[] = Array.from({ length: 40 }, (_, index) => ({ type: 'ToolEnd', data: { action: 'read_file', input: { path: `file-${index}.md` }, result: 'Read' } }))
+    const live = [...progress, ...later].reduce(reduceLiveAgentProgress, [] as AgentProgress[])
+    const html = renderToStaticMarkup(<ChatMessageItem {...base} agentActivitySnapshots={{ '7': live }} />)
+    expect(html).toContain('aria-label="Expand mobile.png"')
+  })
+  it.each(['https://example.com/private.png', 'data:text/html;base64,PHNjcmlwdD4=', 'data:image/png;base64,%%%invalid', 'Error: cannot read image', 'Image exists but is too large to inline'])('does not embed an unavailable or non-image result: %s', result => {
+    const html = renderToStaticMarkup(<ChatMessageItem {...base} interaction={{ ...base.interaction, agentActivity: [{ type: 'ToolEnd', data: { action: 'view_image', input: { path: 'unavailable.png' }, result } }] }} />)
+    expect(html).not.toContain('data-viewed-image=')
+  })
+  it('forwards onOpenArtifact to viewed image preview trigger', () => {
+    const onOpenArtifact = vi.fn()
+    const saved = JSON.parse(JSON.stringify(compactAgentProgressForPersistence(progress)))
+    const html = renderToStaticMarkup(
+      <ChatMessageItem
+        {...base}
+        onOpenArtifact={onOpenArtifact}
+        interaction={{ ...base.interaction, status: 'completed', agentActivity: saved }}
+      />
+    )
+    expect(html).toContain('title="Open full image in Tools Surface"')
+    expect(html).toContain('aria-label="Expand mobile.png"')
+  })
+
+  it.each(['completed', 'failed', 'interrupted'] as const)(
+    'renders activity drawer for %s turns when progress exists',
+    (status) => {
+      const html = renderToStaticMarkup(
+        <ChatMessageItem
+          {...base}
+          interaction={{ ...base.interaction, status, agentActivity: progress }}
+        />
+      )
+      expect(html).toContain('agent-activity-history')
+      expect(html).toContain('agent-activity-toggle')
+    }
+  )
+
+  it('does not render historical activity drawer when queued or running', () => {
+    for (const status of ['queued', 'running'] as const) {
+      const html = renderToStaticMarkup(
+        <ChatMessageItem
+          {...base}
+          interaction={{ ...base.interaction, status, agentActivity: progress }}
+        />
+      )
+      expect(html).not.toContain('agent-activity-history')
+    }
+  })
+})