@codemation/next-host 0.0.1

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

@@ -0,0 +1,209 @@
+import type {
+  UpsertCredentialBindingRequest,
+  WorkflowCredentialHealthSlotDto,
+} from "@codemation/host-src/application/contracts/CredentialContractsRegistry";
+
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+import { CanvasNodeChromeTooltip } from "../canvas/CanvasNodeChromeTooltip";
+import { AlertCircle, CheckCircle2, HelpCircle, Link2, Loader2, MinusCircle, Pencil, Plus, Unplug } from "lucide-react";
+import type { ReactNode } from "react";
+import type { CredentialInstanceDto } from "../../hooks/realtime/realtime";
+
+const INSTANCE_PLACEHOLDER = "__none__";
+const NEW_CREDENTIAL_VALUE = "__new_credential__";
+
+class CredentialSlotHealthPresentation {
+  private constructor() {}
+
+  static icon(status: WorkflowCredentialHealthSlotDto["health"]["status"]): ReactNode {
+    const iconClass = "size-4 shrink-0";
+    if (status === "healthy") {
+      return <CheckCircle2 className={cn(iconClass, "text-emerald-600 dark:text-emerald-400")} aria-hidden />;
+    }
+    if (status === "failing") {
+      return <AlertCircle className={cn(iconClass, "text-destructive")} aria-hidden />;
+    }
+    if (status === "unbound") {
+      return <Unplug className={cn(iconClass, "text-amber-600 dark:text-amber-400")} aria-hidden />;
+    }
+    if (status === "optional-unbound") {
+      return <MinusCircle className={cn(iconClass, "text-muted-foreground")} aria-hidden />;
+    }
+    return <HelpCircle className={cn(iconClass, "text-muted-foreground")} aria-hidden />;
+  }
+
+  static label(status: WorkflowCredentialHealthSlotDto["health"]["status"]): string {
+    if (status === "healthy") {
+      return "Credential healthy";
+    }
+    if (status === "failing") {
+      return "Credential check failed";
+    }
+    if (status === "unbound") {
+      return "No credential bound";
+    }
+    if (status === "optional-unbound") {
+      return "Optional slot unbound";
+    }
+    return "Credential status unknown";
+  }
+}
+
+export function NodeCredentialBindingRow(
+  args: Readonly<{
+    slot: WorkflowCredentialHealthSlotDto;
+    compatibleInstances: ReadonlyArray<CredentialInstanceDto>;
+    /** Full catalog (e.g. bound instance may be resolved when not in the compatible filter). */
+    allCredentialInstances: ReadonlyArray<CredentialInstanceDto>;
+    selectedInstanceId: string;
+    isBinding: boolean;
+    onSelectInstance: (instanceId: string) => void;
+    onBind: (request: UpsertCredentialBindingRequest) => void;
+    onEditCredential: (instance: CredentialInstanceDto) => void;
+    onRequestNewCredential: () => void;
+  }>,
+) {
+  const {
+    allCredentialInstances,
+    compatibleInstances,
+    isBinding,
+    onBind,
+    onEditCredential,
+    onRequestNewCredential,
+    onSelectInstance,
+    selectedInstanceId,
+    slot,
+  } = args;
+  const slotTestIdSuffix = `${slot.nodeId}-${slot.requirement.slotKey}`;
+  const status = slot.health.status;
+  const disabledBind = !selectedInstanceId || isBinding;
+  const selectedCredentialInstance =
+    selectedInstanceId !== ""
+      ? (compatibleInstances.find((i) => i.instanceId === selectedInstanceId) ??
+        allCredentialInstances.find((i) => i.instanceId === selectedInstanceId))
+      : undefined;
+  const canEditCredential = Boolean(selectedCredentialInstance);
+  const healthTitle = CredentialSlotHealthPresentation.label(status);
+
+  return (
+    <div data-testid={`node-properties-credential-slot-${slotTestIdSuffix}`} className="flex flex-col gap-2 py-2">
+      <div className="min-w-0">
+        <span className="text-xs font-bold text-foreground">{slot.requirement.label}</span>
+        {slot.health.message ? (
+          <div
+            className={cn(
+              "mt-0.5 line-clamp-2 text-[11px] leading-snug",
+              status === "failing" ? "text-destructive" : "text-muted-foreground",
+            )}
+          >
+            {slot.health.message}
+          </div>
+        ) : null}
+      </div>
+      <div className="flex min-w-0 flex-wrap items-center gap-2">
+        <Select
+          value={selectedInstanceId || INSTANCE_PLACEHOLDER}
+          onValueChange={(value) => {
+            if (value === NEW_CREDENTIAL_VALUE) {
+              onRequestNewCredential();
+              return;
+            }
+            onSelectInstance(value === INSTANCE_PLACEHOLDER ? "" : value);
+          }}
+        >
+          <SelectTrigger
+            className="h-8 min-h-8 w-full min-w-0 flex-1 sm:max-w-none"
+            data-testid={`node-properties-credential-slot-select-${slotTestIdSuffix}`}
+            size="sm"
+          >
+            <span className="flex min-w-0 flex-1 items-center gap-2">
+              <CanvasNodeChromeTooltip
+                testId={`node-properties-credential-slot-status-tooltip-${slotTestIdSuffix}`}
+                ariaLabel={healthTitle}
+                tooltip={healthTitle}
+              >
+                <span
+                  className="inline-flex shrink-0"
+                  data-testid={`node-properties-credential-slot-status-${slotTestIdSuffix}`}
+                >
+                  {CredentialSlotHealthPresentation.icon(status)}
+                </span>
+              </CanvasNodeChromeTooltip>
+              <SelectValue placeholder="Select credential…" />
+            </span>
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={INSTANCE_PLACEHOLDER}>Select credential…</SelectItem>
+            {compatibleInstances.map((instance) => (
+              <SelectItem key={instance.instanceId} value={instance.instanceId}>
+                {instance.displayName}
+              </SelectItem>
+            ))}
+            <SelectSeparator />
+            <SelectItem
+              value={NEW_CREDENTIAL_VALUE}
+              data-testid={`node-properties-credential-slot-new-${slotTestIdSuffix}`}
+              className="font-medium"
+            >
+              <span className="flex items-center gap-2">
+                <Plus className="size-4 shrink-0" aria-hidden />
+                <span>New credential</span>
+              </span>
+            </SelectItem>
+          </SelectContent>
+        </Select>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="h-8 shrink-0 px-2.5 text-xs font-bold leading-none"
+          data-testid={`node-properties-credential-slot-edit-${slotTestIdSuffix}`}
+          disabled={!canEditCredential}
+          aria-label={canEditCredential ? undefined : "Select a credential to edit"}
+          onClick={() => {
+            if (selectedCredentialInstance) {
+              onEditCredential(selectedCredentialInstance);
+            }
+          }}
+        >
+          <span className="inline-flex items-center gap-1.5">
+            <Pencil className="size-4 shrink-0" aria-hidden />
+            <span className="leading-none">Edit</span>
+          </span>
+        </Button>
+        <Button
+          type="button"
+          size="sm"
+          data-testid={`node-properties-credential-slot-bind-${slotTestIdSuffix}`}
+          disabled={disabledBind}
+          className="h-8 shrink-0 px-2.5 text-xs font-bold leading-none"
+          onClick={() =>
+            onBind({
+              workflowId: slot.workflowId,
+              nodeId: slot.nodeId,
+              slotKey: slot.requirement.slotKey,
+              instanceId: selectedInstanceId,
+            })
+          }
+        >
+          <span className="inline-flex items-center gap-1.5">
+            {isBinding ? (
+              <>
+                <Loader2 className="size-4 shrink-0 animate-spin" aria-hidden />
+                <span className="leading-none">Binding…</span>
+              </>
+            ) : (
+              <>
+                <Link2 className="size-4 shrink-0" aria-hidden />
+                <span className="leading-none">Bind</span>
+              </>
+            )}
+          </span>
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,227 @@
+import type { UpsertCredentialBindingRequest } from "@codemation/host-src/application/contracts/CredentialContractsRegistry";
+import { ApiPaths } from "@codemation/host-src/presentation/http/ApiPaths";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { codemationApiClient } from "../../../../api/CodemationApiClient";
+import { CredentialConfirmDialog } from "../../../credentials/components/CredentialConfirmDialog";
+import { CredentialDialog } from "../../../credentials/components/CredentialDialog";
+import { useCredentialCreateDialog } from "../../../credentials/hooks/useCredentialCreateDialog";
+import { useCredentialInstancesQuery, useWorkflowCredentialHealthQuery } from "../../hooks/realtime/realtime";
+import { NodeCredentialBindingRow } from "./NodeCredentialBindingRow";
+import type { WorkflowDiagramNode } from "../../lib/workflowDetail/workflowDetailTypes";
+
+export function NodeCredentialBindingsSection(
+  args: Readonly<{
+    workflowId: string;
+    node: WorkflowDiagramNode;
+    pendingCredentialEditForNodeId: string | null;
+    onConsumedPendingCredentialEdit: () => void;
+  }>,
+) {
+  const { node, workflowId, pendingCredentialEditForNodeId, onConsumedPendingCredentialEdit } = args;
+  const pendingCreateSlotBindingKeyRef = useRef<string | null>(null);
+  const queryClient = useQueryClient();
+  const credentialInstancesQuery = useCredentialInstancesQuery();
+  const workflowCredentialHealthQuery = useWorkflowCredentialHealthQuery(workflowId);
+  const [credentialError, setCredentialError] = useState<string | null>(null);
+  const [bindingInstanceIdBySlotKey, setBindingInstanceIdBySlotKey] = useState<Readonly<Record<string, string>>>({});
+  const [activeBindingSlotKey, setActiveBindingSlotKey] = useState<string | null>(null);
+  const {
+    isDialogOpen,
+    dialogProps,
+    openCreateDialog,
+    openEditDialog,
+    oauthDisconnectConfirmOpen,
+    executeOAuthDisconnect,
+    cancelOAuthDisconnect,
+  } = useCredentialCreateDialog({
+    workflowId,
+    onCreated: (instance) => {
+      const key = pendingCreateSlotBindingKeyRef.current;
+      if (key) {
+        setBindingInstanceIdBySlotKey((current) => ({
+          ...current,
+          [key]: instance.instanceId,
+        }));
+        pendingCreateSlotBindingKeyRef.current = null;
+      }
+    },
+  });
+  const nodeCredentialSlots = useMemo(() => {
+    const slots = workflowCredentialHealthQuery.data?.slots ?? [];
+    return slots.filter((slot) => slot.nodeId === node.id);
+  }, [node.id, workflowCredentialHealthQuery.data]);
+
+  const pendingCredentialEditHandledRef = useRef(false);
+
+  useEffect(() => {
+    if (pendingCredentialEditForNodeId === null) {
+      pendingCredentialEditHandledRef.current = false;
+      return;
+    }
+    if (pendingCredentialEditForNodeId !== node.id) {
+      pendingCredentialEditHandledRef.current = false;
+    }
+  }, [node.id, pendingCredentialEditForNodeId]);
+
+  useEffect(() => {
+    if (pendingCredentialEditForNodeId !== node.id) {
+      return;
+    }
+    if (pendingCredentialEditHandledRef.current) {
+      return;
+    }
+    if (workflowCredentialHealthQuery.isLoading) {
+      return;
+    }
+    const slotsWithInstance = nodeCredentialSlots.filter((slot) => slot.instance?.instanceId);
+    if (slotsWithInstance.length === 0) {
+      pendingCredentialEditHandledRef.current = true;
+      onConsumedPendingCredentialEdit();
+      return;
+    }
+    if (credentialInstancesQuery.isLoading) {
+      return;
+    }
+    const first = slotsWithInstance[0];
+    const instanceId = first.instance!.instanceId;
+    const full = credentialInstancesQuery.data?.find((instance) => instance.instanceId === instanceId);
+    pendingCredentialEditHandledRef.current = true;
+    if (full) {
+      openEditDialog(full);
+    }
+    onConsumedPendingCredentialEdit();
+  }, [
+    credentialInstancesQuery.data,
+    credentialInstancesQuery.isLoading,
+    node.id,
+    nodeCredentialSlots,
+    onConsumedPendingCredentialEdit,
+    openEditDialog,
+    pendingCredentialEditForNodeId,
+    workflowCredentialHealthQuery.isLoading,
+  ]);
+
+  useEffect(() => {
+    setBindingInstanceIdBySlotKey({});
+    setCredentialError(null);
+    setActiveBindingSlotKey(null);
+  }, [node.id]);
+
+  const bindCredential = (request: UpsertCredentialBindingRequest) => {
+    void (async () => {
+      const activeKey = `${request.nodeId}:${request.slotKey}`;
+      try {
+        setActiveBindingSlotKey(activeKey);
+        setCredentialError(null);
+        await codemationApiClient.putJson<void>(ApiPaths.credentialBindings(), request);
+        await Promise.all([
+          queryClient.invalidateQueries({ queryKey: ["workflow-credential-health", workflowId] }),
+          queryClient.invalidateQueries({ queryKey: ["credential-instances"] }),
+        ]);
+      } catch (error) {
+        setCredentialError(error instanceof Error ? error.message : String(error));
+      } finally {
+        setActiveBindingSlotKey(null);
+      }
+    })();
+  };
+
+  return (
+    <section data-testid="node-properties-credential-section" style={{ padding: "10px 12px 14px" }}>
+      <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 0.45, textTransform: "uppercase", opacity: 0.64 }}>
+        Credentials
+      </div>
+      {nodeCredentialSlots.length === 0 ? (
+        <div
+          style={{
+            marginTop: 10,
+            padding: 10,
+            border: "1px solid #e5e7eb",
+            background: "#f8fafc",
+            fontSize: 12,
+            lineHeight: 1.5,
+            color: "#475569",
+          }}
+        >
+          No credential slots declared for this node.
+        </div>
+      ) : (
+        <div
+          style={{
+            marginTop: 10,
+            padding: "0 10px",
+            border: "1px solid #e5e7eb",
+            background: "#ffffff",
+            display: "flex",
+            flexDirection: "column",
+            gap: 0,
+          }}
+        >
+          {nodeCredentialSlots.map((slot, index) => {
+            const compatibleInstances =
+              credentialInstancesQuery.data?.filter((instance) =>
+                slot.requirement.acceptedTypes.includes(instance.typeId),
+              ) ?? [];
+            const allInstances = credentialInstancesQuery.data ?? [];
+            const bindingKey = `${slot.nodeId}:${slot.requirement.slotKey}`;
+            const selectedInstanceId = bindingInstanceIdBySlotKey[bindingKey] ?? slot.instance?.instanceId ?? "";
+            return (
+              <div key={bindingKey} style={{ borderTop: index > 0 ? "1px solid #f1f5f9" : "none" }}>
+                <NodeCredentialBindingRow
+                  slot={slot}
+                  compatibleInstances={compatibleInstances}
+                  allCredentialInstances={allInstances}
+                  selectedInstanceId={selectedInstanceId}
+                  isBinding={activeBindingSlotKey === bindingKey}
+                  onSelectInstance={(instanceId) =>
+                    setBindingInstanceIdBySlotKey((current) => ({
+                      ...current,
+                      [bindingKey]: instanceId,
+                    }))
+                  }
+                  onBind={bindCredential}
+                  onEditCredential={openEditDialog}
+                  onRequestNewCredential={() => {
+                    pendingCreateSlotBindingKeyRef.current = bindingKey;
+                    const accepted = slot.requirement.acceptedTypes;
+                    openCreateDialog(accepted.length > 0 ? accepted : undefined);
+                  }}
+                />
+              </div>
+            );
+          })}
+        </div>
+      )}
+      {credentialError ? (
+        <div style={{ marginTop: 8, fontSize: 12, color: "#b91c1c", lineHeight: 1.35 }}>{credentialError}</div>
+      ) : null}
+      {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={cancelOAuthDisconnect}
+          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>
+      ) : null}
+      {isDialogOpen && dialogProps ? (
+        <CredentialDialog
+          key={dialogProps.editingInstance?.instanceId ?? "create"}
+          {...dialogProps}
+          onClose={() => {
+            pendingCreateSlotBindingKeyRef.current = null;
+            dialogProps.onClose();
+          }}
+        />
+      ) : null}
+    </section>
+  );
+}

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

