diff --git a/web/app/steps/page.tsx b/web/app/(app)/steps/page.tsx
similarity index 100%
rename from web/app/steps/page.tsx
rename to web/app/(app)/steps/page.tsx
diff --git a/web/app/workflows/[id]/page.tsx b/web/app/(app)/workflows/[id]/page.tsx
similarity index 100%
rename from web/app/workflows/[id]/page.tsx
rename to web/app/(app)/workflows/[id]/page.tsx
diff --git a/web/app/workflows/[id]/runs/[runId]/page.tsx b/web/app/(app)/workflows/[id]/runs/[runId]/page.tsx
similarity index 100%
rename from web/app/workflows/[id]/runs/[runId]/page.tsx
rename to web/app/(app)/workflows/[id]/runs/[runId]/page.tsx
diff --git a/web/app/workflows/[id]/runs/page.tsx b/web/app/(app)/workflows/[id]/runs/page.tsx
similarity index 100%
rename from web/app/workflows/[id]/runs/page.tsx
rename to web/app/(app)/workflows/[id]/runs/page.tsx
diff --git a/web/app/workflows/page.tsx b/web/app/(app)/workflows/page.tsx
similarity index 100%
rename from web/app/workflows/page.tsx
rename to web/app/(app)/workflows/page.tsx
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index c181f0d..eabf01e 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -1,8 +1,6 @@
import type { Metadata } from "next";
import "./globals.css";
import { Providers } from "@/components/Providers";
-import { AuthProvider } from "@/components/AuthProvider";
-import { Sidebar } from "@/components/Sidebar";
export const metadata: Metadata = {
title: "Vantage",
@@ -17,16 +15,7 @@ export default function RootLayout({
return (
-
-
-
-
-
- {children}
-
-
-
-
+
{children}
);
diff --git a/web/app/login/page.tsx b/web/app/login/page.tsx
new file mode 100644
index 0000000..c669e2e
--- /dev/null
+++ b/web/app/login/page.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { auth } from "@/lib/api";
+import { Button, Card } from "@/components/ui";
+
+export default function LoginPage() {
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+
+ // If the instance has no users yet, first-run setup is the only way in.
+ useEffect(() => {
+ auth
+ .bootstrapStatus()
+ .then((s) => {
+ if (s.needs_setup) window.location.href = "/setup";
+ })
+ .catch(() => {
+ // Status unavailable — let the login form stand.
+ });
+ }, []);
+
+ const { mutate: signIn, isPending, error } = useMutation({
+ mutationFn: () => auth.login(email, password),
+ onSuccess: () => {
+ window.location.href = "/";
+ },
+ });
+
+ function handleSubmit(e: React.FormEvent) {
+ e.preventDefault();
+ signIn();
+ }
+
+ return (
+
+ );
+}
diff --git a/web/app/setup/page.tsx b/web/app/setup/page.tsx
new file mode 100644
index 0000000..36b2809
--- /dev/null
+++ b/web/app/setup/page.tsx
@@ -0,0 +1,169 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { auth } from "@/lib/api";
+import { Button, Card } from "@/components/ui";
+
+const MIN_PASSWORD_LENGTH = 8;
+
+/**
+ * Org hosts are `
.vantage.` and the apex is `vantage.` (see
+ * auth.hostSlug on the server). Build the new org's URL by prepending — or
+ * replacing — the leftmost label. Hosts that don't match that shape (localhost,
+ * bare IPs) have no per-org subdomain, so stay put.
+ */
+function orgUrlForSlug(slug: string): string {
+ if (typeof window === "undefined") return "/";
+ const { protocol, host } = window.location;
+ const [hostname, port] = host.split(":");
+ const parts = hostname.split(".");
+
+ if (parts.length < 2 || parts[parts.length - 1] === "localhost") return "/";
+
+ const rest = parts[0] === "vantage" ? parts : parts.slice(1);
+ if (rest[0] !== "vantage") return "/";
+
+ const newHost = [slug, ...rest].join(".") + (port ? `:${port}` : "");
+ return `${protocol}//${newHost}/`;
+}
+
+export default function SetupPage() {
+ const [orgName, setOrgName] = useState("");
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [confirm, setConfirm] = useState("");
+ const [validationError, setValidationError] = useState(null);
+
+ // Setup is a one-shot route; once an owner exists it must not be reachable.
+ useEffect(() => {
+ auth
+ .bootstrapStatus()
+ .then((s) => {
+ if (!s.needs_setup) window.location.href = "/login";
+ })
+ .catch(() => {
+ // Status unavailable — let the form stand; the backend re-checks on submit.
+ });
+ }, []);
+
+ const { mutate: bootstrap, isPending, error } = useMutation({
+ mutationFn: () => auth.bootstrap({ org_name: orgName, email, password }),
+ onSuccess: (res) => {
+ window.location.href = orgUrlForSlug(res.slug);
+ },
+ });
+
+ function handleSubmit(e: React.FormEvent) {
+ e.preventDefault();
+ if (password.length < MIN_PASSWORD_LENGTH) {
+ setValidationError(`Password must be at least ${MIN_PASSWORD_LENGTH} characters.`);
+ return;
+ }
+ if (password !== confirm) {
+ setValidationError("Passwords do not match.");
+ return;
+ }
+ setValidationError(null);
+ bootstrap();
+ }
+
+ // Prefer the backend's message (it owns the real validation rules).
+ const message = validationError ?? (error ? (error as Error).message : null);
+
+ const inputClass =
+ "w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary focus:border-accent/50 focus:outline-none focus:ring-1 focus:ring-accent/30";
+
+ return (
+
+
+
+
Welcome to Vantage
+
+ Create your organization and its owner account to get started.
+
+
+
+
+
+
+
+