lael-labs/executor

bun.lock+6−1

         "radix-ui": "^1.4.3",
         "react": "19.2.3",
         "react-dom": "19.2.3",
+        "react-router": "^7.9.5",
         "shiki": "^3.22.0",
         "sonner": "^2.0.7",
         "streamdown": "^2.1.0",
     "@effect/rpc": ["@effect/rpc@0.72.2", "", { "dependencies": { "msgpackr": "^1.11.4" }, "peerDependencies": { "@effect/platform": "^0.93.3", "effect": "^3.19.5" } }, "sha512-BmTXybXCOq96D2r9mvSW/YdiTQs5CStnd4II+lfVKrMr3pMNERKLZ2LG37Tfm4Sy3Q8ire6IVVKO/CN+VR0uQQ=="],
-    "@elysiajs/eden": ["@elysiajs/eden@1.4.6", "", { "peerDependencies": { "elysia": ">=1.4.19" } }, "sha512-Tsa4NwXEWg/u73vWiYZQ3L5/ecgZSxqiEjYwpS+4qBKXeTZqZKl2hcgHJSVBL+InEDMi35Xugct7qyAXE5oM4Q=="],
+    "@elysiajs/eden": ["@elysiajs/eden@1.4.8", "", { "peerDependencies": { "elysia": ">=1.4.19" } }, "sha512-a7oct2kFa49tH+GawZtSUCZR2rQgucNYgGLz8alXUqb4IrU3PASA0T4zXJw4MhdV1Xb6vyiR7p7kkqJcVjgbkA=="],
     "@emnapi/core": ["@emnapi/core@1.8.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" } }, "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg=="],
     "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