@@ -0,0 +1,51 @@
+import type { WorkflowDiagramNode } from "../../lib/workflowDetail/workflowDetailTypes";
+
+export function NodePropertiesConfigSection(args: Readonly<{ node: WorkflowDiagramNode }>) {
+  const { node } = args;
+  return (
+    <section
+      data-testid="node-properties-config-section"
+      style={{ padding: "10px 12px", borderBottom: "1px solid #f1f5f9" }}
+    >
+      <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 0.45, textTransform: "uppercase", opacity: 0.64 }}>
+        Configuration
+      </div>
+      <p style={{ margin: "8px 0 0", fontSize: 12, lineHeight: 1.5, color: "#475569" }}>
+        TODO: surface real node configuration here later, such as model parameters, tool wiring, trigger settings, and
+        execution hints.
+      </p>
+      <div data-testid="node-properties-policy-section" style={{ marginTop: 10 }}>
+        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.4, opacity: 0.72 }}>Execution policies</div>
+        <div style={{ marginTop: 6, fontSize: 12, color: "#334155", display: "grid", gap: 6 }}>
+          <div data-testid="node-properties-retry-policy-line">
+            <span style={{ fontWeight: 700 }}>Retry: </span>
+            <span data-testid="node-properties-retry-policy-value">{node.retryPolicySummary ?? "—"}</span>
+          </div>
+          <div data-testid="node-properties-node-error-handler-line">
+            <span style={{ fontWeight: 700 }}>Node error handler: </span>
+            <span data-testid="node-properties-node-error-handler-value">
+              {node.hasNodeErrorHandler ? "yes" : "no"}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        style={{
+          marginTop: 10,
+          padding: 10,
+          border: "1px dashed #cbd5e1",
+          background: "#f8fafc",
+          fontSize: 11,
+          fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+          color: "#334155",
+          lineHeight: 1.55,
+        }}
+      >
+        <div>{`kind: ${node.kind}`}</div>
+        <div>{`type: ${node.type}`}</div>
+        {node.role ? <div>{`role: ${node.role}`}</div> : null}
+        {node.parentNodeId ? <div>{`parentNodeId: ${node.parentNodeId}`}</div> : null}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,50 @@
+import { X } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+export function NodePropertiesPanelHeader(
+  args: Readonly<{
+    title: string;
+    subtitle?: string;
+    onClose: () => void;
+  }>,
+) {
+  const { onClose, subtitle, title } = args;
+  return (
+    <div
+      data-testid="node-properties-panel-header"
+      className="flex shrink-0 items-start justify-between gap-2.5 border-b border-border bg-muted/40 px-3 pt-3 pb-2.5"
+    >
+      <div className="min-w-0">
+        <div className="text-[11px] font-extrabold tracking-wide text-muted-foreground uppercase opacity-90">
+          Node properties
+        </div>
+        <div
+          data-testid="node-properties-panel-title"
+          className="mt-1 text-sm leading-tight font-extrabold break-words text-foreground"
+        >
+          {title}
+        </div>
+        {subtitle ? (
+          <div
+            data-testid="node-properties-panel-subtitle"
+            className="mt-1 break-all font-mono text-[11px] text-muted-foreground"
+          >
+            {subtitle}
+          </div>
+        ) : null}
+      </div>
+      <Button
+        type="button"
+        variant="outline"
+        size="icon-sm"
+        data-testid="node-properties-panel-close"
+        aria-label="Close node properties"
+        onClick={onClose}
+        className="shrink-0"
+      >
+        <X size={16} strokeWidth={2} />
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,134 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, type MouseEvent as ReactMouseEvent } from "react";
+
+import { cn } from "@/lib/utils";
+
+import { NodeCredentialBindingsSection } from "./NodeCredentialBindingsSection";
+import { NodePropertiesConfigSection } from "./NodePropertiesConfigSection";
+import { NodePropertiesPanelHeader } from "./NodePropertiesPanelHeader";
+import { WorkflowDetailPresenter } from "../../lib/workflowDetail/WorkflowDetailPresenter";
+import type { WorkflowDiagramNode } from "../../lib/workflowDetail/workflowDetailTypes";
+
+const PANEL_WIDTH_STORAGE_KEY = "codemation-node-properties-panel-width-px";
+const DEFAULT_PANEL_WIDTH_PX = 300;
+const MIN_PANEL_WIDTH_PX = 240;
+const MAX_PANEL_WIDTH_PX = 560;
+
+function loadStoredPanelWidthPx(): number {
+  if (typeof window === "undefined") {
+    return DEFAULT_PANEL_WIDTH_PX;
+  }
+  const raw = localStorage.getItem(PANEL_WIDTH_STORAGE_KEY);
+  const n = raw ? Number.parseInt(raw, 10) : NaN;
+  if (!Number.isFinite(n)) {
+    return DEFAULT_PANEL_WIDTH_PX;
+  }
+  return Math.min(MAX_PANEL_WIDTH_PX, Math.max(MIN_PANEL_WIDTH_PX, n));
+}
+
+/**
+ * Overlays the canvas from the right (absolute) so the diagram does not reflow when opened/closed.
+ */
+export function NodePropertiesSlidePanel(
+  args: Readonly<{
+    workflowId: string;
+    isOpen: boolean;
+    node: WorkflowDiagramNode | undefined;
+    onClose: () => void;
+    pendingCredentialEditForNodeId: string | null;
+    onConsumedPendingCredentialEdit: () => void;
+  }>,
+) {
+  const { isOpen, node, onClose, workflowId, pendingCredentialEditForNodeId, onConsumedPendingCredentialEdit } = args;
+  const isVisible = isOpen && Boolean(node);
+  const [panelWidthPx, setPanelWidthPx] = useState(DEFAULT_PANEL_WIDTH_PX);
+  const [isResizing, setIsResizing] = useState(false);
+  const panelWidthRef = useRef(DEFAULT_PANEL_WIDTH_PX);
+  const resizeStartClientXRef = useRef(0);
+  const resizeStartWidthPxRef = useRef(DEFAULT_PANEL_WIDTH_PX);
+
+  useEffect(() => {
+    const loaded = loadStoredPanelWidthPx();
+    setPanelWidthPx(loaded);
+    panelWidthRef.current = loaded;
+  }, []);
+
+  useEffect(() => {
+    panelWidthRef.current = panelWidthPx;
+  }, [panelWidthPx]);
+
+  const handleResizeMouseDown = useCallback((event: ReactMouseEvent): void => {
+    event.preventDefault();
+    setIsResizing(true);
+    resizeStartClientXRef.current = event.clientX;
+    resizeStartWidthPxRef.current = panelWidthRef.current;
+    const onMove = (moveEvent: MouseEvent): void => {
+      const delta = resizeStartClientXRef.current - moveEvent.clientX;
+      const next = Math.min(MAX_PANEL_WIDTH_PX, Math.max(MIN_PANEL_WIDTH_PX, resizeStartWidthPxRef.current + delta));
+      panelWidthRef.current = next;
+      setPanelWidthPx(next);
+    };
+    const onUp = (): void => {
+      setIsResizing(false);
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      localStorage.setItem(PANEL_WIDTH_STORAGE_KEY, String(panelWidthRef.current));
+    };
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }, []);
+
+  return (
+    <aside
+      data-testid="node-properties-slide-panel"
+      aria-hidden={!isVisible}
+      className={cn(
+        "absolute top-0 right-0 bottom-0 z-[8] flex flex-col overflow-hidden bg-card shadow-[-6px_0_18px_rgba(15,23,42,0.06)] transition-transform duration-200 ease-out",
+        isVisible
+          ? "translate-x-0 border-l border-border"
+          : "pointer-events-none translate-x-full border-l border-transparent",
+        isResizing && "select-none",
+      )}
+      style={{
+        width: panelWidthPx,
+      }}
+    >
+      {isVisible && node ? (
+        <div data-testid="node-properties-panel" className="relative flex h-full min-h-0 w-full min-w-0 flex-col">
+          <div
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize properties panel"
+            data-testid="node-properties-panel-resize-handle"
+            className={cn(
+              "absolute top-0 bottom-0 left-0 z-[1] w-1 cursor-col-resize bg-transparent hover:bg-primary/30",
+              isResizing && "bg-primary/30",
+            )}
+            onMouseDown={handleResizeMouseDown}
+          />
+          <div className="flex h-full min-h-0 w-full min-w-0 flex-col pl-1">
+            <NodePropertiesPanelHeader
+              title={WorkflowDetailPresenter.getNodeDisplayName(node, node.id)}
+              subtitle={node.id}
+              onClose={onClose}
+            />
+            <div className="min-h-0 flex-1 overflow-auto">
+              <NodePropertiesConfigSection node={node} />
+              <NodeCredentialBindingsSection
+                workflowId={workflowId}
+                node={node}
+                pendingCredentialEditForNodeId={pendingCredentialEditForNodeId}
+                onConsumedPendingCredentialEdit={onConsumedPendingCredentialEdit}
+              />
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </aside>
+  );
+}