fix: Feinschliff nach Browserprüfung (Sprachnotiz-Text, offline Volk, Beute-SVG)

- „Gesagt wurde:“ zeigt an, dass der Text aufklappbar ist
- /voice/new nennt offline das Volk aus den Offline-Paketen
- Einstellungen: Überschrift „Sprachnotizen“ ohne „in Vorbereitung“
- Beute-SVG (role=img) ohne fokussierbare Kinder (axe nested-
  interactive); Tastaturweg bleibt die Gliederung. Dabei behoben: der
  Editor fokussierte nach dem Entfernen die SVG-Form statt der
  Listenzeile.

Gates: Frontend lint, typecheck, 3110 Tests, build.

Refs #27

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

ApiCore-Frontend/src/app/(app)/settings/voice/page.spec.tsx

@@ -213,6 +213,13 @@ describe("VoiceSettingsPage", () => {
     );
   });
 
+  it("has no leftover „in Vorbereitung“ heading", () => {
+    renderPage();
+
+    expect(screen.getByRole("heading", { name: "Sprachnotizen" })).toBeInTheDocument();
+    expect(document.body.textContent).not.toContain("in Vorbereitung");
+  });
+
   it("names the retention periods in words", () => {
     renderPage();
 

ApiCore-Frontend/src/app/(app)/settings/voice/voice-privacy-text.ts

@@ -31,7 +31,7 @@ export const VOICE_PRIVACY_SECTIONS: readonly PrivacySection[] = [
   },
   {
     id: "notes",
-    title: "Sprachnotizen (in Vorbereitung)",
+    title: "Sprachnotizen",
     paragraphs: [
       `Der Ton bleibt in deinem Cluster. Er wird nach dem Abschreiben gelöscht, spätestens nach ${VOICE_RETENTION.audio}.`,
       `Der abgeschriebene Text geht zur Auswertung an Anthropic. Er bleibt, bis du ihn übernimmst oder verwirfst, höchstens ${VOICE_RETENTION.content}.`,

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

@@ -6,6 +6,8 @@ import { toLocalIsoDate, todayLocalIsoDate } from "@/lib/dates";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { StandRound } from "@/lib/rounds/round-state";
 import { fetchVoiceConfig } from "@/lib/voice/api";
+import { fetchColonies } from "@/lib/colonies/api";
+import { listPacks } from "@/lib/apiaries/offline-pack";
 import type { VoiceRecorderProps } from "@/components/voice/voice-recorder";
 import NewVoiceNotePage from "./page";
 
@@ -76,6 +78,11 @@ vi.mock("@/components/voice/voice-recorder", () => ({
   },
 }));
 
+vi.mock("@/lib/apiaries/offline-pack", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/lib/apiaries/offline-pack")>()),
+  listPacks: vi.fn().mockResolvedValue([]),
+}));
+
 const CONFIG = {
   recordingEnabled: true,
   extractionEnabled: true,
@@ -111,6 +118,22 @@ describe("NewVoiceNotePage", () => {
     expect(screen.getByText("Sprich in ganzen Sätzen, nur du.")).toBeInTheDocument();
   });
 
+  it("names the colony from the offline packs when the colony list cannot be loaded", async () => {
+    query = new URLSearchParams({ colonyId: "c-9", date: "2026-10-14" });
+    vi.mocked(fetchColonies).mockRejectedValueOnce(new TypeError("Failed to fetch"));
+    vi.mocked(listPacks).mockResolvedValueOnce([
+      {
+        apiaryId: "a-1",
+        ownerUserId: "user-1",
+        savedAt: "2026-10-15T08:00:00.000Z",
+        pack: { colonies: [{ id: "c-9", code: "V-02", status: "ACTIVE" }] },
+      },
+    ] as never);
+    renderPage();
+
+    expect(await screen.findByText("V-02 · 14.10.")).toBeInTheDocument();
+  });
+
   const daysAgo = (days: number) => toLocalIsoDate(new Date(Date.now() - days * 86_400_000));
 
   it.each([

ApiCore-Frontend/src/app/(app)/voice/new/page.tsx

@@ -6,7 +6,9 @@ import { useSearchParams } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import { ArrowRight, Mic } from "lucide-react";
 import { fetchColonies } from "@/lib/colonies/api";
-import { useAuth } from "@/lib/auth/auth-context";
+import { useAuth, useCurrentUserId } from "@/lib/auth/auth-context";
+import { OFFLINE_PACKS_QUERY_KEY, listPacks, livingColoniesFromPacks } from "@/lib/apiaries/offline-pack";
+import { isNetworkError } from "@/lib/http/fetch-with-timeout";
 import { toLocalIsoDate, todayLocalIsoDate } from "@/lib/dates";
 import { useStandRound } from "@/lib/rounds/use-stand-round";
 import type { StandRound } from "@/lib/rounds/round-state";
@@ -119,7 +121,17 @@ function VoiceCaptureForm({ initialColonyId, initialDate, roundApiaryId }: Captu
   const locked = busy || saved;
   const [savedRound, setSavedRound] = useState<StandRound | null>(null);
   const stand = useStandRound(roundApiaryId, colonyId);
-  const { data: colonies } = useQuery({ queryKey: ["colonies"], queryFn: () => fetchColonies() });
+  const userId = useCurrentUserId();
+  const server = useQuery({ queryKey: ["colonies"], queryFn: () => fetchColonies() });
+  // Without network the loaded stands know the colony's code (never the shared cache: pack colonies are partial).
+  const isOffline = server.data === undefined && isNetworkError(server.error ?? server.failureReason);
+  const packs = useQuery({
+    queryKey: [...OFFLINE_PACKS_QUERY_KEY, userId, "living-colonies"],
+    queryFn: async () => livingColoniesFromPacks(await listPacks(userId ?? "")),
+    enabled: isOffline && userId !== null && colonyId !== "",
+    networkMode: "always",
+  });
+  const colonies = server.data ?? packs.data;
   const colonyCode = colonies?.find((colony) => colony.id === colonyId)?.code;
 
   const heading = colonyId ? `${colonyCode ?? "Volk"} · ${shortDay(date)}` : "Volk wählen";

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

@@ -68,8 +68,9 @@ function neighbourIds(state: HiveState, id: string): string[] {
   return [...(after[0] ? [after[0]] : []), ...(before[0] ? [before[0]] : [])];
 }
 
+/** The row button in the stack list (the SVG shapes carry the same data attribute). */
 function rowControl(id: string): HTMLElement | null {
-  return document.querySelector<HTMLElement>(`[data-part-id="${CSS.escape(id)}"]`);
+  return document.querySelector<HTMLElement>(`button[data-part-id="${CSS.escape(id)}"]`);
 }
 
 /** The history button that still works, else the stack heading. */

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

@@ -74,12 +74,10 @@ describe("HiveSvg", () => {
     expect(container.querySelectorAll('[tabindex="0"]')).toHaveLength(0);
   });
 
-  it("makes parts buttons with tabIndex -1 when onSelectPart is given", () => {
+  it("selects parts by pointer when onSelectPart is given (the outline is the keyboard path)", () => {
     const onSelectPart = vi.fn();
     const { container } = renderSvg(<HiveSvg layout={layout} onSelectPart={onSelectPart} />);
     const group = container.querySelector('g[data-part-id="b2"]')!;
-    expect(group).toHaveAttribute("role", "button");
-    expect(group).toHaveAttribute("tabindex", "-1");
     fireEvent.click(group);
     expect(onSelectPart).toHaveBeenCalledWith("b2");
   });
@@ -121,12 +119,22 @@ describe("HiveSvg", () => {
     const onSelectFrame = vi.fn();
     const { container } = renderSvg(<HiveSvg layout={layout} onSelectFrame={onSelectFrame} />, store);
     const frame = container.querySelector("[data-frame-slot='2']")!;
-    expect(frame).toHaveAttribute("role", "button");
-    expect(frame).toHaveAttribute("tabindex", "-1");
     fireEvent.click(frame);
     expect(onSelectFrame).toHaveBeenCalledWith("b1", 2);
   });
 
+  it("stays a pure image with handlers: no focusable or interactive descendants (axe nested-interactive)", () => {
+    const store = createHiveViewStore();
+    store.openBox("b1");
+    const { container } = renderSvg(
+      <HiveSvg layout={layout} onSelectPart={vi.fn()} onSelectFrame={vi.fn()} />,
+      store,
+    );
+    const image = container.querySelector("[role=img]")!;
+    expect(image).not.toBeNull();
+    expect(image.querySelectorAll("[tabindex], [role=button]")).toHaveLength(0);
+  });
+
   it("uses currentColor based strokes and no hard-coded colours", () => {
     const { container } = renderSvg(<HiveSvg layout={layout} />);
     expect(container.innerHTML).not.toMatch(/#[0-9a-f]{3,6}\b|rgb\(/i);

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useId } from "react";
-import type { KeyboardEvent, ReactNode } from "react";
+import type { ReactNode } from "react";
 import { FRAME_TYPE_LABELS, PART_KIND_LABELS } from "@/lib/hive/labels";
 import type { FrameBox, HiveLayout, PartBox, Vec3 } from "@/lib/hive/layout";
 import type { FrameType } from "@/lib/hive/types";
@@ -107,11 +107,9 @@ const HOVER_COLOR = "data-[hovered=true]:text-holo-edge-strong print:data-[hover
 
 const edge = "fill-none stroke-current [vector-effect:non-scaling-stroke]";
 
-function activate(event: KeyboardEvent, action: () => void): void {
-  if (event.key !== "Enter" && event.key !== " ") return;
-  event.preventDefault();
-  action();
-}
+// The <svg> is one image (role="img"): its shapes take pointer input only and
+// are neither focusable nor buttons (axe nested-interactive). The keyboard and
+// screen-reader path to every part and frame is the outline tree next to it.
 
 export interface HiveSvgProps {
   layout: HiveLayout;
@@ -141,10 +139,7 @@ function PartShape({ part, dashed, name, hovered, onSelect, onHover }: PartShape
   ];
   const interactive = onSelect
     ? {
-        role: "button" as const,
-        tabIndex: -1,
         onClick: () => onSelect(part.id),
-        onKeyDown: (event: KeyboardEvent) => activate(event, () => onSelect(part.id)),
         onPointerEnter: () => onHover(part.id),
         onPointerLeave: () => onHover(null),
       }
@@ -187,10 +182,7 @@ function FrameShape({ frame, width, patternPrefix, hovered, onSelect, onHover }:
   const ref = { boxId: frame.boxId, slot: frame.slot };
   const interactive = onSelect
     ? {
-        role: "button" as const,
-        tabIndex: -1,
         onClick: () => onSelect(frame.boxId, frame.slot),
-        onKeyDown: (event: KeyboardEvent) => activate(event, () => onSelect(frame.boxId, frame.slot)),
         onPointerEnter: () => onHover(ref),
         onPointerLeave: () => onHover(null),
       }

ApiCore-Frontend/src/components/voice/voice-capture-box.spec.tsx

@@ -120,6 +120,13 @@ describe("VoiceCaptureBox", () => {
     expect(details?.querySelector("b")).toBeNull();
   });
 
+  it("a READY note keeps the transcript in the page and says the panel can be opened", () => {
+    renderBox();
+
+    expect(screen.getByText("Königin gesehen, vier Brutwaben.")).toBeInTheDocument();
+    expect(screen.getByText(/zum Lesen öffnen/)).toBeInTheDocument();
+  });
+
   it("lists what could not be assigned without a button", () => {
     renderBox({ unclear: ["Etwas zur Futtermenge, Menge nicht genannt"] });
 

ApiCore-Frontend/src/components/voice/voice-capture-box.tsx

@@ -132,9 +132,12 @@ export function VoiceCaptureBox({
       ) : null}
 
       {capture.transcript ? (
-        <details open={textOnly} className="rounded-lg border border-border bg-card p-3">
+        <details open={textOnly} className="group rounded-lg border border-border bg-card p-3">
           <summary className="flex min-h-11 cursor-pointer items-center text-sm font-medium">
-            Gesagt wurde:
+            <span>Gesagt wurde:</span>
+            <span className="ml-2 font-normal text-muted-foreground group-open:hidden">
+              (zum Lesen öffnen)
+            </span>
           </summary>
           <p className="mt-2 whitespace-pre-wrap break-words text-sm select-text">{capture.transcript}</p>
           <div className="mt-2 flex flex-wrap items-center gap-3">

TASKS.md

@@ -350,9 +350,12 @@ Spec: `docs/superpowers/specs/2026-10-15-beute-3d-design.md`. Teil 1 (Daten) und
 - [ ] T5-Spec um eine Bewegungs-Sprache ergänzen, bevor T5 umgesetzt wird (Spec §12.4)
 - [ ] Teil 4 Sprach-Durchsicht: Anforderungen in `docs/superpowers/specs/2026-10-16-beute-teil4-sprach-durchsicht-anforderungen.md`; Brainstorming + Spec nach L5, baut auf T7 auf
 - [x] T7 L1 Diktat (Spracherkennung im Browser, Einwilligung, Diktat-Knopf, Seite „Sprache & Datenschutz“); Plan `docs/superpowers/plans/2026-10-16-t7-sprache.md`
-- [ ] T7 L1 mit echtem Mikrofon in Chrome prüfen (Inhaber, headless nicht möglich)
-- [ ] T7 L2 Backend: Tasks 4, 5, 6, 7, 10, 12 fertig; 8 (Übernahme in die Durchsicht), 9 (Ereignisse), 11 (Abschreib-Job) in Arbeit
-- [ ] T7 L3–L6 (Whisper-Image, Auswertung mit Claude, Aufnahme im Frontend, e2e); Auswertung mit Claude (Tasks 14–16, 21) wartet auf Spec-Frage 3 (Drittland)
+- [x] T7 L2 Backend (Tasks 4–12): Datenmodell, Schlüssel `voice`, Kern, API, Übernahme in die Durchsicht, Ereignisse, Wiederholregel, Fachwortliste
+- [x] T7 L3 Abschreiben im Cluster (Tasks 11, 13): Job `voice-transcribe`, Whisper-Image (CI gebaut), CronJob-Komponente `voice`, Restrisiko als Annahme 106
+- [x] T7 L5 Frontend (Tasks 17–20, 22): Aufnahme, Warteschlange, Abmelden, `/voice`, `/voice/new`, Sprachnotiz in der Durchsicht, Info-Seite, Systemkarte; Browserprüfung Aufnahme/Liste bestanden
+- [ ] T7 Browserprüfung Durchsicht mit Sprachnotiz und Einstellungen (läuft)
+- [ ] T7 L4 Auswertung mit Claude (Tasks 14–16, 21) wartet auf Spec-Frage 3 (Drittland); Tasks 23 (e2e), 24 (Messung) und 25 (Rollout) danach
+- [ ] T7 mit echtem Mikrofon auf iPhone (Safari) und in Chrome prüfen (Inhaber)
 - [ ] Vor dem nächsten Backend-Rollout: `VOICE_ENCRYPTION_KEY` per `ensure-secrets.sh` anlegen und sichern (#28)
 - [ ] Next.js auf aktuelle Patch-Version heben (npm audit: kritische Lücke nur für Windows-Server, Produktion läuft unter Linux)