@codemation/next-host 0.0.1

package/src/features/workflows/components/workflowDetail/WorkflowJsonEditorDialog.tsx

@@ -0,0 +1,254 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { CodemationDialog } from "@/components/CodemationDialog";
+import { JsonMonacoEditor } from "@/components/json/JsonMonacoEditor";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { WorkflowDetailPresenter } from "../../lib/workflowDetail/WorkflowDetailPresenter";
+import type { JsonEditorState, PinBinaryMapsByItemIndex } from "../../lib/workflowDetail/workflowDetailTypes";
+import { WorkflowJsonEditorBinaryAttachmentRow } from "./WorkflowJsonEditorBinaryAttachmentRow";
+import { WorkflowJsonEditorBinaryUploadRow } from "./WorkflowJsonEditorBinaryUploadRow";
+
+export function WorkflowJsonEditorDialog(
+  args: Readonly<{
+    state: JsonEditorState;
+    onClose: () => void;
+    onSave: (value: string, binaryMaps?: PinBinaryMapsByItemIndex) => void;
+    /** Initial tab when `state.mode === "pin-output"` (defaults to `json`). */
+    initialEditorTab?: "json" | "binaries";
+  }>,
+) {
+  const { state, onClose, onSave, initialEditorTab } = args;
+  const [value, setValue] = useState(state.value);
+  const [error, setError] = useState<string | null>(null);
+  const [binaryMaps, setBinaryMaps] = useState<PinBinaryMapsByItemIndex>(() =>
+    state.mode === "pin-output" ? state.binaryMapsByItemIndex : [],
+  );
+  const [uploadError, setUploadError] = useState<string | null>(null);
+  const [uploadBusyKey, setUploadBusyKey] = useState<string | null>(null);
+
+  useEffect(() => {
+    setValue(state.value);
+    setError(null);
+    setUploadError(null);
+    if (state.mode === "pin-output") {
+      setBinaryMaps(state.binaryMapsByItemIndex);
+    }
+  }, [state]);
+
+  const itemCount = useMemo(() => {
+    try {
+      return WorkflowDetailPresenter.parseEditableItems(value).length;
+    } catch {
+      return 0;
+    }
+  }, [value]);
+
+  const handleJsonChange = useCallback(
+    (nextValue: string | undefined) => {
+      const next = nextValue ?? "";
+      setValue(next);
+      if (error) setError(null);
+      if (state.mode !== "pin-output") {
+        return;
+      }
+      try {
+        const parsed = WorkflowDetailPresenter.parseEditableItems(next);
+        setBinaryMaps((prev) => WorkflowDetailPresenter.reindexBinaryMapsForItemCount(prev, parsed.length));
+      } catch {
+        // Invalid JSON: keep binary maps until the JSON becomes valid again.
+      }
+    },
+    [error, state.mode],
+  );
+
+  const suggestAttachmentName = useCallback((existing: Readonly<Record<string, unknown>>): string => {
+    if (!existing.file) return "file";
+    let n = 1;
+    while (existing[`file_${n}`]) {
+      n += 1;
+    }
+    return `file_${n}`;
+  }, []);
+
+  const handleUploadOrReplace = useCallback(
+    async (itemIndex: number, file: File, attachmentName: string) => {
+      if (state.mode !== "pin-output") {
+        return;
+      }
+      const key = `${itemIndex}:${attachmentName}`;
+      setUploadError(null);
+      setUploadBusyKey(key);
+      try {
+        const attachment = await WorkflowDetailPresenter.uploadOverlayPinnedBinary({
+          workflowId: state.workflowId,
+          nodeId: state.nodeId,
+          itemIndex,
+          attachmentName,
+          file,
+        });
+        setBinaryMaps((prev) => {
+          const next = prev.map((row) => ({ ...row }));
+          while (next.length <= itemIndex) {
+            next.push({});
+          }
+          next[itemIndex] = { ...next[itemIndex], [attachmentName]: attachment };
+          return next;
+        });
+      } catch (cause: unknown) {
+        setUploadError(cause instanceof Error ? cause.message : String(cause));
+      } finally {
+        setUploadBusyKey(null);
+      }
+    },
+    [state],
+  );
+
+  const handleRemove = useCallback((itemIndex: number, attachmentName: string) => {
+    setBinaryMaps((prev) => {
+      const next = prev.map((row, i) => {
+        if (i !== itemIndex) {
+          return { ...row };
+        }
+        const copy = { ...row };
+        delete copy[attachmentName];
+        return copy;
+      });
+      return next;
+    });
+  }, []);
+
+  const runSave = useCallback(() => {
+    try {
+      if (state.mode === "pin-output") {
+        const normalized = WorkflowDetailPresenter.formatPinOutputJsonForSubmit(value);
+        onSave(normalized, binaryMaps);
+        return;
+      }
+      JSON.parse(value);
+      onSave(value);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    }
+  }, [binaryMaps, onSave, state.mode, value]);
+
+  return (
+    <CodemationDialog
+      onClose={onClose}
+      testId="workflow-json-editor-dialog"
+      size="full"
+      showCloseButton={false}
+      contentClassName="max-h-[min(90vh,800px)] w-[min(960px,100%)]"
+    >
+      <CodemationDialog.Title className="font-normal">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <div className="text-[15px] font-extrabold">{state.title}</div>
+            <div className="mt-1 text-xs text-muted-foreground">
+              {state.mode === "pin-output"
+                ? "Edit a top-level JSON array of output items (one element per item; Binaries uses the same indices). The engine always uses this shape. Save to pin the node output, then use Run on the canvas to continue."
+                : "Provide valid JSON. Objects become one item; arrays become multiple items."}
+            </div>
+          </div>
+          <Button type="button" variant="outline" size="sm" className="shrink-0 text-xs font-bold" onClick={onClose}>
+            Close
+          </Button>
+        </div>
+      </CodemationDialog.Title>
+      <CodemationDialog.Content className="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden px-4 py-3">
+        {state.mode === "pin-output" ? (
+          <Tabs defaultValue={initialEditorTab ?? "json"} className="flex min-h-0 flex-1 flex-col gap-2">
+            <TabsList variant="line" className="w-full shrink-0 justify-start">
+              <TabsTrigger value="json" className="text-xs font-bold">
+                JSON
+              </TabsTrigger>
+              <TabsTrigger
+                value="binaries"
+                className="text-xs font-bold"
+                data-testid="workflow-json-editor-binaries-tab"
+              >
+                Binaries
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent value="json" className="mt-0 min-h-0 flex-1 overflow-hidden data-[state=inactive]:hidden">
+              <JsonMonacoEditor path={`${state.mode}.json`} value={value} onChange={handleJsonChange} error={error} />
+            </TabsContent>
+            <TabsContent value="binaries" className="mt-0 min-h-0 flex-1 overflow-y-auto data-[state=inactive]:hidden">
+              <div className="flex flex-col gap-4 pb-2">
+                {itemCount === 0 ? (
+                  <div className="text-xs text-muted-foreground">
+                    Fix JSON on the JSON tab so at least one item exists.
+                  </div>
+                ) : null}
+                {state.mode === "pin-output"
+                  ? Array.from({ length: itemCount }, (_, itemIndex) => {
+                      const row = binaryMaps[itemIndex] ?? {};
+                      const entries = Object.entries(row);
+                      const workflowId = state.workflowId;
+                      return (
+                        <div
+                          key={itemIndex}
+                          className="rounded-md border border-border bg-muted/30 p-3"
+                          data-testid={`workflow-json-editor-binaries-item-${itemIndex}`}
+                        >
+                          <div className="text-xs font-extrabold">Item {itemIndex}</div>
+                          <div className="mt-2 flex flex-col gap-2">
+                            {entries.length === 0 ? (
+                              <div className="text-xs text-muted-foreground">No attachments for this item.</div>
+                            ) : null}
+                            {entries.map(([name, attachment]) => (
+                              <WorkflowJsonEditorBinaryAttachmentRow
+                                key={`${itemIndex}:${name}:${attachment.id}`}
+                                workflowId={workflowId}
+                                itemIndex={itemIndex}
+                                name={name}
+                                attachment={attachment}
+                                uploadBusyKey={uploadBusyKey}
+                                onReplace={(file) => {
+                                  void handleUploadOrReplace(itemIndex, file, name);
+                                }}
+                                onRemove={() => {
+                                  handleRemove(itemIndex, name);
+                                }}
+                              />
+                            ))}
+                            <WorkflowJsonEditorBinaryUploadRow
+                              itemIndex={itemIndex}
+                              suggestName={suggestAttachmentName(row)}
+                              busyKey={uploadBusyKey}
+                              onUpload={(file, attachmentName) => {
+                                void handleUploadOrReplace(itemIndex, file, attachmentName);
+                              }}
+                            />
+                          </div>
+                        </div>
+                      );
+                    })
+                  : null}
+                {uploadError ? <div className="text-xs text-destructive">{uploadError}</div> : null}
+              </div>
+            </TabsContent>
+          </Tabs>
+        ) : (
+          <JsonMonacoEditor path={`${state.mode}.json`} value={value} onChange={handleJsonChange} error={error} />
+        )}
+      </CodemationDialog.Content>
+      <CodemationDialog.Actions>
+        <Button type="button" variant="outline" size="sm" className="text-xs font-bold" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button
+          type="button"
+          data-testid="workflow-json-editor-save"
+          size="sm"
+          className="text-xs font-extrabold"
+          onClick={runSave}
+        >
+          Save
+        </Button>
+      </CodemationDialog.Actions>
+    </CodemationDialog>
+  );
+}

