{children}
{isVisible && (
)}
);
}
// Dual-nozzle hover card showing L and R nozzle details side by side
function DualNozzleHoverCard({ leftSlot, rightSlot, activeNozzle, filamentInfo, children }: {
leftSlot?: import('../api/client').NozzleRackSlot;
rightSlot?: import('../api/client').NozzleRackSlot;
activeNozzle: 'L' | 'R';
filamentInfo?: Record
{isEmpty ? (
{/* Arrow pointer */}
Slot {index + 1} — Empty
) : (
{/* Diameter */}
)}
{t('printers.nozzleDiameter')}
{slot.nozzle_diameter} mm
{/* Type */}
{typeFull && (
{t('printers.nozzleType')}
{typeFull}
)}
{/* Flow (hide if empty) */}
{flowFull && (
{t('printers.nozzleFlow')}
{flowFull}
)}
{/* Status badge */}
{t('printers.nozzleStatus')}
{activeStatus ? t('printers.nozzleActive') : isMounted ? t('printers.nozzleMounted') : t('printers.nozzleDocked')}
{/* Wear (hide if null) */}
{slot.wear != null && (
{t('printers.nozzleWear')}
{slot.wear}%
)}
{/* Max Temp (hide if 0) */}
{slot.max_temp > 0 && (
{t('printers.nozzleMaxTemp')}
{slot.max_temp}°C
)}
{/* Serial (hide if empty) */}
{slot.serial_number && (
{t('printers.nozzleSerial')}
{slot.serial_number}
)}
{/* Filament: material type + color swatch (hide if no color) */}
{(filamentCss || slot.filament_type) && (
{t('printers.nozzleFilament')}
)}
{filamentCss && (
)}
{filamentName || slot.filament_type || slot.filament_id || ''}
{side === 'L' ? t('common.left') : t('common.right')}
{slot.nozzle_diameter && (
{t('printers.nozzleDiameter')}
{slot.nozzle_diameter} mm
)}
{typeFull && (
{t('printers.nozzleType')}
{typeFull}
)}
{flowFull && (
{t('printers.nozzleFlow')}
{flowFull}
)}
{t('printers.nozzleStatus')}
{isActive ? t('printers.nozzleActive') : t('printers.nozzleIdle')}
{slot.wear != null && (
{t('printers.nozzleWear')}
{slot.wear}%
)}
{/* Serial and max temp only available on the right (removable) nozzle */}
{side === 'R' && slot.max_temp > 0 && (
{t('printers.nozzleMaxTemp')}
{slot.max_temp}°C
)}
{side === 'R' && slot.serial_number && (
{t('printers.nozzleSerial')}
{slot.serial_number}
)}
{(filamentCss || slot.filament_type || slot.filament_id) && (
{t('printers.nozzleFilament')}
)}
{filamentCss && (
)}
{filamentName || slot.filament_type || slot.filament_id || ''}
{children}
{isVisible && (
{/* Arrow pointer */}
)}
);
}
// H2C Nozzle Rack Card — compact single row showing 6-position tool-changer dock
function NozzleRackCard({ slots, filamentInfo }: { slots: import('../api/client').NozzleRackSlot[]; filamentInfo?: Record
{leftSlot && renderColumn(leftSlot, 'L')}
{leftSlot && rightSlot && }
{rightSlot && renderColumn(rightSlot, 'R')}
{t('printers.nozzleRack')}
{rackSlots.map((slot, i) => {
const isEmpty = !slot.nozzle_diameter && !slot.nozzle_type;
const filamentBg = !isEmpty ? parseFilamentColor(slot.filament_color) : null;
const lightBg = filamentBg ? isLightColor(slot.filament_color) : false;
return (
= 0 ? slot.id : `empty-${i}`} slot={slot} index={i} filamentName={slot.filament_id ? filamentInfo?.[slot.filament_id]?.name : undefined}>
);
})}
{isEmpty ? '—' : (slot.nozzle_diameter || '?')}
{/* Physical rack position, so "swap the nozzle in slot 4" can be
acted on without counting chips. Sits below the chip rather
than inside it: the chip is barely wider than its own
diameter text and already carries that over a
filament-coloured background. */}
{i + 1}
cacheBustedUrl && loaded && setShowOverlay(true)}
>
{cacheBustedUrl && !error ? (
<>
setLoaded(true)}
onError={() => setError(true)}
/>
{!loaded &&
{/* Cover Image Overlay */}
{showOverlay && cacheBustedUrl && (
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 { t } = useTranslation();
const queryClient = useQueryClient();
// Subscribe to query cache changes to re-render when status updates
// Throttled to prevent rapid re-renders from causing tab crashes
const [cacheTick, setCacheTick] = useState(0);
useEffect(() => {
let pending = false;
const unsubscribe = queryClient.getQueryCache().subscribe(() => {
if (!pending) {
pending = true;
requestAnimationFrame(() => {
setCacheTick(t => t + 1);
pending = false;
});
}
});
return () => unsubscribe();
}, [queryClient]);
const { counts, nextFinish } = useMemo(() => {
let printing = 0;
let paused = 0;
let finished = 0;
let idle = 0;
let offline = 0;
let loading = 0;
let error = 0;
let nextPrinterName: string | null = null;
let nextRemainingMin: number | null = null;
let nextProgress: number = 0;
printers?.forEach((printer) => {
const status = queryClient.getQueryData<{ connected: boolean; state: string | null; remaining_time: number | null; progress: number | null; hms_errors?: HMSError[] }>(['printerStatus', printer.id]);
if (status === undefined) {
// Status not yet loaded - don't count as offline yet
loading++;
} else if (!status.connected) {
offline++;
} else {
// Count printers with active HMS errors as problems
const knownHmsCount =
status.hms_errors ? filterKnownHMSErrors(status.hms_errors).length : 0;
if (knownHmsCount > 0) {
error++;
}
switch (status.state) {
case 'RUNNING':
printing++;
if (status.remaining_time != null && status.remaining_time > 0) {
if (nextRemainingMin === null || status.remaining_time < nextRemainingMin) {
nextRemainingMin = status.remaining_time;
nextPrinterName = printer.name;
nextProgress = status.progress || 0;
}
}
break;
case 'PAUSE':
paused++;
break;
case 'FINISH':
finished++;
break;
case 'FAILED':
// FAILED is the printer's terminal gcode_state after a print stops —
// including user cancellations, where there's no actual fault. Only
// count it as a "problem" when an HMS error is also active; otherwise
// it's just a print that ended unsuccessfully and the plate needs
// clearing (same as FINISH from the operator's perspective).
if (knownHmsCount > 0) {
// Already counted above
} else {
finished++;
}
break;
default:
idle++;
break;
}
}
});
return {
counts: { printing, paused, finished, idle, offline, loading, error, total: (printers?.length || 0) },
nextFinish: nextPrinterName && nextRemainingMin ? { name: nextPrinterName, remainingMin: nextRemainingMin, progress: nextProgress } : null,
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [printers, queryClient, cacheTick]);
if (!printers?.length) return null;
const badges: { count: number; dot: string; label: string }[] = [
{ count: counts.printing, dot: 'bg-bambu-green animate-pulse', label: t('printers.status.printing').toLowerCase() },
{ count: counts.paused, dot: 'bg-status-warning', label: t('printers.status.paused', 'paused').toLowerCase() },
{ count: counts.finished, dot: 'bg-blue-400', label: t('printers.status.finished', 'finished').toLowerCase() },
{ count: counts.idle, dot: counts.idle > 0 ? 'bg-bambu-green' : 'bg-gray-500', label: t('printers.status.available').toLowerCase() },
{ count: counts.error, dot: 'bg-status-error', label: t('printers.status.problem').toLowerCase() },
{ count: counts.offline, dot: 'bg-gray-400', label: t('printers.status.offline').toLowerCase() },
];
return (
{printName}
)}
{badges.map(({ count, dot, label }) => count > 0 && (
{Math.round(nextFinish.progress)}%
({formatDuration(nextFinish.remainingMin * 60)})
)}
);
}
type SortOption = 'name' | 'status' | 'model' | 'location' | 'eta';
type ViewMode = 'expanded' | 'compact';
type ToolbarDropdownOption
{count} {label}
))}
{nextFinish && (
<>
{t('printers.nextAvailable')}:
{nextFinish.name}
{isOpen && (
<>
setIsOpen(false)} />
);
}
function ToolbarMenu({
label,
icon,
children,
}: {
label: string;
icon: React.ReactNode;
children: React.ReactNode;
}) {
const [isOpen, setIsOpen] = useState(false);
return (
{options.map(option => (
))}
)}
{isOpen && (
<>
(null);
const [coords, setCoords] = useState<{ top: number; left: number } | null>(null);
const [customValue, setCustomValue] = useState('');
// Anchor to the trigger (the popover's DOM parent before portaling) so we
// can position via fixed coords. Portaling to document.body escapes
// ancestor stacking contexts — sibling PrinterCard wrappers create their
// own contexts and would otherwise cover the popover even at z-[60].
useLayoutEffect(() => {
const trigger = anchorRef.current?.parentElement;
if (!trigger) return;
const measure = () => {
const rect = trigger.getBoundingClientRect();
setCoords(computePopoverPosition({
triggerRect: rect,
popoverWidth,
estimatedHeight: popoverHeight,
horizontalAlign: 'center',
}));
};
measure();
window.addEventListener('resize', measure);
window.addEventListener('scroll', measure, true);
return () => {
window.removeEventListener('resize', measure);
window.removeEventListener('scroll', measure, true);
};
}, [popoverWidth, popoverHeight]);
const showCustomInput = unit !== undefined;
const submitCustom = () => {
const value = Number(customValue);
if (!Number.isFinite(value)) return;
const bounded = Math.min(customMax ?? value, Math.max(customMin ?? value, value));
onSubmit?.(Math.round(bounded));
};
return (
<>
{createPortal(
<>
);
}
const STATUS_GROUP_ORDER: string[] = ['error', 'printing', 'paused', 'finished', 'idle', 'offline'];
const STATUS_GROUP_META: Record = {
error: { labelKey: 'printers.status.problem', dot: 'bg-status-error' },
printing: { labelKey: 'printers.status.printing', dot: 'bg-bambu-green animate-pulse' },
paused: { labelKey: 'printers.status.paused', dot: 'bg-status-warning' },
finished: { labelKey: 'printers.status.finished', dot: 'bg-blue-400' },
idle: { labelKey: 'printers.status.idle', dot: 'bg-bambu-green' },
offline: { labelKey: 'printers.status.offline', dot: 'bg-gray-400' },
};
/** Classify a printer into one of the UI status buckets. */
function classifyPrinterStatus(
status: { connected: boolean; state: string | null; hms_errors?: HMSError[] } | undefined,
): PrinterState {
if (!status?.connected) return 'offline';
const hmsErrors = status.hms_errors ? filterKnownHMSErrors(status.hms_errors) : [];
if (hmsErrors.length > 0) return 'error';
switch (status.state) {
case 'RUNNING': return 'printing';
case 'PAUSE': return 'paused';
case 'FINISH': return 'finished';
// FAILED without an active HMS error is the printer's terminal state after
// any unsuccessful end — including user-cancellations. Treat the same as
// FINISH for grouping/badging purposes; only escalate to "error" when an
// HMS code is actually attached (handled by the early-return above).
case 'FAILED': return 'finished';
default: return 'idle';
}
}
/**
* 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';
}
}
// Bambu models that ship with an enclosure chamber fan (firmware field
// `big_fan2_speed`). Open-frame models (A1 / A1 Mini / A2L / P1P) have no
// chamber fan — `big_fan2_speed` is meaningless / always 0 there, so the
// widget is hidden in fanItems instead of rendered greyed-out.
const MODELS_WITH_CHAMBER_FAN: ReadonlySet = new Set([
'X1C',
'X1',
'X1E',
'X2D',
'P1S',
'P2S',
'H2D',
'H2D Pro',
'H2C',
'H2S',
]);
// On the P2S/X2D, the enclosure fan (big_fan2 / airduct part id 3) is a
// dedicated chamber EXHAUST fan: it's its own control and stays the same
// regardless of cooling/heating mode (unlike the aux fan, id 2, which a flap
// re-tasks between part-cooling and chamber-filter recirculation). Bambu's own
// firmware/UI and Bambu Studio (FAN_CHAMBER_0_IDX -> "Exhaust") label it
// "Exhaust" on these models. Other enclosed models (X1/P1S/H2*) keep "Chamber".
const MODELS_WITH_EXHAUST_LABEL: ReadonlySet = new Set([
'P2S',
'X2D',
]);
// Map SSDP model codes to display names
function mapModelCode(ssdpModel: string | null): string {
if (!ssdpModel) return '';
const modelMap: Record = {
// H2 Series
'O1D': 'H2D',
'O1E': 'H2D Pro',
'O2D': 'H2D Pro',
'O1C': 'H2C',
'O1C2': 'H2C',
'O1S': 'H2S',
// X1 Series
'BL-P001': 'X1C',
'BL-P002': 'X1',
'BL-P003': 'X1E',
// X2 Series
'N6': 'X2D',
// A2 Series
'N9': 'A2L',
// P Series
'C11': 'P1S',
'C12': 'P1P',
'C13': 'P2S',
// A1 Series
'N2S': 'A1',
'N1': 'A1 Mini',
// Direct matches
'X1C': 'X1C',
'X1': 'X1',
'X1E': 'X1E',
'X2D': 'X2D',
'P1S': 'P1S',
'P1P': 'P1P',
'P2S': 'P2S',
'A1': 'A1',
'A1 Mini': 'A1 Mini',
'A2L': 'A2L',
'H2D': 'H2D',
'H2D Pro': 'H2D Pro',
'H2C': 'H2C',
'H2S': 'H2S',
};
return modelMap[ssdpModel] || ssdpModel;
}
// ─── AMS Name Hover Card ──────────────────────────────────────────────────────
// Wraps the AMS label (e.g. "AMS-A") and shows a popup with:
// • User-defined friendly name (editable, protected by printers:update)
// • AMS serial number
// • AMS firmware version
export function AmsNameHoverCard({
ams,
printerId,
label,
amsLabels,
canEdit,
onSaved,
children,
}: {
ams: import('../api/client').AMSUnit;
printerId: number;
label: string; // auto-generated label, e.g. "AMS-A"
amsLabels?: Record;
canEdit: boolean;
onSaved: () => void;
children: React.ReactNode;
}) {
const { t } = useTranslation();
const [isVisible, setIsVisible] = useState(false);
const [position, setPosition] = useState<'top' | 'bottom'>('top');
const [editValue, setEditValue] = useState('');
const [isSaving, setIsSaving] = useState(false);
const [saveError, setSaveError] = useState(null);
const [isInputFocused, setIsInputFocused] = useState(false);
const triggerRef = useRef(null);
const cardRef = useRef(null);
const timeoutRef = useRef | null>(null);
useEffect(() => {
if (isVisible) {
setEditValue(amsLabels?.[ams.id] ?? '');
setSaveError(null);
requestAnimationFrame(() => {
if (triggerRef.current && cardRef.current) {
const rect = triggerRef.current.getBoundingClientRect();
const spaceAbove = rect.top - 56;
const spaceBelow = window.innerHeight - rect.bottom;
setPosition(spaceAbove < cardRef.current.offsetHeight + 12 && spaceBelow > spaceAbove ? 'bottom' : 'top');
}
});
}
}, [isVisible, amsLabels, ams.id]);
const handleMouseEnter = () => {
if (timeoutRef.current) clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(() => setIsVisible(true), 80);
};
const handleMouseLeave = () => {
if (timeoutRef.current) clearTimeout(timeoutRef.current);
if (!isInputFocused) {
timeoutRef.current = setTimeout(() => setIsVisible(false), 200);
}
};
useEffect(() => () => { if (timeoutRef.current) clearTimeout(timeoutRef.current); }, []);
const handleSave = async () => {
if (!canEdit) return;
setIsSaving(true);
setSaveError(null);
try {
const trimmed = editValue.trim();
if (trimmed) {
await api.saveAmsLabel(printerId, ams.id, trimmed, ams.serial_number);
} else {
await api.deleteAmsLabel(printerId, ams.id, ams.serial_number);
}
onSaved();
setIsVisible(false);
} catch (err) {
setSaveError(err instanceof Error ? err.message : String(err));
} finally {
setIsSaving(false);
}
};
const handleClear = async () => {
if (!canEdit) return;
setIsSaving(true);
setSaveError(null);
try {
await api.deleteAmsLabel(printerId, ams.id, ams.serial_number);
onSaved();
setIsVisible(false);
} catch (err) {
setSaveError(err instanceof Error ? err.message : String(err));
} finally {
setIsSaving(false);
}
};
return (
= {
'PLA': { n3f: 45, n3s: 45, n3f_hours: 12, n3s_hours: 12 },
'PETG': { n3f: 65, n3s: 65, n3f_hours: 12, n3s_hours: 12 },
'TPU': { n3f: 65, n3s: 75, n3f_hours: 12, n3s_hours: 18 },
'ABS': { n3f: 65, n3s: 80, n3f_hours: 12, n3s_hours: 8 },
'ASA': { n3f: 65, n3s: 80, n3f_hours: 12, n3s_hours: 8 },
'PA': { n3f: 65, n3s: 85, n3f_hours: 12, n3s_hours: 12 },
'PC': { n3f: 65, n3s: 80, n3f_hours: 12, n3s_hours: 8 },
'PVA': { n3f: 65, n3s: 85, n3f_hours: 12, n3s_hours: 18 },
};
// How much the printer card's body type and icons grow at each card size
// (#1848). S is the dense fleet view and M is the default, so both stay at
// 1.0 and an existing install looks identical until the user picks L or XL --
// the same control the request asked to have this follow.
const CARD_BODY_SCALE: Record = { 1: 1, 2: 1, 3: 1.2, 4: 1.4 };
// The scaled sizes, handed to the card subtree as custom properties. Every
// converted class names its old fixed value as the fallback, so anything that
// renders outside a card root -- the portalled temperature popover -- keeps
// exactly the size it has today.
function buildCardScaleStyle(cardSize: number): React.CSSProperties {
const scale = CARD_BODY_SCALE[cardSize] ?? 1;
// Rounded to a tenth so the values stay readable in devtools.
const px = (base: number) => `${Math.round(base * scale * 10) / 10}px`;
return {
'--pc-t8': px(8),
'--pc-t9': px(9),
'--pc-t10': px(10),
'--pc-t11': px(11),
'--pc-i2': px(8),
'--pc-i25': px(10),
'--pc-i3': px(12),
'--pc-i35': px(14),
'--pc-i4': px(16),
'--pc-i5': px(20),
'--pc-i7': px(28),
} as React.CSSProperties;
}
function PrinterCard({
printer,
hideIfDisconnected,
maintenanceInfo,
viewMode = 'expanded',
cardSize = 2,
amsThresholds,
spoolmanEnabled = false,
linkedSpools,
spoolmanUrl,
spoolmanSyncMode,
onGetAssignment,
onUnassignSpool,
spoolmanSpools,
spoolmanSlotAssignments,
spoolmanLoading = false,
onUnassignSpoolmanSpool,
timeFormat = 'system',
cameraViewMode = 'window',
onOpenEmbeddedCamera,
checkPrinterFirmware = true,
dryingPresets = DRYING_PRESETS,
requirePlateClear = false,
selectionMode = false,
isSelected = false,
onToggleSelect,
onOpenCompactCard,
nozzleTempPresets = NOZZLE_TEMP_DEFAULTS,
bedTempPresets = BED_TEMP_DEFAULTS,
chamberTempPresets = CHAMBER_TEMP_DEFAULTS,
fanSpeedPresets = FAN_SPEED_DEFAULTS,
aiDetectionEnabled = false,
aiDetection,
aiLastError = null,
}: {
printer: Printer;
hideIfDisconnected?: boolean;
maintenanceInfo?: PrinterMaintenanceInfo;
viewMode?: ViewMode;
cardSize?: number;
amsThresholds?: {
humidityGood: number;
humidityFair: number;
tempGood: number;
tempFair: number;
};
spoolmanEnabled?: boolean;
hasUnlinkedSpools?: boolean;
linkedSpools?: Record;
spoolmanUrl?: string | null;
spoolmanSyncMode?: string | null;
spoolAssignments?: SpoolAssignment[];
onGetAssignment?: (printerId: number, amsId: number, trayId: number) => SpoolAssignment | undefined;
onUnassignSpool?: (printerId: number, amsId: number, trayId: number) => void;
spoolmanSpools?: InventorySpool[];
spoolmanSlotAssignments?: SpoolmanSlotAssignmentRow[];
spoolmanLoading?: boolean;
onUnassignSpoolmanSpool?: (spoolmanSpoolId: number) => void;
timeFormat?: 'system' | '12h' | '24h';
cameraViewMode?: 'window' | 'embedded';
onOpenEmbeddedCamera?: (printerId: number, printerName: string) => void;
checkPrinterFirmware?: boolean;
dryingPresets?: Record;
requirePlateClear?: boolean;
selectionMode?: boolean;
isSelected?: boolean;
onToggleSelect?: (id: number) => void;
onOpenCompactCard?: (id: number) => void;
nozzleTempPresets?: readonly [number, number, number];
bedTempPresets?: readonly [number, number, number];
chamberTempPresets?: readonly [number, number, number];
fanSpeedPresets?: readonly [number, number, number];
aiDetectionEnabled?: boolean;
aiDetection?: { class: string; frame_count: number; score: number };
aiLastError?: string | null;
}) {
const { t } = useTranslation();
const queryClient = useQueryClient();
const navigate = useNavigate();
const { showToast } = useToast();
const { hasPermission } = useAuth();
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 [haToggleConfirm, setHaToggleConfirm] = useState(null);
const [showHMSModal, setShowHMSModal] = useState(false);
// #1546: AI failure detection modal — opens from the AI badge.
const [showAiModal, setShowAiModal] = useState(false);
// #1762: AMS Filament Backup status / control modal — opens from the badge.
const [amsBackupModalOpen, setAmsBackupModalOpen] = useState(false);
// External spool visibility (#1782) — browser-local, per printer. Read once
// per card; the toggle that writes it is the only thing that changes it.
const [externalSpoolHidden, setExternalSpoolHidden] = useState(() =>
isExternalSpoolHidden(printer.id),
);
const toggleExternalSpool = useCallback(() => {
setExternalSpoolHidden((prev) => {
const next = !prev;
persistExternalSpoolHidden(printer.id, next);
return next;
});
}, [printer.id]);
const [showStopConfirm, setShowStopConfirm] = useState(false);
const [showPauseConfirm, setShowPauseConfirm] = useState(false);
const [showSpeedMenu, setShowSpeedMenu] = useState(null);
const [showAirductMenu, setShowAirductMenu] = useState(null);
const [showBedJogMenu, setShowBedJogMenu] = useState(null);
const [statusControlMenu, setStatusControlMenu] = useState(null);
const [bedJogStep, setBedJogStep] = useState(10);
const [showResumeConfirm, setShowResumeConfirm] = useState(false);
const [showSkipObjectsModal, setShowSkipObjectsModal] = useState(false);
const [showUploadForPrint, setShowUploadForPrint] = useState(false);
const [showPrinterInfo, setShowPrinterInfo] = useState(false);
const [showDiagnostic, setShowDiagnostic] = useState(false);
const closePrinterInfo = useCallback(() => setShowPrinterInfo(false), []);
const [printAfterUpload, setPrintAfterUpload] = useState<{ id: number; filename: string } | null>(null);
// AMS drying popover state: which AMS unit has the popover open
const [dryingPopoverAmsId, setDryingPopoverAmsId] = useState(null);
const [dryingPopoverModuleType, setDryingPopoverModuleType] = useState('n3f');
const [dryingFilament, setDryingFilament] = useState('PLA');
const [dryingTemp, setDryingTemp] = useState(50);
const [dryingDuration, setDryingDuration] = useState(4);
const [dryingRotateTray, setDryingRotateTray] = useState(false);
const [dryingPopoverPos, setDryingPopoverPos] = useState<{ top: number; left: number } | null>(null);
// Which AMS we are waiting on to actually enter a drying cycle (#2533). Held as
// an object rather than a bare id so restarting drying on the SAME unit produces
// a new identity and rearms the timeout below.
const [dryStartWatch, setDryStartWatch] = useState<{ amsId: number } | null>(null);
const [isDraggingFile, setIsDraggingFile] = useState(false);
const [isDropUploading, setIsDropUploading] = useState(false);
const printerActionsMenuRef = useRef(null);
const dragCounterRef = useRef(0);
const [amsHistoryModal, setAmsHistoryModal] = useState<{
amsId: number;
amsLabel: string;
mode: 'humidity' | 'temperature';
} | null>(null);
const [heaterHistoryModal, setHeaterHistoryModal] = useState<{
initialKind: HeaterSensorKind;
availableKinds: HeaterSensorKind[];
} | null>(null);
const [linkSpoolModal, setLinkSpoolModal] = useState<{
tagUid: string;
trayUuid: string;
printerId: number;
amsId: number;
trayId: number;
} | null>(null);
const [assignSpoolModal, setAssignSpoolModal] = useState<{
printerId: number;
amsId: number;
trayId: number;
trayInfo: { type: string; color: string; location: string; material?: string; profile?: string };
} | null>(null);
const [configureSlotModal, setConfigureSlotModal] = useState<{
amsId: number;
trayId: number;
trayCount: number;
trayType?: string;
trayColor?: string;
traySubBrands?: string;
trayInfoIdx?: string;
extruderId?: number;
caliIdx?: number | null;
savedPresetId?: string;
} | null>(null);
const [showFirmwareModal, setShowFirmwareModal] = useState(false);
const [plateCheckResult, setPlateCheckResult] = useState<{
is_empty: boolean;
confidence: number;
difference_percent: number;
message: string;
debug_image_url?: string;
needs_calibration: boolean;
light_warning?: boolean;
reference_count?: number;
max_references?: number;
roi?: { x: number; y: number; w: number; h: number };
} | null>(null);
const [isCheckingPlate, setIsCheckingPlate] = useState(false);
const [isCalibrating, setIsCalibrating] = useState(false);
const [editingRoi, setEditingRoi] = useState<{ x: number; y: number; w: number; h: number } | null>(null);
const [isSavingRoi, setIsSavingRoi] = useState(false);
const [plateCheckLightWasOff, setPlateCheckLightWasOff] = useState(false);
const { data: status } = useQuery({
queryKey: ['printerStatus', printer.id],
queryFn: () => api.getPrinterStatus(printer.id),
refetchInterval: 30000, // Fallback polling, WebSocket handles real-time
});
// Check for firmware updates (cached for 5 minutes, can be disabled in settings)
const { data: firmwareInfo } = useQuery({
queryKey: ['firmwareUpdate', printer.id],
queryFn: () => firmwareApi.checkPrinterUpdate(printer.id),
staleTime: 5 * 60 * 1000,
refetchInterval: 5 * 60 * 1000,
enabled: checkPrinterFirmware && hasPermission('firmware:read'),
});
// Collect unique tray_info_idx values for cloud filament info lookup
const trayInfoIds = useMemo(() => {
const ids = new Set();
if (status?.ams) {
for (const ams of status.ams) {
for (const tray of ams.tray || []) {
if (tray.tray_info_idx) {
ids.add(tray.tray_info_idx);
}
}
}
}
for (const vt of status?.vt_tray ?? []) {
if (vt.tray_info_idx) ids.add(vt.tray_info_idx);
}
if (status?.nozzle_rack) {
for (const slot of status.nozzle_rack) {
if (slot.filament_id) {
ids.add(slot.filament_id);
}
}
}
return Array.from(ids);
}, [status?.ams, status?.vt_tray, status?.nozzle_rack]);
// Collect loaded filament types for queue widget filtering
const loadedFilamentTypes = useMemo(() => {
const types = new Set();
if (status?.ams) {
for (const ams of status.ams) {
for (const tray of ams.tray || []) {
if (tray.tray_type) types.add(tray.tray_type.toUpperCase());
}
}
}
for (const vt of status?.vt_tray ?? []) {
if (vt.tray_type) types.add(vt.tray_type.toUpperCase());
}
return types;
}, [status?.ams, status?.vt_tray]);
// Collect loaded filament type+color pairs for queue widget override matching
// Format: "TYPE:rrggbb" (e.g., "PETG:ffffff") — mirrors backend _count_override_color_matches()
const loadedFilaments = useMemo(() => {
const filaments = new Set();
if (status?.ams) {
for (const ams of status.ams) {
for (const tray of ams.tray || []) {
if (tray.tray_type && tray.tray_color) {
const color = tray.tray_color.replace('#', '').toLowerCase().slice(0, 6);
filaments.add(`${tray.tray_type.toUpperCase()}:${color}`);
}
}
}
}
for (const vt of status?.vt_tray ?? []) {
if (vt.tray_type && vt.tray_color) {
const color = vt.tray_color.replace('#', '').toLowerCase().slice(0, 6);
filaments.add(`${vt.tray_type.toUpperCase()}:${color}`);
}
}
return filaments;
}, [status?.ams, status?.vt_tray]);
// Collect loaded type+color+tray_info_idx triples for variant-aware force-color
// matching. Format: "TYPE:rrggbb:idx" (idx "" for custom/third-party spools) —
// distinguishes Bambu PLA sub-variants that share a base type+colour (#2650).
const loadedVariants = useMemo(() => {
const variants = new Set();
if (status?.ams) {
for (const ams of status.ams) {
for (const tray of ams.tray || []) {
if (tray.tray_type && tray.tray_color) {
const color = tray.tray_color.replace('#', '').toLowerCase().slice(0, 6);
variants.add(`${tray.tray_type.toUpperCase()}:${color}:${tray.tray_info_idx || ''}`);
}
}
}
}
for (const vt of status?.vt_tray ?? []) {
if (vt.tray_type && vt.tray_color) {
const color = vt.tray_color.replace('#', '').toLowerCase().slice(0, 6);
variants.add(`${vt.tray_type.toUpperCase()}:${color}:${vt.tray_info_idx || ''}`);
}
}
return variants;
}, [status?.ams, status?.vt_tray]);
// Fetch cloud filament info for tooltips (name includes color, also has K value)
const { data: filamentInfo } = useQuery({
queryKey: ['filamentInfo', trayInfoIds],
queryFn: () => api.getFilamentInfo(trayInfoIds),
enabled: trayInfoIds.length > 0,
staleTime: 5 * 60 * 1000, // 5 minutes
});
// Fetch slot preset mappings (stores preset name for user-configured slots)
const { data: slotPresets } = useQuery({
queryKey: ['slotPresets', printer.id],
queryFn: () => api.getSlotPresets(printer.id),
staleTime: 2 * 60 * 1000, // 2 minutes
});
// Fetch plate list for the archive linked to the active print (#881 follow-up).
// Only queried when there's a running print backed by an archive; shared
// React Query cache with the Queue / Archives pages keeps it cheap.
const activeArchiveId =
(status?.state === 'RUNNING' || status?.state === 'PAUSE') ? status?.current_archive_id ?? null : null;
const { data: activeArchivePlates } = useQuery({
queryKey: ['archive-plates', activeArchiveId],
queryFn: () => api.getArchivePlates(activeArchiveId!),
enabled: activeArchiveId != null,
staleTime: 5 * 60 * 1000,
});
const activePlateLabel = (() => {
if (!activeArchivePlates?.is_multi_plate || status?.current_plate_id == null) return null;
const plate = activeArchivePlates.plates.find(p => p.index === status.current_plate_id);
return plate?.name || t('printers.plateNumber', 'Plate {{number}}', { number: status.current_plate_id });
})();
// Fetch user-defined AMS friendly names from the database
const { data: amsLabels, refetch: refetchAmsLabels } = useQuery({
queryKey: ['amsLabels', printer.id],
queryFn: () => api.getAmsLabels(printer.id),
staleTime: 5 * 60 * 1000, // 5 minutes
});
// Cache WiFi signal to prevent it disappearing on updates
const [cachedWifiSignal, setCachedWifiSignal] = useState(null);
useEffect(() => {
if (status?.wifi_signal != null) {
setCachedWifiSignal(status.wifi_signal);
}
}, [status?.wifi_signal]);
const wifiSignal = status?.wifi_signal ?? cachedWifiSignal;
// Cache connected state to prevent flicker when status briefly becomes undefined
const cachedConnected = useRef(undefined);
useEffect(() => {
if (status?.connected !== undefined) {
cachedConnected.current = status.connected;
}
}, [status?.connected]);
const isConnected = status?.connected ?? cachedConnected.current;
// Cache ams_extruder_map to prevent L/R indicators bouncing on updates
const cachedAmsExtruderMap = useRef>({});
useEffect(() => {
if (status?.ams_extruder_map && Object.keys(status.ams_extruder_map).length > 0) {
cachedAmsExtruderMap.current = status.ams_extruder_map;
}
}, [status?.ams_extruder_map]);
const amsExtruderMap = (status?.ams_extruder_map && Object.keys(status.ams_extruder_map).length > 0)
? status.ams_extruder_map
: cachedAmsExtruderMap.current;
// Cache AMS data to prevent it disappearing on idle/offline printers
const cachedAmsData = useRef([]);
useEffect(() => {
if (status?.ams && status.ams.length > 0) {
cachedAmsData.current = status.ams;
}
}, [status?.ams]);
const amsData = (status?.ams && status.ams.length > 0) ? status.ams : cachedAmsData.current;
// Confirm a drying cycle actually started (#2533). Firmware answers
// ams_filament_drying with result=success even when it then silently declines,
// and P1-family firmware never publishes dry_sf_reason — so the server-side
// reason guard is blind there and the card just sits unchanged. Watch the unit
// after the ack: leaving DryStatus 0 means the cycle is live, staying there
// means the printer took the command and dropped it.
useEffect(() => {
if (!dryStartWatch) return;
const unit = amsData.find(a => a.id === dryStartWatch.amsId);
if (unit && (unit.dry_time > 0 || unit.dry_status > 0)) setDryStartWatch(null);
}, [dryStartWatch, amsData]);
// Deps deliberately exclude amsData: status pushes arrive continuously and would
// otherwise rearm the timeout on every frame, so it would never elapse.
useEffect(() => {
if (!dryStartWatch) return;
const timer = setTimeout(() => {
setDryStartWatch(null);
showToast(t('printers.drying.toastNotStarted'), 'error');
}, DRY_START_CONFIRM_MS);
return () => clearTimeout(timer);
}, [dryStartWatch, showToast, t]);
// Cache tray_now to prevent flickering when undefined values come in
// Valid tray IDs: 0-253 for AMS, 254 for external spool
// tray_now=255 means "no tray loaded" (Bambu protocol sentinel) — never active
const cachedTrayNow = useRef(undefined);
const currentTrayNow = status?.tray_now;
// Update cache: 255 means "no tray" so clear cache; valid values get cached
if (currentTrayNow !== undefined && currentTrayNow !== 255) {
cachedTrayNow.current = currentTrayNow;
} else if (currentTrayNow === 255) {
cachedTrayNow.current = undefined;
}
const effectiveTrayNow = (currentTrayNow !== undefined && currentTrayNow !== 255)
? currentTrayNow
: cachedTrayNow.current;
// Runout / filament-replacement guidance (#2587). The backend fills these only
// while the print is PAUSED (global tray IDs, or null when idle/unresolvable):
// expectedTray = the slot the firmware now expects filament in
// previousTray = the slot that ran out
// With AMS Filament Backup the firmware advances to the next compatible slot,
// so these are often different — the graphic highlights the expected one.
const expectedTray = status?.expected_tray ?? null;
const previousTray = status?.previous_tray ?? null;
// Pre-format the runout slot labels (honoring user AMS friendly names) for the
// HMS modal (#2587). null when the slot can't be placed → honest fallback copy.
const formatRunoutSlotLabel = (globalId: number | null): string | null => {
if (globalId === null) return null;
if (globalId === 254) return t('printers.expectedSlot.external');
if (globalId >= 128 && globalId <= 135) {
return amsLabels?.[globalId] || getAmsLabel(globalId, 1);
}
const amsId = Math.floor(globalId / 4);
const slot = globalId % 4;
const amsName = amsLabels?.[amsId] || getAmsLabel(amsId, 4);
return t('printers.expectedSlot.label', { ams: amsName, slot: slot + 1 });
};
const runoutGuidance = status?.state === 'PAUSE'
? {
expectedSlotLabel: formatRunoutSlotLabel(expectedTray),
ranOutSlotLabel: formatRunoutSlotLabel(previousTray),
}
: null;
// Fetch smart plug for this printer
const { data: smartPlug } = useQuery({
queryKey: ['smartPlugByPrinter', printer.id],
queryFn: () => api.getSmartPlugByPrinter(printer.id),
});
// Fetch script plugs for this printer (for multi-device control)
const { data: scriptPlugs } = useQuery({
queryKey: ['scriptPlugsByPrinter', printer.id],
queryFn: () => api.getScriptPlugsByPrinter(printer.id),
});
// Fetch smart plug status if plug exists (faster refresh for energy monitoring)
const { data: plugStatus } = useQuery({
queryKey: ['smartPlugStatus', smartPlug?.id],
queryFn: () => smartPlug ? api.getSmartPlugStatus(smartPlug.id) : null,
enabled: !!smartPlug,
refetchInterval: 10000, // 10 seconds for real-time power display
});
// Fetch queue count for this printer
const { data: queueItems } = useQuery({
queryKey: ['queue', printer.id, 'pending'],
queryFn: () => api.getQueue(printer.id, 'pending'),
});
// Filter queue items by filament compatibility (same logic as PrinterQueueWidget)
// so the badge only shows on printers that can actually run the queued jobs.
// An empty Set means no filaments are loaded — jobs requiring specific types are incompatible.
const queueCount = useMemo(() => {
if (!queueItems?.length) return 0;
return filterCompatibleQueueItems(queueItems, loadedFilamentTypes, loadedFilaments, loadedVariants).length;
}, [queueItems, loadedFilamentTypes, loadedFilaments, loadedVariants]);
// Fetch currently printing queue item to show who started it (Issue #206)
const { data: printingQueueItems } = useQuery({
queryKey: ['queue', printer.id, 'printing'],
queryFn: () => api.getQueue(printer.id, 'printing'),
enabled: status?.state === 'RUNNING',
});
// Fetch reprint user info (for prints started via Reprint, not queue - Issue #206)
const { data: reprintUser } = useQuery({
queryKey: ['currentPrintUser', printer.id],
queryFn: () => api.getCurrentPrintUser(printer.id),
enabled: status?.state === 'RUNNING',
});
// Combine both sources: queue item user takes precedence, then reprint user
const currentPrintUser = printingQueueItems?.[0]?.created_by_username || reprintUser?.username;
// Fetch last completed print for this printer
const { data: lastPrints } = useQuery({
queryKey: ['archives', printer.id, 'last'],
queryFn: () => api.getArchives(printer.id, 1, 0),
enabled: status?.connected && status?.state !== 'RUNNING',
});
const lastPrint = lastPrints?.[0];
const isPrintingOrPaused = status?.state === 'RUNNING' || status?.state === 'PAUSE';
const needsPlateClear = requirePlateClear && status?.awaiting_plate_clear === true;
const showClearPlateButton = status?.connected && needsPlateClear && !isPrintingOrPaused;
const activePrintName = status?.current_print && isPrintingOrPaused
? formatPrintName(status.subtask_name || status.current_print || null, status.gcode_file, t, activePlateLabel)
: null;
const [retainedPrintJob, setRetainedPrintJob] = useState<{ name: string; coverUrl: string | null } | null>(null);
useEffect(() => {
if (activePrintName) {
setRetainedPrintJob({ name: activePrintName, coverUrl: status?.cover_url ?? null });
} else if (!needsPlateClear) {
setRetainedPrintJob(null);
}
}, [activePrintName, needsPlateClear, status?.cover_url]);
const plateStatus = (() => {
if (!requirePlateClear || !status?.connected) return null;
if (isPrintingOrPaused) {
return {
label: t('printers.plateStatus.inUse'),
className: 'bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-400',
};
}
if (status.awaiting_plate_clear) {
return {
label: t('printers.plateStatus.notCleared'),
className: 'bg-yellow-100 dark:bg-yellow-500/20 text-yellow-700 dark:text-yellow-400',
};
}
return {
label: t('printers.plateStatus.cleared'),
className: 'bg-status-ok/20 text-status-ok',
};
})();
const plateStatusPill = plateStatus ? (
{plateStatus.label}
) : null;
// Determine if this card should be hidden (use cached connected state to prevent flicker)
const shouldHide = hideIfDisconnected && isConnected === false;
const deleteMutation = useMutation({
mutationFn: (options: { deleteArchives: boolean }) =>
api.deletePrinter(printer.id, options.deleteArchives),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['printers'] });
queryClient.invalidateQueries({ queryKey: ['archives'] });
queryClient.invalidateQueries({ queryKey: ['maintenanceOverview'] });
},
onError: (error: Error) => showToast(error.message || t('printers.toast.failedToDelete'), 'error'),
});
const connectMutation = useMutation({
mutationFn: () => api.connectPrinter(printer.id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
},
});
const forceRefreshMutation = useMutation({
mutationFn: () => api.refreshPrinterStatus(printer.id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
showToast(t('printers.forceRefreshSuccess'), 'success');
},
onError: (error: Error) => showToast(error.message || t('printers.toast.failedToSendCommand'), 'error'),
});
const unlinkSpoolMutation = useMutation({
mutationFn: (spoolId: number) => api.unlinkSpool(spoolId),
onSuccess: (result) => {
showToast(t('spoolman.unlinkSuccess') || result?.message, 'success');
queryClient.invalidateQueries({ queryKey: ['linked-spools'] });
queryClient.invalidateQueries({ queryKey: ['unlinked-spools'] });
queryClient.invalidateQueries({ queryKey: ['spoolman-slot-assignments'] });
},
onError: (error: Error) => {
showToast(error.message || t('spoolman.unlinkFailed'), 'error');
},
});
// AMS drying mutations
const startDryingMutation = useMutation({
mutationFn: ({ amsId, temp, duration, filament, rotateTray }: { amsId: number; temp: number; duration: number; filament: string; rotateTray: boolean }) =>
api.startDrying(printer.id, amsId, temp, duration, filament, rotateTray),
onSuccess: (_data, { amsId }) => {
setDryingPopoverAmsId(null);
setDryStartWatch({ amsId });
// "Command sent", not "drying started" — at this point the printer has only
// taken the command. The amber countdown badge (dry_time > 0) is what says
// the cycle is genuinely live; the watcher below covers the case where it
// never appears.
showToast(t('printers.drying.toastCommandSent'), 'success');
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
},
onError: (error: Error) => showToast(error.message || t('printers.toast.failedToSendCommand'), 'error'),
});
const stopDryingMutation = useMutation({
mutationFn: (amsId: number) => api.stopDrying(printer.id, amsId),
onSuccess: () => {
setDryStartWatch(null);
showToast(t('printers.drying.toastStopped'), 'success');
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
},
onError: (error: Error) => showToast(error.message || t('printers.toast.failedToSendCommand'), 'error'),
});
// AMS Filament Backup toggle (auto-switch to a backup spool when one runs out).
// Invalidate BOTH printer-status cache keys — the codebase has two conventions
// ('printerStatus' camelCase + 'printer-status' kebab-case used by PrintModal /
// useMultiPrinterFilamentMapping). Hitting only one would leave PrintModal
// showing the old backup state until the user reopens it.
const setAmsBackupMutation = useMutation({
mutationFn: (enabled: boolean) => api.setAmsFilamentBackup(printer.id, enabled),
onSuccess: (_data, enabled) => {
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
queryClient.invalidateQueries({ queryKey: ['printer-status', printer.id] });
showToast(t(enabled ? 'printers.amsBackup.toastEnabled' : 'printers.amsBackup.toastDisabled'), 'success');
},
onError: (error: Error) => showToast(error.message || t('printers.toast.failedToSendCommand'), 'error'),
});
// Smart plug control mutations
const powerControlMutation = useMutation({
mutationFn: (action: 'on' | 'off') =>
smartPlug ? api.controlSmartPlug(smartPlug.id, action) : Promise.reject('No plug'),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['smartPlugStatus', smartPlug?.id] });
},
});
const toggleAutoOffMutation = useMutation({
mutationFn: (enabled: boolean) =>
smartPlug ? api.updateSmartPlug(smartPlug.id, { auto_off: enabled }) : Promise.reject('No plug'),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['smartPlugByPrinter', printer.id] });
// Also invalidate the smart-plugs list to keep Settings page in sync
queryClient.invalidateQueries({ queryKey: ['smart-plugs'] });
},
});
// Run HA entity mutation — scripts use 'on' (trigger), switches use 'toggle'
const runScriptMutation = useMutation({
mutationFn: ({ id, action }: { id: number; action: 'on' | 'toggle' }) => api.controlSmartPlug(id, action),
onSuccess: () => {
showToast(t('printers.toast.scriptTriggered'));
},
onError: (error: Error) => showToast(error.message || t('printers.toast.failedToRunScript'), 'error'),
});
// Print control mutations
const stopPrintMutation = useMutation({
mutationFn: () => api.stopPrint(printer.id),
onSuccess: () => {
showToast(t('printers.toast.printStopped'));
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
},
onError: (error: Error) => showToast(error.message || t('printers.toast.failedToStopPrint'), 'error'),
});
const pausePrintMutation = useMutation({
mutationFn: () => api.pausePrint(printer.id),
onSuccess: () => {
showToast(t('printers.toast.printPaused'));
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
},
onError: (error: Error) => showToast(error.message || t('printers.toast.failedToPausePrint'), 'error'),
});
const resumePrintMutation = useMutation({
mutationFn: () => api.resumePrint(printer.id),
onSuccess: () => {
showToast(t('printers.toast.printResumed'));
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
},
onError: (error: Error) => showToast(error.message || t('printers.toast.failedToResumePrint'), 'error'),
});
const clearPlateMutation = useMutation({
mutationFn: () => api.clearPlate(printer.id),
onSuccess: () => {
showToast(t('queue.clearPlateSuccess'));
queryClient.setQueryData(['printerStatus', printer.id], (old: PrinterStatus | undefined) =>
old ? { ...old, awaiting_plate_clear: false } : old
);
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
queryClient.invalidateQueries({ queryKey: ['queue', printer.id] });
},
onError: (error: Error) => showToast(error.message || t('printers.toast.failedToSendCommand'), 'error'),
});
const nozzleTemperatureMutation = useMutation({
mutationFn: ({ target, nozzle }: { target: number; nozzle: number }) =>
api.setNozzleTemperature(printer.id, target, nozzle),
onSuccess: (result) => {
setStatusControlMenu(null);
showToast(result.message);
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
},
onError: (error: Error) => showToast(error.message || t('printers.toast.failedToSendCommand'), 'error'),
});
const bedTemperatureMutation = useMutation({
mutationFn: (target: number) => api.setBedTemperature(printer.id, target),
onSuccess: (result) => {
setStatusControlMenu(null);
showToast(result.message);
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
},
onError: (error: Error) => showToast(error.message || t('printers.toast.failedToSendCommand'), 'error'),
});
const chamberTemperatureMutation = useMutation({
mutationFn: (target: number) => api.setChamberTemperature(printer.id, target),
onSuccess: (result) => {
setStatusControlMenu(null);
showToast(result.message);
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
},
onError: (error: Error) => showToast(error.message || t('printers.toast.failedToSendCommand'), 'error'),
});
const fanSpeedMutation = useMutation({
mutationFn: ({ fan, speed }: { fan: 'part' | 'aux' | 'aux2' | 'chamber'; speed: number }) =>
api.setFanSpeed(printer.id, fan, speed),
onMutate: async ({ fan, speed }) => {
await queryClient.cancelQueries({ queryKey: ['printerStatus', printer.id] });
const previousStatus = queryClient.getQueryData(['printerStatus', printer.id]);
const fanField = {
part: 'cooling_fan_speed',
aux: 'big_fan1_speed',
aux2: 'left_aux_fan_speed',
chamber: 'big_fan2_speed',
}[fan];
queryClient.setQueryData(['printerStatus', printer.id], (old: PrinterStatus | undefined) =>
old ? { ...old, [fanField]: speed } : old
);
return { previousStatus };
},
onSuccess: (result) => {
setStatusControlMenu(null);
showToast(result.message);
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
},
onError: (error: Error, _variables, context) => {
if (context?.previousStatus) {
queryClient.setQueryData(['printerStatus', printer.id], context.previousStatus);
}
showToast(error.message || t('printers.toast.failedToSendCommand'), 'error');
},
});
const selectExtruderMutation = useMutation({
mutationFn: (extruder: number) => api.selectExtruder(printer.id, extruder),
onMutate: async (extruder) => {
await queryClient.cancelQueries({ queryKey: ['printerStatus', printer.id] });
const previousStatus = queryClient.getQueryData(['printerStatus', printer.id]);
queryClient.setQueryData(['printerStatus', printer.id], (old: PrinterStatus | undefined) =>
old ? { ...old, active_extruder: extruder } : old
);
return { previousStatus };
},
onSuccess: (result) => {
setStatusControlMenu(null);
showToast(result.message);
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
},
onError: (error: Error, _extruder, context) => {
if (context?.previousStatus) {
queryClient.setQueryData(['printerStatus', printer.id], context.previousStatus);
}
showToast(error.message || t('printers.toast.failedToSendCommand'), 'error');
},
});
// Chamber light mutation with optimistic update
const chamberLightMutation = useMutation({
mutationFn: (on: boolean) => api.setChamberLight(printer.id, on),
onMutate: async (on) => {
// Cancel any outgoing refetches
await queryClient.cancelQueries({ queryKey: ['printerStatus', printer.id] });
// Snapshot the previous value
const previousStatus = queryClient.getQueryData(['printerStatus', printer.id]);
// Optimistically update
queryClient.setQueryData(['printerStatus', printer.id], (old: typeof status) => ({
...old,
chamber_light: on,
}));
return { previousStatus };
},
onSuccess: (_, on) => {
showToast(`Chamber light ${on ? 'on' : 'off'}`);
},
onError: (error: Error, _, context) => {
// Rollback on error
if (context?.previousStatus) {
queryClient.setQueryData(['printerStatus', printer.id], context.previousStatus);
}
showToast(error.message || t('printers.toast.failedToControlChamberLight'), 'error');
},
});
// Print speed mutation with optimistic update
const printSpeedMutation = useMutation({
mutationFn: (mode: number) => api.setPrintSpeed(printer.id, mode),
onMutate: async (mode) => {
await queryClient.cancelQueries({ queryKey: ['printerStatus', printer.id] });
const previousStatus = queryClient.getQueryData(['printerStatus', printer.id]);
queryClient.setQueryData(['printerStatus', printer.id], (old: typeof status) => ({
...old,
speed_level: mode,
}));
return { previousStatus };
},
onError: (error: Error, _, context) => {
if (context?.previousStatus) {
queryClient.setQueryData(['printerStatus', printer.id], context.previousStatus);
}
showToast(error.message || t('printers.toast.failedToSetSpeed'), 'error');
},
});
const airductMutation = useMutation({
mutationFn: (mode: 'cooling' | 'heating') => api.setAirductMode(printer.id, mode),
onMutate: async (mode) => {
await queryClient.cancelQueries({ queryKey: ['printerStatus', printer.id] });
const previousStatus = queryClient.getQueryData(['printerStatus', printer.id]);
queryClient.setQueryData(['printerStatus', printer.id], (old: typeof status) => ({
...old,
airduct_mode: mode === 'cooling' ? 0 : 1,
}));
return { previousStatus };
},
onError: (error: Error, _, context) => {
if (context?.previousStatus) {
queryClient.setQueryData(['printerStatus', printer.id], context.previousStatus);
}
showToast(error.message || t('printers.toast.failedToSendCommand'), 'error');
},
});
const bedJogMutation = useMutation({
mutationFn: ({ distance }: { distance: number }) =>
api.bedJog(printer.id, distance),
onError: (error: Error) =>
showToast(error.message || t('printers.toast.failedToSendCommand'), 'error'),
});
const xyJogMutation = useMutation({
mutationFn: ({ x, y }: { x: number; y: number }) =>
api.xyJog(printer.id, x, y),
onError: (error: Error) =>
showToast(error.message || t('printers.toast.failedToSendCommand'), 'error'),
});
const extruderJogMutation = useMutation({
mutationFn: (distance: number) =>
api.extruderJog(printer.id, distance),
onError: (error: Error) =>
showToast(error.message || t('printers.toast.failedToSendCommand'), 'error'),
});
const homeAxesMutation = useMutation({
mutationFn: (axes: 'z' | 'xy' | 'all') => api.homeAxes(printer.id, axes),
onSuccess: () => {
showToast(t('printers.bedJog.homingStarted'));
},
onError: (error: Error) =>
showToast(error.message || t('printers.toast.failedToSendCommand'), 'error'),
});
// Plate detection setting mutation
const plateDetectionMutation = useMutation({
mutationFn: (enabled: boolean) => api.updatePrinter(printer.id, { plate_detection_enabled: enabled }),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['printers'] });
showToast(plateDetectionMutation.variables ? t('printers.toast.plateCheckEnabled') : t('printers.toast.plateCheckDisabled'));
},
onError: (error: Error) => showToast(error.message || t('printers.toast.failedToUpdateSetting'), 'error'),
});
// Maintenance mode toggle (#1476). Wraps the `is_active` backend field that
// already gates MQTT connection, queue dispatch, scheduler eligibility,
// metrics, and the print picker — so flipping this flag puts the printer
// out of service across every consumer in one place. Used from the
// overflow menu and EditPrinterModal.
const maintenanceMutation = useMutation({
mutationFn: (isActive: boolean) => api.updatePrinter(printer.id, { is_active: isActive }),
onSuccess: (_data, isActive) => {
queryClient.invalidateQueries({ queryKey: ['printers'] });
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
showToast(
isActive
? t('printers.maintenance.toastExited', { name: printer.name })
: t('printers.maintenance.toastEntered', { name: printer.name }),
'success',
);
},
onError: (error: Error) => showToast(error.message || t('printers.toast.failedToUpdateSetting'), 'error'),
});
// Confirm before entering maintenance on a printing printer (entering mode
// disconnects MQTT, which stops progress tracking + completion notifications
// for the in-flight job).
const [confirmMaintenanceEnter, setConfirmMaintenanceEnter] = useState(false);
const handleEnterMaintenance = () => {
if (status?.state === 'RUNNING' || status?.state === 'PAUSE') {
setConfirmMaintenanceEnter(true);
} else {
maintenanceMutation.mutate(false);
}
};
// Query for printable objects (for skip functionality)
// Fetch when printing with 2+ objects OR when modal is open
const isPrintingWithObjects = (status?.state === 'RUNNING' || status?.state === 'PAUSE') && (status?.printable_objects_count ?? 0) >= 2;
const { data: objectsData } = useQuery({
queryKey: ['printableObjects', printer.id],
queryFn: () => api.getPrintableObjects(printer.id),
enabled: showSkipObjectsModal || isPrintingWithObjects,
refetchInterval: showSkipObjectsModal ? 5000 : (isPrintingWithObjects ? 30000 : false), // 5s when modal open, 30s otherwise
});
// State for tracking which AMS slot is being refreshed
const [refreshingSlot, setRefreshingSlot] = useState<{ amsId: number; slotId: number } | null>(null);
// Track if we've seen the printer enter "busy" state (ams_status_main !== 0)
const seenBusyStateRef = useRef(false);
// Fallback timeout ref
const refreshTimeoutRef = useRef | null>(null);
// Minimum display time passed
const minTimePassedRef = useRef(false);
// AMS slot refresh mutation
const refreshAmsSlotMutation = useMutation({
mutationFn: ({ amsId, slotId }: { amsId: number; slotId: number }) =>
api.refreshAmsSlot(printer.id, amsId, slotId),
onMutate: ({ amsId, slotId }) => {
// Clear any existing timeout
if (refreshTimeoutRef.current) {
clearTimeout(refreshTimeoutRef.current);
}
// Reset state
seenBusyStateRef.current = false;
minTimePassedRef.current = false;
setRefreshingSlot({ amsId, slotId });
// Minimum display time (2 seconds)
setTimeout(() => {
minTimePassedRef.current = true;
}, 2000);
// Fallback timeout (30 seconds max)
refreshTimeoutRef.current = setTimeout(() => {
setRefreshingSlot(null);
}, 30000);
},
onSuccess: (data) => {
showToast(data.message || t('printers.toast.rfidRereadInitiated'));
},
onError: (error: Error) => {
showToast(error.message || t('printers.toast.failedToRereadRfid'), 'error');
if (refreshTimeoutRef.current) {
clearTimeout(refreshTimeoutRef.current);
}
setRefreshingSlot(null);
},
});
// AMS load/unload mutations (#891)
const loadAmsTrayMutation = useMutation({
mutationFn: ({ trayId }: { trayId: number }) => api.loadAmsTray(printer.id, trayId),
onSuccess: (data) => {
showToast(data.message || t('printers.toast.loadInitiated'));
},
onError: (error: Error) => {
showToast(error.message || t('printers.toast.failedToLoad'), 'error');
},
});
const unloadAmsMutation = useMutation({
mutationFn: () => api.unloadAms(printer.id),
onSuccess: (data) => {
showToast(data.message || t('printers.toast.unloadInitiated'));
},
onError: (error: Error) => {
showToast(error.message || t('printers.toast.failedToUnload'), 'error');
},
});
// Plate references state
const [plateReferences, setPlateReferences] = useState<{
references: Array<{ index: number; label: string; timestamp: string; has_image: boolean; thumbnail_url: string }>;
max_references: number;
} | null>(null);
const [editingRefLabel, setEditingRefLabel] = useState<{ index: number; label: string } | null>(null);
// Fetch plate references
const fetchPlateReferences = async () => {
try {
const data = await api.getPlateReferences(printer.id);
setPlateReferences(data);
} catch {
// Ignore errors - references will show as empty
}
};
// Toggle plate detection enabled/disabled
const handleTogglePlateDetection = () => {
plateDetectionMutation.mutate(!printer.plate_detection_enabled);
};
// Open plate detection management modal (for calibration/references)
const handleOpenPlateManagement = async () => {
setIsCheckingPlate(true);
setPlateCheckResult(null);
// Auto-turn on light if it's off
const lightWasOff = status?.chamber_light === false;
setPlateCheckLightWasOff(lightWasOff);
if (lightWasOff) {
await api.setChamberLight(printer.id, true);
// Wait for light to physically turn on and camera to adjust exposure
// (MQTT command is async, light takes ~1s to turn on, camera needs time to adjust)
await new Promise(resolve => setTimeout(resolve, 2500));
}
try {
const result = await api.checkPlateEmpty(printer.id, { includeDebugImage: true });
setPlateCheckResult(result);
fetchPlateReferences();
} catch (error) {
showToast(error instanceof Error ? error.message : t('printers.toast.failedToCheckPlate'), 'error');
// Restore light if check failed
if (lightWasOff) {
await api.setChamberLight(printer.id, false);
setPlateCheckLightWasOff(false);
}
} finally {
setIsCheckingPlate(false);
}
};
// Close plate check modal and restore light state
const closePlateCheckModal = useCallback(async () => {
setPlateCheckResult(null);
// Restore light to original state if we turned it on
if (plateCheckLightWasOff) {
await api.setChamberLight(printer.id, false);
setPlateCheckLightWasOff(false);
}
}, [plateCheckLightWasOff, printer.id]);
// Calibrate plate detection handler
const handleCalibratePlate = async (label?: string) => {
setIsCalibrating(true);
try {
const result = await api.calibratePlateDetection(printer.id, { label });
if (result.success) {
showToast(result.message || t('printers.toast.calibrationSaved'), 'success');
// Refresh references and re-check
fetchPlateReferences();
const checkResult = await api.checkPlateEmpty(printer.id, { includeDebugImage: true });
setPlateCheckResult(checkResult);
} else {
showToast(result.message || t('printers.toast.calibrationFailed'), 'error');
}
} catch (error) {
showToast(error instanceof Error ? error.message : t('printers.toast.calibrationFailed'), 'error');
} finally {
setIsCalibrating(false);
}
};
// Update reference label
const handleUpdateRefLabel = async (index: number, label: string) => {
try {
await api.updatePlateReferenceLabel(printer.id, index, label);
setEditingRefLabel(null);
fetchPlateReferences();
} catch (error) {
showToast(error instanceof Error ? error.message : t('printers.toast.failedToUpdateLabel'), 'error');
}
};
// Delete reference
const handleDeleteRef = async (index: number) => {
try {
await api.deletePlateReference(printer.id, index);
showToast(t('printers.toast.referenceDeleted'), 'success');
fetchPlateReferences();
// Re-check to update counts
const checkResult = await api.checkPlateEmpty(printer.id, { includeDebugImage: true });
setPlateCheckResult(checkResult);
} catch (error) {
showToast(error instanceof Error ? error.message : t('printers.toast.failedToDeleteReference'), 'error');
}
};
// Save ROI settings
const handleSaveRoi = async () => {
if (!editingRoi) return;
setIsSavingRoi(true);
try {
await api.updatePrinter(printer.id, { plate_detection_roi: editingRoi });
showToast(t('printers.toast.detectionAreaSaved'), 'success');
setEditingRoi(null);
// Re-check to see new ROI in action
const checkResult = await api.checkPlateEmpty(printer.id, { includeDebugImage: true });
setPlateCheckResult(checkResult);
} catch (error) {
showToast(error instanceof Error ? error.message : t('printers.toast.failedToSaveDetectionArea'), 'error');
} finally {
setIsSavingRoi(false);
}
};
// Close plate check modal on Escape key
useEffect(() => {
const handleEscape = (e: KeyboardEvent) => {
if (e.key === 'Escape' && plateCheckResult) {
closePlateCheckModal();
}
};
window.addEventListener('keydown', handleEscape);
return () => window.removeEventListener('keydown', handleEscape);
}, [plateCheckResult, closePlateCheckModal]);
// Watch ams_status_main to detect when RFID read completes
// ams_status_main: 0=idle, 2=rfid_identifying
const deferredClearRef = useRef | null>(null);
useEffect(() => {
if (!refreshingSlot) return;
const amsStatus = status?.ams_status_main ?? 0;
// Track when we see non-idle state (printer is working)
if (amsStatus !== 0) {
seenBusyStateRef.current = true;
// Cancel any deferred clear since we're back to busy
if (deferredClearRef.current) {
clearTimeout(deferredClearRef.current);
deferredClearRef.current = null;
}
}
// When we've seen busy and now idle, clear (with min time check)
if (seenBusyStateRef.current && amsStatus === 0) {
if (minTimePassedRef.current) {
// Min time passed - clear now
if (refreshTimeoutRef.current) {
clearTimeout(refreshTimeoutRef.current);
}
setRefreshingSlot(null);
} else {
// Schedule clear after min time (2 seconds from start)
if (!deferredClearRef.current) {
deferredClearRef.current = setTimeout(() => {
if (refreshTimeoutRef.current) {
clearTimeout(refreshTimeoutRef.current);
}
setRefreshingSlot(null);
}, 2000);
}
}
}
return () => {
if (deferredClearRef.current) {
clearTimeout(deferredClearRef.current);
}
};
}, [status?.ams_status_main, refreshingSlot]);
useEffect(() => {
if (!showMenu) return;
const handleClickOutside = (event: MouseEvent) => {
const target = event.target as Node;
if (!printerActionsMenuRef.current?.contains(target)) {
setShowMenu(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, [showMenu]);
if (shouldHide) {
return null;
}
// Size-based styling helpers
// Body type and icon scale (#1848). S/M/L/XL already scaled the card's
// width, its thumbnail and the printer name, but every label inside the
// body was pinned at 8-11px, so an XL card showed the same tiny text as an
// S one -- the disparity was worst exactly where someone asking for more
// room ends up. These custom properties carry the scaled sizes into the
// card's subtree. S and M are deliberately 1.0: nobody's card changes
// unless they reach for a size that is already asking for more space.
// Plain computation rather than useMemo: this sits after the card's early
// returns, where a hook would break the rules-of-hooks ordering, and
// building ten strings per render costs nothing.
const cardScaleStyle = buildCardScaleStyle(cardSize);
const getImageSize = () => {
switch (cardSize) {
case 1: return 'w-10 h-10';
case 2: return 'w-14 h-14';
case 3: return 'w-16 h-16';
case 4: return 'w-20 h-20';
default: return 'w-14 h-14';
}
};
const getTitleSize = () => {
switch (cardSize) {
case 1: return 'text-base truncate';
case 2: return 'text-lg';
case 3: return 'text-xl';
case 4: return 'text-2xl';
default: return 'text-lg';
}
};
const getSpacing = () => {
switch (cardSize) {
case 1: return 'mb-2';
case 2: return 'mb-4';
case 3: return 'mb-5';
case 4: return 'mb-6';
default: return 'mb-4';
}
};
const canDrop = isConnected && status?.state !== 'RUNNING' && status?.state !== 'PAUSE' && hasPermission('printers:control');
const handleCardDragEnter = (e: React.DragEvent) => {
e.preventDefault();
dragCounterRef.current++;
if (dragCounterRef.current === 1) setIsDraggingFile(true);
};
const handleCardDragOver = (e: React.DragEvent) => {
e.preventDefault();
e.dataTransfer.dropEffect = canDrop ? 'copy' : 'none';
};
const handleCardDragLeave = (e: React.DragEvent) => {
e.preventDefault();
dragCounterRef.current--;
if (dragCounterRef.current === 0) setIsDraggingFile(false);
};
const handleCardDrop = async (e: React.DragEvent) => {
e.preventDefault();
dragCounterRef.current = 0;
setIsDraggingFile(false);
if (!canDrop) return;
const droppedFiles = Array.from(e.dataTransfer.files);
const file = droppedFiles[0];
if (!file) return;
// Only accept sliced/printable files (.gcode, .gcode.3mf, etc.)
const lower = file.name.toLowerCase();
if (!lower.endsWith('.gcode') && !lower.includes('.gcode.')) {
showToast(t('printers.dropNotPrintable', 'Only .gcode and .gcode.3mf files can be printed'), 'error');
return;
}
setIsDropUploading(true);
try {
const result = await api.uploadLibraryFile(file, null);
// Check printer compatibility if sliced_for_model is available in metadata
const slicedFor = (result.metadata as Record)?.sliced_for_model as string | undefined;
const printerModel = mapModelCode(printer.model);
if (slicedFor && printerModel && slicedFor.toLowerCase() !== printerModel.toLowerCase()) {
await api.deleteLibraryFile(result.id).catch(() => {});
showToast(
t('printers.incompatibleFile', 'This file was sliced for {{slicedFor}}, but this printer is a {{printerModel}}', { slicedFor, printerModel }),
'error'
);
return;
}
setPrintAfterUpload({ id: result.id, filename: result.filename });
} catch {
showToast(t('common.uploadFailed', 'Upload failed'), 'error');
} finally {
setIsDropUploading(false);
}
};
const handleCardClick = (e: React.MouseEvent) => {
if (viewMode !== 'compact' || selectionMode) return;
const target = e.target as HTMLElement;
if (target.closest('button, a, input, select, textarea, [role="button"]')) return;
onOpenCompactCard?.(printer.id);
};
const footerActionButtonClass = '!h-8 !min-h-8 !px-2 !py-0';
const footerIconButtonClass = '!h-8 !min-h-8 !w-8 !px-0 !py-0';
const renderAmsSlotActions = ({
amsId,
slotId,
loadTrayId,
isRefreshing,
includeRfid = true,
}: {
amsId: number;
slotId: number;
loadTrayId: number;
isRefreshing?: boolean;
includeRfid?: boolean;
}) => {
const printerBusy = status?.state === 'RUNNING';
return (
<>
{includeRfid && (
)}
);
};
const printerActionsMenu = (
{/* Selection mode click overlay — captures all clicks, preventing nested interactions */}
{selectionMode && (
)}
= 3 ? 'p-5' : ''} flex flex-1 flex-col`}>
{/* Header */}
)}
{/* Status — see the equivalent defensive `=== false` check on the
header pill above for why this is not `!printer.is_active`. */}
{printer.is_active === false ? (
// Maintenance mode (#1476) — replaces the cover/progress container
// so the card keeps the same height. Renders for both compact and
// expanded view modes so the printer stays visible but plainly
// out-of-service.
<>
{viewMode === 'compact' ? (
setIsOpen(false)} />
);
}
function IndicatorControlPopover({
title,
options = [],
unit,
customMin,
customMax,
customStep = 1,
widthClass = 'w-[240px]',
popoverWidth = 240,
popoverHeight = 280,
isPending,
onClose,
onSubmit,
children,
}: {
title: string;
options?: Array<{ label: string; value: number }>;
unit?: string;
customMin?: number;
customMax?: number;
customStep?: number;
widthClass?: string;
popoverWidth?: number;
popoverHeight?: number;
isPending?: boolean;
onClose: () => void;
onSubmit?: (value: number) => void;
children?: React.ReactNode;
}) {
const anchorRef = useRef
{children}
)}
e.stopPropagation()}
>
)}
{children}
{showCustomInput && (
<>
)}
,
document.body
)}
);
}
const NOZZLE_TEMPERATURE_OPTIONS = buildPresetOptions(NOZZLE_TEMP_DEFAULTS, 'C');
function NozzleTemperatureControlBox({
label,
current,
target,
isActive,
isPending,
onSubmit,
options = NOZZLE_TEMPERATURE_OPTIONS,
}: {
label: string;
current?: number;
target?: number;
isActive: boolean;
isPending?: boolean;
onSubmit: (value: number) => void;
options?: Array<{ label: string; value: number }>;
}) {
const [customValue, setCustomValue] = useState('');
const submitCustom = () => {
const value = Number(customValue);
if (!Number.isFinite(value)) return;
onSubmit(Math.min(320, Math.max(0, Math.round(value))));
};
return (
{title}
{options.length > 0 && (
{options.map(option => (
))}
{label}
{Math.round(current ?? 0)}°C
{target !== undefined ? ` / ${Math.round(target)}°` : ''}
{options.map(option => (
))}
{children}
{isVisible && (
)}
);
}
// AMS drying presets from BambuStudio filament profiles (idle mode temps)
// Format: { n3f temp, n3s temp, n3f hours, n3s hours }
const DRYING_PRESETS: Record
{/* AMS auto-label */}
{label}
{/* Serial number */}
{t('printers.amsPopup.serialNumber')}
{ams.serial_number || '—'}
{/* Firmware version */}
{t('printers.amsPopup.firmwareVersion')}
{ams.sw_ver || '—'}
{/* Friendly name editor */}
{t('printers.amsPopup.friendlyName')}
canEdit && setEditValue(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSave()}
onFocus={() => setIsInputFocused(true)}
onBlur={() => {
setIsInputFocused(false);
if (timeoutRef.current) clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(() => setIsVisible(false), 200);
}}
placeholder={canEdit ? t('printers.amsPopup.friendlyNamePlaceholder') : (amsLabels?.[ams.id] || '—')}
disabled={!canEdit}
title={!canEdit ? t('printers.amsPopup.noEditPermission') : undefined}
className="w-full bg-bambu-dark border border-bambu-dark-tertiary rounded px-2 py-1 text-xs text-white placeholder-bambu-gray/60 focus:outline-none focus:border-bambu-green disabled:opacity-50 disabled:cursor-not-allowed"
maxLength={100}
/>
{canEdit && (
{saveError && (
)}
{saveError}
)}
{amsLabels?.[ams.id] && (
)}
{showMenu && (
);
return (
{/* Maintenance Mode toggle (#1476) — leverages backend is_active flag */}
)}
{ e.stopPropagation(); onToggleSelect?.(printer.id); }}
>
{isSelected ? (
)}
{/* Drop zone overlay */}
{(isDraggingFile || isDropUploading) && (
{isDropUploading ? (
<>
{t('common.uploading', 'Uploading...')}
) : canDrop ? ( <>{t('printers.dropToPrint', 'Drop to print')}
) : ( <>{t('printers.cannotPrint', 'Printer busy')}
)}
{/* Top row: Image, Name, Menu */}
{/* Badges row - only in expanded mode */}
{viewMode === 'expanded' && (
)}
{/* Delete Confirmation */}
{showDeleteConfirm && (
{/* Printer Model Image */}
})
{viewMode === 'compact' && showClearPlateButton && (
)}
{printer.name}
{/* Connection indicator dot for compact mode */} {viewMode === 'compact' && (() => { const hmsErrors = status?.connected && status.hms_errors ? filterKnownHMSErrors(status.hms_errors) : []; const hasSevere = hmsErrors.some(e => e.severity <= 2); const hasWarning = hmsErrors.length > 0; const pipColor = !status?.connected ? 'bg-status-error' : hasSevere ? 'bg-status-error' : hasWarning ? 'bg-status-warning' : 'bg-status-ok'; const pipTitle = !status?.connected ? t('printers.connection.offline') : hasWarning ? `${hmsErrors.length} HMS ${hmsErrors.length === 1 ? 'error' : 'errors'}` : t('printers.connection.connected'); return ( ); })()}
{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 && (
{/* Connection status badge (or Maintenance pill when out of service).
Defensive: only swap when is_active is EXPLICITLY false. An
undefined / missing field defaults to "active" so the regular
pill renders — matches the backend default and prevents test
fixtures (or stale clients) from accidentally tripping the
maintenance UI. */}
{printer.is_active === false ? (
{t('printers.confirm.deleteTitle')}
{t('printers.confirm.deleteMessage', { name: printer.name })}
{t('printers.status.title', 'Status')}
{t('printers.maintenance.title')}
{t('printers.maintenance.subtitle')}
{hasCompactEta && (
<>
);
})()
) : (
/* Expanded: Full status section */
<>
{t('printers.status.title', 'Status')}
{/* Current Print or Idle Placeholder */}
{(() => {
const isActivePrint = !!(status.current_print && (status.state === 'RUNNING' || status.state === 'PAUSE'));
const showRetainedPrint = !isActivePrint && needsPlateClear && retainedPrintJob;
const printName = isActivePrint ? activePrintName : showRetainedPrint ? retainedPrintJob.name : null;
const coverUrl = isActivePrint ? status.cover_url : showRetainedPrint ? retainedPrintJob.coverUrl : null;
const progress = isActivePrint ? (status.progress || 0) : showRetainedPrint ? 100 : 0;
return (
{getStatusDisplay(status.state, status.stg_cur_name)}
{plateStatusPill}{printName || t('printers.noActiveJob', 'No active job')}
{isActivePrint ? (
<>
{status.remaining_time != null && status.remaining_time > 0 && (
<>
Last: {lastPrint.print_name || lastPrint.filename} {lastPrint.completed_at && ( • {formatDateOnly(lastPrint.completed_at, { month: 'short', day: 'numeric' })} )}
) : ( {t('printers.readyToPrint')} )}
{/* Nozzle temp - combined for dual nozzle */}
)}
{/* H2C nozzle rack (tool-changer dock) — only show when rack nozzles exist (IDs >= 2) */}
{status.nozzle_rack && status.nozzle_rack.some(s => s.id >= 2) && (
canUseStatusControls && setStatusControlMenu(statusControlMenu === 'nozzle-temp' ? null : 'nozzle-temp')}
>
) : (
<>
setStatusControlMenu(null)}
>
nozzleTemperatureMutation.mutate({ target, nozzle: 1 })}
options={buildPresetOptions(nozzleTempPresets, 'C')}
/>
nozzleTemperatureMutation.mutate({ target, nozzle: 0 })}
options={buildPresetOptions(nozzleTempPresets, 'C')}
/>
) : (
setStatusControlMenu(null)}
onSubmit={(target) => nozzleTemperatureMutation.mutate({ target, nozzle: status.active_extruder ?? 0 })}
/>
)
)}
L / R
{Math.round(status.temperatures.nozzle || 0)}° / {Math.round(status.temperatures.nozzle_2 || 0)}°
) : singleNozzleSlot ? ({t('printers.temperatures.nozzle')}
{Math.round(status.temperatures.nozzle || 0)}°C
{t('printers.temperatures.nozzle')}
{Math.round(status.temperatures.nozzle || 0)}°C
)} {statusControlMenu === 'nozzle-temp' && ( isDualNozzle ? ( canUseStatusControls && setStatusControlMenu(statusControlMenu === 'bed-temp' ? null : 'bed-temp')}
>
setStatusControlMenu(null)}
onSubmit={(target) => bedTemperatureMutation.mutate(target)}
/>
)}
{status.temperatures.chamber !== undefined && (() => {
// Sensor-only models (X1C, X1E, P2S) show the chamber reading
// but can't act on M141, so we keep the card read-only there.
const hasChamberHeater = status.supports_chamber_heater === true;
return (
{t('printers.temperatures.bed')}
{Math.round(status.temperatures.bed || 0)}°C
{statusControlMenu === 'bed-temp' && ( canUseStatusControls && setStatusControlMenu(statusControlMenu === 'chamber-temp' ? null : 'chamber-temp')
: undefined}
>
setStatusControlMenu(null)}
onSubmit={(target) => chamberTemperatureMutation.mutate(target)}
/>
)}
);
})()}
{/* Active nozzle indicator for dual-nozzle printers */}
{isDualNozzle && (
{t('printers.temperatures.chamber')}
{Math.round(status.temperatures.chamber || 0)}°C
{hasChamberHeater && statusControlMenu === 'chamber-temp' && ( canUseStatusControls && setStatusControlMenu(statusControlMenu === 'nozzle-select' ? null : 'nozzle-select')}
>
setStatusControlMenu(null)}
onSubmit={(extruder) => selectExtruderMutation.mutate(extruder)}
/>
)}
L{leftNozzleSlot?.nozzle_diameter ? ` ${leftNozzleSlot.nozzle_diameter}` : ''}
·
R{rightNozzleSlot?.nozzle_diameter ? ` ${rightNozzleSlot.nozzle_diameter}` : ''}
{t('printers.temperatures.nozzle')}
{statusControlMenu === 'nozzle-select' && (
{fanItems.map(({ key, label, value, Icon, activeClass }) => {
const active = value > 0;
return (
);
})()}
{viewMode === 'expanded' && showClearPlateButton && (
)}
{/* Controls */}
{viewMode === 'expanded' && (() => {
// Determine print state for control buttons
const isRunning = status.state === 'RUNNING';
const isPaused = status.state === 'PAUSE';
const isPrinting = isRunning || isPaused;
const isControlBusy = stopPrintMutation.isPending || pausePrintMutation.isPending || resumePrintMutation.isPending;
const unavailablePrintActionClass = 'bg-bambu-dark text-bambu-gray/50 cursor-not-allowed opacity-50';
const iconControlClass = 'flex h-8 w-8 items-center justify-center rounded-lg text-xs font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed';
const printControlClass = 'flex h-8 w-20 items-center justify-center gap-1 px-2 rounded-lg text-xs font-medium transition-colors';
return (
canUseStatusControls && setStatusControlMenu(statusControlMenu === `fan-${key}` ? null : `fan-${key}`)}
>
setStatusControlMenu(null)}
onSubmit={(speed) => fanSpeedMutation.mutate({ fan: key as 'part' | 'aux' | 'aux2' | 'chamber', speed })}
/>
)}
);
})}
{/* Section Header */}
{t('printers.controls')}
{/* Left: Secondary controls */}
{/* Airduct Mode (P2S / X2D / H2*) */}
{(['P2S', 'X2D', 'H2D', 'H2C', 'H2S'].includes(printer.model ?? '')) && (() => {
const isHeating = status.airduct_mode === 1;
const Icon = isHeating ? Flame : Snowflake;
const color = isHeating ? 'text-orange-600 dark:text-orange-400' : 'text-sky-600 dark:text-sky-400';
const bg = isHeating ? 'bg-orange-50 dark:bg-orange-500/10 text-orange-700 dark:text-orange-400 hover:bg-orange-500/20' : 'bg-sky-50 dark:bg-sky-500/10 text-sky-700 dark:text-sky-400 hover:bg-sky-500/20';
return (
setShowFileManager(false)}
/>
)}
{/* Upload for Print Modal */}
{showUploadForPrint && (
setShowUploadForPrint(false)}
onUploadComplete={() => {}}
autoUpload
accept=".gcode,.3mf"
validateFile={(file) => {
const lower = file.name.toLowerCase();
if (!lower.endsWith('.gcode') && !lower.includes('.gcode.')) {
return t('printers.dropNotPrintable', 'Only .gcode and .gcode.3mf files can be printed');
}
}}
onFileUploaded={(uploadedFile) => {
// Check printer compatibility if sliced_for_model is available in metadata
const slicedFor = (uploadedFile.metadata as Record)?.sliced_for_model as string | undefined;
const printerModel = mapModelCode(printer.model);
if (slicedFor && printerModel && slicedFor.toLowerCase() !== printerModel.toLowerCase()) {
api.deleteLibraryFile(uploadedFile.id).catch(() => {});
return t('printers.incompatibleFile', 'This file was sliced for {{slicedFor}}, but this printer is a {{printerModel}}', { slicedFor, printerModel });
}
setPrintAfterUpload({ id: uploadedFile.id, filename: uploadedFile.filename });
}}
/>
)}
{/* Print Modal (after upload) */}
{printAfterUpload && (
setPrintAfterUpload(null)}
onSuccess={() => setPrintAfterUpload(null)}
cleanupLibraryAfterDispatch
/>
)}
{/* MQTT Debug Modal */}
{showMQTTDebug && (
setShowMQTTDebug(false)}
/>
)}
{showDiagnostic && (
setShowDiagnostic(false)}
/>
)}
{showPrinterInfo && (
{
powerControlMutation.mutate('on');
setShowPowerOnConfirm(false);
}}
onCancel={() => setShowPowerOnConfirm(false)}
/>
)}
{/* Maintenance Mode mid-print confirmation (#1476) — entering maintenance
disconnects MQTT, which stops progress tracking + completion
notifications for the in-flight job. Idle / FINISH / FAILED states
skip this dialog and toggle directly. */}
{confirmMaintenanceEnter && (
{
maintenanceMutation.mutate(false);
setConfirmMaintenanceEnter(false);
}}
onCancel={() => setConfirmMaintenanceEnter(false)}
/>
)}
{/* Power Off Confirmation */}
{showPowerOffConfirm && smartPlug && (
{
powerControlMutation.mutate('off');
setShowPowerOffConfirm(false);
}}
onCancel={() => setShowPowerOffConfirm(false)}
/>
)}
{/* HA entity toggle confirmation (Show on Printer Card switches) */}
{haToggleConfirm && (
{
runScriptMutation.mutate({ id: haToggleConfirm.id, action: 'toggle' });
setHaToggleConfirm(null);
}}
onCancel={() => setHaToggleConfirm(null)}
/>
)}
{/* Stop Print Confirmation */}
{showStopConfirm && (
{
stopPrintMutation.mutate();
setShowStopConfirm(false);
}}
onCancel={() => setShowStopConfirm(false)}
/>
)}
{/* Pause Print Confirmation */}
{showPauseConfirm && (
{
pausePrintMutation.mutate();
setShowPauseConfirm(false);
}}
onCancel={() => setShowPauseConfirm(false)}
/>
)}
{/* Resume Print Confirmation */}
{showResumeConfirm && (
{
resumePrintMutation.mutate();
setShowResumeConfirm(false);
}}
onCancel={() => setShowResumeConfirm(false)}
/>
)}
{/* Skip Objects Modal */}
setShowSkipObjectsModal(false)}
/>
{/* HMS Error Modal */}
{showHMSModal && (
setShowHMSModal(false)}
printerId={printer.id}
hasPermission={hasPermission}
runoutGuidance={runoutGuidance}
/>
)}
{/* AI failure detection modal (#1546) */}
{showAiModal && (
setShowAiModal(false)}
/>
)}
{/* AMS Filament Backup status / control modal (#1762) */}
{amsBackupModalOpen && status && (
setAmsBackupMutation.mutate(next)}
onClose={() => setAmsBackupModalOpen(false)}
/>
)}
{/* AMS History Modal */}
{amsHistoryModal && (
setAmsHistoryModal(null)}
printerId={printer.id}
printerName={printer.name}
amsId={amsHistoryModal.amsId}
amsLabel={amsHistoryModal.amsLabel}
initialMode={amsHistoryModal.mode}
thresholds={amsThresholds}
/>
)}
{/* Heater History Modal (nozzle / bed / chamber) */}
{heaterHistoryModal && (
setHeaterHistoryModal(null)}
printerId={printer.id}
printerName={printer.name}
initialKind={heaterHistoryModal.initialKind}
availableKinds={heaterHistoryModal.availableKinds}
/>
)}
{/* Link Spool Modal */}
{linkSpoolModal && (
setLinkSpoolModal(null)}
tagUid={linkSpoolModal.tagUid}
trayUuid={linkSpoolModal.trayUuid}
printerId={linkSpoolModal.printerId}
amsId={linkSpoolModal.amsId}
trayId={linkSpoolModal.trayId}
/>
)}
{/* Assign Spool Modal */}
{assignSpoolModal && (
setAssignSpoolModal(null)}
printerId={assignSpoolModal.printerId}
amsId={assignSpoolModal.amsId}
trayId={assignSpoolModal.trayId}
trayInfo={assignSpoolModal.trayInfo}
spoolmanEnabled={!!spoolmanEnabled}
/>
)}
{/* Configure AMS Slot Modal */}
{configureSlotModal && (
setConfigureSlotModal(null)}
printerId={printer.id}
slotInfo={configureSlotModal}
printerModel={mapModelCode(printer.model) || undefined}
nozzleDiameter={resolveSlotNozzleDiameter(status, configureSlotModal.amsId)}
onSuccess={() => {
// Refresh slot presets to show updated profile name
queryClient.invalidateQueries({ queryKey: ['slotPresets', printer.id] });
// Printer status will update automatically via WebSocket when AMS data changes
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
}}
/>
)}
{/* Edit Printer Modal */}
{showEditModal && (
setShowEditModal(false)}
/>
)}
{/* Firmware Update Modal */}
{showFirmwareModal && firmwareInfo && (
setShowFirmwareModal(false)}
/>
)}
{/* AMS Drying Popover — fixed position to avoid overflow/z-index issues */}
{dryingPopoverAmsId !== null && dryingPopoverPos && (() => {
const maxTemp = dryingPopoverModuleType === 'n3s' ? 85 : 65;
const sliderMin = 35;
const sliderMax = maxTemp + 10;
return (
<>
{/* Backdrop */}
{showAirductMenu === printer.id && (
<>
);
})()}
{/* AMS Units - 2-Column Grid Layout */}
{(amsData?.length > 0 || status.vt_tray.length > 0) && viewMode === 'expanded' && (() => {
// Separate regular AMS (4-tray) from HT AMS (1-tray)
const regularAms = amsData.filter(ams => ams.tray.length > 1);
const htAms = amsData.filter(ams => ams.tray.length === 1);
// The external spool can only be hidden while some AMS remains to
// fill the row (#1782). On an A1 Mini or a bare P1P it is the whole
// filament section, so the toggle is not offered there and a stored
// preference from a printer that later lost its AMS cannot blank the
// row either — both read through canHideExternalSpool.
const canHideExternalSpool = amsData.length > 0 && status.vt_tray.length > 0;
const showExternalSpool = !(canHideExternalSpool && externalSpoolHidden);
const isDualNozzle = printer.nozzle_count === 2 || status?.temperatures?.nozzle_2 !== undefined;
const bodyScale = CARD_BODY_SCALE[cardSize] ?? 1;
// Rounded because 11 * 1.2 is 13.200000000000001 in binary
// floating point, and that lands verbatim in the DOM.
const scaledRem = (base: number) => `${Math.round(base * bodyScale * 1000) / 1000}rem`;
// Deliberately NOT scaled with the body (#1848). These AMS cards
// already grow to fill the row, so the 3.5rem is a floor they sit
// well above in practice -- raising it just costs a unit its place
// on the row. Losing one matters: a wrapped AMS-HT is then alone on
// its line, and flex-grow stretches its single slot across the whole
// card. The AMS-HT's own width does scale, below, because its
// readings sit beside the slot rather than under it.
const slotMinWidth = '3.5rem';
const filamentSlotStyle: React.CSSProperties = { minWidth: slotMinWidth };
// The AMS-HT holds a single spool, and its slot is the only thing
// on that row able to grow -- so it swallowed every spare pixel and
// shoved the temperature and humidity hard against the card's edge.
// Capping it at roughly two ordinary slots keeps the readings clear
// of the edge; the cap scales because the text inside the slot does.
const htSlotStyle: React.CSSProperties = {
minWidth: slotMinWidth,
maxWidth: scaledRem(7.25),
};
const slotGridStyle = (columns: number): React.CSSProperties => ({
gridTemplateColumns: `repeat(${columns}, minmax(${slotMinWidth}, 1fr))`,
});
// #1762 (comment 2): while a print is running/paused, overlay a small
// "P1 / P2 / P3" pill on each slot referenced by the active print's
// mapping. Catches the reporter's scenario — "any X1C" queue job
// staged to a printer with mismatched filament: the wrong-slot pill
// is visible the instant printing starts.
const isPrintingForMapping = status.state === 'RUNNING' || status.state === 'PAUSE';
const activeMapping: number[] = isPrintingForMapping && Array.isArray(status.ams_mapping)
? status.ams_mapping
: [];
const getAmsCardStyle = (slotCount: number): React.CSSProperties => {
const boundedSlotCount = Math.max(1, slotCount);
const gapCount = Math.max(0, boundedSlotCount - 1);
const minWidth = `calc(${boundedSlotCount} * ${slotMinWidth} + ${gapCount} * 0.25rem + 1rem)`;
return {
flex: `1 1 ${minWidth}`,
minWidth,
};
};
return (
setShowAirductMenu(null)} />
);
})()}
{/* Movement — compact badge, popover holds XY, Z, and home controls */}
{(() => {
const canControl = hasPermission('printers:control');
const disabled = isPrinting || !canControl;
const bambuIsPlateBelow = true; // positive Z moves plate away from nozzle
const jogButtonClass = 'flex h-8 w-8 items-center justify-center rounded bg-indigo-100 dark:bg-indigo-500/15 text-indigo-700 dark:text-indigo-300 transition-colors hover:bg-indigo-200 dark:hover:bg-indigo-500/30 disabled:cursor-not-allowed disabled:opacity-50';
const requestZJog = (direction: 1 | -1) => {
const signed = direction * bedJogStep * (bambuIsPlateBelow ? 1 : -1);
// The jog never disables the soft endstops (#2579), so it's always
// safe: the firmware clamps the move at the travel limit, or refuses
// it if the printer isn't homed. No not-homed bypass to gate.
bedJogMutation.mutate({ distance: signed });
};
const requestXyJog = (x: number, y: number) => {
xyJogMutation.mutate({ x, y });
};
const requestExtruderJog = (distance: number) => {
extruderJogMutation.mutate(distance);
};
return (
{([
{ mode: 'cooling', label: t('printers.airduct.cooling'), modeId: 0 },
{ mode: 'heating', label: t('printers.airduct.heating'), modeId: 1 },
] as const).map(({ mode, label, modeId }) => (
))}
)}
{showBedJogMenu === printer.id && (
<>
{/* Print Speed */}
{(() => (
setShowBedJogMenu(null)} />
);
})()}
{t('printers.bedJog.title')}
{/* #2579: Bambu firmware does not enforce soft endstops on
G-code sent over MQTT, so manual moves can drive past the
travel limits and cause a collision. Not fixable from our
side — warn prominently. */}
E
{t('printers.bedJog.step')}
{[1, 10, 50].map((step) => (
))}
{showSpeedMenu === printer.id && (
<>
{/* Right: Print Control Buttons */}
setShowSpeedMenu(null)} />
))()}
{([
{ mode: 1, label: t('printers.speed.silent') },
{ mode: 2, label: t('printers.speed.standard') },
{ mode: 3, label: t('printers.speed.sport') },
{ mode: 4, label: t('printers.speed.ludicrous') },
] as const).map(({ mode, label }) => (
))}
)}
{/* Pause/Resume button */}
{(() => {
const pauseUnavailable = !isPrinting || isControlBusy || !hasPermission('printers:control');
return (
);
})()}
{/* Stop button */}
{(() => {
const stopUnavailable = !isPrinting || isControlBusy || !hasPermission('printers:control');
return (
);
})()}
{/* Section Header */}
);
})()}
)}
{/* Bottom block (power row + action bar). Wrapped together so the
power row hugs the action bar at the card bottom instead of
floating up when there's less filament content above. */}
{viewMode === 'expanded' && (
{t('printers.filaments')}
setAmsBackupModalOpen(true)}
/>
{/* Offered only when an AMS is present: on a printer that
feeds from the external spool alone, hiding it would
empty the row entirely (#1782). */}
{canHideExternalSpool && (
<>
{/* AMS Content */}
{/* Regular AMS units */}
{regularAms.map((ams) => {
const mappedExtruderId = amsExtruderMap[String(ams.id)];
const normalizedId = ams.id >= 128 ? ams.id - 128 : ams.id;
const extruderId = mappedExtruderId !== undefined ? mappedExtruderId : normalizedId;
const isLeftNozzle = extruderId === 1;
const isRightNozzle = extruderId === 0;
return (
)}
{/* Header: Label + Stats (no icon) */}
{/* Drying status bar */}
{ams.dry_time > 0 && (
);
})}
{/* HT AMS units */}
{htAms.map((ams) => {
const mappedExtruderId = amsExtruderMap[String(ams.id)];
const normalizedId = ams.id >= 128 ? ams.id - 128 : ams.id;
const extruderId = mappedExtruderId !== undefined ? mappedExtruderId : normalizedId;
const isLeftNozzle = extruderId === 1;
const isRightNozzle = extruderId === 0;
const tray = ams.tray[0];
const hasFillLevel = tray?.tray_type && tray.remain >= 0;
const isEmpty = !tray?.tray_type;
const emptyKind = getEmptySlotKind(tray);
// Check if this is the currently loaded tray
const globalTrayId = getGlobalTrayId(ams.id, tray?.id ?? 0, false);
const isActive = effectiveTrayNow === globalTrayId;
// Runout guidance (#2587): expected / ran-out slot on this HT unit.
const isExpectedSlot = expectedTray !== null && expectedTray === globalTrayId;
const isRanOutSlot = previousTray !== null && previousTray === globalTrayId;
// Get cloud preset info if available
const cloudInfo = tray?.tray_info_idx ? filamentInfo?.[tray.tray_info_idx] : null;
// Get saved slot preset mapping (for user-configured slots)
const slotPreset = slotPresets?.[globalTrayId];
const htSlotId = tray?.id ?? 0;
// Fill level fallback chain: Spoolman → Inventory → AMS remain
const htTrayTag = (tray?.tray_uuid || tray?.tag_uid || getFallbackSpoolTag(printer.serial_number, ams.id, htSlotId))?.toUpperCase();
const htLinkedSpool = htTrayTag ? linkedSpools?.[htTrayTag] : undefined;
const htSpoolmanFill = getSpoolmanFillLevel(htLinkedSpool);
const htInventoryAssignment = onGetAssignment?.(printer.id, ams.id, htSlotId);
const htInventoryFill = (() => {
const sp = htInventoryAssignment?.spool;
if (sp && sp.label_weight > 0 && sp.weight_used != null) {
return Math.round(Math.max(0, sp.label_weight - sp.weight_used) / sp.label_weight * 100);
}
return null;
})();
// If inventory says 0% but AMS reports positive remain, prefer AMS (#676)
const htResolvedInventoryFill = (htInventoryFill === 0 && hasFillLevel && tray.remain > 0)
? null : htInventoryFill;
// Slot-assigned-only fill (when spool has no NFC tag but is slot-assigned)
const htSlotAssignmentForFill = spoolmanEnabled && !spoolmanLoading
? spoolmanSlotAssignments?.find(a => a.printer_id === printer.id && a.ams_id === ams.id && a.tray_id === htSlotId)
: undefined;
const htSlotSpoolForFill = htSlotAssignmentForFill
? spoolmanSpools?.find(s => s.id === htSlotAssignmentForFill.spoolman_spool_id)
: undefined;
const htSlotSpoolFill = (htSlotSpoolForFill && (htSlotSpoolForFill.label_weight ?? 0) > 0)
? Math.round(Math.max(0, (htSlotSpoolForFill.label_weight ?? 0) - htSlotSpoolForFill.weight_used) / (htSlotSpoolForFill.label_weight ?? 1) * 100)
: null;
const htEffectiveFill = htSpoolmanFill ?? htSlotSpoolFill ?? htResolvedInventoryFill ?? (hasFillLevel ? tray.remain : null);
const htFillSource = (htSpoolmanFill !== null || htSlotSpoolFill !== null) ? 'spoolman' as const
: htResolvedInventoryFill !== null ? 'inventory' as const
: hasFillLevel ? 'ams' as const
: undefined;
// Build filament data for hover card
const filamentData = tray?.tray_type ? {
vendor: (isBambuLabSpool(tray) ? 'Bambu Lab' : 'Generic') as 'Bambu Lab' | 'Generic',
profile: slotPreset?.preset_name || (htSlotSpoolForFill ? [htSlotSpoolForFill.brand, htSlotSpoolForFill.slicer_filament_name?.split('@')[0].trim() || htSlotSpoolForFill.material].filter(Boolean).join(' ').trim() : null) || htInventoryAssignment?.spool?.slicer_filament_name || cloudInfo?.name || tray.tray_sub_brands || tray.tray_type,
colorName: getColorName(tray.tray_color || ''),
colorHex: tray.tray_color || null,
kFactor: formatKValue(tray.k),
fillLevel: htEffectiveFill,
trayUuid: tray.tray_uuid || null,
tagUid: tray.tag_uid || null,
fillSource: htFillSource,
} : null;
// Check if this specific slot is being refreshed
const isHtRefreshing = refreshingSlot?.amsId === ams.id &&
refreshingSlot?.slotId === htSlotId;
// #1762 (comment 2): active print-slot index for this HT slot.
const htActivePrintSlotIdx = activeMapping.indexOf(globalTrayId);
const htActivePrintSlotLabel = htActivePrintSlotIdx >= 0
? `P${htActivePrintSlotIdx + 1}`
: null;
// Slot visual content (goes inside hover card)
const slotVisual = (
{/* AMS name — hover to see serial, firmware, and edit friendly name */}
{amsLabels?.[ams.id] || getAmsLabel(ams.id, ams.tray.length)}
{isDualNozzle && (isLeftNozzle || isRightNozzle) && (
{(ams.humidity != null || ams.temp != null) && (
{ams.humidity != null && (
setAmsHistoryModal({
amsId: ams.id,
amsLabel: getAmsLabel(ams.id, ams.tray.length),
mode: 'humidity',
})}
compact
/>
)}
{ams.temp != null && (
setAmsHistoryModal({
amsId: ams.id,
amsLabel: getAmsLabel(ams.id, ams.tray.length),
mode: 'temperature',
})}
compact
/>
)}
{/* Drying button — only for AMS 2 Pro (n3f) and AMS-HT (n3s).
Screen-only models (P1 series) keep the control but can't
be commanded: it stays disabled and says why (#2533). */}
{(status.supports_drying || status.drying_screen_only) && (ams.module_type === 'n3f' || ams.module_type === 'n3s') && hasPermission('printers:control') && (
)}
)}
{[0, 1, 2, 3].map((slotIdx) => {
// Find tray data for this slot (may be undefined if data incomplete)
// Use array index if available, as tray.id may not always be set
const tray = ams.tray[slotIdx] || ams.tray.find(t => t.id === slotIdx);
const hasFillLevel = tray?.tray_type && tray.remain >= 0;
const isEmpty = !tray?.tray_type;
const emptyKind = getEmptySlotKind(tray);
// Check if this is the currently loaded tray
// Global tray ID = ams.id * 4 + slot index (for standard AMS)
const globalTrayId = ams.id * 4 + slotIdx;
const isActive = effectiveTrayNow === globalTrayId;
// Runout guidance (#2587): the slot the paused print now
// expects filament in, and the slot that ran out.
const isExpectedSlot = expectedTray !== null && expectedTray === globalTrayId;
const isRanOutSlot = previousTray !== null && previousTray === globalTrayId;
// Get cloud preset info if available
const cloudInfo = tray?.tray_info_idx ? filamentInfo?.[tray.tray_info_idx] : null;
// Get saved slot preset mapping (for user-configured slots)
const slotPreset = slotPresets?.[globalTrayId];
// Fill level fallback chain: Spoolman → Inventory → AMS remain
const trayTag = (tray?.tray_uuid || tray?.tag_uid || getFallbackSpoolTag(printer.serial_number, ams.id, slotIdx))?.toUpperCase();
const linkedSpool = trayTag ? linkedSpools?.[trayTag] : undefined;
const spoolmanFill = getSpoolmanFillLevel(linkedSpool);
// Slot-assigned-only spool fill (no tag link required)
const slotAssignmentForFill = spoolmanEnabled && !spoolmanLoading
? spoolmanSlotAssignments?.find(a => a.printer_id === printer.id && a.ams_id === ams.id && a.tray_id === slotIdx)
: undefined;
const slotSpoolForFill = slotAssignmentForFill
? spoolmanSpools?.find(s => s.id === slotAssignmentForFill.spoolman_spool_id)
: undefined;
const slotSpoolFill = (slotSpoolForFill && (slotSpoolForFill.label_weight ?? 0) > 0)
? Math.round(Math.max(0, (slotSpoolForFill.label_weight ?? 0) - slotSpoolForFill.weight_used) / (slotSpoolForFill.label_weight ?? 1) * 100)
: null;
const inventoryAssignment = onGetAssignment?.(printer.id, ams.id, slotIdx);
const inventoryFill = (() => {
const sp = inventoryAssignment?.spool;
if (sp && sp.label_weight > 0 && sp.weight_used != null) {
return Math.round(Math.max(0, sp.label_weight - sp.weight_used) / sp.label_weight * 100);
}
return null;
})();
// If inventory says 0% but AMS reports positive remain, prefer AMS
// (inventory weight_used may be stale or over-counted — #676)
const resolvedInventoryFill = (inventoryFill === 0 && hasFillLevel && tray.remain > 0)
? null : inventoryFill;
const effectiveFill = spoolmanFill ?? slotSpoolFill ?? resolvedInventoryFill ?? (hasFillLevel ? tray.remain : null);
const fillSource = (spoolmanFill !== null || slotSpoolFill !== null) ? 'spoolman' as const
: resolvedInventoryFill !== null ? 'inventory' as const
: hasFillLevel ? 'ams' as const
: undefined;
// Build filament data for hover card
const filamentData = tray?.tray_type ? {
vendor: (isBambuLabSpool(tray) ? 'Bambu Lab' : 'Generic') as 'Bambu Lab' | 'Generic',
// Spoolman spool name wins over cloud lookup so a slot bound to
// a Spoolman spool shows that spool's preset name (e.g. "Devil
// Design PLA") instead of whatever the printer's filament_id
// resolves to in the cloud catalog (often "Generic PLA" for
// P-prefix local presets). Spoolman's filament.name is just the
// material+subtype ("PLA Basic"); prepend the spool's brand so
// the hover card shows "Devil Design PLA Basic" rather than the
// vendor-less form. Strip the "@..." suffix that
// BambuStudio appends to user-preset names.
profile: slotPreset?.preset_name || (slotSpoolForFill ? [slotSpoolForFill.brand, slotSpoolForFill.slicer_filament_name?.split('@')[0].trim() || slotSpoolForFill.material].filter(Boolean).join(' ').trim() : null) || inventoryAssignment?.spool?.slicer_filament_name || cloudInfo?.name || tray.tray_sub_brands || tray.tray_type,
colorName: getColorName(tray.tray_color || ''),
colorHex: tray.tray_color || null,
kFactor: formatKValue(tray.k),
fillLevel: effectiveFill,
trayUuid: tray.tray_uuid || null,
tagUid: tray.tag_uid || null,
fillSource,
} : null;
// Check if this specific slot is being refreshed
const isRefreshing = refreshingSlot?.amsId === ams.id &&
refreshingSlot?.slotId === slotIdx;
// #1762 (comment 2): which print-slot is mapped to THIS AMS slot.
const activePrintSlotIdx = activeMapping.indexOf(globalTrayId);
const activePrintSlotLabel = activePrintSlotIdx >= 0
? `P${activePrintSlotIdx + 1}`
: null;
// Slot visual content (goes inside hover card)
const slotVisual = (
{isExpectedSlot && (
↓
)}
{activePrintSlotLabel && (
{activePrintSlotLabel}
)}
{/* Filament color circle with 1-based slot number centered inside */}
);
// Wrapper with menu button, dropdown, and loading overlay (outside hover card)
return (
{tray?.tray_type || t(emptyKind === 'reset' ? 'ams.slotUnconfigured' : 'ams.slotEmpty')}
{/* Fill bar */}
{effectiveFill !== null && effectiveFill >= 0 && !isEmpty && tray && (
)}
{/* Loading overlay during RFID re-read */}
{isRefreshing && (
{
const linkTag = (filamentData.trayUuid || filamentData.tagUid || getFallbackSpoolTag(printer.serial_number, ams.id, slotIdx)).toUpperCase();
setLinkSpoolModal({
tagUid: filamentData.tagUid || linkTag,
trayUuid: filamentData.trayUuid || '',
printerId: printer.id,
amsId: ams.id,
trayId: slotIdx,
});
} : undefined,
onUnlinkSpool: linkedSpool?.id ? () => unlinkSpoolMutation.mutate(linkedSpool.id) : undefined,
}}
inventory={(() => {
if (spoolmanEnabled) {
if (spoolmanLoading) return undefined;
const slotAssignment = slotAssignmentForFill;
const spoolmanSpool = slotSpoolForFill;
return {
assignedSpool: spoolmanSpool ? {
id: spoolmanSpool.id,
material: spoolmanSpool.material,
brand: spoolmanSpool.brand ?? null,
color_name: spoolmanSpool.color_name ?? null,
remainingWeightGrams: spoolmanSpool.label_weight
? Math.max(0, Math.round(spoolmanSpool.label_weight - spoolmanSpool.weight_used))
: undefined,
} : null,
onAssignSpool: () => setAssignSpoolModal({
printerId: printer.id,
amsId: ams.id,
trayId: slotIdx,
trayInfo: {
type: tray?.tray_type || filamentData.profile,
material: tray?.tray_type ?? undefined,
profile: filamentData.profile,
color: filamentData.colorHex || '',
location: `${getAmsLabel(ams.id, ams.tray.length)} Slot ${slotIdx + 1}`,
},
}),
onUnassignSpool: (spoolmanSpool && !isBambuLabSpool(tray)) ? () => onUnassignSpoolmanSpool?.(spoolmanSpool.id) : undefined,
isAssigned: !!slotAssignment || isBambuLabSpool(tray),
};
}
const assignment = onGetAssignment?.(printer.id, ams.id, slotIdx);
return {
assignedSpool: assignment?.spool ? {
id: assignment.spool.id,
material: assignment.spool.material,
brand: assignment.spool.brand,
color_name: assignment.spool.color_name,
remainingWeightGrams: Math.max(0, Math.round(assignment.spool.label_weight - assignment.spool.weight_used)),
} : null,
onAssignSpool: () => setAssignSpoolModal({
printerId: printer.id,
amsId: ams.id,
trayId: slotIdx,
trayInfo: {
type: tray?.tray_type || filamentData.profile,
material: tray?.tray_type ?? undefined,
profile: filamentData.profile,
color: filamentData.colorHex || '',
location: `${getAmsLabel(ams.id, ams.tray.length)} Slot ${slotIdx + 1}`,
},
}),
onUnassignSpool: (assignment && !isBambuLabSpool(tray)) ? () => onUnassignSpool?.(printer.id, ams.id, slotIdx) : undefined,
isAssigned: !!assignment || isBambuLabSpool(tray),
};
})()}
configureSlot={{
enabled: hasPermission('printers:control'),
onConfigure: () => setConfigureSlotModal({
amsId: ams.id,
trayId: slotIdx,
trayCount: ams.tray.length,
trayType: tray?.tray_type || undefined,
trayColor: tray?.tray_color || undefined,
traySubBrands: tray?.tray_sub_brands || undefined,
trayInfoIdx: tray?.tray_info_idx || undefined,
extruderId: mappedExtruderId,
caliIdx: tray?.cali_idx,
savedPresetId: slotPreset?.preset_id,
}),
}}
>
{slotVisual}
) : (
setConfigureSlotModal({
amsId: ams.id,
trayId: slotIdx,
trayCount: ams.tray.length,
extruderId: mappedExtruderId,
}),
}}
onAssignSpool={() => setAssignSpoolModal({
printerId: printer.id,
amsId: ams.id,
trayId: slotIdx,
trayInfo: {
type: '',
material: undefined,
profile: '',
color: '',
location: `${getAmsLabel(ams.id, ams.tray.length)} Slot ${slotIdx + 1}`,
},
})}
>
{slotVisual}
)}
);
})}
{isExpectedSlot && (
↓
)}
{htActivePrintSlotLabel && (
{htActivePrintSlotLabel}
)}
{/* Filament color circle with 1-based slot number centered inside */}
);
// HT cards lay out slot + stats side-by-side in Row 2 (not stats-in-header
// like regular AMS), so they need more horizontal room than a 1-slot basis.
// Without this override, the L view squishes HT into a sliver next to the
// 4-slot AMS neighbors.
// 11rem holds one slot plus the temperature/humidity
// column beside it; both grow with the body scale.
const htCardWidth = scaledRem(11);
const htCardStyle: React.CSSProperties = {
flex: `1 1 ${htCardWidth}`,
minWidth: htCardWidth,
// An AMS-HT is never wider than a full AMS. Without a
// ceiling, a unit that wraps onto a line of its own is
// the only flex item there and grow stretches its single
// slot across the entire card, leaving the readings
// stranded at the far edge.
maxWidth: `calc(4 * ${slotMinWidth} + 3 * 0.25rem + 1rem)`,
};
return (
{tray?.tray_type || t(emptyKind === 'reset' ? 'ams.slotUnconfigured' : 'ams.slotEmpty')}
{/* Fill bar */}
{htEffectiveFill !== null && htEffectiveFill >= 0 && !isEmpty && (
)}
{/* Row 1: Label + Nozzle + Drying */}
);
})}
{/* External spool(s) - grouped in one card like regular AMS */}
{status.vt_tray.length > 0 && showExternalSpool && (
{/* AMS name — hover to see serial, firmware, and edit friendly name */}
{amsLabels?.[ams.id] || getAmsLabel(ams.id, ams.tray.length)}
{isDualNozzle && (isLeftNozzle || isRightNozzle) && (
{/* HT AMS drying status bar */}
{ams.dry_time > 0 && (
{/* Slot wrapper with loading overlay */}
{/* Loading overlay during RFID re-read */}
{isHtRefreshing && (
{
const linkTag = (filamentData.trayUuid || filamentData.tagUid || getFallbackSpoolTag(printer.serial_number, ams.id, htSlotId)).toUpperCase();
setLinkSpoolModal({
tagUid: filamentData.tagUid || linkTag,
trayUuid: filamentData.trayUuid || '',
printerId: printer.id,
amsId: ams.id,
trayId: htSlotId,
});
} : undefined,
onUnlinkSpool: htLinkedSpool?.id ? () => unlinkSpoolMutation.mutate(htLinkedSpool.id) : undefined,
}}
inventory={(() => {
if (spoolmanEnabled) {
if (spoolmanLoading) return undefined;
const slotAssignment = htSlotAssignmentForFill;
const spoolmanSpool = htSlotSpoolForFill;
return {
assignedSpool: spoolmanSpool ? {
id: spoolmanSpool.id,
material: spoolmanSpool.material,
brand: spoolmanSpool.brand ?? null,
color_name: spoolmanSpool.color_name ?? null,
remainingWeightGrams: spoolmanSpool.label_weight
? Math.max(0, Math.round(spoolmanSpool.label_weight - spoolmanSpool.weight_used))
: undefined,
} : null,
onAssignSpool: () => setAssignSpoolModal({
printerId: printer.id,
amsId: ams.id,
trayId: htSlotId,
trayInfo: {
type: tray?.tray_type || filamentData.profile,
material: tray?.tray_type ?? undefined,
profile: filamentData.profile,
color: filamentData.colorHex || '',
location: getAmsLabel(ams.id, ams.tray.length),
},
}),
onUnassignSpool: (spoolmanSpool && !isBambuLabSpool(tray)) ? () => onUnassignSpoolmanSpool?.(spoolmanSpool.id) : undefined,
isAssigned: !!slotAssignment || isBambuLabSpool(tray),
};
}
const assignment = onGetAssignment?.(printer.id, ams.id, htSlotId);
return {
assignedSpool: assignment?.spool ? {
id: assignment.spool.id,
material: assignment.spool.material,
brand: assignment.spool.brand,
color_name: assignment.spool.color_name,
remainingWeightGrams: Math.max(0, Math.round(assignment.spool.label_weight - assignment.spool.weight_used)),
} : null,
onAssignSpool: () => setAssignSpoolModal({
printerId: printer.id,
amsId: ams.id,
trayId: htSlotId,
trayInfo: {
type: tray?.tray_type || filamentData.profile,
material: tray?.tray_type ?? undefined,
profile: filamentData.profile,
color: filamentData.colorHex || '',
location: getAmsLabel(ams.id, ams.tray.length),
},
}),
onUnassignSpool: (assignment && !isBambuLabSpool(tray)) ? () => onUnassignSpool?.(printer.id, ams.id, htSlotId) : undefined,
isAssigned: !!assignment || isBambuLabSpool(tray),
};
})()}
configureSlot={{
enabled: hasPermission('printers:control'),
onConfigure: () => setConfigureSlotModal({
amsId: ams.id,
trayId: htSlotId,
trayCount: ams.tray.length,
trayType: tray?.tray_type || undefined,
trayColor: tray?.tray_color || undefined,
traySubBrands: tray?.tray_sub_brands || undefined,
trayInfoIdx: tray?.tray_info_idx || undefined,
extruderId: mappedExtruderId,
caliIdx: tray?.cali_idx,
savedPresetId: slotPreset?.preset_id,
}),
}}
>
{slotVisual}
) : (
setConfigureSlotModal({
amsId: ams.id,
trayId: htSlotId,
trayCount: ams.tray.length,
extruderId: mappedExtruderId,
}),
}}
onAssignSpool={() => setAssignSpoolModal({
printerId: printer.id,
amsId: ams.id,
trayId: htSlotId,
trayInfo: {
type: '',
material: undefined,
profile: '',
color: '',
location: getAmsLabel(ams.id, ams.tray.length),
},
})}
>
{slotVisual}
)}
{/* Stats stacked vertically: Temp on top, Humidity below */}
{(ams.humidity != null || ams.temp != null) && (
{ams.temp != null && (
setAmsHistoryModal({
amsId: ams.id,
amsLabel: getAmsLabel(ams.id, ams.tray.length),
mode: 'temperature',
})}
compact
/>
)}
{ams.humidity != null && (
setAmsHistoryModal({
amsId: ams.id,
amsLabel: getAmsLabel(ams.id, ams.tray.length),
mode: 'humidity',
})}
compact
/>
)}
)}
{t('printers.external')}
1 ? 2 : 1)}>
{[...status.vt_tray].sort((a, b) => (a.id ?? 254) - (b.id ?? 254)).map((extTray) => {
const extTrayId = extTray.id ?? 254;
// On dual-nozzle (H2C/H2D), tray_now=254 means "external spool"
// generically — use active_extruder to determine L vs R:
// extruder 1=left → Ext-L (id=254), extruder 0=right → Ext-R (id=255)
const isExtActive = isDualNozzle && effectiveTrayNow === 254
? (extTrayId === 254 && status.active_extruder === 1) ||
(extTrayId === 255 && status.active_extruder === 0)
: effectiveTrayNow === extTrayId;
const slotTrayId = extTrayId - 254; // 0 or 1
const extLabel = isDualNozzle
? (extTrayId === 254 ? t('printers.extL') : t('printers.extR'))
: '';
const extCloudInfo = extTray.tray_info_idx ? filamentInfo?.[extTray.tray_info_idx] : null;
const extSlotPreset = slotPresets?.[255 * 4 + slotTrayId];
const extTrayTag = (extTray.tray_uuid || extTray.tag_uid || getFallbackSpoolTag(printer.serial_number, 255, slotTrayId))?.toUpperCase();
const extLinkedSpool = extTrayTag ? linkedSpools?.[extTrayTag] : undefined;
const extSpoolmanFill = getSpoolmanFillLevel(extLinkedSpool);
const extInventoryAssignment = onGetAssignment?.(printer.id, 255, slotTrayId);
const extInventoryFill = (() => {
const sp = extInventoryAssignment?.spool;
if (sp && sp.label_weight > 0 && sp.weight_used != null) {
return Math.round(Math.max(0, sp.label_weight - sp.weight_used) / sp.label_weight * 100);
}
return null;
})();
const extHasFillLevel = extTray.tray_type && extTray.remain >= 0;
// If inventory says 0% but AMS reports positive remain, prefer AMS (#676)
const extResolvedInventoryFill = (extInventoryFill === 0 && extHasFillLevel && extTray.remain > 0)
? null : extInventoryFill;
// Slot-assigned-only fill (when spool has no NFC tag but is slot-assigned)
const extSlotAssignmentForFill = spoolmanEnabled && !spoolmanLoading
? spoolmanSlotAssignments?.find(a => a.printer_id === printer.id && a.ams_id === 255 && a.tray_id === slotTrayId)
: undefined;
const extSlotSpoolForFill = extSlotAssignmentForFill
? spoolmanSpools?.find(s => s.id === extSlotAssignmentForFill.spoolman_spool_id)
: undefined;
const extSlotSpoolFill = (extSlotSpoolForFill && (extSlotSpoolForFill.label_weight ?? 0) > 0)
? Math.round(Math.max(0, (extSlotSpoolForFill.label_weight ?? 0) - extSlotSpoolForFill.weight_used) / (extSlotSpoolForFill.label_weight ?? 1) * 100)
: null;
const extEffectiveFill = extSpoolmanFill ?? extSlotSpoolFill ?? extResolvedInventoryFill ?? (extHasFillLevel ? extTray.remain : null);
const extFillSource = (extSpoolmanFill !== null || extSlotSpoolFill !== null) ? 'spoolman' as const
: extResolvedInventoryFill !== null ? 'inventory' as const
: extHasFillLevel ? 'ams' as const
: undefined;
const extFilamentData = {
vendor: (isBambuLabSpool(extTray) ? 'Bambu Lab' : 'Generic') as 'Bambu Lab' | 'Generic',
profile: extSlotPreset?.preset_name || (extSlotSpoolForFill ? [extSlotSpoolForFill.brand, extSlotSpoolForFill.slicer_filament_name?.split('@')[0].trim() || extSlotSpoolForFill.material].filter(Boolean).join(' ').trim() : null) || extInventoryAssignment?.spool?.slicer_filament_name || extCloudInfo?.name || extTray.tray_sub_brands || extTray.tray_type || 'Unknown',
colorName: getColorName(extTray.tray_color || ''),
colorHex: extTray.tray_color || null,
kFactor: formatKValue(extTray.k),
fillLevel: extEffectiveFill,
trayUuid: extTray.tray_uuid || null,
tagUid: extTray.tag_uid || null,
fillSource: extFillSource,
};
const isEmpty = !extTray.tray_type;
const emptyKind = getEmptySlotKind(extTray);
const extSlotContent = (
{/* Color circle: L/R inside on dual-nozzle external (replaces
the separate Ext-L/Ext-R caption that made the row taller than
regular AMS slots), 1-based slot number on single-nozzle. */}
);
return (
{extTray.tray_type || t('ams.slotEmpty')}
{extEffectiveFill !== null && extEffectiveFill >= 0 && !isEmpty && (
)}
{!isEmpty ? (
{
const linkTag = (extFilamentData.trayUuid || extFilamentData.tagUid || getFallbackSpoolTag(printer.serial_number, 255, slotTrayId)).toUpperCase();
setLinkSpoolModal({
tagUid: extFilamentData.tagUid || linkTag,
trayUuid: extFilamentData.trayUuid || '',
printerId: printer.id,
amsId: 255,
trayId: slotTrayId,
});
} : undefined,
onUnlinkSpool: extLinkedSpool?.id ? () => unlinkSpoolMutation.mutate(extLinkedSpool.id) : undefined,
}}
inventory={(() => {
if (spoolmanEnabled) {
if (spoolmanLoading) return undefined;
const slotAssignment = extSlotAssignmentForFill;
const spoolmanSpool = extSlotSpoolForFill;
return {
assignedSpool: spoolmanSpool ? {
id: spoolmanSpool.id,
material: spoolmanSpool.material,
brand: spoolmanSpool.brand ?? null,
color_name: spoolmanSpool.color_name ?? null,
remainingWeightGrams: spoolmanSpool.label_weight
? Math.max(0, Math.round(spoolmanSpool.label_weight - spoolmanSpool.weight_used))
: undefined,
} : null,
onAssignSpool: () => setAssignSpoolModal({
printerId: printer.id,
amsId: 255,
trayId: slotTrayId,
trayInfo: {
type: extTray.tray_type || extFilamentData.profile,
material: extTray.tray_type ?? undefined,
profile: extFilamentData.profile,
color: extFilamentData.colorHex || '',
location: extLabel || t('printers.external'),
},
}),
onUnassignSpool: (spoolmanSpool && !isBambuLabSpool(extTray)) ? () => onUnassignSpoolmanSpool?.(spoolmanSpool.id) : undefined,
isAssigned: !!slotAssignment || isBambuLabSpool(extTray),
};
}
const assignment = onGetAssignment?.(printer.id, 255, slotTrayId);
return {
assignedSpool: assignment?.spool ? {
id: assignment.spool.id,
material: assignment.spool.material,
brand: assignment.spool.brand,
color_name: assignment.spool.color_name,
remainingWeightGrams: Math.max(0, Math.round(assignment.spool.label_weight - assignment.spool.weight_used)),
} : null,
onAssignSpool: () => setAssignSpoolModal({
printerId: printer.id,
amsId: 255,
trayId: slotTrayId,
trayInfo: {
type: extTray.tray_type || extFilamentData.profile,
material: extTray.tray_type ?? undefined,
profile: extFilamentData.profile,
color: extFilamentData.colorHex || '',
location: extLabel || t('printers.external'),
},
}),
onUnassignSpool: (assignment && !isBambuLabSpool(extTray)) ? () => onUnassignSpool?.(printer.id, 255, slotTrayId) : undefined,
isAssigned: !!assignment || isBambuLabSpool(extTray),
};
})()}
configureSlot={{
enabled: hasPermission('printers:control'),
onConfigure: () => setConfigureSlotModal({
amsId: 255,
trayId: slotTrayId,
trayCount: 1,
trayType: extTray.tray_type || undefined,
trayColor: extTray.tray_color || undefined,
traySubBrands: extTray.tray_sub_brands || undefined,
trayInfoIdx: extTray.tray_info_idx || undefined,
extruderId: isDualNozzle ? (extTrayId === 254 ? 1 : 0) : undefined,
caliIdx: extTray.cali_idx,
savedPresetId: extSlotPreset?.preset_id,
}),
}}
>
{extSlotContent}
) : (
setConfigureSlotModal({
amsId: 255,
trayId: slotTrayId,
trayCount: 1,
extruderId: isDualNozzle ? (extTrayId === 254 ? 1 : 0) : undefined,
}),
}}
onAssignSpool={() => setAssignSpoolModal({
printerId: printer.id,
amsId: 255,
trayId: slotTrayId,
trayInfo: {
type: '',
material: undefined,
profile: '',
color: '',
location: `External Slot ${slotTrayId + 1}`,
},
})}
>
{extSlotContent}
)}
);
})}
{smartPlug && (
)}
{/* File Manager Modal */}
{showFileManager && (
{t('printers.power', 'Power')}
{/* Plug name + current power */}
{/* HA entity buttons row */}
{scriptPlugs && scriptPlugs.length > 0 && (
{/* Auto-off */}
{scriptPlugs.map(script => {
const isScript = script.ha_entity_id?.startsWith('script.');
return (
);
})}
{printerActionsMenu}
{/* Camera Button */}
{isConnected && status?.state !== 'RUNNING' && status?.state !== 'PAUSE' && (
)}
closePlateCheckModal()}>
)}
{/* Power On Confirmation */}
{showPowerOnConfirm && smartPlug && (
e.stopPropagation()}>
{plateCheckResult.needs_calibration ? (
Build Plate Check
{plateCheckResult.reference_count !== undefined && plateCheckResult.max_references && ( {plateCheckResult.reference_count}/{plateCheckResult.max_references} refs )}
{plateCheckResult.needs_calibration ? (
<>
) : (
<>
{plateCheckResult.debug_image_url && (
)}
)}
{/* ROI Editor */}
{!plateCheckResult.needs_calibration && (
{!editingRoi ? (
) : (
)}
{editingRoi ? (
) : (
)}
{t('printers.plateDetection.calibrationRequired')}
{t('printers.plateDetection.calibrationDescription')}
{plateCheckResult.is_empty ? t('printers.plateDetection.plateEmpty') : t('printers.plateDetection.objectsDetected')}
{t('printers.plateDetection.confidence')}: {Math.round(plateCheckResult.confidence * 100)}% | {t('printers.plateDetection.difference')}: {plateCheckResult.difference_percent.toFixed(1)}%
{t('printers.plateDetection.analysisPreview')}
{t('printers.plateDetection.analysisLegend')}
{plateCheckResult.message}
)} {/* Saved References Grid */} {plateReferences && plateReferences.references.length > 0 && ({t('printers.plateDetection.savedReferences', { count: plateReferences.references.length, max: plateReferences.max_references })}
{plateReferences.references.map((ref) => (
{/* Delete button */}
{/* Label */}
{editingRefLabel?.index === ref.index ? (
setEditingRefLabel({ ...editingRefLabel, label: e.target.value })}
onBlur={() => handleUpdateRefLabel(ref.index, editingRefLabel.label)}
onKeyDown={(e) => {
if (e.key === 'Enter') handleUpdateRefLabel(ref.index, editingRefLabel.label);
if (e.key === 'Escape') setEditingRefLabel(null);
}}
className="w-full mt-1 px-1 py-0.5 text-xs bg-bambu-dark-tertiary border border-bambu-green rounded text-white"
autoFocus
placeholder={t('printers.plateDetection.labelPlaceholder')}
/>
) : (
))}
setEditingRefLabel({ index: ref.index, label: ref.label })} title={ref.label ? t('printers.plateDetection.clickToEdit', { label: ref.label }) : t('printers.plateDetection.clickToAddLabel')} > {ref.label || {t('printers.noLabel')}}
)} {/* Timestamp */}{ref.timestamp ? parseUTCDate(ref.timestamp)?.toLocaleDateString() ?? '' : ''}
{t('printers.roi.title')}
setEditingRoi({ ...editingRoi, x: parseFloat(e.target.value) })}
className="w-full h-1.5 bg-bambu-dark-tertiary rounded-lg cursor-pointer accent-green-500"
/>
{Math.round(editingRoi.x * 100)}%
setEditingRoi({ ...editingRoi, y: parseFloat(e.target.value) })}
className="w-full h-1.5 bg-bambu-dark-tertiary rounded-lg cursor-pointer accent-green-500"
/>
{Math.round(editingRoi.y * 100)}%
setEditingRoi({ ...editingRoi, w: parseFloat(e.target.value) })}
className="w-full h-1.5 bg-bambu-dark-tertiary rounded-lg cursor-pointer accent-green-500"
/>
{Math.round(editingRoi.w * 100)}%
setEditingRoi({ ...editingRoi, h: parseFloat(e.target.value) })}
className="w-full h-1.5 bg-bambu-dark-tertiary rounded-lg cursor-pointer accent-green-500"
/>
{Math.round(editingRoi.h * 100)}%
{t('printers.roi.instruction')}
Current: X={Math.round((plateCheckResult.roi?.x || 0.15) * 100)}%, Y={Math.round((plateCheckResult.roi?.y || 0.35) * 100)}%, W={Math.round((plateCheckResult.roi?.w || 0.70) * 100)}%, H={Math.round((plateCheckResult.roi?.h || 0.55) * 100)}%
)}
{plateCheckResult.needs_calibration ? (
<>
) : (
<>
)}
setDryingPopoverAmsId(null)} />
{/* Popover */}
({
name: '',
serial_number: '',
ip_address: '',
access_code: '',
model: '',
location: '',
auto_archive: true,
});
// Discovery state
const [discovering, setDiscovering] = useState(false);
const [discovered, setDiscovered] = useState([]);
const [discoveryError, setDiscoveryError] = useState('');
const [hasScanned, setHasScanned] = useState(false);
const [isDocker, setIsDocker] = useState(false);
const [detectedSubnets, setDetectedSubnets] = useState([]);
const [subnet, setSubnet] = useState('');
// Custom subnet — `__custom__` sentinel in the dropdown reveals a CIDR
// text input so users can scan a subnet Bambuddy isn't directly on
// (printer behind a router on a different L3 segment — SSDP multicast
// won't cross that boundary, only an active unicast scan will). #1564
const [customSubnet, setCustomSubnet] = useState('');
const [useCustomSubnet, setUseCustomSubnet] = useState(false);
const [scanProgress, setScanProgress] = useState({ scanned: 0, total: 0 });
const [showDiagnostic, setShowDiagnostic] = useState(false);
// Setup-time pre-flight: run the connection diagnostic on save and warn
// (not block) when checks fail, so the user doesn't add a printer that
// immediately shows offline. checkingSave = probe in flight; saveWarning =
// failed result awaiting an explicit "save anyway".
const [checkingSave, setCheckingSave] = useState(false);
const [saveWarning, setSaveWarning] = useState(null);
// Fetch discovery info on mount + restore the last custom CIDR the user
// typed (kept in localStorage so they don't retype `10.1.1.0/24` every
// time they open this modal).
useEffect(() => {
discoveryApi.getInfo().then(info => {
setIsDocker(info.is_docker);
if (info.subnets.length > 0) {
setDetectedSubnets(info.subnets);
setSubnet(info.subnets[0]);
}
}).catch(() => {
// Ignore errors, assume not Docker
});
try {
const saved = localStorage.getItem('bambuddy.discovery.customSubnet');
if (saved) setCustomSubnet(saved);
} catch {
// localStorage unavailable (private mode, quota); recall is opportunistic
}
}, []);
// Filter out already-added printers
const newPrinters = discovered.filter(p => !existingSerials.includes(p.serial));
const handleAddSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setCheckingSave(true);
try {
const result = await api.diagnoseConnection({
ip_address: form.ip_address.trim(),
serial_number: form.serial_number.trim() || undefined,
access_code: form.access_code || undefined,
});
if (result.checks.some((c) => c.status === 'fail')) {
setSaveWarning(result);
return;
}
} catch {
// Diagnostic infrastructure failed — never block the save on it.
} finally {
setCheckingSave(false);
}
onAdd(form);
};
const startDiscovery = async () => {
setDiscoveryError('');
setDiscovered([]);
setDiscovering(true);
setHasScanned(false);
setScanProgress({ scanned: 0, total: 0 });
// Native installs fall back to subnet scanning when the user picks
// "Custom" — SSDP can't reach a printer on a different L3 segment
// (#1564). Docker mode always uses subnet scan (multicast unavailable).
const scanCidr = useCustomSubnet ? customSubnet.trim() : subnet;
const wantsSubnetScan = isDocker || useCustomSubnet;
if (wantsSubnetScan && useCustomSubnet) {
try {
localStorage.setItem('bambuddy.discovery.customSubnet', scanCidr);
} catch {
// localStorage write best-effort; user just retypes next time
}
}
try {
if (wantsSubnetScan) {
await discoveryApi.startSubnetScan(scanCidr);
// Poll for scan status and results
const pollInterval = setInterval(async () => {
try {
const status = await discoveryApi.getScanStatus();
setScanProgress({ scanned: status.scanned, total: status.total });
const printers = await discoveryApi.getDiscoveredPrinters();
setDiscovered(printers);
if (!status.running) {
clearInterval(pollInterval);
setDiscovering(false);
setHasScanned(true);
}
} catch (e) {
console.error('Failed to get scan status:', e);
}
}, 500);
} else {
// Use SSDP discovery for native installs
await discoveryApi.startDiscovery(10);
// Poll for discovered printers every second
const pollInterval = setInterval(async () => {
try {
const printers = await discoveryApi.getDiscoveredPrinters();
setDiscovered(printers);
} catch (e) {
console.error('Failed to get discovered printers:', e);
}
}, 1000);
// Stop after 10 seconds
setTimeout(async () => {
clearInterval(pollInterval);
try {
await discoveryApi.stopDiscovery();
} catch {
// Ignore stop errors
}
setDiscovering(false);
setHasScanned(true);
// Final fetch
try {
const printers = await discoveryApi.getDiscoveredPrinters();
setDiscovered(printers);
} catch (e) {
console.error('Failed to get final discovered printers:', e);
}
}, 10000);
}
} catch (e) {
console.error('Failed to start discovery:', e);
setDiscoveryError(e instanceof Error ? e.message : t('printers.discovery.failedToStart'));
setDiscovering(false);
setHasScanned(true);
}
};
// Reuse module-level mapModelCode
const selectPrinter = (printer: DiscoveredPrinter) => {
// Don't pre-fill serial if it's a placeholder (unknown-*) - user needs to enter actual serial
const serialNumber = printer.serial.startsWith('unknown-') ? '' : printer.serial;
setForm({
...form,
name: printer.name || '',
serial_number: serialNumber,
ip_address: printer.ip_address,
model: mapModelCode(printer.model),
});
// Clear discovery results after selection
setDiscovered([]);
};
// Cleanup discovery on unmount
useEffect(() => {
return () => {
discoveryApi.stopDiscovery().catch(() => {});
discoveryApi.stopSubnetScan().catch(() => {});
};
}, []);
// Close on Escape key
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose();
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [onClose]);
return (
<>
e.stopPropagation()}>
{showDiagnostic && (
setShowDiagnostic(false)}
/>
)}
);
}
function FirmwareUpdateModal({
printer,
firmwareInfo,
onClose,
}: {
printer: Printer;
firmwareInfo: FirmwareUpdateInfo;
onClose: () => void;
}) {
const { t } = useTranslation();
const queryClient = useQueryClient();
const { showToast } = useToast();
const { hasPermission } = useAuth();
const canUpdate = hasPermission('firmware:update');
const [uploadStatus, setUploadStatus] = useState(null);
const [isUploading, setIsUploading] = useState(false);
const [pollInterval, setPollInterval] = useState(null);
const [selectedVersion, setSelectedVersion] = useState(
firmwareInfo.update_available ? firmwareInfo.latest_version : null,
);
// Prepare check query — runs when a version is selected and user can update
const { data: prepareInfo, isLoading: isPreparing } = useQuery({
queryKey: ['firmwarePrepare', printer.id, selectedVersion],
queryFn: () => firmwareApi.prepareUpload(printer.id, selectedVersion ?? undefined),
staleTime: 30000,
enabled: !!selectedVersion && canUpdate && !isUploading,
});
// Start upload mutation
const uploadMutation = useMutation({
mutationFn: () => firmwareApi.startUpload(printer.id, selectedVersion ?? undefined),
onSuccess: () => {
setIsUploading(true);
// Start polling for status
const interval = setInterval(async () => {
try {
const status = await firmwareApi.getUploadStatus(printer.id);
setUploadStatus(status);
if (status.status === 'complete' || status.status === 'error') {
clearInterval(interval);
setPollInterval(null);
setIsUploading(false);
if (status.status === 'complete') {
showToast(t('printers.firmwareModal.uploadedToast'), 'success');
queryClient.invalidateQueries({ queryKey: ['firmwareUpdate', printer.id] });
}
}
} catch {
// Ignore errors during polling
}
}, 2000);
setPollInterval(interval);
},
onError: (error: Error) => {
showToast(t('printers.firmwareModal.uploadFailed', { error: error.message }), 'error');
setIsUploading(false);
},
});
// Cleanup on unmount
useEffect(() => {
return () => {
if (pollInterval) clearInterval(pollInterval);
};
}, [pollInterval]);
const handleStartUpload = () => {
setUploadStatus(null);
uploadMutation.mutate();
};
return (
{/* Version Info */}
{(() => {
const selectedEntry = selectedVersion
? firmwareInfo.available_versions?.find((v) => v.version === selectedVersion)
: null;
const displayVersion = selectedVersion ?? firmwareInfo.latest_version;
const displayNotes = selectedEntry?.release_notes ?? firmwareInfo.release_notes;
const showSecondLine = !!displayVersion && displayVersion !== firmwareInfo.current_version;
return (
)}
);
})()}
{/* Available versions list */}
{firmwareInfo.available_versions && firmwareInfo.available_versions.length > 0 && !isUploading && uploadStatus?.status !== 'complete' && (
)}
{/* Status / Progress (only when a version is selected) */}
{!selectedVersion ? null : isPreparing ? (
);
}
function EditPrinterModal({
printer,
onClose,
}: {
printer: Printer;
onClose: () => void;
}) {
const { t } = useTranslation();
const queryClient = useQueryClient();
const { showToast } = useToast();
const [form, setForm] = useState({
name: printer.name,
ip_address: printer.ip_address,
access_code: '',
model: printer.model || '',
location: printer.location || '',
auto_archive: printer.auto_archive,
is_active: printer.is_active,
});
// Setup-time pre-flight — same warn-on-save as the Add-Printer dialog, so an
// edit that breaks connectivity (e.g. a mistyped IP) is caught before save.
const [checkingSave, setCheckingSave] = useState(false);
const [saveWarning, setSaveWarning] = useState(null);
const updateMutation = useMutation({
mutationFn: (data: Partial) => api.updatePrinter(printer.id, data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['printers'] });
queryClient.invalidateQueries({ queryKey: ['printerStatus', printer.id] });
onClose();
},
onError: (error: Error) => showToast(error.message || t('printers.toast.failedToUpdate'), 'error'),
});
// Close on Escape key
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose();
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [onClose]);
const doSave = () => {
const data: Partial = {
name: form.name,
ip_address: form.ip_address,
model: form.model || undefined,
location: form.location || undefined,
auto_archive: form.auto_archive,
is_active: form.is_active,
};
// Only include access_code if it was changed
if (form.access_code) {
data.access_code = form.access_code;
}
updateMutation.mutate(data);
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setCheckingSave(true);
try {
const result = await api.diagnoseConnection({
ip_address: form.ip_address.trim(),
serial_number: printer.serial_number,
access_code: form.access_code || undefined,
});
if (result.checks.some((c) => c.status === 'fail')) {
setSaveWarning(result);
return;
}
} catch {
// Diagnostic infrastructure failed — never block the save on it.
} finally {
setCheckingSave(false);
}
doSave();
};
return (
e.stopPropagation()}>
);
}
// Component to check if a printer is offline (for power dropdown)
function usePrinterOfflineStatus(printerId: number) {
const { data: status } = useQuery({
queryKey: ['printerStatus', printerId],
queryFn: () => api.getPrinterStatus(printerId),
refetchInterval: 30000,
});
return !status?.connected;
}
// Power dropdown item for an offline printer
function PowerDropdownItem({
printer,
plug,
onPowerOn,
isPowering,
}: {
printer: Printer;
plug: { id: number; name: string };
onPowerOn: (plugId: number) => void;
isPowering: boolean;
}) {
const isOffline = usePrinterOfflineStatus(printer.id);
// Fetch plug status
const { data: plugStatus } = useQuery({
queryKey: ['smartPlugStatus', plug.id],
queryFn: () => api.getSmartPlugStatus(plug.id),
refetchInterval: 10000,
});
// Only show if printer is offline
if (!isOffline) {
return null;
}
return (
);
}
export function PrintersPage() {
const { t } = useTranslation();
const { resolvedMode, darkAccent, lightAccent } = useTheme();
const activeAccent = resolvedMode === 'dark' ? darkAccent : lightAccent;
const accentButtonClass = {
green: 'bg-green-500 text-white hover:bg-green-400 border-green-400/60',
teal: 'bg-teal-500 text-white hover:bg-teal-400 border-teal-400/60',
blue: 'bg-blue-500 text-white hover:bg-blue-400 border-blue-400/60',
orange: 'bg-orange-500 text-white hover:bg-orange-400 border-orange-400/60',
purple: 'bg-purple-500 text-white hover:bg-purple-400 border-purple-400/60',
red: 'bg-red-500 text-white hover:bg-red-400 border-red-400/60',
}[activeAccent];
const [showAddModal, setShowAddModal] = useState(false);
const [hideDisconnected, setHideDisconnected] = useState(() => {
return localStorage.getItem('hideDisconnectedPrinters') === 'true';
});
const [showPowerDropdown, setShowPowerDropdown] = useState(false);
const [poweringOn, setPoweringOn] = useState(null);
const [sortBy, setSortBy] = useState(() => {
return (localStorage.getItem('printerSortBy') as SortOption) || 'name';
});
const [sortAsc, setSortAsc] = useState(() => {
return localStorage.getItem('printerSortAsc') !== 'false';
});
// Card size: 1=small, 2=medium, 3=large, 4=xl
const [cardSize, setCardSize] = useState(() => {
const saved = localStorage.getItem('printerCardSize');
return saved ? parseInt(saved, 10) : 2; // Default to medium
});
// Page view: 'cards' = printer cards (default), 'camwall' = grid of live camera tiles
const [pageView, setPageView] = useState<'cards' | 'camwall'>(() => {
return localStorage.getItem('printerPageView') === 'camwall' ? 'camwall' : 'cards';
});
// Cam-wall settings — per-user, no backend write (a Pi 4 install caps the
// live count lower than a NUC; default 4 is the documented Pi 4 ceiling).
const [camWallMaxLive, setCamWallMaxLive] = useState(() => {
const saved = parseInt(localStorage.getItem('camWallMaxLive') || '', 10);
return Number.isFinite(saved) && saved > 0 ? saved : 4;
});
const [camWallSnapshotSec, setCamWallSnapshotSec] = useState(() => {
const saved = parseInt(localStorage.getItem('camWallSnapshotSec') || '', 10);
return Number.isFinite(saved) && saved > 0 ? saved : 8;
});
// 'off' hides the printer-state overlay; 'compact' shows only a state chip;
// 'full' adds progress, layer, and time-left on printing/paused tiles.
// Defaulting to 'full' because the cards already show this info — users who
// pick cam-wall view still want to glance the same details without flipping.
const [camWallStatusMode, setCamWallStatusMode] = useState<'off' | 'compact' | 'full'>(() => {
const saved = localStorage.getItem('camWallStatusMode');
return saved === 'off' || saved === 'compact' || saved === 'full' ? saved : 'full';
});
// Derive viewMode from cardSize: S=compact, M/L/XL=expanded
const viewMode: ViewMode = cardSize === 1 ? 'compact' : 'expanded';
const [compactDrilldownPrinterId, setCompactDrilldownPrinterId] = useState(null);
const scrollPrinterIntoView = useCallback((printerId: number) => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
const card = document.getElementById(`printer-card-${printerId}`);
if (!card) return;
const fixedHeaderHeight = document.querySelector('header')?.getBoundingClientRect().height ?? 56;
const top = card.getBoundingClientRect().top + window.scrollY - fixedHeaderHeight - 16;
window.scrollTo({
top: Math.max(0, top),
behavior: 'smooth',
});
});
});
}, []);
const openCompactCard = useCallback((printerId: number) => {
setCompactDrilldownPrinterId(printerId);
setCardSize(2);
localStorage.setItem('printerCardSize', '2');
scrollPrinterIntoView(printerId);
}, [scrollPrinterIntoView]);
const returnToCompactCards = useCallback(() => {
const printerId = compactDrilldownPrinterId;
setCompactDrilldownPrinterId(null);
setCardSize(1);
localStorage.setItem('printerCardSize', '1');
if (printerId != null) {
scrollPrinterIntoView(printerId);
}
}, [compactDrilldownPrinterId, scrollPrinterIntoView]);
const [search, setSearch] = useState('');
// Both filters persist like every other preference on this page (#2833).
// `search` deliberately does not: a box that silently refills itself on
// return is more surprising than a dropdown that remembers.
const [statusFilter, setStatusFilter] = useState(() => {
// Validated on read: a value the dropdown no longer offers would filter
// every printer out, and nothing would explain why.
const saved = localStorage.getItem('printerStatusFilter');
return isKnownStatusFilter(saved) ? (saved as string) : 'all';
});
const [locationFilter, setLocationFilter] = useState(
() => localStorage.getItem('printerLocationFilter') || 'all'
);
const [statusCacheVersion, setStatusCacheVersion] = useState(0);
const [collapsedSections, setCollapsedSections] = useState>(() => {
try {
const saved = localStorage.getItem('printerCollapsedSections');
return saved ? JSON.parse(saved) : {};
} catch { return {}; }
});
const queryClient = useQueryClient();
const { showToast } = useToast();
const { hasPermission } = useAuth();
// Embedded camera viewer state - supports multiple simultaneous viewers
// Persisted to localStorage so cameras reopen after navigation
const [embeddedCameraPrinters, setEmbeddedCameraPrinters] = useState>(() => {
// Initialize from localStorage if camera_view_mode is embedded
const saved = localStorage.getItem('openEmbeddedCameras');
if (saved) {
try {
const cameras = JSON.parse(saved) as Array<{ id: number; name: string }>;
return new Map(cameras.map(c => [c.id, c]));
} catch {
return new Map();
}
}
return new Map();
});
// Persist open cameras to localStorage when they change
useEffect(() => {
const cameras = Array.from(embeddedCameraPrinters.values());
if (cameras.length > 0) {
localStorage.setItem('openEmbeddedCameras', JSON.stringify(cameras));
} else {
localStorage.removeItem('openEmbeddedCameras');
}
}, [embeddedCameraPrinters]);
const { data: printers, isLoading } = useQuery({
queryKey: ['printers'],
queryFn: api.getPrinters,
});
// Fetch the UI-rendering subset of settings. Uses /ui-preferences (not /settings)
// so users with printers:read but no settings:read still get the values needed
// to render the clear-plate button, drying presets, AMS thresholds, etc. (#1293).
const { data: settings } = useQuery({
queryKey: ['ui-preferences'],
queryFn: api.getUiPreferences,
});
// Parse user-configured temperature/fan presets once, with defensive fallback
// to built-in defaults on parse failure (validators on the backend already
// reject malformed writes, so this is just forward-compat).
const effectiveNozzleTempPresets = useMemo(
() => parsePresetTriple(settings?.nozzle_temp_presets, NOZZLE_TEMP_DEFAULTS, 0, 320),
[settings?.nozzle_temp_presets],
);
const effectiveBedTempPresets = useMemo(
() => parsePresetTriple(settings?.bed_temp_presets, BED_TEMP_DEFAULTS, 0, 140),
[settings?.bed_temp_presets],
);
const effectiveChamberTempPresets = useMemo(
() => parsePresetTriple(settings?.chamber_temp_presets, CHAMBER_TEMP_DEFAULTS, 0, MAX_CHAMBER_TEMP_C),
[settings?.chamber_temp_presets],
);
const effectiveFanSpeedPresets = useMemo(
() => parsePresetTriple(settings?.fan_speed_presets, FAN_SPEED_DEFAULTS, 0, 100),
[settings?.fan_speed_presets],
);
// Compute drying presets: user-configured (from settings) merged over built-in defaults
const effectiveDryingPresets = useMemo(() => {
if (settings?.drying_presets) {
try {
const userPresets = JSON.parse(settings.drying_presets);
if (typeof userPresets === 'object' && userPresets !== null && Object.keys(userPresets).length > 0) {
return { ...DRYING_PRESETS, ...userPresets };
}
} catch { /* ignore parse errors, use defaults */ }
}
return DRYING_PRESETS;
}, [settings?.drying_presets]);
// Close embedded cameras if mode changes to 'window'
useEffect(() => {
if (settings?.camera_view_mode === 'window' && embeddedCameraPrinters.size > 0) {
setEmbeddedCameraPrinters(new Map());
}
}, [settings?.camera_view_mode, embeddedCameraPrinters.size]);
// Fetch all smart plugs to know which printers have them
const { data: smartPlugs } = useQuery({
queryKey: ['smart-plugs'],
queryFn: api.getSmartPlugs,
});
// Fetch maintenance overview for all printers to show badges
const { data: maintenanceOverview } = useQuery({
queryKey: ['maintenanceOverview'],
queryFn: api.getMaintenanceOverview,
staleTime: 60 * 1000, // 1 minute
});
// Live AI failure detection state for the card badges (#1546). Matches the
// 10s refetch of the Failure Detection settings panel.
const { data: obicoPrinterStatus } = useQuery({
queryKey: ['obico-printer-status'],
queryFn: api.getObicoPrinterStatus,
refetchInterval: 10000,
});
// Badge visibility: detection enabled AND this printer in the monitored set
// (monitored_printers null = all). Live per-print state is passed separately.
const isAiMonitored = useCallback(
(printerId: number) =>
obicoPrinterStatus?.enabled === true &&
(obicoPrinterStatus.monitored_printers === null || obicoPrinterStatus.monitored_printers.includes(printerId)),
[obicoPrinterStatus],
);
// Fetch Spoolman status to enable link spool feature
const { data: spoolmanStatus } = useQuery({
queryKey: ['spoolman-status'],
queryFn: api.getSpoolmanStatus,
staleTime: 60 * 1000, // 1 minute
});
const spoolmanEnabled = spoolmanStatus?.enabled && spoolmanStatus?.connected;
// Fetch Spoolman settings to get sync mode
const { data: spoolmanSettings } = useQuery({
queryKey: ['spoolman-settings'],
queryFn: api.getSpoolmanSettings,
enabled: !!spoolmanEnabled,
staleTime: 60 * 1000, // 1 minute
});
const spoolmanSyncMode = spoolmanSettings?.spoolman_sync_mode;
// Fetch unlinked spools to know if link button should be enabled
const { data: unlinkedSpools } = useQuery({
queryKey: ['unlinked-spools'],
queryFn: api.getUnlinkedSpools,
enabled: !!spoolmanEnabled,
staleTime: 30 * 1000, // 30 seconds
});
const hasUnlinkedSpools = unlinkedSpools && unlinkedSpools.length > 0;
// Fetch linked spools map (tag -> spool_id) to know which spools are already in Spoolman
const { data: linkedSpoolsData } = useQuery({
queryKey: ['linked-spools'],
queryFn: api.getLinkedSpools,
enabled: !!spoolmanEnabled,
staleTime: 30 * 1000, // 30 seconds
});
const linkedSpools = linkedSpoolsData?.linked;
// Fetch spool assignments for inventory feature
const { data: spoolAssignments } = useQuery({
queryKey: ['spool-assignments'],
queryFn: () => api.getAssignments(),
enabled: hasPermission('inventory:view_assignments'),
staleTime: 30 * 1000,
});
const unassignMutation = useMutation({
mutationFn: ({ printerId, amsId, trayId }: { printerId: number; amsId: number; trayId: number }) =>
api.unassignSpool(printerId, amsId, trayId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['spool-assignments'] });
},
});
const { data: spoolmanSpools, isLoading: spoolmanSpoolsLoading } = useQuery({
queryKey: ['spoolman-inventory-spools'],
queryFn: () => api.getSpoolmanInventorySpools(false),
enabled: !!spoolmanEnabled,
staleTime: 30 * 1000,
});
const { data: spoolmanSlotAssignments, isLoading: spoolmanAssignmentsLoading } = useQuery({
queryKey: ['spoolman-slot-assignments'],
queryFn: () => api.getSpoolmanSlotAssignments(),
enabled: !!spoolmanEnabled,
staleTime: 30 * 1000,
});
const unassignSpoolmanMutation = useMutation({
mutationFn: (spoolmanSpoolId: number) => api.unassignSpoolmanSlot(spoolmanSpoolId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['spoolman-inventory-spools'] });
queryClient.invalidateQueries({ queryKey: ['spoolman-slot-assignments'] });
},
});
// Helper to find assignment for a specific slot
const getAssignment = (printerId: number, amsId: number | string, trayId: number | string): SpoolAssignment | undefined => {
return spoolAssignments?.find(
(a) => a.printer_id === printerId && a.ams_id === Number(amsId) && a.tray_id === Number(trayId)
);
};
// Create a map of printer_id -> maintenance info for quick lookup
const maintenanceByPrinter = maintenanceOverview?.reduce(
(acc, overview) => {
acc[overview.printer_id] = {
due_count: overview.due_count,
warning_count: overview.warning_count,
total_print_hours: overview.total_print_hours,
};
return acc;
},
{} as Record
) || {};
// Create a map of printer_id -> smart plug
const smartPlugByPrinter = smartPlugs?.reduce(
(acc, plug) => {
if (plug.printer_id) {
acc[plug.printer_id] = plug;
}
return acc;
},
{} as Record
) || {};
const addMutation = useMutation({
mutationFn: api.createPrinter,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['printers'] });
queryClient.invalidateQueries({ queryKey: ['maintenanceOverview'] });
setShowAddModal(false);
},
onError: (error: Error) => {
// Localized message when the backend returns a stable error code;
// the raw message is an English fallback for non-UI clients.
if (error instanceof ApiError && error.code === 'printer_connection_failed') {
showToast(t('printers.toast.connectionFailedNotAdded'), 'error');
return;
}
showToast(error.message || t('printers.toast.failedToAdd'), 'error');
},
});
const powerOnMutation = useMutation({
mutationFn: (plugId: number) => api.controlSmartPlug(plugId, 'on'),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['smart-plugs'] });
setPoweringOn(null);
},
onError: () => {
setPoweringOn(null);
},
});
// Bulk selection state
const [selectedPrinterIds, setSelectedPrinterIds] = useState>(new Set());
const [isSelectionMode, setIsSelectionMode] = useState(false);
const [bulkConfirmAction, setBulkConfirmAction] = useState<'stop' | 'pause' | 'clearPlate' | null>(null);
const [bulkActionPending, setBulkActionPending] = useState(false);
const selectionMode = isSelectionMode || selectedPrinterIds.size > 0;
const toggleSelect = useCallback((id: number) => {
setSelectedPrinterIds(prev => {
const next = new Set(prev);
if (next.has(id)) next.delete(id);
else next.add(id);
return next;
});
}, []);
const clearSelection = useCallback(() => {
setSelectedPrinterIds(new Set());
setIsSelectionMode(false);
}, []);
// Escape key exits selection mode
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape' && selectionMode) {
clearSelection();
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [selectionMode, clearSelection]);
const executeBulkAction = useCallback(async (action: 'stop' | 'pause' | 'resume' | 'clearPlate' | 'clearHMS') => {
setBulkActionPending(true);
const ids = Array.from(selectedPrinterIds);
// Filter to only applicable printers based on cached state
const applicableIds = ids.filter(id => {
const status = queryClient.getQueryData<{ connected: boolean; state: string | null; hms_errors?: HMSError[] }>(['printerStatus', id]);
if (!status?.connected) return false;
switch (action) {
case 'stop': return status.state === 'RUNNING' || status.state === 'PAUSE';
case 'pause': return status.state === 'RUNNING';
case 'resume': return status.state === 'PAUSE';
case 'clearPlate': return !!(status as { awaiting_plate_clear?: boolean }).awaiting_plate_clear;
case 'clearHMS': return status.hms_errors && filterKnownHMSErrors(status.hms_errors).length > 0;
default: return false;
}
});
if (applicableIds.length === 0) {
showToast(t('printers.bulk.noneApplicable'), 'error');
setBulkActionPending(false);
setBulkConfirmAction(null);
return;
}
const apiCall = {
stop: api.stopPrint,
pause: api.pausePrint,
resume: api.resumePrint,
clearPlate: api.clearPlate,
clearHMS: api.clearHMSErrors,
}[action];
const results = await Promise.allSettled(
applicableIds.map(id => apiCall(id))
);
const succeeded = results.filter(r => r.status === 'fulfilled').length;
const failed = results.filter(r => r.status === 'rejected').length;
if (failed === 0) {
showToast(t('printers.bulk.success', { action: t(`printers.bulk.actions.${action}`), count: succeeded }));
} else {
showToast(t('printers.bulk.partial', { succeeded, failed }), 'error');
}
// Invalidate status queries for affected printers
applicableIds.forEach(id => {
queryClient.invalidateQueries({ queryKey: ['printerStatus', id] });
});
setBulkActionPending(false);
setBulkConfirmAction(null);
}, [selectedPrinterIds, queryClient, showToast, t]);
const handleBulkAction = useCallback((action: 'stop' | 'pause' | 'resume' | 'clearPlate' | 'clearHMS') => {
// Actions that need confirmation
if (action === 'stop' || action === 'pause' || action === 'clearPlate') {
setBulkConfirmAction(action);
} else {
executeBulkAction(action);
}
}, [executeBulkAction]);
const toggleHideDisconnected = () => {
const newValue = !hideDisconnected;
setHideDisconnected(newValue);
localStorage.setItem('hideDisconnectedPrinters', String(newValue));
};
const handleSortChange = (newSort: SortOption) => {
setSortBy(newSort);
localStorage.setItem('printerSortBy', newSort);
};
const handleStatusFilterChange = (value: string) => {
setStatusFilter(value);
localStorage.setItem('printerStatusFilter', value);
};
const handleLocationFilterChange = (value: string) => {
setLocationFilter(value);
localStorage.setItem('printerLocationFilter', value);
};
const toggleSortDirection = () => {
const newAsc = !sortAsc;
setSortAsc(newAsc);
localStorage.setItem('printerSortAsc', String(newAsc));
};
// Grid classes based on card size (1=small, 2=medium, 3=large, 4=xl)
const getGridClasses = () => {
switch (cardSize) {
case 1: return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5'; // S: many small cards
case 2: return 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3'; // M: medium cards
case 3: return 'grid-cols-1 lg:grid-cols-2'; // L: large cards, 2 columns max
case 4: return 'grid-cols-1'; // XL: single column, full width
default: return 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3';
}
};
const cardSizeLabels = ['S', 'M', 'L', 'XL'];
// Increment version counter whenever a printer status cache entry is updated so
// filteredPrinters re-computes reactively on WebSocket-driven status changes.
useEffect(() => {
const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
if (
event.type === 'updated' &&
Array.isArray(event.query.queryKey) &&
event.query.queryKey[0] === 'printerStatus'
) {
setStatusCacheVersion(v => v + 1);
}
});
return unsubscribe;
}, [queryClient]);
// Filter printers by search term, status, and location
const filteredPrinters = useMemo(() => {
if (!printers) return [];
let result = printers;
// Text search
if (search.trim()) {
const q = search.trim().toLowerCase();
result = result.filter(p =>
p.name.toLowerCase().includes(q) ||
(p.model || '').toLowerCase().includes(q) ||
(p.location || '').toLowerCase().includes(q) ||
(p.serial_number || '').toLowerCase().includes(q)
);
}
// Location filter
if (locationFilter !== 'all') {
result = result.filter(p => (p.location || '') === locationFilter);
}
// Status filter
if (statusFilter !== 'all') {
result = result.filter(p => {
const status = queryClient.getQueryData<{ connected: boolean; state: string | null; hms_errors?: HMSError[] }>(['printerStatus', p.id]);
if (!status?.connected) return statusFilter === 'offline';
const hmsErrors = status.hms_errors ? filterKnownHMSErrors(status.hms_errors) : [];
switch (statusFilter) {
case 'printing': return status.state === 'RUNNING';
case 'paused': return status.state === 'PAUSE';
case 'finished': return status.state === 'FINISH';
case 'error': return status.state === 'FAILED' || hmsErrors.length > 0;
case 'idle': return status.state !== 'RUNNING' && status.state !== 'PAUSE' && status.state !== 'FINISH' && status.state !== 'FAILED' && hmsErrors.length === 0;
case 'offline': return false; // Connected printers are never offline
default: return true;
}
});
}
return result;
// eslint-disable-next-line react-hooks/exhaustive-deps -- statusCacheVersion is intentional: it forces recompute when WebSocket updates printer status cache
}, [printers, search, statusFilter, locationFilter, queryClient, statusCacheVersion]);
// Derive unique locations for the location filter dropdown
const availableLocations = useMemo(() => {
if (!printers) return [];
return [...new Set(printers.map(p => p.location || '').filter(Boolean))].sort();
}, [printers]);
// A saved location can outlive what it matched -- renamed, cleared, or the
// only printer that had it deleted. The dropdown is rendered only while some
// printer has a location, so a stale one would hide every printer *and* the
// control to undo it, leaving an empty page and no way back (#2833).
// Deliberately waits for `printers`: it is undefined while the query is in
// flight, and acting on the empty list that produces would throw the saved
// filter away every time the page loads.
useEffect(() => {
if (!printers || locationFilter === 'all' || availableLocations.includes(locationFilter)) return;
setLocationFilter('all');
localStorage.setItem('printerLocationFilter', 'all');
}, [printers, availableLocations, locationFilter]);
// Sort printers based on selected option
const sortedPrinters = useMemo(() => {
const sorted = [...filteredPrinters];
switch (sortBy) {
case 'name':
sorted.sort((a, b) => a.name.localeCompare(b.name));
break;
case 'model':
sorted.sort((a, b) => (a.model || '').localeCompare(b.model || ''));
break;
case 'location':
// Sort by location, with ungrouped printers last
sorted.sort((a, b) => {
const locA = a.location || '';
const locB = b.location || '';
if (!locA && locB) return 1;
if (locA && !locB) return -1;
return locA.localeCompare(locB) || a.name.localeCompare(b.name);
});
break;
case 'status':
// Sort by status: HMS errors > printing > idle > offline
sorted.sort((a, b) => {
const statusA = queryClient.getQueryData<{ connected: boolean; state: string | null; hms_errors?: HMSError[] }>(['printerStatus', a.id]);
const statusB = queryClient.getQueryData<{ connected: boolean; state: string | null; hms_errors?: HMSError[] }>(['printerStatus', b.id]);
const getPriority = (s: typeof statusA) => {
if (!s?.connected) return 3; // offline
const hmsErrors = s.hms_errors ? filterKnownHMSErrors(s.hms_errors) : [];
if (hmsErrors.length > 0) return 0; // HMS errors - top priority
if (s.state === 'RUNNING') return 1; // printing
return 2; // idle
};
return getPriority(statusA) - getPriority(statusB);
});
break;
case 'eta':
sorted.sort((a, b) => {
const statusA = queryClient.getQueryData<{ connected: boolean; state: string | null; remaining_time: number | null }>(['printerStatus', a.id]);
const statusB = queryClient.getQueryData<{ connected: boolean; state: string | null; remaining_time: number | null }>(['printerStatus', b.id]);
const tier = (s: typeof statusA) => {
if (!s?.connected) return 3; // offline last
if (s.state === 'RUNNING' && s.remaining_time != null && s.remaining_time > 0) return 0; // printing with ETA
if (s.state === 'RUNNING') return 1; // printing without ETA
return 2; // idle
};
const ta = tier(statusA);
const tb = tier(statusB);
if (ta !== tb) return ta - tb;
if (ta === 0) {
const diff = (statusA!.remaining_time ?? 0) - (statusB!.remaining_time ?? 0);
if (diff !== 0) return diff;
}
return a.name.localeCompare(b.name);
});
break;
}
// Apply ascending/descending
if (!sortAsc) {
sorted.reverse();
}
return sorted;
}, [filteredPrinters, sortBy, sortAsc, queryClient]);
const selectAll = useCallback(() => {
setSelectedPrinterIds(new Set(sortedPrinters.map(p => p.id)));
setIsSelectionMode(true);
}, [sortedPrinters]);
const selectByState = useCallback((state: PrinterState) => {
setSelectedPrinterIds(prev => {
const next = new Set(prev);
sortedPrinters.forEach(p => {
const status = queryClient.getQueryData<{ connected: boolean; state: string | null; hms_errors?: HMSError[] }>(['printerStatus', p.id]);
if (classifyPrinterStatus(status) === state) next.add(p.id);
});
return next;
});
setIsSelectionMode(true);
}, [sortedPrinters, queryClient]);
const selectByLocation = useCallback((location: string) => {
setSelectedPrinterIds(prev => {
const next = new Set(prev);
sortedPrinters.filter(p => (p.location || '') === location).forEach(p => next.add(p.id));
return next;
});
setIsSelectionMode(true);
}, [sortedPrinters]);
const selectByModel = useCallback((model: string) => {
setSelectedPrinterIds(prev => {
const next = new Set(prev);
sortedPrinters.filter(p => (p.model || 'Unknown') === model).forEach(p => next.add(p.id));
return next;
});
setIsSelectionMode(true);
}, [sortedPrinters]);
const toggleSectionCollapse = useCallback((key: string) => {
setCollapsedSections(prev => {
const next = { ...prev, [key]: !prev[key] };
try { localStorage.setItem('printerCollapsedSections', JSON.stringify(next)); } catch { /* quota exceeded / private mode */ }
return next;
});
}, []);
// Group printers when sorted by location, status, or model
const groupedPrinters = useMemo(() => {
if (sortBy === 'name' || sortBy === 'eta') return null;
const groups: Record = {};
if (sortBy === 'location') {
sortedPrinters.forEach(printer => {
const location = printer.location || 'Ungrouped';
if (!groups[location]) groups[location] = [];
groups[location].push(printer);
});
} else if (sortBy === 'model') {
sortedPrinters.forEach(printer => {
const model = printer.model || 'Unknown';
if (!groups[model]) groups[model] = [];
groups[model].push(printer);
});
} else if (sortBy === 'status') {
sortedPrinters.forEach(printer => {
const status = queryClient.getQueryData<{ connected: boolean; state: string | null; hms_errors?: HMSError[] }>(['printerStatus', printer.id]);
const group = classifyPrinterStatus(status);
if (!groups[group]) groups[group] = [];
groups[group].push(printer);
});
}
return groups;
// eslint-disable-next-line react-hooks/exhaustive-deps -- classifyPrinterStatus & filterKnownHMSErrors are stable module-level functions, not reactive deps; statusCacheVersion forces recompute on WebSocket status updates
}, [sortBy, sortedPrinters, queryClient, statusCacheVersion]);
const toolbarRef = useRef(null);
const expandedToolbarControlsRef = useRef(null);
const expandedToolbarWidthRef = useRef(0);
const [compactToolbar, setCompactToolbar] = useState(false);
const measureToolbar = useCallback(() => {
const toolbar = toolbarRef.current;
if (!toolbar) return;
const measuredControlsWidth = expandedToolbarControlsRef.current?.offsetWidth;
if (measuredControlsWidth) {
expandedToolbarWidthRef.current = measuredControlsWidth;
}
const searchMinimumWidth = 220;
const gapWidth = 8;
const shouldCompact = expandedToolbarWidthRef.current > 0 && toolbar.clientWidth < expandedToolbarWidthRef.current + searchMinimumWidth + gapWidth;
setCompactToolbar(prev => (prev === shouldCompact ? prev : shouldCompact));
}, []);
const smartPlugCount = Object.keys(smartPlugByPrinter).length;
useLayoutEffect(() => {
measureToolbar();
const toolbar = toolbarRef.current;
if (!toolbar) return;
if (typeof ResizeObserver === 'undefined') {
window.addEventListener('resize', measureToolbar);
return () => window.removeEventListener('resize', measureToolbar);
}
const resizeObserver = new ResizeObserver(() => measureToolbar());
resizeObserver.observe(toolbar);
window.addEventListener('resize', measureToolbar);
return () => {
resizeObserver.disconnect();
window.removeEventListener('resize', measureToolbar);
};
}, [
measureToolbar,
printers?.length,
availableLocations.length,
hideDisconnected,
smartPlugCount,
]);
const renderFilterControls = (inMenu = false) => (
<>
{/* Status filter */}
{printers && printers.length > 0 && (
({ value: option.value, label: t(option.labelKey) }))}
/>
)}
{/* Location filter — only shown when at least one printer has a location */}
{printers && printers.length > 0 && availableLocations.length > 0 && (
({ value: loc, label: loc })),
]}
/>
)}
);
const renderViewControls = (inMenu = false) => (
<>
{/* Sort dropdown */}
value={sortBy}
onChange={handleSortChange}
fullWidth={inMenu}
options={[
{ value: 'name', label: t('printers.sort.name') },
{ value: 'status', label: t('printers.sort.status') },
{ value: 'model', label: t('printers.sort.model') },
{ value: 'location', label: t('printers.sort.location') },
{ value: 'eta', label: t('printers.sort.eta') },
]}
/>
{/* Page view toggle: Cards / Cam Wall */}
{/* Cam Wall on its own URL (#2531) — the linkable/bookmarkable form of the
view, and the page a kiosk token points at. Only offered once the wall
is the active view, so it doesn't compete with the toggle above. */}
{pageView === 'camwall' && hasPermission('camera:view') && (
)}
{/* Card size selector */}
e.stopPropagation()}
>
{/* Header */}
);
})()}
);
}
export function AddPrinterModal({
onClose,
onAdd,
existingSerials,
}: {
onClose: () => void;
onAdd: (data: PrinterCreate) => void;
existingSerials: string[];
}) {
const { t } = useTranslation();
const [form, setForm] = useState
{/* Filament type select */}
({ value: fil, label: fil }))}
onChange={fil => {
setDryingFilament(fil);
const preset = dryingPresets[fil];
if (preset) {
const key = dryingPopoverModuleType === 'n3s' ? 'n3s' : 'n3f';
setDryingTemp(preset[key]);
setDryingDuration(dryingPopoverModuleType === 'n3s' ? preset.n3s_hours : preset.n3f_hours);
}
}}
fullWidth
/>
{/* Temperature */}
setDryingTemp(Math.min(maxTemp, Math.max(45, Number(e.target.value))))}
className="w-full h-1 accent-bambu-green cursor-pointer"
/>
{/* Duration */}
setDryingDuration(Number(e.target.value))}
className="w-full h-1 accent-bambu-green cursor-pointer"
/>
{/* Rotate tray — disabled when any tray in THIS AMS has its
filament threaded out into the feed tube. The whole AMS
rotates as one mechanism (all 4 spools turn together), so a
single loaded slot locks the entire unit. Bambu per-tray
`state`: 9 = empty, 10 = spool present but not loaded
(rotation possible), 11 = loaded into tube (rotation impossible).
Catches both mid-print (active feed) AND idle-with-threaded-
filament — the H2D's post-print state leaves filament in the
tube but tray_now resets to 255, which a tray_now-only check
would silently miss. */}
{(() => {
const targetAms = dryingPopoverAmsId !== null
? amsData.find(a => a.id === dryingPopoverAmsId)
: undefined;
const trayLoadedInThisAms = (targetAms?.tray ?? []).some(
tray => tray.state === 11,
);
const rotateChecked = dryingRotateTray && !trayLoadedInThisAms;
return (
);
})()}
{/* Footer */}
setDryingTemp(Math.min(maxTemp, Math.max(45, Number(e.target.value) || 45)))}
className="w-12 px-1 py-0.5 bg-bambu-dark border border-bambu-dark-tertiary rounded text-white text-[length:var(--pc-t11,11px)] text-center focus:outline-none focus:border-bambu-green [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
/>
°C
45°C
{maxTemp}°C
setDryingDuration(Math.min(24, Math.max(1, Number(e.target.value) || 1)))}
className="w-10 px-1 py-0.5 bg-bambu-dark border border-bambu-dark-tertiary rounded text-white text-[length:var(--pc-t11,11px)] text-center focus:outline-none focus:border-bambu-green [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
/>
{t('printers.drying.hours')}
1h
24h
{t('printers.addPrinter')}
{/* Discovery Section */}
{/* Subnet picker — always visible. The dropdown lists detected
interface subnets and a "Custom..." sentinel that reveals
a CIDR text input for printers on a different L3 segment
(router, VLAN, etc.). #1564 */}
{detectedSubnets.length > 0 ? (
) : (
setSubnet(e.target.value)}
placeholder="192.168.1.0/24"
disabled={discovering}
/>
)}
{useCustomSubnet && (
setCustomSubnet(e.target.value)}
placeholder="10.1.1.0/24"
disabled={discovering}
/>
)}
{discoveryError && (
{isDocker ? t('printers.discovery.dockerNote') : t('printers.discovery.customSubnetNote')}
{discoveryError}
)}
{newPrinters.length > 0 && (
{newPrinters.map((printer) => (
)}
{discovering && (
selectPrinter(printer)}
>
))}
{printer.name || printer.serial}
{mapModelCode(printer.model) || t('printers.discovery.unknown')} • {printer.ip_address} {printer.serial.startsWith('unknown-') && ( • {t('printers.discovery.serialRequired')} )}
{(isDocker || useCustomSubnet) ? t('printers.discovery.scanningSubnet') : t('printers.discovery.scanningNetwork')}
)} {hasScanned && !discovering && discovered.length === 0 && ({(isDocker || useCustomSubnet) ? t('printers.discovery.noPrintersFoundSubnet') : t('printers.discovery.noPrintersFoundNetwork')}
)} {hasScanned && !discovering && discovered.length > 0 && newPrinters.length === 0 && ({t('printers.discovery.allConfigured')}
)}
{firmwareInfo.update_available
?
{firmwareInfo.update_available ? t('printers.firmwareModal.title') : t('printers.firmwareModal.titleUpToDate')}
{printer.name}
{t('printers.firmwareModal.currentVersion')}
{firmwareInfo.current_version || t('common.unknown')}
{showSecondLine && (
{t('printers.firmwareModal.latestVersion')}
{displayVersion}
)}
{displayNotes && (
{t('printers.firmwareModal.releaseNotes')}
{displayNotes}
{t('printers.firmwareModal.availableVersions')}
{firmwareInfo.available_versions.map((v) => {
const isCurrent = firmwareInfo.current_version === v.version;
const isSelected = selectedVersion === v.version;
const cmp = firmwareInfo.current_version
? compareFwVersions(v.version, firmwareInfo.current_version)
: 0;
const relLabel = isCurrent
? t('printers.firmwareModal.currentBadge')
: cmp > 0
? t('printers.firmwareModal.newerBadge')
: t('printers.firmwareModal.olderBadge');
const relClass = isCurrent
? 'text-bambu-gray'
: cmp > 0
? 'text-orange-700 dark:text-orange-400'
: 'text-blue-700 dark:text-blue-400';
return (
);
})}
{prepareInfo.can_proceed ? (
) : null}
{/* Upload Progress */}
{(isUploading || uploadStatus) && uploadStatus && (
{prepareInfo.errors.map((error, i) => (
)}
{uploadStatus.status}
{uploadStatus.progress}%
{uploadStatus.message}
{uploadStatus.error && ({uploadStatus.error}
)}{t('printers.firmwareModal.uploadedSuccess')}
{t('printers.firmwareModal.applyInstructions')}
- {t('printers.firmwareModal.step4')}
{prepareInfo?.can_proceed && !isUploading && uploadStatus?.status !== 'complete' && canUpdate && (
)}
{t('printers.editPrinter')}
{printer.name}
{plugStatus && (
{plugStatus.state || '?'}
)}
{cardSizeLabels.map((label, index) => {
const size = index + 1;
const isSelected = cardSize === size;
return (
);
})}
);
const renderActionControls = (inMenu = false) => (
<>
{/* Bulk select toggle */}
{/* Power dropdown for offline printers with smart plugs */}
{hideDisconnected && Object.keys(smartPlugByPrinter).length > 0 && (
{showPowerDropdown && (
<>
{/* Backdrop to close dropdown */}
) : sortedPrinters.length === 0 && (search.trim() || statusFilter !== 'all' || locationFilter !== 'all') ? (
) : pageView === 'camwall' ? (
{
const cameraMode = settings?.camera_view_mode || 'window';
if (cameraMode === 'embedded') {
setEmbeddedCameraPrinters(prev => new Map(prev).set(id, { id, name }));
} else {
const saved = localStorage.getItem('cameraWindowState');
const state = saved ? JSON.parse(saved) : { width: 640, height: 400 };
const features = [
`width=${state.width}`,
`height=${state.height}`,
state.left !== undefined ? `left=${state.left}` : '',
state.top !== undefined ? `top=${state.top}` : '',
'menubar=no,toolbar=no,location=no,status=no',
].filter(Boolean).join(',');
window.open(`/camera/${id}`, `camera-${id}`, features);
}
}}
statusMode={camWallStatusMode}
onChangeMaxLive={(next) => {
setCamWallMaxLive(next);
localStorage.setItem('camWallMaxLive', String(next));
}}
onChangeSnapshotIntervalSec={(next) => {
setCamWallSnapshotSec(next);
localStorage.setItem('camWallSnapshotSec', String(next));
}}
onChangeStatusMode={(next) => {
setCamWallStatusMode(next);
localStorage.setItem('camWallStatusMode', next);
}}
/>
) : groupedPrinters ? (
/* Grouped view (location, status, or model) */
setShowAddModal(false)}
onAdd={(data) => addMutation.mutate(data)}
existingSerials={printers?.map(p => p.serial_number) || []}
/>
)}
{/* Bulk selection toolbar */}
{selectionMode && printers && (
executeBulkAction('stop')}
onCancel={() => setBulkConfirmAction(null)}
/>
)}
{bulkConfirmAction === 'pause' && (
executeBulkAction('pause')}
onCancel={() => setBulkConfirmAction(null)}
/>
)}
{bulkConfirmAction === 'clearPlate' && (
executeBulkAction('clearPlate')}
onCancel={() => setBulkConfirmAction(null)}
/>
)}
{/* Embedded Camera Viewers - multiple viewers can be open simultaneously */}
{Array.from(embeddedCameraPrinters.values()).map((camera, index) => (
setEmbeddedCameraPrinters(prev => {
const next = new Map(prev);
next.delete(camera.id);
return next;
})}
/>
))}
);
}
setShowPowerDropdown(false)}
/>
{
setPoweringOn(plugId);
powerOnMutation.mutate(plugId);
}}
isPowering={poweringOn === smartPlugByPrinter[printer.id]?.id}
/>
))}
{printers?.filter(p => smartPlugByPrinter[p.id]).length === 0 && (
)}
)}
);
return (
{t('printers.offlinePrintersWithPlugs')}
{printers?.filter(p => smartPlugByPrinter[p.id]).map(printer => (
No printers with smart plugs
)}
{/* Only show search bar when printers exist */}
{printers && printers.length > 0 && (
*]:shrink-0`}
>
{compactToolbar && (
{renderFilterControls()}
{renderViewControls()}
{renderActionControls()}
{renderFilterControls(true)}
{renderViewControls(true)}
{renderActionControls(true)}
{t('common.loading')}
) : printers?.length === 0 ? (
{t('printers.noPrintersConfigured')}
{t('printers.noSearchResults')}
{(() => {
const keys = sortBy === 'status'
? STATUS_GROUP_ORDER.filter(k => groupedPrinters[k]?.length > 0)
: Object.keys(groupedPrinters);
// For status grouping, asc/desc flips the fixed priority order
// (asc = error→offline, desc = offline→error). This matches the
// sort-toggle behaviour for other groupings.
return (sortAsc ? keys : [...keys].reverse());
})().map((groupKey) => {
const groupPrinters = groupedPrinters[groupKey];
const collapseKey = `${sortBy}:${groupKey}`;
const isOpen = !collapsedSections[collapseKey];
const dot = sortBy === 'status'
? STATUS_GROUP_META[groupKey]?.dot || 'bg-bambu-green'
: 'bg-bambu-green';
const label = sortBy === 'status'
? t(STATUS_GROUP_META[groupKey]?.labelKey || groupKey)
: groupKey;
return (
toggleSectionCollapse(collapseKey)}
summaryClassName="py-1"
summary={
);
})}
) : (
/* Regular grid view */
{label} ({groupPrinters.length}) {selectionMode && ( )}
} >= 3 ? 'gap-6' : ''} ${getGridClasses()}`}>
{groupPrinters.map((printer) => (
unassignMutation.mutate({ printerId: pid, amsId: aid, trayId: tid })}
spoolmanSpools={spoolmanSpools}
spoolmanSlotAssignments={spoolmanSlotAssignments}
spoolmanLoading={spoolmanSpoolsLoading || spoolmanAssignmentsLoading}
onUnassignSpoolmanSpool={(id) => unassignSpoolmanMutation.mutate(id)}
timeFormat={settings?.time_format || 'system'}
cameraViewMode={settings?.camera_view_mode || 'window'}
onOpenEmbeddedCamera={(id, name) => setEmbeddedCameraPrinters(prev => new Map(prev).set(id, { id, name }))}
checkPrinterFirmware={settings?.check_printer_firmware !== false}
dryingPresets={effectiveDryingPresets}
nozzleTempPresets={effectiveNozzleTempPresets}
bedTempPresets={effectiveBedTempPresets}
chamberTempPresets={effectiveChamberTempPresets}
fanSpeedPresets={effectiveFanSpeedPresets}
requirePlateClear={settings?.require_plate_clear === true}
selectionMode={selectionMode}
isSelected={selectedPrinterIds.has(printer.id)}
onToggleSelect={toggleSelect}
onOpenCompactCard={openCompactCard}
aiDetectionEnabled={isAiMonitored(printer.id)}
aiDetection={obicoPrinterStatus?.enabled ? obicoPrinterStatus.per_printer[String(printer.id)] : undefined}
aiLastError={obicoPrinterStatus?.last_error ?? null}
/>
))}
= 3 ? 'gap-6' : ''} ${getGridClasses()}`}>
{sortedPrinters.map((printer) => (
unassignMutation.mutate({ printerId: pid, amsId: aid, trayId: tid })}
spoolmanSpools={spoolmanSpools}
spoolmanSlotAssignments={spoolmanSlotAssignments}
spoolmanLoading={spoolmanSpoolsLoading || spoolmanAssignmentsLoading}
onUnassignSpoolmanSpool={(id) => unassignSpoolmanMutation.mutate(id)}
amsThresholds={settings ? {
humidityGood: Number(settings.ams_humidity_good) || 40,
humidityFair: Number(settings.ams_humidity_fair) || 60,
tempGood: Number(settings.ams_temp_good) || 28,
tempFair: Number(settings.ams_temp_fair) || 35,
} : undefined}
timeFormat={settings?.time_format || 'system'}
cameraViewMode={settings?.camera_view_mode || 'window'}
onOpenEmbeddedCamera={(id, name) => setEmbeddedCameraPrinters(prev => new Map(prev).set(id, { id, name }))}
checkPrinterFirmware={settings?.check_printer_firmware !== false}
dryingPresets={effectiveDryingPresets}
nozzleTempPresets={effectiveNozzleTempPresets}
bedTempPresets={effectiveBedTempPresets}
chamberTempPresets={effectiveChamberTempPresets}
fanSpeedPresets={effectiveFanSpeedPresets}
requirePlateClear={settings?.require_plate_clear === true}
selectionMode={selectionMode}
isSelected={selectedPrinterIds.has(printer.id)}
onToggleSelect={toggleSelect}
onOpenCompactCard={openCompactCard}
aiDetectionEnabled={isAiMonitored(printer.id)}
aiDetection={obicoPrinterStatus?.enabled ? obicoPrinterStatus.per_printer[String(printer.id)] : undefined}
aiLastError={obicoPrinterStatus?.last_error ?? null}
/>
))}
)}
{cardSize === 2 && compactDrilldownPrinterId != null && (
)}
{showAddModal && (