feat(ui): add auth pages, company rail, inbox redesign, and page improvements

Add Auth sign-in/sign-up page and InviteLanding page for invite acceptance.
Add CloudAccessGate that checks deployment mode and redirects to /auth when
session is required. Add CompanyRail with drag-and-drop company switching.
Add MarkdownBody prose renderer. Redesign Inbox with category filters and
inline join-request approval. Refactor AgentDetail to overview/configure/runs
views with claude-login support. Replace navigate() anti-patterns with <Link>
components in Dashboard and MetricCard. Add live-run indicators in sidebar
agents. Fix LiveUpdatesProvider cache key resolution for issue identifiers.
Add auth, health, and access API clients.

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

ui/src/api/access.ts

@@ -0,0 +1,52 @@
+import type { JoinRequest } from "@paperclip/shared";
+import { api } from "./client";
+
+type InviteSummary = {
+  id: string;
+  companyId: string | null;
+  inviteType: "company_join" | "bootstrap_ceo";
+  allowedJoinTypes: "human" | "agent" | "both";
+  expiresAt: string;
+};
+
+type AcceptInviteInput =
+  | { requestType: "human" }
+  | {
+    requestType: "agent";
+    agentName: string;
+    adapterType?: string;
+    capabilities?: string | null;
+    agentDefaultsPayload?: Record<string, unknown> | null;
+  };
+
+export const accessApi = {
+  createCompanyInvite: (
+    companyId: string,
+    input: {
+      allowedJoinTypes?: "human" | "agent" | "both";
+      expiresInHours?: number;
+      defaultsPayload?: Record<string, unknown> | null;
+    } = {},
+  ) =>
+    api.post<{
+      id: string;
+      token: string;
+      inviteUrl: string;
+      expiresAt: string;
+      allowedJoinTypes: "human" | "agent" | "both";
+    }>(`/companies/${companyId}/invites`, input),
+
+  getInvite: (token: string) => api.get<InviteSummary>(`/invites/${token}`),
+
+  acceptInvite: (token: string, input: AcceptInviteInput) =>
+    api.post<JoinRequest | { bootstrapAccepted: true; userId: string }>(`/invites/${token}/accept`, input),
+
+  listJoinRequests: (companyId: string, status: "pending_approval" | "approved" | "rejected" = "pending_approval") =>
+    api.get<JoinRequest[]>(`/companies/${companyId}/join-requests?status=${status}`),
+
+  approveJoinRequest: (companyId: string, requestId: string) =>
+    api.post<JoinRequest>(`/companies/${companyId}/join-requests/${requestId}/approve`, {}),
+
+  rejectJoinRequest: (companyId: string, requestId: string) =>
+    api.post<JoinRequest>(`/companies/${companyId}/join-requests/${requestId}/reject`, {}),
+};

ui/src/api/agents.ts

@@ -22,6 +22,15 @@ export interface AdapterModel {
   label: string;
 }
 
+export interface ClaudeLoginResult {
+  exitCode: number | null;
+  signal: string | null;
+  timedOut: boolean;
+  loginUrl: string | null;
+  stdout: string;
+  stderr: string;
+}
+
 export interface OrgNode {
   id: string;
   name: string;
@@ -87,4 +96,5 @@ export const agentsApi = {
       idempotencyKey?: string | null;
     },
   ) => api.post<HeartbeatRun | { status: "skipped" }>(`/agents/${id}/wakeup`, data),
+  loginWithClaude: (id: string) => api.post<ClaudeLoginResult>(`/agents/${id}/claude-login`, {}),
 };

ui/src/api/auth.ts

