feat: server entry and web shell with design tokens

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/server/src/main.ts

@@ -0,0 +1,44 @@
+import type { AppConfig, AuthService, Feature, JobHandler, ServerContext } from "@stc/contracts";
+import { createApp, createJobQueue, loadConfig } from "@stc/core";
+import { createCourseRepository } from "@stc/course-format";
+import { connect, migrate } from "@stc/db";
+import indexHtml from "../../web/index.html";
+
+// Temporary: the learner package replaces this with real sessions.
+const anonymousAuth: AuthService = { userFromRequest: async () => null };
+
+export async function startServer(
+  config: AppConfig,
+  features: Feature[],
+  _webFeatures?: unknown,
+): Promise<{ server: Bun.Server<undefined>; stop(): Promise<void> }> {
+  const db = await connect(config.databaseUrl);
+  await migrate(db);
+  const courses = await createCourseRepository(config.courseDirs);
+  const handlers: Record<string, JobHandler> = {};
+  for (const f of features) Object.assign(handlers, f.jobs);
+  const jobs = createJobQueue(db, handlers);
+  const ctx: ServerContext = { config, db, courses, jobs, auth: anonymousAuth };
+  const app = createApp(ctx, features);
+  jobs.start();
+  const server = Bun.serve({
+    port: config.port,
+    // Bun routes win over fetch; "/api/*" falls through to the composed app (404 for unknown API paths).
+    routes: { ...app.routes, "/api/*": (req) => app.fetch(req), "/*": indexHtml },
+    fetch: (req) => app.fetch(req),
+  });
+  return {
+    server,
+    async stop() {
+      await server.stop(true);
+      await jobs.stop();
+      await db.close();
+    },
+  };
+}
+
+if (import.meta.main) {
+  const config = loadConfig();
+  const { server } = await startServer(config, []);
+  console.log(`STCourses listening on ${server.url}`);
+}

apps/server/test/server.test.ts

@@ -0,0 +1,36 @@
+import { afterAll, beforeAll, expect, test } from "bun:test";
+import { resolve } from "node:path";
+import { loadConfig } from "@stc/core";
+import { startServer } from "../src/main";
+
+let s: Awaited<ReturnType<typeof startServer>>;
+let base: string;
+beforeAll(async () => {
+  const config = loadConfig({
+    STC_PORT: "0", STC_DATABASE_URL: "sqlite://:memory:", STC_SECRET: "t",
+    STC_COURSE_DIRS: resolve(import.meta.dir, "../../../fixtures/courses"),
+  });
+  s = await startServer(config, []);
+  base = s.server.url.toString().replace(/\/$/, "");
+});
+afterAll(() => s.stop());
+
+test("health reports the fixture course", async () => {
+  expect(await (await fetch(`${base}/api/health`)).json()).toEqual({ ok: true, courses: 1, db: "sqlite" });
+});
+
+test("SPA paths return the HTML shell", async () => {
+  const r = await fetch(`${base}/some/spa/path`);
+  expect(r.status).toBe(200);
+  expect(await r.text()).toContain('<div id="root">');
+});
+
+test("unknown API paths are 404, not the SPA", async () => {
+  expect((await fetch(`${base}/api/nope`)).status).toBe(404);
+});
+
+test("media honours Range", async () => {
+  const r = await fetch(`${base}/api/media/sample/media/clip.mp4`, { headers: { Range: "bytes=0-9" } });
+  expect(r.status).toBe(206);
+  expect((await r.arrayBuffer()).byteLength).toBe(10);
+});

apps/web/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>STCourses</title>
+  <link rel="stylesheet" href="../../packages/ui/src/fonts.css">
+  <link rel="stylesheet" href="../../packages/ui/src/tokens.css">
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./src/main.tsx"></script>
+</body>
+</html>

apps/web/src/features.ts

@@ -0,0 +1,4 @@
+import type { WebFeature } from "@stc/contracts";
+
+// Phase 1 packages append one import line each and push into this list.
+export const webFeatures: WebFeature[] = [];

apps/web/src/main.tsx

@@ -0,0 +1,39 @@
+import { createRoot } from "react-dom/client";
+import { lazy, Suspense } from "react";
+import { createBrowserRouter, Link, Outlet, RouterProvider, type RouteObject } from "react-router-dom";
+import { AppShell } from "@stc/ui";
+import { webFeatures } from "./features";
+
+function Home() {
+  return <p className="work">No features installed yet</p>;
+}
+
+function Layout() {
+  const nav = webFeatures.flatMap((f) => f.routes.filter((r) => r.nav?.area === "header"));
+  const header = (
+    <>
+      <Link to="/" style={{ fontWeight: 600, color: "var(--head)", textDecoration: "none" }}>STCourses</Link>
+      <nav style={{ display: "flex", gap: 14 }}>
+        {nav.map((r) => <Link key={r.path} to={r.path}>{r.nav!.label}</Link>)}
+      </nav>
+    </>
+  );
+  return (
+    <AppShell header={header}>
+      <Suspense fallback={null}><Outlet /></Suspense>
+    </AppShell>
+  );
+}
+
+const featureRoutes: RouteObject[] = webFeatures.flatMap((f) =>
+  f.routes.map((r) => {
+    const Element = lazy(r.element);
+    return { path: r.path, element: <Element /> };
+  }),
+);
+
+const router = createBrowserRouter([
+  { element: <Layout />, children: [...featureRoutes, ...(featureRoutes.some((r) => r.path === "/") ? [] : [{ path: "*", element: <Home /> }])] },
+]);
+
+createRoot(document.getElementById("root")!).render(<RouterProvider router={router} />);