@codemation/next-host 0.0.1

package/src/features/credentials/hooks/useCredentialsScreen.ts

@@ -0,0 +1,213 @@
+import { useCallback, useState } from "react";
+
+import { ApiPaths } from "@codemation/host-src/presentation/http/ApiPaths";
+
+import { codemationApiClient } from "../../../api/CodemationApiClient";
+import { CodemationApiHttpError } from "../../../api/CodemationApiHttpError";
+import type { CredentialInstanceDto } from "../../workflows/hooks/realtime/realtime";
+import { parseCredentialInstanceTestPayload } from "../lib/credentialInstanceTestPayloadParser";
+import { useCredentialDialogSession } from "./useCredentialDialogSession";
+
+/**
+ * Credentials page: list/table actions plus dialog orchestration via {@link useCredentialDialogSession}.
+ */
+export function useCredentialsScreen() {
+  const {
+    credentialInstances,
+    credentialTypesAll,
+    credentialFieldEnvStatus,
+    credentialTypesQuery,
+    credentialWithSecretsQuery,
+    editingInstance,
+    dialogMode,
+    editingInstanceId,
+    selectedTypeId,
+    setSelectedTypeId,
+    displayName,
+    setDisplayName,
+    editDisplayName,
+    setEditDisplayName,
+    sourceKind,
+    setSourceKind,
+    publicFieldValues,
+    setPublicFieldValues,
+    secretFieldValues,
+    setSecretFieldValues,
+    envRefValues,
+    setEnvRefValues,
+    editPublicFieldValues,
+    setEditPublicFieldValues,
+    editSecretFieldValues,
+    setEditSecretFieldValues,
+    editEnvRefValues,
+    setEditEnvRefValues,
+    showSecrets,
+    setShowSecrets,
+    oauth2RedirectUri,
+    isLoadingOauth2RedirectUri,
+    errorMessage,
+    setErrorMessage,
+    dialogTestResult,
+    isSubmitting,
+    isEditSubmitting,
+    isDialogTesting,
+    createCredentialInstance,
+    updateCredentialInstance,
+    testCredentialFromDialog,
+    connectOAuth2Credential,
+    closeDialog,
+    openCreateDialog: openCreateDialogSession,
+    openEditDialog,
+    refreshQueries,
+    oauthDisconnectConfirmOpen,
+    setOauthDisconnectConfirmOpen,
+    executeOAuthDisconnect,
+  } = useCredentialDialogSession({
+    closeAfterCreatePolicy: "always",
+    oauthConnectedPolicy: "refresh_only",
+    buildDialogProps: false,
+  });
+
+  const [activeTestInstanceId, setActiveTestInstanceId] = useState<string | null>(null);
+  const [testResult, setTestResult] = useState<{ instanceId: string; status: string; message?: string } | null>(null);
+  const [deleteConfirmTarget, setDeleteConfirmTarget] = useState<CredentialInstanceDto | null>(null);
+
+  const openCreateDialog = useCallback(() => {
+    openCreateDialogSession();
+  }, [openCreateDialogSession]);
+
+  const testCredentialInstance = useCallback(
+    async (instance: CredentialInstanceDto): Promise<void> => {
+      try {
+        setActiveTestInstanceId(instance.instanceId);
+        setTestResult(null);
+        setErrorMessage(null);
+        const data = await codemationApiClient.postJson<{ status?: string; message?: string }>(
+          ApiPaths.credentialInstanceTest(instance.instanceId),
+        );
+        setTestResult({
+          instanceId: instance.instanceId,
+          status: data?.status ?? "healthy",
+          message: data?.message,
+        });
+        await refreshQueries();
+      } catch (error) {
+        if (error instanceof CodemationApiHttpError) {
+          const parsed = parseCredentialInstanceTestPayload(error.bodyText);
+          setTestResult({
+            instanceId: instance.instanceId,
+            status: "failing",
+            message: parsed.message ?? "Test failed",
+          });
+          return;
+        }
+        setTestResult({
+          instanceId: instance.instanceId,
+          status: "failing",
+          message: error instanceof Error ? error.message : String(error),
+        });
+      } finally {
+        setActiveTestInstanceId(null);
+      }
+    },
+    [refreshQueries, setErrorMessage],
+  );
+
+  const openDeleteCredentialConfirm = (instance: CredentialInstanceDto): void => {
+    setDeleteConfirmTarget(instance);
+  };
+
+  const closeDeleteCredentialConfirm = (): void => {
+    setDeleteConfirmTarget(null);
+  };
+
+  const executeConfirmedDeleteCredential = async (): Promise<void> => {
+    if (!deleteConfirmTarget) {
+      return;
+    }
+    const instanceId = deleteConfirmTarget.instanceId;
+    try {
+      setErrorMessage(null);
+      await codemationApiClient.delete(ApiPaths.credentialInstance(instanceId));
+      closeDeleteCredentialConfirm();
+      if (editingInstanceId === instanceId) closeDialog();
+      await refreshQueries();
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : String(error));
+    }
+  };
+
+  const openOAuthDisconnectConfirm = (): void => {
+    setOauthDisconnectConfirmOpen(true);
+  };
+
+  const typesLoading = credentialTypesQuery.isLoading;
+  const typesError = credentialTypesQuery.isError;
+  const typesEmpty = credentialTypesAll.length === 0;
+
+  const isDialogOpen = dialogMode !== null;
+  const showTestFailureAlert = testResult?.status === "failing";
+
+  return {
+    credentialInstances,
+    credentialTypes: credentialTypesAll,
+    credentialFieldEnvStatus,
+    typesLoading,
+    typesError,
+    typesEmpty,
+    showTestFailureAlert,
+    testResult,
+    activeTestInstanceId,
+    openCreateDialog,
+    openEditDialog,
+    testCredentialInstance,
+    deleteConfirmTarget,
+    closeDeleteCredentialConfirm,
+    executeConfirmedDeleteCredential,
+    oauthDisconnectConfirmOpen,
+    setOauthDisconnectConfirmOpen,
+    executeOAuthDisconnect,
+    isDialogOpen,
+    dialogMode,
+    editingInstanceId,
+    selectedTypeId,
+    setSelectedTypeId,
+    displayName,
+    setDisplayName,
+    editDisplayName,
+    setEditDisplayName,
+    sourceKind,
+    setSourceKind,
+    publicFieldValues,
+    setPublicFieldValues,
+    secretFieldValues,
+    setSecretFieldValues,
+    envRefValues,
+    setEnvRefValues,
+    editPublicFieldValues,
+    setEditPublicFieldValues,
+    editSecretFieldValues,
+    setEditSecretFieldValues,
+    editEnvRefValues,
+    setEditEnvRefValues,
+    showSecrets,
+    setShowSecrets,
+    oauth2RedirectUri,
+    isLoadingOauth2RedirectUri,
+    credentialWithSecretsQuery,
+    editingInstance,
+    errorMessage,
+    dialogTestResult,
+    isSubmitting,
+    isEditSubmitting,
+    isDialogTesting,
+    createCredentialInstance,
+    updateCredentialInstance,
+    testCredentialFromDialog,
+    connectOAuth2Credential,
+    openOAuthDisconnectConfirm,
+    closeDialog,
+    setTestResult,
+    openDeleteCredentialConfirm,
+  };
+}

