@codemation/next-host 0.0.1

package/src/shell/AppLayoutNavItems.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import Link from "next/link";
+
+import { usePathname } from "next/navigation";
+
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+import { IconCredentials, IconDashboard, IconUsers, IconWorkflow } from "./appLayoutSidebarIcons";
+import { WorkflowSidebarNavTree } from "./WorkflowSidebarNavTree";
+import { useWorkflowsQuery } from "../features/workflows/hooks/realtime/realtime";
+
+export interface AppLayoutNavItemsProps {
+  readonly collapsed: boolean;
+}
+
+const navLinkClass = (isActive: boolean) =>
+  cn(
+    "flex items-center gap-3 rounded-sm px-4 py-3 text-sm no-underline transition-colors",
+    "text-sidebar-foreground hover:bg-sidebar-accent/80",
+    isActive && "bg-sidebar-accent font-medium text-sidebar-primary",
+  );
+
+const workflowLinkClass = (isActive: boolean) =>
+  cn(
+    "flex items-center gap-3 rounded-sm px-4 py-2 text-sm no-underline transition-colors",
+    "text-sidebar-foreground hover:bg-sidebar-accent/80",
+    isActive && "bg-sidebar-accent font-medium text-sidebar-primary",
+  );
+
+const workflowLinkClassCollapsed = (isActive: boolean) =>
+  cn(
+    "flex items-center justify-center rounded-sm p-3 text-sidebar-foreground no-underline transition-colors hover:bg-sidebar-accent/80",
+    isActive && "bg-sidebar-accent font-medium text-sidebar-primary",
+  );
+
+export function AppLayoutNavItems({ collapsed }: AppLayoutNavItemsProps): ReactNode {
+  const pathname = usePathname();
+  const workflowsQuery = useWorkflowsQuery();
+  const workflows = workflowsQuery.data ?? [];
+
+  const navItem = (href: string, label: string, icon: ReactNode, exact?: boolean) => {
+    const isActive = exact ? pathname === href : pathname.startsWith(href);
+    const content = (
+      <Link
+        key={href}
+        href={href}
+        className={navLinkClass(isActive)}
+        data-testid={`nav-${label.toLowerCase().replace(/\s+/g, "-")}`}
+        aria-label={collapsed ? label : undefined}
+      >
+        <span className="flex shrink-0 items-center justify-center" aria-hidden>
+          {icon}
+        </span>
+        {!collapsed && <span className="truncate">{label}</span>}
+      </Link>
+    );
+    return collapsed ? (
+      <span key={href} className="relative flex overflow-visible">
+        {content}
+      </span>
+    ) : (
+      content
+    );
+  };
+
+  return (
+    <>
+      {navItem("/dashboard", "Dashboard", <IconDashboard />, true)}
+      {navItem("/credentials", "Credentials", <IconCredentials />)}
+      {navItem("/users", "Users", <IconUsers />)}
+      {collapsed ? (
+        <div className="mt-3 flex flex-col gap-1">
+          <span className="relative flex overflow-visible">
+            <Link
+              href="/workflows"
+              className={cn(
+                "flex items-center justify-center rounded-sm p-3 text-sidebar-foreground no-underline transition-colors hover:bg-sidebar-accent/80",
+                pathname === "/workflows" && "bg-sidebar-accent font-medium text-sidebar-primary",
+              )}
+              data-testid="nav-workflows"
+              aria-label="All workflows"
+            >
+              <span className="flex shrink-0 opacity-70" aria-hidden>
+                <IconWorkflow />
+              </span>
+            </Link>
+          </span>
+          {workflowsQuery.isLoading && <span className="px-4 py-2 text-xs text-muted-foreground">…</span>}
+          {!workflowsQuery.isLoading && workflows.length > 0 && (
+            <WorkflowSidebarNavTree
+              workflows={workflows}
+              pathname={pathname}
+              workflowLinkClass={workflowLinkClassCollapsed}
+              collapsed
+            />
+          )}
+        </div>
+      ) : (
+        <div className="mt-4 flex flex-col gap-1">
+          <span className="px-4 py-2 text-[0.6875rem] font-semibold uppercase tracking-wider text-muted-foreground">
+            Workflows
+          </span>
+          <div className="flex flex-col gap-1">
+            <Link
+              href="/workflows"
+              className={workflowLinkClass(pathname === "/workflows")}
+              data-testid="nav-workflows"
+            >
+              <span className="flex shrink-0 opacity-70" aria-hidden>
+                <IconWorkflow />
+              </span>
+              <span className="truncate text-sm">All workflows</span>
+            </Link>
+            {workflowsQuery.isLoading && <span className="px-4 py-2 text-xs text-muted-foreground">Loading…</span>}
+            {!workflowsQuery.isLoading && workflows.length === 0 && (
+              <span className="px-4 py-2 text-xs text-muted-foreground">No workflows</span>
+            )}
+            {!workflowsQuery.isLoading && workflows.length > 0 && (
+              <WorkflowSidebarNavTree workflows={workflows} pathname={pathname} workflowLinkClass={workflowLinkClass} />
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/shell/AppLayoutPageHeader.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+import type { ReactNode } from "react";
+
+import { AlertCircle } from "lucide-react";
+
+import { CanvasNodeChromeTooltip } from "../features/workflows/components/canvas/CanvasNodeChromeTooltip";
+import { WorkflowActivationErrorDialog } from "../features/workflows/components/workflowDetail/WorkflowActivationErrorDialog";
+import { WorkflowActivationHeaderControl } from "../features/workflows/components/workflowDetail/WorkflowActivationHeaderControl";
+import { useWhitelabel } from "../providers/WhitelabelProvider";
+import { getPageTitle } from "./appLayoutPageTitle";
+import { AppShellHeaderActions } from "./AppShellHeaderActions";
+import { useWorkflowDetailChrome } from "./WorkflowDetailChromeContext";
+import { useWorkflowsQuery } from "../features/workflows/hooks/realtime/realtime";
+
+export function AppLayoutPageHeader(): ReactNode {
+  const pathname = usePathname();
+  const { productName } = useWhitelabel();
+  const workflowsQuery = useWorkflowsQuery();
+  const workflows = workflowsQuery.data ?? [];
+  const title = getPageTitle(pathname, workflows, productName);
+  const chrome = useWorkflowDetailChrome();
+  const isWorkflowDetail = /^\/workflows\/[^/]+$/.test(pathname);
+  const showChromeRow = isWorkflowDetail && chrome !== null;
+  const credentialLines = chrome?.credentialAttentionSummaryLines ?? [];
+  const activationAlertLines = chrome?.workflowActivationAlertLines ?? null;
+
+  return (
+    <header className="flex shrink-0 flex-col border-b border-border bg-card">
+      <div className="flex h-14 items-center justify-between gap-6 px-8">
+        <div className="flex min-w-0 flex-1 items-center gap-3">
+          <h1
+            className="m-0 min-w-0 truncate text-xl font-semibold leading-none text-foreground"
+            data-testid={isWorkflowDetail ? "workflow-detail-workflow-title" : undefined}
+          >
+            {title}
+          </h1>
+          {showChromeRow && credentialLines.length > 0 ? (
+            <CanvasNodeChromeTooltip
+              testId="workflow-credential-attention-indicator"
+              ariaLabel="Workflow credential issues"
+              tooltip={credentialLines.join("\n")}
+            >
+              <span
+                data-testid="workflow-credential-attention-icon"
+                className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-amber-300 bg-amber-50 text-amber-900 shadow-sm"
+              >
+                <AlertCircle size={16} strokeWidth={2.2} />
+              </span>
+            </CanvasNodeChromeTooltip>
+          ) : null}
+          {showChromeRow && chrome?.isLiveWorkflowView ? (
+            <WorkflowActivationHeaderControl
+              variant="shell"
+              showErrorAlert={false}
+              active={chrome.workflowIsActive}
+              pending={chrome.isWorkflowActivationPending}
+              onActiveChange={chrome.setWorkflowActive}
+              alertLines={chrome.workflowActivationAlertLines}
+              onDismissAlert={chrome.dismissWorkflowActivationAlert}
+            />
+          ) : null}
+        </div>
+        <AppShellHeaderActions />
+      </div>
+      {showChromeRow && chrome && activationAlertLines && activationAlertLines.length > 0 ? (
+        <div data-testid="workflow-activation-shell-error">
+          <WorkflowActivationErrorDialog
+            open
+            alertLines={activationAlertLines}
+            onDismiss={chrome.dismissWorkflowActivationAlert}
+          />
+        </div>
+      ) : null}
+    </header>
+  );
+}

package/src/shell/AppLayoutSidebarBrand.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+import { useWhitelabel } from "../providers/WhitelabelProvider";
+
+export function AppLayoutSidebarBrand(args: Readonly<{ collapsed: boolean }>): ReactNode {
+  const { productName, logoUrl } = useWhitelabel();
+  return (
+    <Link
+      href="/"
+      className="flex min-w-0 max-w-full items-center gap-2 text-lg font-semibold text-sidebar-foreground no-underline hover:text-primary"
+      data-testid="sidebar-brand"
+    >
+      {logoUrl !== null ? (
+        <img
+          src={logoUrl}
+          alt=""
+          width={32}
+          height={32}
+          className={args.collapsed ? "size-8 shrink-0 object-contain" : "size-8 shrink-0 object-contain"}
+          data-testid="sidebar-whitelabel-logo"
+        />
+      ) : null}
+      {!args.collapsed ? (
+        <span className="min-w-0 truncate" data-testid="sidebar-whitelabel-product-name">
+          {productName}
+        </span>
+      ) : null}
+    </Link>
+  );
+}

package/src/shell/AppMainContent.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+export function AppMainContent(args: Readonly<{ children: ReactNode }>): ReactNode {
+  const pathname = usePathname();
+  const isWorkflowDetail = /^\/workflows\/[^/]+$/.test(pathname);
+  return (
+    <div className={cn("min-h-0 flex-1 overflow-auto p-8", isWorkflowDetail && "overflow-hidden p-0")}>
+      {args.children}
+    </div>
+  );
+}

package/src/shell/AppShellHeaderActions.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { AppShellHeaderActionsAuthenticated } from "./AppShellHeaderActionsAuthenticated";
+
+export function AppShellHeaderActions(): ReactNode {
+  if (process.env.NEXT_PUBLIC_CODEMATION_SKIP_UI_AUTH === "true") {
+    return null;
+  }
+  return <AppShellHeaderActionsAuthenticated />;
+}

package/src/shell/AppShellHeaderActionsAuthenticated.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { signOut, useSession } from "next-auth/react";
+
+import { useState, type ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+
+export function AppShellHeaderActionsAuthenticated(): ReactNode {
+  const { data: session, status } = useSession();
+  const [isSigningOut, setIsSigningOut] = useState(false);
+
+  if (status === "loading") {
+    return (
+      <div
+        className="flex shrink-0 items-center gap-4"
+        data-testid="header-session-loading"
+        aria-busy="true"
+        aria-label="Loading session"
+      />
+    );
+  }
+
+  const email = session?.user?.email;
+  if (!email) {
+    return null;
+  }
+
+  const handleSignOut = (): void => {
+    setIsSigningOut(true);
+    void signOut({ callbackUrl: "/login" });
+  };
+
+  return (
+    <div className="flex shrink-0 items-center gap-4">
+      <span className="max-w-56 truncate text-xs text-muted-foreground" data-testid="header-user-email">
+        {email}
+      </span>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        data-testid="header-logout"
+        disabled={isSigningOut}
+        onClick={handleSignOut}
+      >
+        {isSigningOut ? "Signing out…" : "Log out"}
+      </Button>
+    </div>
+  );
+}

package/src/shell/CodemationNextClientShell.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import "@xyflow/react/dist/style.css";
+import "rc-tree/assets/index.css";
+
+import { Component, type ReactNode } from "react";
+import { Providers } from "../providers/Providers";
+
+export interface CodemationNextClientShellProps {
+  readonly children: ReactNode;
+}
+
+export class CodemationNextClientShell extends Component<CodemationNextClientShellProps> {
+  render(): ReactNode {
+    return <Providers websocketPort={process.env.NEXT_PUBLIC_CODEMATION_WS_PORT}>{this.props.children}</Providers>;
+  }
+}

package/src/shell/CredentialsSignInRedirectResolver.ts

@@ -0,0 +1,21 @@
+import type { SignInResponse } from "next-auth/react";
+
+/**
+ * Maps NextAuth `signIn(..., { redirect: false })` outcomes to a browser navigation target.
+ * Auth.js may return `ok: true` with an empty or missing `url` on success; callers must fall back to `callbackUrl`.
+ */
+export class CredentialsSignInRedirectResolver {
+  static resolveRedirectUrl(result: SignInResponse, callbackUrl: string): string | null {
+    if (result.error) {
+      return null;
+    }
+    const trimmed = result.url?.trim();
+    if (trimmed && trimmed.length > 0) {
+      return trimmed;
+    }
+    if (result.ok) {
+      return callbackUrl;
+    }
+    return null;
+  }
+}

package/src/shell/LoginPageClient.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import { signIn } from "next-auth/react";
+import { Component, type FormEvent, type ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+
+import { OauthProviderIcon } from "../components/OauthProviderIcon";
+import { CredentialsSignInRedirectResolver } from "./CredentialsSignInRedirectResolver";
+
+type LoginPageClientProps = Readonly<{
+  callbackUrl: string;
+  productName: string;
+  logoUrl: string | null;
+  oauthProviders: ReadonlyArray<{ id: string; name: string }>;
+}>;
+
+type LoginPageClientState = Readonly<{
+  email: string;
+  password: string;
+  error: string | null;
+  isSubmitting: boolean;
+  oauthSubmittingId: string | null;
+}>;
+
+export class LoginPageClient extends Component<LoginPageClientProps, LoginPageClientState> {
+  constructor(props: LoginPageClientProps) {
+    super(props);
+    this.state = {
+      email: "",
+      password: "",
+      error: null,
+      isSubmitting: false,
+      oauthSubmittingId: null,
+    };
+  }
+
+  override render(): ReactNode {
+    const { isSubmitting, oauthSubmittingId } = this.state;
+    const formBusy = isSubmitting || oauthSubmittingId !== null;
+    const { productName, logoUrl } = this.props;
+    const titleInitial = productName.trim().length > 0 ? productName.trim().charAt(0).toUpperCase() : "C";
+
+    return (
+      <div
+        className="relative flex min-h-screen items-center justify-center bg-gradient-to-br from-muted/40 to-background p-4"
+        data-testid="login-page"
+      >
+        <div
+          className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/5 via-transparent to-transparent"
+          aria-hidden
+        />
+        <Card className="relative z-10 w-full max-w-md shadow-lg">
+          <CardHeader className="gap-3">
+            <div className="flex items-start gap-3">
+              {logoUrl !== null ? (
+                <img
+                  src={logoUrl}
+                  alt=""
+                  width={40}
+                  height={40}
+                  className="size-10 shrink-0 rounded-lg object-contain"
+                  data-testid="login-whitelabel-logo"
+                />
+              ) : (
+                <span
+                  className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary text-lg font-bold text-primary-foreground"
+                  aria-hidden
+                  data-testid="login-whitelabel-initial"
+                >
+                  {titleInitial}
+                </span>
+              )}
+              <div className="min-w-0 space-y-1">
+                <CardTitle className="text-xl">Welcome back</CardTitle>
+                <p className="text-base font-semibold text-foreground" data-testid="login-whitelabel-product-name">
+                  {productName}
+                </p>
+                <CardDescription>Sign in to run and manage your workflows.</CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <form
+              className="flex flex-col gap-4"
+              suppressHydrationWarning
+              aria-busy={isSubmitting}
+              onSubmit={(event: FormEvent) => {
+                event.preventDefault();
+                void this.submitCredentials();
+              }}
+            >
+              <div className="space-y-2" suppressHydrationWarning>
+                <Label htmlFor="codemation-login-email">Email</Label>
+                <Input
+                  id="codemation-login-email"
+                  type="email"
+                  name="email"
+                  autoComplete="username"
+                  placeholder="you@company.com"
+                  value={this.state.email}
+                  onChange={(e) => this.setState({ email: e.target.value })}
+                  required
+                  disabled={formBusy}
+                  suppressHydrationWarning
+                  data-testid="login-email"
+                />
+              </div>
+              <div className="space-y-2" suppressHydrationWarning>
+                <Label htmlFor="codemation-login-password">Password</Label>
+                <Input
+                  id="codemation-login-password"
+                  type="password"
+                  name="password"
+                  autoComplete="current-password"
+                  placeholder="••••••••"
+                  value={this.state.password}
+                  onChange={(e) => this.setState({ password: e.target.value })}
+                  required
+                  disabled={formBusy}
+                  suppressHydrationWarning
+                  data-testid="login-password"
+                />
+              </div>
+              {this.state.error ? (
+                <p className="text-sm text-destructive" data-testid="login-error" role="alert">
+                  {this.state.error}
+                </p>
+              ) : null}
+              <Button
+                type="button"
+                className="w-full"
+                data-testid="login-submit"
+                disabled={formBusy}
+                onClick={() => {
+                  void this.submitCredentials();
+                }}
+              >
+                {isSubmitting ? (
+                  <span
+                    className="mr-2 inline-block size-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"
+                    aria-hidden
+                    data-testid="login-submit-spinner"
+                  />
+                ) : null}
+                {isSubmitting ? "Signing in…" : "Sign in"}
+              </Button>
+            </form>
+            {this.props.oauthProviders.length > 0 ? (
+              <div className="mt-6 space-y-4">
+                <div className="flex items-center gap-3">
+                  <Separator className="flex-1" />
+                  <span className="text-xs text-muted-foreground">Or</span>
+                  <Separator className="flex-1" />
+                </div>
+                <section className="space-y-3" aria-label="OAuth sign-in">
+                  <p className="text-center text-xs text-muted-foreground">Continue with a connected account</p>
+                  <div className="flex flex-col gap-2">
+                    {this.props.oauthProviders.map((provider) => {
+                      const busy = oauthSubmittingId === provider.id;
+                      return (
+                        <Button
+                          key={provider.id}
+                          type="button"
+                          variant="outline"
+                          className="w-full justify-center gap-2"
+                          data-testid={`login-oauth-${provider.id}`}
+                          disabled={formBusy}
+                          onClick={() => this.handleOAuthSignIn(provider.id)}
+                        >
+                          <OauthProviderIcon
+                            providerId={provider.id}
+                            className="size-4 shrink-0"
+                            testId={`login-oauth-${provider.id}-icon`}
+                          />
+                          {busy ? "Connecting…" : provider.name}
+                        </Button>
+                      );
+                    })}
+                  </div>
+                </section>
+              </div>
+            ) : null}
+          </CardContent>
+          <CardFooter className="justify-center border-t bg-transparent pt-0">
+            <p className="text-center text-xs text-muted-foreground" data-testid="login-whitelabel-tagline">
+              {productName} — workflow automation you own.
+            </p>
+          </CardFooter>
+        </Card>
+      </div>
+    );
+  }
+
+  private handleOAuthSignIn(providerId: string): void {
+    this.setState({ oauthSubmittingId: providerId, error: null });
+    void signIn(providerId, { callbackUrl: this.props.callbackUrl });
+  }
+
+  private async submitCredentials(): Promise<void> {
+    this.setState({ error: null, isSubmitting: true });
+    try {
+      const result = await signIn("credentials", {
+        redirect: false,
+        email: this.state.email,
+        password: this.state.password,
+        callbackUrl: this.props.callbackUrl,
+      });
+      if (!result) {
+        this.setState({ error: "Something went wrong. Try again.", isSubmitting: false });
+        return;
+      }
+      if (result.error) {
+        this.setState({ error: "Invalid email or password.", isSubmitting: false });
+        return;
+      }
+      const target = CredentialsSignInRedirectResolver.resolveRedirectUrl(result, this.props.callbackUrl);
+      if (target) {
+        window.location.assign(target);
+        return;
+      }
+      this.setState({ isSubmitting: false });
+    } catch {
+      this.setState({ error: "Something went wrong. Try again.", isSubmitting: false });
+    }
+  }
+}

package/src/shell/WorkflowDetailChromeContext.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+} from "react";
+
+export type WorkflowDetailChromeState = Readonly<{
+  isLiveWorkflowView: boolean;
+  workflowIsActive: boolean;
+  isWorkflowActivationPending: boolean;
+  setWorkflowActive: (active: boolean) => void;
+  workflowActivationAlertLines: ReadonlyArray<string> | null;
+  dismissWorkflowActivationAlert: () => void;
+  credentialAttentionSummaryLines: ReadonlyArray<string>;
+}>;
+
+type WorkflowDetailChromeContextValue = Readonly<{
+  chrome: WorkflowDetailChromeState | null;
+  setChrome: Dispatch<SetStateAction<WorkflowDetailChromeState | null>>;
+}>;
+
+const WorkflowDetailChromeContext = createContext<WorkflowDetailChromeContextValue | null>(null);
+
+export function WorkflowDetailChromeProvider(args: Readonly<{ children: ReactNode }>): React.JSX.Element {
+  const [chrome, setChrome] = useState<WorkflowDetailChromeState | null>(null);
+  const value = useMemo(() => ({ chrome, setChrome }), [chrome]);
+  return <WorkflowDetailChromeContext.Provider value={value}>{args.children}</WorkflowDetailChromeContext.Provider>;
+}
+
+export function useWorkflowDetailChrome(): WorkflowDetailChromeState | null {
+  return useContext(WorkflowDetailChromeContext)?.chrome ?? null;
+}
+
+export function useWorkflowDetailChromeDispatch(): Dispatch<SetStateAction<WorkflowDetailChromeState | null>> | null {
+  return useContext(WorkflowDetailChromeContext)?.setChrome ?? null;
+}