orcheo-studio 0.22.2 → 0.23.1

package/src/features/auth/pages/login.tsx

@@ -1,24 +1,177 @@
-import { useMemo } from "react";
-import { useLocation } from "react-router-dom";
-import AutoLogin from "@features/auth/components/auto-login";
+import { useMemo, useState, type FormEvent } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { Loader2, Mail } from "lucide-react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import { Input } from "@/design-system/ui/input";
+import { Label } from "@/design-system/ui/label";
+import {
+  startEmailChallenge,
+  verifyEmailCode,
+} from "@features/auth/lib/auth-api";
 
-const parseInviteContext = (search: string) => {
+// Only allow same-origin relative paths to avoid open-redirect via state/query.
+const sanitizeRedirect = (value: unknown): string | undefined => {
+  if (typeof value !== "string") {
+    return undefined;
+  }
+  const trimmed = value.trim();
+  if (!trimmed.startsWith("/") || trimmed.startsWith("//")) {
+    return undefined;
+  }
+  return trimmed;
+};
+
+const resolveRedirectTo = (state: unknown, search: string): string => {
+  const fromState =
+    state && typeof state === "object"
+      ? (state as { from?: unknown }).from
+      : undefined;
+  const stateRedirect = sanitizeRedirect(fromState);
+  if (stateRedirect) {
+    return stateRedirect;
+  }
   const params = new URLSearchParams(search);
-  const normalize = (v: string | null) => v?.trim() || undefined;
-  return {
-    invitation: normalize(params.get("invitation")),
-    organization: normalize(params.get("organization")),
-    organizationName: normalize(params.get("organization_name")),
-    loginHint: normalize(params.get("login_hint")),
-    screenHint: normalize(params.get("screen_hint")),
-  };
+  return sanitizeRedirect(params.get("redirect") ?? params.get("from")) ?? "/";
 };
 
+type Stage = "email" | "sent";
+
 export default function Login() {
   const location = useLocation();
-  const inviteContext = useMemo(
-    () => parseInviteContext(location.search),
-    [location.search],
+  const navigate = useNavigate();
+  const redirectTo = useMemo(
+    () => resolveRedirectTo(location.state, location.search),
+    [location.state, location.search],
+  );
+
+  const [stage, setStage] = useState<Stage>("email");
+  const [email, setEmail] = useState("");
+  const [code, setCode] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSendEmail = async (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+    setBusy(true);
+    try {
+      await startEmailChallenge(email.trim(), "login", redirectTo);
+      setStage("sent");
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Unable to send the sign-in email.",
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleVerifyCode = async (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+    setBusy(true);
+    try {
+      await verifyEmailCode(email.trim(), code.trim());
+      navigate(redirectTo, { replace: true });
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "That code is invalid or expired.",
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const resetToEmail = () => {
+    setStage("email");
+    setCode("");
+    setError(null);
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-[#ebd3a6] p-6 text-foreground">
+      <Card className="w-full max-w-md border-border bg-card text-card-foreground shadow-xl">
+        <CardHeader className="text-center">
+          <CardTitle className="text-xl">Sign in to Orcheo</CardTitle>
+          <CardDescription>
+            {stage === "email"
+              ? "Enter your email and we'll send you a sign-in link and code."
+              : `We sent a sign-in link and code to ${email}.`}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {stage === "email" ? (
+            <form className="flex flex-col gap-4" onSubmit={handleSendEmail}>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="email">Email address</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  autoFocus
+                  placeholder="you@example.com"
+                  value={email}
+                  onChange={(event) => setEmail(event.target.value)}
+                />
+              </div>
+              {error && <p className="text-sm text-destructive">{error}</p>}
+              <Button type="submit" disabled={busy || !email.trim()}>
+                {busy ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <>
+                    <Mail className="mr-2 h-4 w-4" />
+                    Continue with email
+                  </>
+                )}
+              </Button>
+            </form>
+          ) : (
+            <form className="flex flex-col gap-4" onSubmit={handleVerifyCode}>
+              <p className="text-sm text-muted-foreground">
+                Click the link in your email, or enter the code below.
+              </p>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="code">Sign-in code</Label>
+                <Input
+                  id="code"
+                  inputMode="numeric"
+                  autoComplete="one-time-code"
+                  required
+                  autoFocus
+                  placeholder="123456"
+                  value={code}
+                  onChange={(event) => setCode(event.target.value)}
+                />
+              </div>
+              {error && <p className="text-sm text-destructive">{error}</p>}
+              <Button type="submit" disabled={busy || !code.trim()}>
+                {busy ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  "Verify code"
+                )}
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={resetToEmail}
+                disabled={busy}
+              >
+                Use a different email
+              </Button>
+            </form>
+          )}
+        </CardContent>
+      </Card>
+    </div>
   );
-  return <AutoLogin {...inviteContext} />;
 }

package/src/features/auth/pages/verify.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { Loader2 } from "lucide-react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import { verifyEmailToken } from "@features/auth/lib/auth-api";
+
+// Only allow same-origin relative paths to avoid open-redirect.
+const sanitizeRedirect = (value: string | null): string => {
+  if (!value) {
+    return "/";
+  }
+  const trimmed = value.trim();
+  if (!trimmed.startsWith("/") || trimmed.startsWith("//")) {
+    return "/";
+  }
+  return trimmed;
+};
+
+type VerifyState = "working" | "error";
+
+export default function AuthVerify() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const token = searchParams.get("token");
+  const redirectTo = sanitizeRedirect(searchParams.get("redirect"));
+  const [state, setState] = useState<VerifyState>("working");
+  const [message, setMessage] = useState("Signing you in…");
+  // The magic-link token is single-use; guard against React 18 StrictMode's
+  // double-invoke redeeming it twice.
+  const startedRef = useRef(false);
+
+  useEffect(() => {
+    if (startedRef.current) {
+      return;
+    }
+    startedRef.current = true;
+
+    if (!token) {
+      setState("error");
+      setMessage("This sign-in link is missing its token.");
+      return;
+    }
+
+    void (async () => {
+      try {
+        await verifyEmailToken(token);
+        navigate(redirectTo, { replace: true });
+      } catch (err) {
+        setState("error");
+        setMessage(
+          err instanceof Error
+            ? err.message
+            : "This sign-in link is invalid or has expired.",
+        );
+      }
+    })();
+  }, [token, redirectTo, navigate]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-[#ebd3a6] p-6 text-foreground">
+      <Card className="w-full max-w-md border-border bg-card text-card-foreground shadow-xl">
+        <CardHeader>
+          <CardTitle>Signing in</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col items-center gap-4 text-center text-sm text-muted-foreground">
+          {state === "working" ? (
+            <div className="flex items-center gap-3">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              <span>{message}</span>
+            </div>
+          ) : (
+            <>
+              <p>{message}</p>
+              <Button onClick={() => navigate("/login", { replace: true })}>
+                Back to sign in
+              </Button>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/features/chatkit/components/public-chat-widget.tsx

@@ -1,5 +1,6 @@
-import { useMemo } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import type { UseChatKitOptions } from "@openai/chatkit-react";
+import { authFetch } from "@/lib/auth-fetch";
 import { buildBackendHttpUrl } from "@/lib/config";
 import { cn } from "@/lib/utils";
 import type { ColorScheme } from "@/hooks/use-color-scheme";
@@ -9,6 +10,7 @@ import type {
 } from "@features/workflow/lib/workflow-storage.types";
 import { buildChatKitAttachmentOptions } from "@features/chatkit/lib/chatkit-attachments";
 import {
+  buildAuthenticatedChatFetch,
   buildPublicChatFetch,
   getChatKitDomainKey,
   type PublicChatHttpError,
@@ -24,6 +26,17 @@ interface PublicChatWidgetProps {
   workflowId: string;
   workflowName: string;
   backendBaseUrl?: string;
+  /**
+   * When true the workflow is published for workspace members only. The widget
+   * mints a ChatKit session token (JWT) so the backend can enforce membership.
+   */
+  requireLogin?: boolean;
+  useSessionToken?: boolean;
+  /**
+   * Workspace slug the workflow belongs to. Sent as `X-Orcheo-Workspace` when
+   * minting the session token so membership resolves to the correct workspace.
+   */
+  workspaceSlug?: string;
   onReady?: () => void;
   onHttpError?: (error: PublicChatHttpError) => void;
   onLog?: (payload: Record<string, unknown>) => void;
@@ -43,6 +56,9 @@ export function PublicChatWidget({
   workflowId,
   workflowName,
   backendBaseUrl,
+  requireLogin = false,
+  useSessionToken = requireLogin,
+  workspaceSlug,
   onReady,
   onHttpError,
   onLog,
@@ -51,6 +67,60 @@ export function PublicChatWidget({
   startScreenPrompts,
   supportedModels,
 }: PublicChatWidgetProps) {
+  const cachedSessionTokenRef = useRef<{
+    token: string;
+    expiresAt: number;
+  } | null>(null);
+
+  const resolveSessionToken = useCallback(async (): Promise<string> => {
+    const cached = cachedSessionTokenRef.current;
+    if (cached && cached.expiresAt - Date.now() > 30_000) {
+      return cached.token;
+    }
+
+    // Use the workflow-scoped session endpoint so the backend resolves the
+    // caller's workspace via membership (real OIDC tokens do not carry
+    // workspace_ids) and scopes the JWT to this workflow + workspace.
+    const url = buildBackendHttpUrl(
+      `/api/workflows/${encodeURIComponent(workflowId)}/chatkit/session`,
+      backendBaseUrl,
+    );
+    const headers: Record<string, string> = {};
+    if (workspaceSlug) {
+      headers["X-Orcheo-Workspace"] = workspaceSlug;
+    }
+    const response = await authFetch(url, { method: "POST", headers });
+    if (!response.ok) {
+      if (response.status === 403) {
+        throw new Error(
+          "Unable to obtain a ChatKit session token: your account is missing the required chatkit:session scope or workspace membership.",
+        );
+      }
+      if (response.status === 401) {
+        throw new Error(
+          "Unable to obtain a ChatKit session token: sign in again and retry.",
+        );
+      }
+      throw new Error("Failed to obtain ChatKit session token");
+    }
+    const data = (await response.json()) as {
+      client_secret?: string;
+      clientSecret?: string;
+      expires_at?: string;
+      expiresAt?: string;
+    };
+    const secret = data.client_secret ?? data.clientSecret;
+    if (!secret) {
+      throw new Error("ChatKit session response missing client secret");
+    }
+    const expiresAtRaw = data.expires_at ?? data.expiresAt;
+    const expiresAt = expiresAtRaw ? Date.parse(expiresAtRaw) : Number.NaN;
+    if (Number.isFinite(expiresAt)) {
+      cachedSessionTokenRef.current = { token: secret, expiresAt };
+    }
+    return secret;
+  }, [backendBaseUrl, workflowId, workspaceSlug]);
+
   const options = useMemo<UseChatKitOptions>(() => {
     const domainKey = getChatKitDomainKey();
     const uploadBase = buildBackendHttpUrl(
@@ -62,17 +132,25 @@ export function PublicChatWidget({
     const uploadUrl = uploadUrlObj.toString();
     const modelOptions = buildModelOptions(supportedModels);
 
+    const fetchImpl =
+      requireLogin && useSessionToken
+        ? buildAuthenticatedChatFetch({
+            workflowId,
+            onHttpError,
+            metadata: { workflow_name: workflowName },
+            getToken: resolveSessionToken,
+          })
+        : buildPublicChatFetch({
+            workflowId,
+            onHttpError,
+            metadata: { workflow_name: workflowName },
+          });
+
     return {
       api: {
         url: buildBackendHttpUrl("/api/chatkit", backendBaseUrl),
         domainKey,
-        fetch: buildPublicChatFetch({
-          workflowId,
-          onHttpError,
-          metadata: {
-            workflow_name: workflowName,
-          },
-        }),
+        fetch: fetchImpl,
         uploadStrategy: { type: "direct", uploadUrl },
       },
       header: {
@@ -133,6 +211,9 @@ export function PublicChatWidget({
     supportedModels,
     workflowId,
     workflowName,
+    requireLogin,
+    resolveSessionToken,
+    useSessionToken,
   ]);
 
   return (

package/src/features/chatkit/lib/chatkit-client.ts

@@ -86,6 +86,41 @@ export const getChatKitDomainKey = (): string => {
   return fromEnv ?? fromRuntime ?? DEFAULT_DOMAIN_KEY;
 };
 
+export const VISITOR_ID_HEADER = "X-Orcheo-Visitor-Id";
+const VISITOR_ID_STORAGE_KEY = "orcheo.chatkit.visitorId";
+
+const createVisitorId = (): string => {
+  const cryptoObj =
+    typeof globalThis !== "undefined"
+      ? (globalThis.crypto as Crypto | undefined)
+      : undefined;
+  if (cryptoObj?.randomUUID) {
+    return cryptoObj.randomUUID();
+  }
+  return `v-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 12)}`;
+};
+
+/**
+ * Return a stable, browser-local visitor id used to scope anonymous chat
+ * history to this device. The id is opaque and never used for authorization —
+ * the backend only filters a visitor's own threads by it. Falls back to an
+ * ephemeral per-call id when storage is unavailable (e.g. SSR, private mode).
+ */
+export const getOrCreateVisitorId = (): string => {
+  try {
+    const storage = window.localStorage;
+    const existing = safeString(storage.getItem(VISITOR_ID_STORAGE_KEY));
+    if (existing) {
+      return existing;
+    }
+    const next = createVisitorId();
+    storage.setItem(VISITOR_ID_STORAGE_KEY, next);
+    return next;
+  } catch {
+    return createVisitorId();
+  }
+};
+
 export const buildPublicChatFetch = ({
   workflowId,
   onHttpError,
@@ -121,6 +156,10 @@ export const buildPublicChatFetch = ({
       requestHeaders.set(key, value);
     }
 
+    // Scope chat history to this browser for anonymous visitors. Authenticated
+    // requests are scoped server-side by OAuth subject, so this is ignored there.
+    requestHeaders.set(VISITOR_ID_HEADER, getOrCreateVisitorId());
+
     const contentType = requestHeaders.get("Content-Type") ?? "";
     const expectsJson = contentType.includes("application/json");
     const stringBody = typeof nextInit.body === "string";
@@ -193,3 +232,30 @@ export const buildPublicChatFetch = ({
     return response;
   };
 };
+
+interface AuthenticatedChatFetchOptions extends PublicChatFetchOptions {
+  /**
+   * Resolver returning a cached ChatKit session token (JWT).
+   */
+  getToken: () => Promise<string>;
+}
+
+/**
+ * Wrap {@link buildPublicChatFetch} so each ChatKit request carries a session
+ * token in the `Authorization` header. Used for `require_login` workflows so the
+ * backend's JWT auth path can enforce workspace membership.
+ */
+export const buildAuthenticatedChatFetch = ({
+  getToken,
+  ...publicOptions
+}: AuthenticatedChatFetchOptions): typeof fetch => {
+  const base = buildPublicChatFetch(publicOptions);
+  return async (input: RequestInfo | URL, init: RequestInit = {}) => {
+    const token = await getToken();
+    const headers = new Headers(init.headers ?? {});
+    if (token) {
+      headers.set("Authorization", `Bearer ${token}`);
+    }
+    return base(input, { ...init, headers });
+  };
+};

package/src/features/chatkit/pages/public-chat.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import type { ReactNode } from "react";
 import { Monitor, Moon, Sun } from "lucide-react";
-import { Link, useLocation, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { Alert, AlertDescription, AlertTitle } from "@/design-system/ui/alert";
 import { Button } from "@/design-system/ui/button";
 import { Skeleton } from "@/design-system/ui/skeleton";
@@ -27,6 +27,18 @@ type WorkflowState =
   | { status: "error"; message: string }
   | { status: "ready"; workflow: PublicWorkflowMetadata };
 
+export const getPublicChatAccessErrorMessage = (
+  error: Pick<PublicChatHttpError, "status" | "code">,
+): string => {
+  if (error.code === "chatkit.auth.workspace_mismatch") {
+    return "Your account is signed in, but it is not a member of this workflow workspace. Switch workspaces or ask the owner to add you.";
+  }
+  if (error.status === 403) {
+    return "You do not have permission to use this workflow. Ask the owner to confirm your workspace access.";
+  }
+  return "You do not have access to this workflow yet. Ask the owner to confirm it is still published.";
+};
+
 const sanitizeWorkflowNameForEmail = (value: string): string =>
   value
     .replace(/[\r\n]+/g, " ")
@@ -39,7 +51,6 @@ export default function PublicChatPage() {
     workspaceSlug?: string;
     teamSlug?: string;
   }>();
-  const location = useLocation();
   const [workflowState, setWorkflowState] = useState<WorkflowState>({
     status: workflowId ? "loading" : "error",
     ...(workflowId ? {} : { message: "Workflow identifier missing from URL." }),
@@ -56,7 +67,6 @@ export default function PublicChatPage() {
   );
   const { theme, setTheme } = useThemePreferences({});
   const backendBaseUrl = useMemo(() => getBackendBaseUrl(), []);
-  const redirectTo = `${location.pathname}${location.search}${location.hash}`;
 
   useEffect(() => {
     setChatError(null);
@@ -162,8 +172,7 @@ export default function PublicChatPage() {
     if (error.status === 401 || error.status === 403) {
       setChatError({
         ...error,
-        message:
-          "You do not have access to this workflow yet. Ask the owner to confirm it is still published.",
+        message: getPublicChatAccessErrorMessage(error),
       });
       setIsChatReady(false);
       return;
@@ -239,31 +248,6 @@ export default function PublicChatPage() {
         );
       }
 
-      if (
-        workflowState.status === "ready" &&
-        workflowState.workflow.require_login &&
-        !isAuthenticated()
-      ) {
-        return (
-          <div className="rounded-3xl border border-slate-200/80 bg-white/70 p-6 text-slate-900 shadow-sm dark:border-slate-800/60 dark:bg-slate-950/40 dark:text-white">
-            <p className="text-lg font-semibold">Login required</p>
-            <p className="mt-2 text-sm text-slate-600 dark:text-slate-300">
-              The owner requires OAuth login before this chat can start.
-            </p>
-            <div className="mt-4 flex flex-wrap gap-3">
-              <Button asChild>
-                <Link to="/login" state={{ from: redirectTo }}>
-                  Sign in to continue
-                </Link>
-              </Button>
-              <Button asChild variant="outline">
-                <a href={contactHref}>Contact owner</a>
-              </Button>
-            </div>
-          </div>
-        );
-      }
-
       return (
         <div className="space-y-4">
           {rateLimitError && (
@@ -314,6 +298,9 @@ export default function PublicChatPage() {
                   key={workflowState.workflow.id}
                   workflowId={workflowState.workflow.id}
                   workflowName={workflowState.workflow.name}
+                  requireLogin={workflowState.workflow.require_login}
+                  useSessionToken={isAuthenticated()}
+                  workspaceSlug={workspaceSlug}
                   startScreenPrompts={
                     workflowState.workflow.chatkit?.start_screen_prompts
                   }

package/src/features/shared/components/top-navigation/account-menu.tsx

@@ -16,11 +16,9 @@ import {
   DialogDescription,
   DialogTitle,
 } from "@/design-system/ui/dialog";
-import { Building2, LogOut, Settings, User, Vault } from "lucide-react";
-import {
-  clearAuthSession,
-  getAuthenticatedUserProfile,
-} from "@features/auth/lib/auth-session";
+import { Building2, Github, LogOut, Settings, User, Vault } from "lucide-react";
+import { getAuthenticatedUserProfile } from "@features/auth/lib/auth-session";
+import { logoutSession } from "@features/auth/lib/auth-api";
 import { getSelectedWorkspaceSlug } from "@/lib/workspace-session";
 import CredentialsVault from "@features/workflow/components/dialogs/credentials-vault";
 import { usePageContext } from "@/hooks/use-page-context";
@@ -42,6 +40,9 @@ interface AccountMenuProps {
   onRevealCredentialSecret?: (id: string) => Promise<string | null>;
 }
 
+const ORCHEO_ISSUE_CHOOSER_URL =
+  "https://github.com/AI-Colleagues/orcheo/issues/new/choose";
+
 export default function AccountMenu({
   credentials,
   isCredentialsLoading,
@@ -135,14 +136,26 @@ export default function AccountMenu({
               <span>Credential Vault</span>
             </button>
           </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <a
+              href={ORCHEO_ISSUE_CHOOSER_URL}
+              target="_blank"
+              rel="noreferrer"
+              className="flex w-full items-center gap-0"
+            >
+              <Github className="mr-2 h-4 w-4" />
+              <span>Feedback & issues</span>
+            </a>
+          </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem asChild>
             <button
               type="button"
               className="flex w-full items-center gap-0"
               onClick={() => {
-                clearAuthSession();
-                navigate("/login", { replace: true });
+                void logoutSession().finally(() => {
+                  navigate("/login", { replace: true });
+                });
               }}
             >
               <LogOut className="mr-2 h-4 w-4" />

package/src/features/shared/components/top-navigation/studio-brand.tsx

@@ -48,9 +48,20 @@ export default function StudioBrand() {
               </Badge>
             </button>
           </TooltipTrigger>
-          <TooltipContent side="bottom" className="max-w-xs">
-            This environment is experimental. Data created here may be reset,
-            deleted, or not migrated to the launched version.
+          <TooltipContent side="bottom" className="max-w-sm">
+            Beta Disclaimer & Terms: Orcheo Cloud is a free beta for evaluation
+            and testing, provided as-is. Data, workflows, and credentials may be
+            reset, deleted, or not migrated, so do not use it as your only
+            storage for critical production data; read the{" "}
+            <a
+              href="https://ai-colleagues.com/terms"
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium underline underline-offset-2"
+            >
+              full terms
+            </a>
+            .
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>