package/src/features/workflows/components/workflowDetail/WorkflowRunsList.tsx

@@ -0,0 +1,89 @@
+import type { RunSummary } from "../../hooks/realtime/realtime";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+import { WorkflowStatusIcon } from "./WorkflowDetailIcons";
+
+export function WorkflowRunsList(
+  args: Readonly<{
+    displayedRuns: ReadonlyArray<RunSummary> | undefined;
+    runsError: string | null;
+    selectedRunId: string | null;
+    formatRunListWhen: (value: string | undefined) => string;
+    formatRunListDurationLine: (run: Pick<RunSummary, "startedAt" | "finishedAt" | "status">) => string;
+    getExecutionModeLabel: (run: Pick<RunSummary, "executionOptions"> | undefined) => string | null;
+    onSelectRun: (runId: string) => void;
+  }>,
+) {
+  const {
+    displayedRuns,
+    formatRunListDurationLine,
+    formatRunListWhen,
+    getExecutionModeLabel,
+    onSelectRun,
+    runsError,
+    selectedRunId,
+  } = args;
+
+  if (runsError) return <p className="text-sm text-destructive">Failed to load executions: {runsError}</p>;
+  if (!displayedRuns) return <p className="text-sm text-muted-foreground">Loading executions…</p>;
+  if (displayedRuns.length === 0) return <p className="text-sm text-muted-foreground">No executions yet.</p>;
+
+  return (
+    <ul className="m-0 grid list-none gap-2 p-0">
+      {displayedRuns.map((run) => {
+        const whenLabel = formatRunListWhen(run.startedAt);
+        const durationLine = formatRunListDurationLine(run);
+        const modeLabel = getExecutionModeLabel(run);
+        const selected = selectedRunId === run.runId;
+        return (
+          <li key={run.runId}>
+            <button
+              type="button"
+              data-testid={`run-summary-${run.runId}`}
+              aria-label={`${run.status}, ${whenLabel}`}
+              onClick={() => onSelectRun(run.runId)}
+              className={cn(
+                "block w-full cursor-pointer border bg-card p-2.5 text-left font-inherit",
+                selected ? "border-primary bg-primary/5" : "border-border hover:bg-muted/50",
+              )}
+            >
+              <span className="visually-hidden" data-testid={`run-status-${run.runId}`}>
+                {run.status}
+              </span>
+              <div className="flex items-start gap-2.5">
+                <div className="shrink-0 pt-0.5">
+                  <WorkflowStatusIcon status={run.status} />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div
+                    data-testid={`run-started-label-${run.runId}`}
+                    className="text-sm leading-tight font-bold break-words text-foreground"
+                  >
+                    {whenLabel}
+                  </div>
+                  <div
+                    data-testid={`run-duration-line-${run.runId}`}
+                    className="mt-1 text-xs leading-snug font-semibold text-muted-foreground"
+                  >
+                    {durationLine}
+                  </div>
+                </div>
+                {modeLabel ? (
+                  <Badge
+                    variant="outline"
+                    data-testid={`run-mode-${run.runId}`}
+                    className="shrink-0 px-1.5 py-0.5 text-[10px] font-extrabold tracking-wide uppercase"
+                  >
+                    {modeLabel}
+                  </Badge>
+                ) : null}
+              </div>
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/src/features/workflows/components/workflowDetail/WorkflowRunsSidebar.tsx

@@ -0,0 +1,50 @@
+import type {
+  WorkflowRunsSidebarActions,
+  WorkflowRunsSidebarFormatting,
+  WorkflowRunsSidebarModel,
+} from "../../lib/workflowDetail/workflowDetailTypes";
+
+import { WorkflowRunsList } from "./WorkflowRunsList";
+
+/**
+ * Left column when the executions pane is open (see WorkflowDetailScreen grid). Must stay in document flow so
+ * `grid-cols-[320px_1fr]` reserves space; `position:absolute` would anchor to the wrong containing block and
+ * collapse the canvas column.
+ */
+export function WorkflowRunsSidebar(
+  args: Readonly<{
+    model: WorkflowRunsSidebarModel;
+    actions: WorkflowRunsSidebarActions;
+    formatting: WorkflowRunsSidebarFormatting;
+  }>,
+) {
+  const { actions, formatting, model } = args;
+  const { formatRunListDurationLine, formatRunListWhen, getExecutionModeLabel } = formatting;
+  const { onSelectRun } = actions;
+  const { displayedRuns, error, runsError, selectedRunId, workflowError } = model;
+
+  return (
+    <aside
+      data-testid="workflow-runs-sidebar"
+      className="flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden border-r border-border bg-card shadow-[6px_0_18px_rgba(15,23,42,0.06)]"
+    >
+      {error || workflowError ? (
+        <div className="shrink-0 border-b border-border px-3.5 py-2.5 text-sm text-destructive">
+          {error ?? workflowError}
+        </div>
+      ) : null}
+
+      <div className="min-h-0 flex-1 overflow-auto p-3.5">
+        <WorkflowRunsList
+          displayedRuns={displayedRuns}
+          formatRunListDurationLine={formatRunListDurationLine}
+          formatRunListWhen={formatRunListWhen}
+          getExecutionModeLabel={getExecutionModeLabel}
+          onSelectRun={onSelectRun}
+          runsError={runsError}
+          selectedRunId={selectedRunId}
+        />
+      </div>
+    </aside>
+  );
+}

package/src/features/workflows/hooks/canvas/useWorkflowCanvasVisibleNodeStatuses.ts

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+
+import type { ConnectionInvocationRecord, NodeExecutionSnapshot } from "../realtime/realtime";
+import { VisibleNodeStatusResolver } from "../../components/canvas/VisibleNodeStatusResolver";
+
+export function useWorkflowCanvasVisibleNodeStatuses(
+  nodeSnapshotsByNodeId: Readonly<Record<string, NodeExecutionSnapshot>>,
+  connectionInvocations?: ReadonlyArray<ConnectionInvocationRecord>,
+): Readonly<Record<string, NodeExecutionSnapshot["status"] | undefined>> {
+  return useMemo(
+    () => VisibleNodeStatusResolver.resolveStatuses(nodeSnapshotsByNodeId, connectionInvocations),
+    [connectionInvocations, nodeSnapshotsByNodeId],
+  );
+}

package/src/features/workflows/hooks/realtime/realtime.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+export type {
+  CredentialInstanceDto,
+  CredentialInstanceWithSecretsDto,
+  WorkflowCredentialHealthDto,
+} from "@codemation/host-src/application/contracts/CredentialContractsRegistry";
+export type { WorkflowDto, WorkflowSummary } from "@codemation/host-src/application/contracts/WorkflowViewContracts";
+export type {
+  InviteUserResponseDto,
+  UserAccountDto,
+  UserAccountStatus,
+} from "@codemation/host-src/application/contracts/userDirectoryContracts.types";
+
+export * from "../../lib/realtime/realtimeDomainTypes";
+
+export { WorkflowRealtimeProvider } from "../../components/realtime/WorkflowRealtimeProvider";
+
+import {
+  withInviteUserResponseLoginMethodsDefaults,
+  withUserAccountLoginMethodsDefaults,
+  type InviteUserResponseDto,
+  type UserAccountDto,
+  type UserAccountStatus,
+} from "@codemation/host-src/application/contracts/userDirectoryContracts.types";
+import type { WorkflowDto, WorkflowSummary } from "@codemation/host-src/application/contracts/WorkflowViewContracts";
+import { ApiPaths } from "@codemation/host-src/presentation/http/ApiPaths";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useContext, useEffect, useState } from "react";
+import { codemationApiClient } from "../../../../api/CodemationApiClient";
+import { RealtimeContext } from "../../components/realtime/RealtimeContext";
+import {
+  fetchCredentialFieldEnvStatus,
+  fetchCredentialInstanceWithSecrets,
+  fetchCredentialInstances,
+  fetchCredentialTypes,
+  fetchRun,
+  fetchUserAccounts,
+  fetchWorkflow,
+  fetchWorkflowCredentialHealth,
+  fetchWorkflowDebuggerOverlay,
+  fetchWorkflowRuns,
+  fetchWorkflows,
+  patchWorkflowActivation,
+} from "../../lib/realtime/realtimeApi";
+import { getRealtimeBridge } from "../../lib/realtime/realtimeClientBridge";
+import {
+  credentialFieldEnvStatusQueryKey,
+  credentialInstanceWithSecretsQueryKey,
+  credentialInstancesQueryKey,
+  credentialTypesQueryKey,
+  runQueryKey,
+  userAccountsQueryKey,
+  workflowCredentialHealthQueryKey,
+  workflowDebuggerOverlayQueryKey,
+  workflowDevBuildStateQueryKey,
+  workflowQueryKey,
+  workflowRunsQueryKey,
+  workflowsQueryKey,
+} from "../../lib/realtime/realtimeQueryKeys";
+import type { PersistedRunState, WorkflowDevBuildState } from "../../lib/realtime/realtimeDomainTypes";
+import { resolveFetchedRunState, resolveRunPollingIntervalMs } from "./runQueryPolling";
+
+export function useWorkflowRealtimeSubscription(workflowId: string | null | undefined): void {
+  const [bridgeVersion, setBridgeVersion] = useState(0);
+  const retainWorkflowSubscription =
+    useContext(RealtimeContext)?.retainWorkflowSubscription ?? getRealtimeBridge().retainWorkflowSubscription;
+
+  useEffect(() => {
+    const bridge = getRealtimeBridge();
+    const handleBridgeUpdate = () => {
+      setBridgeVersion((current) => current + 1);
+    };
+    bridge.listeners.add(handleBridgeUpdate);
+    return () => {
+      bridge.listeners.delete(handleBridgeUpdate);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!retainWorkflowSubscription || !workflowId) return;
+    return retainWorkflowSubscription(workflowId);
+  }, [bridgeVersion, retainWorkflowSubscription, workflowId]);
+}
+
+export function useWorkflowRealtimeConnectionState(): boolean {
+  return useContext(RealtimeContext)?.isConnected ?? false;
+}
+
+export function useWorkflowsQuery() {
+  return useWorkflowsQueryWithInitialData();
+}
+
+export function useWorkflowsQueryWithInitialData(initialData?: ReadonlyArray<WorkflowSummary>) {
+  const queryClient = useQueryClient();
+  const query = useQuery({
+    queryKey: workflowsQueryKey,
+    queryFn: fetchWorkflows,
+    initialData,
+  });
+  useEffect(() => {
+    if (!initialData) return;
+    queryClient.setQueryData(workflowsQueryKey, initialData);
+  }, [initialData, queryClient]);
+  return query;
+}
+
+export function useWorkflowQuery(workflowId: string, initialData?: WorkflowDto) {
+  const queryClient = useQueryClient();
+  const query = useQuery({
+    queryKey: workflowQueryKey(workflowId),
+    queryFn: async () => await fetchWorkflow(workflowId),
+    enabled: Boolean(workflowId),
+    initialData,
+  });
+  useEffect(() => {
+    if (!workflowId || !initialData) return;
+    queryClient.setQueryData(workflowQueryKey(workflowId), initialData);
+  }, [initialData, queryClient, workflowId]);
+  return query;
+}
+
+export function useSetWorkflowActivationMutation(workflowId: string) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (active: boolean) => await patchWorkflowActivation(workflowId, active),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: workflowQueryKey(workflowId) });
+      await queryClient.invalidateQueries({ queryKey: workflowsQueryKey });
+    },
+  });
+}
+
+export function useWorkflowRunsQuery(workflowId: string) {
+  return useQuery({
+    queryKey: workflowRunsQueryKey(workflowId),
+    queryFn: async () => await fetchWorkflowRuns(workflowId),
+    enabled: Boolean(workflowId),
+  });
+}
+
+export function useWorkflowDebuggerOverlayQuery(workflowId: string) {
+  return useQuery({
+    queryKey: workflowDebuggerOverlayQueryKey(workflowId),
+    queryFn: async () => await fetchWorkflowDebuggerOverlay(workflowId),
+    enabled: Boolean(workflowId),
+  });
+}
+
+export function useWorkflowDevBuildStateQuery(workflowId: string) {
+  return useQuery({
+    queryKey: workflowDevBuildStateQueryKey(workflowId),
+    queryFn: async (): Promise<WorkflowDevBuildState> => ({
+      state: "idle",
+      updatedAt: new Date(0).toISOString(),
+    }),
+    enabled: false,
+    initialData: {
+      state: "idle",
+      updatedAt: new Date(0).toISOString(),
+    } satisfies WorkflowDevBuildState,
+  });
+}
+export function useRunQuery(
+  runId: string | null | undefined,
+  options: Readonly<{ disableFetch?: boolean; pollWhileNonTerminalMs?: number }> = {},
+) {
+  const queryClient = useQueryClient();
+  return useQuery({
+    queryKey: runId ? runQueryKey(runId) : ["run", "disabled"],
+    queryFn: async ({ signal }) => {
+      const incoming = await fetchRun(runId!, { signal });
+      const previous = queryClient.getQueryData<PersistedRunState>(runQueryKey(runId!));
+      return resolveFetchedRunState({ incoming, previous });
+    },
+    enabled: Boolean(runId) && !options.disableFetch,
+    refetchInterval: (query) =>
+      resolveRunPollingIntervalMs({
+        runState: query.state.data as PersistedRunState | undefined,
+        pollWhileNonTerminalMs: options.pollWhileNonTerminalMs,
+      }),
+    staleTime: 30_000,
+  });
+}
+
+export function useCredentialTypesQuery() {
+  return useQuery({
+    queryKey: credentialTypesQueryKey,
+    queryFn: fetchCredentialTypes,
+  });
+}
+
+export function useCredentialFieldEnvStatusQuery() {
+  return useQuery({
+    queryKey: credentialFieldEnvStatusQueryKey,
+    queryFn: fetchCredentialFieldEnvStatus,
+  });
+}
+
+export function useCredentialInstancesQuery() {
+  return useQuery({
+    queryKey: credentialInstancesQueryKey,
+    queryFn: fetchCredentialInstances,
+  });
+}
+
+export function useCredentialInstanceWithSecretsQuery(instanceId: string | null | undefined) {
+  return useQuery({
+    queryKey: instanceId
+      ? credentialInstanceWithSecretsQueryKey(instanceId)
+      : ["credential-instance-with-secrets", "disabled"],
+    queryFn: async () => await fetchCredentialInstanceWithSecrets(instanceId!),
+    enabled: Boolean(instanceId),
+  });
+}
+
+export function useWorkflowCredentialHealthQuery(workflowId: string) {
+  return useQuery({
+    queryKey: workflowCredentialHealthQueryKey(workflowId),
+    queryFn: async () => await fetchWorkflowCredentialHealth(workflowId),
+    enabled: Boolean(workflowId),
+  });
+}
+
+export function useUserAccountsQuery() {
+  return useQuery({
+    queryKey: userAccountsQueryKey,
+    queryFn: fetchUserAccounts,
+  });
+}
+
+export function useInviteUserMutation() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (email: string): Promise<InviteUserResponseDto> => {
+      const body = await codemationApiClient.postJson<InviteUserResponseDto>(ApiPaths.userInvites(), { email });
+      return withInviteUserResponseLoginMethodsDefaults(body);
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: userAccountsQueryKey });
+    },
+  });
+}
+
+export function useRegenerateUserInviteMutation() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (userId: string): Promise<InviteUserResponseDto> => {
+      const body = await codemationApiClient.postJson<InviteUserResponseDto>(ApiPaths.userInviteRegenerate(userId));
+      return withInviteUserResponseLoginMethodsDefaults(body);
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: userAccountsQueryKey });
+    },
+  });
+}
+
+export function useUpdateUserAccountStatusMutation() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (args: Readonly<{ userId: string; status: UserAccountStatus }>): Promise<UserAccountDto> => {
+      const body = await codemationApiClient.patchJson<UserAccountDto>(ApiPaths.userStatus(args.userId), {
+        status: args.status,
+      });
+      return withUserAccountLoginMethodsDefaults(body);
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: userAccountsQueryKey });
+    },
+  });
+}