Grotti 2.10.0: Orca-Senden, Slice-Ordner, ED-Strom, Hygiene.

Slice-Watch mit Ordnern/Filtern, Orca-Nachbearbeitung, Cockpit-Verlauf
mit ED, Zeitzone im Browser. Tasten-Grenze und README-API angeglichen,
toter Code entfernt, Requirements gepinnt.

web/static/api.js

@@ -89,7 +89,126 @@ function clockOf(iso) {
   if (!iso) return "";
   const at = new Date(iso);
   if (Number.isNaN(at.getTime())) return "";
-  return at.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" });
+  return at.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit", timeZone: appTimeZone() });
+}
+
+const TZ_KEY = "grotti-timezone";
+
+function appTimeZone() {
+  try {
+    const value = localStorage.getItem(TZ_KEY);
+    if (value && value !== "auto") return value;
+  } catch (error) { /* Browser */ }
+  return undefined;
+}
+
+function formatDateTime(iso, opts) {
+  if (!iso) return "—";
+  const at = new Date(iso);
+  if (Number.isNaN(at.getTime())) return "—";
+  const options = {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    timeZone: appTimeZone(),
+    ...(opts || {}),
+  };
+  return at.toLocaleString("de-DE", options);
+}
+
+function formatDateRange(startIso, endIso) {
+  const start = startIso ? new Date(startIso) : null;
+  const end = endIso ? new Date(endIso) : null;
+  if (start && Number.isNaN(start.getTime())) return "—";
+  if (!start && !end) return "—";
+  if (start && !end) return formatDateTime(startIso) + " → …";
+  if (!start && end) return "… → " + formatDateTime(endIso);
+  const sameDay = start.toDateString() === end.toDateString();
+  const left = formatDateTime(startIso);
+  if (sameDay) {
+    const right = end.toLocaleTimeString("de-DE", {
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone: appTimeZone(),
+    });
+    return left + " – " + right;
+  }
+  return left + " – " + formatDateTime(endIso);
+}
+
+function tempChartHtml(samples) {
+  if (!samples || samples.length < 2) {
+    return '<p class="tiny">Noch zu wenig Proben für den Verlauf.</p>';
+  }
+  const times = samples.map((s) => new Date(s.sampled_at).getTime());
+  const t0 = times[0];
+  const t1 = times[times.length - 1];
+  const span = Math.max(1, t1 - t0);
+  const temps = samples.flatMap((s) => [s.nozzle, s.bed, s.chamber, s.nozzle_target, s.bed_target].filter((v) => v != null));
+  const minT = Math.min(...temps, 0);
+  const maxT = Math.max(...temps, 100);
+  const hasEd = samples.some((s) => s.nozzle_power != null || s.bed_power != null);
+  const w = 640;
+  const h = 210;
+  const padL = 44;
+  const padR = hasEd ? 44 : 28;
+  const padT = 22;
+  const padB = 30;
+  const x = (ms) => padL + ((ms - t0) / span) * (w - padL - padR);
+  const yT = (v) => padT + (1 - (Number(v) - minT) / Math.max(1, maxT - minT)) * (h - padT - padB);
+  const yEd = (v) => padT + (1 - Math.max(0, Math.min(1, Number(v) || 0))) * (h - padT - padB);
+
+  function poly(key, color, dashed, scaleEd) {
+    const pts = [];
+    samples.forEach((s, i) => {
+      const v = s[key];
+      if (v == null) return;
+      const yy = scaleEd ? yEd(Number(v)) : yT(v);
+      pts.push(`${x(times[i]).toFixed(1)},${yy.toFixed(1)}`);
+    });
+    if (pts.length < 2) return "";
+    const dash = dashed ? ' stroke-dasharray="5 4"' : "";
+    return `<polyline fill="none" stroke="${color}" stroke-width="${dashed ? 1.2 : 1.7}"${dash} points="${pts.join(" ")}" />`;
+  }
+
+  const tickCount = Math.min(5, samples.length);
+  const timeTicks = [];
+  for (let i = 0; i < tickCount; i++) {
+    const ms = t0 + (span * i) / Math.max(1, tickCount - 1);
+    const label = new Date(ms).toLocaleTimeString("de-DE", {
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone: appTimeZone(),
+    });
+    timeTicks.push(`<text x="${x(ms).toFixed(1)}" y="${h - 6}" text-anchor="middle" class="chart-label">${escapeHtml(label)}</text>`);
+  }
+  const midY = (padT + h - padB) / 2;
+
+  return `<svg class="temp-chart" viewBox="0 0 ${w} ${h}" role="img" aria-label="Temperatur links in °C, Einschaltdauer rechts in Prozent">
+    ${poly("nozzle_target", "#fdba74", true, false)}
+    ${poly("bed_target", "#93c5fd", true, false)}
+    ${poly("nozzle", "#ea580c", false, false)}
+    ${poly("bed", "#2563eb", false, false)}
+    ${poly("chamber", "#16a34a", false, false)}
+    ${hasEd ? poly("nozzle_power", "#c084fc", false, true) : ""}
+    ${hasEd ? poly("bed_power", "#22d3ee", false, true) : ""}
+    <text x="10" y="${midY}" class="chart-axis" transform="rotate(-90 10 ${midY})">Temp °C</text>
+    <text x="${padL}" y="14" class="chart-label">${Math.round(maxT)}</text>
+    <text x="${padL}" y="${h - padB + 2}" class="chart-label">${Math.round(minT)}</text>
+    ${hasEd ? `<text x="${w - 10}" y="${midY}" class="chart-axis" text-anchor="middle" transform="rotate(90 ${w - 10} ${midY})">ED %</text>` : ""}
+    ${hasEd ? `<text x="${w - padR}" y="14" text-anchor="end" class="chart-label">100</text>` : ""}
+    ${hasEd ? `<text x="${w - padR}" y="${h - padB + 2}" text-anchor="end" class="chart-label">0</text>` : ""}
+    ${timeTicks.join("")}
+  </svg>
+  <p class="tiny chart-legend">
+    <span class="leg nozzle">Düse</span>
+    <span class="leg bed">Bett</span>
+    <span class="leg chamber">Kammer</span>
+    ${hasEd ? '<span class="leg ed-n">ED Düse</span><span class="leg ed-b">ED Bett</span>' : ""}
+    · links °C · rechts % · gestrichelt ≈ Soll
+  </p>`;
 }
 
 function showNote(id, error, ok) {

web/static/grotti.css

@@ -374,6 +374,47 @@ body.shelf [data-role="hero"] { font-size: 1.35rem; }
 }
 .queue-item.running { border-color: rgba(61, 206, 124, 0.28); background: linear-gradient(180deg, rgba(61, 206, 124, 0.07), rgba(255, 255, 255, 0.02)); }
 .queue-item.error { border-color: rgba(248, 113, 113, 0.3); background: var(--st-error-soft); }