package/src/features/credentials/lib/credentialFieldHelpers.ts

@@ -0,0 +1,35 @@
+import type { CredentialFieldSchema } from "@codemation/core/browser";
+
+export function maskedDisplayValue(): string {
+  return "••••••••••••";
+}
+
+export function buildEmptySecretFieldValues(fields: ReadonlyArray<CredentialFieldSchema>): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const f of fields) {
+    out[f.key] = "";
+  }
+  return out;
+}
+
+export function buildFieldStringValues(
+  fields: ReadonlyArray<CredentialFieldSchema>,
+  source?: Readonly<Record<string, unknown>>,
+): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const field of fields) {
+    out[field.key] = String(source?.[field.key] ?? "");
+  }
+  return out;
+}
+
+export function isCredentialFieldLockedByEnv(
+  field: CredentialFieldSchema,
+  envStatus: Readonly<Record<string, boolean>>,
+): boolean {
+  const name = field.envVarName?.trim();
+  if (!name) {
+    return false;
+  }
+  return envStatus[name] === true;
+}

package/src/features/credentials/lib/credentialFormTypes.ts

@@ -0,0 +1 @@
+export type FormSourceKind = "db" | "env";

package/src/features/credentials/lib/credentialInstanceTestPayloadParser.ts

@@ -0,0 +1,10 @@
+export function parseCredentialInstanceTestPayload(text: string): { status?: string; message?: string } {
+  if (!text.trim()) {
+    return {};
+  }
+  try {
+    return JSON.parse(text) as { status?: string; message?: string };
+  } catch {
+    return { message: text || "Test failed" };
+  }
+}

