Add Motion: the go-to-market operating system on top of the ledger

The ledger answers which contracted capacity is sold, to whom, at what
margin. It says nothing about the motion — the repeatable practice that
turns a customer conversation into a scoped deployment, and turns that
deployment into something the next one reuses.

Motion is deliberately not a parallel entity tree. DEMAND_STAGES already
is the motion, so Motion binds reusable artefacts to the stages of a
demand deal that already exists: an engagement hangs off one deal,
cascade deleted, one per deal by unique constraint.

Nine closed kinds, each declaring which stages it serves, and a starter
library of twelve templates covering all eight open stages.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

apps/web/src/App.tsx

@@ -36,6 +36,14 @@ const Piggy = lazy(() => import('@/pages/Piggy').then(({ Piggy }) => ({ default:
 const Growth = lazy(() => import('@/pages/Growth').then(({ Growth }) => ({ default: Growth })));
 const Calendar = lazy(() => import('@/pages/Calendar').then(({ Calendar }) => ({ default: Calendar })));
 const Learn = lazy(() => import('@/pages/Learn').then(({ Learn }) => ({ default: Learn })));
+// Lazy is load-bearing for these five and not merely conventional: they are the
+// only pages that pull react-markdown and remark-gfm, and an eager import would
+// put a markdown parser into the entry chunk every route pays for.
+const Motion = lazy(() => import('@/pages/Motion').then(({ Motion }) => ({ default: Motion })));
+const MotionLibrary = lazy(() => import('@/pages/MotionLibrary').then(({ MotionLibrary }) => ({ default: MotionLibrary })));
+const MotionTemplate = lazy(() => import('@/pages/MotionTemplate').then(({ MotionTemplate }) => ({ default: MotionTemplate })));
+const MotionEngagements = lazy(() => import('@/pages/MotionEngagements').then(({ MotionEngagements }) => ({ default: MotionEngagements })));
+const Engagement = lazy(() => import('@/pages/Engagement').then(({ Engagement }) => ({ default: Engagement })));
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -248,6 +256,16 @@ function AppRoutes() {
           the next four record routes will read.
         */}
         <Route path="accounts/:id" element={<RoutePage><Account /></RoutePage>} />
+        {/*
+          Flat, in the register of the routes above — nesting these under a
+          layout route would give Motion a chrome no other group has, and the
+          five pages share no shell of their own.
+        */}
+        <Route path="motion" element={<RoutePage><Motion /></RoutePage>} />
+        <Route path="motion/library" element={<RoutePage><MotionLibrary /></RoutePage>} />
+        <Route path="motion/library/:id" element={<RoutePage><MotionTemplate /></RoutePage>} />
+        <Route path="motion/engagements" element={<RoutePage><MotionEngagements /></RoutePage>} />
+        <Route path="motion/engagements/:id" element={<RoutePage><Engagement /></RoutePage>} />
         <Route path="contracts" element={<RoutePage><Contracts /></RoutePage>} />
         <Route path="imports" element={<RoutePage><Imports /></RoutePage>} />
         <Route path="piggy" element={<RoutePage><Piggy /></RoutePage>} />