New Push

frontend/src/App.jsx

@@ -9,6 +9,7 @@ import DatabasePage from './pages/DatabasePage';
 
 function App() {
   const [pipeline, setPipeline] = useState({ state: 'IDLE', progress: 0, context: {} });
+  const [hardwareMonitoring, setHardwareMonitoring] = useState(null);
   const [lastDiscEvent, setLastDiscEvent] = useState(null);
   const location = useLocation();
   const navigate = useNavigate();
@@ -16,6 +17,7 @@ function App() {
   const refreshPipeline = async () => {
     const response = await api.getPipelineState();
     setPipeline(response.pipeline);
+    setHardwareMonitoring(response?.hardwareMonitoring || null);
   };
 
   useEffect(() => {
@@ -49,6 +51,10 @@ function App() {
       if (message.type === 'DISC_REMOVED') {
         setLastDiscEvent(null);
       }
+
+      if (message.type === 'HARDWARE_MONITOR_UPDATE') {
+        setHardwareMonitoring(message.payload || null);
+      }
     }
   });
 
@@ -88,6 +94,7 @@ function App() {
             element={
               <DashboardPage
                 pipeline={pipeline}
+                hardwareMonitoring={hardwareMonitoring}
                 lastDiscEvent={lastDiscEvent}
                 refreshPipeline={refreshPipeline}
               />

frontend/src/pages/DashboardPage.jsx

@@ -25,6 +25,7 @@ const dashboardStatuses = new Set([
   'CANCELLED',
   'ERROR'
 ]);
+
 function normalizeJobId(value) {
   const parsed = Number(value);
   if (!Number.isFinite(parsed) || parsed <= 0) {
@@ -33,6 +34,80 @@ function normalizeJobId(value) {
   return Math.trunc(parsed);
 }
 
+function formatPercent(value, digits = 1) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) {
+    return 'n/a';
+  }
+  return `${parsed.toFixed(digits)}%`;
+}
+
+function formatTemperature(value) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) {
+    return 'n/a';
+  }
+  return `${parsed.toFixed(1)}°C`;
+}
+
+function formatBytes(value) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed) || parsed < 0) {
+    return 'n/a';
+  }
+  if (parsed === 0) {
+    return '0 B';
+  }
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+  let unitIndex = 0;
+  let current = parsed;
+  while (current >= 1024 && unitIndex < units.length - 1) {
+    current /= 1024;
+    unitIndex += 1;
+  }
+  const digits = unitIndex <= 1 ? 0 : 2;
+  return `${current.toFixed(digits)} ${units[unitIndex]}`;
+}
+
+function formatUpdatedAt(value) {
+  if (!value) {
+    return '-';
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return '-';
+  }
+  return date.toLocaleString('de-DE');
+}
+
+function normalizeHardwareMonitoringPayload(rawPayload) {
+  const payload = rawPayload && typeof rawPayload === 'object' ? rawPayload : {};
+  return {
+    enabled: Boolean(payload.enabled),
+    intervalMs: Number(payload.intervalMs || 0),
+    updatedAt: payload.updatedAt || null,
+    sample: payload.sample && typeof payload.sample === 'object' ? payload.sample : null,
+    error: payload.error ? String(payload.error) : null
+  };
+}
+
+function getStorageUsageTone(usagePercent) {
+  const value = Number(usagePercent);
+  if (!Number.isFinite(value)) {
+    return 'unknown';
+  }
+  if (value >= 95) {
+    return 'critical';
+  }
+  if (value >= 85) {
+    return 'high';
+  }
+  if (value >= 70) {
+    return 'warn';
+  }
+  return 'ok';
+}
+
 function normalizeQueue(queue) {
   const payload = queue && typeof queue === 'object' ? queue : {};
   const runningJobs = Array.isArray(payload.runningJobs) ? payload.runningJobs : [];
@@ -240,7 +315,12 @@ function buildPipelineFromJob(job, currentPipeline, currentPipelineJobId) {
   };
 }
 
