@codemation/next-host 0.0.1

package/src/features/credentials/components/CredentialDialogFormSections.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import type { CredentialTypeDefinition } from "@codemation/core/browser";
+import type { Dispatch, SetStateAction } from "react";
+
+import { Eye, EyeOff, LogIn, Plug, RefreshCw, Unplug } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import type { CredentialInstanceDto } from "../../workflows/hooks/realtime/realtime";
+import type { FormSourceKind } from "../lib/credentialFormTypes";
+import { CredentialFieldCopyButton } from "./CredentialFieldCopyButton";
+
+const TYPE_PLACEHOLDER = "__none__";
+
+export type CredentialDialogFormSectionsProps = {
+  credentialTypes: ReadonlyArray<CredentialTypeDefinition>;
+  typesLoading: boolean;
+  typesError: boolean;
+  typesEmpty: boolean;
+  selectedTypeId: string;
+  setSelectedTypeId: (v: string) => void;
+  displayName: string;
+  setDisplayName: (v: string) => void;
+  sourceKind: FormSourceKind;
+  setSourceKind: (v: FormSourceKind) => void;
+  isEdit: boolean;
+  isTypeLocked: boolean;
+  canToggleSecrets: boolean;
+  showSecrets: boolean;
+  setShowSecrets: Dispatch<SetStateAction<boolean>>;
+  secretsLoading: boolean;
+  isOAuth2Type: boolean;
+  oauth2RedirectUri: string;
+  isLoadingOauth2RedirectUri: boolean;
+  editingInstance: CredentialInstanceDto | null | undefined;
+  canSubmit: boolean;
+  onConnectOAuth2: () => Promise<void>;
+  onDisconnectOAuth2: () => void;
+};
+
+export function CredentialDialogFormSections({
+  credentialTypes,
+  typesLoading,
+  typesError,
+  typesEmpty,
+  selectedTypeId,
+  setSelectedTypeId,
+  displayName,
+  setDisplayName,
+  sourceKind,
+  setSourceKind,
+  isEdit,
+  isTypeLocked,
+  canToggleSecrets,
+  showSecrets,
+  setShowSecrets,
+  secretsLoading,
+  isOAuth2Type,
+  oauth2RedirectUri,
+  isLoadingOauth2RedirectUri,
+  editingInstance,
+  canSubmit,
+  onConnectOAuth2,
+  onDisconnectOAuth2,
+}: CredentialDialogFormSectionsProps) {
+  return (
+    <>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="credential-type-select">Credential type</Label>
+        <Select
+          value={selectedTypeId || TYPE_PLACEHOLDER}
+          onValueChange={(v) => setSelectedTypeId(v === TYPE_PLACEHOLDER ? "" : v)}
+          disabled={typesLoading || isTypeLocked}
+        >
+          <SelectTrigger id="credential-type-select" className="w-full" data-testid="credential-type-select">
+            <SelectValue placeholder="Select a credential type" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={TYPE_PLACEHOLDER}>Select a credential type</SelectItem>
+            {credentialTypes.map((type) => (
+              <SelectItem key={type.typeId} value={type.typeId}>
+                {type.displayName}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {typesLoading && <span className="text-xs text-muted-foreground">Loading…</span>}
+        {typesError && <span className="text-sm text-destructive">Failed to load credential types.</span>}
+        {!typesLoading && !typesError && typesEmpty && (
+          <span className="text-xs text-muted-foreground">No credential types available.</span>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="credential-display-name">Display name</Label>
+        <Input
+          id="credential-display-name"
+          type="text"
+          data-testid="credential-display-name-input"
+          value={displayName}
+          onChange={(e) => setDisplayName(e.target.value)}
+          placeholder="e.g. My Gmail account"
+        />
+      </div>
+
+      {!isEdit && (
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="credential-source-kind">Secret source</Label>
+          <Select value={sourceKind} onValueChange={(v) => setSourceKind(v as FormSourceKind)}>
+            <SelectTrigger id="credential-source-kind" className="w-full" data-testid="credential-source-kind-select">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="db">Store secret in database</SelectItem>
+              <SelectItem value="env">Load from environment variables</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      {canToggleSecrets && (
+        <div className="flex flex-col gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="h-8 w-fit gap-1.5 px-2.5 text-xs font-semibold leading-none"
+            onClick={() => setShowSecrets((s) => !s)}
+            data-testid="credential-show-secrets-toggle"
+            disabled={isEdit && secretsLoading}
+          >
+            <span className="inline-flex items-center gap-1.5">
+              {showSecrets ? (
+                <EyeOff className="size-3.5 shrink-0" aria-hidden />
+              ) : (
+                <Eye className="size-3.5 shrink-0" aria-hidden />
+              )}
+              <span className="leading-none">{showSecrets ? "Hide" : "Show"} values</span>
+            </span>
+          </Button>
+          {isEdit && secretsLoading && <span className="text-xs text-muted-foreground">Loading credential…</span>}
+        </div>
+      )}
+
+      {isOAuth2Type && (
+        <div className="flex flex-col gap-2">
+          <span className="text-sm font-medium leading-none">OAuth2 connection</span>
+          {isLoadingOauth2RedirectUri ? (
+            <span className="text-xs text-muted-foreground">Loading redirect URI…</span>
+          ) : (
+            <>
+              <div className="flex flex-wrap items-center gap-2">
+                <Input
+                  className="min-w-0 flex-1"
+                  data-testid="credential-oauth2-redirect-uri"
+                  type="text"
+                  readOnly
+                  value={oauth2RedirectUri}
+                />
+                <CredentialFieldCopyButton
+                  value={oauth2RedirectUri}
+                  label="Copy URI"
+                  testId="credential-oauth2-redirect-uri-copy"
+                />
+              </div>
+              <span className="text-xs text-muted-foreground">
+                Add this redirect URI to your OAuth client (Google Cloud Console, etc.) before connecting.
+              </span>
+            </>
+          )}
+          {isEdit && editingInstance?.oauth2Connection?.status === "connected" && (
+            <span className="text-xs text-muted-foreground" data-testid="credential-oauth2-connected-status">
+              Connected
+              {editingInstance.oauth2Connection.connectedEmail
+                ? ` as ${editingInstance.oauth2Connection.connectedEmail}`
+                : ""}
+            </span>
+          )}
+          <div className="mt-1 flex flex-wrap gap-2">
+            <Button
+              type="button"
+              variant="default"
+              size="sm"
+              className="h-8 gap-1.5 px-2.5 text-xs font-semibold leading-none"
+              data-testid="credential-oauth2-connect-button"
+              onClick={() => void onConnectOAuth2()}
+              disabled={!isEdit && !canSubmit}
+            >
+              <span className="inline-flex items-center gap-1.5">
+                {isEdit && editingInstance?.oauth2Connection?.status === "connected" ? (
+                  <RefreshCw className="size-3.5 shrink-0" aria-hidden />
+                ) : isEdit ? (
+                  <Plug className="size-3.5 shrink-0" aria-hidden />
+                ) : (
+                  <LogIn className="size-3.5 shrink-0" aria-hidden />
+                )}
+                <span className="leading-none">
+                  {isEdit
+                    ? editingInstance?.oauth2Connection?.status === "connected"
+                      ? "Reconnect"
+                      : "Connect"
+                    : "Create and connect"}
+                </span>
+              </span>
+            </Button>
+            {isEdit && (
+              <Button
+                type="button"
+                variant="destructive"
+                size="sm"
+                className="h-8 gap-1.5 px-2.5 text-xs font-semibold leading-none"
+                data-testid="credential-oauth2-disconnect-button"
+                onClick={() => void onDisconnectOAuth2()}
+                disabled={editingInstance?.oauth2Connection?.status !== "connected"}
+              >
+                <span className="inline-flex items-center gap-1.5">
+                  <Unplug className="size-3.5 shrink-0" aria-hidden />
+                  <span className="leading-none">Disconnect</span>
+                </span>
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/features/credentials/components/CredentialEnvFieldStatusRow.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { CanvasNodeChromeTooltip } from "../../workflows/components/canvas/CanvasNodeChromeTooltip";
+import { AlertCircle, CheckCircle2 } from "lucide-react";
+
+export function CredentialEnvFieldStatusRow(
+  args: Readonly<
+    | {
+        kind: "managed";
+        envVarName: string;
+        fieldKey: string;
+      }
+    | {
+        kind: "missing";
+        envVarName: string;
+        fieldKey: string;
+      }
+  >,
+) {
+  const { envVarName, fieldKey } = args;
+  const mono = <span className="font-mono font-semibold text-foreground">{envVarName}</span>;
+
+  if (args.kind === "managed") {
+    const tooltip =
+      "This value is provided by the host environment variable. It overrides anything stored in the database for this field.";
+    return (
+      <div
+        className="flex items-start gap-2 rounded-md border border-emerald-200/90 bg-emerald-50/90 px-2.5 py-2 text-xs leading-snug text-emerald-950 dark:border-emerald-900/60 dark:bg-emerald-950/35 dark:text-emerald-100"
+        data-testid={`credential-field-env-managed-${fieldKey}`}
+      >
+        <CanvasNodeChromeTooltip
+          testId={`credential-field-env-managed-icon-${fieldKey}`}
+          ariaLabel="Host environment configured"
+          tooltip={tooltip}
+        >
+          <span className="inline-flex shrink-0 text-emerald-600 dark:text-emerald-400">
+            <CheckCircle2 className="size-4" aria-hidden />
+          </span>
+        </CanvasNodeChromeTooltip>
+        <span>Managed by env {mono}</span>
+      </div>
+    );
+  }
+
+  const tooltip =
+    "This variable is not set (or is empty) in the host process environment. Enter a value below to store it in the database, or set the variable on the host to centralize secrets.";
+  return (
+    <div
+      className="flex items-start gap-2 rounded-md border border-destructive/25 bg-destructive/5 px-2.5 py-2 text-xs leading-snug text-destructive dark:border-destructive/40 dark:bg-destructive/10"
+      data-testid={`credential-field-env-missing-${fieldKey}`}
+    >
+      <CanvasNodeChromeTooltip
+        testId={`credential-field-env-missing-icon-${fieldKey}`}
+        ariaLabel="Host environment not set"
+        tooltip={tooltip}
+      >
+        <span className="inline-flex shrink-0 text-destructive">
+          <AlertCircle className="size-4" aria-hidden />
+        </span>
+      </CanvasNodeChromeTooltip>
+      <span>Not set in host env: {mono}</span>
+    </div>
+  );
+}

package/src/features/credentials/components/CredentialFieldCopyButton.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ClipboardCopy } from "lucide-react";
+import { useCallback, useState } from "react";
+
+export function CredentialFieldCopyButton(
+  args: Readonly<{
+    value: string;
+    /** Default: Copy */
+    label?: string;
+    testId: string;
+  }>,
+) {
+  const { label = "Copy", testId, value } = args;
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(() => {
+    if (!value.trim()) {
+      return;
+    }
+    void (async () => {
+      try {
+        await navigator.clipboard.writeText(value);
+        setCopied(true);
+        window.setTimeout(() => {
+          setCopied(false);
+        }, 1600);
+      } catch {
+        setCopied(false);
+      }
+    })();
+  }, [value]);
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      className="h-7 shrink-0 gap-1.5 px-2 text-xs font-semibold leading-none"
+      data-testid={testId}
+      disabled={!value.trim()}
+      onClick={handleCopy}
+    >
+      <ClipboardCopy className="size-3.5 shrink-0" aria-hidden />
+      {copied ? "Copied" : label}
+    </Button>
+  );
+}

package/src/features/credentials/components/CredentialsScreenHealthBadge.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+export function CredentialsScreenHealthBadge({ status }: { status: string }) {
+  const statusLower = status.toLowerCase();
+  const isHealthy = statusLower === "healthy";
+  const isFailing = statusLower === "failing";
+  return (
+    <Badge
+      variant={isFailing ? "destructive" : "outline"}
+      className={cn(
+        isHealthy && "border-emerald-500/30 bg-emerald-500/10 text-emerald-900 dark:text-emerald-200",
+        !isHealthy && !isFailing && "text-muted-foreground",
+      )}
+    >
+      {status}
+    </Badge>
+  );
+}

package/src/features/credentials/components/CredentialsScreenInstancesTable.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+import type { CredentialInstanceDto } from "../../workflows/hooks/realtime/realtime";
+import { CredentialsScreenHealthBadge } from "./CredentialsScreenHealthBadge";
+
+export type CredentialsScreenInstancesTableProps = {
+  credentialInstances: ReadonlyArray<CredentialInstanceDto>;
+  testResult: { instanceId: string; status: string; message?: string } | null;
+  activeTestInstanceId: string | null;
+  onOpenEdit: (instance: CredentialInstanceDto) => void;
+  onTest: (instance: CredentialInstanceDto) => Promise<void>;
+  onOpenDelete: (instance: CredentialInstanceDto) => void;
+};
+
+export function CredentialsScreenInstancesTable({
+  credentialInstances,
+  testResult,
+  activeTestInstanceId,
+  onOpenEdit,
+  onTest,
+  onOpenDelete,
+}: CredentialsScreenInstancesTableProps) {
+  return (
+    <Table data-testid="credentials-table">
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Type</TableHead>
+          <TableHead>Source</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Health</TableHead>
+          <TableHead>Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {credentialInstances.map((instance) => (
+          <TableRow key={instance.instanceId} data-testid={`credential-instance-row-${instance.instanceId}`}>
+            <TableCell>
+              <button
+                type="button"
+                className="cursor-pointer border-none bg-transparent p-0 text-left font-medium text-primary underline-offset-4 hover:underline"
+                onClick={() => onOpenEdit(instance)}
+                data-testid={`credential-instance-name-${instance.instanceId}`}
+              >
+                {instance.displayName}
+              </button>
+            </TableCell>
+            <TableCell>
+              <span className="text-sm text-muted-foreground">{instance.typeId}</span>
+            </TableCell>
+            <TableCell>
+              <Badge variant="outline" className="text-muted-foreground">
+                {instance.sourceKind}
+              </Badge>
+            </TableCell>
+            <TableCell>
+              <Badge variant="outline" className="text-muted-foreground">
+                {instance.setupStatus}
+              </Badge>
+            </TableCell>
+            <TableCell>
+              <CredentialsScreenHealthBadge status={instance.latestHealth?.status ?? "unknown"} />
+            </TableCell>
+            <TableCell>
+              <div className="flex flex-wrap items-center gap-2">
+                {testResult?.instanceId === instance.instanceId && (
+                  <span
+                    className={cn(
+                      "text-sm font-medium",
+                      testResult.status === "healthy" && "text-emerald-700 dark:text-emerald-400",
+                      testResult.status !== "healthy" && "text-destructive",
+                    )}
+                    data-testid={`credential-test-result-${instance.instanceId}`}
+                  >
+                    {testResult.status === "healthy" ? "Healthy" : "Failing"}
+                  </span>
+                )}
+                <Button
+                  type="button"
+                  size="sm"
+                  data-testid={`credential-instance-test-button-${instance.instanceId}`}
+                  onClick={() => void onTest(instance)}
+                  disabled={activeTestInstanceId === instance.instanceId}
+                >
+                  {activeTestInstanceId === instance.instanceId ? "Testing…" : "Test"}
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="destructive"
+                  data-testid={`credential-instance-delete-button-${instance.instanceId}`}
+                  onClick={() => onOpenDelete(instance)}
+                >
+                  Delete
+                </Button>
+              </div>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}

package/src/features/credentials/components/CredentialsScreenTestFailureAlert.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/ui/alert";
+
+export type CredentialsScreenTestFailureAlertProps = {
+  message?: string;
+  onDismiss: () => void;
+};
+
+export function CredentialsScreenTestFailureAlert({ message, onDismiss }: CredentialsScreenTestFailureAlertProps) {
+  return (
+    <Alert variant="destructive" role="alert" data-testid="credential-test-failure-alert" className="mb-6 items-start">
+      <div className="min-w-0 flex-1">
+        <AlertTitle>Credential test failed</AlertTitle>
+        <AlertDescription className="text-destructive/90">{message || "Test failed"}</AlertDescription>
+      </div>
+      <AlertAction>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+          onClick={onDismiss}
+          aria-label="Dismiss"
+          data-testid="credential-test-failure-alert-dismiss"
+        >
+          ×
+        </Button>
+      </AlertAction>
+    </Alert>
+  );
+}

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

@@ -0,0 +1,33 @@
+import type { CredentialInstanceDto } from "../../workflows/hooks/realtime/realtime";
+import { useCredentialDialogSession } from "./useCredentialDialogSession";
+
+/**
+ * Create / edit credential dialog for embedding outside the Credentials page (e.g. workflow node properties).
+ * Delegates to {@link useCredentialDialogSession} with canvas-specific policies.
+ */
+export function useCredentialCreateDialog(
+  args: Readonly<{
+    workflowId: string;
+    onCreated?: (instance: CredentialInstanceDto) => void;
+  }>,
+) {
+  const { workflowId, onCreated } = args;
+  const session = useCredentialDialogSession({
+    workflowId,
+    onCredentialCreated: onCreated,
+    closeAfterCreatePolicy: "unless_oauth2",
+    oauthConnectedPolicy: "close_dialog",
+    buildDialogProps: true,
+  });
+
+  return {
+    isDialogOpen: session.dialogMode !== null,
+    dialogProps: session.dialogProps,
+    openCreateDialog: session.openCreateDialog,
+    openEditDialog: session.openEditDialog,
+    closeDialog: session.closeDialog,
+    oauthDisconnectConfirmOpen: session.oauthDisconnectConfirmOpen,
+    executeOAuthDisconnect: session.executeOAuthDisconnect,
+    cancelOAuthDisconnect: session.cancelOAuthDisconnect,
+  };
+}