@pheem49/mint 1.8.1 → 1.8.2

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

@@ -0,0 +1,101 @@
+/**
+ * shared/components/ThinkingBlock.tsx
+ * Renders the collapsible reasoning thoughts block from the LLM.
+ * Shared by both Desktop and Web ChatPanel — do NOT duplicate this.
+ */
+import { useEffect, useRef, useState } from 'react'
+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',
+} as const
+
+interface Props {
+  thoughts: string[]
+  isLive?: boolean
+  blockKey: string
+  expanded?: boolean
+  onExpandedChange?: (key: string, open: boolean) => void
+  showEmptyHint?: boolean
+}
+
+export function ThinkingBlock({
+  thoughts,
+  isLive = false,
+  blockKey,
+  expanded,
+  onExpandedChange,
+  showEmptyHint = false,
+}: Props) {
+  const contentRef = useRef<HTMLDivElement>(null)
+  const isControlled = expanded !== undefined && Boolean(onExpandedChange)
+  const [localOpen, setLocalOpen] = useState(isLive)
+  const isOpen = isControlled ? Boolean(expanded) : localOpen
+
+  const setOpen = (open: boolean) => {
+    if (isControlled && onExpandedChange) onExpandedChange(blockKey, open)
+    else setLocalOpen(open)
+  }
+
+  useEffect(() => {
+    if (isLive && !isControlled) setLocalOpen(true)
+  }, [isLive, isControlled])
+
+  useEffect(() => {
+    if (!isLive || !isOpen || !contentRef.current) return
+    contentRef.current.scrollTop = contentRef.current.scrollHeight
+  }, [thoughts, isLive, isOpen])
+
+  if (thoughts.length === 0 && !showEmptyHint) return null
+
+  if (thoughts.length === 0) {
+    return (
+      <div className="thinking-block thinking-block-empty-state" data-live={isLive ? 'true' : 'false'}>
+        <span className="thinking-block-empty">{THINKING_LABELS.emptyHint}</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`thinking-block${isLive ? ' is-live' : ''}`}>
+      <button
+        type="button"
+        className="thinking-block-header"
+        onClick={() => setOpen(!isOpen)}
+        aria-expanded={isOpen}
+      >
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
+          <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" />
+          <circle cx="12" cy="12" r="10" />
+        </svg>
+        <span className="thinking-block-label">
+          {isLive ? THINKING_LABELS.live : THINKING_LABELS.completed(thoughts.length)}
+        </span>
+        {isLive && <span className="thinking-block-live-dot" aria-hidden="true" />}
+        <span className={`thinking-block-chevron${isOpen ? ' is-open' : ''}`} aria-hidden="true">
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </span>
+      </button>
+      {isOpen && (
+        <div className="thinking-block-body">
+          <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>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/renderer/shared/constants/models.ts

@@ -0,0 +1,91 @@
+/**
+ * shared/constants/models.ts
+ * Canonical AI model lists — single source of truth for both Desktop and Web renderers.
+ *
+ * To add or update models, edit only this file.
+ * Both src/components/ChatPanel.tsx and src-web/components/ChatPanel.tsx
+ * import from here via their respective re-export files.
+ */
+
+export const GEMINI_MODELS = [
+  'gemini-2.5-flash',
+  'gemini-2.5-pro',
+  'gemini-2.0-flash',
+  'gemini-2.0-flash-lite',
+  'gemini-1.5-flash',
+  'gemini-1.5-pro',
+] as const
+
+export const OPENAI_MODELS = [
+  'gpt-4.1',
+  'gpt-4.1-mini',
+  'gpt-4.1-nano',
+  'gpt-4o',
+  'gpt-4o-mini',
+  'o3',
+  'o4-mini',
+  'gpt-4-turbo',
+] as const
+
+export const ANTHROPIC_MODELS = [
+  'claude-sonnet-4-20250514',
+  'claude-opus-4-20250514',
+  'claude-haiku-35-20241022',
+  'claude-3-7-sonnet-latest',
+  'claude-3-5-sonnet-latest',
+  'claude-3-5-haiku-latest',
+] as const
+
+export const OPENROUTER_MODELS = [
+  'openai/gpt-4o-mini',
+  'openai/gpt-4o',
+  'anthropic/claude-sonnet-4',
+  'anthropic/claude-haiku-3.5',
+  'anthropic/claude-3.5-sonnet',
+  'anthropic/claude-3.5-haiku',
+  'google/gemini-2.5-flash',
+  'meta-llama/llama-3.3-70b-instruct',
+  'mistralai/mistral-large',
+] as const
+
+export const DEEPSEEK_MODELS = [
+  'deepseek-v4-flash',
+  'deepseek-v4-pro',
+  'deepseek-chat',
+  'deepseek-reasoner',
+] as const
+
+export const HF_MODELS = [
+  'meta-llama/Llama-3.3-70B-Instruct',
+  'meta-llama/Meta-Llama-3-8B-Instruct',
+  'meta-llama/Llama-3.2-3B-Instruct',
+  'Qwen/Qwen2.5-72B-Instruct',
+  'Qwen/Qwen2.5-Coder-32B-Instruct',
+  'Qwen/Qwen3-235B-A22B',
+  'mistralai/Mistral-Small-24B-Instruct-2501',
+  'mistralai/Mistral-7B-Instruct-v0.3',
+  'google/gemma-3-27b-it',
+  'google/gemma-2-9b-it',
+] as const
+
+export const LOCAL_MODELS = [
+  'local-model',
+  'Qwen/Qwen2.5-7B-Instruct-GGUF',
+  'meta-llama/Llama-3.2-3B-Instruct-GGUF',
+  'lmstudio-community/gemma-2-9b-it-GGUF',
+] as const
+
+/** Mutable list — populated at runtime via Ollama API */
+export const OLLAMA_MODELS: string[] = []
+
+/** Map from provider key → model list for easy lookup */
+export const PROVIDER_MODELS = {
+  gemini: GEMINI_MODELS,
+  openai: OPENAI_MODELS,
+  anthropic: ANTHROPIC_MODELS,
+  openrouter: OPENROUTER_MODELS,
+  deepseek: DEEPSEEK_MODELS,
+  huggingface: HF_MODELS,
+  local_openai: LOCAL_MODELS,
+  ollama: OLLAMA_MODELS,
+} as const

package/src/renderer/shared/platform.ts

@@ -0,0 +1,82 @@
+/**
+ * shared/platform.ts
+ * Unified platform API interface for both Desktop and Web renderers.
+ * Source of truth: Both tauri.ts files implement this API surface.
+ */
+import type {
+  RuntimeStatus,
+  ChatResponse,
+  TtsUrl,
+  InteractionMemory,
+  ChatSession,
+  PictureEntry,
+  ImageGenRequest,
+  ImageGenProviders,
+  ImageGenResponse,
+  WorkspaceTreeEntry,
+  CodeEdit,
+  CodeEditProposal,
+  DetectedTools,
+  LearnedSkill,
+  AgentProgress,
+} from './types'
+
+export interface MintPlatformApi {
+  getRuntimeStatus(): Promise<RuntimeStatus>
+  detectSystemTools(): Promise<DetectedTools>
+  sendChatMessage(
+    message: string,
+    imageDataUri?: string | null,
+    audioDataUri?: string | null,
+    documentAttachment?: any | null,
+    workspacePath?: string | null,
+    chatId?: string | null,
+    agentId?: string | null,
+  ): Promise<ChatResponse>
+  streamChatMessage(
+    message: string,
+    onChunk: (chunk: string) => void,
+    imageDataUri?: string | null,
+    audioDataUri?: string | null,
+    systemInstruction?: string,
+    onProgress?: (progress: AgentProgress) => void,
+    documentAttachment?: any | null,
+    workspacePath?: string | null,
+    chatId?: string | null,
+    agentId?: string | null,
+  ): Promise<ChatResponse>
+  getTtsUrls(text: string): Promise<TtsUrl[]>
+  cancelChatMessage(chatId: string): Promise<void>
+  getRecentInteractions(limit?: number, chatId?: string | null): Promise<InteractionMemory[]>
+  saveSystemInteraction(
+    chatId: string,
+    userText: string,
+    provider: string,
+    model: string,
+  ): Promise<any>
+
+  saveInteractionAgentActivity(interactionId: number, progress: any[]): Promise<void>
+  listChatSessions(): Promise<ChatSession[]>
+  deleteChatSession(chatId: string): Promise<number>
+  renameChatSession(chatId: string, newTitle: string): Promise<number>
+  getProfileValue(key: string): Promise<string>
+  setProfileValue(key: string, value: string): Promise<boolean>
+  listLearnedSkills(workspacePath?: string): Promise<LearnedSkill[]>
+  addLearnedSkill(name: string, content: string): Promise<LearnedSkill>
+  deleteLearnedSkill(name: string): Promise<number>
+  clearChatHistory(chatId?: string | null): Promise<number>
+  listSavedPictures(): Promise<PictureEntry[]>
+  generateImages(req: ImageGenRequest): Promise<ImageGenResponse>
+  getImageGenProviders(): Promise<ImageGenProviders>
+  setDefaultImageProvider(provider: string): Promise<boolean>
+  getWorkspaceTree(path?: string | null): Promise<WorkspaceTreeEntry>
+  createWorkspaceFile(path: string): Promise<void>
+  createWorkspaceFolder(path: string): Promise<void>
+  deleteWorkspaceItem(path: string): Promise<void>
+  selectWorkspaceDirectory(): Promise<string | null>
+  submitToolApproval(token: string, approved: boolean, answer?: string): Promise<void>
+  proposeCodeEdits(root: string, edits: CodeEdit[]): Promise<CodeEditProposal>
+  applyCodeEdits(root: string, edits: CodeEdit[], approvalToken: string): Promise<any>
+  listen<T>(event: string, handler: (event: { payload: T }) => void): Promise<() => void>
+  readClipboardImage(): Promise<string | null>
+}

package/src/renderer/shared/types.ts

@@ -0,0 +1,140 @@
+/**
+ * shared/types.ts
+ * Shared TypeScript interfaces and types for both Desktop and Web renderers.
+ * Source of truth: Import from here, not from local declarations in tauri.ts.
+ */
+
+export interface RuntimeStatus {
+  backend: string
+  configPath: string
+  activeProvider: string
+  availableProviders: string[]
+  integrations: Record<string, unknown>
+  localIp?: string
+}
+
+export interface ChatResponse {
+  provider: string
+  model: string
+  text: string
+  fallbackProvider?: string | null
+}
+
+export interface TtsUrl {
+  shortText: string
+  url: string
+}
+
+export interface DocumentAttachment {
+  filename: string
+  dataUri: string
+}
+
+export type AgentProgress =
+  | { type: 'Thinking'; data: { elapsed_secs: number; agent_name?: string; model_name?: string } }
+  | { type: 'Thought'; data: { thought: string } }
+  | { type: 'ToolStart'; data: { action: string; input: Record<string, unknown> } }
+  | { type: 'ToolEnd'; data: { action: string; input: Record<string, unknown>; result: string } }
+
+export interface InteractionMemory {
+  id: number
+  chatId: string
+  userText: string
+  aiText: string
+  provider: string
+  model: string
+  fallbackProvider?: string | null
+  createdAt: string
+  agentActivity?: AgentProgress[] | null
+}
+
+export interface ChatSession {
+  id: string
+  title: string
+  kind: string
+  createdAt: string
+  updatedAt: string
+}
+
+export interface PictureEntry {
+  id: string
+  filename: string
+  path: string
+  mimeType: string
+  createdAt: string
+  source: string
+  message: string
+  thumbnailPath?: string
+  url?: string
+  thumbnailUrl?: string
+}
+
+export interface ImageGenRequest {
+  prompt: string
+  negativePrompt?: string
+  aspectRatio?: '1:1' | '16:9' | '9:16' | '4:3'
+  numImages?: number
+  model?: string
+  provider?: string
+}
+
+export interface ImageGenProviders {
+  active: string
+  available: string[]
+}
+
+export interface ImageGenResponse {
+  images: PictureEntry[]
+  model: string
+  provider: string
+  prompt: string
+  description?: string | null
+}
+
+export interface CodeEdit {
+  path: string
+  content: string
+}
+
+export interface CodeEditProposal {
+  approvalRequired: boolean
+  approvalToken: string
+  edits: Array<{ path: string; existed: boolean; diff: string }>
+}
+
+export interface WorkspaceTreeEntry {
+  name: string
+  path: string
+  kind: 'file' | 'directory'
+  children: WorkspaceTreeEntry[]
+}
+
+export interface DetectedTools {
+  docker: boolean
+  git: boolean
+  gh: boolean
+  node: boolean
+}
+
+export interface LearnedSkill {
+  id: number
+  name: string
+  sourcePath: string
+  content: string
+  updatedAt: string
+  location?: string
+}
+
+export interface DiffHunk {
+  oldText: string
+  newText: string
+}
+
+export interface FileChange {
+  path: string
+  created: boolean
+  additions: number
+  deletions: number
+  hunks: DiffHunk[]
+}
+

package/src/renderer/shared/utils/agentActivity.ts

@@ -0,0 +1,187 @@
+/**
+ * shared/utils/agentActivity.ts
+ * Agent activity parsing and transformation logic.
+ * Shared by both Desktop and Web ChatPanel — do NOT duplicate this.
+ */
+import type { AgentProgress } from '../types'
+
+export interface AgentActivity {
+  label: string
+  target: string
+  kind: 'file' | 'folder' | 'search' | 'terminal' | 'tool'
+  state: 'active' | 'done' | 'error'
+  action?: string
+}
+
+export interface AgentActivityView {
+  summary: string
+  items: AgentActivity[]
+}
+
+function activityDetail(input: Record<string, unknown>, key: string): string {
+  const value = input[key]
+  return typeof value === 'string' && value.trim() ? value : ''
+}
+
+export function formatActivityTarget(value: string): string {
+  const compact = value.replace(/^\/home\/([^/]+)/, '~')
+  return compact || 'workspace'
+}
+
+export function activityKind(action: string, target: string): AgentActivity['kind'] {
+  if (['search_code', 'semantic_search', 'knowledge_search', 'web_search', 'memory_recall'].includes(action)) return 'search'
+  if (['run_shell', 'verify'].includes(action)) return 'terminal'
+  if (['list_files', 'detect_project'].includes(action)) return 'folder'
+  if (['read_file', 'symbols', 'read_diagnostics', 'git_diff', 'apply_patch', 'write_file', 'note_write', 'view_image'].includes(action)) return 'file'
+  return target.includes('/') && !/\.[^/]+$/.test(target) ? 'folder' : 'tool'
+}
+
+export function describeTool(action: string, input: Record<string, unknown>): AgentActivity {
+  const path = activityDetail(input, 'path')
+  const query = activityDetail(input, 'query')
+  const command = activityDetail(input, 'command')
+  const name = activityDetail(input, 'name')
+  const tool = activityDetail(input, 'tool')
+  const rawTarget = path || query || command || name || tool || action.replaceAll('_', ' ')
+
+  // Append line range for read_file when startLine / endLine are available
+  let target = rawTarget
+  if (action === 'read_file' && path) {
+    const startLine = typeof input.startLine === 'number' ? input.startLine : undefined
+    const endLine = typeof input.endLine === 'number' ? input.endLine : undefined
+    if (startLine !== undefined && endLine !== undefined) {
+      target = `${rawTarget} #L${startLine}-${endLine}`
+    } else if (startLine !== undefined) {
+      target = `${rawTarget} #L${startLine}`
+    }
+  }
+
+  const labels: Record<string, string> = {
+    apply_patch: 'Applying patch',
+    ask_user: 'Asking user',
+    create_plan: 'Creating plan',
+    detect_project: 'Detecting project',
+    git_branch: 'Reading branch',
+    git_diff: 'Reading diff',
+    git_log: 'Reading log',
+    git_status: 'Reading git status',
+    knowledge_search: 'Searching knowledge',
+    list_files: 'Listing files',
+    list_tests: 'Listing tests',
+    mcp_tool: 'Calling MCP tool',
+    memory_recall: 'Recalling memory',
+    note_write: 'Writing note',
+    read_diagnostics: 'Reading diagnostics',
+    read_file: 'Reading file',
+    request_user_approval: 'Requesting approval',
+    run_plugin: 'Running plugin',
+    run_shell: 'Running command',
+    search_code: 'Searching code',
+    semantic_index: 'Indexing code',
+    semantic_search: 'Searching code',
+    symbols: 'Inspecting symbols',
+    update_plan: 'Updating plan',
+    verify: 'Verifying',
+    view_image: 'Viewing image',
+    web_search: 'Searching web',
+    write_file: 'Writing file',
+  }
+  return {
+    label: labels[action] ?? 'Using tool',
+    target: formatActivityTarget(target),
+    kind: activityKind(action, target),
+    state: 'active',
+    action,
+  }
+}
+
+export function activitySummary(items: AgentActivity[]): string {
+  const files = new Set<string>()
+  const folders = new Set<string>()
+  for (const item of items) {
+    if (item.kind === 'file') files.add(item.target)
+    if (item.kind === 'folder') folders.add(item.target)
+  }
+  const parts = [
+    files.size ? `${files.size} ${files.size === 1 ? 'file' : 'files'}` : '',
+    folders.size ? `${folders.size} ${folders.size === 1 ? 'folder' : 'folders'}` : '',
+  ].filter(Boolean)
+  return parts.length ? `Exploring ${parts.join(', ')}` : 'Working through task'
+}
+
+export function activitiesFrom(progress: AgentProgress[]): AgentActivityView {
+  const activities: AgentActivity[] = []
+  for (const event of progress) {
+    if (event.type === 'ToolStart') {
+      activities.push(describeTool(event.data.action, event.data.input))
+    } else if (event.type === 'ToolEnd') {
+      for (let index = activities.length - 1; index >= 0; index -= 1) {
+        if (activities[index].state !== 'active') continue
+        activities[index].state = event.data.result.startsWith('Error:') ? 'error' : 'done'
+        if (activities[index].state === 'error') {
+          activities[index].label = 'Failed'
+        }
+        if (activities[index].action === 'ask_user' && event.data.result.startsWith('User answered:')) {
+          const answer = event.data.result.replace('User answered:', '').trim()
+          activities[index].target = `(Answered: "${answer}") ${activities[index].target}`
+        }
+        break
+      }
+    }
+  }
+  const items = activities.slice(-12)
+  return { summary: activitySummary(activities), items }
+}
+
+export interface WebSearchSource {
+  title: string
+  url: string
+  snippet: string
+  domain: string
+  faviconUrl: string
+}
+
+/**
+ * Scans AgentProgress events and extracts web search sources from ToolEnd results.
+ * Parses the formatted text produced by orchestration.rs for `web_search` actions.
+ */
+export function parseWebSearchSources(progress: AgentProgress[]): WebSearchSource[] {
+  const sources: WebSearchSource[] = []
+  for (const event of progress) {
+    if (event.type !== 'ToolEnd') continue
+    if (event.data.action !== 'web_search') continue
+
+    const result = event.data.result
+    if (!result || result.startsWith('Web search error:') || result === 'No web search results found.') continue
+
+    // Each result block looks like:
+    //   1. Title text
+    //      URL: https://example.com
+    //      Snippet text
+    const blocks = result.split(/\n\n+/)
+    for (const block of blocks) {
+      const lines = block.split('\n').map((l: string) => l.trim()).filter(Boolean)
+      const titleLine = lines.find((l: string) => /^\d+\.\s/.test(l))
+      const urlLine = lines.find((l: string) => l.startsWith('URL:'))
+      if (!titleLine || !urlLine) continue
+
+      const title = titleLine.replace(/^\d+\.\s/, '').trim()
+      const url = urlLine.replace(/^URL:\s*/, '').trim()
+      const snippet = lines
+        .filter((l: string) => l !== titleLine && l !== urlLine)
+        .join(' ')
+        .trim()
+
+      try {
+        const { hostname } = new URL(url)
+        const domain = hostname.replace(/^www\./, '')
+        const faviconUrl = `https://www.google.com/s2/favicons?sz=32&domain=${hostname}`
+        sources.push({ title, url, snippet, domain, faviconUrl })
+      } catch {
+        // skip malformed URLs
+      }
+    }
+  }
+  return sources
+}
+

package/src/renderer/shared/utils/approval.ts

@@ -0,0 +1 @@
+export * from './approval.tsx'

package/src/renderer/shared/utils/approval.tsx

@@ -0,0 +1,64 @@
+/**
+ * shared/utils/approval.tsx
+ * Approval detail parsing and diff rendering helpers.
+ * Shared by both Desktop and Web ChatPanel — do NOT duplicate this.
+ */
+import React, { type ReactNode } from 'react'
+
+
+export interface ApprovalDetails {
+  title: string
+  body: string
+  reason?: string
+  isDangerous: boolean
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function renderApprovalDetails(approval: any): ApprovalDetails {
+  if (!approval) return { title: 'Action Pending Approval', body: 'No action details available.', isDangerous: false }
+  if (approval.WriteFile) return { title: 'Write File', body: `Path: ${approval.WriteFile.path}`, reason: approval.WriteFile.diff ? `Diff:\n${approval.WriteFile.diff}` : 'Writing new file content.', isDangerous: false }
+  if (approval.ApplyPatch) return { title: 'Apply Patch', body: `Path: ${approval.ApplyPatch.path}`, reason: approval.ApplyPatch.diff ? `Diff:\n${approval.ApplyPatch.diff}` : 'Applying code patch.', isDangerous: false }
+  if (approval.RunShell) return { title: 'Run Shell Command', body: approval.RunShell.command, reason: 'Executing shell commands can modify your system.', isDangerous: true }
+  if (approval.NoteWrite) return { title: 'Write Note', body: `Path: ${approval.NoteWrite.path}`, reason: 'Creating or updating workspace notes.', isDangerous: false }
+  if (approval.RunPlugin) return { title: `Run Plugin: ${approval.RunPlugin.name}`, body: approval.RunPlugin.instruction, reason: 'Executing a native plugin action.', isDangerous: false }
+  if (approval.McpTool) {
+    const { server, tool, arguments: args } = approval.McpTool
+    return { title: `Run MCP Tool: ${server}/${tool}`, body: typeof args === 'string' ? args : JSON.stringify(args, null, 2), reason: 'Running external MCP tool.', isDangerous: false }
+  }
+  if (approval.UserApproval) return { title: approval.UserApproval.title, body: approval.UserApproval.prompt, reason: 'The agent requested explicit approval.', isDangerous: false }
+  if (approval.AskUser) return { title: 'Question From Agent', body: approval.AskUser.question, reason: 'Type your answer below and submit to respond to the agent.', isDangerous: false }
+  return { title: 'Unknown Action', body: JSON.stringify(approval, null, 2), reason: 'Requires approval to proceed.', isDangerous: false }
+}
+
+export function renderDiff(diffText: string): ReactNode {
+  if (!diffText) return null
+  const lines = diffText.split('\n')
+  return (
+    <div style={{
+      background: '#0b0f19',
+      borderRadius: '6px',
+      padding: '8px',
+      border: '1px solid rgba(255, 255, 255, 0.08)',
+      overflowX: 'auto',
+      maxHeight: '400px',
+      fontFamily: 'monospace',
+      fontSize: '0.74rem',
+      lineHeight: '1.4',
+    }}>
+      {lines.map((line, idx) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let style: any = { whiteSpace: 'pre-wrap', padding: '2px 6px' }
+        if (line.startsWith('@@') || line.startsWith('---') || line.startsWith('+++')) {
+          style = { ...style, color: '#64748b', fontWeight: 'bold' }
+        } else if (line.startsWith('+')) {
+          style = { ...style, background: 'rgba(16, 185, 129, 0.12)', borderLeft: '3px solid #10b981', color: '#a7f3d0' }
+        } else if (line.startsWith('-')) {
+          style = { ...style, background: 'rgba(239, 68, 68, 0.12)', borderLeft: '3px solid #ef4444', color: '#fca5a5' }
+        } else {
+          style = { ...style, color: '#e2e8f0' }
+        }
+        return <div key={idx} style={style}>{line}</div>
+      })}
+    </div>
+  )
+}