Auth flow refactor, project requests, and routing updates

- Add server-side auth token loader (auth.server.ts) with SSR cookie forwarding
- Add project-requests client for explicit/signal/existing issue dispatch
- Refactor auth layout and app layout for SSR auth gating
- Update auth-client and auth-provider for convex token flow
- Extend project-issue primitives with request result schema
- Wire projectIssues backend mutation for request handling
- Update slice-one page and project-workspace hook
- Adjust routes (remove unused), Caddy config, and env templates

apps/web/react-router.config.ts

@@ -1,7 +1,7 @@
 import type { Config } from "@react-router/dev/config";
 
 export default {
-  // Desktop addons package static web assets; SSR output cannot be bundled
-  ssr: false,
   appDirectory: "src",
+
+  ssr: true,
 } satisfies Config;

apps/web/src/components/slice-one/slice-one-page.tsx

@@ -90,6 +90,30 @@ const WorkCard = ({ onSourceSelect, work }: WorkCardProps) => {
   );
 };
 
+const ConversationLoading = () => (
+  <output
+    aria-label="Loading conversation"
+    className="mx-auto flex min-h-[55vh] w-full max-w-md flex-col justify-center gap-4"
+  >
+    <span className="h-16 w-4/5 animate-pulse rounded-sm bg-[#e3e0d5]" />
+    <span className="ml-auto h-12 w-3/5 animate-pulse rounded-sm bg-[#dedbd0]" />
+    <span className="h-24 w-full animate-pulse rounded-sm bg-[#e3e0d5]" />
+    <span className="sr-only">Loading conversation…</span>
+  </output>
+);
+
+const ConversationEmptyState = () => (
+  <div className="grid min-h-[55vh] place-items-center text-center">
+    <div>
+      <MessageSquareText className="mx-auto size-7 text-[#8a887f]" />
+      <h1 className="mt-4 text-xl font-semibold">What should move forward?</h1>
+      <p className="mx-auto mt-2 max-w-sm text-sm leading-6 text-[#69675f]">
+        Describe an outcome or problem. Casual conversation stays conversation.
+      </p>
+    </div>
+  </div>
+);
+
 export const SliceOnePage = () => {
   const slice = useSliceOne();
   const viewportStyle = useVisualViewportStyle();
@@ -233,19 +257,11 @@ export const SliceOnePage = () => {
         </header>
         <Conversation className="min-h-0 flex-1">
           <ConversationContent className="mx-auto min-h-full w-full max-w-2xl gap-4 px-4 py-5 sm:px-6">
+            {!slice.agent.historyReady && timeline.length === 0 ? (
+              <ConversationLoading />
+            ) : null}
             {slice.agent.historyReady && timeline.length === 0 ? (
-              <div className="grid min-h-[55vh] place-items-center text-center">
-                <div>
-                  <MessageSquareText className="mx-auto size-7 text-[#8a887f]" />
-                  <h1 className="mt-4 text-xl font-semibold">
-                    What should move forward?
-                  </h1>
-                  <p className="mx-auto mt-2 max-w-sm text-sm leading-6 text-[#69675f]">
-                    Describe an outcome or problem. Casual conversation stays
-                    conversation.
-                  </p>
-                </div>
-              </div>
+              <ConversationEmptyState />
             ) : null}
             {timeline.map((item) => {
               if (item.kind === "work") {

apps/web/src/hooks/use-project-workspace.ts

@@ -1,19 +1,20 @@
+import { useConvexAccessToken } from "@code/auth/web";
 import { api } from "@code/backend/convex/_generated/api";
 import type { Id } from "@code/backend/convex/_generated/dataModel";
-import { useFlueClient } from "@flue/react";
-import { useAction, useMutation, useQuery } from "convex/react";
+import { useAction, useQuery } from "convex/react";
 import { useState } from "react";
 
 import {
   buildProjectLoopView,
   summarizeProjectIssues,
 } from "@/lib/projects/project-evidence";
+import { requestProjectIssue } from "@/lib/projects/project-requests";
 
 const errorMessage = (error: unknown) =>
   error instanceof Error ? error.message : String(error);
 
 export const useProjectWorkspace = () => {
-  const flueClient = useFlueClient();
+  const resolveAccessToken = useConvexAccessToken();
   const projects = useQuery(api.projects.list);
   const [selectedProjectId, setSelectedProjectId] =
     useState<Id<"projects"> | null>(null);
@@ -25,10 +26,7 @@ export const useProjectWorkspace = () => {
   const [pendingAction, setPendingAction] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const importPublicGit = useAction(api.projects.importPublicGit);
-  const createIssue = useMutation(api.projectIssues.create);
-  const createIssueFromSignal = useMutation(api.projectIssues.createFromSignal);
-  const beginIssue = useMutation(api.projectIssues.begin);
-  const markDispatchFailed = useMutation(api.projectIssues.markDispatchFailed);
+
   const activeProjectId =
     selectedProjectId ??
     (projects?.[0]?.id as unknown as Id<"projects">) ??
@@ -92,12 +90,20 @@ export const useProjectWorkspace = () => {
     setPendingAction("issue");
     setError(null);
     try {
-      const issueId = await createIssue({
-        body: nextBody,
-        projectId: activeProjectId,
-        title: nextTitle,
+      const accessToken = await resolveAccessToken();
+      if (!accessToken) {
+        throw new Error("Authentication required");
+      }
+      const outcome = await requestProjectIssue({
+        accessToken,
+        request: {
+          body: nextBody,
+          kind: "explicit",
+          projectId: activeProjectId,
+          title: nextTitle,
+        },
       });
-      setSelectedIssueId(issueId);
+      setSelectedIssueId(outcome.issueId as Id<"projectIssues">);
       setIssueTitle("");
       setIssueBody("");
     } catch (caughtError) {
@@ -111,8 +117,15 @@ export const useProjectWorkspace = () => {
     setPendingAction(`signal:${signalId}`);
     setError(null);
     try {
-      const outcome = await createIssueFromSignal({ signalId });
-      setSelectedIssueId(outcome.issueId);
+      const accessToken = await resolveAccessToken();
+      if (!accessToken) {
+        throw new Error("Authentication required");
+      }
+      const outcome = await requestProjectIssue({
+        accessToken,
+        request: { kind: "signal", signalId },
+      });
+      setSelectedIssueId(outcome.issueId as Id<"projectIssues">);
     } catch (caughtError) {
       setError(errorMessage(caughtError));
     } finally {
@@ -120,23 +133,21 @@ export const useProjectWorkspace = () => {
     }
   };
 
-  const startIssue = async (
-    issueId: Id<"projectIssues">,
-    issueNumber: number,
-    title: string
-  ) => {
+  const startIssue = async (issueId: Id<"projectIssues">) => {
     const actionKey = `issue:${issueId}`;
     setPendingAction(actionKey);
     setError(null);
     try {
-      await beginIssue({ issueId });
-      await flueClient.agents.send("project-manager", String(issueId), {
-        message: `Start project issue ${issueNumber}: ${title}. Read the bound context and complete the workflow.`,
+      const accessToken = await resolveAccessToken();
+      if (!accessToken) {
+        throw new Error("Authentication required");
+      }
+      await requestProjectIssue({
+        accessToken,
+        request: { issueId, kind: "existing" },
       });
     } catch (caughtError) {
-      const message = errorMessage(caughtError);
-      await markDispatchFailed({ error: message, issueId });
-      setError(message);
+      setError(errorMessage(caughtError));
     } finally {
       setPendingAction(null);
     }
@@ -148,7 +159,7 @@ export const useProjectWorkspace = () => {
       setError("That work unit is no longer available");
       return;
     }
-    await startIssue(issue._id, issue.number, issue.title);
+    await startIssue(issue._id);
   };
   const selectedProject =
     projects?.find(

apps/web/src/index.css

@@ -75,6 +75,19 @@ html.slice-one-viewport-lock body {
   min-height: 1.75rem;
 }
 
+.route-progress-bar {
+  animation: route-progress 900ms ease-in-out infinite;
+}
+
+@keyframes route-progress {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(400%);
+  }
+}
+
 @keyframes response-dot {
   0%,
   60%,

apps/web/src/lib/auth.server.ts

@@ -0,0 +1,64 @@
+import { env } from "@code/env/web";
+import { redirect } from "react-router";
+
+interface AuthLoaderData {
+  readonly token: string | null;
+}
+
+const tokenUrl = new URL("/api/auth/convex/token", env.VITE_AUTH_URL);
+
+export const loadAuthToken = async (
+  request: Request
+): Promise<AuthLoaderData> => {
+  const cookie = request.headers.get("cookie");
+  if (!cookie) {
+    return { token: null };
+  }
+
+  const headers = new Headers({ cookie });
+  headers.set("host", tokenUrl.host);
+  const response = await fetch(tokenUrl, { headers });
+  if (response.status === 401) {
+    return { token: null };
+  }
+  if (!response.ok) {
+    throw new Response("Authentication service unavailable", { status: 503 });
+  }
+
+  const payload: unknown = await response.json();
+  if (
+    typeof payload !== "object" ||
+    payload === null ||
+    !("token" in payload) ||
+    typeof payload.token !== "string"
+  ) {
+    throw new Response("Authentication service returned an invalid response", {
+      status: 502,
+    });
+  }
+  return { token: payload.token };
+};
+
+export const requireAuthToken = async (
+  request: Request
+): Promise<AuthLoaderData> => {
+  const auth = await loadAuthToken(request);
+  if (!auth.token) {
+    const requestUrl = new URL(request.url);
+    const returnTo = `${requestUrl.pathname}${requestUrl.search}`;
+    throw redirect(`/login?returnTo=${encodeURIComponent(returnTo)}`);
+  }
+  return auth;
+};
+
+export const redirectAuthenticated = async (
+  request: Request
+): Promise<AuthLoaderData> => {
+  const auth = await loadAuthToken(request);
+  if (auth.token) {
+    const requestUrl = new URL(request.url);
+    const returnTo = requestUrl.searchParams.get("returnTo");
+    throw redirect(returnTo?.startsWith("/") ? returnTo : "/");
+  }
+  return auth;
+};

apps/web/src/lib/projects/project-requests.ts

@@ -0,0 +1,62 @@
+import type { Id } from "@code/backend/convex/_generated/dataModel";
+import { env } from "@code/env/web";
+import { ProjectIssueRequestResult } from '@code/primitives/project-issue';
+import type { ProjectIssueRequestResult as ProjectIssueRequestResultValue } from '@code/primitives/project-issue';
+import { Schema } from "effect";
+
+const projectRequestsUrl = new URL(
+  "project-requests",
+  `${env.VITE_FLUE_URL.replace(/\/+$/u, "")}/`
+);
+
+interface RequestProjectIssueOptions {
+  readonly accessToken: string;
+  readonly request:
+    | {
+        readonly issueId: Id<"projectIssues">;
+        readonly kind: "existing";
+      }
+    | {
+        readonly body: string;
+        readonly kind: "explicit";
+        readonly projectId: Id<"projects">;
+        readonly title: string;
+      }
+    | {
+        readonly kind: "signal";
+        readonly signalId: Id<"signals">;
+      };
+}
+
+const responseError = async (response: Response): Promise<Error> => {
+  const payload: unknown = await response.json().catch(() => null);
+  if (
+    typeof payload === "object" &&
+    payload !== null &&
+    "error" in payload &&
+    typeof payload.error === "string"
+  ) {
+    return new Error(payload.error);
+  }
+  return new Error(`Project request failed (${response.status})`);
+};
+
+export const requestProjectIssue = async ({
+  accessToken,
+  request,
+}: RequestProjectIssueOptions): Promise<ProjectIssueRequestResultValue> => {
+  const response = await fetch(projectRequestsUrl, {
+    body: JSON.stringify(request),
+    headers: {
+      authorization: `Bearer ${accessToken}`,
+      "content-type": "application/json",
+    },
+    method: "POST",
+  });
+  if (!response.ok) {
+    throw await responseError(response);
+  }
+  return Schema.decodeUnknownSync(ProjectIssueRequestResult)(
+    await response.json()
+  );
+};

apps/web/src/root.tsx

@@ -2,9 +2,10 @@ import { useConvexAccessToken, WebAuthProvider } from "@code/auth/web";
 import { env } from "@code/env/web";
 import { Toaster } from "@code/ui/components/sonner";
 import { FlueProvider } from "@flue/react";
+import { createFlueClient } from "@flue/sdk";
 
 import "./index.css";
-import { createFlueClient } from "@flue/sdk";
+import { LoaderCircle } from "lucide-react";
 import { useMemo } from "react";
 import {
   isRouteErrorResponse,
@@ -13,12 +14,16 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
+  useNavigation,
 } from "react-router";
 
 import type { Route } from "./+types/root";
 import { ThemeProvider } from "./components/theme-provider";
+import { loadAuthToken } from "./lib/auth.server";
 import { createFlueFetch } from "./lib/flue-transport";
 
+export const loader = ({ request }: Route.LoaderArgs) => loadAuthToken(request);
+
 export const links: Route.LinksFunction = () => [
   { href: "https://fonts.googleapis.com", rel: "preconnect" },
   {
@@ -79,8 +84,31 @@ export const Layout = ({ children }: { children: React.ReactNode }) => (
   </html>
 );
 
-const App = () => (
-  <WebAuthProvider>
+const RouteProgress = () => {
+  const navigation = useNavigation();
+  if (!navigation.location) {
+    return null;
+  }
+  return (
+    <output
+      aria-label="Loading page"
+      className="fixed inset-x-0 top-0 z-50 h-0.5 overflow-hidden bg-[#d7d3c7]"
+    >
+      <div className="route-progress-bar h-full w-1/3 bg-[#7f9130]" />
+    </output>
+  );
+};
+
+export const HydrateFallback = () => (
+  <main className="grid min-h-svh place-items-center bg-[#f2f0e7] text-[#69675f]">
+    <div className="flex items-center gap-2 text-sm">
+      <LoaderCircle className="size-4 animate-spin" /> Loading Zopu…
+    </div>
+  </main>
+);
+
+const App = ({ loaderData }: Route.ComponentProps) => (
+  <WebAuthProvider initialToken={loaderData.token}>
     <AuthenticatedFlueProvider>
       <ThemeProvider
         attribute="class"
@@ -89,6 +117,7 @@ const App = () => (
         disableTransitionOnChange
         storageKey="vite-ui-theme"
       >
+        <RouteProgress />
         <Outlet />
         <Toaster richColors />
       </ThemeProvider>

apps/web/src/routes.ts

@@ -2,8 +2,6 @@ import { index, layout, route } from "@react-router/dev/routes";
 import type { RouteConfig } from "@react-router/dev/routes";
 
 export default [
-  // Standalone chat page — no auth, mobile-first, talks to the zopu server.
-  route("chat", "./routes/standalone/chat/page.tsx"),
   layout("./routes/auth/layout.tsx", [
     route("login", "./routes/auth/login/page.tsx"),
     route("signup", "./routes/auth/signup/page.tsx"),

apps/web/src/routes/app/layout.tsx

@@ -1,29 +1,12 @@
-import { useWebAuth } from "@code/auth/web";
-import { Navigate, Outlet, useLocation } from "react-router";
+import { Outlet } from "react-router";
+
+import { requireAuthToken } from "@/lib/auth.server";
+
+import type { Route } from "./+types/layout";
+
+export const loader = ({ request }: Route.LoaderArgs) =>
+  requireAuthToken(request);
 
 export default function AppLayout() {
-  const auth = useWebAuth();
-  const location = useLocation();
-
-  if (auth.status === "loading") {
-    return (
-      <div className="grid min-h-svh place-items-center text-sm text-muted-foreground">
-        Loading…
-      </div>
-    );
-  }
-
-  if (auth.status === "inconsistent") {
-    return (
-      <div className="grid min-h-svh place-items-center text-sm text-muted-foreground">
-        Your session could not be verified
-      </div>
-    );
-  }
-
-  if (auth.status === "unauthenticated") {
-    return <Navigate replace state={{ from: location.pathname }} to="/login" />;
-  }
-
   return <Outlet />;
 }

apps/web/src/routes/auth/layout.tsx

@@ -1,21 +1,13 @@
-import { useWebAuth } from "@code/auth/web";
-import { Navigate, Outlet } from "react-router";
+import { Outlet } from "react-router";
+
+import { redirectAuthenticated } from "@/lib/auth.server";
+
+import type { Route } from "./+types/layout";
+
+export const loader = ({ request }: Route.LoaderArgs) =>
+  redirectAuthenticated(request);
 
 export default function AuthLayout() {
-  const auth = useWebAuth();
-
-  if (auth.status === "loading") {
-    return (
-      <div className="grid min-h-svh place-items-center text-sm text-muted-foreground">
-        Loading…
-      </div>
-    );
-  }
-
-  if (auth.status === "authenticated") {
-    return <Navigate replace to="/" />;
-  }
-
   return (
     <main className="grid min-h-svh place-items-center bg-muted/30 p-6 md:p-10">
       <div className="w-full max-w-sm">

apps/web/src/routes/auth/login/page.tsx

@@ -1,5 +1,5 @@
 import { LoginForm } from "@code/auth/web";
-import { useNavigate } from "react-router";
+import { useNavigate, useSearchParams } from "react-router";
 
 import type { Route } from "./+types/page";
 
@@ -10,6 +10,14 @@ export const meta = (_args: Route.MetaArgs) => [
 
 export default function LoginRoute() {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const returnTo = searchParams.get("returnTo");
 
-  return <LoginForm onSuccess={() => navigate("/", { replace: true })} />;
+  return (
+    <LoginForm
+      onSuccess={() =>
+        navigate(returnTo?.startsWith("/") ? returnTo : "/", { replace: true })
+      }
+    />
+  );
 }