first commit

apps/web/app/(app)/browse/page.tsx

@@ -0,0 +1,14 @@
+import { Placeholder } from "@/components/Placeholder";
+import { Hash } from "lucide-react";
+
+export default function BrowsePage() {
+  return (
+    <Placeholder
+      eyebrow="Messaging"
+      title="Browse channels"
+      subtitle="Discover and join channels"
+      icon={<Hash size={26} />}
+      body="A channel directory with search, categories and one-click join. Gated by the `channelBrowser` feature flag."
+    />
+  );
+}

apps/web/app/(app)/c/[id]/page.tsx

@@ -0,0 +1,6 @@
+import { ChannelView } from "@/components/message/ChannelView";
+
+export default async function ChannelPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return <ChannelView channelId={id} />;
+}

apps/web/app/(app)/dms/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function DmsPage() {
+  redirect("/c/d_liam");
+}

apps/web/app/(app)/drafts/page.tsx

@@ -0,0 +1,14 @@
+import { Placeholder } from "@/components/Placeholder";
+import { Send } from "lucide-react";
+
+export default function DraftsPage() {
+  return (
+    <Placeholder
+      eyebrow="Messaging"
+      title="Drafts & sent"
+      subtitle="Unsent drafts and scheduled messages"
+      icon={<Send size={24} />}
+      body="Scheduled sends from the composer land here until they're delivered. Gated by the `drafts` and `scheduledSend` feature flags."
+    />
+  );
+}

apps/web/app/(app)/inbox/page.tsx

@@ -0,0 +1,5 @@
+import { InboxView } from "@/components/inbox/InboxView";
+
+export default function InboxPage() {
+  return <InboxView />;
+}

apps/web/app/(app)/layout.tsx

@@ -0,0 +1,5 @@
+import { AppShell } from "@/components/AppShell";
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return <AppShell>{children}</AppShell>;
+}

apps/web/app/(app)/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useChannels, useSdk } from "@lynkd/messaging-inbox-sdk";
+
+/** Land on the first available channel (works for both mock + live IIOS ids). */
+export default function HomePage() {
+  const router = useRouter();
+  const { loading } = useSdk();
+  const { starred, channels, dms } = useChannels();
+
+  useEffect(() => {
+    if (loading) return;
+    const first = starred[0] ?? channels[0] ?? dms[0];
+    if (first) router.replace(`/c/${first.id}`);
+  }, [loading, starred, channels, dms, router]);
+
+  return (
+    <div className="flex flex-1 items-center justify-center text-muted">
+      <div className="flex flex-col items-center gap-3">
+        <div className="brand-mark h-10 w-10 animate-pulse rounded-card" />
+        <span className="text-[13px]">Opening your workspace…</span>
+      </div>
+    </div>
+  );
+}

apps/web/app/(app)/saved/page.tsx

@@ -0,0 +1,5 @@
+import { SavedView } from "@/components/saved/SavedView";
+
+export default function SavedPage() {
+  return <SavedView />;
+}

apps/web/app/(app)/support/[id]/page.tsx

@@ -0,0 +1,6 @@
+import { SupportView } from "@/components/support/SupportView";
+
+export default async function SupportTicketPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return <SupportView initialTicketId={id} />;
+}

apps/web/app/(app)/support/page.tsx

@@ -0,0 +1,5 @@
+import { SupportView } from "@/components/support/SupportView";
+
+export default function SupportPage() {
+  return <SupportView />;
+}

apps/web/app/(app)/threads/page.tsx

@@ -0,0 +1,5 @@
+import { ThreadsView } from "@/components/threads/ThreadsView";
+
+export default function ThreadsPage() {
+  return <ThreadsView />;
+}

apps/web/app/api/bff/ai/route.ts

