From 3d5199258182d20eb1691a26d27add3f29783c4e Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <hi@jhbruhn.de>
Date: Sat, 6 Dec 2025 23:35:16 +0100
Subject: [PATCH] Fix missing status icons in Machine Connection panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add proper Heroicon components to display status indicators in the
Machine Connection panel. The icons were referenced but not rendered,
causing weird padding next to status text.

Changes:
- Import CheckCircleIcon, BoltIcon, PauseCircleIcon, ExclamationTriangleIcon
- Create stateIcons mapping from iconName to Heroicon components
- Fix reference from stateVisual.icon (doesn't exist) to stateVisual.iconName
- Render icon component dynamically based on machine state

Icon mapping:
- ready/complete: CheckCircle (✓)
- active: Bolt (lightning)
- waiting/interrupted: PauseCircle
- error: ExclamationTriangle

This fixes the TypeScript error and displays proper status indicators.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/MachineConnection.tsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/MachineConnection.tsx b/src/components/MachineConnection.tsx
index deb826a..39901e3 100644
--- a/src/components/MachineConnection.tsx
+++ b/src/components/MachineConnection.tsx
@@ -1,5 +1,11 @@
 import { useState } from 'react';
-import { InformationCircleIcon } from '@heroicons/react/24/solid';
+import {
+  InformationCircleIcon,
+  CheckCircleIcon,
+  BoltIcon,
+  PauseCircleIcon,
+  ExclamationTriangleIcon,
+} from '@heroicons/react/24/solid';
 import type { MachineInfo } from '../types/machine';
 import { MachineStatus } from '../types/machine';
 import { ConfirmDialog } from './ConfirmDialog';
@@ -45,6 +51,16 @@ export function MachineConnection({
 
   const stateVisual = getStateVisualInfo(machineStatus);
 
+  // Map icon names to Heroicons
+  const stateIcons = {
+    ready: CheckCircleIcon,
+    active: BoltIcon,
+    waiting: PauseCircleIcon,
+    complete: CheckCircleIcon,
+    interrupted: PauseCircleIcon,
+    error: ExclamationTriangleIcon,
+  };
+
   const statusBadgeColors = {
     idle: 'bg-cyan-100 dark:bg-cyan-900/30 text-cyan-800 dark:text-cyan-300 border-cyan-200 dark:border-cyan-700',
     info: 'bg-cyan-100 dark:bg-cyan-900/30 text-cyan-800 dark:text-cyan-300 border-cyan-200 dark:border-cyan-700',
@@ -126,7 +142,10 @@ export function MachineConnection({
             <div className="flex items-center justify-between mb-2">
               <span className="text-sm font-medium text-gray-600 dark:text-gray-400">Status:</span>
               <span className={`flex items-center gap-2 px-3 py-1.5 rounded-lg font-semibold text-sm ${statusBadgeColors[stateVisual.color as keyof typeof statusBadgeColors] || statusBadgeColors.info}`}>
-                <span className="text-base leading-none">{stateVisual.icon}</span>
+                {(() => {
+                  const Icon = stateIcons[stateVisual.iconName];
+                  return <Icon className="w-4 h-4" />;
+                })()}
                 <span>{machineStatusName}</span>
               </span>
             </div>