diff --git a/.gitignore b/.gitignore
index dbe532a..f2f257f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
-.env
+.env*
 __pycache__/
 *.pyc
 .venv/
diff --git a/app/app/api/auth/github/callback/route.ts b/app/app/api/auth/github/callback/route.ts
new file mode 100644
index 0000000..30645bc
--- /dev/null
+++ b/app/app/api/auth/github/callback/route.ts
@@ -0,0 +1,48 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000";
+const CLIENT_ID = process.env.GITHUB_CLIENT_ID!;
+const CLIENT_SECRET = process.env.GITHUB_CLIENT_SECRET!;
+
+export async function GET(req: NextRequest) {
+  const code = req.nextUrl.searchParams.get("code");
+  const error = req.nextUrl.searchParams.get("error");
+
+  if (error || !code) {
+    return NextResponse.redirect(
+      `${BASE_URL}/test?github_error=${error || "missing_code"}`
+    );
+  }
+
+  const tokenRes = await fetch("https://github.com/login/oauth/access_token", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+    body: JSON.stringify({
+      client_id: CLIENT_ID,
+      client_secret: CLIENT_SECRET,
+      code,
+      redirect_uri: `${BASE_URL}/api/auth/github/callback`,
+    }),
+  });
+
+  const data = await tokenRes.json();
+
+  if (data.error || !data.access_token) {
+    return NextResponse.redirect(
+      `${BASE_URL}/test?github_error=${data.error || "token_failed"}`
+    );
+  }
+
+  const response = NextResponse.redirect(`${BASE_URL}/test?github_connected=true`);
+  response.cookies.set("github_token", data.access_token, {
+    httpOnly: true,
+    secure: true,
+    sameSite: "none",
+    maxAge: 60 * 60 * 24 * 30, // GitHub tokens don't expire unless revoked
+    path: "/",
+  });
+  return response;
+}
diff --git a/app/app/api/auth/github/route.ts b/app/app/api/auth/github/route.ts
new file mode 100644
index 0000000..35bf961
--- /dev/null
+++ b/app/app/api/auth/github/route.ts
@@ -0,0 +1,14 @@
+import { NextResponse } from "next/server";
+
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000";
+const CLIENT_ID = process.env.GITHUB_CLIENT_ID!;
+
+const SCOPES = ["notifications", "read:user", "repo"].join(" ");
+
+export async function GET() {
+  const url = new URL("https://github.com/login/oauth/authorize");
+  url.searchParams.set("client_id", CLIENT_ID);
+  url.searchParams.set("redirect_uri", `${BASE_URL}/api/auth/github/callback`);
+  url.searchParams.set("scope", SCOPES);
+  return NextResponse.redirect(url.toString());
+}
diff --git a/app/app/api/auth/gmail/callback/route.ts b/app/app/api/auth/gmail/callback/route.ts
new file mode 100644
index 0000000..0f74433
--- /dev/null
+++ b/app/app/api/auth/gmail/callback/route.ts
@@ -0,0 +1,53 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000";
+const CLIENT_ID = process.env.GOOGLE_CLIENT_ID!;
+const CLIENT_SECRET = process.env.GOOGLE_CLIENT_SECRET!;
+const REDIRECT_URI = `${BASE_URL}/api/auth/gmail/callback`;
+
+export async function GET(req: NextRequest) {
+  const code = req.nextUrl.searchParams.get("code");
+  const error = req.nextUrl.searchParams.get("error");
+
+  if (error || !code) {
+    return NextResponse.redirect(`${BASE_URL}/test?gmail_error=${error || "missing_code"}`);
+  }
+
+  const tokenRes = await fetch("https://oauth2.googleapis.com/token", {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: new URLSearchParams({
+      code,
+      client_id: CLIENT_ID,
+      client_secret: CLIENT_SECRET,
+      redirect_uri: REDIRECT_URI,
+      grant_type: "authorization_code",
+    }).toString(),
+  });
+
+  const data = await tokenRes.json();
+
+  if (data.error || !data.access_token) {
+    return NextResponse.redirect(`${BASE_URL}/test?gmail_error=${data.error || "token_failed"}`);
+  }
+
+  const response = NextResponse.redirect(`${BASE_URL}/test?gmail_connected=true`);
+  response.cookies.set("gmail_token", data.access_token, {
+    httpOnly: true,
+    secure: true,
+    sameSite: "none",
+    maxAge: data.expires_in || 3600,
+    path: "/",
+  });
+  // Store refresh token separately (long-lived)
+  if (data.refresh_token) {
+    response.cookies.set("gmail_refresh_token", data.refresh_token, {
+      httpOnly: true,
+      secure: true,
+      sameSite: "none",
+      maxAge: 60 * 60 * 24 * 30,
+      path: "/",
+    });
+  }
+  return response;
+}
diff --git a/app/app/api/auth/gmail/route.ts b/app/app/api/auth/gmail/route.ts
new file mode 100644
index 0000000..7fde363
--- /dev/null
+++ b/app/app/api/auth/gmail/route.ts
@@ -0,0 +1,20 @@
+import { NextResponse } from "next/server";
+
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000";
+const CLIENT_ID = process.env.GOOGLE_CLIENT_ID!;
+
+const SCOPES = [
+  "https://www.googleapis.com/auth/gmail.readonly",
+  "https://www.googleapis.com/auth/userinfo.email",
+].join(" ");
+
+export async function GET() {
+  const url = new URL("https://accounts.google.com/o/oauth2/v2/auth");
+  url.searchParams.set("client_id", CLIENT_ID);
+  url.searchParams.set("redirect_uri", `${BASE_URL}/api/auth/gmail/callback`);
+  url.searchParams.set("response_type", "code");
+  url.searchParams.set("scope", SCOPES);
+  url.searchParams.set("access_type", "offline");
+  url.searchParams.set("prompt", "consent");
+  return NextResponse.redirect(url.toString());
+}
diff --git a/app/app/api/auth/slack/callback/route.ts b/app/app/api/auth/slack/callback/route.ts
new file mode 100644
index 0000000..462696a
--- /dev/null
+++ b/app/app/api/auth/slack/callback/route.ts
@@ -0,0 +1,73 @@
+import { NextRequest, NextResponse } from "next/server";
+import { storeCredential } from "@/lib/backend-client";
+
+const SLACK_CLIENT_ID = process.env.SLACK_CLIENT_ID!;
+const SLACK_CLIENT_SECRET = process.env.SLACK_CLIENT_SECRET!;
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000";
+const REDIRECT_URI = `${BASE_URL}/api/auth/slack/callback`;
+
+export async function GET(req: NextRequest) {
+  const code = req.nextUrl.searchParams.get("code");
+  const error = req.nextUrl.searchParams.get("error");
+
+  if (error || !code) {
+    return NextResponse.redirect(
+      `${BASE_URL}/test?error=${error || "missing_code"}`
+    );
+  }
+
+  // Exchange code for token
+  const params = new URLSearchParams({
+    client_id: SLACK_CLIENT_ID,
+    client_secret: SLACK_CLIENT_SECRET,
+    code,
+    redirect_uri: REDIRECT_URI,
+  });
+
+  const tokenRes = await fetch("https://slack.com/api/oauth.v2.access", {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: params.toString(),
+  });
+
+  const data = await tokenRes.json();
+
+  if (!data.ok) {
+    return NextResponse.redirect(
+      `${BASE_URL}/test?error=${data.error}`
+    );
+  }
+
+  const userToken = data.authed_user?.access_token;
+  if (!userToken) {
+    return NextResponse.redirect(
+      `${BASE_URL}/test?error=no_user_token`
+    );
+  }
+
+  const scopes = (data.authed_user?.scope || "").split(",").filter(Boolean);
+
+  // Store in backend credential vault (source of truth)
+  try {
+    const backendRes = await storeCredential("slack", userToken, scopes);
+    if (!backendRes.ok) {
+      console.error("Backend credential store failed:", await backendRes.text());
+    }
+  } catch (err) {
+    console.error("Could not reach backend, falling back to cookie:", err);
+    // Fallback: store in cookie so the app still works without the backend
+    const fallback = NextResponse.redirect(
+      `${BASE_URL}/test?connected=true&mode=local`
+    );
+    fallback.cookies.set("slack_token", userToken, {
+      httpOnly: true,
+      secure: true,
+      sameSite: "none",
+      maxAge: 60 * 60 * 24 * 30,
+      path: "/",
+    });
+    return fallback;
+  }
+
+  return NextResponse.redirect(`${BASE_URL}/test?connected=true`);
+}
diff --git a/app/app/api/auth/slack/route.ts b/app/app/api/auth/slack/route.ts
new file mode 100644
index 0000000..e157c13
--- /dev/null
+++ b/app/app/api/auth/slack/route.ts
@@ -0,0 +1,29 @@
+import { NextResponse } from "next/server";
+import { getSlackOAuthUrl } from "@/lib/backend-client";
+
+const SLACK_CLIENT_ID = process.env.SLACK_CLIENT_ID!;
+const BACKEND_API_KEY = process.env.BACKEND_API_KEY;
+const REDIRECT_URI = `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"}/api/auth/slack/callback`;
+
+const SCOPES = [
+  "channels:history",
+  "channels:read",
+  "groups:history",
+  "groups:read",
+  "users:read",
+  "reactions:read",
+].join(",");
+
+export async function GET() {
+  // If backend is configured, route through it (tokens stored in encrypted vault)
+  if (BACKEND_API_KEY) {
+    return NextResponse.redirect(getSlackOAuthUrl());
+  }
+
+  // No backend — do OAuth directly in the frontend (cookie fallback)
+  const url = new URL("https://slack.com/oauth/v2/authorize");
+  url.searchParams.set("client_id", SLACK_CLIENT_ID);
+  url.searchParams.set("user_scope", SCOPES);
+  url.searchParams.set("redirect_uri", REDIRECT_URI);
+  return NextResponse.redirect(url.toString());
+}
diff --git a/app/app/api/chat/route.ts b/app/app/api/chat/route.ts
new file mode 100644
index 0000000..41400e5
--- /dev/null
+++ b/app/app/api/chat/route.ts
@@ -0,0 +1,44 @@
+import { NextRequest } from "next/server";
+import Anthropic from "@anthropic-ai/sdk";
+
+const client = new Anthropic();
+
+const SYSTEM_PROMPTS: Record<string, string> = {
+  slack: `You are a Slack Agent. Summarize discussions, extract action items, flag blockers. Be concise and action-oriented. Never just describe — always recommend next steps.`,
+  gmail: `You are an Inbox Agent. Summarize emails, detect urgency, suggest replies and actions. Be concise. Always recommend what to do next.`,
+  github: `You are a GitHub Agent. Track PRs, issues, and code review status. Flag blockers, suggest review priorities. Be direct.`,
+  global: `You are an AI assistant with visibility across Slack, Gmail, and GitHub. Cross-reference information across tools, identify patterns and blockers, and suggest concrete next steps.`,
+};
+
+export async function POST(req: NextRequest) {
+  const { messages, agentId, context } = await req.json();
+
+  const system = context
+    ? `${SYSTEM_PROMPTS[agentId] || SYSTEM_PROMPTS.global}\n\nCurrent data context:\n${context}`
+    : SYSTEM_PROMPTS[agentId] || SYSTEM_PROMPTS.global;
+
+  const stream = client.messages.stream({
+    model: "claude-sonnet-4-6",
+    max_tokens: 1024,
+    system,
+    messages,
+  });
+
+  const readable = new ReadableStream({
+    async start(controller) {
+      for await (const chunk of stream) {
+        if (
+          chunk.type === "content_block_delta" &&
+          chunk.delta.type === "text_delta"
+        ) {
+          controller.enqueue(new TextEncoder().encode(chunk.delta.text));
+        }
+      }
+      controller.close();
+    },
+  });
+
+  return new Response(readable, {
+    headers: { "Content-Type": "text/plain; charset=utf-8" },
+  });
+}
diff --git a/app/app/api/employees/route.ts b/app/app/api/employees/route.ts
new file mode 100644
index 0000000..f403f04
--- /dev/null
+++ b/app/app/api/employees/route.ts
@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from "next/server";
+import { hireEmployee, listEmployees, fireEmployee } from "@/lib/backend-client";
+
+export async function GET() {
+  try {
+    const res = await listEmployees();
+    if (res.ok) {
+      const data = await res.json();
+      return NextResponse.json({ ok: true, employees: data });
+    }
+    return NextResponse.json({ ok: false, employees: [] });
+  } catch {
+    return NextResponse.json({ ok: false, employees: [] });
+  }
+}
+
+export async function POST(req: NextRequest) {
+  const { role, config } = await req.json();
+  try {
+    const res = await hireEmployee(role, config);
+    const data = await res.json();
+    return NextResponse.json(data, { status: res.ok ? 201 : 500 });
+  } catch {
+    return NextResponse.json({ error: "Backend unavailable" }, { status: 503 });
+  }
+}
+
+export async function DELETE(req: NextRequest) {
+  const { agentId } = await req.json();
+  try {
+    await fireEmployee(agentId);
+    return NextResponse.json({ ok: true });
+  } catch {
+    return NextResponse.json({ error: "Backend unavailable" }, { status: 503 });
+  }
+}
diff --git a/app/app/api/github/activity/route.ts b/app/app/api/github/activity/route.ts
new file mode 100644
index 0000000..fae87fd
--- /dev/null
+++ b/app/app/api/github/activity/route.ts
@@ -0,0 +1,149 @@
+import { NextRequest, NextResponse } from "next/server";
+
+interface GithubNotification {
+  id: string;
+  reason: string;
+  subject: {
+    title: string;
+    url: string;
+    type: string;
+    latest_comment_url: string | null;
+  };
+  repository: {
+    full_name: string;
+  };
+  updated_at: string;
+  unread: boolean;
+}
+
+interface PullRequest {
+  id: number;
+  number: number;
+  title: string;
+  state: string;
+  user: { login: string };
+  created_at: string;
+  updated_at: string;
+  draft: boolean;
+  html_url: string;
+  base: { repo: { full_name: string } };
+  requested_reviewers: { login: string }[];
+}
+
+function formatDate(isoDate: string): string {
+  const date = new Date(isoDate);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays === 1) return "Yesterday";
+  if (diffDays < 7) return date.toLocaleDateString([], { weekday: "short" });
+  return date.toLocaleDateString([], { month: "short", day: "numeric" });
+}
+
+function reasonLabel(reason: string): string {
+  const map: Record<string, string> = {
+    assign: "assigned",
+    author: "author",
+    comment: "commented",
+    mention: "mentioned",
+    review_requested: "review requested",
+    subscribed: "subscribed",
+    team_mention: "team mention",
+    ci_activity: "CI",
+  };
+  return map[reason] || reason;
+}
+
+export async function GET(req: NextRequest) {
+  const token = req.cookies.get("github_token")?.value;
+
+  if (!token) {
+    return NextResponse.json({ connected: false, items: [] });
+  }
+
+  const headers = {
+    Authorization: `Bearer ${token}`,
+    Accept: "application/vnd.github+json",
+    "X-GitHub-Api-Version": "2022-11-28",
+  };
+
+  // Fetch notifications and PRs awaiting review in parallel
+  const [notifRes, prRes] = await Promise.all([
+    fetch("https://api.github.com/notifications?all=false&per_page=15", { headers }),
+    fetch("https://api.github.com/search/issues?q=is:pr+is:open+review-requested:@me&per_page=10", { headers }),
+  ]);
+
+  if (!notifRes.ok && notifRes.status === 401) {
+    return NextResponse.json({ connected: false, items: [] });
+  }
+
+  const items: {
+    id: string;
+    repo: string;
+    title: string;
+    type: string;
+    reason: string;
+    time: string;
+    unread: boolean;
+    url?: string;
+    author?: string;
+    state?: string;
+  }[] = [];
+
+  // Process notifications
+  if (notifRes.ok) {
+    const notifications: GithubNotification[] = await notifRes.json();
+    for (const n of notifications) {
+      items.push({
+        id: `notif-${n.id}`,
+        repo: n.repository.full_name,
+        title: n.subject.title,
+        type: n.subject.type.replace("PullRequest", "PR").replace("Issue", "Issue"),
+        reason: reasonLabel(n.reason),
+        time: formatDate(n.updated_at),
+        unread: n.unread,
+      });
+    }
+  }
+
+  // Process PRs awaiting your review
+  if (prRes.ok) {
+    const prData = await prRes.json();
+    const prs: PullRequest[] = prData.items || [];
+    for (const pr of prs) {
+      // Avoid duplicating items already in notifications
+      const alreadyListed = items.some(
+        (i) => i.title === pr.title && i.repo === pr.base.repo.full_name
+      );
+      if (!alreadyListed) {
+        items.push({
+          id: `pr-${pr.id}`,
+          repo: pr.base.repo.full_name,
+          title: pr.title,
+          type: "PR",
+          reason: "review requested",
+          time: formatDate(pr.updated_at),
+          unread: true,
+          url: pr.html_url,
+          author: pr.user.login,
+          state: pr.draft ? "draft" : pr.state,
+        });
+      }
+    }
+  }
+
+  // Sort: unread first, then by original order (already time-sorted from API)
+  items.sort((a, b) => (b.unread ? 1 : 0) - (a.unread ? 1 : 0));
+
+  return NextResponse.json({ connected: true, items: items.slice(0, 20) });
+}
+
+export async function DELETE() {
+  const response = NextResponse.json({ ok: true });
+  response.cookies.delete("github_token");
+  return response;
+}
diff --git a/app/app/api/gmail/messages/route.ts b/app/app/api/gmail/messages/route.ts
new file mode 100644
index 0000000..3db620b
--- /dev/null
+++ b/app/app/api/gmail/messages/route.ts
@@ -0,0 +1,145 @@
+import { NextRequest, NextResponse } from "next/server";
+
+interface GmailMessage {
+  id: string;
+  payload: {
+    headers: { name: string; value: string }[];
+    body?: { data?: string };
+    parts?: { mimeType: string; body?: { data?: string } }[];
+  };
+  snippet: string;
+  labelIds: string[];
+  internalDate: string;
+}
+
+function getHeader(headers: { name: string; value: string }[], name: string) {
+  return headers.find(h => h.name.toLowerCase() === name.toLowerCase())?.value || "";
+}
+
+function decodeBody(data?: string): string {
+  if (!data) return "";
+  try {
+    return atob(data.replace(/-/g, "+").replace(/_/g, "/"));
+  } catch {
+    return "";
+  }
+}
+
+function formatDate(internalDate: string): string {
+  const date = new Date(parseInt(internalDate));
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+  if (diffHours < 1) return `${Math.floor(diffMs / 60000)}m ago`;
+  if (diffHours < 24) return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  if (diffDays === 1) return "Yesterday";
+  if (diffDays < 7) return date.toLocaleDateString([], { weekday: "short" });
+  return date.toLocaleDateString([], { month: "short", day: "numeric" });
+}
+
+async function refreshAccessToken(refreshToken: string): Promise<string | null> {
+  const res = await fetch("https://oauth2.googleapis.com/token", {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: new URLSearchParams({
+      client_id: process.env.GOOGLE_CLIENT_ID!,
+      client_secret: process.env.GOOGLE_CLIENT_SECRET!,
+      refresh_token: refreshToken,
+      grant_type: "refresh_token",
+    }).toString(),
+  });
+  const data = await res.json();
+  return data.access_token || null;
+}
+
+export async function GET(req: NextRequest) {
+  let token = req.cookies.get("gmail_token")?.value;
+  const refreshToken = req.cookies.get("gmail_refresh_token")?.value;
+
+  if (!token && !refreshToken) {
+    return NextResponse.json({ connected: false, emails: [] });
+  }
+
+  // Try to refresh if no access token
+  if (!token && refreshToken) {
+    token = (await refreshAccessToken(refreshToken)) || undefined;
+    if (!token) {
+      return NextResponse.json({ connected: false, emails: [] });
+    }
+  }
+
+  // Fetch list of recent messages
+  const listRes = await fetch(
+    "https://gmail.googleapis.com/gmail/v1/users/me/messages?maxResults=10&labelIds=INBOX",
+    { headers: { Authorization: `Bearer ${token}` } }
+  );
+
+  if (!listRes.ok) {
+    // Token might be expired — try refresh
+    if (listRes.status === 401 && refreshToken) {
+      token = (await refreshAccessToken(refreshToken)) || undefined;
+      if (!token) return NextResponse.json({ connected: false, emails: [] });
+    } else {
+      return NextResponse.json({ connected: false, error: "gmail_api_error" });
+    }
+  }
+
+  const listData = await listRes.json();
+  const messageIds: string[] = (listData.messages || []).map((m: { id: string }) => m.id);
+
+  // Fetch each message in parallel (up to 10)
+  const messages = await Promise.all(
+    messageIds.map(async (id) => {
+      const msgRes = await fetch(
+        `https://gmail.googleapis.com/gmail/v1/users/me/messages/${id}?format=full`,
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+      return msgRes.ok ? (msgRes.json() as Promise<GmailMessage>) : null;
+    })
+  );
+
+  const emails = messages
+    .filter((m): m is GmailMessage => m !== null)
+    .map((msg) => {
+      const headers = msg.payload.headers;
+      const from = getHeader(headers, "from");
+      const fromName = from.includes("<") ? from.split("<")[0].trim().replace(/"/g, "") : from;
+      const subject = getHeader(headers, "subject") || "(no subject)";
+
+      // Get plain text body
+      let body = msg.snippet;
+      const textPart = msg.payload.parts?.find(p => p.mimeType === "text/plain");
+      if (textPart?.body?.data) {
+        body = decodeBody(textPart.body.data).slice(0, 300);
+      } else if (msg.payload.body?.data) {
+        body = decodeBody(msg.payload.body.data).slice(0, 300);
+      }
+
+      const isUnread = msg.labelIds.includes("UNREAD");
+      const labels = msg.labelIds
+        .filter(l => !["INBOX", "UNREAD", "IMPORTANT", "CATEGORY_PERSONAL"].includes(l))
+        .map(l => l.toLowerCase().replace("category_", ""))
+        .slice(0, 2);
+
+      return {
+        id: msg.id,
+        from: fromName,
+        subject,
+        body: body.trim(),
+        time: formatDate(msg.internalDate),
+        priority: isUnread ? "high" as const : "low" as const,
+        read: !isUnread,
+        labels,
+      };
+    });
+
+  return NextResponse.json({ connected: true, emails });
+}
+
+export async function DELETE() {
+  const response = NextResponse.json({ ok: true });
+  response.cookies.delete("gmail_token");
+  response.cookies.delete("gmail_refresh_token");
+  return response;
+}
diff --git a/app/app/api/slack/messages/route.ts b/app/app/api/slack/messages/route.ts
new file mode 100644
index 0000000..b2837bc
--- /dev/null
+++ b/app/app/api/slack/messages/route.ts
@@ -0,0 +1,105 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getSlackMessages, disconnectSlack } from "@/lib/backend-client";
+
+export async function GET(req: NextRequest) {
+  // Try backend first
+  try {
+    const backendRes = await getSlackMessages();
+    if (backendRes.ok) {
+      const data = await backendRes.json();
+      return NextResponse.json(data);
+    }
+  } catch {
+    // Backend unreachable — fall through to cookie fallback
+  }
+
+  // Fallback: use token from cookie (set when backend was unavailable at OAuth time)
+  const cookieToken = req.cookies.get("slack_token")?.value;
+  if (!cookieToken) {
+    return NextResponse.json({ connected: false, messages: [] });
+  }
+
+  return fetchSlackDirect(cookieToken);
+}
+
+export async function DELETE() {
+  // Try to delete from backend
+  try {
+    await disconnectSlack();
+  } catch {
+    // Backend unreachable, best effort
+  }
+
+  // Also clear cookie fallback
+  const response = NextResponse.json({ ok: true });
+  response.cookies.delete("slack_token");
+  return response;
+}
+
+async function fetchSlackDirect(token: string) {
+  const userCache = new Map<string, string>();
+
+  // Use only public_channel to avoid needing groups:read scope
+  const channelsRes = await fetch(
+    "https://slack.com/api/conversations.list?types=public_channel&limit=20&exclude_archived=true",
+    { headers: { Authorization: `Bearer ${token}` } }
+  );
+  const channelsData = await channelsRes.json();
+
+  if (!channelsData.ok) {
+    console.error("[Slack] conversations.list error:", channelsData.error, channelsData);
+    return NextResponse.json({ connected: false, error: channelsData.error });
+  }
+
+  const channels = (channelsData.channels || []).filter(
+    (c: { is_member: boolean }) => c.is_member
+  );
+  const allMessages = [];
+
+  for (const channel of channels.slice(0, 5)) {
+    const histRes = await fetch(
+      `https://slack.com/api/conversations.history?channel=${channel.id}&limit=3`,
+      { headers: { Authorization: `Bearer ${token}` } }
+    );
+    const histData = await histRes.json();
+    if (!histData.ok || !histData.messages) continue;
+
+    for (const msg of histData.messages) {
+      if (!msg.user || !msg.text) continue;
+
+      if (!userCache.has(msg.user)) {
+        const uRes = await fetch(
+          `https://slack.com/api/users.info?user=${msg.user}`,
+          { headers: { Authorization: `Bearer ${token}` } }
+        );
+        const uData = await uRes.json();
+        const name = uData.ok
+          ? uData.user.profile.display_name || uData.user.profile.real_name
+          : msg.user;
+        userCache.set(msg.user, name);
+      }
+
+      const name = userCache.get(msg.user)!;
+      const ts = parseFloat(msg.ts);
+      const diffMs = Date.now() - ts * 1000;
+      const diffMins = Math.floor(diffMs / 60000);
+      const diffHours = Math.floor(diffMs / 3600000);
+
+      allMessages.push({
+        id: msg.ts,
+        channel: `#${channel.name}`,
+        user: name,
+        avatar: name.split(" ").map((w: string) => w[0]).join("").toUpperCase().slice(0, 2),
+        text: msg.text,
+        time: diffMins < 60 ? `${diffMins}m ago` : diffHours < 24 ? `${diffHours}h ago` : new Date(ts * 1000).toLocaleDateString(),
+        reactions: (msg.reactions || []).map((r: { name: string; count: number }) => ({
+          emoji: `:${r.name}:`,
+          count: r.count,
+        })),
+      });
+    }
+  }
+
+  allMessages.sort((a, b) => parseFloat(b.id) - parseFloat(a.id));
+  return NextResponse.json({ connected: true, messages: allMessages });
+}
diff --git a/app/app/api/slack/token/route.ts b/app/app/api/slack/token/route.ts
new file mode 100644
index 0000000..33293a8
--- /dev/null
+++ b/app/app/api/slack/token/route.ts
@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req: NextRequest) {
+  const { token } = await req.json();
+
+  if (!token || !token.startsWith("xoxp-")) {
+    return NextResponse.json({ error: "Invalid token — must be a User OAuth Token (xoxp-...)" }, { status: 400 });
+  }
+
+  const response = NextResponse.json({ ok: true });
+  response.cookies.set("slack_token", token, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === "production",
+    sameSite: "lax",
+    maxAge: 60 * 60 * 24 * 30,
+    path: "/",
+  });
+  return response;
+}
diff --git a/app/app/marketplace/page.tsx b/app/app/marketplace/page.tsx
new file mode 100644
index 0000000..ce2a9a5
--- /dev/null
+++ b/app/app/marketplace/page.tsx
@@ -0,0 +1,10 @@
+import { MarketplaceView } from "@/components/marketplace/marketplace-view";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Talent Directory — AgentOS",
+};
+
+export default function MarketplacePage() {
+  return <MarketplaceView />;
+}
diff --git a/app/app/test/page.tsx b/app/app/test/page.tsx
new file mode 100644
index 0000000..6f2cd62
--- /dev/null
+++ b/app/app/test/page.tsx
@@ -0,0 +1,5 @@
+import { TestDashboard } from "@/components/test/test-dashboard";
+
+export default function TestPage() {
+  return <TestDashboard />;
+}
diff --git a/app/components/agents/global-chat.tsx b/app/components/agents/global-chat.tsx
new file mode 100644
index 0000000..c04e889
--- /dev/null
+++ b/app/components/agents/global-chat.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { useState } from "react";
+import { Card } from "@/components/ui/card";
+import { ChatPanel } from "@/components/test/chat-panel";
+import { cn } from "@/lib/utils";
+
+export function GlobalChat() {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-3">
+        <div>
+          <h2 className="text-lg font-semibold">Ask Your Team</h2>
+          <p className="text-sm text-muted-foreground">
+            Query across all your AI employees at once
+          </p>
+        </div>
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="text-xs text-primary hover:underline"
+        >
+          {expanded ? "Collapse" : "Expand"}
+        </button>
+      </div>
+
+      <Card className={cn("transition-all overflow-hidden", expanded ? "h-[500px]" : "h-[320px]")}>
+        <div className="h-full flex flex-col">
+          <ChatPanel agentId="global" />
+        </div>
+      </Card>
+    </div>
+  );
+}
diff --git a/app/components/agents/slack-feed.tsx b/app/components/agents/slack-feed.tsx
new file mode 100644
index 0000000..9e65ec7
--- /dev/null
+++ b/app/components/agents/slack-feed.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { mockSlackMessages, SlackMessage } from "@/lib/mock-data";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+const channelColors: Record<string, string> = {
+  "#engineering": "text-blue-400 bg-blue-400/10",
+  "#product": "text-purple-400 bg-purple-400/10",
+  "#general": "text-green-400 bg-green-400/10",
+  "#design": "text-pink-400 bg-pink-400/10",
+};
+
+function getChannelColor(channel: string) {
+  return channelColors[channel] || "text-muted-foreground bg-muted";
+}
+
+interface SlackFeedProps {
+  onConnectionChange?: (connected: boolean) => void;
+}
+
+export function SlackFeed({ onConnectionChange }: SlackFeedProps) {
+  const [messages, setMessages] = useState<SlackMessage[]>([]);
+  const [connected, setConnected] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [disconnecting, setDisconnecting] = useState(false);
+  const [showTokenInput, setShowTokenInput] = useState(false);
+  const [tokenInput, setTokenInput] = useState("");
+  const [savingToken, setSavingToken] = useState(false);
+
+  useEffect(() => {
+    fetchMessages();
+  }, []);
+
+  async function fetchMessages() {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/slack/messages");
+      const data = await res.json();
+      if (data.connected) {
+        setConnected(true);
+        setMessages(data.messages);
+        onConnectionChange?.(true);
+      } else {
+        setConnected(false);
+        setMessages(mockSlackMessages);
+        onConnectionChange?.(false);
+      }
+    } catch {
+      setConnected(false);
+      setMessages(mockSlackMessages);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleDisconnect() {
+    setDisconnecting(true);
+    await fetch("/api/slack/messages", { method: "DELETE" });
+    setConnected(false);
+    setMessages(mockSlackMessages);
+    onConnectionChange?.(false);
+    setDisconnecting(false);
+  }
+
+  async function handleSaveToken() {
+    if (!tokenInput.trim()) return;
+    setSavingToken(true);
+    try {
+      const res = await fetch("/api/slack/token", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ token: tokenInput.trim() }),
+      });
+      if (res.ok) {
+        setShowTokenInput(false);
+        setTokenInput("");
+        await fetchMessages();
+      }
+    } finally {
+      setSavingToken(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-4 py-2 border-b border-border flex items-center justify-between shrink-0">
+        <div className="flex items-center gap-2">
+          {connected ? (
+            <>
+              <div className="w-2 h-2 rounded-full bg-green-500" />
+              <span className="text-xs text-muted-foreground">Live from Slack</span>
+            </>
+          ) : (
+            <>
+              <div className="w-2 h-2 rounded-full bg-yellow-500" />
+              <span className="text-xs text-muted-foreground">Using mock data</span>
+            </>
+          )}
+        </div>
+        {connected ? (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-xs h-6 text-muted-foreground"
+            onClick={handleDisconnect}
+            disabled={disconnecting}
+          >
+            Disconnect
+          </Button>
+        ) : (
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-xs h-6"
+              onClick={() => (window.location.href = "/api/auth/slack")}
+            >
+              Connect Slack
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-xs h-6 text-muted-foreground"
+              onClick={() => setShowTokenInput((v) => !v)}
+            >
+              Paste token
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {showTokenInput && !connected && (
+        <div className="px-4 py-3 border-b border-border bg-accent/20">
+          <p className="text-xs text-muted-foreground mb-2">
+            Go to your Slack app → <strong>OAuth & Permissions → Install to Workspace</strong> → copy the <strong>User OAuth Token</strong> (xoxp-...)
+          </p>
+          <div className="flex gap-2">
+            <Input
+              value={tokenInput}
+              onChange={(e) => setTokenInput(e.target.value)}
+              placeholder="xoxp-..."
+              className="text-xs h-7 font-mono"
+            />
+            <Button
+              size="sm"
+              className="text-xs h-7 shrink-0"
+              onClick={handleSaveToken}
+              disabled={!tokenInput.trim() || savingToken}
+            >
+              {savingToken ? "Saving..." : "Save"}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {loading ? (
+        <div className="flex-1 flex items-center justify-center">
+          <div className="flex gap-1">
+            <span className="w-2 h-2 rounded-full bg-muted-foreground animate-bounce" style={{ animationDelay: "0ms" }} />
+            <span className="w-2 h-2 rounded-full bg-muted-foreground animate-bounce" style={{ animationDelay: "150ms" }} />
+            <span className="w-2 h-2 rounded-full bg-muted-foreground animate-bounce" style={{ animationDelay: "300ms" }} />
+          </div>
+        </div>
+      ) : (
+        <ScrollArea className="flex-1">
+          <div className="divide-y divide-border">
+            {messages.map((msg) => (
+              <div key={msg.id} className="px-4 py-3 hover:bg-accent/30 transition-colors">
+                <div className="flex gap-3">
+                  <Avatar className="w-8 h-8 shrink-0">
+                    <AvatarFallback className="text-xs bg-accent">
+                      {msg.avatar}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className="font-medium text-sm">{msg.user}</span>
+                      <Badge
+                        variant="secondary"
+                        className={`text-xs ${getChannelColor(msg.channel)}`}
+                      >
+                        {msg.channel}
+                      </Badge>
+                      <span className="text-xs text-muted-foreground ml-auto">{msg.time}</span>
+                    </div>
+                    <p className="text-sm text-muted-foreground leading-relaxed">{msg.text}</p>
+                    {msg.reactions && msg.reactions.length > 0 && (
+                      <div className="flex gap-1.5 mt-2 flex-wrap">
+                        {msg.reactions.map((r) => (
+                          <span
+                            key={r.emoji}
+                            className="text-xs bg-accent border border-border rounded-full px-2 py-0.5 flex items-center gap-1"
+                          >
+                            {r.emoji} <span className="text-muted-foreground">{r.count}</span>
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/marketplace/marketplace-view.tsx b/app/components/marketplace/marketplace-view.tsx
new file mode 100644
index 0000000..67a0077
--- /dev/null
+++ b/app/components/marketplace/marketplace-view.tsx
@@ -0,0 +1,226 @@
+"use client";
+
+import { useState } from "react";
+import { installedAgents, marketplaceAgents, Agent } from "@/lib/mock-data";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+export function MarketplaceView() {
+  const [search, setSearch] = useState("");
+  const [hired, setHired] = useState<Set<string>>(
+    new Set(installedAgents.map((a) => a.id))
+  );
+  const [hiring, setHiring] = useState<string | null>(null);
+
+  const allAgents = [...installedAgents, ...marketplaceAgents];
+
+  const filtered = allAgents.filter(
+    (a) =>
+      a.name.toLowerCase().includes(search.toLowerCase()) ||
+      a.description.toLowerCase().includes(search.toLowerCase()) ||
+      a.integration.toLowerCase().includes(search.toLowerCase())
+  );
+
+  async function handleHire(agent: Agent) {
+    setHiring(agent.id);
+    try {
+      await fetch("/api/employees", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ role: agent.id, config: {} }),
+      });
+    } catch {
+      // Backend unavailable — still show as hired in UI for demo
+    }
+    setHired((prev) => new Set([...prev, agent.id]));
+    setHiring(null);
+  }
+
+  async function handleLetGo(agent: Agent) {
+    if (["inbox", "slack", "github"].includes(agent.id)) return;
+    try {
+      await fetch("/api/employees", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ agentId: agent.id }),
+      });
+    } catch {
+      // Best effort
+    }
+    setHired((prev) => {
+      const next = new Set(prev);
+      next.delete(agent.id);
+      return next;
+    });
+  }
+
+  const hiredList = filtered.filter((a) => hired.has(a.id));
+  const availableList = filtered.filter((a) => !hired.has(a.id));
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">Talent Directory</h1>
+        <p className="text-muted-foreground text-sm mt-1">
+          Browse and hire AI employees for your team.
+        </p>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <Input
+          placeholder="Search AI employees..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="max-w-sm"
+        />
+        <span className="text-sm text-muted-foreground">
+          {hired.size} hired · {marketplaceAgents.filter(a => !hired.has(a.id)).length} available
+        </span>
+      </div>
+
+      {hiredList.length > 0 && (
+        <section>
+          <h2 className="text-sm font-medium text-muted-foreground uppercase tracking-wider mb-3">
+            Your Team ({hiredList.length})
+          </h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {hiredList.map((agent) => (
+              <EmployeeCard
+                key={agent.id}
+                agent={agent}
+                isHired
+                isCore={["inbox", "slack", "github"].includes(agent.id)}
+                onLetGo={() => handleLetGo(agent)}
+              />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {availableList.length > 0 && (
+        <section>
+          <h2 className="text-sm font-medium text-muted-foreground uppercase tracking-wider mb-3">
+            Available to Hire ({availableList.length})
+          </h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {availableList.map((agent) => (
+              <EmployeeCard
+                key={agent.id}
+                agent={agent}
+                isHired={false}
+                isCore={false}
+                hiring={hiring === agent.id}
+                onHire={() => handleHire(agent)}
+              />
+            ))}
+          </div>
+        </section>
+      )}
+
+      <CreateEmployeeCard />
+    </div>
+  );
+}
+
+function EmployeeCard({
+  agent,
+  isHired,
+  isCore,
+  hiring,
+  onHire,
+  onLetGo,
+}: {
+  agent: Agent;
+  isHired: boolean;
+  isCore: boolean;
+  hiring?: boolean;
+  onHire?: () => void;
+  onLetGo?: () => void;
+}) {
+  return (
+    <Card className={cn(isHired && "border-primary/30 bg-primary/5")}>
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-3">
+            <span className="text-3xl">{agent.icon}</span>
+            <div>
+              <h3 className="font-semibold text-sm">{agent.name}</h3>
+              <Badge variant="secondary" className="text-xs mt-0.5">
+                {agent.integration}
+              </Badge>
+            </div>
+          </div>
+          {isHired && (
+            <Badge className="text-xs bg-green-500/10 text-green-400 border-green-400/20">
+              Hired
+            </Badge>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <p className="text-xs text-muted-foreground leading-relaxed mb-4">
+          {agent.description}
+        </p>
+        {isHired ? (
+          <div className="flex gap-2">
+            {!isCore ? (
+              <Button
+                variant="outline"
+                size="sm"
+                className="text-xs"
+                onClick={onLetGo}
+              >
+                Let Go
+              </Button>
+            ) : (
+              <span className="text-xs text-muted-foreground italic">Core employee</span>
+            )}
+          </div>
+        ) : (
+          <Button
+            size="sm"
+            className="text-xs w-full"
+            onClick={onHire}
+            disabled={hiring}
+          >
+            {hiring ? (
+              <span className="flex items-center gap-2">
+                <span className="w-3 h-3 border border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
+                Onboarding...
+              </span>
+            ) : (
+              "Hire"
+            )}
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+function CreateEmployeeCard() {
+  return (
+    <section>
+      <h2 className="text-sm font-medium text-muted-foreground uppercase tracking-wider mb-3">
+        Build Your Own
+      </h2>
+      <Card className="border-dashed border-2 hover:border-primary/50 transition-colors cursor-pointer group">
+        <CardContent className="flex flex-col items-center justify-center py-10 text-center">
+          <div className="text-4xl mb-3">✦</div>
+          <h3 className="font-semibold mb-1 group-hover:text-primary transition-colors">
+            Create a Custom AI Employee
+          </h3>
+          <p className="text-sm text-muted-foreground max-w-xs">
+            Connect any API, define your employee&apos;s role and work style, and add them to your team.
+          </p>
+          <Button variant="outline" size="sm" className="mt-4">
+            Get Started
+          </Button>
+        </CardContent>
+      </Card>
+    </section>
+  );
+}
diff --git a/app/components/navbar.tsx b/app/components/navbar.tsx
new file mode 100644
index 0000000..fecf214
--- /dev/null
+++ b/app/components/navbar.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+export function Navbar() {
+  const pathname = usePathname();
+
+  const links = [
+    { href: "/", label: "Dashboard" },
+    { href: "/marketplace", label: "Talent Directory" },
+  ];
+
+  return (
+    <header className="border-b border-border bg-background/95 backdrop-blur sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-14">
+          <div className="flex items-center gap-8">
+            <Link href="/" className="flex items-center gap-2">
+              <span className="text-lg font-bold tracking-tight">AgentOS</span>
+              <span className="text-xs bg-primary/10 text-primary px-1.5 py-0.5 rounded font-medium">beta</span>
+            </Link>
+            <nav className="flex items-center gap-1">
+              {links.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className={cn(
+                    "px-3 py-1.5 text-sm rounded-md transition-colors",
+                    pathname === link.href
+                      ? "bg-accent text-accent-foreground font-medium"
+                      : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
+                  )}
+                >
+                  {link.label}
+                </Link>
+              ))}
+            </nav>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+            <span className="text-xs text-muted-foreground">3 AI employees active</span>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/app/components/test/chat-panel.tsx b/app/components/test/chat-panel.tsx
new file mode 100644
index 0000000..14d1dce
--- /dev/null
+++ b/app/components/test/chat-panel.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+type Message = { role: "user" | "assistant"; content: string };
+
+const SUGGESTIONS: Record<string, string[]> = {
+  slack: [
+    "What are the key blockers from today's messages?",
+    "Summarize the most important discussions",
+    "What action items need follow-up?",
+  ],
+  gmail: [
+    "What emails need my attention today?",
+    "Any urgent items I should respond to first?",
+    "Summarize the highest priority threads",
+  ],
+  github: [
+    "Which PRs need review most urgently?",
+    "What issues are blocking a release?",
+    "Give me a status summary of open PRs",
+  ],
+  global: [
+    "What's my top priority right now?",
+    "Any blockers I should know about?",
+    "Give me a full briefing across all tools",
+  ],
+};
+
+export function ChatPanel({ agentId, context }: { agentId: string; context?: string }) {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState("");
+  const [loading, setLoading] = useState(false);
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  async function send() {
+    const text = input.trim();
+    if (!text || loading) return;
+    const next: Message[] = [...messages, { role: "user", content: text }];
+    setMessages(next);
+    setInput("");
+    setLoading(true);
+
+    const res = await fetch("/api/chat", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ agentId, context, messages: next }),
+    });
+
+    if (!res.body) { setLoading(false); return; }
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let text2 = "";
+    setMessages(prev => [...prev, { role: "assistant", content: "" }]);
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      text2 += decoder.decode(value, { stream: true });
+      setMessages(prev => {
+        const updated = [...prev];
+        updated[updated.length - 1] = { role: "assistant", content: text2 };
+        return updated;
+      });
+    }
+    setLoading(false);
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-4 py-3 border-b border-border shrink-0">
+        <p className="text-xs font-medium">Ask the agent</p>
+        <p className="text-xs text-muted-foreground">Query your data, get actionable answers</p>
+      </div>
+
+      <ScrollArea className="flex-1 px-4 py-3">
+        {messages.length === 0 ? (
+          <div className="space-y-2 mt-2">
+            <p className="text-xs text-muted-foreground text-center mb-3">Try asking:</p>
+            {(SUGGESTIONS[agentId] || SUGGESTIONS.global).map(s => (
+              <button key={s} onClick={() => setInput(s)}
+                className="w-full text-xs text-left px-3 py-2 rounded-lg border border-border hover:border-primary/50 hover:bg-accent/50 transition-colors text-muted-foreground hover:text-foreground">
+                {s}
+              </button>
+            ))}
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {messages.map((m, i) => (
+              <div key={i} className={`flex ${m.role === "user" ? "justify-end" : "justify-start"}`}>
+                <div className={`max-w-[85%] rounded-xl px-3 py-2 text-sm leading-relaxed whitespace-pre-wrap ${
+                  m.role === "user" ? "bg-primary text-primary-foreground" : "bg-accent text-accent-foreground"
+                }`}>
+                  {m.content || (
+                    <span className="flex gap-1 items-center">
+                      {[0,150,300].map(d => (
+                        <span key={d} className="w-1.5 h-1.5 rounded-full bg-current animate-bounce" style={{ animationDelay: `${d}ms` }} />
+                      ))}
+                    </span>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+        <div ref={bottomRef} />
+      </ScrollArea>
+
+      <div className="px-4 py-3 border-t border-border shrink-0">
+        <div className="flex gap-2">
+          <Textarea
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }}
+            placeholder="Ask anything about your data..."
+            className="resize-none text-sm min-h-[56px] max-h-[120px]"
+            rows={2}
+          />
+          <Button onClick={send} disabled={!input.trim() || loading} size="sm" className="self-end">
+            Send
+          </Button>
+        </div>
+        <p className="text-xs text-muted-foreground mt-1">Enter to send · Shift+Enter for new line</p>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/test/github-feed.tsx b/app/components/test/github-feed.tsx
new file mode 100644
index 0000000..56327cc
--- /dev/null
+++ b/app/components/test/github-feed.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+
+interface ActivityItem {
+  id: string;
+  repo: string;
+  title: string;
+  type: string;
+  reason: string;
+  time: string;
+  unread: boolean;
+  url?: string;
+  author?: string;
+  state?: string;
+}
+
+const mockItems: ActivityItem[] = [
+  { id: "m1", repo: "acme/frontend", title: "feat: redesign checkout flow", type: "PR", reason: "review requested", time: "2h ago", unread: true, author: "jdoe", state: "open" },
+  { id: "m2", repo: "acme/backend", title: "fix: race condition in session handler", type: "PR", reason: "review requested", time: "4h ago", unread: true, author: "priya-n", state: "open" },
+  { id: "m3", repo: "acme/frontend", title: "CI failing on main — lint error in checkout", type: "Issue", reason: "mentioned", time: "5h ago", unread: true },
+  { id: "m4", repo: "acme/infra", title: "chore: bump node to 22 LTS", type: "PR", reason: "subscribed", time: "Yesterday", unread: false, author: "marcus-r", state: "draft" },
+  { id: "m5", repo: "acme/backend", title: "Memory leak in event queue under load", type: "Issue", reason: "assigned", time: "Yesterday", unread: false },
+  { id: "m6", repo: "acme/design-system", title: "feat: new Button variants for v2", type: "PR", reason: "review requested", time: "Mon", unread: false, author: "sarah-c", state: "open" },
+];
+
+const typeColors: Record<string, string> = {
+  PR: "text-blue-400 bg-blue-400/10 border-blue-400/20",
+  Issue: "text-orange-400 bg-orange-400/10 border-orange-400/20",
+  Commit: "text-green-400 bg-green-400/10 border-green-400/20",
+  Discussion: "text-purple-400 bg-purple-400/10 border-purple-400/20",
+};
+
+const stateColors: Record<string, string> = {
+  open: "text-green-400",
+  draft: "text-muted-foreground",
+  closed: "text-red-400",
+  merged: "text-purple-400",
+};
+
+interface GithubFeedProps {
+  onContextChange?: (context: string) => void;
+}
+
+export function GithubFeed({ onContextChange }: GithubFeedProps) {
+  const [items, setItems] = useState<ActivityItem[]>([]);
+  const [connected, setConnected] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [disconnecting, setDisconnecting] = useState(false);
+
+  useEffect(() => {
+    fetchActivity();
+  }, []);
+
+  async function fetchActivity() {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/github/activity");
+      const data = await res.json();
+      if (data.connected && data.items?.length > 0) {
+        setConnected(true);
+        setItems(data.items);
+        onContextChange?.(buildContext(data.items));
+      } else {
+        setConnected(false);
+        setItems(mockItems);
+        onContextChange?.(buildContext(mockItems));
+      }
+    } catch {
+      setConnected(false);
+      setItems(mockItems);
+      onContextChange?.(buildContext(mockItems));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleDisconnect() {
+    setDisconnecting(true);
+    await fetch("/api/github/activity", { method: "DELETE" });
+    setConnected(false);
+    setItems(mockItems);
+    onContextChange?.(buildContext(mockItems));
+    setDisconnecting(false);
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-4 py-2 border-b border-border flex items-center justify-between shrink-0">
+        <div className="flex items-center gap-2">
+          {connected ? (
+            <><div className="w-2 h-2 rounded-full bg-green-500" /><span className="text-xs text-muted-foreground">Live from GitHub</span></>
+          ) : (
+            <><div className="w-2 h-2 rounded-full bg-yellow-500" /><span className="text-xs text-muted-foreground">Using mock data</span></>
+          )}
+        </div>
+        {connected ? (
+          <Button variant="ghost" size="sm" className="text-xs h-6 text-muted-foreground"
+            onClick={handleDisconnect} disabled={disconnecting}>
+            Disconnect
+          </Button>
+        ) : (
+          <Button variant="outline" size="sm" className="text-xs h-6"
+            onClick={() => (window.location.href = "/api/auth/github")}>
+            Connect GitHub
+          </Button>
+        )}
+      </div>
+
+      {loading ? (
+        <div className="flex-1 flex items-center justify-center">
+          <div className="flex gap-1">
+            {[0, 150, 300].map(d => (
+              <span key={d} className="w-2 h-2 rounded-full bg-muted-foreground animate-bounce" style={{ animationDelay: `${d}ms` }} />
+            ))}
+          </div>
+        </div>
+      ) : (
+        <ScrollArea className="flex-1">
+          <div className="divide-y divide-border">
+            {items.map(item => (
+              <div
+                key={item.id}
+                className={cn(
+                  "px-4 py-3 hover:bg-accent/30 transition-colors cursor-pointer",
+                  item.unread && "border-l-2 border-l-primary"
+                )}
+              >
+                <div className="flex items-start justify-between gap-2 mb-1">
+                  <div className="flex items-center gap-2 min-w-0 flex-wrap">
+                    <Badge variant="outline" className={cn("text-xs shrink-0", typeColors[item.type] || "text-muted-foreground bg-muted")}>
+                      {item.type}
+                    </Badge>
+                    <span className="text-xs text-muted-foreground font-mono truncate">{item.repo}</span>
+                  </div>
+                  <span className="text-xs text-muted-foreground shrink-0">{item.time}</span>
+                </div>
+                <p className={cn("text-sm mb-1 leading-snug", item.unread ? "font-medium text-foreground" : "text-muted-foreground")}>
+                  {item.title}
+                </p>
+                <div className="flex items-center gap-2 flex-wrap">
+                  <span className="text-xs text-muted-foreground">{item.reason}</span>
+                  {item.author && (
+                    <span className="text-xs text-muted-foreground">· @{item.author}</span>
+                  )}
+                  {item.state && (
+                    <span className={cn("text-xs font-medium", stateColors[item.state] || "text-muted-foreground")}>
+                      · {item.state}
+                    </span>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+}
+
+function buildContext(items: ActivityItem[]): string {
+  return items.map(i =>
+    `[${i.type}] ${i.repo}: "${i.title}" — ${i.reason}, ${i.state || ""}, ${i.unread ? "unread" : "read"}, ${i.time}${i.author ? `, by @${i.author}` : ""}`
+  ).join("\n");
+}
+
+export const githubContext = buildContext(mockItems);
diff --git a/app/components/test/gmail-feed.tsx b/app/components/test/gmail-feed.tsx
new file mode 100644
index 0000000..1e0673f
--- /dev/null
+++ b/app/components/test/gmail-feed.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+
+interface Email {
+  id: string;
+  from: string;
+  subject: string;
+  body: string;
+  time: string;
+  priority: "high" | "medium" | "low";
+  read: boolean;
+  labels: string[];
+}
+
+const mockEmails: Email[] = [
+  { id: "e1", from: "Sarah Chen", subject: "Re: Q2 launch — need decision by EOD", body: "We're blocked on the pricing page copy. Marketing hasn't signed off. Can you get Alex to approve by EOD? Dev team is waiting and we'll miss Thursday's deploy.", time: "9:14 AM", priority: "high", read: false, labels: ["launch", "urgent"] },
+  { id: "e2", from: "Marcus Rivera", subject: "Contract renewal — 30 day notice", body: "Your contract expires May 12th. Renewal terms attached. 5% discount for early renewal before April 25th.", time: "8:47 AM", priority: "high", read: false, labels: ["legal", "renewal"] },
+  { id: "e3", from: "Dev Bot", subject: "[acme/frontend] PR #142 needs review", body: "PR #142 'feat: redesign checkout flow' opened by jdoe, awaiting your review. 3 files changed, +287 -41.", time: "Yesterday", priority: "medium", read: true, labels: ["github", "review"] },
+  { id: "e4", from: "All Hands Invite", subject: "Q2 All Hands — Thursday 2pm", body: "Prepare a 3-minute update on your team's progress. Slides due Wednesday EOD.", time: "Yesterday", priority: "medium", read: true, labels: ["meeting"] },
+  { id: "e5", from: "Priya Nair", subject: "Budget approval for new tooling", body: "Submitted tooling budget request ($12k annual for Datadog). Finance needs your sign-off before April 20th.", time: "Mon", priority: "low", read: true, labels: ["budget"] },
+];
+
+const priorityColors = {
+  high: "text-red-400 bg-red-400/10 border-red-400/20",
+  medium: "text-yellow-400 bg-yellow-400/10 border-yellow-400/20",
+  low: "text-muted-foreground bg-muted border-border",
+};
+
+interface GmailFeedProps {
+  onContextChange?: (context: string) => void;
+}
+
+export function GmailFeed({ onContextChange }: GmailFeedProps) {
+  const [emails, setEmails] = useState<Email[]>([]);
+  const [connected, setConnected] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [disconnecting, setDisconnecting] = useState(false);
+
+  useEffect(() => {
+    fetchEmails();
+  }, []);
+
+  async function fetchEmails() {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/gmail/messages");
+      const data = await res.json();
+      if (data.connected && data.emails?.length > 0) {
+        setConnected(true);
+        setEmails(data.emails);
+        onContextChange?.(buildContext(data.emails));
+      } else {
+        setConnected(false);
+        setEmails(mockEmails);
+        onContextChange?.(buildContext(mockEmails));
+      }
+    } catch {
+      setConnected(false);
+      setEmails(mockEmails);
+      onContextChange?.(buildContext(mockEmails));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleDisconnect() {
+    setDisconnecting(true);
+    await fetch("/api/gmail/messages", { method: "DELETE" });
+    setConnected(false);
+    setEmails(mockEmails);
+    onContextChange?.(buildContext(mockEmails));
+    setDisconnecting(false);
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-4 py-2 border-b border-border flex items-center justify-between shrink-0">
+        <div className="flex items-center gap-2">
+          {connected ? (
+            <><div className="w-2 h-2 rounded-full bg-green-500" /><span className="text-xs text-muted-foreground">Live from Gmail</span></>
+          ) : (
+            <><div className="w-2 h-2 rounded-full bg-yellow-500" /><span className="text-xs text-muted-foreground">Using mock data</span></>
+          )}
+        </div>
+        {connected ? (
+          <Button variant="ghost" size="sm" className="text-xs h-6 text-muted-foreground"
+            onClick={handleDisconnect} disabled={disconnecting}>
+            Disconnect
+          </Button>
+        ) : (
+          <Button variant="outline" size="sm" className="text-xs h-6"
+            onClick={() => (window.location.href = "/api/auth/gmail")}>
+            Connect Gmail
+          </Button>
+        )}
+      </div>
+
+      {loading ? (
+        <div className="flex-1 flex items-center justify-center">
+          <div className="flex gap-1">
+            {[0, 150, 300].map(d => (
+              <span key={d} className="w-2 h-2 rounded-full bg-muted-foreground animate-bounce" style={{ animationDelay: `${d}ms` }} />
+            ))}
+          </div>
+        </div>
+      ) : (
+        <ScrollArea className="flex-1">
+          <div className="divide-y divide-border">
+            {emails.map(email => (
+              <div key={email.id} className={cn("px-4 py-3 hover:bg-accent/30 transition-colors cursor-pointer", !email.read && "border-l-2 border-l-primary")}>
+                <div className="flex items-start justify-between gap-2 mb-1">
+                  <div className="flex items-center gap-2 min-w-0">
+                    <span className={cn("font-medium text-sm", !email.read ? "text-foreground" : "text-muted-foreground")}>
+                      {email.from}
+                    </span>
+                    <Badge variant="outline" className={cn("text-xs shrink-0", priorityColors[email.priority])}>
+                      {email.priority}
+                    </Badge>
+                  </div>
+                  <span className="text-xs text-muted-foreground shrink-0">{email.time}</span>
+                </div>
+                <p className={cn("text-sm mb-1 truncate", !email.read ? "font-medium" : "text-muted-foreground")}>
+                  {email.subject}
+                </p>
+                <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">{email.body}</p>
+                {email.labels.length > 0 && (
+                  <div className="flex gap-1 mt-2">
+                    {email.labels.map(l => <Badge key={l} variant="secondary" className="text-xs">{l}</Badge>)}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+}
+
+function buildContext(emails: Email[]): string {
+  return emails.map(e =>
+    `From: ${e.from} | Subject: ${e.subject} | Priority: ${e.priority} | Read: ${e.read} | Body: ${e.body}`
+  ).join("\n");
+}
+
+// Static mock context export for SSR use
+export const gmailContext = buildContext(mockEmails);
diff --git a/app/components/test/test-dashboard.tsx b/app/components/test/test-dashboard.tsx
new file mode 100644
index 0000000..6374acf
--- /dev/null
+++ b/app/components/test/test-dashboard.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { useState } from "react";
+import { Card } from "@/components/ui/card";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { SlackFeed } from "@/components/agents/slack-feed";
+import { GmailFeed } from "./gmail-feed";
+import { GithubFeed } from "./github-feed";
+import { ChatPanel } from "./chat-panel";
+
+const agents = [
+  { id: "slack",  label: "💬 Slack",  description: "Live messages from your workspace" },
+  { id: "gmail",  label: "📧 Gmail",  description: "Gmail inbox" },
+  { id: "github", label: "⑂ GitHub", description: "PRs and notifications" },
+  { id: "global", label: "✦ Cross-agent", description: "Query across all integrations" },
+];
+
+export function TestDashboard() {
+  const [tab, setTab] = useState("slack");
+  const [gmailContext, setGmailContext] = useState<string | undefined>(undefined);
+  const [githubContext, setGithubContext] = useState<string | undefined>(undefined);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="text-xs text-muted-foreground uppercase tracking-widest mb-1">
+            Temp testing surface
+          </div>
+          <h1 className="text-2xl font-bold tracking-tight">Agent Testing</h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            Test your connected agents. Will be replaced by the full hire flow.
+          </p>
+        </div>
+        <span className="text-xs border border-dashed border-border rounded px-2 py-1 text-muted-foreground">
+          /test
+        </span>
+      </div>
+
+      <Tabs value={tab} onValueChange={setTab}>
+        <TabsList>
+          {agents.map(a => (
+            <TabsTrigger key={a.id} value={a.id}>{a.label}</TabsTrigger>
+          ))}
+        </TabsList>
+
+        <TabsContent value="slack" className="mt-4">
+          <AgentPane
+            agentId="slack"
+            description="Live Slack messages — connect your workspace to see real data"
+            feedSlot={<SlackFeed />}
+          />
+        </TabsContent>
+
+        <TabsContent value="gmail" className="mt-4">
+          <AgentPane
+            agentId="gmail"
+            description="Connect Gmail to let the agent read your real inbox"
+            feedSlot={<GmailFeed onContextChange={setGmailContext} />}
+            context={gmailContext}
+          />
+        </TabsContent>
+
+        <TabsContent value="github" className="mt-4">
+          <AgentPane
+            agentId="github"
+            description="Connect GitHub to see real PRs and notifications"
+            feedSlot={<GithubFeed onContextChange={setGithubContext} />}
+            context={githubContext}
+          />
+        </TabsContent>
+
+        <TabsContent value="global" className="mt-4">
+          <Card className="h-[560px] overflow-hidden flex flex-col">
+            <ChatPanel agentId="global" />
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+function AgentPane({
+  agentId,
+  description,
+  feedSlot,
+  context,
+}: {
+  agentId: string;
+  description: string;
+  feedSlot: React.ReactNode;
+  context?: string;
+}) {
+  return (
+    <div className="space-y-2">
+      <p className="text-xs text-muted-foreground">{description}</p>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4" style={{ height: 560 }}>
+        <Card className="overflow-hidden flex flex-col">
+          <div className="flex-1 overflow-hidden">
+            {feedSlot}
+          </div>
+        </Card>
+        <Card className="overflow-hidden flex flex-col">
+          <ChatPanel agentId={agentId} context={context} />
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/app/lib/backend-client.ts b/app/lib/backend-client.ts
new file mode 100644
index 0000000..67455bd
--- /dev/null
+++ b/app/lib/backend-client.ts
@@ -0,0 +1,61 @@
+/**
+ * Server-side only — never import this from a client component.
+ * All calls require BACKEND_API_KEY which must stay out of the browser bundle.
+ */
+
+const BACKEND_URL = process.env.BACKEND_URL || "http://localhost:8000";
+const BACKEND_API_KEY = process.env.BACKEND_API_KEY || "";
+
+async function backendFetch(path: string, options: RequestInit = {}) {
+  const res = await fetch(`${BACKEND_URL}${path}`, {
+    ...options,
+    headers: {
+      "Content-Type": "application/json",
+      "X-API-Key": BACKEND_API_KEY,
+      ...options.headers,
+    },
+  });
+  return res;
+}
+
+export async function storeCredential(
+  service: string,
+  token: string,
+  scopes: string[]
+) {
+  return backendFetch("/credentials", {
+    method: "POST",
+    body: JSON.stringify({ service, token, scopes }),
+  });
+}
+
+export async function deleteCredential(service: string) {
+  return backendFetch(`/credentials/${service}`, { method: "DELETE" });
+}
+
+export async function getSlackMessages() {
+  return backendFetch("/gateway/slack/messages");
+}
+
+export async function disconnectSlack() {
+  return backendFetch("/gateway/slack/disconnect", { method: "DELETE" });
+}
+
+export async function hireEmployee(role: string, config?: Record<string, unknown>) {
+  return backendFetch("/agents", {
+    method: "POST",
+    body: JSON.stringify({ role, config: config || {} }),
+  });
+}
+
+export async function listEmployees() {
+  return backendFetch("/agents");
+}
+
+export async function fireEmployee(agentId: string) {
+  return backendFetch(`/agents/${agentId}`, { method: "DELETE" });
+}
+
+export function getSlackOAuthUrl() {
+  return `${BACKEND_URL}/auth/slack?api_key=${encodeURIComponent(BACKEND_API_KEY)}`;
+}
diff --git a/app/lib/mock-data.ts b/app/lib/mock-data.ts
new file mode 100644
index 0000000..caa1253
--- /dev/null
+++ b/app/lib/mock-data.ts
@@ -0,0 +1,43 @@
+// Minimal stub — keeps existing components compiling.
+// Real data flows through API routes. Remove once components are rewritten.
+
+export interface SlackMessage {
+  id: string;
+  channel: string;
+  user: string;
+  avatar: string;
+  text: string;
+  time: string;
+  reactions?: { emoji: string; count: number }[];
+}
+
+export interface Agent {
+  id: string;
+  name: string;
+  description: string;
+  integration: "gmail" | "slack" | "github" | "custom";
+  status: "active" | "idle" | "error";
+  installed: boolean;
+  lastActivity: string;
+  unread?: number;
+  icon: string;
+}
+
+export const mockSlackMessages: SlackMessage[] = [
+  { id: "s1", channel: "#engineering", user: "Jordan Kim", avatar: "JK", text: "Heads up — staging is down, looks like the deploy at 9am broke the auth middleware.", time: "9:22 AM", reactions: [{ emoji: "👀", count: 4 }] },
+  { id: "s2", channel: "#engineering", user: "Taylor Moss", avatar: "TM", text: "On it. Rolling back to the previous image now.", time: "9:24 AM", reactions: [{ emoji: "🙏", count: 6 }] },
+  { id: "s3", channel: "#product", user: "Alex Park", avatar: "AP", text: "Marketing signed off on the pricing copy — just waiting on legal review.", time: "9:31 AM", reactions: [{ emoji: "✅", count: 3 }] },
+  { id: "s4", channel: "#general", user: "Jamie Wu", avatar: "JW", text: "Reminder: All Hands slides due by tomorrow EOD.", time: "8:55 AM", reactions: [{ emoji: "🎉", count: 8 }] },
+];
+
+export const installedAgents: Agent[] = [
+  { id: "inbox", name: "Inbox Agent", description: "Summarizes emails, detects priority, and drafts replies", integration: "gmail", status: "active", installed: true, lastActivity: "2 min ago", unread: 5, icon: "📧" },
+  { id: "slack", name: "Slack Agent", description: "Summarizes discussions and extracts action items", integration: "slack", status: "active", installed: true, lastActivity: "5 min ago", unread: 12, icon: "💬" },
+  { id: "github", name: "GitHub Agent", description: "Tracks PRs, issues, and suggests code improvements", integration: "github", status: "active", installed: true, lastActivity: "10 min ago", unread: 3, icon: "🐙" },
+];
+
+export const marketplaceAgents: Agent[] = [
+  { id: "linear", name: "Linear Agent", description: "Track issues, sprints, and project progress", integration: "custom", status: "idle", installed: false, lastActivity: "never", icon: "📐" },
+  { id: "notion", name: "Notion Agent", description: "Sync docs, wikis, and project notes", integration: "custom", status: "idle", installed: false, lastActivity: "never", icon: "📝" },
+  { id: "jira", name: "Jira Agent", description: "Manage tickets, sprints, and backlogs", integration: "custom", status: "idle", installed: false, lastActivity: "never", icon: "🎯" },
+];
diff --git a/app/next.config.ts b/app/next.config.ts
index e9ffa30..438703f 100644
--- a/app/next.config.ts
+++ b/app/next.config.ts
@@ -1,7 +1,11 @@
 import type { NextConfig } from "next";
 
+const ngrokHost = (process.env.NEXT_PUBLIC_BASE_URL || "")
+  .replace("https://", "")
+  .replace("http://", "");
+
 const nextConfig: NextConfig = {
-  /* config options here */
+  allowedDevOrigins: ngrokHost ? [ngrokHost] : [],
 };
 
 export default nextConfig;
diff --git a/backend/.env.example b/backend/.env.example
index 533781e..6b391e0 100644
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -12,7 +12,18 @@ OPENCLAW_AGENT_IMAGE=openclaw/agent:latest
 # LLM
 LLM_API_KEY=your-llm-api-key
 
+# OAuth — Slack
+SLACK_CLIENT_ID=your-slack-client-id
+SLACK_CLIENT_SECRET=your-slack-client-secret
+
+# OAuth — Gmail / Google
+# Create at https://console.cloud.google.com → APIs & Services → Credentials → OAuth 2.0 Client ID
+# Enable: Gmail API  |  Authorized redirect URI: http://localhost:3000/api/auth/gmail/callback
+GOOGLE_CLIENT_ID=your-google-client-id
+GOOGLE_CLIENT_SECRET=your-google-client-secret
+
 # Platform
 PLATFORM_HOST=0.0.0.0
 PLATFORM_PORT=8000
 PLATFORM_GATEWAY_URL=http://host.docker.internal:8000/gateway
+FRONTEND_URL=http://localhost:3000
diff --git a/backend/app/config.py b/backend/app/config.py
index a18b5c6..3373048 100644
--- a/backend/app/config.py
+++ b/backend/app/config.py
@@ -4,11 +4,11 @@
 
 class Settings(BaseSettings):
     # Supabase
-    supabase_url: str
-    supabase_key: str
+    supabase_url: str = ""
+    supabase_key: str = ""
 
     # Encryption
-    encryption_key: str
+    encryption_key: str = ""
 
     # Docker
     docker_network: str = "openclaw-agents"
@@ -16,11 +16,21 @@ class Settings(BaseSettings):
 
     # LLM
     llm_api_key: str = ""
+    anthropic_api_key: str = ""
+
+    # OAuth — Slack
+    slack_client_id: str = ""
+    slack_client_secret: str = ""
+
+    # OAuth — Gmail / Google
+    google_client_id: str = ""
+    google_client_secret: str = ""
 
     # Platform
     platform_host: str = "0.0.0.0"
     platform_port: int = 8000
     platform_gateway_url: str = "http://host.docker.internal:8000/gateway"
+    frontend_url: str = "http://localhost:3000"
 
     model_config = {"env_file": ".env", "env_file_encoding": "utf-8"}
 
diff --git a/backend/app/main.py b/backend/app/main.py
index edc0d97..0a3ee00 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -1,16 +1,26 @@
 from fastapi import FastAPI
-from app.routers import users, agents, gateway, credentials, tasks
+from fastapi.middleware.cors import CORSMiddleware
+from app.routers import users, agents, gateway, credentials, auth, tasks
 
 app = FastAPI(
-    title="OpenClaw Platform",
-    description="Multi-tenant platform for hiring OpenClaw agents as specialized roles",
+    title="AgentOS Platform",
+    description="Multi-tenant platform for hiring AI employees",
     version="0.1.0",
 )
 
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:3000"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
 app.include_router(users.router)
 app.include_router(agents.router)
 app.include_router(credentials.router)
 app.include_router(gateway.router)
+app.include_router(auth.router)
 app.include_router(tasks.router)
 
 
diff --git a/backend/app/routers/auth.py b/backend/app/routers/auth.py
new file mode 100644
index 0000000..b5036b5
--- /dev/null
+++ b/backend/app/routers/auth.py
@@ -0,0 +1,180 @@
+"""OAuth routes — handles provider consent flows and stores tokens in the credential vault."""
+
+import httpx
+from fastapi import APIRouter, HTTPException, Query
+from fastapi.responses import RedirectResponse
+from app.config import get_settings
+from app.models.user import UserModel
+from app.services.credential_store import CredentialStore
+
+router = APIRouter(prefix="/auth", tags=["auth"])
+
+SLACK_SCOPES = "channels:history,channels:read,users:read,reactions:read"
+
+GMAIL_SCOPES = " ".join([
+    "https://www.googleapis.com/auth/gmail.readonly",
+    "https://www.googleapis.com/auth/gmail.send",
+    "https://www.googleapis.com/auth/gmail.modify",
+    "https://www.googleapis.com/auth/userinfo.email",
+])
+
+
+@router.get("/slack")
+def slack_oauth_start(api_key: str = Query(...)):
+    """
+    Initiate Slack OAuth. The frontend passes the user's api_key as a query param
+    so the callback knows which user to store the token for.
+    The api_key is used as the OAuth state parameter (transmitted only server-to-server).
+    """
+    settings = get_settings()
+    if not settings.slack_client_id:
+        raise HTTPException(500, "Slack OAuth not configured")
+
+    user = UserModel.get_by_api_key(api_key)
+    if not user:
+        raise HTTPException(401, "Invalid API key")
+
+    redirect_uri = f"{settings.frontend_url}/api/auth/slack/callback"
+    url = (
+        "https://slack.com/oauth/v2/authorize"
+        f"?client_id={settings.slack_client_id}"
+        f"&user_scope={SLACK_SCOPES}"
+        f"&redirect_uri={redirect_uri}"
+        f"&state={api_key}"
+    )
+    return RedirectResponse(url)
+
+
+@router.get("/slack/callback")
+async def slack_oauth_callback(
+    code: str = Query(None),
+    state: str = Query(None),
+    error: str = Query(None),
+):
+    """
+    Slack redirects here after the user consents.
+    Exchange the code for a token and store it in the credential vault.
+    Redirect the browser back to the frontend.
+    """
+    settings = get_settings()
+
+    if error or not code or not state:
+        return RedirectResponse(
+            f"{settings.frontend_url}/agent/slack?error={error or 'missing_code'}"
+        )
+
+    user = UserModel.get_by_api_key(state)
+    if not user:
+        return RedirectResponse(
+            f"{settings.frontend_url}/agent/slack?error=invalid_state"
+        )
+
+    redirect_uri = f"{settings.frontend_url}/api/auth/slack/callback"
+    async with httpx.AsyncClient() as client:
+        resp = await client.post(
+            "https://slack.com/api/oauth.v2.access",
+            data={
+                "client_id": settings.slack_client_id,
+                "client_secret": settings.slack_client_secret,
+                "code": code,
+                "redirect_uri": redirect_uri,
+            },
+        )
+    data = resp.json()
+
+    if not data.get("ok"):
+        return RedirectResponse(
+            f"{settings.frontend_url}/agent/slack?error={data.get('error', 'oauth_failed')}"
+        )
+
+    user_token = data.get("authed_user", {}).get("access_token")
+    if not user_token:
+        return RedirectResponse(
+            f"{settings.frontend_url}/agent/slack?error=no_user_token"
+        )
+
+    scopes = data.get("authed_user", {}).get("scope", "").split(",")
+    CredentialStore.store(user["id"], "slack", user_token, scopes)
+
+    return RedirectResponse(
+        f"{settings.frontend_url}/agent/slack?connected=true"
+    )
+
+
+@router.get("/gmail")
+def gmail_oauth_start(api_key: str = Query(...)):
+    """Initiate Gmail OAuth. State carries the api_key so the callback knows which user to store the token for."""
+    settings = get_settings()
+    if not settings.google_client_id:
+        raise HTTPException(500, "Gmail OAuth not configured")
+
+    user = UserModel.get_by_api_key(api_key)
+    if not user:
+        raise HTTPException(401, "Invalid API key")
+
+    redirect_uri = f"{settings.frontend_url}/api/auth/gmail/callback"
+    url = (
+        "https://accounts.google.com/o/oauth2/v2/auth"
+        f"?client_id={settings.google_client_id}"
+        f"&redirect_uri={redirect_uri}"
+        f"&response_type=code"
+        f"&scope={GMAIL_SCOPES}"
+        f"&access_type=offline"
+        f"&prompt=consent"
+        f"&state={api_key}"
+    )
+    return RedirectResponse(url)
+
+
+@router.get("/gmail/callback")
+async def gmail_oauth_callback(
+    code: str = Query(None),
+    state: str = Query(None),
+    error: str = Query(None),
+):
+    """Google redirects here after consent. Exchange code for tokens and store in credential vault."""
+    settings = get_settings()
+
+    if error or not code or not state:
+        return RedirectResponse(
+            f"{settings.frontend_url}/agent/gmail?error={error or 'missing_code'}"
+        )
+
+    user = UserModel.get_by_api_key(state)
+    if not user:
+        return RedirectResponse(
+            f"{settings.frontend_url}/agent/gmail?error=invalid_state"
+        )
+
+    redirect_uri = f"{settings.frontend_url}/api/auth/gmail/callback"
+    async with httpx.AsyncClient() as client:
+        resp = await client.post(
+            "https://oauth2.googleapis.com/token",
+            data={
+                "client_id": settings.google_client_id,
+                "client_secret": settings.google_client_secret,
+                "code": code,
+                "redirect_uri": redirect_uri,
+                "grant_type": "authorization_code",
+            },
+        )
+    data = resp.json()
+
+    if "error" in data:
+        return RedirectResponse(
+            f"{settings.frontend_url}/agent/gmail?error={data.get('error', 'oauth_failed')}"
+        )
+
+    # Store both access_token and refresh_token so the AI employee can renew without re-auth
+    token_payload = {
+        "access_token": data["access_token"],
+        "refresh_token": data.get("refresh_token", ""),
+        "token_type": data.get("token_type", "Bearer"),
+        "expires_in": data.get("expires_in"),
+    }
+    scopes = data.get("scope", "").split(" ")
+    CredentialStore.store(user["id"], "gmail", token_payload, scopes)
+
+    return RedirectResponse(
+        f"{settings.frontend_url}/agent/gmail?connected=true"
+    )
diff --git a/backend/app/routers/gateway.py b/backend/app/routers/gateway.py
index 4d582a9..0c02d00 100644
--- a/backend/app/routers/gateway.py
+++ b/backend/app/routers/gateway.py
@@ -1,12 +1,16 @@
+import time
+from datetime import datetime
 from fastapi import APIRouter, Depends, HTTPException
 from pydantic import BaseModel
 from app.auth import get_current_user
 from app.services.gateway import GatewayService
+from app.services.credential_store import CredentialStore
+import httpx
 
 router = APIRouter(prefix="/gateway", tags=["gateway"])
 
 
-# --- Request schemas ---
+# ── Request schemas ────────────────────────────────────────────────────────────
 
 class EmailRequest(BaseModel):
     to: str
@@ -24,7 +28,7 @@ class DiscordRequest(BaseModel):
     content: str
 
 
-# --- Endpoints ---
+# ── Write endpoints ────────────────────────────────────────────────────────────
 
 @router.post("/email/send")
 async def send_email(
@@ -63,3 +67,101 @@ async def send_discord_message(
         )
     except ValueError as e:
         raise HTTPException(400, str(e))
+
+
+# ── Read endpoints ─────────────────────────────────────────────────────────────
+
+@router.get("/slack/messages")
+async def get_slack_messages(user: dict = Depends(get_current_user)):
+    """Fetch recent messages from the user's connected Slack workspace."""
+    cred = CredentialStore.get(user["id"], "slack")
+    if not cred:
+        return {"connected": False, "messages": []}
+
+    token = cred["token"]
+    user_cache: dict[str, str] = {}
+
+    async with httpx.AsyncClient() as client:
+        channels_resp = await client.get(
+            "https://slack.com/api/conversations.list",
+            params={
+                "types": "public_channel,private_channel",
+                "limit": 20,
+                "exclude_archived": "true",
+            },
+            headers={"Authorization": f"Bearer {token}"},
+        )
+        channels_data = channels_resp.json()
+
+    if not channels_data.get("ok"):
+        return {"connected": False, "error": channels_data.get("error")}
+
+    channels = [c for c in channels_data.get("channels", []) if c.get("is_member")]
+    messages = []
+
+    async with httpx.AsyncClient() as client:
+        for channel in channels[:5]:
+            hist_resp = await client.get(
+                "https://slack.com/api/conversations.history",
+                params={"channel": channel["id"], "limit": 3},
+                headers={"Authorization": f"Bearer {token}"},
+            )
+            hist = hist_resp.json()
+            if not hist.get("ok") or not hist.get("messages"):
+                continue
+
+            for msg in hist["messages"]:
+                if not msg.get("user") or not msg.get("text"):
+                    continue
+
+                uid = msg["user"]
+                if uid not in user_cache:
+                    u_resp = await client.get(
+                        "https://slack.com/api/users.info",
+                        params={"user": uid},
+                        headers={"Authorization": f"Bearer {token}"},
+                    )
+                    u_data = u_resp.json()
+                    if u_data.get("ok"):
+                        profile = u_data["user"]["profile"]
+                        name = profile.get("display_name") or profile.get("real_name") or uid
+                    else:
+                        name = uid
+                    user_cache[uid] = name
+
+                name = user_cache[uid]
+                ts = float(msg["ts"])
+                now = time.time()
+                diff_mins = int((now - ts) / 60)
+                diff_hours = int((now - ts) / 3600)
+
+                if diff_mins < 60:
+                    time_label = f"{diff_mins}m ago"
+                elif diff_hours < 24:
+                    time_label = f"{diff_hours}h ago"
+                else:
+                    time_label = datetime.fromtimestamp(ts).strftime("%b %d")
+
+                initials = "".join(w[0] for w in name.split() if w).upper()[:2]
+
+                messages.append({
+                    "id": msg["ts"],
+                    "channel": f"#{channel['name']}",
+                    "user": name,
+                    "avatar": initials,
+                    "text": msg["text"],
+                    "time": time_label,
+                    "reactions": [
+                        {"emoji": f":{r['name']}:", "count": r["count"]}
+                        for r in msg.get("reactions", [])
+                    ],
+                })
+
+    messages.sort(key=lambda m: float(m["id"]), reverse=True)
+    return {"connected": True, "messages": messages}
+
+
+@router.delete("/slack/disconnect")
+def disconnect_slack(user: dict = Depends(get_current_user)):
+    CredentialStore.delete(user["id"], "slack")
+    return {"ok": True}
diff --git a/backend/migrations/002_add_github_credential.sql b/backend/migrations/002_add_github_credential.sql
new file mode 100644
index 0000000..f2c194e
--- /dev/null
+++ b/backend/migrations/002_add_github_credential.sql
@@ -0,0 +1,9 @@
+-- Expand the service allowlist to include github and hubspot
+-- Run in Supabase SQL Editor
+
+alter table credentials
+  drop constraint if exists credentials_service_check;
+
+alter table credentials
+  add constraint credentials_service_check
+  check (service in ('gmail', 'slack', 'discord', 'github', 'hubspot'));