@@ -0,0 +1,74 @@
+export type AuthSession = {
+  session: { id: string; userId: string };
+  user: { id: string; email: string | null; name: string | null };
+};
+
+function toSession(value: unknown): AuthSession | null {
+  if (!value || typeof value !== "object") return null;
+  const record = value as Record<string, unknown>;
+  const sessionValue = record.session;
+  const userValue = record.user;
+  if (!sessionValue || typeof sessionValue !== "object") return null;
+  if (!userValue || typeof userValue !== "object") return null;
+  const session = sessionValue as Record<string, unknown>;
+  const user = userValue as Record<string, unknown>;
+  if (typeof session.id !== "string" || typeof session.userId !== "string") return null;
+  if (typeof user.id !== "string") return null;
+  return {
+    session: { id: session.id, userId: session.userId },
+    user: {
+      id: user.id,
+      email: typeof user.email === "string" ? user.email : null,
+      name: typeof user.name === "string" ? user.name : null,
+    },
+  };
+}
+
+async function authPost(path: string, body: Record<string, unknown>) {
+  const res = await fetch(`/api/auth${path}`, {
+    method: "POST",
+    credentials: "include",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  const payload = await res.json().catch(() => null);
+  if (!res.ok) {
+    const message =
+      (payload as { error?: { message?: string } | string } | null)?.error &&
+      typeof (payload as { error?: { message?: string } | string }).error === "object"
+        ? ((payload as { error?: { message?: string } }).error?.message ?? `Request failed: ${res.status}`)
+        : (payload as { error?: string } | null)?.error ?? `Request failed: ${res.status}`;
+    throw new Error(message);
+  }
+  return payload;
+}
+
+export const authApi = {
+  getSession: async (): Promise<AuthSession | null> => {
+    const res = await fetch("/api/auth/get-session", {
+      credentials: "include",
+      headers: { Accept: "application/json" },
+    });
+    if (res.status === 401) return null;
+    const payload = await res.json().catch(() => null);
+    if (!res.ok) {
+      throw new Error(`Failed to load session (${res.status})`);
+    }
+    const direct = toSession(payload);
+    if (direct) return direct;
+    const nested = payload && typeof payload === "object" ? toSession((payload as Record<string, unknown>).data) : null;
+    return nested;
+  },
+
+  signInEmail: async (input: { email: string; password: string }) => {
+    await authPost("/sign-in/email", input);
+  },
+
+  signUpEmail: async (input: { name: string; email: string; password: string }) => {
+    await authPost("/sign-up/email", input);
+  },
+
+  signOut: async () => {
+    await authPost("/sign-out", {});
+  },
+};

ui/src/api/client.ts

@@ -1,5 +1,17 @@
 const BASE = "/api";
 
+export class ApiError extends Error {
+  status: number;
+  body: unknown;
+
+  constructor(message: string, status: number, body: unknown) {
+    super(message);
+    this.name = "ApiError";
+    this.status = status;
+    this.body = body;
+  }
+}
+
 async function request<T>(path: string, init?: RequestInit): Promise<T> {
   const headers = new Headers(init?.headers ?? undefined);
   const body = init?.body;
@@ -9,11 +21,16 @@ async function request<T>(path: string, init?: RequestInit): Promise<T> {
 
   const res = await fetch(`${BASE}${path}`, {
     headers,
+    credentials: "include",
     ...init,
   });
   if (!res.ok) {
-    const body = await res.json().catch(() => null);
-    throw new Error(body?.error ?? `Request failed: ${res.status}`);
+    const errorBody = await res.json().catch(() => null);
+    throw new ApiError(
+      (errorBody as { error?: string } | null)?.error ?? `Request failed: ${res.status}`,
+      res.status,
+      errorBody,
+    );
   }
   return res.json();
 }

ui/src/api/health.ts

@@ -0,0 +1,20 @@
+export type HealthStatus = {
+  status: "ok";
+  deploymentMode?: "local_trusted" | "authenticated";
+  deploymentExposure?: "private" | "public";
+  authReady?: boolean;
+  bootstrapStatus?: "ready" | "bootstrap_pending";
+};
+
+export const healthApi = {
+  get: async (): Promise<HealthStatus> => {
+    const res = await fetch("/api/health", {
+      credentials: "include",
+      headers: { Accept: "application/json" },
+    });
+    if (!res.ok) {
+      throw new Error(`Failed to load health (${res.status})`);
+    }
+    return res.json();
+  },
+};

ui/src/api/index.ts

@@ -1,4 +1,7 @@
 export { api } from "./client";
+export { authApi } from "./auth";
+export { healthApi } from "./health";
+export { accessApi } from "./access";
 export { companiesApi } from "./companies";
 export { agentsApi } from "./agents";
 export { projectsApi } from "./projects";

ui/src/api/issues.ts

@@ -2,7 +2,12 @@ import type { Approval, Issue, IssueAttachment, IssueComment } from "@paperclip/
 import { api } from "./client";
 
 export const issuesApi = {
-  list: (companyId: string) => api.get<Issue[]>(`/companies/${companyId}/issues`),
+  list: (companyId: string, filters?: { projectId?: string }) => {
+    const params = new URLSearchParams();
+    if (filters?.projectId) params.set("projectId", filters.projectId);
+    const qs = params.toString();
+    return api.get<Issue[]>(`/companies/${companyId}/issues${qs ? `?${qs}` : ""}`);
+  },
   get: (id: string) => api.get<Issue>(`/issues/${id}`),
   create: (companyId: string, data: Record<string, unknown>) =>
     api.post<Issue>(`/companies/${companyId}/issues`, data),