feat(leitstand): Fluss tab at /leitstand/fluss (COMP-3-3)

src/i18n/de.ts

@@ -82,6 +82,7 @@ export const de = {
   "leitstand.tab.classic": "Klassisch",
   "leitstand.tab.tools": "Werkzeuge",
   "leitstand.tab.betrieb": "Betrieb",
+  "leitstand.tab.fluss": "Fluss",
   "leitstand.profilesFailed": "Agenten konnten nicht geladen werden",
   "leitstand.profilesHint": "Die Karten zeigen vorerst die Profil-Kennung.",
   "leitstand.agents": "Agenten",

src/screens/leitstand/LeitstandRoute.test.tsx

@@ -8,6 +8,7 @@ vi.mock("@tauri-apps/api/event", () => ({ listen: vi.fn(() => Promise.resolve(()
 vi.mock("../../components/TerminalView", () => ({ default: () => null }));
 
 import App from "../../App";
+import { de } from "../../i18n/de";
 import { writeActiveProjectId } from "../../lib/activeProject";
 import LeitstandRoute from "./LeitstandRoute";
 
@@ -135,6 +136,49 @@ describe("Leitstand route behind D1", () => {
     expect(screen.queryByRole("region", { name: "Warteschlange" })).toBeNull();
   });
 
+  it("renders the flow graph at /leitstand/fluss and marks its tab as the current one", async () => {
+    localStorage.setItem(FLAG_KEY, "1");
+    window.location.hash = "#/leitstand/fluss";
+    const { container } = render(<App />);
+    const flow = await screen.findByRole("region", { name: "Ablauf der Agenten" });
+    expect(await within(flow).findByRole("group", { name: "Fix the start block" })).toBeInTheDocument();
+    expect(tabs().getByRole("link", { name: "Fluss" })).toHaveAttribute("aria-current", "page");
+    expect(tabs().getByRole("link", { name: "Haupt" })).not.toHaveAttribute("aria-current");
+    expect(screen.queryByRole("region", { name: "Agenten" })).toBeNull();
+    expect(container.querySelector(".g-mount-legacy")).toHaveAttribute("hidden");
+  });
+
+  it("shows the empty hint at /leitstand/fluss while no agent runs", async () => {
+    localStorage.setItem(FLAG_KEY, "1");
+    window.location.hash = "#/leitstand/fluss";
+    const base = mocks.invoke.getMockImplementation()!;
+    mocks.invoke.mockImplementation((command: string) =>
+      command === "get_board_state" ? Promise.resolve({ cards: [], coordinators: [] }) : base(command));
+    const { container } = render(<App />);
+    expect(await screen.findByText("Noch keine Agenten im Ablauf")).toBeInTheDocument();
+    expect(container.querySelector(".fl-node")).toBeNull();
+  });
+
+  it("does not claim an empty flow when the board cannot be read at /leitstand/fluss", async () => {
+    localStorage.setItem(FLAG_KEY, "1");
+    window.location.hash = "#/leitstand/fluss";
+    const base = mocks.invoke.getMockImplementation()!;
+    mocks.invoke.mockImplementation((command: string) =>
+      command === "get_board_state" ? Promise.reject(new Error("backend down")) : base(command));
+    render(<App />);
+    expect(await screen.findByText(de["honest.offline"])).toBeInTheDocument();
+    expect(screen.queryByText("Noch keine Agenten im Ablauf")).toBeNull();
+  });
+
+  it("reaches Fluss from Haupt by its tab link", async () => {
+    localStorage.setItem(FLAG_KEY, "1");
+    render(<App />);
+    await screen.findByRole("region", { name: "Agenten" });
+    fireEvent.click(tabs().getByRole("link", { name: "Fluss" }));
+    await waitFor(() => expect(window.location.hash).toBe("#/leitstand/fluss"));
+    expect(await screen.findByRole("region", { name: "Ablauf der Agenten" })).toBeInTheDocument();
+  });
+
   it("offers no Betrieb route while the switch is off", async () => {
     window.location.hash = "#/leitstand/betrieb";
     const { container } = render(<App />);

src/screens/leitstand/LeitstandRoute.tsx

@@ -9,28 +9,32 @@ import { useT } from "../../i18n/useT";
 import type { AgentProfile } from "../../types";
 import { LeitstandCards } from "./LeitstandCards";
 import { BetriebPanel } from "./betrieb/BetriebPanel";
+import { FlowGraph } from "./flow/FlowGraph";
+import { layoutFlow } from "./flow/layout";
 import { NeedsYou } from "./needs/NeedsYou";
 import { TOOLS_PATH, trim } from "../../shell/mount/routing";
 
 export const MAIN_PATH = "/leitstand";
 export const CLASSIC_PATH = "/leitstand/klassisch";
 export const BETRIEB_PATH = "/leitstand/betrieb";
+export const FLUSS_PATH = "/leitstand/fluss";
 
 /** Relative ages ("seit 4 min") move on minute scale. */
 const TICK_MS = 30_000;
 
-/** The classic view and its persistent tools stay reachable beside Haupt and Betrieb. */
+/** The classic view and its persistent tools stay reachable beside Haupt, Fluss and Betrieb. */
 export function LeitstandTabs({ path }: { path: string }) {
   const t = useT();
   const tab = (target: string, label: string) => (
     <a href={`#${target}`} aria-current={target === trim(path) ? "page" : undefined}>{label}</a>
   );
-  return <nav className="g-shell-tabs" aria-label={t("leitstand.tabs")}>{tab(MAIN_PATH, t("tab.main"))}{tab(BETRIEB_PATH, t("leitstand.tab.betrieb"))}{tab(CLASSIC_PATH, t("leitstand.tab.classic"))}{tab(TOOLS_PATH, t("leitstand.tab.tools"))}</nav>;
+  return <nav className="g-shell-tabs" aria-label={t("leitstand.tabs")}>{tab(MAIN_PATH, t("tab.main"))}{tab(FLUSS_PATH, t("leitstand.tab.fluss"))}{tab(BETRIEB_PATH, t("leitstand.tab.betrieb"))}{tab(CLASSIC_PATH, t("leitstand.tab.classic"))}{tab(TOOLS_PATH, t("leitstand.tab.tools"))}</nav>;
 }
 
-/** The new Leitstand (V2-S01a): agent cards with filter chips and "Braucht dich" on Haupt, the read-only Betrieb panel beside it. */
+/** The new Leitstand (V2-S01a): agent cards with filter chips and "Braucht dich" on Haupt, the flow graph on Fluss, the read-only Betrieb panel beside it. */
 export default function LeitstandRoute({ path = MAIN_PATH }: { path?: string }) {
   const betrieb = path === BETRIEB_PATH;
+  const fluss = path === FLUSS_PATH;
   const t = useT();
   const [projectId, setProjectId] = useState(readActiveProjectId);
   // The picker and the old app publish a choice through the module's event.
@@ -39,7 +43,7 @@ export default function LeitstandRoute({ path = MAIN_PATH }: { path?: string })
     return subscribeActiveProject(setProjectId);
   }, []);
   const board = useBoard(projectId, !betrieb);
-  const questions = useQuestions(projectId, !betrieb);
+  const questions = useQuestions(projectId, !betrieb && !fluss);
   const [profiles, setProfiles] = useState<AgentProfile[]>([]);
   const [profilesFailed, setProfilesFailed] = useState(false);
   const [now, setNow] = useState(() => Date.now() / 1000);
@@ -66,6 +70,20 @@ export default function LeitstandRoute({ path = MAIN_PATH }: { path?: string })
     );
   }
 
+  if (fluss) {
+    const workers = board.cards.map((card) => card.worker);
+    const labels = Object.fromEntries(workers.map((w) => [w.id, { task: w.task, branch: w.branch }]));
+    return (
+      <div className="g-lr">
+        <div className="g-lr-head"><h1>{t("nav.leitstand")}</h1><LeitstandTabs path={FLUSS_PATH} /></div>
+        {/* An unread or unreadable board must not claim "no agents". */}
+        {board.loading ? null : board.error !== null && workers.length === 0
+          ? <div role="status"><HonestState kind="offline" /></div>
+          : <FlowGraph layout={layoutFlow(workers)} labels={labels} />}
+      </div>
+    );
+  }
+
   return (
     <div className="g-lr">
       <div className="g-lr-head"><h1>{t("nav.leitstand")}</h1><LeitstandTabs path={MAIN_PATH} /></div>

src/shell/mount/routing.ts

@@ -20,8 +20,8 @@ export const isTools = (path: string) => trim(path) === TOOLS_PATH;
 
 export const isTerminal = (path: string) => trim(path.split("?")[0]) === "/leitstand/terminal";
 
-/** The new Leitstand owns `/leitstand` (V2-S01a) and `/leitstand/betrieb` (V2-S01b); the rest below it stays the old view. */
-export const isNewLeitstand = (path: string) => ["/leitstand", "/leitstand/betrieb"].includes(trim(path));
+/** The new Leitstand owns `/leitstand` (V2-S01a), `/leitstand/betrieb` (V2-S01b) and `/leitstand/fluss` (COMP-3-3); the rest below it stays the old view. */
+export const isNewLeitstand = (path: string) => ["/leitstand", "/leitstand/betrieb", "/leitstand/fluss"].includes(trim(path));
 
 /** The new Steuerung (V2-S05a) owns `/steuerung` and its tabs: Kontingente plus two honest placeholders. */
 export const isNewSteuerung = (path: string) => base(trim(path)) === "/steuerung";