@pheem49/mint 1.16.0 → 1.17.0

package/src/renderer/shared/components/{ModalErrorBoundary.tsx → app/ModalErrorBoundary.tsx}

@@ -74,8 +74,8 @@ export default class ModalErrorBoundary extends React.Component<Props, State> {
             <div
               style={{
                 fontSize: '0.75rem',
-                color: '#ef4444',
-                background: 'rgba(239, 68, 68, 0.1)',
+                color: 'var(--status-error, #ef4444)',
+                background: 'color-mix(in srgb, var(--status-error, #ef4444) 12%, transparent)',
                 padding: '6px 12px',
                 borderRadius: 6,
                 maxWidth: 460,
@@ -93,8 +93,8 @@ export default class ModalErrorBoundary extends React.Component<Props, State> {
                 padding: '8px 20px',
                 borderRadius: 8,
                 border: 'none',
-                background: '#10b981',
-                color: '#ffffff',
+                background: 'var(--accent, #10b981)',
+                color: 'var(--text-on-accent, #ffffff)',
                 fontWeight: 600,
                 cursor: 'pointer',
                 fontSize: '0.9rem',
@@ -108,7 +108,7 @@ export default class ModalErrorBoundary extends React.Component<Props, State> {
               style={{
                 padding: '8px 20px',
                 borderRadius: 8,
-                border: '1px solid rgba(255, 255, 255, 0.15)',
+                border: '1px solid var(--border-default, rgba(255, 255, 255, 0.15))',
                 background: 'transparent',
                 color: 'var(--text-main, #e4e4e7)',
                 cursor: 'pointer',

package/src/renderer/shared/components/{CalculationCard.tsx → cards/CalculationCard.tsx}

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import { Calculator } from 'lucide-react'
 
 export interface CalculationData {
@@ -11,39 +11,25 @@ export default function CalculationCard({ data }: { data: CalculationData }) {
     ? (Number.isInteger(data.result) ? data.result.toLocaleString() : data.result.toLocaleString(undefined, { maximumFractionDigits: 6 }))
     : String(data.result)
 
-  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()
-  }, [])
-
   const t = {
-    cardBg: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(15,23,42,0.04)',
-    cardText: isDark ? '#f8fafc' : '#0f172a',
-    cardBorder: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.12)',
-    cardShadow: isDark ? '0 8px 32px 0 rgba(0,0,0,0.2)' : '0 4px 20px 0 rgba(15,23,42,0.08)',
-    labelColor: isDark ? 'rgba(255,255,255,0.6)' : '#64748b',
-    exprBg: isDark ? 'rgba(255,255,255,0.04)' : 'rgba(15,23,42,0.05)',
-    exprBorder: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(15,23,42,0.1)',
-    exprText: isDark ? '#cbd5e1' : '#334155',
-    dividerColor: isDark ? 'rgba(255,255,255,0.4)' : '#94a3b8',
-    resultBg: isDark ? 'rgba(255,255,255,0.04)' : 'rgba(15,23,42,0.05)',
-    resultBorder: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.12)',
-    resultText: isDark ? '#ffffff' : '#0f172a',
+    cardBg: 'var(--bg-surface-soft)',
+    cardText: 'var(--text-primary)',
+    cardBorder: 'var(--border-subtle)',
+    cardShadow: 'var(--shadow-md)',
+    labelColor: 'var(--text-muted)',
+    exprBg: 'var(--bg-surface-raised)',
+    exprBorder: 'var(--border-subtle)',
+    exprText: 'var(--text-secondary)',
+    dividerColor: 'var(--text-muted)',
+    resultBg: 'var(--bg-surface-raised)',
+    resultBorder: 'var(--border-default)',
+    resultText: 'var(--text-primary)',
   }
 
   return (
     <div
       style={{
         background: t.cardBg,
-        backdropFilter: 'blur(16px)',
-        WebkitBackdropFilter: 'blur(16px)',
         color: t.cardText,
         borderRadius: '12px',
         padding: '16px 20px',

package/src/renderer/shared/components/{ImageGenCard.tsx → cards/ImageGenCard.tsx}

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { Sparkles } from 'lucide-react'
 
 export interface ImageGenHit {
@@ -68,36 +68,23 @@ function GeneratedImageTile({ url, single }: { url: string; single: boolean }) {
 export default function ImageGenCard({ data }: { data: ImageGenData }) {
   const images = (data?.images ?? []).filter((img) => img?.url)
 
-  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()
-  }, [])
-
-  const cardBg = isDark ? 'rgba(255,255,255,0.03)' : 'rgba(15,23,42,0.04)'
-  const cardBorder = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.12)'
-  const cardText = isDark ? '#f8fafc' : '#0f172a'
-  const labelColor = isDark ? 'rgba(255,255,255,0.6)' : '#64748b'
-  const metaColor = isDark ? 'rgba(255,255,255,0.5)' : '#94a3b8'
-  const promptColor = isDark ? 'rgba(255,255,255,0.7)' : '#475569'
-  const emptyColor = isDark ? 'rgba(255,255,255,0.5)' : '#94a3b8'
+  const cardBg = 'var(--bg-surface-soft)'
+  const cardBorder = 'var(--border-subtle)'
+  const cardText = 'var(--text-primary)'
+  const labelColor = 'var(--text-muted)'
+  const metaColor = 'var(--text-muted)'
+  const promptColor = 'var(--text-secondary)'
+  const emptyColor = 'var(--text-muted)'
 
   return (
     <div
       style={{
         background: cardBg,
-        backdropFilter: 'blur(16px)',
-        WebkitBackdropFilter: 'blur(16px)',
         color: cardText,
         borderRadius: '12px',
         padding: '16px 20px',
         margin: '12px 0',
-        boxShadow: isDark ? '0 8px 32px 0 rgba(0,0,0,0.2)' : '0 4px 20px 0 rgba(15,23,42,0.08)',
+        boxShadow: 'var(--shadow-md)',
         border: `1px solid ${cardBorder}`,
         fontFamily: 'system-ui, -apple-system, sans-serif',
       }}

package/src/renderer/shared/components/{ImageSearchCard.tsx → cards/ImageSearchCard.tsx}

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { Images } from 'lucide-react'
-import { resolveMediaUrl } from '../utils/markdown'
+import { resolveMediaUrl } from '../../utils/markdown'
 
 export interface ImageSearchHit {
   title: string
@@ -81,35 +81,22 @@ function ImageTile({ image }: { image: ImageSearchHit }) {
 export default function ImageSearchCard({ data }: { data: ImageSearchData }) {
   const images = (data?.images ?? []).filter((img) => img.thumbnailUrl || img.imageUrl)
 
-  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()
-  }, [])
-
-  const cardBg = isDark ? 'rgba(255,255,255,0.03)' : 'rgba(15,23,42,0.04)'
-  const cardBorder = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.12)'
-  const cardText = isDark ? '#f8fafc' : '#0f172a'
-  const labelColor = isDark ? 'rgba(255,255,255,0.6)' : '#64748b'
-  const queryColor = isDark ? 'rgba(255,255,255,0.8)' : '#334155'
-  const emptyColor = isDark ? 'rgba(255,255,255,0.5)' : '#94a3b8'
+  const cardBg = 'var(--bg-surface-soft)'
+  const cardBorder = 'var(--border-subtle)'
+  const cardText = 'var(--text-primary)'
+  const labelColor = 'var(--text-muted)'
+  const queryColor = 'var(--text-secondary)'
+  const emptyColor = 'var(--text-muted)'
 
   return (
     <div
       style={{
         background: cardBg,
-        backdropFilter: 'blur(16px)',
-        WebkitBackdropFilter: 'blur(16px)',
         color: cardText,
         borderRadius: '12px',
         padding: '16px 20px',
         margin: '12px 0',
-        boxShadow: isDark ? '0 8px 32px 0 rgba(0,0,0,0.2)' : '0 4px 20px 0 rgba(15,23,42,0.08)',
+        boxShadow: 'var(--shadow-md)',
         border: `1px solid ${cardBorder}`,
         fontFamily: 'system-ui, -apple-system, sans-serif',
       }}

package/src/renderer/shared/components/{MermaidCard.tsx → cards/MermaidCard.tsx}

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Workflow } from 'lucide-react'
-import { ChatCodeBlock } from './ChatCodeBlock'
+import { ChatCodeBlock } from '../chat/ChatCodeBlock'
 
 let diagramCounter = 0
 
@@ -28,7 +28,9 @@ function enqueueMermaidRender<T>(task: () => Promise<T>): Promise<T> {
 const svgCache = new Map<string, string>()
 function cacheKey(code: string): string {
   const theme = document.documentElement.getAttribute('data-theme') || 'dark'
-  return `${theme}::${code}`
+  const accent = document.documentElement.getAttribute('data-accent') || 'mint'
+  const mode = document.documentElement.getAttribute('data-accent-mode') || ''
+  return `${theme}::${accent}::${mode}::${code}`
 }
 
 function buildMermaidTheme(): Record<string, string> {
@@ -63,17 +65,35 @@ function cleanupOrphanMermaidNodes(): void {
 
 type Status = 'loading' | 'ready' | 'error'
 
+let sharedThemeObserver: MutationObserver | null = null
+const themeSubscribers = new Set<() => void>()
+
+export function subscribeThemeChanges(listener: () => void): () => void {
+  themeSubscribers.add(listener)
+  if (!sharedThemeObserver && typeof MutationObserver !== 'undefined' && typeof document !== 'undefined' && document.documentElement) {
+    sharedThemeObserver = new MutationObserver(() => {
+      themeSubscribers.forEach((fn) => fn())
+    })
+    sharedThemeObserver.observe(document.documentElement, {
+      attributeFilter: ['data-theme', 'data-accent', 'data-accent-mode'],
+    })
+  }
+  return () => {
+    themeSubscribers.delete(listener)
+    if (themeSubscribers.size === 0 && sharedThemeObserver) {
+      sharedThemeObserver.disconnect()
+      sharedThemeObserver = null
+    }
+  }
+}
+
 export default function MermaidCard({ code }: { code: string }) {
   const [status, setStatus] = useState<Status>('loading')
   const [svg, setSvg] = useState<string>('')
   const [copied, setCopied] = useState(false)
-  const [isDark, setIsDark] = useState(
-    () => (document.documentElement.getAttribute('data-theme') || 'dark') !== 'light'
-  )
 
   useEffect(() => {
     let cancelled = false
-    let observer: MutationObserver | null = null
     let debounceTimer: ReturnType<typeof setTimeout> | null = null
 
     async function render() {
@@ -145,16 +165,14 @@ export default function MermaidCard({ code }: { code: string }) {
       debounceTimer = setTimeout(render, 400)
     }
 
-    observer = new MutationObserver(() => {
-      setIsDark((document.documentElement.getAttribute('data-theme') || 'dark') !== 'light')
+    const unsubscribeTheme = subscribeThemeChanges(() => {
       render()
     })
-    observer.observe(document.documentElement, { attributeFilter: ['data-theme'] })
 
     return () => {
       cancelled = true
       if (debounceTimer) clearTimeout(debounceTimer)
-      observer?.disconnect()
+      unsubscribeTheme()
       cleanupOrphanMermaidNodes()
     }
   }, [code])
@@ -190,28 +208,26 @@ export default function MermaidCard({ code }: { code: string }) {
   return (
     <div
       style={{
-        background: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(15,23,42,0.04)',
-        backdropFilter: 'blur(16px)',
-        WebkitBackdropFilter: 'blur(16px)',
-        color: isDark ? '#f8fafc' : '#0f172a',
+        background: 'var(--bg-surface-soft)',
+        color: 'var(--text-primary)',
         borderRadius: '12px',
         padding: '16px 20px',
         margin: '12px 0',
-        boxShadow: isDark ? '0 8px 32px 0 rgba(0,0,0,0.2)' : '0 4px 20px 0 rgba(15,23,42,0.08)',
-        border: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.12)'}`,
+        boxShadow: 'var(--shadow-md)',
+        border: '1px solid var(--border-subtle)',
         fontFamily: 'system-ui, -apple-system, sans-serif',
         minWidth: 0,
         maxWidth: '100%',
       }}
     >
       <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
-        <Workflow size={16} strokeWidth={2} style={{ opacity: 0.9, color: isDark ? 'rgba(255,255,255,0.6)' : '#64748b' }} />
+        <Workflow size={16} strokeWidth={2} style={{ opacity: 0.9, color: 'var(--text-muted)' }} />
         <span
           style={{
             fontSize: '11px',
             fontWeight: 700,
             letterSpacing: '0.8px',
-            color: isDark ? 'rgba(255,255,255,0.6)' : '#64748b',
+            color: 'var(--text-muted)',
           }}
         >
           DIAGRAM
@@ -227,7 +243,7 @@ export default function MermaidCard({ code }: { code: string }) {
             </button>
             <button type="button" onClick={handleCopy} title="Copy diagram source" className="chat-code-action-btn">
               {copied ? (
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--interactive-fg)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                   <polyline points="20 6 9 17 4 12" />
                 </svg>
               ) : (
@@ -248,8 +264,8 @@ export default function MermaidCard({ code }: { code: string }) {
               width: '20px',
               height: '20px',
               borderRadius: '50%',
-              border: `2px solid ${isDark ? 'rgba(255,255,255,0.15)' : 'rgba(15,23,42,0.12)'}`,
-              borderTopColor: 'var(--accent, #10b981)',
+              border: '2px solid var(--border-default)',
+              borderTopColor: 'var(--accent)',
               animation: 'mermaid-card-spin 0.8s linear infinite',
             }}
           />

package/src/renderer/shared/components/{StockCard.tsx → cards/StockCard.tsx}

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import { TrendingUp, TrendingDown } from 'lucide-react'
 
 export interface StockData {
@@ -16,38 +16,24 @@ export interface StockData {
 
 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()
-  }, [])
+  const accentColor = isPositive ? 'var(--status-success, #10b981)' : 'var(--status-error, #ef4444)'
 
   // Theme-aware color tokens
   const t = {
-    cardBg: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(15,23,42,0.04)',
-    cardText: isDark ? '#ffffff' : '#0f172a',
+    cardBg: 'var(--bg-surface-soft)',
+    cardText: 'var(--text-primary)',
     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',
+      ? 'color-mix(in srgb, var(--status-success, #10b981) 35%, var(--border-subtle))'
+      : 'color-mix(in srgb, var(--status-error, #ef4444) 35%, var(--border-subtle))',
+    cardShadow: 'var(--shadow-md)',
+    tagBg: 'var(--bg-surface-raised)',
+    tagColor: 'var(--text-secondary)',
+    subText: 'var(--text-muted)',
+    divider: 'var(--border-subtle)',
+    statBg: 'var(--bg-surface-raised)',
+    statBorder: 'var(--border-subtle)',
+    statLabel: 'var(--text-muted)',
+    statValue: 'var(--text-primary)',
   }
 
   const formattedPrice = data.price.toLocaleString(undefined, {
@@ -73,8 +59,6 @@ export default function StockCard({ data }: { data: StockData }) {
     <div
       style={{
         background: t.cardBg,
-        backdropFilter: 'blur(16px)',
-        WebkitBackdropFilter: 'blur(16px)',
         color: t.cardText,
         borderRadius: '12px',
         padding: '16px 20px',

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

@@ -0,0 +1,86 @@
+import React, { lazy, memo, Suspense, useMemo } from 'react'
+import type { AgentProgress } from '../../types'
+
+const WeatherCard = lazy(() => import('./WeatherCard'))
+const StockCard = lazy(() => import('./StockCard'))
+const CalculationCard = lazy(() => import('./CalculationCard'))
+const ImageSearchCard = lazy(() => import('./ImageSearchCard'))
+const ImageGenCard = lazy(() => import('./ImageGenCard'))
+
+export interface ToolResultCardsProps {
+  progress?: AgentProgress[]
+  aiText?: string
+}
+
+const WEATHER_RE = /```weather_json\s*([\s\S]*?)\s*```/
+const STOCK_RE = /```stock_json\s*([\s\S]*?)\s*```/
+const CALC_RE = /```calculation_json\s*([\s\S]*?)\s*```/
+const IMAGE_SEARCH_RE = /```image_search_json\s*([\s\S]*?)\s*```/
+const IMAGE_GEN_RE = /```image_gen_json\s*([\s\S]*?)\s*```/
+const IMAGE_GEN_ACTIONS = new Set(['generate_image', 'image_studio.generate', 'image_generate'])
+
+function parseMatchedJson(result: unknown, regex: RegExp): any | null {
+  const match = typeof result === 'string' && result.match(regex)
+  if (match && match[1]) {
+    try {
+      return JSON.parse(match[1])
+    } catch {}
+  }
+  return null
+}
+
+export function extractToolCardPayloads(progress?: AgentProgress[], aiText?: string) {
+  const skipWeather = Boolean(aiText && (aiText.includes('```weather_json') || aiText.includes('```weather-json')))
+  const skipStock = Boolean(aiText && (aiText.includes('```stock_json') || aiText.includes('```stock-json')))
+  const skipCalc = Boolean(aiText && (aiText.includes('```calculation_json') || aiText.includes('```calculation-json')))
+  const skipImageSearch = Boolean(aiText && (aiText.includes('```image_search_json') || aiText.includes('```image-search-json')))
+  const skipImageGen = Boolean(aiText && (aiText.includes('```image_gen_json') || aiText.includes('```image-gen-json')))
+
+  let weatherData: any = null
+  let stockData: any = null
+  let calcData: any = null
+  let imageSearchData: any = null
+  let imageGenData: any = null
+
+  for (const event of progress || []) {
+    if (event.type !== 'ToolEnd') continue
+    const actionName = event.data?.action || (event.data as any)?.name || ''
+    const res = event.data?.result || (event.data as any)?.output || ''
+    if (!skipWeather && !weatherData && actionName === 'weather') {
+      weatherData = parseMatchedJson(res, WEATHER_RE)
+    } else if (!skipStock && !stockData && actionName === 'stock') {
+      stockData = parseMatchedJson(res, STOCK_RE)
+    } else if (!skipCalc && !calcData && actionName === 'calculation') {
+      calcData = parseMatchedJson(res, CALC_RE)
+    } else if (!skipImageSearch && !imageSearchData && actionName === 'image_search') {
+      imageSearchData = parseMatchedJson(res, IMAGE_SEARCH_RE)
+    } else if (!skipImageGen && !imageGenData && IMAGE_GEN_ACTIONS.has(actionName)) {
+      imageGenData = parseMatchedJson(res, IMAGE_GEN_RE)
+    }
+  }
+
+  return { weatherData, stockData, calcData, imageSearchData, imageGenData }
+}
+
+export const ToolResultCards = memo(function ToolResultCards({ progress, aiText }: ToolResultCardsProps) {
+  const { weatherData, stockData, calcData, imageSearchData, imageGenData } = useMemo(
+    () => extractToolCardPayloads(progress, aiText),
+    [progress, aiText],
+  )
+
+  if (!weatherData && !stockData && !calcData && !imageSearchData && !imageGenData) {
+    return null
+  }
+
+  return (
+    <Suspense fallback={null}>
+      {weatherData && <WeatherCard data={weatherData} />}
+      {stockData && <StockCard data={stockData} />}
+      {calcData && <CalculationCard data={calcData} />}
+      {imageSearchData && <ImageSearchCard data={imageSearchData} />}
+      {imageGenData && <ImageGenCard data={imageGenData} />}
+    </Suspense>
+  )
+})
+
+export default ToolResultCards

package/src/renderer/shared/components/{UiFeatureCard.tsx → cards/UiFeatureCard.tsx}

@@ -1,5 +1,5 @@
 import React from 'react'
-import { resolveMediaUrl } from '../utils/markdown'
+import { resolveMediaUrl } from '../../utils/markdown'
 import {
   MessageSquare,
   Mail,
@@ -127,11 +127,11 @@ export interface UiFeatureData {
 }
 
 const BADGE_THEMES: Record<string, { bg: string; color: string; border: string }> = {
-  green: { bg: 'rgba(16, 185, 129, 0.15)', color: '#34d399', border: 'rgba(16, 185, 129, 0.3)' },
-  blue: { bg: 'rgba(56, 189, 248, 0.15)', color: '#38bdf8', border: 'rgba(56, 189, 248, 0.3)' },
-  purple: { bg: 'rgba(168, 85, 247, 0.15)', color: '#c084fc', border: 'rgba(168, 85, 247, 0.3)' },
-  amber: { bg: 'rgba(245, 158, 11, 0.15)', color: '#fbbf24', border: 'rgba(245, 158, 11, 0.3)' },
-  red: { bg: 'rgba(239, 68, 68, 0.15)', color: '#f87171', border: 'rgba(239, 68, 68, 0.3)' },
+  green: { bg: 'var(--status-success-bg, var(--accent-subtle))', color: 'var(--status-success-fg, var(--interactive-fg))', border: 'var(--status-success-border, var(--accent-border))' },
+  blue: { bg: 'var(--status-info-bg)', color: 'var(--status-info-fg)', border: 'var(--status-info-border)' },
+  purple: { bg: 'var(--status-purple-bg)', color: 'var(--status-purple-fg)', border: 'var(--status-purple-border)' },
+  amber: { bg: 'var(--status-warning-bg)', color: 'var(--status-warning-fg)', border: 'var(--status-warning-border)' },
+  red: { bg: 'var(--status-error-bg)', color: 'var(--status-error-fg)', border: 'var(--status-error-border)' },
 }
 
 export default function UiFeatureCard({ data }: { data: UiFeatureData | UiFeatureItem[] | UiFeatureItem }) {

package/src/renderer/shared/components/{UiGridCard.tsx → cards/UiGridCard.tsx}

@@ -166,9 +166,9 @@ export default function UiGridCard({ data }: { data: UiGridData | UiGridItem[] }
                       fontWeight: 600,
                       padding: '2px 7px',
                       borderRadius: '999px',
-                      background: 'rgba(16, 185, 129, 0.15)',
-                      color: '#34d399',
-                      border: '1px solid rgba(16, 185, 129, 0.3)',
+                      background: 'var(--accent-subtle)',
+                      color: 'var(--interactive-fg)',
+                      border: '1px solid var(--accent-border)',
                     }}
                   >
                     {item.badge}

package/src/renderer/shared/components/{WeatherCard.tsx → cards/WeatherCard.tsx}

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Droplet } from 'lucide-react';
-import { getWeatherIconUrl } from '../assets/weather-icons';
+import { getWeatherIconUrl } from '../../assets/weather-icons';
 
 export interface WeatherData {
   location: string;

package/src/renderer/shared/components/{ApprovalCard.test.tsx → chat/ApprovalCard.test.tsx}

@@ -2,7 +2,7 @@ import React from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it } from 'vitest'
 import { ApprovalCard } from './ApprovalCard'
-import { requiresExplicitApproval } from '../utils/approval'
+import { requiresExplicitApproval } from '../../utils/approval'
 
 describe('skill approval', () => {
   it('excludes skill proposals from session auto approval while keeping ordinary tool permissions', () => {

package/src/renderer/shared/components/{ApprovalCard.tsx → chat/ApprovalCard.tsx}

@@ -4,7 +4,7 @@
  * Shared by both Desktop and Web ChatPanel — do NOT duplicate this.
  */
 import React, { useState, useEffect } from 'react'
-import { renderApprovalDetails, renderDiff } from '../utils/approval'
+import { renderApprovalDetails, renderDiff } from '../../utils/approval'
 import { DiffReviewModal } from './DiffReviewModal'
 
 interface Props {
@@ -182,9 +182,9 @@ export function ApprovalCard({ pendingApproval, onApproval }: Props) {
                     padding: '4px 10px',
                     fontSize: '0.75rem',
                     borderRadius: '8px',
-                    background: 'rgba(56, 189, 248, 0.12)',
-                    border: '1px solid rgba(56, 189, 248, 0.3)',
-                    color: '#38bdf8',
+                    background: 'var(--accent-subtle)',
+                    border: '1px solid var(--accent-border)',
+                    color: 'var(--interactive-fg)',
                     cursor: 'pointer',
                   }}
                 >
@@ -232,7 +232,7 @@ export function ApprovalCard({ pendingApproval, onApproval }: Props) {
                         </div>
                         <div className="claude-choice-right">
                           {isMultiSelect ? (
-                            <span style={{ fontSize: '1.1rem', color: isSelected ? '#10b981' : 'var(--text-muted)' }}>
+                            <span style={{ fontSize: '1.1rem', color: isSelected ? 'var(--interactive-fg)' : 'var(--text-muted)' }}>
                               {isSelected ? '☑' : '☐'}
                             </span>
                           ) : (

package/src/renderer/shared/components/{ChatCodeBlock.tsx → chat/ChatCodeBlock.tsx}

@@ -4,7 +4,7 @@
  * Shared by both Desktop and Web ChatPanel — do NOT duplicate this.
  */
 import { memo, useState, useMemo } from 'react'
-import { renderHighlightedCode } from '../utils/syntaxHighlight'
+import { renderHighlightedCode } from '../../utils/syntaxHighlight'
 
 interface Props {
   code: string