@pheem49/mint 1.15.0 → 1.17.0

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

@@ -0,0 +1,267 @@
+import React from 'react'
+import { resolveMediaUrl } from '../../utils/markdown'
+import {
+  MessageSquare,
+  Mail,
+  Smartphone,
+  Video,
+  Database,
+  Code,
+  Terminal,
+  File,
+  FileText,
+  Folder,
+  Cpu,
+  Zap,
+  Sparkles,
+  Check,
+  AlertCircle,
+  Layers,
+  Palette,
+  Globe,
+  Box,
+  Package,
+  Crop,
+  Shield,
+  Cloud,
+  Settings,
+  Download,
+  Upload,
+  Image,
+  Play,
+  Music,
+  HardDrive,
+  Sliders,
+  ExternalLink,
+  Lock,
+  CreditCard,
+  UserCheck,
+  User,
+  Repeat,
+  AlertTriangle,
+  Key,
+  Clock,
+  type LucideIcon,
+} from 'lucide-react'
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  'message-square': MessageSquare,
+  chat: MessageSquare,
+  mail: Mail,
+  email: Mail,
+  smartphone: Smartphone,
+  phone: Smartphone,
+  mobile: Smartphone,
+  video: Video,
+  camera: Video,
+  database: Database,
+  db: Database,
+  code: Code,
+  terminal: Terminal,
+  file: File,
+  'file-text': FileText,
+  folder: Folder,
+  cpu: Cpu,
+  zap: Zap,
+  fast: Zap,
+  sparkles: Sparkles,
+  check: Check,
+  'alert-circle': AlertCircle,
+  'alert-triangle': AlertTriangle,
+  warning: AlertTriangle,
+  lock: Lock,
+  security: Shield,
+  shield: Shield,
+  key: Key,
+  'credit-card': CreditCard,
+  payment: CreditCard,
+  user: User,
+  'user-check': UserCheck,
+  repeat: Repeat,
+  sync: Repeat,
+  clock: Clock,
+  time: Clock,
+  layers: Layers,
+  palette: Palette,
+  globe: Globe,
+  web: Globe,
+  box: Box,
+  package: Package,
+  crop: Crop,
+  scan: Crop,
+  cloud: Cloud,
+  settings: Settings,
+  download: Download,
+  upload: Upload,
+  image: Image,
+  play: Play,
+  music: Music,
+  'hard-drive': HardDrive,
+  storage: HardDrive,
+  sliders: Sliders,
+  filter: Sliders,
+}
+
+function resolveIcon(name?: string): LucideIcon {
+  if (!name) return Sparkles
+  const clean = name.toLowerCase().trim().replace(/_/g, '-')
+  return ICON_MAP[clean] || Sparkles
+}
+
+export interface UiFeatureItem {
+  title: string
+  subtitle?: string
+  badge?: string
+  badgeColor?: 'green' | 'blue' | 'purple' | 'amber' | 'red'
+  thumbnail?: string
+  icon?: string
+  details?: Record<string, string> | Array<{ label: string; value: string }>
+  tags?: string[]
+  link?: string
+}
+
+export interface UiFeatureData {
+  title?: string
+  subtitle?: string
+  items?: UiFeatureItem[]
+}
+
+const BADGE_THEMES: Record<string, { bg: string; color: string; border: string }> = {
+  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 }) {
+  let title: string | undefined
+  let subtitle: string | undefined
+  let items: UiFeatureItem[] = []
+
+  if (Array.isArray(data)) {
+    items = data
+  } else if (data && typeof data === 'object') {
+    if ('title' in data && Array.isArray((data as UiFeatureData).items)) {
+      title = (data as UiFeatureData).title
+      subtitle = (data as UiFeatureData).subtitle
+      items = (data as UiFeatureData).items || []
+    } else if ('title' in data) {
+      items = [data as UiFeatureItem]
+    }
+  }
+
+  if (items.length === 0) return null
+
+  return (
+    <div className="chat-ui-feature-container">
+      {(title || subtitle) && (
+        <div className="chat-ui-feature-header">
+          {title && <h4 className="chat-ui-feature-header-title">{title}</h4>}
+          {subtitle && <p className="chat-ui-feature-header-subtitle">{subtitle}</p>}
+        </div>
+      )}
+
+      {items.map((item, idx) => {
+        const badgeTheme = BADGE_THEMES[item.badgeColor || 'green'] || BADGE_THEMES.green
+        const IconComp = resolveIcon(item.icon)
+        const resolvedThumb = item.thumbnail ? resolveMediaUrl(item.thumbnail) : null
+
+        let normalizedDetails: Array<{ label: string; value: string }> = []
+        if (item.details) {
+          if (Array.isArray(item.details)) {
+            normalizedDetails = item.details
+          } else if (typeof item.details === 'object') {
+            normalizedDetails = Object.entries(item.details).map(([label, value]) => ({
+              label,
+              value: String(value),
+            }))
+          }
+        }
+
+        return (
+          <div key={idx} className="chat-ui-feature-item">
+            <div className="chat-ui-feature-inner">
+              {/* Thumbnail or Left Icon */}
+              {resolvedThumb ? (
+                <div className="chat-ui-feature-thumb">
+                  <img
+                    src={resolvedThumb}
+                    alt={item.title}
+                    onError={(e) => {
+                      ;(e.currentTarget as HTMLImageElement).style.display = 'none'
+                    }}
+                  />
+                </div>
+              ) : (
+                <div className="chat-ui-feature-icon-box">
+                  <IconComp size={20} strokeWidth={2.2} />
+                </div>
+              )}
+
+              {/* Body Content */}
+              <div className="chat-ui-feature-body">
+                <div className="chat-ui-feature-top-row">
+                  <span className="chat-ui-feature-title">{item.title}</span>
+                  {item.badge && (
+                    <span
+                      className="chat-ui-feature-badge"
+                      style={{
+                        background: badgeTheme.bg,
+                        color: badgeTheme.color,
+                        border: `1px solid ${badgeTheme.border}`,
+                      }}
+                    >
+                      {item.badge}
+                    </span>
+                  )}
+                  {item.link && (
+                    <a
+                      href={item.link}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="chat-ui-feature-link"
+                    >
+                      <ExternalLink size={14} />
+                    </a>
+                  )}
+                </div>
+
+                {item.subtitle && (
+                  <div className="chat-ui-feature-subtitle">{item.subtitle}</div>
+                )}
+
+                {/* Key-Value Details */}
+                {normalizedDetails.length > 0 && (
+                  <div className="chat-ui-feature-details">
+                    {normalizedDetails.map((detail, dIdx) => (
+                      <div key={dIdx} className="chat-ui-feature-detail-row">
+                        <span className="chat-ui-feature-detail-label">
+                          {detail.label}:
+                        </span>
+                        <span className="chat-ui-feature-detail-value">
+                          {detail.value}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {/* Tags */}
+                {item.tags && item.tags.length > 0 && (
+                  <div className="chat-ui-feature-tags">
+                    {item.tags.map((tag, tIdx) => (
+                      <span key={tIdx} className="chat-ui-feature-tag">
+                        #{tag}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

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

@@ -0,0 +1,188 @@
+import React from 'react'
+import {
+  MessageSquare,
+  Mail,
+  Smartphone,
+  Video,
+  Database,
+  Code,
+  Terminal,
+  File,
+  FileText,
+  Folder,
+  Cpu,
+  Zap,
+  Sparkles,
+  Check,
+  AlertCircle,
+  Layers,
+  Palette,
+  Globe,
+  Box,
+  Crop,
+  Shield,
+  Cloud,
+  Settings,
+  Download,
+  Upload,
+  Image,
+  Play,
+  Music,
+  HardDrive,
+  Sliders,
+  ExternalLink,
+  Lock,
+  CreditCard,
+  UserCheck,
+  User,
+  Repeat,
+  AlertTriangle,
+  Key,
+  Clock,
+  type LucideIcon,
+} from 'lucide-react'
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  'message-square': MessageSquare,
+  chat: MessageSquare,
+  mail: Mail,
+  email: Mail,
+  smartphone: Smartphone,
+  phone: Smartphone,
+  mobile: Smartphone,
+  video: Video,
+  camera: Video,
+  database: Database,
+  db: Database,
+  code: Code,
+  terminal: Terminal,
+  file: File,
+  'file-text': FileText,
+  folder: Folder,
+  cpu: Cpu,
+  zap: Zap,
+  fast: Zap,
+  sparkles: Sparkles,
+  check: Check,
+  'alert-circle': AlertCircle,
+  'alert-triangle': AlertTriangle,
+  warning: AlertTriangle,
+  lock: Lock,
+  security: Shield,
+  shield: Shield,
+  key: Key,
+  'credit-card': CreditCard,
+  payment: CreditCard,
+  user: User,
+  'user-check': UserCheck,
+  repeat: Repeat,
+  sync: Repeat,
+  clock: Clock,
+  time: Clock,
+  layers: Layers,
+  palette: Palette,
+  globe: Globe,
+  web: Globe,
+  box: Box,
+  package: Box,
+  crop: Crop,
+  scan: Crop,
+  cloud: Cloud,
+  settings: Settings,
+  download: Download,
+  upload: Upload,
+  image: Image,
+  play: Play,
+  music: Music,
+  'hard-drive': HardDrive,
+  storage: HardDrive,
+  sliders: Sliders,
+  filter: Sliders,
+  link: ExternalLink,
+}
+
+export interface UiGridItem {
+  icon?: string
+  title: string
+  desc?: string
+  badge?: string
+  link?: string
+}
+
+export interface UiGridData {
+  title?: string
+  subtitle?: string
+  columns?: number
+  items?: UiGridItem[]
+}
+
+function resolveIcon(name?: string): LucideIcon {
+  if (!name) return Sparkles
+  const clean = name.toLowerCase().trim().replace(/_/g, '-')
+  return ICON_MAP[clean] || Sparkles
+}
+
+export default function UiGridCard({ data }: { data: UiGridData | UiGridItem[] }) {
+  let title: string | undefined
+  let subtitle: string | undefined
+  let items: UiGridItem[] = []
+  let columns: number | undefined
+
+  if (Array.isArray(data)) {
+    items = data
+  } else if (data && typeof data === 'object') {
+    title = data.title
+    subtitle = data.subtitle
+    columns = data.columns
+    items = Array.isArray(data.items) ? data.items : []
+  }
+
+  if (items.length === 0) return null
+
+  const gridCols = columns ? `repeat(${columns}, 1fr)` : 'repeat(auto-fit, minmax(200px, 1fr))'
+
+  return (
+    <div className="chat-ui-grid-wrapper">
+      {(title || subtitle) && (
+        <div className="chat-ui-grid-header">
+          {title && <h4 className="chat-ui-grid-header-title">{title}</h4>}
+          {subtitle && <p className="chat-ui-grid-header-subtitle">{subtitle}</p>}
+        </div>
+      )}
+
+      <div className="chat-ui-grid-grid" style={{ gridTemplateColumns: gridCols }}>
+        {items.map((item, idx) => {
+          const IconComp = resolveIcon(item.icon)
+          return (
+            <div key={idx} className="chat-ui-grid-item">
+              <div className="chat-ui-grid-item-top">
+                <div className="chat-ui-grid-item-icon">
+                  <IconComp size={18} strokeWidth={2.2} />
+                </div>
+                {item.badge && (
+                  <span
+                    style={{
+                      fontSize: '0.7rem',
+                      fontWeight: 600,
+                      padding: '2px 7px',
+                      borderRadius: '999px',
+                      background: 'var(--accent-subtle)',
+                      color: 'var(--interactive-fg)',
+                      border: '1px solid var(--accent-border)',
+                    }}
+                  >
+                    {item.badge}
+                  </span>
+                )}
+              </div>
+
+              <div className="chat-ui-grid-item-title">{item.title}</div>
+
+              {item.desc && <div className="chat-ui-grid-item-desc">{item.desc}</div>}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,224 @@
+import React, { useMemo } from 'react';
+import { Droplet } from 'lucide-react';
+import { getWeatherIconUrl } from '../../assets/weather-icons';
+
+export interface WeatherData {
+  location: string;
+  current: {
+    time?: string;
+    temperature_2m: number;
+    relative_humidity_2m: number;
+    apparent_temperature: number;
+    is_day?: number;
+    precipitation?: number;
+    weather_code: number;
+    wind_speed_10m: number;
+  };
+  daily?: {
+    time: string[];
+    weather_code: number[];
+    temperature_2m_max: number[];
+    temperature_2m_min: number[];
+    precipitation_probability_max?: number[];
+  };
+  timezone?: string;
+}
+
+const getWeatherInfo = (code: number, isDay: boolean = true) => {
+  const weatherMap: Record<number, { description: string; gradient: string }> = {
+    0: { description: 'Clear Sky', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #1e3a8a, #1d4ed8 40%, #0284c7 80%, #0369a1)' },
+    1: { description: 'Mainly Clear', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #1e3a8a, #1d4ed8 40%, #0284c7 80%, #0369a1)' },
+    2: { description: 'Partly Cloudy', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #1e293b, #334155 45%, #0284c7 85%)' },
+    3: { description: 'Overcast', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #0f172a, #334155 50%, #475569)' },
+    45: { description: 'Foggy', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #1e293b, #475569)' },
+    48: { description: 'Rime Fog', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #1e293b, #475569)' },
+    51: { description: 'Light Drizzle', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #0c4a6e, #0284c7 50%, #0369a1)' },
+    53: { description: 'Drizzle', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #0c4a6e, #0284c7 50%, #0369a1)' },
+    55: { description: 'Heavy Drizzle', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #0f172a, #0369a1 60%)' },
+    61: { description: 'Light Rain', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #0c4a6e, #0284c7 50%, #0369a1)' },
+    63: { description: 'Rain', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #0f172a, #0284c7 50%, #0369a1)' },
+    65: { description: 'Heavy Rain', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #0f172a, #1e3a8a 60%, #0284c7)' },
+    71: { description: 'Light Snow', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #1e293b, #38bdf8 70%)' },
+    73: { description: 'Snow', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #1e293b, #38bdf8 70%)' },
+    75: { description: 'Heavy Snow', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #0f172a, #0284c7 70%)' },
+    80: { description: 'Light Showers', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #0c4a6e, #0284c7 50%, #0369a1)' },
+    81: { description: 'Showers', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #0f172a, #0284c7 50%, #0369a1)' },
+    82: { description: 'Heavy Showers', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #0f172a, #1e3a8a 50%, #312e81)' },
+    95: { description: 'Thunderstorm', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #0f172a, #1e1b4b 50%, #312e81)' },
+    96: { description: 'Thunderstorm & Hail', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #0f172a, #1e1b4b 60%)' },
+    99: { description: 'Severe Thunderstorm', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #0f172a, #1e1b4b 60%)' },
+  };
+
+  const info = weatherMap[code] || { description: 'Weather', gradient: 'radial-gradient(ellipse 150% 100% at 50% 100%, #1e3a8a, #0284c7)' };
+  return { ...info, iconUrl: getWeatherIconUrl(code, isDay) };
+};
+
+export default function WeatherCard({ data }: { data: WeatherData }) {
+  const current = data.current;
+  const daily = data.daily;
+  const isDay = current?.is_day !== 0;
+
+  const weatherInfo = useMemo(() => {
+    return getWeatherInfo(current?.weather_code || 0, isDay);
+  }, [current?.weather_code, isDay]);
+
+  const forecast = useMemo(() => {
+    if (!daily?.time || daily.time.length === 0) return [];
+    return daily.time.slice(1, 6).map((time, idx) => {
+      const date = new Date(time);
+      const dayName = date.toLocaleDateString('en-US', { weekday: 'short' });
+      const code = daily.weather_code[idx + 1] || 0;
+      const info = getWeatherInfo(code, true);
+      const high = Math.round(daily.temperature_2m_max[idx + 1] || 0);
+      const low = Math.round(daily.temperature_2m_min[idx + 1] || 0);
+      const prob = daily.precipitation_probability_max ? daily.precipitation_probability_max[idx + 1] : 0;
+
+      return {
+        day: dayName,
+        iconUrl: info.iconUrl,
+        high,
+        low,
+        precipitation: prob,
+      };
+    });
+  }, [daily]);
+
+  if (!current) return null;
+
+  const formattedDate = current.time
+    ? new Date(current.time).toLocaleString('en-US', { weekday: 'short', hour: 'numeric', minute: '2-digit' })
+    : new Date().toLocaleString('en-US', { weekday: 'short', hour: 'numeric', minute: '2-digit' });
+
+  return (
+    <div
+      style={{
+        background: weatherInfo.gradient,
+        color: '#ffffff',
+        borderRadius: '12px',
+        padding: '16px 20px',
+        margin: '12px 0',
+        boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.4)',
+        position: 'relative',
+        overflow: 'hidden',
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+      }}
+    >
+      {/* Header Info */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '14px' }}>
+          <img src={weatherInfo.iconUrl} alt={weatherInfo.description} width={42} height={42} style={{ flexShrink: 0 }} />
+          <div>
+            <div style={{ display: 'flex', alignItems: 'baseline', gap: '4px' }}>
+              <span style={{ fontSize: '36px', fontWeight: 'bold', letterSpacing: '-1px' }}>
+                {Math.round(current.temperature_2m)}°
+              </span>
+              <span style={{ fontSize: '18px', opacity: 0.9 }}>C</span>
+            </div>
+            <p style={{ margin: '2px 0 0', fontSize: '14px', fontWeight: 500, opacity: 0.95 }}>
+              {weatherInfo.description}
+            </p>
+          </div>
+        </div>
+        <div style={{ textAlign: 'right' }}>
+          {daily?.temperature_2m_max?.[0] !== undefined && (
+            <p style={{ margin: 0, fontSize: '13px', fontWeight: 600, opacity: 0.9 }}>
+              {Math.round(daily.temperature_2m_max[0])}° {Math.round(daily.temperature_2m_min[0])}°
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Location & Time */}
+      <div
+        style={{
+          borderBottom: '1px solid rgba(255, 255, 255, 0.2)',
+          paddingBottom: '10px',
+          marginBottom: '12px',
+        }}
+      >
+        <h4 style={{ margin: 0, fontSize: '17px', fontWeight: 700, letterSpacing: '-0.3px' }}>{data.location}</h4>
+        <p style={{ margin: '2px 0 0', fontSize: '12px', opacity: 0.8 }}>{formattedDate}</p>
+      </div>
+
+      {/* 5-Day Forecast Grid */}
+      {forecast.length > 0 && (
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: `repeat(${forecast.length}, 1fr)`,
+            gap: '8px',
+            marginBottom: '14px',
+            paddingBottom: '12px',
+            borderBottom: '1px solid rgba(255, 255, 255, 0.2)',
+          }}
+        >
+          {forecast.map((day, idx) => (
+            <div
+              key={idx}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                background: 'rgba(255, 255, 255, 0.12)',
+                backdropFilter: 'blur(4px)',
+                borderRadius: '8px',
+                padding: '8px 4px',
+              }}
+            >
+              <span style={{ fontSize: '12px', fontWeight: 600, marginBottom: '4px' }}>{day.day}</span>
+              <img src={day.iconUrl} alt={day.day} width={20} height={20} style={{ marginBottom: '4px' }} />
+              <div style={{ fontSize: '11px', display: 'flex', gap: '3px' }}>
+                <span style={{ fontWeight: 700 }}>{day.high}°</span>
+                <span style={{ opacity: 0.65 }}>{day.low}°</span>
+              </div>
+              {day.precipitation !== undefined && day.precipitation > 0 && (
+                <span style={{ fontSize: '10px', opacity: 0.8, marginTop: '2px', display: 'inline-flex', alignItems: 'center', gap: '2px' }}>
+                  <Droplet size={10} strokeWidth={2.5} /> {day.precipitation}%
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Metrics Row */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '8px' }}>
+        <div
+          style={{
+            background: 'rgba(255, 255, 255, 0.12)',
+            backdropFilter: 'blur(4px)',
+            borderRadius: '8px',
+            padding: '8px 10px',
+          }}
+        >
+          <p style={{ margin: 0, fontSize: '10px', opacity: 0.75, textTransform: 'none', letterSpacing: '0.5px' }}>Wind</p>
+          <p style={{ margin: '2px 0 0', fontSize: '13px', fontWeight: 700 }}>{Math.round(current.wind_speed_10m)} km/h</p>
+        </div>
+
+        <div
+          style={{
+            background: 'rgba(255, 255, 255, 0.12)',
+            backdropFilter: 'blur(4px)',
+            borderRadius: '8px',
+            padding: '8px 10px',
+          }}
+        >
+          <p style={{ margin: 0, fontSize: '10px', opacity: 0.75, textTransform: 'none', letterSpacing: '0.5px' }}>Humidity</p>
+          <p style={{ margin: '2px 0 0', fontSize: '13px', fontWeight: 700 }}>{Math.round(current.relative_humidity_2m)}%</p>
+        </div>
+
+        <div
+          style={{
+            background: 'rgba(255, 255, 255, 0.12)',
+            backdropFilter: 'blur(4px)',
+            borderRadius: '8px',
+            padding: '8px 10px',
+          }}
+        >
+          <p style={{ margin: 0, fontSize: '10px', opacity: 0.75, textTransform: 'none', letterSpacing: '0.5px' }}>Feels like</p>
+          <p style={{ margin: '2px 0 0', fontSize: '13px', fontWeight: 700 }}>{Math.round(current.apparent_temperature)}°C</p>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,24 @@
+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'
+
+describe('skill approval', () => {
+  it('excludes skill proposals from session auto approval while keeping ordinary tool permissions', () => {
+    expect(requiresExplicitApproval({ SkillWrite: { path: 'SKILL.md' } })).toBe(true)
+    expect(requiresExplicitApproval({ WriteFile: { path: 'app.ts' } })).toBe(false)
+    expect(requiresExplicitApproval(undefined)).toBe(false)
+  })
+  it('shows the proposed skill and diff review without offering session permission', () => {
+    const html = renderToStaticMarkup(<ApprovalCard
+      pendingApproval={{ approval: { SkillWrite: { path: '.agents/skills/build/SKILL.md', diff: '+Use the build command', content: 'Use the build command' } } }}
+      onApproval={() => {}}
+    />)
+    expect(html).toContain('.agents/skills/build/SKILL.md')
+    expect(html).toContain('Review')
+    expect(html).toContain('Allow once')
+    expect(html).toContain('Reject')
+    expect(html).not.toContain('Always allow for this session')
+  })
+})