@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from "next/server";
+import { geminiGenerate } from "@/lib/gemini";
+
+export const dynamic = "force-dynamic";
+
+/**
+ * AI assistant. The UI sends a user prompt plus optional message context
+ * (e.g. a copied message to summarize / draft a reply to). The Gemini key
+ * never leaves the server.
+ */
+export async function POST(req: NextRequest) {
+  const body = await req.json().catch(() => ({}));
+  const prompt: string = (body.prompt ?? "").toString().trim();
+  const context: string | undefined = body.context ? String(body.context) : undefined;
+
+  if (!prompt && !context) {
+    return NextResponse.json({ ok: false, error: "Nothing to ask." }, { status: 400 });
+  }
+
+  const parts: string[] = [];
+  if (context) parts.push(`Here is a chat message for context:\n"""\n${context}\n"""`);
+  parts.push(prompt || "Summarize the message above.");
+
+  const result = await geminiGenerate(parts.join("\n\n"), {
+    system:
+      "You are a concise, helpful assistant embedded in a team-messaging app. " +
+      "Answer directly in a professional but friendly tone. When drafting a reply, write it in first person, ready to send. Keep responses tight.",
+    temperature: 0.5,
+  });
+
+  if (!result.ok) {
+    return NextResponse.json({ ok: false, error: result.error, retryable: result.retryable }, { status: result.status || 502 });
+  }
+  return NextResponse.json({ ok: true, text: result.text });
+}

apps/web/app/api/bff/bootstrap/route.ts

@@ -0,0 +1,9 @@
+import { NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+// GET /api/bff/bootstrap — the initial client payload (me, workspace, users, channels).
+export async function GET() {
+  return NextResponse.json(await getBackend().bootstrap());
+}

apps/web/app/api/bff/channels/[id]/members/route.ts

@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+type Params = { params: Promise<{ id: string }> };
+
+export async function POST(req: NextRequest, { params }: Params) {
+  const { id } = await params;
+  const body = await req.json().catch(() => ({}));
+  const channel = await getBackend().addMember(id, String(body.userId ?? ""));
+  if (!channel) return NextResponse.json({ error: "not found" }, { status: 404 });
+  return NextResponse.json({ channel });
+}
+
+export async function DELETE(req: NextRequest, { params }: Params) {
+  const { id } = await params;
+  const body = await req.json().catch(() => ({}));
+  const channel = await getBackend().removeMember(id, String(body.userId ?? ""));
+  if (!channel) return NextResponse.json({ error: "not found" }, { status: 404 });
+  return NextResponse.json({ channel });
+}

apps/web/app/api/bff/channels/[id]/messages/[messageId]/pin/route.ts

@@ -0,0 +1,14 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(
+  _req: NextRequest,
+  { params }: { params: Promise<{ id: string; messageId: string }> },
+) {
+  const { id, messageId } = await params;
+  const message = await getBackend().pin(id, messageId);
+  if (!message) return NextResponse.json({ error: "not found" }, { status: 404 });
+  return NextResponse.json({ message });
+}

apps/web/app/api/bff/channels/[id]/messages/[messageId]/reactions/route.ts

@@ -0,0 +1,15 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string; messageId: string }> },
+) {
+  const { id, messageId } = await params;
+  const body = await req.json().catch(() => ({}));
+  const message = await getBackend().react(id, messageId, String(body.emoji ?? "👍"));
+  if (!message) return NextResponse.json({ error: "not found" }, { status: 404 });
+  return NextResponse.json({ message });
+}

apps/web/app/api/bff/channels/[id]/messages/[messageId]/route.ts

@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+type Params = { params: Promise<{ id: string; messageId: string }> };
+
+export async function PATCH(req: NextRequest, { params }: Params) {
+  const { id, messageId } = await params;
+  const body = await req.json().catch(() => ({}));
+  const message = await getBackend().editMessage(id, messageId, String(body.body ?? ""));
+  if (!message) return NextResponse.json({ error: "not found" }, { status: 404 });
+  return NextResponse.json({ message });
+}
+
+export async function DELETE(_req: NextRequest, { params }: Params) {
+  const { id, messageId } = await params;
+  const r = await getBackend().deleteMessage(id, messageId);
+  return NextResponse.json(r);
+}

apps/web/app/api/bff/channels/[id]/messages/[messageId]/save/route.ts

@@ -0,0 +1,14 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(
+  _req: NextRequest,
+  { params }: { params: Promise<{ id: string; messageId: string }> },
+) {
+  const { id, messageId } = await params;
+  const message = await getBackend().save(id, messageId);
+  if (!message) return NextResponse.json({ error: "not found" }, { status: 404 });
+  return NextResponse.json({ message });
+}

apps/web/app/api/bff/channels/[id]/messages/route.ts

