src/features/online-board/components/OnlineBoardSearchPage.tsx

@@ -19,7 +19,7 @@ import { FlightList } from "@/ui/flights/FlightList.js";
 import { useOnlineBoard } from "../hooks/useOnlineBoard.js";
 import { useLiveBoardSearch } from "../hooks/useLiveBoardSearch.js";
 import { useCalendarDays } from "../hooks/useCalendarDays.js";
-import { buildOnlineBoardUrl, buildFlightUrlParams } from "../url.js";
+import { buildOnlineBoardUrl } from "../url.js";
 import type { OnlineBoardParams } from "../url.js";
 import type { SearchFlightsParams, CalendarParams } from "../api.js";
 import type { FlightRequestType, ISimpleFlight } from "../types.js";
@@ -151,13 +151,21 @@ export const OnlineBoardSearchPage: FC<OnlineBoardSearchPageProps> = ({
   // Navigation: click a flight to go to details
   const handleFlightClick = useCallback(
     (flight: ISimpleFlight) => {
-      const detailsUrl = buildOnlineBoardUrl({
-        type: "details",
-        carrier: flight.flightId.carrier,
-        flightNumber: flight.flightId.flightNumber,
-        suffix: flight.flightId.suffix || undefined,
-        date: flight.flightId.date,
-      });
+      const detailsParams: OnlineBoardParams = flight.flightId.suffix
+        ? {
+            type: "details",
+            carrier: flight.flightId.carrier,
+            flightNumber: flight.flightId.flightNumber,
+            suffix: flight.flightId.suffix,
+            date: flight.flightId.date,
+          }
+        : {
+            type: "details",
+            carrier: flight.flightId.carrier,
+            flightNumber: flight.flightId.flightNumber,
+            date: flight.flightId.date,
+          };
+      const detailsUrl = buildOnlineBoardUrl(detailsParams);
       void navigate(`/${lang}/${detailsUrl}`);
     },
     [navigate, lang],

src/features/online-board/index.ts

@@ -35,3 +35,10 @@ export { useLiveBoardSearch } from "./hooks/useLiveBoardSearch.js";
 export type { UseLiveBoardSearchResult } from "./hooks/useLiveBoardSearch.js";
 export { useLiveFlightDetails } from "./hooks/useLiveFlightDetails.js";
 export type { UseLiveFlightDetailsResult } from "./hooks/useLiveFlightDetails.js";
+
+// 2E — Feature-specific page components
+export { OnlineBoardStartPage } from "./components/OnlineBoardStartPage.js";
+export { OnlineBoardSearchPage } from "./components/OnlineBoardSearchPage.js";
+export type { OnlineBoardSearchPageProps } from "./components/OnlineBoardSearchPage.js";
+export { OnlineBoardDetailsPage } from "./components/OnlineBoardDetailsPage.js";
+export type { OnlineBoardDetailsPageProps } from "./components/OnlineBoardDetailsPage.js";

src/mf/expose/OnlineBoard.tsx

@@ -1,11 +1,20 @@
-import type { HostContract } from "@/host-contract";
-
 /**
  * MF expose wrapper for the Online Board feature.
- * Phase 2 (online-board port) replaces the body with:
- *   `return <OnlineBoardRoot hostContract={hostContract} />;`
- * where `OnlineBoardRoot` comes from `@/features/online-board`.
+ *
+ * Lazy-loads the OnlineBoardStartPage via React.lazy + Suspense.
+ * Full MF integration with host routing is deferred to a later phase;
+ * for now this renders the start page for embedded usage.
  */
+
+import { lazy, Suspense } from "react";
+import type { HostContract } from "@/host-contract";
+
+const OnlineBoardStartPage = lazy(() =>
+  import("@/features/online-board/components/OnlineBoardStartPage.js").then(
+    (m) => ({ default: m.OnlineBoardStartPage }),
+  ),
+);
+
 export interface OnlineBoardRemoteProps {
   hostContract: HostContract;
 }
@@ -13,7 +22,9 @@ export interface OnlineBoardRemoteProps {
 export default function OnlineBoardRemote(_props: OnlineBoardRemoteProps): JSX.Element {
   return (
     <div data-mf-expose="OnlineBoard">
-      <p>Online Board remote — stub. Populated in Phase 2.</p>
+      <Suspense fallback={<div aria-busy="true">Loading Online Board...</div>}>
+        <OnlineBoardStartPage />
+      </Suspense>
     </div>
   );
 }

src/routes/[lang]/onlineboard/flight/[params]/page.tsx

@@ -29,17 +29,24 @@ export default function FlightSearchPage(): JSX.Element {
     );
   }
 
+  const searchParams = parsed.suffix
+    ? {
+        type: "flight" as const,
+        carrier: parsed.carrier,
+        flightNumber: parsed.flightNumber,
+        suffix: parsed.suffix,
+        date: parsed.date,
+      }
+    : {
+        type: "flight" as const,
+        carrier: parsed.carrier,
+        flightNumber: parsed.flightNumber,
+        date: parsed.date,
+      };
+
   return (
     <Suspense fallback={<FlightListSkeleton />}>
-      <OnlineBoardSearchPage
-        params={{
-          type: "flight",
-          carrier: parsed.carrier,
-          flightNumber: parsed.flightNumber,
-          suffix: parsed.suffix,
-          date: parsed.date,
-        }}
-      />
+      <OnlineBoardSearchPage params={searchParams} />
     </Suspense>
   );
 }