fix: Beute-Editor und Durchsicht nach Browser-Prüfung

- Umbauen: Fokus nach Rückgängig/Wiederholen am Ende auf den anderen
  Verlaufsknopf, nach Entfernen auf die Nachbarzeile (sonst Überschrift)
- Umbauen: Hinweis „Beute wurde inzwischen geändert“ zuverlässig, der
  Stand wird bei Fokus/Sichtbarkeit und alle 30 s neu geladen, solange
  ein Entwurf besteht; Editor-Wurzel ist <main>
- Verlauf: Futtertaschen-Füllstand als „Flüssigfutter 1,5 l“, Entfernen
  als „Futtertasche entfernt“; Gliederung ohne leere Werte („Boden · /“)
- Durchsicht: Rückgängig der letzten Änderung behält den Schalter
  „Liste“ und setzt den Fokus auf die Überschrift der Änderungen

Refs #21 #22

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>

ApiCore-Frontend/src/app/(app)/colonies/[id]/hive/page.spec.tsx

@@ -243,6 +243,51 @@ describe("HiveEditorPage", () => {
     expect(fetchHive).toHaveBeenCalledTimes(1);
   });
 
+  it("moves focus to the other history button when undo or redo runs out", async () => {
+    renderPage();
+    await addPart("cover");
+
+    await userEvent.click(screen.getByRole("button", { name: "Rückgängig" }));
+    expect(screen.getByRole("button", { name: "Rückgängig" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Wiederholen" })).toHaveFocus();
+
+    await userEvent.click(screen.getByRole("button", { name: "Wiederholen" }));
+    expect(screen.getByRole("button", { name: "Wiederholen" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Rückgängig" })).toHaveFocus();
+  });
+
+  it("moves focus to the next row after removing a part, else the previous one", async () => {
+    renderPage();
+    const stack = await screen.findByRole("list", { name: "Aufbau" });
+
+    await userEvent.click(within(stack).getByRole("button", { name: "Entfernen: Futterzarge 2" }));
+    expect(document.activeElement).toHaveAttribute("data-part-id", "fe");
+
+    // The floor insert is the last row: focus falls back to the row above (the floor).
+    await userEvent.click(within(stack).getByRole("button", { name: "Entfernen: Bausperre" }));
+    expect(document.activeElement).toHaveAttribute("data-part-id", "f");
+  });
+
+  it("refreshes the setup on window focus and hints when the server moved on", async () => {
+    renderPage();
+    await addPart("cover");
+    const other = sampleState();
+    other.stack = other.stack.filter((p) => p.id !== "b2");
+    vi.mocked(fetchHive).mockResolvedValue(setupView(other, "colony-1", 4));
+    const calls = vi.mocked(fetchHive).mock.calls.length;
+
+    act(() => void window.dispatchEvent(new Event("focus")));
+
+    expect(await screen.findByText(/Die Beute wurde inzwischen geändert\. Beim Speichern/)).toBeInTheDocument();
+    expect(vi.mocked(fetchHive).mock.calls.length).toBeGreaterThan(calls);
+  });
+
+  it("is a main landmark", async () => {
+    renderPage();
+
+    expect(await screen.findByRole("main")).toBeInTheDocument();
+  });
+
   it("announces undo and redo", async () => {
     renderPage();
     await addPart("cover");

ApiCore-Frontend/src/app/(app)/colonies/[id]/hive/page.tsx

@@ -18,7 +18,9 @@ export default function HiveEditorPage() {
   const connectivity = useConnectivity();
   const backHref = `/colonies/${encodeURIComponent(id)}`;
   const colony = useQuery({ queryKey: ["colonies", id], queryFn: () => fetchColony(id) });
-  const hive = useQuery({ queryKey: hiveKeys.detail(id), queryFn: () => fetchHive(id),
+  const hive = useQuery({
+    queryKey: hiveKeys.detail(id),
+    queryFn: () => fetchHive(id),
     // A colony without a hive answers 404 for good; no point retrying.
     retry: (count, error) => hiveErrorCode(error) !== "HIVE_NOT_FOUND" && count < 3,
   });
@@ -72,6 +74,7 @@ export default function HiveEditorPage() {
       setup={hive.data}
       catalog={catalog}
       canManageTemplates={hasPermission("hive-systems:manage")}
+      onRefresh={() => void hive.refetch()}
     />
   );
 }

ApiCore-Frontend/src/app/(app)/inspections/new/hive-section.tsx

@@ -140,17 +140,19 @@ export function InspectionHiveSection({
   catalog,
   errorText,
 }: InspectionHiveSectionProps) {
-  const sectionRef = useRef<HTMLDivElement>(null);
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const [outlineShown, setOutlineShown] = useState(false);
   const [announcement, setAnnouncement] = useState("");
   return (
     // A portal form inside the card (frame/part sheet) must never submit the enclosing inspection form.
     <div
-      ref={sectionRef}
       data-testid="hive-section"
-      tabIndex={-1}
       className="flex flex-col gap-4 outline-none"
       onSubmit={(event) => event.stopPropagation()}
     >
+      <h3 ref={headingRef} tabIndex={-1} className="sr-only">
+        Beute-Änderungen
+      </h3>
       <p role="status" aria-live="polite" className="sr-only">
         {announcement}
       </p>
@@ -162,6 +164,8 @@ export function InspectionHiveSection({
           mode={canEdit ? "inspection" : "view"}
           onOpsChange={canEdit ? onOpsChange : undefined}
           initialOps={canEdit ? ops : undefined}
+          initialShowOutline={outlineShown}
+          onShowOutlineChange={setOutlineShown}
         />
       </div>
       {canEdit && ops.length > 0 && base && catalog ? (
@@ -171,7 +175,7 @@ export function InspectionHiveSection({
           catalog={catalog}
           onChange={onOpsReplace}
           onUndone={(text) => setAnnouncement(`Rückgängig: ${text}`)}
-          onEmptied={() => sectionRef.current?.focus()}
+          onEmptied={() => headingRef.current?.focus()}
         />
       ) : null}
       {errorText ? (

ApiCore-Frontend/src/app/(app)/inspections/new/page-hive.spec.tsx

@@ -50,10 +50,16 @@ vi.mock("@/lib/hive/api", async (importOriginal) => ({
   fetchHiveSystems: vi.fn(),
 }));
 
-const card = vi.hoisted(() => ({ renders: [] as { mode?: string; initialOps?: unknown[] }[] }));
+const card = vi.hoisted(() => ({ renders: [] as { mode?: string; initialOps?: unknown[]; initialShowOutline?: boolean }[] }));
 vi.mock("@/components/hive/hive-card", () => ({
-  HiveCard: (props: { mode?: string; initialOps?: unknown[]; onOpsChange?: (ops: unknown[]) => void }) => {
+  HiveCard: (props: {
-    card.renders.push({ mode: props.mode, initialOps: props.initialOps });
+    mode?: string;
+    initialOps?: unknown[];
+    initialShowOutline?: boolean;
+    onOpsChange?: (ops: unknown[]) => void;
+    onShowOutlineChange?: (shown: boolean) => void;
+  }) => {
+    card.renders.push({ mode: props.mode, initialOps: props.initialOps, initialShowOutline: props.initialShowOutline });
     const fill = { op: "setState", id: "fe", key: "syrupLiters", value: 2 };
     const frame = { op: "setFrame", boxId: "b1", slot: 5, type: "BROOD", name: null };
     const add = {
@@ -73,6 +79,9 @@ vi.mock("@/components/hive/hive-card", () => ({
         <button type="button" onClick={() => props.onOpsChange?.([add, fillNew])}>
           Test neue Zarge
         </button>
+        <button type="button" onClick={() => props.onShowOutlineChange?.(true)}>
+          Test Liste
+        </button>
         <button type="button" onClick={() => props.onOpsChange?.([fill, fill])}>
           Test zwei gleiche
         </button>
@@ -217,7 +226,7 @@ describe("NewInspectionPage: section Beute", () => {
 
     await userEvent.click(screen.getByRole("button", { name: /^Rückgängig/ }));
 
-    expect(screen.getByTestId("hive-section")).toHaveFocus();
+    expect(screen.getByRole("heading", { name: "Beute-Änderungen" })).toHaveFocus();
   });
 
   it("keeps focus on a row when identical ops renumber their keys", async () => {
@@ -229,6 +238,16 @@ describe("NewInspectionPage: section Beute", () => {
     expect(screen.getByRole("button", { name: /^Rückgängig/ })).toHaveFocus();
   });
 
+  it("keeps the card's Liste toggle across the remount after Rückgängig", async () => {
+    renderPage();
+    await userEvent.click(await screen.findByRole("button", { name: "Test Futter" }));
+    await userEvent.click(screen.getByRole("button", { name: "Test Liste" }));
+
+    await userEvent.click(screen.getByRole("button", { name: /^Rückgängig/ }));
+
+    expect(card.renders.at(-1)?.initialShowOutline).toBe(true);
+  });
+
   it("hides a refusal once the ops changed", async () => {
     vi.mocked(createInspection).mockRejectedValue(
       new ApiError(403, "Forbidden", { code: "HIVE_FORBIDDEN" }),

ApiCore-Frontend/src/components/hive/editor/editor-toolbar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { ReactNode } from "react";
+import type { ReactNode, Ref } from "react";
 import { LayoutTemplate, Redo2, Save, Trash2, Undo2 } from "lucide-react";
 import { GLASS_BUTTON, GLASS_SURFACE } from "../hive-glass";
 
@@ -10,6 +10,8 @@ export interface EditorToolbarProps {
   title: string;
   canUndo: boolean;
   canRedo: boolean;
+  undoRef?: Ref<HTMLButtonElement>;
+  redoRef?: Ref<HTMLButtonElement>;
   onUndo: () => void;
   onRedo: () => void;
   date: string;
@@ -26,19 +28,20 @@ export interface EditorToolbarProps {
 }
 
 /** Top bar of the editor: back, title, undo/redo, date and the three ways to finish. */
-export function EditorToolbar(props: EditorToolbarProps) {
+export function EditorToolbar({ undoRef, redoRef, ...props }: EditorToolbarProps) {
   const { date, today, hasOps, saving } = props;
   const dateValid = /^\d{4}-\d{2}-\d{2}$/.test(date) && date <= today;
   return (
     <header className={`flex flex-wrap items-center gap-2 px-3 py-2 ${GLASS_SURFACE}`}>
       {props.back}
       <h1 className="mr-auto text-lg font-semibold tracking-tight">{props.title}</h1>
-      <button type="button" onClick={props.onUndo} disabled={!props.canUndo} className={GLASS_BUTTON} title="Strg+Z">
+      <button type="button" ref={undoRef} onClick={props.onUndo} disabled={!props.canUndo} className={GLASS_BUTTON} title="Strg+Z">
         <Undo2 aria-hidden />
         Rückgängig
       </button>
       <button
         type="button"
+        ref={redoRef}
         onClick={props.onRedo}
         disabled={!props.canRedo}
         className={GLASS_BUTTON}

ApiCore-Frontend/src/components/hive/editor/hive-editor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { MouseEvent } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -36,13 +36,43 @@ export interface HiveEditorProps {
   catalog: HiveCatalog;
   /** hive-systems:manage: may store the build as the system template. */
   canManageTemplates: boolean;
+  /** Reloads the setup; called on focus and every 30 s while a draft exists, so a change elsewhere shows. */
+  onRefresh?: () => void;
 }
 
+const REFRESH_INTERVAL_MS = 30_000;
+
 const noop = () => {};
 
 const STALE_HINT =
   "Die Beute wurde inzwischen geändert. Beim Speichern werden deine Schritte auf den aktuellen Stand angewendet.";
 
+/** Row order of the stack list (top to bottom, inserts under their host). */
+function listOrder(state: HiveState): string[] {
+  return [...state.stack].reverse().flatMap((part) => [part.id, ...(part.inserts ?? []).map((insert) => insert.id)]);
+}
+
+/** Rows to focus after `id` is removed: the next one, else the previous one (never a removed one). */
+function neighbourIds(state: HiveState, id: string): string[] {
+  const order = listOrder(state);
+  const host = state.stack.find((part) => part.id === id);
+  const gone = new Set([id, ...(host?.inserts ?? []).map((insert) => insert.id)]);
+  const index = order.indexOf(id);
+  const after = order.slice(index + 1).filter((other) => !gone.has(other));
+  const before = order.slice(0, index).reverse().filter((other) => !gone.has(other));
+  return [...(after[0] ? [after[0]] : []), ...(before[0] ? [before[0]] : [])];
+}
+
+function rowControl(id: string): HTMLElement | null {
+  return document.querySelector<HTMLElement>(`[data-part-id="${CSS.escape(id)}"]`);
+}
+
+/** The history button that still works, else the stack heading. */
+function historyFocusTarget(used: HTMLElement | null, other: HTMLElement | null, heading: HTMLElement | null): HTMLElement | null {
+  const enabled = (element: HTMLElement | null) => (element instanceof HTMLButtonElement && !element.disabled ? element : null);
+  return enabled(used) ?? enabled(other) ?? heading;
+}
+
 function hasPart(state: HiveState, id: string): boolean {
   return state.stack.some((part) => part.id === id || (part.inserts ?? []).some((insert) => insert.id === id));
 }
@@ -66,7 +96,7 @@ export function HiveEditor(props: HiveEditorProps) {
   );
 }
 
-function HiveEditorBody({ colonyId, setup, catalog, canManageTemplates }: HiveEditorProps) {
+function HiveEditorBody({ colonyId, setup, catalog, canManageTemplates, onRefresh }: HiveEditorProps) {
   const router = useRouter();
   const queryClient = useQueryClient();
   const draft = useHiveDraft(setup.state, catalog);
@@ -86,6 +116,12 @@ function HiveEditorBody({ colonyId, setup, catalog, canManageTemplates }: HiveEd
   );
   const [confirm, setConfirm] = useState<"discard" | "leave" | "template" | null>(null);
 
+  const undoRef = useRef<HTMLButtonElement>(null);
+  const redoRef = useRef<HTMLButtonElement>(null);
+  const stackHeadingRef = useRef<HTMLHeadingElement>(null);
+  // What to focus once the next render has settled (keys of rows, buttons that ran out).
+  const pendingFocus = useRef<(() => HTMLElement | null) | null>(null);
+
   const hasOps = draft.ops.length > 0;
   // A selection ends with its part (removed or undone).
   const selectedId = pickedId !== null && hasPart(draft.state, pickedId) ? pickedId : null;
@@ -110,7 +146,20 @@ function HiveEditorBody({ colonyId, setup, catalog, canManageTemplates }: HiveEd
     },
     [draft, catalog, announce],
   );
-  const apply = useCallback((op: HiveOp | HiveOp[]) => applyStep(op, false), [applyStep]);
+  const apply = useCallback(
+    (op: HiveOp | HiveOp[]) => {
+      const ops = Array.isArray(op) ? op : [op];
+      const removal = ops.length === 1 && ops[0].op === "removePart" ? ops[0] : null;
+      const targets = removal ? neighbourIds(draft.state, removal.id) : [];
+      const outcome = applyStep(op, false);
+      if (outcome.ok && removal) {
+        pendingFocus.current = () =>
+          targets.map(rowControl).find((element) => element !== null) ?? stackHeadingRef.current;
+      }
+      return outcome;
+    },
+    [applyStep, draft.state],
+  );
   const applyInDialog = useCallback((ops: HiveOp[]) => applyStep(ops, true), [applyStep]);
 
   const { undo: undoDraft, redo: redoDraft } = draft;
@@ -120,13 +169,48 @@ function HiveEditorBody({ colonyId, setup, catalog, canManageTemplates }: HiveEd
   );
   const undo = useCallback(() => {
     const step = undoDraft();
-    if (step) announce(describeStep("Rückgängig", step));
+    if (!step) return;
+    announce(describeStep("Rückgängig", step));
+    pendingFocus.current = () => historyFocusTarget(undoRef.current, redoRef.current, stackHeadingRef.current);
   }, [undoDraft, announce, describeStep]);
   const redo = useCallback(() => {
     const step = redoDraft();
-    if (step) announce(describeStep("Wiederholt", step));
+    if (!step) return;
+    announce(describeStep("Wiederholt", step));
+    pendingFocus.current = () => historyFocusTarget(redoRef.current, undoRef.current, stackHeadingRef.current);
   }, [redoDraft, announce, describeStep]);
 
+  // A button that ran out of steps (or a removed row) must not take the keyboard focus with it.
+  useEffect(() => {
+    const resolve = pendingFocus.current;
+    if (!resolve) return;
+    pendingFocus.current = null;
+    const active = document.activeElement;
+    const lost = !active || active === document.body || (active instanceof HTMLButtonElement && active.disabled);
+    if (lost || !active?.isConnected) resolve()?.focus();
+  });
+
+  // Learn about changes made elsewhere: refresh on focus and, while a draft exists, every 30 s.
+  const refreshRef = useRef(onRefresh);
+  useEffect(() => {
+    refreshRef.current = onRefresh;
+  });
+  const canRefresh = onRefresh !== undefined;
+  useEffect(() => {
+    if (!canRefresh) return;
+    const refresh = () => {
+      if (document.visibilityState !== "hidden") refreshRef.current?.();
+    };
+    window.addEventListener("focus", refresh);
+    document.addEventListener("visibilitychange", refresh);
+    const timer = hasOps ? window.setInterval(refresh, REFRESH_INTERVAL_MS) : undefined;
+    return () => {
+      window.removeEventListener("focus", refresh);
+      document.removeEventListener("visibilitychange", refresh);
+      if (timer !== undefined) window.clearInterval(timer);
+    };
+  }, [canRefresh, hasOps]);
+
   // Leaving the page (reload, close, outside link) with open changes asks first.
   useEffect(() => {
     if (!hasOps) return;
@@ -199,7 +283,7 @@ function HiveEditorBody({ colonyId, setup, catalog, canManageTemplates }: HiveEd
   }
 
   return (
-    <div className="fixed inset-0 z-40 flex flex-col gap-2 bg-holo-bg p-2 text-holo-label-fg">
+    <main className="fixed inset-0 z-40 flex flex-col gap-2 bg-holo-bg p-2 text-holo-label-fg">
       <EditorToolbar
         back={
           <Link href={backHref} onClick={onBackClick} className={GLASS_BUTTON}>
@@ -210,6 +294,8 @@ function HiveEditorBody({ colonyId, setup, catalog, canManageTemplates }: HiveEd
         title="Umbauen"
         canUndo={draft.canUndo}
         canRedo={draft.canRedo}
+        undoRef={undoRef}
+        redoRef={redoRef}
         onUndo={undo}
         onRedo={redo}
         date={date}
@@ -254,7 +340,7 @@ function HiveEditorBody({ colonyId, setup, catalog, canManageTemplates }: HiveEd
             <PartPalette catalog={catalog} onAdd={openAdd} />
           </section>
           <section aria-labelledby="editor-stack" className="flex flex-col gap-3">
-            <h2 id="editor-stack" className="text-base font-semibold">
+            <h2 id="editor-stack" ref={stackHeadingRef} tabIndex={-1} className="text-base font-semibold outline-none">
               Aufbau
             </h2>
             <EditorStackList
@@ -309,6 +395,6 @@ function HiveEditorBody({ colonyId, setup, catalog, canManageTemplates }: HiveEd
         onConfirm={() => templateMutation.mutate()}
       />
       <HiveConflictSheet conflict={mutation.conflict} catalog={catalog} onResolve={resolveConflict} />
-    </div>
+    </main>
   );
 }

ApiCore-Frontend/src/components/hive/hive-card.tsx

@@ -57,6 +57,9 @@ export interface HiveCardProps {
    * loaded hive; ignored in view mode.
    */
   initialOps?: HiveOp[];
+  /** Start with the outline list shown, and report its toggle, so a host that remounts the card can keep it. */
+  initialShowOutline?: boolean;
+  onShowOutlineChange?: (shown: boolean) => void;
 }
 
 /**
@@ -86,7 +89,7 @@ function PlainCardBody({ children }: { children: ReactNode }) {
   );
 }
 
-function HiveCardContent({ colonyId, colony, mode = "view", onOpsChange, initialOps }: HiveCardProps) {
+function HiveCardContent({ colonyId, colony, mode = "view", onOpsChange, initialOps, initialShowOutline, onShowOutlineChange }: HiveCardProps) {
   const { hasPermission } = useAuth();
   // Offline the colony's pack answers; changes still waiting for network are shown on top (spec 10).
   const hive = useHiveSetup(colonyId);
@@ -144,6 +147,8 @@ function HiveCardContent({ colonyId, colony, mode = "view", onOpsChange, initial
       mode={mode}
       onOpsChange={onOpsChange}
       initialOps={initialOps}
+      initialShowOutline={initialShowOutline}
+      onShowOutlineChange={onShowOutlineChange}
     />
   );
 }
@@ -207,6 +212,8 @@ interface HiveCardBodyProps {
   mode: "view" | "inspection";
   onOpsChange?: (ops: HiveOp[]) => void;
   initialOps?: HiveOp[];
+  initialShowOutline?: boolean;
+  onShowOutlineChange?: (shown: boolean) => void;
 }
 
 /** The seed of the inspection draft: the given ops when they apply to the loaded hive, else none. */
@@ -215,7 +222,7 @@ function initialDraft(mode: "view" | "inspection", setup: HiveSetupView, catalog
   return applyHiveOps(setup.state, ops, catalog).ok ? ops : [];
 }
 
-function HiveCardBody({ colonyId, setup, catalog, canEdit, mode, onOpsChange, initialOps }: HiveCardBodyProps) {
+function HiveCardBody({ colonyId, setup, catalog, canEdit, mode, onOpsChange, initialOps, initialShowOutline = false, onShowOutlineChange }: HiveCardBodyProps) {
   const view = useHiveView();
   const connectivity = useConnectivity();
   const mutation = useHiveMutation(colonyId, catalog);
@@ -236,7 +243,7 @@ function HiveCardBody({ colonyId, setup, catalog, canEdit, mode, onOpsChange, in
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [seedDropped]);
   const [past, setPast] = useState<PastState | null>(null);
-  const [showOutline, setShowOutline] = useState(false);
+  const [showOutline, setShowOutline] = useState(initialShowOutline);
   const [historyOpen, setHistoryOpen] = useState(false);
   const [frameTarget, setFrameTarget] = useState<FrameTarget | null>(null);
   const [frameOpen, setFrameOpen] = useState(false);
@@ -380,7 +387,10 @@ function HiveCardBody({ colonyId, setup, catalog, canEdit, mode, onOpsChange, in
                 aria-pressed={showOutline}
                 aria-controls={outlineId}
                 aria-label="Aufbau als Liste"
-                onClick={() => setShowOutline(!showOutline)}
+                onClick={() => {
+                  setShowOutline(!showOutline);
+                  onShowOutlineChange?.(!showOutline);
+                }}
                 className={GLASS_BUTTON}
               >
                 <ListTree aria-hidden />

ApiCore-Frontend/src/components/hive/hive-history.tsx

@@ -5,9 +5,9 @@ import { useInfiniteQuery } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
 import { berlinCalendarDay } from "@/lib/dates";
 import { fetchHiveAt, fetchHiveHistory, hiveKeys } from "@/lib/hive/api";
-import { describeHiveOps } from "@/lib/hive/describe";
+import { describeHiveOps, partsAddedBy } from "@/lib/hive/describe";
 import { shortGermanDay, sourceLabel } from "@/lib/hive/summary";
-import type { HiveCatalog, HiveChangeListItem, HiveOp, HiveState } from "@/lib/hive/types";
+import type { HiveCatalog, HiveChangeListItem, HiveOp, HivePart, HiveState } from "@/lib/hive/types";
 
 const LOAD_FAILED_TEXT = "Stand konnte nicht geladen werden.";
 
@@ -21,10 +21,14 @@ export function useHiveHistory(colonyId: string) {
   });
 }
 
-function textOf(item: HiveChangeListItem, state: HiveState, catalog: HiveCatalog): string {
+function opsOf(item: HiveChangeListItem): HiveOp[] {
-  const ops = Array.isArray(item.ops) ? (item.ops as HiveOp[]) : [];
+  return Array.isArray(item.ops) ? (item.ops as HiveOp[]) : [];
-  // Items carry no state before; the current state names parts that still exist.
+}
-  const text = describeHiveOps(ops, state, catalog);
+
+function textOf(item: HiveChangeListItem, state: HiveState, catalog: HiveCatalog, seen: HivePart[]): string {
+  // Items carry no state before; the current state names parts that still exist,
+  // the parts other changes added name the ones that were removed since.
+  const text = describeHiveOps(opsOf(item), state, catalog, seen);
   if (text) return text;
   return item.source === "INIT" ? "Beute angelegt" : "Änderung";
 }
@@ -44,6 +48,7 @@ export function HiveHistory({ colonyId, state, catalog, onShowVersion }: HiveHis
   const [loadingId, setLoadingId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const items = history.data?.pages.flatMap((page) => page.items) ?? [];
+  const seen = items.flatMap((item) => partsAddedBy(opsOf(item)));
 
   async function show(item: HiveChangeListItem) {
     setLoadingId(item.id);
@@ -94,7 +99,7 @@ export function HiveHistory({ colonyId, state, catalog, onShowVersion }: HiveHis
                 <span className="font-medium">
                   {shortGermanDay(item.occurredOn)} · {sourceLabel(item.source)}
                 </span>
-                <span>{textOf(item, state, catalog)}</span>
+                <span>{textOf(item, state, catalog, seen)}</span>
                 {isLate ? (
                   <span className="text-xs text-muted-foreground">nachgetragen am {shortGermanDay(enteredOn)}</span>
                 ) : null}

ApiCore-Frontend/src/components/hive/hive-outline.spec.tsx

@@ -60,6 +60,21 @@ describe("HiveOutline", () => {
     expect(items.findIndex((t) => t?.includes("Zarge 2"))).toBeLessThan(items.findIndex((t) => t?.includes("Zarge 1")));
   });
 
+  it("shows no separator or empty value for a part whose state is not set", () => {
+    const emptyCatalog = inlineCatalog();
+    const floor = emptyCatalog.partTypes.get("floor")!;
+    emptyCatalog.partTypes.set("floor", {
+      ...floor,
+      stateSchema: [
+        { key: "a", label: "A", kind: "choice", options: ["X"], optionLabels: ["x"] },
+        { key: "b", label: "B", kind: "choice", options: ["Y"], optionLabels: ["y"] },
+      ],
+    });
+    setup({ catalog: emptyCatalog, state: { schemaVersion: 1, stack: [part("f", "floor"), part("r", "roof")] } });
+
+    expect(names().find((t) => t?.startsWith("Boden"))).toBe("Boden");
+  });
+
   it("shows a short state hint per part", () => {
     setup();
     const text = names().join("|");

ApiCore-Frontend/src/components/hive/hive-outline.tsx

@@ -49,9 +49,11 @@ function visibleInserts(part: HivePart, catalog: HiveCatalog): HivePart[] {
 
 function hintOf(part: HivePart, type: CatalogPartType | undefined, catalog: HiveCatalog): string | null {
   if (!type) return null;
-  if (type.stateSchema.length > 0) {
+  // Fields without a value (a floor's unset choices) add nothing; no stray separator.
-    return type.stateSchema.map((field) => fieldText(field, part.state[field.key])).join(" / ");
+  const fieldTexts = type.stateSchema
-  }
+    .map((field) => fieldText(field, part.state[field.key]))
+    .filter((text) => text !== "");
+  if (fieldTexts.length > 0) return fieldTexts.join(" / ");
   if (type.kind === "BOX") {
     const count = part.frames?.length ?? 0;
     return count > 0 ? `${count} Rähmchen` : null;

ApiCore-Frontend/src/lib/hive/describe.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { describeHiveOps } from "./describe";
+import { describeHiveOps, partsAddedBy } from "./describe";
 import { inlineCatalog, part, templateState } from "./test-utils";
 import type { HiveOp, HiveState } from "./types";
 
@@ -20,6 +20,19 @@ describe("describeHiveOps", () => {
     expect(describeHiveOps(ops, stateWithInsert(), catalog)).toBe("Bausperre entfernt, Zarge hinzugefügt");
   });
 
+  it("names parts that were added by earlier changes and are gone now", () => {
+    const pocket = part("p1", "frame-feeder", { slot: 1, state: { syrupLiters: 1 } });
+    const earlier: HiveOp[] = [{ op: "addInsert", hostId: "b", part: pocket }];
+    const seen = partsAddedBy(earlier);
+    const later: HiveOp[] = [
+      { op: "setState", id: "p1", key: "syrupLiters", value: 1.5 },
+      { op: "removePart", id: "p1" },
+    ];
+
+    expect(describeHiveOps(later, templateState(), catalog, seen)).toBe("Flüssigfutter 1,5 l, Futtertasche entfernt");
+    expect(describeHiveOps(later, templateState(), catalog)).toContain("Teil entfernt");
+  });
+
   it("uses the label of a part when it has one", () => {
     const state = templateState();
     state.stack[1].label = "Honigraum 1";

ApiCore-Frontend/src/lib/hive/describe.ts

@@ -63,13 +63,25 @@ function describeOne(op: HiveOp, known: Map<string, Named>, catalog: HiveCatalog
   }
 }
 
+/** Parts (and their inserts) that ops put into the stack, so later texts can still name them. */
+export function partsAddedBy(ops: HiveOp[]): HivePart[] {
+  return ops.flatMap((op) => (op.op === "addPart" || op.op === "addInsert" ? [op.part] : []));
+}
+
 /**
  * German one-line summary of a change, e.g. „Bausperre entfernt, Zarge hinzugefügt“.
  * Names come from `before` plus parts the same batch adds; more than three ops
  * are shortened to the first three and „und n weitere“.
  */
-export function describeHiveOps(ops: HiveOp[], before: HiveState, catalog: HiveCatalog): string {
+export function describeHiveOps(
+  ops: HiveOp[],
+  before: HiveState,
+  catalog: HiveCatalog,
+  /** Parts from other changes that no longer exist in `before` (see `partsAddedBy`). */
+  seen: HivePart[] = [],
+): string {
   const known = new Map<string, Named>();
+  for (const part of seen) collect(part, catalog, known);
   for (const part of before.stack) collect(part, catalog, known);
   const texts = ops.map((op) => describeOne(op, known, catalog));
   if (texts.length <= MAX_SHOWN_OPS) return texts.join(", ");