puter/zopu-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auth flow refactor, project requests, and routing updates

Browse Source 
- 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
This commit is contained in:
Miniputer
2026-07-27 18:47:43 +05:30
parent cc47007fa9
commit 1855735245
24 changed files with 340 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/react-router.config.ts
View File

@@ -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;

40
apps/web/src/components/slice-one/slice-one-page.tsx
View File

@@ -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") {

63
apps/web/src/hooks/use-project-workspace.ts
View File

@@ -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(

13
apps/web/src/index.css
View File

@@ -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%,

64
apps/web/src/lib/auth.server.ts Normal file
View File

@@ -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;
};

62
apps/web/src/lib/projects/project-requests.ts Normal file
View File

@@ -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()
);
};

35
apps/web/src/root.tsx
View File

@@ -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>

2
apps/web/src/routes.ts
View File

@@ -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"),

33
apps/web/src/routes/app/layout.tsx
View File

@@ -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 />;
}

24
apps/web/src/routes/auth/layout.tsx
View File

@@ -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">

12
apps/web/src/routes/auth/login/page.tsx
View File

@@ -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 })
}
/>
);
}