@@ -0,0 +1,23 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+type Params = { params: Promise<{ id: string }> };
+
+export async function GET(_req: NextRequest, { params }: Params) {
+  const { id } = await params;
+  return NextResponse.json({ messages: await getBackend().channelMessages(id) });
+}
+
+export async function POST(req: NextRequest, { params }: Params) {
+  const { id } = await params;
+  const body = await req.json().catch(() => ({}));
+  const message = await getBackend().send(id, String(body.body ?? ""), {
+    parentId: body.parentId,
+    scheduledFor: body.scheduledFor,
+    attachments: body.attachments,
+    threadRootId: body.threadRootId,
+  });
+  return NextResponse.json({ message }, { status: 201 });
+}

apps/web/app/api/bff/channels/[id]/read/route.ts

@@ -0,0 +1,10 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(_req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const channel = await getBackend().markRead(id);
+  return NextResponse.json({ channel });
+}

apps/web/app/api/bff/channels/[id]/threads/[parentId]/route.ts

@@ -0,0 +1,12 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ id: string; parentId: string }> },
+) {
+  const { id, parentId } = await params;
+  return NextResponse.json(await getBackend().thread(id, parentId));
+}

apps/web/app/api/bff/channels/route.ts

@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  return NextResponse.json({ channels: await getBackend().listChannels() });
+}
+
+// POST /api/bff/channels — create a channel or DM
+export async function POST(req: NextRequest) {
+  const body = await req.json().catch(() => ({}));
+  const channel = await getBackend().createChannel({
+    name: String(body.name ?? "new-channel"),
+    kind: body.kind,
+    topic: body.topic,
+    memberIds: body.memberIds,
+  });
+  return NextResponse.json({ channel }, { status: 201 });
+}

apps/web/app/api/bff/inbox/[id]/route.ts

@@ -0,0 +1,16 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+import type { InboxState } from "@lynkd/messaging-inbox-sdk";
+
+export const dynamic = "force-dynamic";
+
+export async function PATCH(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+  const body = await req.json().catch(() => ({}));
+  const item = await getBackend().patchInbox(id, (body.state as InboxState) ?? "DONE");
+  if (!item) return NextResponse.json({ error: "not found" }, { status: 404 });
+  return NextResponse.json({ item });
+}

apps/web/app/api/bff/inbox/route.ts

@@ -0,0 +1,10 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+import type { InboxState } from "@lynkd/messaging-inbox-sdk";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(req: NextRequest) {
+  const state = (req.nextUrl.searchParams.get("state") as InboxState | null) ?? undefined;
+  return NextResponse.json({ items: await getBackend().listInbox(state) });
+}

apps/web/app/api/bff/me/profile/route.ts

@@ -0,0 +1,16 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+export async function PATCH(req: NextRequest) {
+  const body = await req.json().catch(() => ({}));
+  const user = await getBackend().updateMe({
+    name: body.name,
+    title: body.title,
+    avatarColor: body.avatarColor,
+    avatarUrl: body.avatarUrl,
+    presence: body.presence,
+  });
+  return NextResponse.json({ user });
+}

apps/web/app/api/bff/me/status/route.ts

@@ -0,0 +1,14 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+export async function PATCH(req: NextRequest) {
+  const body = await req.json().catch(() => ({}));
+  const user = await getBackend().setStatus(
+    body.statusText ?? undefined,
+    body.statusEmoji ?? undefined,
+    body.clearAt ?? undefined,
+  );
+  return NextResponse.json({ user });
+}

apps/web/app/api/bff/notifications/route.ts

@@ -0,0 +1,8 @@
+import { NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  return NextResponse.json({ notifications: await getBackend().notifications() });
+}

apps/web/app/api/bff/saved/route.ts

@@ -0,0 +1,8 @@
+import { NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  return NextResponse.json({ messages: await getBackend().savedMessages() });
+}

apps/web/app/api/bff/search/route.ts

@@ -0,0 +1,9 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(req: NextRequest) {
+  const q = req.nextUrl.searchParams.get("q") ?? "";
+  return NextResponse.json({ results: await getBackend().search(q) });
+}

apps/web/app/api/bff/support/availability/route.ts

@@ -0,0 +1,8 @@
+import { NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  return NextResponse.json({ agents: await getBackend().availability() });
+}

apps/web/app/api/bff/support/tickets/[id]/reply/route.ts

@@ -0,0 +1,15 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+  const body = await req.json().catch(() => ({}));
+  const ticket = await getBackend().replyTicket(id, String(body.body ?? ""));
+  if (!ticket) return NextResponse.json({ error: "not found" }, { status: 404 });
+  return NextResponse.json({ ticket });
+}