package/src/features/credentials/screens/CredentialsScreen.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+
+import { CredentialConfirmDialog } from "../components/CredentialConfirmDialog";
+import { CredentialDialog } from "../components/CredentialDialog";
+import { CredentialsScreenInstancesTable } from "../components/CredentialsScreenInstancesTable";
+import { CredentialsScreenTestFailureAlert } from "../components/CredentialsScreenTestFailureAlert";
+import { useCredentialsScreen } from "../hooks/useCredentialsScreen";
+
+export function CredentialsScreen() {
+  const {
+    credentialInstances,
+    credentialTypes,
+    credentialFieldEnvStatus,
+    typesLoading,
+    typesError,
+    typesEmpty,
+    showTestFailureAlert,
+    testResult,
+    activeTestInstanceId,
+    openCreateDialog,
+    openEditDialog,
+    testCredentialInstance,
+    deleteConfirmTarget,
+    closeDeleteCredentialConfirm,
+    executeConfirmedDeleteCredential,
+    oauthDisconnectConfirmOpen,
+    setOauthDisconnectConfirmOpen,
+    executeOAuthDisconnect,
+    isDialogOpen,
+    dialogMode,
+    editingInstanceId,
+    selectedTypeId,
+    setSelectedTypeId,
+    displayName,
+    setDisplayName,
+    editDisplayName,
+    setEditDisplayName,
+    sourceKind,
+    setSourceKind,
+    publicFieldValues,
+    setPublicFieldValues,
+    secretFieldValues,
+    setSecretFieldValues,
+    envRefValues,
+    setEnvRefValues,
+    editPublicFieldValues,
+    setEditPublicFieldValues,
+    editSecretFieldValues,
+    setEditSecretFieldValues,
+    editEnvRefValues,
+    setEditEnvRefValues,
+    showSecrets,
+    setShowSecrets,
+    oauth2RedirectUri,
+    isLoadingOauth2RedirectUri,
+    credentialWithSecretsQuery,
+    editingInstance,
+    errorMessage,
+    dialogTestResult,
+    isSubmitting,
+    isEditSubmitting,
+    isDialogTesting,
+    createCredentialInstance,
+    updateCredentialInstance,
+    testCredentialFromDialog,
+    connectOAuth2Credential,
+    openOAuthDisconnectConfirm,
+    closeDialog,
+    setTestResult,
+    openDeleteCredentialConfirm,
+  } = useCredentialsScreen();
+
+  return (
+    <div data-testid="credentials-screen" className="flex flex-col gap-6">
+      {showTestFailureAlert && (
+        <CredentialsScreenTestFailureAlert message={testResult?.message} onDismiss={() => setTestResult(null)} />
+      )}
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <p className="m-0 max-w-2xl text-sm text-muted-foreground">
+          Create credential instances, store secrets safely, and verify health before binding them to workflow slots.
+        </p>
+        <Button
+          type="button"
+          onClick={openCreateDialog}
+          disabled={typesLoading || typesEmpty}
+          data-testid="credential-add-button"
+        >
+          Add credential
+        </Button>
+      </div>
+
+      {credentialInstances.length === 0 ? (
+        <div
+          className="rounded-lg border border-dashed border-border bg-muted/30 px-4 py-8 text-center text-sm text-muted-foreground"
+          data-testid="credentials-empty"
+        >
+          No credential instances yet. Click &quot;Add credential&quot; to create one.
+        </div>
+      ) : (
+        <CredentialsScreenInstancesTable
+          credentialInstances={credentialInstances}
+          testResult={testResult}
+          activeTestInstanceId={activeTestInstanceId}
+          onOpenEdit={openEditDialog}
+          onTest={testCredentialInstance}
+          onOpenDelete={openDeleteCredentialConfirm}
+        />
+      )}
+
+      {deleteConfirmTarget && (
+        <CredentialConfirmDialog
+          title="Delete credential?"
+          testId="credential-delete-confirm-dialog"
+          cancelTestId="credential-delete-confirm-cancel"
+          confirmTestId="credential-delete-confirm-delete"
+          confirmLabel="Delete"
+          confirmVariant="danger"
+          onCancel={closeDeleteCredentialConfirm}
+          onConfirm={() => void executeConfirmedDeleteCredential()}
+        >
+          <p className="m-0 text-sm text-muted-foreground">
+            This will permanently remove <strong>{deleteConfirmTarget.displayName}</strong>. This cannot be undone.
+          </p>
+        </CredentialConfirmDialog>
+      )}
+
+      {oauthDisconnectConfirmOpen && (
+        <CredentialConfirmDialog
+          title="Disconnect OAuth2?"
+          testId="credential-oauth-disconnect-confirm-dialog"
+          cancelTestId="credential-oauth-disconnect-confirm-cancel"
+          confirmTestId="credential-oauth-disconnect-confirm-confirm"
+          confirmLabel="Disconnect"
+          confirmVariant="primary"
+          onCancel={() => setOauthDisconnectConfirmOpen(false)}
+          onConfirm={() => void executeOAuthDisconnect()}
+        >
+          <p className="m-0 text-sm text-muted-foreground">
+            This will remove the OAuth connection for this credential. You can reconnect later.
+          </p>
+        </CredentialConfirmDialog>
+      )}
+
+      {isDialogOpen && (
+        <CredentialDialog
+          key={editingInstanceId ?? "create"}
+          mode={dialogMode!}
+          credentialTypes={credentialTypes}
+          typesLoading={typesLoading}
+          typesError={typesError}
+          typesEmpty={typesEmpty}
+          selectedTypeId={selectedTypeId}
+          setSelectedTypeId={setSelectedTypeId}
+          displayName={dialogMode === "create" ? displayName : editDisplayName}
+          setDisplayName={dialogMode === "create" ? setDisplayName : setEditDisplayName}
+          sourceKind={sourceKind}
+          setSourceKind={setSourceKind}
+          publicFieldValues={dialogMode === "create" ? publicFieldValues : editPublicFieldValues}
+          setPublicFieldValues={dialogMode === "create" ? setPublicFieldValues : setEditPublicFieldValues}
+          secretFieldValues={dialogMode === "create" ? secretFieldValues : editSecretFieldValues}
+          setSecretFieldValues={dialogMode === "create" ? setSecretFieldValues : setEditSecretFieldValues}
+          envRefValues={dialogMode === "create" ? envRefValues : editEnvRefValues}
+          setEnvRefValues={dialogMode === "create" ? setEnvRefValues : setEditEnvRefValues}
+          showSecrets={showSecrets}
+          setShowSecrets={setShowSecrets}
+          oauth2RedirectUri={oauth2RedirectUri}
+          isLoadingOauth2RedirectUri={isLoadingOauth2RedirectUri}
+          secretsLoading={credentialWithSecretsQuery.isLoading}
+          editingInstance={editingInstance}
+          errorMessage={errorMessage}
+          dialogTestResult={dialogTestResult}
+          isSubmitting={dialogMode === "create" ? isSubmitting : isEditSubmitting}
+          isDialogTesting={isDialogTesting}
+          onCreate={createCredentialInstance}
+          onUpdate={updateCredentialInstance}
+          onTest={testCredentialFromDialog}
+          onConnectOAuth2={connectOAuth2Credential}
+          onDisconnectOAuth2={openOAuthDisconnectConfirm}
+          onClose={closeDialog}
+          credentialFieldEnvStatus={credentialFieldEnvStatus}
+        />
+      )}
+    </div>
+  );
+}