+    "react-router": ["react-router@7.13.0", "", { "dependencies": { "cookie": "^1.0.1", "set-cookie-parser": "^2.6.0" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" }, "optionalPeers": ["react-dom"] }, "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw=="],
     "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
     "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
     "serve-static": ["serve-static@2.2.1", "", { "dependencies": { "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "parseurl": "^1.3.3", "send": "^1.2.0" } }, "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw=="],
+    "set-cookie-parser": ["set-cookie-parser@2.7.2", "", {}, "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="],
     "set-function-length": ["set-function-length@1.2.2", "", { "dependencies": { "define-data-property": "^1.1.4", "es-errors": "^1.3.0", "function-bind": "^1.1.2", "get-intrinsic": "^1.2.4", "gopd": "^1.0.1", "has-property-descriptors": "^1.0.2" } }, "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg=="],
     "set-function-name": ["set-function-name@2.0.2", "", { "dependencies": { "define-data-property": "^1.1.4", "es-errors": "^1.3.0", "functions-have-names": "^1.2.3", "has-property-descriptors": "^1.0.2" } }, "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ=="],

executor/apps/web/next.config.ts+21−0

@@ -1,4 +1,17 @@
1	import type { NextConfig } from "next";	1	import type { NextConfig } from "next";
		2
		3	const appShellRewriteExclusions = [
		4	"api(?:/\|$)",
		5	"_next(?:/\|$)",
		6	"favicon\\.ico$",
		7	"sign-in(?:/\|$)",
		8	"sign-up(?:/\|$)",
		9	"sign-out(?:/\|$)",
		10	"callback(?:/\|$)",
		11	"static-app-shell(?:/\|$)",
		12	".\\..",
		13	].join("\|");
		14
2	const nextConfig: NextConfig = {	15	const nextConfig: NextConfig = {
3	transpilePackages: ["@executor/contracts"],	16	transpilePackages: ["@executor/contracts"],
4	env: {	17	env: {
@@ -8,6 +21,14 @@ const nextConfig: NextConfig = { · 3 unmodified lines
8	NEXT_PUBLIC_WORKOS_CLIENT_ID: process.env.WORKOS_CLIENT_ID,	21	NEXT_PUBLIC_WORKOS_CLIENT_ID: process.env.WORKOS_CLIENT_ID,
9	NEXT_PUBLIC_STRIPE_PRICE_ID: process.env.STRIPE_PRICE_ID,	22	NEXT_PUBLIC_STRIPE_PRICE_ID: process.env.STRIPE_PRICE_ID,
10	},	23	},
		24	async rewrites() {
		25	return [
		26	{
		27	source: `/((?!${appShellRewriteExclusions}).*)`,
		28	destination: "/static-app-shell",
		29	},
		30	];
		31	},
11	};	32	};
12		33
13	export default nextConfig;	34	export default nextConfig;

executor/apps/web/package.json+1−0

@@ -28,6 +28,7 @@ · 27 unmodified lines
28	"radix-ui": "^1.4.3",	28	"radix-ui": "^1.4.3",
29	"react": "19.2.3",	29	"react": "19.2.3",
30	"react-dom": "19.2.3",	30	"react-dom": "19.2.3",
		31	"react-router": "^7.9.5",
31	"shiki": "^3.22.0",	32	"shiki": "^3.22.0",
32	"sonner": "^2.0.7",	33	"sonner": "^2.0.7",
33	"streamdown": "^2.1.0",	34	"streamdown": "^2.1.0",

executor/apps/web/src/app/approvals/page.tsx+2−2

@@ -1,5 +1,5 @@
1	import { ApprovalsView } from "@/components/approvals-view";	1	import { StaticAppShell } from "@/components/static-app-shell";
2		2
3	export default function ApprovalsPage() {	3	export default function ApprovalsPage() {
4	return <ApprovalsView />;	4	return <StaticAppShell />;
5	}	5	}

executor/apps/web/src/app/layout.tsx+1−2

 import { JetBrains_Mono, Inter } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 import { Toaster } from "@/components/ui/sonner";
-import { AppShell } from "@/components/app-shell";
 import { AppConvexProvider } from "@/lib/convex-provider";
 import { QueryProvider } from "@/lib/query-provider";
 import { SessionProvider } from "@/lib/session-context";
           <AppConvexProvider>
             <QueryProvider>
               <SessionProvider>
-                <AppShell>{children}</AppShell>
+                {children}
               </SessionProvider>
             </QueryProvider>
           </AppConvexProvider>

executor/apps/web/src/app/onboarding/page.tsx+2−134

@@ -1,137 +1,5 @@
1	"use client";	1	import { StaticAppShell } from "@/components/static-app-shell";
2
3	import { useState, type FormEvent } from "react";
4	import Link from "next/link";
5	import { useRouter } from "next/navigation";
6	import { useMutation } from "convex/react";
7	import { Building2 } from "lucide-react";
8	import { Button } from "@/components/ui/button";
9	import {
10	Card,
11	CardContent,
12	CardDescription,
13	CardFooter,
14	CardHeader,
15	CardTitle,
16	} from "@/components/ui/card";
17	import { Input } from "@/components/ui/input";
18	import { convexApi } from "@/lib/convex-api";
19	import { useSession } from "@/lib/session-context";
20		2
21	export default function OnboardingPage() {	3	export default function OnboardingPage() {
22	const router = useRouter();	4	return <StaticAppShell />;
23	const createOrganization = useMutation(convexApi.organizations.create);
24	const {
25	isSignedInToWorkos,
26	organizations,
27	organizationsLoading,
28	switchWorkspace,
29	} = useSession();
30
31	const [name, setName] = useState("");
32	const [error, setError] = useState<string \| null>(null);
33	const [creating, setCreating] = useState(false);
34
35	const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
36	event.preventDefault();
37	const trimmed = name.trim();
38	if (trimmed.length < 2) {
39	setError("Organization name must be at least 2 characters.");
40	return;
41	}
42
43	setCreating(true);
44	setError(null);
45	try {
46	const result = await createOrganization({ name: trimmed });
47	switchWorkspace(result.workspace.id);
48	router.replace("/");
49	} catch (cause) {
50	setError(cause instanceof Error ? cause.message : "Failed to create organization");
51	} finally {
52	setCreating(false);
53	}
54	};
55
56	if (!isSignedInToWorkos) {
57	return (
58	<div className="min-h-[70vh] grid place-items-center">
59	<Card className="w-full max-w-xl border-border">
60	<CardHeader>
61	<CardTitle>Sign in required</CardTitle>
62	<CardDescription>
63	You need to sign in before setting up an organization.
64	</CardDescription>
65	</CardHeader>
66	<CardFooter className="justify-between gap-2">
67	<Button asChild variant="outline">
68	<Link href="/">Back</Link>
69	</Button>
70	<Button asChild>
71	<Link href="/sign-in">Sign in</Link>
72	</Button>
73	</CardFooter>
74	</Card>
75	</div>
76	);
77	}
78
79	if (!organizationsLoading && organizations.length > 0) {
80	return (
81	<div className="min-h-[70vh] grid place-items-center">
82	<Card className="w-full max-w-xl border-border">
83	<CardHeader>
84	<CardTitle>Organization ready</CardTitle>
85	<CardDescription>
86	Your account is already linked to an organization.
87	</CardDescription>
88	</CardHeader>
89	<CardFooter>
90	<Button asChild className="w-full">
91	<Link href="/">Continue to dashboard</Link>
92	</Button>
93	</CardFooter>
94	</Card>
95	</div>
96	);
97	}
98
99	return (
100	<div className="min-h-[80vh] grid place-items-center">
101	<Card className="w-full max-w-xl border-border">
102	<CardHeader>
103	<div className="mb-2 inline-flex h-9 w-9 items-center justify-center rounded-md border border-border bg-muted">
104	<Building2 className="h-4 w-4 text-muted-foreground" />
105	</div>
106	<CardTitle>Name your organization</CardTitle>
107	<CardDescription>
108	This is your team space. You can invite members and create more workspaces later.
109	</CardDescription>
110	</CardHeader>
111	<form onSubmit={handleSubmit}>
112	<CardContent className="space-y-2">
113	<Input
114	value={name}
115	onChange={(event) => {
116	setError(null);
117	setName(event.target.value);
118	}}
119	placeholder="Acme"
120	maxLength={64}
121	autoFocus
122	/>
123	{error ? <p className="text-xs text-destructive">{error}</p> : null}
124	</CardContent>
125	<CardFooter className="justify-end gap-2">
126	<Button asChild variant="outline" disabled={creating}>
127	<Link href="/sign-out">Sign out</Link>
128	</Button>
129	<Button type="submit" disabled={creating}>
130	{creating ? "Creating..." : "Continue"}
131	</Button>
132	</CardFooter>
133	</form>
134	</Card>
135	</div>
136	);
137	}	5	}

executor/apps/web/src/app/organization/page.tsx+2−7

-import { Suspense } from "react";
+import { StaticAppShell } from "@/components/static-app-shell";
-import { OrganizationSettingsView } from "@/components/organization-settings-view";
 export default function OrganizationPage() {
-  return (
+  return <StaticAppShell />;
-    <Suspense>
-      <OrganizationSettingsView />
-    </Suspense>
-  );
 }

executor/apps/web/src/app/page.tsx+2−2

@@ -1,5 +1,5 @@
1	import { DashboardView } from "@/components/dashboard-view";	1	import { StaticAppShell } from "@/components/static-app-shell";
2		2
3	export default function DashboardPage() {	3	export default function DashboardPage() {
4	return <DashboardView />;	4	return <StaticAppShell />;
5	}	5	}

executor/apps/web/src/app/static-app-shell/page.tsx+5−0

@@ -0,0 +1,5 @@
	1	import { StaticAppShell } from "@/components/static-app-shell";
	2
	3	export default function StaticAppShellPage() {
	4	return <StaticAppShell />;
	5	}

executor/apps/web/src/app/tasks/page.tsx+2−7

-import { Suspense } from "react";
+import { StaticAppShell } from "@/components/static-app-shell";
-import { TasksView } from "@/components/tasks-view";
 export default function TasksPage() {
-  return (
+  return <StaticAppShell />;
-    <Suspense>
-      <TasksView />
-    </Suspense>
-  );
 }

executor/apps/web/src/app/tools/page.tsx+3−14

@@ -1,16 +1,5 @@
1	import { ToolsView } from "@/components/tools-view";	1	import { StaticAppShell } from "@/components/static-app-shell";
2		2
3	export default async function ToolsPage({	3	export default function ToolsPage() {
4	searchParams,	4	return <StaticAppShell />;
5	}: {
6	searchParams: Promise<Record<string, string \| string[] \| undefined>>;
7	}) {
8	const params = await searchParams;
9	const source = typeof params.source === "string" ? params.source : null;
10
11	return (
12	<div className="h-full min-h-0">
13	<ToolsView initialSource={source} />
14	</div>
15	);
16	}	5	}

executor/apps/web/src/components/app-shell.tsx+86−17

 "use client";
 import { Suspense, useEffect, useMemo, useState, type FormEvent } from "react";
-import Link from "next/link";
+import { Link, useLocation, useNavigate, useSearchParams } from "react-router";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useMutation } from "convex/react";
 import {
   LayoutDashboard,
 import { Input } from "@/components/ui/input";
 import { useSession } from "@/lib/session-context";
 import { convexApi } from "@/lib/convex-api";
-import { workosEnabled } from "@/lib/auth-capabilities";
+import { anonymousDemoEnabled, workosEnabled } from "@/lib/auth-capabilities";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { ApprovalNotifier } from "@/components/approval-notifier";
 import { cn } from "@/lib/utils";
 ];
 function NavLinks({ onClick }: { onClick?: () => void }) {
-  const pathname = usePathname();
+  const location = useLocation();
+  const pathname = location.pathname;
   return (
     <nav className="flex flex-col gap-1">
         return (
           <Link
             key={item.href}
-            href={item.href}
+            to={item.href}
             onClick={onClick}
             className={cn(
               "flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium transition-colors",
 }
 function WorkspaceSelector({ inHeader = false }: { inHeader?: boolean }) {
-  const router = useRouter();
+  const navigate = useNavigate();
   const createOrganizationMutation = useMutation(convexApi.organizations.create);
   const {
     context,
     mode,
-    clientConfig,
     workspaces,
     switchWorkspace,
     creatingWorkspace,
                             className="inline-flex h-5 w-5 items-center justify-center rounded-sm border border-border text-muted-foreground hover:bg-accent hover:text-foreground"
                             onClick={() => {
                               switchWorkspace(settingsWorkspace.id);
-                              router.push("/organization?tab=members");
+                              navigate("/organization?tab=members");
                             }}
                             aria-label={`Open ${group.organizationName} settings`}
                             title="Organization settings"
 function SessionInfo() {
   const {
     loading,
-    clientConfig,
     isSignedInToWorkos,
     workosProfile,
     context,
     workspaces,
     resetWorkspace,
   } = useSession();
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
   const deleteCurrentAccountMutation = useMutation(convexApi.accounts.deleteCurrentAccount);
   const [accountSettingsOpen, setAccountSettingsOpen] = useState(false);
   const [deleteConfirmText, setDeleteConfirmText] = useState("");
                   Account Settings
                 </DropdownMenuItem>
                 <DropdownMenuItem asChild className="text-xs">
-                  <Link href="/sign-out">Sign out</Link>
+                  <Link to="/sign-out" reloadDocument>Sign out</Link>
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
         ) : (
           <div className="px-3 py-3 space-y-2">
             {workosEnabled ? (
-              <Link href={signInHref} className="block">
+              <Link to={signInHref} reloadDocument className="block">
                 <Button
                   variant="outline"
                   className="w-full h-9 justify-center gap-2 text-xs font-medium"
   );
 }
+function NoOrganizationModal({ enabled }: { enabled: boolean }) {
+  const {
+    loading,
+    organizations,
+    organizationsLoading,
+    context,
+    isSignedInToWorkos,
+    createAnonymousWorkspace,
+    creatingAnonymousWorkspace,
+  } = useSession();
+  const [error, setError] = useState<string | null>(null);
+  const shouldShow = enabled
+    && !loading
+    && !organizationsLoading
+    && !context
+    && !isSignedInToWorkos
+    && organizations.length === 0;
+  const handleCreateAnonymousWorkspace = async () => {
+    setError(null);
+    try {
+      await createAnonymousWorkspace();
+    } catch (cause) {
+      const message = cause instanceof Error ? cause.message : "Failed to create anonymous workspace";
+      setError(message);
+    }
+  };
+  return (
+    <Dialog open={shouldShow}>
+      <DialogContent
+        showCloseButton={false}
+        onEscapeKeyDown={(event) => event.preventDefault()}
+        onInteractOutside={(event) => event.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle>Choose how to continue</DialogTitle>
+          <DialogDescription>
+            Sign in to access your organizations, or create an anonymous workspace to continue as a guest.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2">
+          {workosEnabled ? (
+            <Button asChild className="w-full" disabled={creatingAnonymousWorkspace}>
+              <Link to="/sign-in" reloadDocument className="gap-2">
+                <LogIn className="h-4 w-4" />
+                Sign in
+              </Link>
+            </Button>
+          ) : null}
+          <Button
+            variant="outline"
+            className="w-full"
+            onClick={handleCreateAnonymousWorkspace}
+            disabled={creatingAnonymousWorkspace || !anonymousDemoEnabled}
+          >
+            {creatingAnonymousWorkspace ? "Creating anonymous workspace..." : "Create anonymous workspace"}
+          </Button>
+          {!anonymousDemoEnabled ? (
+            <p className="text-xs text-muted-foreground">Anonymous workspace creation is disabled.</p>
+          ) : null}
+          {error ? <p className="text-xs text-destructive">{error}</p> : null}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
 export function AppShell({ children }: { children: React.ReactNode }) {
-  const pathname = usePathname();
+  const location = useLocation();
-  const router = useRouter();
+  const pathname = location.pathname;
+  const navigate = useNavigate();
   const { loading, organizations, organizationsLoading, isSignedInToWorkos } = useSession();
   const onOnboardingRoute = pathname.startsWith("/onboarding");
     }
     if (needsOnboarding && !onOnboardingRoute) {
-      router.replace("/onboarding");
+      navigate("/onboarding", { replace: true });
       return;
     }
     if (!needsOnboarding && onOnboardingRoute && organizations.length > 0) {
-      router.replace("/");
+      navigate("/", { replace: true });
     }
   }, [
     loading,
     needsOnboarding,
     onOnboardingRoute,
     organizations.length,
-    router,
+    navigate,
   ]);
   if (isSignedInToWorkos && organizationsLoading && !onOnboardingRoute) {
   return (
     <div className="flex min-h-screen">
       <ApprovalNotifier />
+      <NoOrganizationModal enabled />
       <Sidebar />
       <div className="flex-1 flex flex-col min-w-0">
         <MobileHeader />

executor/apps/web/src/components/approval-notifier.tsx+4−4

@@ -1,7 +1,7 @@
1	"use client";	1	"use client";
2		2
3	import { useEffect, useRef } from "react";	3	import { useEffect, useRef } from "react";
4	import { useRouter } from "next/navigation";	4	import { useNavigate } from "react-router";
5	import { useQuery } from "convex/react";	5	import { useQuery } from "convex/react";
6	import { toast } from "sonner";	6	import { toast } from "sonner";
7	import { useSession } from "@/lib/session-context";	7	import { useSession } from "@/lib/session-context";
@@ -9,7 +9,7 @@ import { convexApi } from "@/lib/convex-api"; · 1 unmodified line
9	import type { PendingApprovalRecord } from "@/lib/types";	9	import type { PendingApprovalRecord } from "@/lib/types";
10		10
11	export function ApprovalNotifier() {	11	export function ApprovalNotifier() {
12	const router = useRouter();	12	const navigate = useNavigate();
13	const { context } = useSession();	13	const { context } = useSession();
14	const seenApprovalIdsRef = useRef<Set<string>>(new Set());	14	const seenApprovalIdsRef = useRef<Set<string>>(new Set());
15	const activeWorkspaceRef = useRef<string \| null>(null);	15	const activeWorkspaceRef = useRef<string \| null>(null);
@@ -58,12 +58,12 @@ export function ApprovalNotifier() { · 42 unmodified lines
58	: "Open approvals to review pending tool calls.",	58	: "Open approvals to review pending tool calls.",
59	action: {	59	action: {
60	label: "Review",	60	label: "Review",
61	onClick: () => router.push("/approvals"),	61	onClick: () => navigate("/approvals"),
62	},	62	},
63	},	63	},
64	);	64	);
65		65
66	}, [approvals, context, router]);	66	}, [approvals, context, navigate]);
67		67
68	return null;	68	return null;
69	}	69	}

executor/apps/web/src/components/billing-view.tsx+2−2

@@ -1,7 +1,7 @@
1	"use client";	1	"use client";
2		2
3	import { useMemo, useState } from "react";	3	import { useMemo, useState } from "react";
4	import { useSearchParams } from "next/navigation";	4	import { useSearchParams } from "react-router";
5	import { useAction, useMutation, useQuery } from "convex/react";	5	import { useAction, useMutation, useQuery } from "convex/react";
6	import { AlertTriangle, BadgeCheck, CreditCard, RefreshCcw } from "lucide-react";	6	import { AlertTriangle, BadgeCheck, CreditCard, RefreshCcw } from "lucide-react";
7	import { PageHeader } from "@/components/page-header";	7	import { PageHeader } from "@/components/page-header";
@@ -50,7 +50,7 @@ function formatTimestamp(value: number \| null \| undefined): string { · 42 unmodified lines
50		50
51	export function BillingView({ showHeader = true }: BillingViewProps) {	51	export function BillingView({ showHeader = true }: BillingViewProps) {
52	const { context, organizations, organizationsLoading, workspaces } = useSession();	52	const { context, organizations, organizationsLoading, workspaces } = useSession();
53	const searchParams = useSearchParams();	53	const [searchParams] = useSearchParams();
54	const [actionState, setActionState] = useState<"idle" \| "running" \| "success" \| "error">("idle");	54	const [actionState, setActionState] = useState<"idle" \| "running" \| "success" \| "error">("idle");
55	const [actionMessage, setActionMessage] = useState<string \| null>(null);	55	const [actionMessage, setActionMessage] = useState<string \| null>(null);
56	const [priceId, setPriceId] = useState(() => process.env.NEXT_PUBLIC_STRIPE_PRICE_ID ?? "");	56	const [priceId, setPriceId] = useState(() => process.env.NEXT_PUBLIC_STRIPE_PRICE_ID ?? "");

executor/apps/web/src/components/dashboard-view.tsx+8−8

@@ -1,7 +1,7 @@
1	"use client";	1	"use client";
2		2
3	import { useMemo } from "react";	3	import { useMemo } from "react";
4	import { useRouter } from "next/navigation";	4	import { useNavigate } from "react-router";
5	import {	5	import {
6	Play,	6	Play,
7	ShieldCheck,	7	ShieldCheck,
@@ -67,10 +67,10 @@ function StatCard({ · 59 unmodified lines
67	}	67	}
68		68
69	function PendingApprovalRow({ approval }: { approval: PendingApprovalRecord }) {	69	function PendingApprovalRow({ approval }: { approval: PendingApprovalRecord }) {
70	const router = useRouter();	70	const navigate = useNavigate();
71	return (	71	return (
72	<button	72	<button
73	onClick={() => router.push("/approvals")}	73	onClick={() => navigate("/approvals")}
74	className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-accent/50 transition-colors text-left group"	74	className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-accent/50 transition-colors text-left group"
75	>	75	>
76	<div className="h-2 w-2 rounded-full bg-terminal-amber pulse-dot shrink-0" />	76	<div className="h-2 w-2 rounded-full bg-terminal-amber pulse-dot shrink-0" />
@@ -88,10 +88,10 @@ function PendingApprovalRow({ approval }: { approval: PendingApprovalRecord }) { · 11 unmodified lines
88	}	88	}
89		89
90	function RecentTaskRow({ task }: { task: TaskRecord }) {	90	function RecentTaskRow({ task }: { task: TaskRecord }) {
91	const router = useRouter();	91	const navigate = useNavigate();
92	return (	92	return (
93	<button	93	<button
94	onClick={() => router.push(`/tasks?selected=${task.id}`)}	94	onClick={() => navigate(`/tasks?selected=${task.id}`)}
95	className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-accent/50 transition-colors text-left group"	95	className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-accent/50 transition-colors text-left group"
96	>	96	>
97	<div className="flex-1 min-w-0">	97	<div className="flex-1 min-w-0">
@@ -122,7 +122,7 @@ function sourceType(source?: string): string { · 24 unmodified lines
122	}	122	}
123		123
124	function ToolsSummaryCard({ tools }: { tools: ToolDescriptor[] }) {	124	function ToolsSummaryCard({ tools }: { tools: ToolDescriptor[] }) {
125	const router = useRouter();	125	const navigate = useNavigate();
126		126
127	const groups = useMemo(() => {	127	const groups = useMemo(() => {
128	const map = new Map<	128	const map = new Map<
@@ -180,7 +180,7 @@ function ToolsSummaryCard({ tools }: { tools: ToolDescriptor[] }) { · 51 unmodified lines
180	variant="ghost"	180	variant="ghost"
181	size="sm"	181	size="sm"
182	className="text-xs h-7"	182	className="text-xs h-7"
183	onClick={() => router.push("/tools")}	183	onClick={() => navigate("/tools")}
184	>	184	>
185	Manage	185	Manage
186	<ArrowRight className="h-3 w-3 ml-1" />	186	<ArrowRight className="h-3 w-3 ml-1" />
@@ -194,7 +194,7 @@ function ToolsSummaryCard({ tools }: { tools: ToolDescriptor[] }) { · 7 unmodified lines
194	return (	194	return (
195	<button	195	<button
196	key={group.name}	196	key={group.name}
197	onClick={() => router.push(`/tools?source=${encodeURIComponent(group.name)}`)}	197	onClick={() => navigate(`/tools?source=${encodeURIComponent(group.name)}`)}
198	className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-accent/40 transition-colors text-left group/row w-full"	198	className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-accent/40 transition-colors text-left group/row w-full"
199	>	199	>
200	<div className="h-7 w-7 rounded bg-muted flex items-center justify-center shrink-0">	200	<div className="h-7 w-7 rounded bg-muted flex items-center justify-center shrink-0">

executor/apps/web/src/components/onboarding-view.tsx+136−0

@@ -0,0 +1,136 @@
	1	"use client";
	2
	3	import { useState, type FormEvent } from "react";
	4	import { Link, useNavigate } from "react-router";
	5	import { useMutation } from "convex/react";
	6	import { Building2 } from "lucide-react";
	7	import { Button } from "@/components/ui/button";
	8	import {
	9	Card,
	10	CardContent,
	11	CardDescription,
	12	CardFooter,
	13	CardHeader,
	14	CardTitle,
	15	} from "@/components/ui/card";
	16	import { Input } from "@/components/ui/input";
	17	import { convexApi } from "@/lib/convex-api";
	18	import { useSession } from "@/lib/session-context";
	19
	20	export function OnboardingView() {
	21	const navigate = useNavigate();
	22	const createOrganization = useMutation(convexApi.organizations.create);
	23	const {
	24	isSignedInToWorkos,
	25	organizations,
	26	organizationsLoading,
	27	switchWorkspace,
	28	} = useSession();
	29
	30	const [name, setName] = useState("");
	31	const [error, setError] = useState<string \| null>(null);
	32	const [creating, setCreating] = useState(false);
	33
	34	const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
	35	event.preventDefault();
	36	const trimmed = name.trim();
	37	if (trimmed.length < 2) {
	38	setError("Organization name must be at least 2 characters.");
	39	return;
	40	}
	41
	42	setCreating(true);
	43	setError(null);
	44	try {
	45	const result = await createOrganization({ name: trimmed });
	46	switchWorkspace(result.workspace.id);
	47	navigate("/", { replace: true });
	48	} catch (cause) {
	49	setError(cause instanceof Error ? cause.message : "Failed to create organization");
	50	} finally {
	51	setCreating(false);
	52	}
	53	};
	54
	55	if (!isSignedInToWorkos) {
	56	return (
	57	<div className="min-h-[70vh] grid place-items-center">
	58	<Card className="w-full max-w-xl border-border">
	59	<CardHeader>
	60	<CardTitle>Sign in required</CardTitle>
	61	<CardDescription>
	62	You need to sign in before setting up an organization.
	63	</CardDescription>
	64	</CardHeader>
	65	<CardFooter className="justify-between gap-2">
	66	<Button asChild variant="outline">
	67	<Link to="/">Back</Link>
	68	</Button>
	69	<Button asChild>
	70	<Link to="/sign-in" reloadDocument>Sign in</Link>
	71	</Button>
	72	</CardFooter>
	73	</Card>
	74	</div>
	75	);
	76	}
	77
	78	if (!organizationsLoading && organizations.length > 0) {
	79	return (
	80	<div className="min-h-[70vh] grid place-items-center">
	81	<Card className="w-full max-w-xl border-border">
	82	<CardHeader>
	83	<CardTitle>Organization ready</CardTitle>
	84	<CardDescription>
	85	Your account is already linked to an organization.
	86	</CardDescription>
	87	</CardHeader>
	88	<CardFooter>
	89	<Button asChild className="w-full">
	90	<Link to="/">Continue to dashboard</Link>
	91	</Button>
	92	</CardFooter>
	93	</Card>
	94	</div>
	95	);
	96	}
	97
	98	return (
	99	<div className="min-h-[80vh] grid place-items-center">
	100	<Card className="w-full max-w-xl border-border">
	101	<CardHeader>
	102	<div className="mb-2 inline-flex h-9 w-9 items-center justify-center rounded-md border border-border bg-muted">
	103	<Building2 className="h-4 w-4 text-muted-foreground" />
	104	</div>
	105	<CardTitle>Name your organization</CardTitle>
	106	<CardDescription>
	107	This is your team space. You can invite members and create more workspaces later.
	108	</CardDescription>
	109	</CardHeader>
	110	<form onSubmit={handleSubmit}>
	111	<CardContent className="space-y-2">
	112	<Input
	113	value={name}
	114	onChange={(event) => {
	115	setError(null);
	116	setName(event.target.value);
	117	}}
	118	placeholder="Acme"
	119	maxLength={64}
	120	autoFocus
	121	/>
	122	{error ? <p className="text-xs text-destructive">{error}</p> : null}
	123	</CardContent>
	124	<CardFooter className="justify-end gap-2">
	125	<Button asChild variant="outline" disabled={creating}>
	126	<Link to="/sign-out" reloadDocument>Sign out</Link>
	127	</Button>
	128	<Button type="submit" disabled={creating}>
	129	{creating ? "Creating..." : "Continue"}
	130	</Button>
	131	</CardFooter>
	132	</form>
	133	</Card>
	134	</div>
	135	);
	136	}

executor/apps/web/src/components/organization-settings-view.tsx+6−5

 "use client";
 import { useMemo } from "react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useLocation, useNavigate, useSearchParams } from "react-router";
 import { CreditCard, Users } from "lucide-react";
 import { BillingView } from "@/components/billing-view";
 import { MembersView } from "@/components/members-view";
 }
 export function OrganizationSettingsView() {
-  const router = useRouter();
+  const navigate = useNavigate();
-  const pathname = usePathname();
+  const location = useLocation();
-  const searchParams = useSearchParams();
+  const pathname = location.pathname;
+  const [searchParams] = useSearchParams();
   const tab = useMemo(() => normalizeTab(searchParams.get("tab")), [searchParams]);
     const normalizedTab = normalizeTab(nextTab);
     const nextSearch = new URLSearchParams(searchParams.toString());
     nextSearch.set("tab", normalizedTab);
-    router.replace(`${pathname}?${nextSearch.toString()}`);
+    navigate(`${pathname}?${nextSearch.toString()}`, { replace: true });
   };
   return (

executor/apps/web/src/components/static-app-shell.tsx+11−0

@@ -0,0 +1,11 @@
	1	"use client";
	2
	3	import dynamic from "next/dynamic";
	4
	5	const FrontendApp = dynamic(() => import("@/frontend/app"), {
	6	ssr: false,
	7	});
	8
	9	export function StaticAppShell() {
	10	return <FrontendApp />;
	11	}

executor/apps/web/src/components/tasks-view.tsx+6−6

@@ -1,7 +1,7 @@
1	"use client";	1	"use client";
2		2
3	import { useState, useCallback, useMemo } from "react";	3	import { useState, useCallback, useMemo } from "react";
4	import { useSearchParams, useRouter } from "next/navigation";	4	import { useNavigate, useSearchParams } from "react-router";
5	import {	5	import {
6	Play,	6	Play,
7	ChevronRight,	7	ChevronRight,
@@ -361,8 +361,8 @@ function TaskDetail({ · 353 unmodified lines
361		361
362	export function TasksView() {	362	export function TasksView() {
363	const { context, loading: sessionLoading } = useSession();	363	const { context, loading: sessionLoading } = useSession();
364	const router = useRouter();	364	const navigate = useNavigate();
365	const searchParams = useSearchParams();	365	const [searchParams] = useSearchParams();
366	const selectedId = searchParams.get("selected");	366	const selectedId = searchParams.get("selected");
367		367
368	const tasks = useQuery(	368	const tasks = useQuery(
@@ -377,12 +377,12 @@ export function TasksView() { · 8 unmodified lines
377	const selectTask = useCallback(	377	const selectTask = useCallback(
378	(taskId: string \| null) => {	378	(taskId: string \| null) => {
379	if (taskId) {	379	if (taskId) {
380	router.push(`/tasks?selected=${taskId}`, { scroll: false });	380	navigate(`/tasks?selected=${taskId}`);
381	} else {	381	} else {
382	router.push("/tasks", { scroll: false });	382	navigate("/tasks");
383	}	383	}
384	},	384	},
385	[router],	385	[navigate],
386	);	386	);
387		387
388	if (sessionLoading) {	388	if (sessionLoading) {

executor/apps/web/src/frontend/app.tsx+50−0

@@ -0,0 +1,50 @@
	1	"use client";
	2
	3	import { Navigate, Outlet, Route, Routes, BrowserRouter, useSearchParams } from "react-router";
	4	import { AppShell } from "@/components/app-shell";
	5	import { ApprovalsView } from "@/components/approvals-view";
	6	import { DashboardView } from "@/components/dashboard-view";
	7	import { OnboardingView } from "@/components/onboarding-view";
	8	import { OrganizationSettingsView } from "@/components/organization-settings-view";
	9	import { TasksView } from "@/components/tasks-view";
	10	import { ToolsView } from "@/components/tools-view";
	11
	12	function ToolsRoute() {
	13	const [searchParams] = useSearchParams();
	14	const source = searchParams.get("source");
	15
	16	return (
	17	<div className="h-full min-h-0">
	18	<ToolsView initialSource={source} />
	19	</div>
	20	);
	21	}
	22
	23	function ShellLayout() {
	24	return (
	25	<AppShell>
	26	<Outlet />
	27	</AppShell>
	28	);
	29	}
	30
	31	export default function FrontendApp() {
	32	return (
	33	<BrowserRouter>
	34	<Routes>
	35	<Route element={<ShellLayout />}>
	36	<Route path="/" element={<DashboardView />} />
	37	<Route path="/static-app-shell" element={<DashboardView />} />
	38	<Route path="/tasks" element={<TasksView />} />
	39	<Route path="/approvals" element={<ApprovalsView />} />
	40	<Route path="/tools" element={<ToolsRoute />} />
	41	<Route path="/organization" element={<OrganizationSettingsView />} />
	42	<Route path="/onboarding" element={<OnboardingView />} />
	43	<Route path="/members" element={<Navigate to="/organization?tab=members" replace />} />
	44	<Route path="/billing" element={<Navigate to="/organization?tab=billing" replace />} />
	45	<Route path="*" element={<Navigate to="/" replace />} />
	46	</Route>
	47	</Routes>
	48	</BrowserRouter>
	49	);
	50	}

executor/apps/web/src/lib/session-context.tsx+44−6

 } from "react";
 import { useMutation, useQuery as useConvexQuery } from "convex/react";
 import { useQuery as useTanstackQuery } from "@tanstack/react-query";
-import { workosEnabled } from "@/lib/auth-capabilities";
+import { anonymousDemoEnabled, workosEnabled } from "@/lib/auth-capabilities";
 import { useWorkosAuthLoading } from "@/lib/convex-provider";
 import { convexApi } from "@/lib/convex-api";
 import type { AnonymousContext } from "./types";
     iconFile?: File | null,
     organizationId?: Id<"organizations">,
   ) => Promise<void>;
+  creatingAnonymousWorkspace: boolean;
+  createAnonymousWorkspace: () => Promise<void>;
   isSignedInToWorkos: boolean;
   workosProfile: {
     name: string;
   switchWorkspace: () => {},
   creatingWorkspace: false,
   createWorkspace: async () => {},
+  creatingAnonymousWorkspace: false,
+  createAnonymousWorkspace: async () => {},
   isSignedInToWorkos: false,
   workosProfile: null,
   resetWorkspace: async () => {},
   const createWorkspaceMutation = useMutation(convexApi.workspaces.create);
   const generateWorkspaceIconUploadUrl = useMutation(convexApi.workspaces.generateWorkspaceIconUploadUrl);
   const [creatingWorkspace, setCreatingWorkspace] = useState(false);
+  const [creatingAnonymousWorkspace, setCreatingAnonymousWorkspace] = useState(false);
+  const [manualGuestContext, setManualGuestContext] = useState<AnonymousContext | null>(null);
   const bootstrapSessionQuery = useTanstackQuery({
     queryKey: ["session-bootstrap", storedSessionId ?? "new"],
+    enabled: storedSessionId !== null,
     retry: false,
     staleTime: Number.POSITIVE_INFINITY,
     queryFn: async () => {
-      const context = await bootstrapAnonymousSession({ sessionId: storedSessionId ?? undefined });
+      if (!storedSessionId) {
+        throw new Error("No guest session id available");
+      }
+      const context = await bootstrapAnonymousSession({ sessionId: storedSessionId });
       localStorage.setItem(SESSION_KEY, context.sessionId);
       if (context.sessionId !== storedSessionId) {
         setStoredSessionId(context.sessionId);
     },
   });
-  const guestContext: AnonymousContext | null = bootstrapSessionQuery.data ?? null;
+  const guestContext: AnonymousContext | null = manualGuestContext ?? bootstrapSessionQuery.data ?? null;
   const account = useConvexQuery(
     convexApi.app.getCurrentAccount,
     localStorage.removeItem(ACTIVE_WORKSPACE_KEY);
     setStoredSessionId(null);
     setActiveWorkspaceId(null);
+    setManualGuestContext(null);
     setRuntimeError(null);
   }, []);
+  const createAnonymousWorkspace = useCallback(async () => {
+    if (!anonymousDemoEnabled) {
+      throw new Error("Anonymous workspace creation is disabled");
+    }
+    setRuntimeError(null);
+    setCreatingAnonymousWorkspace(true);
+    try {
+      const context = await bootstrapAnonymousSession({});
+      localStorage.setItem(SESSION_KEY, context.sessionId);
+      localStorage.setItem(ACTIVE_WORKSPACE_KEY, context.workspaceId);
+      setStoredSessionId(context.sessionId);
+      setActiveWorkspaceId(context.workspaceId as Id<"workspaces">);
+      setManualGuestContext(context);
+    } catch (cause) {
+      const message = cause instanceof Error ? cause.message : "Failed to create anonymous workspace";
+      setRuntimeError(message);
+      throw cause;
+    } finally {
+      setCreatingAnonymousWorkspace(false);
+    }
+  }, [bootstrapAnonymousSession]);
   const switchWorkspace = useCallback((workspaceId: Id<"workspaces">) => {
     setActiveWorkspaceId(workspaceId);
     localStorage.setItem(ACTIVE_WORKSPACE_KEY, workspaceId);
   const context = workosContext ?? ((workosStillLoading || shouldBlockGuestFallback) ? null : guestContext);
   const bootstrapSessionError =
-    bootstrapSessionQuery.error instanceof Error
+    storedSessionId && bootstrapSessionQuery.error instanceof Error
       ? bootstrapSessionQuery.error.message
-      : bootstrapSessionQuery.error
+      : storedSessionId && bootstrapSessionQuery.error
         ? "Failed to bootstrap session"
         : null;
   const bootstrapWorkosError =
   const error = runtimeError ?? bootstrapSessionError ?? bootstrapWorkosError;
   const effectiveLoading = !context && !error && (
-    bootstrapSessionQuery.isLoading
+    creatingAnonymousWorkspace
+    || (storedSessionId !== null && bootstrapSessionQuery.isLoading)
     || workosStillLoading
     || bootstrapWorkosAccountQuery.isFetching
   );
         switchWorkspace,
         creatingWorkspace,
         createWorkspace,
+        creatingAnonymousWorkspace,
+        createAnonymousWorkspace,
         isSignedInToWorkos: Boolean(account && account.provider === "workos"),
         workosProfile:
           account && account.provider === "workos"