apps/web/app/api/bff/support/tickets/[id]/route.ts

@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+import type { TicketState } from "@lynkd/messaging-inbox-sdk";
+
+export const dynamic = "force-dynamic";
+
+type Params = { params: Promise<{ id: string }> };
+
+export async function GET(_req: NextRequest, { params }: Params) {
+  const { id } = await params;
+  const ticket = await getBackend().getTicket(id);
+  if (!ticket) return NextResponse.json({ error: "not found" }, { status: 404 });
+  return NextResponse.json({ ticket });
+}
+
+export async function PATCH(req: NextRequest, { params }: Params) {
+  const { id } = await params;
+  const body = await req.json().catch(() => ({}));
+  const ticket = await getBackend().patchTicket(id, (body.state as TicketState) ?? "OPEN");
+  if (!ticket) return NextResponse.json({ error: "not found" }, { status: 404 });
+  return NextResponse.json({ ticket });
+}

apps/web/app/api/bff/support/tickets/route.ts

@@ -0,0 +1,9 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(req: NextRequest) {
+  const scope = req.nextUrl.searchParams.get("scope") ?? undefined;
+  return NextResponse.json({ tickets: await getBackend().listTickets(scope ?? undefined) });
+}

apps/web/app/api/bff/threads/route.ts

@@ -0,0 +1,8 @@
+import { NextResponse } from "next/server";
+import { getBackend } from "@/lib/backend";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  return NextResponse.json({ messages: await getBackend().threadParents() });
+}

apps/web/app/api/bff/translate/route.ts

@@ -0,0 +1,31 @@
+import { NextRequest, NextResponse } from "next/server";
+import { geminiGenerate } from "@/lib/gemini";
+
+export const dynamic = "force-dynamic";
+
+/**
+ * Translate arbitrary text to a target language. Used for per-message
+ * translation and composer "translate before send". Server-side Gemini only.
+ */
+export async function POST(req: NextRequest) {
+  const body = await req.json().catch(() => ({}));
+  const text: string = (body.text ?? "").toString();
+  const targetLang: string = (body.targetLang ?? "").toString().trim();
+
+  if (!text.trim()) return NextResponse.json({ ok: false, error: "Nothing to translate." }, { status: 400 });
+  if (!targetLang) return NextResponse.json({ ok: false, error: "No target language." }, { status: 400 });
+
+  const result = await geminiGenerate(
+    `Translate the following text into ${targetLang}. Preserve markdown, emoji, @mentions and #channel references exactly. ` +
+      `Return ONLY the translated text with no quotes, notes, or preamble.\n\n${text}`,
+    {
+      system: "You are a professional translator. Output only the translation.",
+      temperature: 0.2,
+    },
+  );
+
+  if (!result.ok) {
+    return NextResponse.json({ ok: false, error: result.error, retryable: result.retryable }, { status: result.status || 502 });
+  }
+  return NextResponse.json({ ok: true, text: result.text });
+}

apps/web/app/globals.css

