@pheem49/mint 1.14.0 → 1.15.0

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

@@ -4,9 +4,34 @@ import { renderFormattedMessage } from '../utils/markdown'
 import '../css/management-views.css'
 import type { LearnedSkill } from '../types'
 
-/** First non-empty line of a skill's content, for the one-line row preview. */
-function firstLine(text: string): string {
-  return text.split('\n').map((l) => l.replace(/^#+\s*/, '').trim()).find(Boolean) || ''
+/** Prefer a skill's frontmatter summary; otherwise preview its first body line. */
+function skillPreview(skill: LearnedSkill): string {
+  if (skill.description?.trim()) return skill.description.trim()
+
+  const lines = skill.content.trimStart().split(/\r?\n/)
+  if (lines[0]?.trim() === '---') {
+    const frontmatterEnd = lines.findIndex((line, index) => index > 0 && line.trim() === '---')
+    if (frontmatterEnd > 0) {
+      const descriptionLine = lines
+        .slice(1, frontmatterEnd)
+        .find((line) => /^description\s*:/i.test(line.trim()))
+      if (descriptionLine) {
+        const description = descriptionLine.replace(/^\s*description\s*:\s*/i, '').trim()
+        if (description && description !== '>' && description !== '|') {
+          return description.replace(/^("([\s\S]*)"|'([\s\S]*)')$/, (_, _quoted, double, single) => double ?? single)
+        }
+      }
+
+      lines.splice(0, frontmatterEnd + 1)
+    }
+  }
+
+  return lines.map((line) => line.replace(/^#+\s*/, '').trim()).find(Boolean) || ''
+}
+
+function isWorkspaceSkill(skill: LearnedSkill): boolean {
+  // Desktop Tauri returns `location`; the Web API returns `is_workspace`.
+  return Boolean(skill.is_workspace || skill.location === 'workspace')
 }
 
 export type { LearnedSkill }
@@ -30,7 +55,7 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
   const [searchQuery, setSearchQuery] = useState('')
   const [scopeFilter, setScopeFilter] = useState<'all' | 'workspace' | 'global'>('all')
 
-  // Teach New Skill Form State
+  // Teach new skill Form State
   const [newSkillName, setNewSkillName] = useState('')
   const [newSkillContent, setNewSkillContent] = useState('')
   const [adding, setAdding] = useState(false)
@@ -93,8 +118,8 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
 
     if (!matchesSearch) return false
 
-    if (scopeFilter === 'workspace') return Boolean(s.is_workspace)
-    if (scopeFilter === 'global') return !s.is_workspace
+    if (scopeFilter === 'workspace') return isWorkspaceSkill(s)
+    if (scopeFilter === 'global') return !isWorkspaceSkill(s)
     return true
   })
 
@@ -122,7 +147,7 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
             <line x1="12" y1="5" x2="12" y2="19" />
             <line x1="5" y1="12" x2="19" y2="12" />
           </svg>
-          Teach New Skill
+          Teach new skill
         </button>
       </div>
 
@@ -189,10 +214,10 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
             <div key={s.name} className="mgmt-row" onClick={() => setDetailSkill(s)}>
               <div className="mgmt-row-main">
                 <div className="mgmt-row-title">{s.name}</div>
-                <div className="mgmt-row-sub">{s.description || firstLine(s.content)}</div>
+                <div className="mgmt-row-sub">{skillPreview(s)}</div>
               </div>
-              <span className={`management-tag ${s.is_workspace ? 'workspace' : 'global'}`}>
-                {s.is_workspace ? 'Workspace' : 'Global'}
+              <span className={`management-tag ${isWorkspaceSkill(s) ? 'workspace' : 'global'}`}>
+                {isWorkspaceSkill(s) ? 'Workspace' : 'Global'}
               </span>
             </div>
           ))}
@@ -218,8 +243,8 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
             </div>
 
             <div className="management-modal-body">
-              <span className={`management-tag ${detailSkill.is_workspace ? 'workspace' : 'global'}`}>
-                {detailSkill.is_workspace ? 'Workspace' : 'Global'}
+              <span className={`management-tag ${isWorkspaceSkill(detailSkill) ? 'workspace' : 'global'}`}>
+                {isWorkspaceSkill(detailSkill) ? 'Workspace' : 'Global'}
               </span>
 
               {detailSkill.description && (
@@ -247,13 +272,13 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
         </div>
       )}
 