-export default function DashboardPage({ pipeline, lastDiscEvent, refreshPipeline }) {
+export default function DashboardPage({
+  pipeline,
+  hardwareMonitoring,
+  lastDiscEvent,
+  refreshPipeline
+}) {
   const [busy, setBusy] = useState(false);
   const [metadataDialogVisible, setMetadataDialogVisible] = useState(false);
   const [metadataDialogContext, setMetadataDialogContext] = useState(null);
@@ -258,11 +338,23 @@ export default function DashboardPage({ pipeline, lastDiscEvent, refreshPipeline
   const [jobsLoading, setJobsLoading] = useState(false);
   const [dashboardJobs, setDashboardJobs] = useState([]);
   const [expandedJobId, setExpandedJobId] = useState(undefined);
+  const [cpuCoresExpanded, setCpuCoresExpanded] = useState(false);
   const toastRef = useRef(null);
 
   const state = String(pipeline?.state || 'IDLE').trim().toUpperCase();
   const currentPipelineJobId = normalizeJobId(pipeline?.activeJobId || pipeline?.context?.jobId);
   const isProcessing = processingStates.includes(state);
+  const monitoringState = useMemo(
+    () => normalizeHardwareMonitoringPayload(hardwareMonitoring),
+    [hardwareMonitoring]
+  );
+  const monitoringSample = monitoringState.sample;
+  const cpuMetrics = monitoringSample?.cpu || null;
+  const memoryMetrics = monitoringSample?.memory || null;
+  const gpuMetrics = monitoringSample?.gpu || null;
+  const storageMetrics = Array.isArray(monitoringSample?.storage) ? monitoringSample.storage : [];
+  const cpuPerCoreMetrics = Array.isArray(cpuMetrics?.perCore) ? cpuMetrics.perCore : [];
+  const gpuDevices = Array.isArray(gpuMetrics?.devices) ? gpuMetrics.devices : [];
 
   const loadDashboardJobs = async () => {
     setJobsLoading(true);
@@ -881,6 +973,175 @@ export default function DashboardPage({ pipeline, lastDiscEvent, refreshPipeline
     <div className="page-grid">
       <Toast ref={toastRef} />
 
+      <Card title="Hardware Monitoring" subTitle="CPU (inkl. Temperatur), RAM, GPU und freier Speicher in den konfigurierten Pfaden.">
+        <div className="hardware-monitor-head">
+          <Tag
+            value={monitoringState.enabled ? 'Aktiv' : 'Deaktiviert'}
+            severity={monitoringState.enabled ? 'success' : 'secondary'}
+          />
+          <Tag value={`Intervall: ${monitoringState.intervalMs || 0} ms`} severity="info" />
+          <Tag value={`Letztes Update: ${formatUpdatedAt(monitoringState.updatedAt)}`} severity="warning" />
+        </div>
+
+        {monitoringState.error ? (
+          <small className="error-text">{monitoringState.error}</small>
+        ) : null}
+
+        {!monitoringState.enabled ? (
+          <p>Monitoring ist deaktiviert. Aktivierung in den Settings unter Kategorie "Monitoring".</p>
+        ) : !monitoringSample ? (
+          <p>Monitoring ist aktiv. Erste Messwerte werden gesammelt ...</p>
+        ) : (
+          <div className="hardware-monitor-grid">
+            <section className="hardware-monitor-block">
+              <h4>CPU</h4>
+              <div className="hardware-cpu-summary">
+                <div className="hardware-cpu-chip" title="CPU Gesamtauslastung">
+                  <i className="pi pi-chart-line" />
+                  <span>{formatPercent(cpuMetrics?.overallUsagePercent)}</span>
+                </div>
+                <div className="hardware-cpu-chip" title="CPU Gesamttemperatur">
+                  <i className="pi pi-bolt" />
+                  <span>{formatTemperature(cpuMetrics?.overallTemperatureC)}</span>
+                </div>
+                <div className="hardware-cpu-load-group">
+                  <div className="hardware-cpu-chip" title="CPU Load Average">
+                    <i className="pi pi-chart-bar" />
+                    <span>{Array.isArray(cpuMetrics?.loadAverage) ? cpuMetrics.loadAverage.join(' / ') : '-'}</span>
+                  </div>
+                  {cpuPerCoreMetrics.length > 0 ? (
+                    <button
+                      type="button"
+                      className="hardware-cpu-core-toggle-btn"
+                      onClick={() => setCpuCoresExpanded((prev) => !prev)}
+                      aria-label={cpuCoresExpanded ? 'CPU-Kerne ausblenden' : 'CPU-Kerne einblenden'}
+                      aria-expanded={cpuCoresExpanded}
+                    >
+                      <i className={`pi ${cpuCoresExpanded ? 'pi-angle-up' : 'pi-angle-down'}`} />
+                    </button>
+                  ) : null}
+                </div>
+              </div>
+              {cpuPerCoreMetrics.length === 0 ? (
+                <small>Pro-Core-Daten sind noch nicht verfuegbar.</small>
+              ) : null}
+              {cpuPerCoreMetrics.length > 0 && cpuCoresExpanded ? (
+                <div className="hardware-core-grid compact">
+                  {cpuPerCoreMetrics.map((core) => (
+                    <div key={`core-${core.index}`} className="hardware-core-item compact">
+                      <div className="hardware-core-title">C{core.index}</div>
+                      <div className="hardware-core-metric" title="Auslastung">
+                        <i className="pi pi-chart-line" />
+                        <small>{formatPercent(core.usagePercent)}</small>
+                      </div>
+                      <div className="hardware-core-metric" title="Temperatur">
+                        <i className="pi pi-bolt" />
+                        <small>{formatTemperature(core.temperatureC)}</small>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : null}
+            </section>
+
+            <section className="hardware-monitor-block">
+              <h4>RAM</h4>
+              <div className="hardware-cpu-summary">
+                <div className="hardware-cpu-chip" title="RAM Auslastung">
+                  <i className="pi pi-chart-pie" />
+                  <span>{formatPercent(memoryMetrics?.usagePercent)}</span>
+                </div>
+                <div className="hardware-cpu-chip" title="RAM Belegt">
+                  <i className="pi pi-arrow-up" />
+                  <span>{formatBytes(memoryMetrics?.usedBytes)}</span>
+                </div>
+                <div className="hardware-cpu-chip" title="RAM Frei">
+                  <i className="pi pi-arrow-down" />
+                  <span>{formatBytes(memoryMetrics?.freeBytes)}</span>
+                </div>
+                <div className="hardware-cpu-chip" title="RAM Gesamt">
+                  <i className="pi pi-database" />
+                  <span>{formatBytes(memoryMetrics?.totalBytes)}</span>
+                </div>
+              </div>
+            </section>
+
+            <section className="hardware-monitor-block">
+              <h4>GPU</h4>
+              {!gpuMetrics?.available ? (
+                <small>{gpuMetrics?.message || 'Keine GPU-Metriken verfuegbar.'}</small>
+              ) : (
+                <div className="hardware-gpu-list">
+                  {gpuDevices.map((gpu, index) => (
+                    <div key={`gpu-${gpu?.index ?? index}`} className="hardware-gpu-item">
+                      <strong>
+                        GPU {gpu?.index ?? index}
+                        {gpu?.name ? ` | ${gpu.name}` : ''}
+                      </strong>
+                      <small>Load: {formatPercent(gpu?.utilizationPercent)}</small>
+                      <small>Mem-Load: {formatPercent(gpu?.memoryUtilizationPercent)}</small>
+                      <small>Temp: {formatTemperature(gpu?.temperatureC)}</small>
+                      <small>VRAM: {formatBytes(gpu?.memoryUsedBytes)} / {formatBytes(gpu?.memoryTotalBytes)}</small>
+                      <small>Power: {Number.isFinite(Number(gpu?.powerDrawW)) ? `${gpu.powerDrawW} W` : 'n/a'} / {Number.isFinite(Number(gpu?.powerLimitW)) ? `${gpu.powerLimitW} W` : 'n/a'}</small>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </section>
+
+            <section className="hardware-monitor-block">
+              <h4>Freier Speicher in Pfaden</h4>
+              <div className="hardware-storage-list">
+                {storageMetrics.map((entry) => {
+                  const tone = getStorageUsageTone(entry?.usagePercent);
+                  const usagePercent = Number(entry?.usagePercent);
+                  const barValue = Number.isFinite(usagePercent)
+                    ? Math.max(0, Math.min(100, usagePercent))
+                    : 0;
+                  return (
+                    <div
+                      key={`storage-${entry?.key || entry?.label || 'path'}`}
+                      className={`hardware-storage-item compact${entry?.error ? ' has-error' : ''}`}
+                    >
+                      <div className="hardware-storage-head">
+                        <strong>{entry?.label || entry?.key || 'Pfad'}</strong>
+                        <span className={`hardware-storage-percent tone-${tone}`}>
+                          {entry?.error ? 'Fehler' : formatPercent(entry?.usagePercent)}
+                        </span>
+                      </div>
+
+                      {entry?.error ? (
+                        <small className="error-text">{entry.error}</small>
+                      ) : (
+                        <>
+                          <div className={`hardware-storage-bar tone-${tone}`}>
+                            <ProgressBar value={barValue} showValue={false} />
+                          </div>
+                          <div className="hardware-storage-summary">
+                            <small>Frei: {formatBytes(entry?.freeBytes)}</small>
+                            <small>Gesamt: {formatBytes(entry?.totalBytes)}</small>
+                          </div>
+                        </>
+                      )}
+
+                      <small className="hardware-storage-path" title={entry?.path || '-'}>
+                        Pfad: {entry?.path || '-'}
+                      </small>
+                      {entry?.queryPath && entry.queryPath !== entry.path ? (
+                        <small className="hardware-storage-path" title={entry.queryPath}>
+                          Parent: {entry.queryPath}
+                        </small>
+                      ) : null}
+                      {entry?.note ? <small className="hardware-storage-path">{entry.note}</small> : null}
+                    </div>
+                  );
+                })}
+              </div>
+            </section>
+          </div>
+        )}
+      </Card>
+
       <Card title="Job Queue" subTitle="Starts werden nach Parallel-Limit abgearbeitet. Queue-Elemente können per Drag-and-Drop umsortiert werden.">
         <div className="pipeline-queue-meta">
           <Tag value={`Parallel: ${queueState?.maxParallelJobs || 1}`} severity="info" />
@@ -1052,35 +1313,37 @@ export default function DashboardPage({ pipeline, lastDiscEvent, refreshPipeline
                   ) : (
                     <div className="poster-thumb dashboard-job-poster-fallback">Kein Poster</div>
                   )}
-                  <div className="dashboard-job-row-main">
-                    <strong className="dashboard-job-title-line">
-                      <img
-                        src={mediaIndicator.src}
-                        alt={mediaIndicator.alt}
-                        title={mediaIndicator.title}
-                        className="media-indicator-icon"
-                      />
-                      <span>{jobTitle}</span>
-                    </strong>
-                    <small>
-                      #{jobId}
-                      {job?.year ? ` | ${job.year}` : ''}
-                      {job?.imdb_id ? ` | ${job.imdb_id}` : ''}
-                    </small>
+                  <div className="dashboard-job-row-content">
+                    <div className="dashboard-job-row-main">
+                      <strong className="dashboard-job-title-line">
+                        <img
+                          src={mediaIndicator.src}
+                          alt={mediaIndicator.alt}
+                          title={mediaIndicator.title}
+                          className="media-indicator-icon"
+                        />
+                        <span>{jobTitle}</span>
+                      </strong>
+                      <small>
+                        #{jobId}
+                        {job?.year ? ` | ${job.year}` : ''}
+                        {job?.imdb_id ? ` | ${job.imdb_id}` : ''}
+                      </small>
+                    </div>
+                    <div className="dashboard-job-badges">
+                      <Tag value={statusBadgeValue} severity={statusBadgeSeverity} />
+                      {isCurrentSession ? <Tag value="Aktive Session" severity="info" /> : null}
+                      {isResumable ? <Tag value="Fortsetzbar" severity="success" /> : null}
+                      {normalizedStatus === 'READY_TO_ENCODE'
+                        ? <Tag value={reviewConfirmed ? 'Bestätigt' : 'Unbestätigt'} severity={reviewConfirmed ? 'success' : 'warning'} />
+                        : null}
+                      <JobStepChecks backupSuccess={Boolean(job?.backupSuccess)} encodeSuccess={Boolean(job?.encodeSuccess)} />
+                    </div>
                     <div className="dashboard-job-row-progress" aria-label={`Job Fortschritt ${progressLabel}`}>
                       <ProgressBar value={clampedProgress} showValue={false} />
                       <small>{etaLabel ? `${progressLabel} | ETA ${etaLabel}` : progressLabel}</small>
                     </div>
                   </div>
-                  <div className="dashboard-job-badges">
-                    <Tag value={statusBadgeValue} severity={statusBadgeSeverity} />
-                    {isCurrentSession ? <Tag value="Aktive Session" severity="info" /> : null}
-                    {isResumable ? <Tag value="Fortsetzbar" severity="success" /> : null}
-                    {normalizedStatus === 'READY_TO_ENCODE'
-                      ? <Tag value={reviewConfirmed ? 'Bestätigt' : 'Unbestätigt'} severity={reviewConfirmed ? 'success' : 'warning'} />
-                      : null}
-                    <JobStepChecks backupSuccess={Boolean(job?.backupSuccess)} encodeSuccess={Boolean(job?.encodeSuccess)} />
-                  </div>
                   <i className="pi pi-angle-down" aria-hidden="true" />
                 </button>
               );

frontend/src/styles/app.css

@@ -217,6 +217,266 @@ body {
   flex-wrap: wrap;
 }
 
+.hardware-monitor-head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin-bottom: 0.7rem;
+}
+
+.hardware-monitor-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+  align-items: stretch;
+}
+
+.hardware-monitor-block {
+  border: 1px solid var(--rip-border);
+  border-radius: 0.5rem;
+  background: var(--rip-panel-soft);
+  padding: 0.65rem;
+  display: grid;
+  gap: 0.55rem;
+  align-content: start;
+}
+
+.hardware-monitor-block h4 {
+  margin: 0;
+}
+
+.hardware-monitor-meta {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.35rem 0.55rem;
+}
+
+.hardware-cpu-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  align-items: stretch;
+}
+
+.hardware-cpu-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: 1px solid var(--rip-border);
+  border-radius: 999px;
+  background: var(--rip-panel);
+  padding: 0.22rem 0.55rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  min-height: 2rem;
+  height: 2rem;
+  white-space: nowrap;
+}
+
+.hardware-cpu-chip span {
+  line-height: 1;
+}
+
+.hardware-cpu-chip .pi {
+  font-size: 0.82rem;
+  color: var(--rip-brown-700);
+}
+
+.hardware-cpu-load-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.hardware-cpu-core-toggle-btn {
+  border: 1px solid var(--rip-border);
+  background: var(--rip-panel);
+  color: var(--rip-brown-700);
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+}
+
+.hardware-cpu-core-toggle-btn:hover {
+  background: #f1e1c8;
+}
+
+.hardware-cpu-core-toggle-btn .pi {
+  font-size: 0.78rem;
+}
+
+.hardware-monitor-meta > div,
+.hardware-core-item,
+.hardware-gpu-item,
+.hardware-storage-item {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.hardware-core-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 0.45rem;
+}
+
+.hardware-core-item {
+  border: 1px dashed var(--rip-border);
+  border-radius: 0.4rem;
+  padding: 0.42rem 0.5rem;
+  background: var(--rip-panel);
+  display: grid;
+  gap: 0.12rem;
+}
+
+.hardware-core-grid.compact {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.32rem;
+}
+
+.hardware-core-item.compact {
+  grid-template-columns: auto auto auto;
+  align-items: center;
+  justify-content: start;
+  gap: 0.35rem;
+  padding: 0.3rem 0.45rem;
+  text-align: left;
+}
+
+.hardware-core-title {
+  font-size: 0.74rem;
+  font-weight: 700;
+  color: var(--rip-brown-700);
+  min-width: 2.2rem;
+}
+
+.hardware-core-metric {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.28rem;
+  justify-self: start;
+}
+
+.hardware-core-metric .pi {
+  font-size: 0.72rem;
+  color: var(--rip-muted);
+}
+
+.hardware-gpu-list,
+.hardware-storage-list {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.hardware-gpu-item,
+.hardware-storage-item {
+  border: 1px dashed var(--rip-border);
+  border-radius: 0.45rem;
+  padding: 0.45rem 0.55rem;
+  background: var(--rip-panel);
+  display: grid;
+  gap: 0.15rem;
+}
+
+.hardware-storage-item.compact {
+  gap: 0.3rem;
+}
+
+.hardware-storage-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.hardware-storage-head strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hardware-storage-percent {
+  font-size: 0.74rem;
+  font-weight: 700;
+  border-radius: 999px;
+  padding: 0.1rem 0.45rem;
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+
+.hardware-storage-percent.tone-ok {
+  color: #18643a;
+  background: #d8f1df;
+  border-color: #9ed5ad;
+}
+
+.hardware-storage-percent.tone-warn {
+  color: #7d4f00;
+  background: #f8ebc4;
+  border-color: #d7b46a;
+}
+
+.hardware-storage-percent.tone-high {
+  color: #8e3d00;
+  background: #f5dcc9;
+  border-color: #d9a578;
+}
+
+.hardware-storage-percent.tone-critical {
+  color: #8f1f17;
+  background: #f6d6d5;
+  border-color: #d89a97;
+}
+
+.hardware-storage-percent.tone-unknown {
+  color: #5b4636;
+  background: #eadfcc;
+  border-color: #c8ad88;
+}
+
+.hardware-storage-bar .p-progressbar {
+  height: 0.5rem;
+  background: #eadbc1;
+}
+
+.hardware-storage-bar.tone-ok .p-progressbar-value {
+  background: #2d9c4e;
+}
+
+.hardware-storage-bar.tone-warn .p-progressbar-value {
+  background: #c58f00;
+}
+
+.hardware-storage-bar.tone-high .p-progressbar-value {
+  background: #d6761f;
+}
+
+.hardware-storage-bar.tone-critical .p-progressbar-value {
+  background: #c43c2e;
+}
+
+.hardware-storage-bar.tone-unknown .p-progressbar-value {
+  background: #8a6a53;
+}
+
+.hardware-storage-summary {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.hardware-storage-path {
+  color: var(--rip-muted);
+}
+
 .pipeline-queue-meta {
   display: flex;
   gap: 0.45rem;
@@ -312,7 +572,7 @@ body {
   padding: 0.6rem 0.7rem;
   background: var(--rip-panel-soft);
   display: grid;
-  grid-template-columns: 48px minmax(0, 1fr) auto auto;
+  grid-template-columns: 48px minmax(0, 1fr) auto;
   gap: 0.7rem;
   align-items: center;
   text-align: left;
@@ -325,6 +585,14 @@ body {
   background: #fbf0df;
 }
 
+.dashboard-job-row-content {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.3rem 0.7rem;
+  align-items: start;
+}
+
 .dashboard-job-row-main {
   display: grid;
   gap: 0.3rem;
@@ -360,6 +628,7 @@ body {
 }
 
 .dashboard-job-row-progress {
+  grid-column: 1 / -1;
   display: grid;
   gap: 0.2rem;
 }
@@ -377,7 +646,7 @@ body {
   display: flex;
   align-items: center;
   gap: 0.35rem;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   justify-content: flex-end;
 }
 
@@ -1289,6 +1558,8 @@ body {
 
   .metadata-grid,
   .device-meta,
+  .hardware-monitor-grid,
+  .hardware-monitor-meta,
   .pipeline-queue-grid,
   .media-review-meta,
   .media-track-grid,
@@ -1303,11 +1574,10 @@ body {
   }
 
   .dashboard-job-row {
-    grid-template-columns: 48px minmax(0, 1fr);
+    grid-template-columns: 48px minmax(0, 1fr) auto;
   }
 
   .dashboard-job-badges {
-    grid-column: 1 / -1;
     justify-content: flex-start;
   }
 
@@ -1338,6 +1608,26 @@ body {
   .metadata-selection-dialog .p-datatable-wrapper {
     max-height: 16rem !important;
   }
+
+  .hardware-core-item.compact {
+    grid-template-columns: auto auto auto;
+    align-items: center;
+    justify-content: start;
+    gap: 0.3rem;
+    text-align: left;
+  }
+
+  .hardware-core-grid.compact {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .hardware-core-title {
+    min-width: 2rem;
+  }
+
+  .hardware-core-metric {
+    justify-self: start;
+  }
 }
 
 @media (max-width: 640px) {