feat: Sprint 5 — AI insights, webhooks/Slack, PWA, performance monitoring

AI-Powered Insights (G9):
- Rule-based anomaly detection: budget burn rate, staffing gaps, utilization,
  timeline overruns across all active projects
- AI narrative generation via existing Azure OpenAI integration
- Cached in project dynamicFields to avoid regeneration
- New /analytics/insights page with anomaly feed + project summaries
- Sidebar nav: "AI Insights" under Analytics

Webhook System + Slack (G10):
- Webhook model in Prisma (url, secret, events, isActive)
- HMAC-SHA256 signed payloads with 5s timeout fire-and-forget dispatch
- Slack-aware: routes hooks.slack.com URLs through Slack formatter
- 6 events integrated: allocation.created/updated/deleted, project.created/
  status_changed, vacation.approved
- Admin UI: /admin/webhooks with CRUD, test button, event checkboxes
- webhook router: list, getById, create, update, delete, test

PWA Support (G11):
- manifest.json with standalone display, brand-colored icons (192+512px)
- Service worker: cache-first for static, network-first for API, offline fallback
- ServiceWorkerRegistration component with 60-min update checks
- InstallPrompt banner with 30-day dismissal memory
- Apple Web App meta tags + viewport theme color

Performance Monitoring (A15):
- Pino structured logging (JSON prod, pretty dev) via LOG_LEVEL env
- tRPC logging middleware on all protectedProcedure calls
- Request ID (UUID) per call for log correlation
- Slow query warnings (>500ms) at warn level
- GET /api/perf endpoint: memory, uptime, SSE connections, node version

Fix: renamed scenario.apply to scenario.applyScenario (tRPC reserved word)

Co-Authored-By: claude-flow <ruv@ruv.net>

apps/web/src/app/(app)/admin/webhooks/page.tsx

@@ -0,0 +1,5 @@
+import { WebhooksClient } from "~/components/admin/WebhooksClient.js";
+
+export default function AdminWebhooksPage() {
+  return <WebhooksClient />;
+}

apps/web/src/app/(app)/analytics/insights/page.tsx

@@ -0,0 +1,17 @@
+import { InsightsPanel } from "~/components/analytics/InsightsPanel.js";
+
+export default function InsightsPage() {
+  return (
+    <div className="mx-auto max-w-5xl space-y-6 p-6">
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-50">
+          AI Insights
+        </h1>
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+          Anomaly detection and AI-generated project narratives
+        </p>
+      </div>
+      <InsightsPanel />
+    </div>
+  );
+}

apps/web/src/app/api/perf/route.ts

@@ -0,0 +1,67 @@
+import { NextResponse } from "next/server";
+import { eventBus } from "@planarchy/api/sse";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+/**
+ * GET /api/perf — Runtime performance metrics.
+ *
+ * Protected by CRON_SECRET header or query param.
+ * Returns Node.js memory usage, process uptime, and SSE connection count.
+ */
+export function GET(request: Request) {
+  const cronSecret = process.env["CRON_SECRET"];
+
+  if (cronSecret) {
+    const url = new URL(request.url);
+    const headerToken = request.headers.get("authorization")?.replace("Bearer ", "");
+    const queryToken = url.searchParams.get("token");
+
+    if (headerToken !== cronSecret && queryToken !== cronSecret) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+  }
+
+  const mem = process.memoryUsage();
+
+  return NextResponse.json({
+    timestamp: new Date().toISOString(),
+    uptime: {
+      seconds: Math.round(process.uptime()),
+      formatted: formatUptime(process.uptime()),
+    },
+    memory: {
+      heapUsedMB: round(mem.heapUsed / 1024 / 1024),
+      heapTotalMB: round(mem.heapTotal / 1024 / 1024),
+      rssMB: round(mem.rss / 1024 / 1024),
+      externalMB: round(mem.external / 1024 / 1024),
+      arrayBuffersMB: round(mem.arrayBuffers / 1024 / 1024),
+    },
+    sse: {
+      activeConnections: eventBus.subscriberCount,
+    },
+    node: {
+      version: process.version,
+      platform: process.platform,
+      arch: process.arch,
+    },
+  });
+}
+
+function round(n: number): number {
+  return Math.round(n * 100) / 100;
+}
+
+function formatUptime(seconds: number): string {
+  const d = Math.floor(seconds / 86400);
+  const h = Math.floor((seconds % 86400) / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  const parts: string[] = [];
+  if (d > 0) parts.push(`${d}d`);
+  if (h > 0) parts.push(`${h}h`);
+  if (m > 0) parts.push(`${m}m`);
+  parts.push(`${s}s`);
+  return parts.join(" ");
+}

apps/web/src/app/layout.tsx

@@ -1,6 +1,8 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Manrope, Source_Sans_3 } from "next/font/google";
 import { TRPCProvider } from "~/lib/trpc/provider.js";
+import { ServiceWorkerRegistration } from "~/components/layout/ServiceWorkerRegistration.js";
+import { InstallPrompt } from "~/components/layout/InstallPrompt.js";
 import "./globals.css";
 
 const uiFont = Source_Sans_3({
@@ -19,6 +21,12 @@ export const metadata: Metadata = {
   metadataBase: new URL("https://planarchy.hartmut-noerenberg.com"),
   title: "plANARCHY — Resource Planning",
   description: "Interactive resource planning and project staffing tool",
+  manifest: "/manifest.json",
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "default",
+    title: "Planarchy",
+  },
   openGraph: {
     title: "plANARCHY — Resource Planning",
     description: "Estimates, staffing, chargeability, and timelines in one workspace.",
@@ -33,6 +41,10 @@ export const metadata: Metadata = {
   },
 };
 
+export const viewport: Viewport = {
+  themeColor: "#0284c7",
+};
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
@@ -47,6 +59,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       </head>
       <body className={`${uiFont.variable} ${displayFont.variable} min-h-screen bg-gray-50 font-sans antialiased`}>
         <TRPCProvider>{children}</TRPCProvider>
+        <ServiceWorkerRegistration />
+        <InstallPrompt />
       </body>
     </html>
   );