-      {/* Teach New Skill Modal */}
+      {/* Teach new skill Modal */}
       {showTeachModal && (
         <div className="management-modal-overlay">
           <div className="management-modal">
             <div className="management-modal-header">
               <h2 className="management-modal-title">
-                Teach New Skill to Mint
+                Teach new skill to Mint
               </h2>
               <button
                 type="button"
@@ -268,7 +293,7 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
               <div className="management-modal-body">
                 <div className="management-form-group">
                   <label className="management-label">
-                    Skill Name (e.g. typescript-standards)
+                    Skill name (e.g. typescript-standards)
                   </label>
                   <input
                     type="text"
@@ -282,7 +307,7 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
 
                 <div className="management-form-group">
                   <label className="management-label">
-                    Skill Instructions / Content (Markdown supported)
+                    Skill instructions / content (Markdown supported)
                   </label>
                   <textarea
                     className="management-textarea-field"

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

@@ -9,7 +9,8 @@ import {
   type RefObject,
 } from 'react'
 import { SLASH_COMMANDS, type SlashCommand } from '../constants/slashCommands'
-import { listLearnedSkills, type LearnedSkill } from '@/tauri'
+import { catalogPlatform } from '../platform'
+import type { LearnedSkill } from '../types'
 
 /** Parent calls `handleKeyDown` from the textarea's onKeyDown; a `true` return
  *  means the menu consumed the key and the caller should stop. */
@@ -81,7 +82,7 @@ const SlashSuggestions = forwardRef<SlashSuggestionsHandle, Props>(function Slas
   useEffect(() => {
     if (mode !== 'skill') return
     let alive = true
-    listLearnedSkills(workspacePath)
+    catalogPlatform.listLearnedSkills(workspacePath)
       .then((res) => {
         if (alive && Array.isArray(res)) setSkills(res)
       })

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

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, useEffect } from 'react'
 import type { WebSearchSource } from '../utils/agentActivity'
 import { resolveMediaUrl } from '../utils/markdown'
 
@@ -50,6 +50,17 @@ export function groupSourcesByDomain(sources: WebSearchSource[]): DomainGroup[]
 export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function SourcesBlock({ sources }) {
   const [isExpanded, setIsExpanded] = useState(false)
   const [openDropdownDomain, setOpenDropdownDomain] = useState<string | null>(null)
+  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 domainGroups = useMemo(() => {
     const groups = groupSourcesByDomain(sources)
@@ -92,7 +103,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
         >
           <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
         </svg>
-        <span style={{ fontSize: '0.85rem', fontWeight: 600, color: '#f1f5f9', letterSpacing: '0.01em' }}>
+        <span style={{ fontSize: '0.85rem', fontWeight: 600, color: isDark ? '#f1f5f9' : '#0f172a', letterSpacing: '0.01em' }}>
           Sources
         </span>
       </div>
@@ -126,9 +137,9 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                   display: 'flex',
                   flexDirection: 'column',
                   justifyContent: 'space-between',
-                  borderRadius: '10px',
-                  background: 'rgba(255, 255, 255, 0.04)',
-                  border: '1px solid rgba(255, 255, 255, 0.08)',
+                  borderRadius: '16px',
+                  background: 'var(--bg-surface-soft)',
+                  border: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.1)'}`,
                   transition: 'all 0.15s ease',
                   cursor: 'pointer',
                   minHeight: '68px',
@@ -149,20 +160,20 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                 }}
                 onMouseEnter={(e) => {
                   const el = e.currentTarget
-                  el.style.background = 'rgba(255, 255, 255, 0.07)'
-                  el.style.borderColor = 'rgba(255, 255, 255, 0.16)'
+                  el.style.background = 'var(--bg-surface-hover)'
+                  el.style.borderColor = isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.2)'
                   el.style.transform = 'translateY(-1px)'
                 }}
                 onMouseLeave={(e) => {
                   const el = e.currentTarget
-                  el.style.background = 'rgba(255, 255, 255, 0.04)'
-                  el.style.borderColor = 'rgba(255, 255, 255, 0.08)'
+                  el.style.background = 'var(--bg-surface-soft)'
+                  el.style.borderColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.1)'
                   el.style.transform = 'translateY(0)'
                 }}
               >
                 {/* Thumbnail (if this source has an associated image) */}
                 {primaryItem.imageUrl && (
-                  <div style={{ width: '100%', height: '80px', overflow: 'hidden', background: 'rgba(255,255,255,0.06)', flexShrink: 0 }}>
+                  <div style={{ width: '100%', height: '80px', overflow: 'hidden', background: 'var(--bg-surface-raised)', flexShrink: 0 }}>
                     <img
                       src={resolveMediaUrl(primaryItem.imageUrl)}
                       alt={primaryItem.title}
@@ -181,7 +192,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                     style={{
                       fontSize: '0.8rem',
                       fontWeight: 500,
-                      color: '#f1f5f9',
+                      color: 'var(--text-primary)',
                       lineHeight: '1.3',
                       display: '-webkit-box',
                       WebkitLineClamp: 2,
@@ -264,15 +275,16 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
               {/* Sub-links Popover Dropdown when multi-item domain card clicked */}
               {isDropdownOpen && extraCount > 0 && (
                 <div
+                  className="source-links-popover"
                   style={{
                     position: 'absolute',
                     top: '100%',
                     left: 0,
                     width: '260px',
                     marginTop: '6px',
-                    background: '#18181b',
-                    border: '1px solid rgba(255, 255, 255, 0.15)',
-                    borderRadius: '8px',
+                    background: 'var(--bg-overlay)',
+                    border: '1px solid var(--border-default)',
+                    borderRadius: '14px',
                     boxShadow: '0 10px 25px rgba(0,0,0,0.6)',
                     zIndex: 40,
                     padding: '6px',
@@ -287,10 +299,10 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                       alignItems: 'center',
                       justifyContent: 'space-between',
                       padding: '4px 6px',
-                      borderBottom: '1px solid rgba(255,255,255,0.06)',
+                      borderBottom: '1px solid var(--border-subtle)',
                     }}
                   >
-                    <span style={{ fontSize: '0.7rem', fontWeight: 600, color: '#94a3b8' }}>
+                    <span style={{ fontSize: '0.7rem', fontWeight: 600, color: 'var(--text-muted)' }}>
                       All links from {group.domain} ({group.items.length})
                     </span>
                     <button
@@ -320,14 +332,14 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                         gap: '2px',
                         padding: '6px 8px',
                         borderRadius: '6px',
-                        color: '#e2e8f0',
+                        color: 'var(--text-primary)',
                         textDecoration: 'none',
                         fontSize: '0.75rem',
-                        background: 'rgba(255,255,255,0.02)',
+                        background: 'var(--bg-surface-soft)',
                         transition: 'background 0.15s',
                       }}
-                      onMouseEnter={(e) => { (e.currentTarget as HTMLAnchorElement).style.background = 'rgba(255,255,255,0.08)' }}
-                      onMouseLeave={(e) => { (e.currentTarget as HTMLAnchorElement).style.background = 'rgba(255,255,255,0.02)' }}
+                      onMouseEnter={(e) => { (e.currentTarget as HTMLAnchorElement).style.background = 'var(--bg-surface-hover)' }}
+                      onMouseLeave={(e) => { (e.currentTarget as HTMLAnchorElement).style.background = 'var(--bg-surface-soft)' }}
                     >
                       <div style={{ fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                         {itemIdx + 1}. {item.title}
@@ -352,9 +364,9 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
               alignItems: 'center',
               justifyContent: 'space-between',
               padding: '10px 14px',
-              borderRadius: '10px',
-              background: 'rgba(255, 255, 255, 0.03)',
-              border: '1px solid rgba(255, 255, 255, 0.08)',
+              borderRadius: '16px',
+              background: 'var(--bg-surface-soft)',
+              border: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.1)'}`,
               cursor: 'pointer',
               transition: 'all 0.15s ease',
               minHeight: '68px',
@@ -365,14 +377,14 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
             }}
             onMouseEnter={(e) => {
               const el = e.currentTarget
-              el.style.background = 'rgba(255, 255, 255, 0.06)'
-              el.style.borderColor = 'rgba(255, 255, 255, 0.16)'
+              el.style.background = 'var(--bg-surface-hover)'
+              el.style.borderColor = isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.2)'
               el.style.transform = 'translateY(-1px)'
             }}
             onMouseLeave={(e) => {
               const el = e.currentTarget
-              el.style.background = 'rgba(255, 255, 255, 0.03)'
-              el.style.borderColor = 'rgba(255, 255, 255, 0.08)'
+              el.style.background = 'var(--bg-surface-soft)'
+              el.style.borderColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.1)'
               el.style.transform = 'translateY(0)'
             }}
           >
@@ -414,9 +426,9 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
               setOpenDropdownDomain(null)
             }}
             style={{
-              background: 'rgba(255,255,255,0.05)',
-              border: '1px solid rgba(255,255,255,0.1)',
-              borderRadius: '6px',
+              background: 'var(--bg-surface-soft)',
+              border: `1px solid ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(15,23,42,0.12)'}`,
+              borderRadius: '8px',
               padding: '4px 10px',
               color: '#94a3b8',
               fontSize: '0.73rem',
@@ -424,8 +436,8 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
               cursor: 'pointer',
               transition: 'background 0.15s',
             }}
-            onMouseEnter={(e) => { (e.currentTarget as HTMLButtonElement).style.background = 'rgba(255,255,255,0.1)' }}
-            onMouseLeave={(e) => { (e.currentTarget as HTMLButtonElement).style.background = 'rgba(255,255,255,0.05)' }}
+            onMouseEnter={(e) => { (e.currentTarget as HTMLButtonElement).style.background = 'var(--bg-surface-hover)' }}
+            onMouseLeave={(e) => { (e.currentTarget as HTMLButtonElement).style.background = 'var(--bg-surface-soft)' }}
           >
             Show less
           </button>

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