Added Comfort Index widget, updated stylings on other widgets, GPT Service with problems.

frontend/src/components/widgets/AirQualityWidget.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import type { WidgetConfig } from '../../hooks'
 import { weatherApi } from '../../api'
+import './widget-styles.css'
 
 interface AirQualityWidgetProps {
   config: WidgetConfig
@@ -22,7 +23,7 @@ export default function AirQualityWidget({ config }: AirQualityWidgetProps) {
 
   if (isLoading) {
     return (
-      <div className="card bg-base-100 shadow-lg h-full">
+      <div className="widget-card card bg-base-100 h-full">
         <div className="card-body flex items-center justify-center">
           <span className="loading loading-spinner loading-lg"></span>
         </div>
@@ -32,9 +33,9 @@ export default function AirQualityWidget({ config }: AirQualityWidgetProps) {
 
   if (error) {
     return (
-      <div className="card bg-base-100 shadow-lg h-full">
+      <div className="widget-card card bg-base-100 h-full">
         <div className="card-body">
-          <h2 className="card-title text-sm">{config.title}</h2>
+          <h2 className="card-title text-sm truncate">{config.title}</h2>
           <div className="flex flex-col items-center justify-center flex-1">
             <p className="text-error text-sm text-center">
               Failed to load air quality data for {city}
@@ -73,14 +74,14 @@ export default function AirQualityWidget({ config }: AirQualityWidgetProps) {
   const pm25 = airQuality.measurements.pm25
 
   return (
-    <div className="card bg-base-100 shadow-lg h-full">
+    <div className="widget-card card bg-base-100 h-full">
       <div className="card-body">
-        <h2 className="card-title text-sm">{config.title}</h2>
+        <h2 className="card-title text-sm truncate">{config.title}</h2>
         <div className="flex flex-col items-center justify-center flex-1">
           {/* Air quality icon */}
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            className={`h-16 w-16 text-${statusColor} mb-2`}
+            className={`h-12 w-12 text-${statusColor} mb-1`}
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -94,28 +95,28 @@ export default function AirQualityWidget({ config }: AirQualityWidgetProps) {
           </svg>
 
           {/* PM Values */}
-          <div className="grid grid-cols-2 gap-4 w-full mb-3">
+          <div className="grid grid-cols-2 gap-2 w-full mb-2">
             {pm10 && (
               <div className="text-center">
-                <div className="text-2xl font-bold">{pm10.average.toFixed(1)}</div>
+                <div className="text-xl font-bold">{pm10.average.toFixed(1)}</div>
                 <div className="text-xs text-base-content/60">PM10 μg/m³</div>
               </div>
             )}
             {pm25 && (
               <div className="text-center">
-                <div className="text-2xl font-bold">{pm25.average.toFixed(1)}</div>
+                <div className="text-xl font-bold">{pm25.average.toFixed(1)}</div>
                 <div className="text-xs text-base-content/60">PM2.5 μg/m³</div>
               </div>
             )}
           </div>
 
           {/* AQI Status badge */}
-          <div className={`badge badge-${statusColor} badge-lg`}>
+          <div className={`badge badge-${statusColor} truncate max-w-full`}>
             {airQuality.status}
           </div>
 
           {/* Additional pollutants */}
-          <div className="grid grid-cols-2 gap-2 mt-3 w-full text-xs">
+          <div className="grid grid-cols-2 gap-2 mt-2 w-full text-xs">
             {Object.entries(airQuality.measurements).map(([pollutant, data]) => {
               if (pollutant === 'pm10' || pollutant === 'pm25') return null
               return (
@@ -128,8 +129,10 @@ export default function AirQualityWidget({ config }: AirQualityWidgetProps) {
           </div>
 
           {/* City and sensor count */}
-          <div className="text-xs text-base-content/40 mt-3">
-            {airQuality.city.charAt(0).toUpperCase() + airQuality.city.slice(1)} • {airQuality.sensor_count} sensors
+          <div className="text-xs text-base-content/40 mt-2 px-2 w-full overflow-hidden">
+            <div className="truncate text-center">
+              {airQuality.city.charAt(0).toUpperCase() + airQuality.city.slice(1)} • {airQuality.sensor_count} sensors
+            </div>
           </div>
         </div>
       </div>

frontend/src/components/widgets/ComfortIndexWidget.tsx

@@ -0,0 +1,153 @@
+import { useQuery } from '@tanstack/react-query'
+import { devicesApi } from '../../api'
+import type { WidgetConfig } from '../../hooks'
+import './widget-styles.css'
+
+interface ComfortIndexWidgetProps {
+  config: WidgetConfig
+}
+
+export default function ComfortIndexWidget({ config }: ComfortIndexWidgetProps) {
+  const deviceId = config.deviceIds[0]
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['comfort-index', deviceId],
+    queryFn: async () => {
+      const response = await devicesApi.getComfortIndex(deviceId)
+      return response.data
+    },
+    refetchInterval: 60000, // Refresh every minute
+    enabled: !!deviceId,
+  })
+
+  if (isLoading) {
+    return (
+      <div className="widget-card card bg-base-100 h-full">
+        <div className="card-body flex items-center justify-center">
+          <span className="loading loading-spinner loading-lg"></span>
+        </div>
+      </div>
+    )
+  }
+
+  if (error || !data) {
+    return (
+      <div className="widget-card card bg-base-100 h-full">
+        <div className="card-body flex items-center justify-center">
+          <div className="alert alert-error">
+            <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span>Failed to load comfort index</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const getRatingColor = (rating: string) => {
+    switch (rating) {
+      case 'Excellent': return 'text-success'
+      case 'Good': return 'text-info'
+      case 'Fair': return 'text-warning'
+      case 'Poor': return 'text-error'
+      case 'Very Poor': return 'text-error'
+      default: return 'text-base-content'
+    }
+  }
+
+  const getScoreColor = (score: number) => {
+    if (score >= 90) return 'text-success'
+    if (score >= 75) return 'text-info'
+    if (score >= 60) return 'text-warning'
+    if (score >= 40) return 'text-error'
+    return 'text-error'
+  }
+
+  return (
+    <div className="widget-card card bg-base-100 h-full">
+      <div className="card-body p-3 gap-2">
+        {/* Title */}
+        <h2 className="card-title text-sm mb-1">{config.title}</h2>
+        
+        {/* Overall Score */}
+        <div className="text-center">
+          <div className={`text-4xl font-bold ${getScoreColor(data.overall_score)}`}>
+            {data.overall_score}
+          </div>
+          <div className={`text-lg font-semibold ${getRatingColor(data.rating)} mt-0.5`}>
+            {data.rating}
+          </div>
+          <div className="text-xs text-base-content/60">Comfort Index</div>
+        </div>
+
+      {/* Component Scores */}
+      <div className="grid grid-cols-2 gap-2 text-xs">
+        <div className="flex items-center justify-between p-2 bg-base-200 rounded">
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm">🌡️</span>
+            <span className="truncate">Temperature</span>
+          </div>
+          <span className={`font-bold ${getScoreColor(data.components.temperature)}`}>
+            {data.components.temperature}
+          </span>
+        </div>
+        
+        <div className="flex items-center justify-between p-2 bg-base-200 rounded">
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm">💧</span>
+            <span className="truncate">Humidity</span>
+          </div>
+          <span className={`font-bold ${getScoreColor(data.components.humidity)}`}>
+            {data.components.humidity}
+          </span>
+        </div>
+        
+        <div className="flex items-center justify-between p-2 bg-base-200 rounded">
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm">🌬️</span>
+            <span className="truncate">Air Quality</span>
+          </div>
+          <span className={`font-bold ${getScoreColor(data.components.air_quality)}`}>
+            {data.components.air_quality}
+          </span>
+        </div>
+        
+        <div className="flex items-center justify-between p-2 bg-base-200 rounded">
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm">🔊</span>
+            <span className="truncate">Acoustic</span>
+          </div>
+          <span className={`font-bold ${getScoreColor(data.components.acoustic)}`}>
+            {data.components.acoustic}
+          </span>
+        </div>
+        
+        <div className="flex items-center justify-between p-2 bg-base-200 rounded col-span-2">
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm">💡</span>
+            <span className="truncate">Lighting</span>
+          </div>
+          <span className={`font-bold ${getScoreColor(data.components.light)}`}>
+            {data.components.light}
+          </span>
+        </div>
+      </div>
+
+      {/* Suggestions */}
+      {data.suggestions.length > 0 && (
+        <div className="mt-auto">
+          <div className="text-xs font-semibold mb-1">💡 Suggestions</div>
+          <div className="space-y-1 max-h-20 overflow-y-auto">
+            {data.suggestions.map((suggestion, i) => (
+              <div key={i} className="text-xs bg-warning/10 p-1 rounded border-l-2 border-warning">
+                {suggestion}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      </div>
+    </div>
+  )
+}

frontend/src/components/widgets/LineChartWidget.tsx

@@ -223,7 +223,9 @@ export default function LineChartWidget({ config }: LineChartWidgetProps) {
                 dataKey={metric}
                 stroke={colors[index % colors.length]}
                 strokeWidth={2}
-                dot={false}
+                dot={{ r: 2, strokeWidth: 0 }}
+                activeDot={{ r: 4 }}
+                connectNulls={true}
                 name={formatMetricName(metric)}
               />
             ))}

frontend/src/components/widgets/WeatherWidget.tsx

@@ -22,7 +22,7 @@ export default function WeatherWidget({ config }: WeatherWidgetProps) {
 
   if (isLoading) {
     return (
-      <div className="card bg-base-100 shadow-lg h-full">
+      <div className="widget-card card bg-base-100 h-full">
         <div className="card-body flex items-center justify-center">
           <span className="loading loading-spinner loading-lg"></span>
         </div>
@@ -32,9 +32,9 @@ export default function WeatherWidget({ config }: WeatherWidgetProps) {
 
   if (error) {
     return (
-      <div className="card bg-base-100 shadow-lg h-full">
+      <div className="widget-card card bg-base-100 h-full">
         <div className="card-body">
-          <h2 className="card-title text-sm">{config.title}</h2>
+          <h2 className="card-title text-sm truncate">{config.title}</h2>
           <div className="flex flex-col items-center justify-center flex-1">
             <p className="text-error">Failed to load weather data</p>
           </div>
@@ -61,26 +61,26 @@ export default function WeatherWidget({ config }: WeatherWidgetProps) {
   }
 
   return (
-    <div className="card bg-base-100 shadow-lg h-full">
+    <div className="widget-card card bg-base-100 h-full">
       <div className="card-body">
-        <h2 className="card-title text-sm">{config.title}</h2>
+        <h2 className="card-title text-sm truncate">{config.title}</h2>
         <div className="flex flex-col items-center justify-center flex-1">
           {/* Weather Icon */}
-          <div className="text-6xl mb-2">{getWeatherIcon(weather.weather_code)}</div>
+          <div className="text-5xl mb-1">{getWeatherIcon(weather.weather_code)}</div>
 
           {/* Temperature */}
-          <div className="text-4xl font-bold">{weather.temperature.toFixed(1)}°C</div>
-          <div className="text-sm text-base-content/60">
+          <div className="text-3xl font-bold">{weather.temperature.toFixed(1)}°C</div>
+          <div className="text-xs text-base-content/60">
             Feels like {weather.apparent_temperature.toFixed(1)}°C
           </div>
 
           {/* Weather Description */}
-          <div className="badge badge-primary badge-lg mt-2">
+          <div className="badge badge-primary mt-1 truncate max-w-full">
             {weather.weather_description}
           </div>
 
           {/* Additional Info */}
-          <div className="grid grid-cols-2 gap-4 mt-4 w-full text-sm">
+          <div className="grid grid-cols-2 gap-2 mt-2 w-full text-xs">
             <div className="flex items-center gap-2">
               <span className="opacity-60">💧</span>
               <span>{weather.humidity}%</span>
@@ -102,7 +102,9 @@ export default function WeatherWidget({ config }: WeatherWidgetProps) {
           </div>
 
           {/* Location */}
-          <div className="text-xs text-base-content/40 mt-3">{weather.location}</div>
+          <div className="text-xs text-base-content/40 mt-3 px-2 w-full overflow-hidden">
+            <div className="truncate text-center">{weather.location}</div>
+          </div>
         </div>
       </div>
     </div>

frontend/src/components/widgets/registry.ts

@@ -7,6 +7,7 @@ import GaugeWidget from './GaugeWidget'
 import AiInsightWidget from './AiInsightWidget'
 import AirQualityWidget from './AirQualityWidget'
 import WeatherWidget from './WeatherWidget'
+import ComfortIndexWidget from './ComfortIndexWidget'
 
 interface WidgetProps {
   config: WidgetConfig
@@ -17,7 +18,8 @@ export const widgetRegistry: Record<WidgetType, ComponentType<WidgetProps>> = {
   'stat': StatWidget,
   'gauge': GaugeWidget,
   'ai-insight': AiInsightWidget,
-  'bar-chart': LineChartWidget, // Placeholder - implement later
+  'bar-chart': LineChartWidget, 
   'air-quality': AirQualityWidget,
   'weather': WeatherWidget,
+  'comfort-index': ComfortIndexWidget,
 }

frontend/src/components/widgets/widget-styles.css

@@ -0,0 +1,25 @@
+/* Widget-specific styling overrides */
+
+/* Reduce card body padding for widgets - default is 2rem (32px), we want less */
+.widget-card .card-body {
+  padding: 1rem; /* 16px instead of 32px */
+}
+
+/* Lighter shadow for widgets */
+.widget-card {
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
+/* Ensure cards fill their container properly */
+.widget-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.widget-card .card-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* Allow flex children to shrink */
+}