url && loaded && setShowOverlay(true)}
>
{url && !error ? (
<>
setLoaded(true)}
onError={() => setError(true)}
/>
{!loaded &&
{/* Cover Image Overlay */}
{showOverlay && url && (
setShowOverlay(false)}
>
{printName && (
)}
);
}
interface PrinterMaintenanceInfo {
due_count: number;
warning_count: number;
total_print_hours: number;
}
// Status summary bar component - uses queryClient to read cached statuses
function StatusSummaryBar({ printers }: { printers: Printer[] | undefined }) {
const queryClient = useQueryClient();
const counts = useMemo(() => {
let printing = 0;
let idle = 0;
let offline = 0;
let loading = 0;
printers?.forEach((printer) => {
const status = queryClient.getQueryData<{ connected: boolean; state: string | null }>(['printerStatus', printer.id]);
if (status === undefined) {
// Status not yet loaded - don't count as offline yet
loading++;
} else if (!status.connected) {
offline++;
} else if (status.state === 'RUNNING') {
printing++;
} else {
idle++;
}
});
return { printing, idle, offline, loading, total: (printers?.length || 0) };
}, [printers, queryClient]);
// Subscribe to query cache changes to re-render when status updates
// Throttled to prevent rapid re-renders from causing tab crashes
const [, setTick] = useState(0);
useEffect(() => {
let pending = false;
const unsubscribe = queryClient.getQueryCache().subscribe(() => {
if (!pending) {
pending = true;
requestAnimationFrame(() => {
setTick(t => t + 1);
pending = false;
});
}
});
return () => unsubscribe();
}, [queryClient]);
if (!printers?.length) return null;
return (
{printName}
)}
{counts.printing > 0 && (
);
}
type SortOption = 'name' | 'status' | 'model' | 'location';
type ViewMode = 'expanded' | 'compact';
/**
* Get human-readable status display text for a printer.
* Uses stg_cur_name for detailed calibration/preparation stages,
* otherwise formats the gcode_state nicely.
*/
function getStatusDisplay(state: string | null | undefined, stg_cur_name: string | null | undefined): string {
// If we have a specific stage name (calibration, heating, etc.), use it
if (stg_cur_name) {
return stg_cur_name;
}
// Format the gcode_state nicely
switch (state) {
case 'RUNNING':
return 'Printing';
case 'PAUSE':
return 'Paused';
case 'FINISH':
return 'Finished';
case 'FAILED':
return 'Failed';
case 'IDLE':
return 'Idle';
default:
return state ? state.charAt(0) + state.slice(1).toLowerCase() : 'Idle';
}
}
function PrinterCard({
printer,
hideIfDisconnected,
maintenanceInfo,
viewMode = 'expanded',
amsThresholds,
}: {
printer: Printer;
hideIfDisconnected?: boolean;
maintenanceInfo?: PrinterMaintenanceInfo;
viewMode?: ViewMode;
amsThresholds?: {
humidityGood: number;
humidityFair: number;
tempGood: number;
tempFair: number;
};
}) {
const queryClient = useQueryClient();
const navigate = useNavigate();
const [showMenu, setShowMenu] = useState(false);
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
const [deleteArchives, setDeleteArchives] = useState(true);
const [showEditModal, setShowEditModal] = useState(false);
const [showFileManager, setShowFileManager] = useState(false);
const [showMQTTDebug, setShowMQTTDebug] = useState(false);
const [showPowerOnConfirm, setShowPowerOnConfirm] = useState(false);
const [showPowerOffConfirm, setShowPowerOffConfirm] = useState(false);
const [showHMSModal, setShowHMSModal] = useState(false);
const [amsHistoryModal, setAmsHistoryModal] = useState<{
amsId: number;
amsLabel: string;
mode: 'humidity' | 'temperature';
} | null>(null);
const { data: status } = useQuery({
queryKey: ['printerStatus', printer.id],
queryFn: () => api.getPrinterStatus(printer.id),
refetchInterval: 30000, // Fallback polling, WebSocket handles real-time
});
// Cache WiFi signal to prevent it disappearing on updates
const [cachedWifiSignal, setCachedWifiSignal] = useState
{counts.printing} printing
)}
{counts.idle > 0 && (
{counts.idle} idle
)}
{counts.offline > 0 && (
{counts.offline} offline
)}
{/* Top row: Image, Name, Menu */}
{/* Badges row - only in expanded mode */}
{viewMode === 'expanded' && (
{/* Delete Confirmation */}
{showDeleteConfirm && (
{/* Printer Model Image */}
})
{/* Menu button */}
{printer.name}
{/* Connection indicator dot for compact mode */} {viewMode === 'compact' && ( )}
{printer.model || 'Unknown Model'}
{/* Nozzle Info - only in expanded */}
{viewMode === 'expanded' && status?.nozzles && status.nozzles[0]?.nozzle_diameter && (
• {status.nozzles[0].nozzle_diameter}mm
)}
{viewMode === 'expanded' && maintenanceInfo && maintenanceInfo.total_print_hours > 0 && (
{showMenu && (
)}
{/* Connection status badge */}
{status?.connected ? (
) : (
)}
Delete Printer
Are you sure you want to delete "{printer.name}"? This will remove all connection settings.
{status.state === 'RUNNING' ? (
{Math.round(status.progress || 0)}%
) : (
) : (
/* Expanded: Full status section */
<>
{/* Current Print or Idle Placeholder */}
{getStatusDisplay(status.state, status.stg_cur_name)}
)}
{/* Cover Image */}
{status.current_print && status.state === 'RUNNING' ? (
<>
{Math.round(status.progress || 0)}%
—
{lastPrint ? (
{status.stg_cur_name || 'Printing'}
{status.subtask_name || status.current_print}
{status.remaining_time != null && status.remaining_time > 0 && (
<>
) : (
<>
Status
{getStatusDisplay(status.state, status.stg_cur_name)}
Last: {lastPrint.print_name || lastPrint.filename} {lastPrint.completed_at && ( • {new Date(lastPrint.completed_at).toLocaleDateString([], { month: 'short', day: 'numeric' })} )}
) : (Ready to print
)} )}
{/* Nozzle temp - combined for dual nozzle */}
);
})()}
{/* AMS Units with Device Icons, Humidity & Temperature */}
{amsData && amsData.length > 0 && viewMode === 'expanded' && (
Left / Right
{Math.round(status.temperatures.nozzle || 0)}°C / {Math.round(status.temperatures.nozzle_2 || 0)}°C
) : ( <>Nozzle
{Math.round(status.temperatures.nozzle || 0)}°C
)}Bed
{Math.round(status.temperatures.bed || 0)}°C
Chamber
{Math.round(status.temperatures.chamber || 0)}°C
{amsData.map((ams) => {
// For dual nozzle printers, determine which nozzle this AMS is connected to
// Use actual ams.id for map lookup (map uses real IDs: 0-3 for AMS, 128+ for AMS-HT)
const mappedExtruderId = amsExtruderMap[String(ams.id)];
// Fallback: normalize ID for conventional mapping (0=R, 1=L)
const normalizedId = ams.id >= 128 ? ams.id - 128 : ams.id;
const extruderId = mappedExtruderId !== undefined
? mappedExtruderId
: normalizedId; // Fallback: AMS 0 → extruder 0 (R), AMS 1 → extruder 1 (L)
// Use printer.nozzle_count as primary source (stable), fallback to nozzle_2 temp
const isDualNozzle = printer.nozzle_count === 2 || status?.temperatures?.nozzle_2 !== undefined;
// extruder 0 = Right, extruder 1 = Left
const isLeftNozzle = extruderId === 1;
const isRightNozzle = extruderId === 0;
// Get colors for the AMS icon (null for empty slots)
const slotColors = ams.tray.map(tray =>
tray.tray_color ? `#${tray.tray_color}` : (tray.tray_type ? '#333' : null)
);
const isHtAms = ams.tray.length === 1;
return (
);
})}
{/* External spool indicator */}
{status.vt_tray && status.vt_tray.tray_type && (
)}
)}
)}
{/* Smart Plug Controls - hidden in compact mode */}
{smartPlug && viewMode === 'expanded' && (
{/* Nozzle badge + AMS device icon */}
{isDualNozzle && (isLeftNozzle || isRightNozzle) && (
{/* Label and filament info */}
{getAmsLabel(ams.id, ams.tray.length)}
{/* Filament types and fill levels */}
{/* Humidity/temp - responsive positioning */}
{(ams.humidity != null || ams.temp != null) && (
{ams.tray.map((tray, i) => (
))}
{tray.tray_type ? (tray.tray_sub_brands || tray.tray_type) : '—'}
{tray.tray_type && tray.remain >= 0 ? `${tray.remain}%` : '—'}
{i < ams.tray.length - 1 && (
·
·
)}
{ams.humidity != null && (
setAmsHistoryModal({
amsId: ams.id,
amsLabel: getAmsLabel(ams.id, ams.tray.length),
mode: 'humidity',
})}
/>
)}
{ams.temp != null && (
setAmsHistoryModal({
amsId: ams.id,
amsLabel: getAmsLabel(ams.id, ams.tray.length),
mode: 'temperature',
})}
/>
)}
)}
External
{status.vt_tray.tray_sub_brands || status.vt_tray.tray_type || 'Spool'}
{/* Plug name and status */}
{smartPlug.auto_off_executed ? 'Auto-off done' : 'Auto-off'}
{printer.ip_address}
{printer.serial_number}
Add Printer
{/* Discovery Section */}
{isDocker && (
setSubnet(e.target.value)}
placeholder="192.168.1.0/24"
disabled={discovering}
/>
)}
{discoveryError && (
Docker detected. Enter your printer's subnet in CIDR notation.
Requires network_mode: host in docker-compose.yml.
{discoveryError}
)}
{newPrinters.length > 0 && (
{newPrinters.map((printer) => (
)}
{discovering && (
selectPrinter(printer)}
>
))}
{printer.name || printer.serial}
{mapModelCode(printer.model) || 'Unknown'} • {printer.ip_address}
{isDocker ? 'Scanning subnet for Bambu printers...' : 'Scanning network...'}
)} {hasScanned && !discovering && discovered.length === 0 && (No printers found{isDocker ? ' in the specified subnet' : ' on the network'}.
)} {hasScanned && !discovering && discovered.length > 0 && newPrinters.length === 0 && (All discovered printers are already configured.
)}Edit Printer
{printer.name}
{plugStatus && (
{plugStatus.state || '?'}
)}
Printers
{/* Sort dropdown */}
{/* View mode toggle */}
{/* Power dropdown for offline printers with smart plugs */}
{hideDisconnected && Object.keys(smartPlugByPrinter).length > 0 && (
{isLoading ? (
{showPowerDropdown && (
<>
{/* Backdrop to close dropdown */}
setShowPowerDropdown(false)}
/>
{
setPoweringOn(plugId);
powerOnMutation.mutate(plugId);
}}
isPowering={poweringOn === smartPlugByPrinter[printer.id]?.id}
/>
))}
{printers?.filter(p => smartPlugByPrinter[p.id]).length === 0 && (
)}
)}
Offline printers with smart plugs
{printers?.filter(p => smartPlugByPrinter[p.id]).map(printer => (
No printers with smart plugs
)}
Loading printers...
) : printers?.length === 0 ? (
No printers configured yet
{Object.entries(groupedPrinters).map(([location, locationPrinters]) => (
))}
) : (
/* Regular grid view */
{location} ({locationPrinters.length})
{locationPrinters.map((printer) => (
{sortedPrinters.map((printer) => (
)}
{showAddModal && (