@@ -0,0 +1,147 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Default token values (dark). The SDK provider overwrites these on <html> at
+   runtime from the resolved ThemeConfig — this block just prevents a flash and
+   keeps the app styled even before hydration. */
+:root {
+  --c-bg: #060608;
+  --c-surface: #08080b;
+  --c-panel: #0e0e13;
+  --c-elevated: #15151c;
+  --c-hover: rgba(255, 255, 255, 0.055);
+  --c-border: rgba(255, 255, 255, 0.08);
+  --c-border-strong: rgba(255, 255, 255, 0.14);
+  --c-ink: #ededf1;
+  --c-muted: #8c8c94;
+  --c-dim: #63636b;
+  --c-accent: #fda913;
+  --c-accent-fg: #1a1205;
+  --c-accent-soft: rgba(253, 169, 19, 0.12);
+  --c-success: #3ecf8e;
+  --c-warning: #f5b544;
+  --c-danger: #f2555a;
+  --c-info: #5b9dff;
+  --r-card: 20px;
+  --r-control: 10px;
+  --r-pill: 999px;
+  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --brand-gradient: linear-gradient(135deg, #fda913 0%, #ff7a3d 55%, #ff4d6d 100%);
+}
+
+/* Light scheme (no `dark` class). More specific than :root, so it wins before
+   hydration — the provider then applies inline vars post-mount for live theming.
+   This is what makes the light/dark toggle flash-free for returning users. */
+html:not(.dark) {
+  --c-bg: #f6f7f9;
+  --c-surface: #ffffff;
+  --c-panel: #ffffff;
+  --c-elevated: #ffffff;
+  --c-hover: rgba(9, 10, 14, 0.045);
+  --c-border: rgba(9, 10, 14, 0.1);
+  --c-border-strong: rgba(9, 10, 14, 0.16);
+  --c-ink: #14151a;
+  --c-muted: #5c6069;
+  --c-dim: #8b909a;
+  --c-accent: #e8920a;
+  --c-accent-fg: #ffffff;
+  --c-accent-soft: rgba(232, 146, 10, 0.12);
+  --c-success: #12915c;
+  --c-warning: #b3730a;
+  --c-danger: #d0353b;
+  --c-info: #2f6fe0;
+}
+
+* {
+  border-color: var(--c-border);
+}
+
+html,
+body {
+  height: 100%;
+}
+
+/* transient highlight when jumping to a message via a shared link.
+   Plain CSS (outside @layer) so Tailwind never purges it. */
+[data-jump-highlight="1"] {
+  background-color: rgba(253, 169, 19, 0.18) !important;
+  transition: background-color 0.3s ease;
+}
+
+body {
+  background: var(--c-bg);
+  color: var(--c-ink);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+::selection {
+  background: var(--c-accent-soft);
+  color: var(--c-ink);
+}
+
+/* thin, theme-aware scrollbars */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--c-border-strong) transparent;
+}
+*::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+}
+*::-webkit-scrollbar-thumb {
+  background: var(--c-border-strong);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--c-dim);
+  background-clip: padding-box;
+}
+
+@layer components {
+  .brand-mark {
+    background: var(--brand-gradient);
+  }
+
+  .card {
+    background: var(--c-panel);
+    border: 1px solid var(--c-border);
+    border-radius: var(--r-card);
+  }
+
+  .focus-ring {
+    outline: none;
+  }
+  .focus-ring:focus-visible {
+    box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent);
+  }
+
+  /* subtle hover row used across lists / messages */
+  .row-hover:hover {
+    background: var(--c-hover);
+  }
+
+  /* transient highlight when jumping to a message via a shared link */
+  .msg-jump {
+    background: var(--c-accent-soft);
+    transition: background 0.3s ease;
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .text-balance {
+    text-wrap: balance;
+  }
+}

apps/web/app/icon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#FDA913"/>
+      <stop offset="0.55" stop-color="#ff7a3d"/>
+      <stop offset="1" stop-color="#ff4d6d"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="16" fill="url(#g)"/>
+  <path d="M22 16h7v25h16v7H22z" fill="#1a1205"/>
+</svg>

apps/web/app/layout.tsx

@@ -0,0 +1,47 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { getServerConfig } from "@/lib/config";
+import { Providers } from "@/components/Providers";
+
+export const metadata: Metadata = {
+  title: "LynkedUp Pro — Messages",
+  description:
+    "Slack-grade team messaging, inbox and support — a demo of the @lynkd/messaging-inbox-sdk.",
+};
+
+// Runs before paint: restores the user's saved scheme + accent so returning
+// users never see a flash of the wrong theme.
+const NO_FLASH = `
+try {
+  var s = localStorage.getItem('lynkd.scheme');
+  if (s === 'dark') document.documentElement.classList.add('dark');
+  else if (s === 'light') document.documentElement.classList.remove('dark');
+  document.documentElement.style.colorScheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+  var t = localStorage.getItem('lynkd.theme');
+  if (t) { var p = JSON.parse(t); if (p && p.dark && p.dark.accent) {
+    document.documentElement.style.setProperty('--c-accent', p.dark.accent);
+  } }
+} catch (e) {}
+`;
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  const config = getServerConfig();
+  const initialScheme = config.theme.mode === "light" ? "light" : "dark";
+
+  return (
+    <html
+      lang="en"
+      className={initialScheme === "dark" ? "dark" : ""}
+      style={{ colorScheme: initialScheme } as React.CSSProperties}
+      suppressHydrationWarning
+    >
+      <head>
+        {/* eslint-disable-next-line @next/next/no-before-interactive-script-outside-document */}
+        <script dangerouslySetInnerHTML={{ __html: NO_FLASH }} />
+      </head>
+      <body suppressHydrationWarning>
+        <Providers config={config}>{children}</Providers>
+      </body>
+    </html>
+  );
+}