package/src/features/invite/screens/InviteAcceptScreen.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import type { VerifyUserInviteResponseDto } from "@codemation/host-src/application/contracts/userDirectoryContracts.types";
+import { ApiPaths } from "@codemation/host-src/presentation/http/ApiPaths";
+import { useEffect, useState, 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 { codemationApiClient } from "../../../api/CodemationApiClient";
+import { CodemationApiHttpError } from "../../../api/CodemationApiHttpError";
+import { PasswordStrengthMeter } from "../../../components/PasswordStrengthMeter";
+
+export type InviteAcceptScreenProps = Readonly<{
+  inviteToken: string;
+  /** Where to send the user after activation (Next.js app login). */
+  loginHref?: string;
+}>;
+
+export function InviteAcceptScreen(props: InviteAcceptScreenProps) {
+  const loginHref = props.loginHref ?? "/login";
+  const [verifyState, setVerifyState] = useState<"pending" | "invalid" | "valid">("pending");
+  const [email, setEmail] = useState<string | null>(null);
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    const run = async (): Promise<void> => {
+      const url = `${ApiPaths.userInviteVerify()}?token=${encodeURIComponent(props.inviteToken)}`;
+      try {
+        const data = await codemationApiClient.getJson<VerifyUserInviteResponseDto>(url);
+        if (cancelled) return;
+        if (data.valid && data.email) {
+          setVerifyState("valid");
+          setEmail(data.email);
+        } else {
+          setVerifyState("invalid");
+        }
+      } catch {
+        if (!cancelled) setVerifyState("invalid");
+      }
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [props.inviteToken]);
+
+  const submit = async (): Promise<void> => {
+    setError(null);
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters.");
+      return;
+    }
+    if (password !== confirmPassword) {
+      setError("Passwords do not match.");
+      return;
+    }
+    try {
+      setIsSubmitting(true);
+      await codemationApiClient.postJson(ApiPaths.userInviteAccept(), { token: props.inviteToken, password });
+      setDone(true);
+    } catch (e) {
+      if (e instanceof CodemationApiHttpError) {
+        setError(e.bodyText.trim() || e.message);
+      } else {
+        setError(e instanceof Error ? e.message : String(e));
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const onFormSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    void submit();
+  };
+
+  const shell = (children: ReactNode) => (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center p-4">{children}</div>
+  );
+
+  if (verifyState === "pending") {
+    return shell(
+      <Card className="w-full max-w-md" data-testid="invite-accept-loading">
+        <CardContent className="pt-6">
+          <p className="text-center text-muted-foreground" data-testid="invite-accept-loading-message">
+            Checking your invite…
+          </p>
+        </CardContent>
+      </Card>,
+    );
+  }
+
+  if (verifyState === "invalid") {
+    return shell(
+      <Card className="w-full max-w-md" data-testid="invite-accept-invalid">
+        <CardHeader>
+          <CardTitle data-testid="invite-accept-invalid-title">Invite invalid or expired</CardTitle>
+          <CardDescription data-testid="invite-accept-invalid-message">
+            Ask your administrator to send a new invite.
+          </CardDescription>
+        </CardHeader>
+        <CardFooter>
+          <Button variant="outline" asChild>
+            <a href={loginHref} data-testid="invite-accept-back-to-login">
+              Log in
+            </a>
+          </Button>
+        </CardFooter>
+      </Card>,
+    );
+  }
+
+  if (done) {
+    return shell(
+      <Card className="w-full max-w-md" data-testid="invite-accept-done">
+        <CardHeader>
+          <CardTitle data-testid="invite-accept-done-title">You&apos;re all set</CardTitle>
+          <CardDescription data-testid="invite-accept-done-message">
+            Your account is active. Sign in with your email and new password.
+          </CardDescription>
+        </CardHeader>
+        <CardFooter>
+          <Button asChild>
+            <a href={loginHref} data-testid="invite-accept-login">
+              Log in
+            </a>
+          </Button>
+        </CardFooter>
+      </Card>,
+    );
+  }
+
+  return shell(
+    <Card className="w-full max-w-lg" data-testid="invite-accept-form">
+      <CardHeader>
+        <CardTitle data-testid="invite-accept-form-title">Set your password</CardTitle>
+        <CardDescription data-testid="invite-accept-email">{email}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form className="flex flex-col gap-4" data-testid="invite-accept-password-form" onSubmit={onFormSubmit}>
+          <div className="space-y-2">
+            <Label htmlFor="invite-password">Password</Label>
+            <Input
+              id="invite-password"
+              type="password"
+              value={password}
+              onChange={(e) => {
+                setPassword(e.target.value);
+                setError(null);
+              }}
+              data-testid="invite-accept-password"
+              autoComplete="new-password"
+            />
+            <PasswordStrengthMeter password={password} dataTestId="invite-accept-password-strength" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="invite-confirm">Confirm password</Label>
+            <Input
+              id="invite-confirm"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => {
+                setConfirmPassword(e.target.value);
+                setError(null);
+              }}
+              data-testid="invite-accept-confirm-password"
+              autoComplete="new-password"
+            />
+          </div>
+          {error ? (
+            <p className="text-sm text-destructive" data-testid="invite-accept-error" role="alert">
+              {error}
+            </p>
+          ) : null}
+          <Button type="submit" className="w-full" data-testid="invite-accept-submit" disabled={isSubmitting}>
+            {isSubmitting ? "Saving…" : "Activate account"}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>,
+  );
+}