+.queue-item.run-line {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.2rem 0.3rem 0.2rem 0.2rem;
+  background: rgba(255, 255, 255, 0.03);
+}
+.queue-item.run-line.running {
+  background: rgba(61, 206, 124, 0.04);
+}
+.run-line-link {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  padding: 0.28rem 0.45rem;
+  border-radius: 7px;
+  overflow: hidden;
+}
+.run-line-fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: calc(var(--pct, 0) * 1%);
+  max-width: 100%;
+  background: rgba(61, 206, 124, 0.22);
+  pointer-events: none;
+  transition: width 0.35s ease;
+}
+.run-line-text {
+  position: relative;
+  z-index: 1;
+  color: var(--ink);
+  font-size: var(--t-xs);
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.queue-link.run-line-link:hover .run-line-text { color: var(--accent); }
 .queue-row { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
 .queue-row .grow { flex: 1; min-width: 0; }
 .queue-link { color: inherit; text-decoration: none; }
@@ -1214,14 +1255,16 @@ button.swatch.on { border-color: var(--accent); background: var(--accent-soft);
 }
 .mat-color-cap { color: var(--faint); font-size: var(--t-xs); }
 .mat-form { position: sticky; top: 0.75rem; }
-.mat-color {
+.mat-color,
+.mat-more {
   margin: 0.75rem 0 0;
   border: 1px solid var(--line);
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.02);
   overflow: hidden;
 }
-.mat-color > summary {
+.mat-color > summary,
+.mat-more > summary {
   list-style: none;
   display: flex;
   align-items: center;
@@ -1233,11 +1276,16 @@ button.swatch.on { border-color: var(--accent); background: var(--accent-soft);
   font-size: var(--t-sm);
   font-weight: 650;
 }
-.mat-color > summary::-webkit-details-marker { display: none; }
-.mat-color > summary .caret { transition: transform 0.2s var(--ease); opacity: 0.6; }
-.mat-color:not([open]) > summary .caret { transform: rotate(-90deg); }
-.mat-color > summary .grow { flex: 1; color: var(--ink); }
-.mat-color-body { padding: 0 0.7rem 0.75rem; }
+.mat-color > summary::-webkit-details-marker,
+.mat-more > summary::-webkit-details-marker { display: none; }
+.mat-color > summary .caret,
+.mat-more > summary .caret { transition: transform 0.2s var(--ease); opacity: 0.6; }
+.mat-color:not([open]) > summary .caret,
+.mat-more:not([open]) > summary .caret { transform: rotate(-90deg); }
+.mat-color > summary .grow,
+.mat-more > summary .grow { flex: 1; color: var(--ink); }
+.mat-color-body,
+.mat-more-body { padding: 0 0.7rem 0.75rem; }
 .mat-color-body .color-grid { margin-bottom: 0.35rem; }
 .mat-color-body .picked { min-height: 1.4rem; margin-bottom: 0.45rem; }
 .viewer-card { margin-top: 1rem; }
@@ -1627,6 +1675,13 @@ body.desk-on main {
 }
 .desk-tool-mesh .mesh { margin-top: 0; }
 .desk-tool-mesh .gridmesh { width: 100%; max-width: 22rem; }
+.desk-verlauf .temp-chart { max-width: none; }
+.desk-verlauf-head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.45rem;
+}
 .desk-empty { margin: 0.35rem 0 0; color: var(--faint); }
 
 .ablauf-card { margin-top: 1rem; }
@@ -1981,6 +2036,17 @@ article.machine.flash { animation: flash 2s var(--ease); }
 }
 .lib-tools input[type="search"] { flex: 1 1 12rem; margin: 0; }
 .lib-tools select { flex: 0 1 11rem; width: auto; margin: 0; }
+.lib-group {
+  font-size: var(--t-xs);
+  font-weight: 650;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 0.55rem 0.35rem 0.15rem;
+  margin-top: 0.25rem;
+  border-bottom: 1px solid var(--line);
+}
+.lib-group:first-child { margin-top: 0; padding-top: 0.15rem; }
 .lib-list { display: grid; gap: 0.35rem; max-height: 70vh; overflow-y: auto; margin: 0 -0.3rem; padding: 0 0.3rem; }
 .lib-item {
   display: grid;
@@ -2004,6 +2070,13 @@ article.machine.flash { animation: flash 2s var(--ease); }
 .lib-item .t { display: block; font-size: var(--t-sm); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
 .lib-item .m { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; font-size: var(--t-xs); color: var(--muted); margin-top: 0.12rem; font-variant-numeric: tabular-nums; }
 .lib-item .side { display: flex; gap: 0.25rem; align-items: center; }
+.lib-move {
+  max-width: 7.5rem;
+  margin: 0;
+  padding: 0.2rem 0.35rem;
+  font-size: var(--t-xs);
+  border-radius: 6px;
+}
 .lib-info { position: relative; }
 .lib-info > summary { list-style: none; }
 .lib-info > summary::-webkit-details-marker { display: none; }
@@ -2370,6 +2443,7 @@ label.button:hover { background: rgba(255, 255, 255, 0.04); }
   border: 1px solid var(--line);
 }
 .chart-label { fill: var(--muted); font-size: 11px; }
+.chart-axis { fill: var(--faint); font-size: 10px; font-weight: 650; letter-spacing: 0.04em; }
 .chart-legend { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.35rem; }
 .chart-legend .leg::before {
   content: "";
@@ -2383,6 +2457,8 @@ label.button:hover { background: rgba(255, 255, 255, 0.04); }
 .chart-legend .nozzle::before { background: #ea580c; }
 .chart-legend .bed::before { background: #2563eb; }
 .chart-legend .chamber::before { background: #16a34a; }
+.chart-legend .ed-n::before { background: #c084fc; }
+.chart-legend .ed-b::before { background: #22d3ee; }
 .tag {
   display: inline-block;
   font-size: 0.72rem;
@@ -2411,11 +2487,56 @@ label.button:hover { background: rgba(255, 255, 255, 0.04); }
 }
 .kpi-label { color: var(--muted); font-size: 0.78rem; font-weight: 650; }
 .spool-akte {
-  margin-top: 0.85rem;
-  padding-top: 0.7rem;
+  margin-top: 1rem;
+  padding-top: 0.85rem;
   border-top: 1px solid var(--line);
 }
-.spool-akte h3 { margin: 0 0 0.35rem; font-size: 0.95rem; }
+.spool-akte h3 { margin: 0 0 0.55rem; font-size: 0.95rem; }
+.akte-kpis {
+  margin-bottom: 0.65rem;
+  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
+  gap: 0.45rem;
+}
+.akte-kpis .kpi {
+  padding: 0.45rem 0.55rem;
+  border-radius: 10px;
+}
+.akte-kpis .kpi-val { font-size: 0.98rem; }
+.akte-runs { display: flex; flex-direction: column; gap: 0; }
+.akte-run {
+  display: grid;
+  grid-template-columns: 5.6rem minmax(5.5rem, auto) minmax(0, 1fr) auto auto;
+  gap: 0.35rem 0.55rem;
+  align-items: center;
+  padding: 0.38rem 0;
+  border-bottom: 1px solid var(--line);
+  font-size: 0.86rem;
+}
+.akte-run:last-child { border-bottom: 0; }
+.akte-when { color: var(--muted); white-space: nowrap; }
+.akte-charge { font-size: 0.72rem; text-decoration: none; }
+.akte-file {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.akte-g { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 650; }
+.akte-state { color: var(--muted); white-space: nowrap; text-align: right; }
+@media (max-width: 520px) {
+  .akte-run {
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      "when g"
+      "charge state"
+      "file file";
+  }
+  .akte-when { grid-area: when; }
+  .akte-charge { grid-area: charge; }
+  .akte-file { grid-area: file; }
+  .akte-g { grid-area: g; }
+  .akte-state { grid-area: state; }
+}
 ul.plain { list-style: none; margin: 0; padding: 0; }
 ul.plain li { padding: 0.2rem 0; border-bottom: 1px solid var(--line); }
 ul.plain li:last-child { border-bottom: 0; }