@codemation/next-host 0.0.1

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

@@ -0,0 +1,71 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { AlertCircle } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+export function WorkflowActivationErrorDialog(
+  props: Readonly<{
+    open: boolean;
+    alertLines: ReadonlyArray<string>;
+    onDismiss: () => void;
+  }>,
+): ReactNode {
+  return (
+    <Dialog
+      open={props.open}
+      onOpenChange={(next) => {
+        if (!next) {
+          props.onDismiss();
+        }
+      }}
+    >
+      <DialogContent
+        showCloseButton
+        data-testid="workflow-activation-error-dialog"
+        className={cn("gap-0 overflow-hidden p-0 sm:max-w-lg", "ring-1 ring-destructive/20")}
+      >
+        <DialogHeader className="flex flex-row gap-4 p-6 text-left sm:items-start">
+          <AlertCircle className="mt-0.5 size-5 shrink-0 text-destructive" strokeWidth={2.25} aria-hidden />
+          <div className="flex min-w-0 flex-col gap-2">
+            <DialogTitle className="text-base font-semibold">Could not update activation</DialogTitle>
+            <DialogDescription asChild>
+              <div className="text-muted-foreground">
+                {props.alertLines.length === 1 ? (
+                  <p className="text-sm leading-snug" data-testid="workflow-activation-error-message">
+                    {props.alertLines[0]}
+                  </p>
+                ) : (
+                  <ul
+                    className="list-inside list-disc space-y-1.5 text-sm leading-snug"
+                    data-testid="workflow-activation-error-list"
+                  >
+                    {props.alertLines.map((line, index) => (
+                      <li key={`${index}-${line}`}>{line}</li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            </DialogDescription>
+          </div>
+        </DialogHeader>
+        <DialogFooter className="mx-0 mb-0 rounded-none border-t border-border bg-muted/40 px-6 py-4 sm:justify-end">
+          <Button type="button" data-testid="workflow-activation-error-dialog-ok" onClick={props.onDismiss}>
+            OK
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,64 @@
+"use client";
+
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { Loader2 } from "lucide-react";
+
+import { WorkflowActivationErrorDialog } from "./WorkflowActivationErrorDialog";
+
+export type WorkflowActivationHeaderControlProps = Readonly<{
+  active: boolean;
+  pending: boolean;
+  onActiveChange: (next: boolean) => void;
+  alertLines: ReadonlyArray<string> | null;
+  onDismissAlert: () => void;
+  /**
+   * `shell` — app header row (green track when active). `canvas` — legacy floating chrome on the canvas.
+   */
+  variant?: "shell" | "canvas";
+  /** When false, only the switch row is rendered (errors shown by the parent, e.g. under the shell header). */
+  showErrorAlert?: boolean;
+}>;
+
+export function WorkflowActivationHeaderControl(props: WorkflowActivationHeaderControlProps) {
+  const variant = props.variant ?? "canvas";
+  const showErrorAlert = props.showErrorAlert ?? true;
+  const isShell = variant === "shell";
+  return (
+    <div className="pointer-events-auto flex min-w-0 flex-col gap-2">
+      <div
+        data-testid="workflow-activation-control"
+        className={cn(
+          "pointer-events-auto flex items-center gap-2",
+          isShell
+            ? "py-0"
+            : "rounded-md border border-border/60 bg-background/90 px-2.5 py-1.5 shadow-sm backdrop-blur-sm",
+        )}
+      >
+        <span className="whitespace-nowrap text-xs font-semibold text-muted-foreground">Active</span>
+        {props.pending ? (
+          <Loader2
+            className="size-4 shrink-0 animate-spin text-muted-foreground"
+            aria-hidden
+            data-testid="workflow-activation-pending-indicator"
+          />
+        ) : null}
+        <Switch
+          checked={props.active}
+          onCheckedChange={props.onActiveChange}
+          disabled={props.pending}
+          aria-label={props.active ? "Deactivate workflow" : "Activate workflow"}
+          data-testid="workflow-activation-switch"
+          className={cn(
+            isShell &&
+              props.active &&
+              "data-[state=checked]:border-emerald-600 data-[state=checked]:bg-emerald-600 dark:data-[state=checked]:bg-emerald-600",
+          )}
+        />
+      </div>
+      {showErrorAlert && props.alertLines && props.alertLines.length > 0 ? (
+        <WorkflowActivationErrorDialog open alertLines={props.alertLines} onDismiss={props.onDismissAlert} />
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,52 @@
+import {
+  Bot,
+  Boxes,
+  Brain,
+  CircleAlert,
+  CircleCheckBig,
+  Clock3,
+  GitBranch,
+  Globe,
+  LoaderCircle,
+  PlaySquare,
+  SquareStack,
+  Workflow,
+  Wrench,
+  type LucideIcon,
+} from "lucide-react";
+
+export function WorkflowStatusIcon(args: Readonly<{ status: string; size?: number }>) {
+  const { status, size = 16 } = args;
+  if (status === "completed") {
+    return <CircleCheckBig size={size} style={{ color: "#15803d" }} strokeWidth={2.1} />;
+  }
+  if (status === "failed") {
+    return <CircleAlert size={size} style={{ color: "#b91c1c" }} strokeWidth={2.1} />;
+  }
+  if (status === "running" || status === "queued") {
+    return (
+      <LoaderCircle
+        size={size}
+        style={{ color: "#2563eb", animation: "codemationSpin 1s linear infinite" }}
+        strokeWidth={2.1}
+      />
+    );
+  }
+  return <Clock3 size={size} style={{ color: "#6b7280" }} strokeWidth={2.1} />;
+}
+
+export class WorkflowNodeIconResolver {
+  static resolveFallback(type: string, role?: string, icon?: string): LucideIcon {
+    if (icon?.toLowerCase() === "globe") return Globe;
+    if (role === "agent") return Bot;
+    if (role === "languageModel") return Brain;
+    if (role === "tool") return Wrench;
+    const normalizedType = type.toLowerCase();
+    if (normalizedType.includes("if")) return GitBranch;
+    if (normalizedType.includes("subworkflow")) return Workflow;
+    if (normalizedType.includes("map")) return SquareStack;
+    if (normalizedType.includes("trigger")) return PlaySquare;
+    if (normalizedType.includes("agent") || normalizedType.includes("ai")) return Bot;
+    return Boxes;
+  }
+}

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

@@ -0,0 +1,110 @@
+import { useEffect, useRef, useState } from "react";
+import { WorkflowExecutionInspectorDetailBody } from "./WorkflowExecutionInspectorDetailBody";
+import { WorkflowExecutionInspectorSidebarResizer } from "./WorkflowExecutionInspectorSidebarResizer";
+import { WorkflowExecutionInspectorTreePanel } from "./WorkflowExecutionInspectorTreePanel";
+import type {
+  WorkflowExecutionInspectorActions,
+  WorkflowExecutionInspectorFormatting,
+  WorkflowExecutionInspectorModel,
+} from "../../lib/workflowDetail/workflowDetailTypes";
+
+export function WorkflowExecutionInspector(
+  args: Readonly<{
+    model: WorkflowExecutionInspectorModel;
+    actions: WorkflowExecutionInspectorActions;
+    formatting: WorkflowExecutionInspectorFormatting;
+  }>,
+) {
+  const { actions, formatting, model } = args;
+  const {
+    executionTreeData,
+    executionTreeExpandedKeys,
+    selectedExecutionTreeKey,
+    isLoading,
+    loadError,
+    selectedNodeId,
+    selectedRun,
+    selectedWorkflowNode,
+    viewContext,
+  } = model;
+  const { onSelectNode } = actions;
+  const TREE_PANEL_MIN_WIDTH_PX = 220;
+  const TREE_PANEL_DEFAULT_WIDTH_PX = 320;
+  const DETAIL_PANEL_MIN_WIDTH_PX = 320;
+  const TREE_RESIZE_HANDLE_WIDTH_PX = 8;
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const resizeStartXRef = useRef<number | null>(null);
+  const resizeStartWidthRef = useRef(TREE_PANEL_DEFAULT_WIDTH_PX);
+  const [treePanelWidth, setTreePanelWidth] = useState(TREE_PANEL_DEFAULT_WIDTH_PX);
+  const [isTreePanelResizing, setIsTreePanelResizing] = useState(false);
+
+  useEffect(() => {
+    if (!isTreePanelResizing) return;
+    const handleMouseMove = (event: MouseEvent) => {
+      if (resizeStartXRef.current === null) return;
+      const inspectorWidth = containerRef.current?.clientWidth ?? 0;
+      const maxTreePanelWidth = Math.max(
+        TREE_PANEL_MIN_WIDTH_PX,
+        inspectorWidth - DETAIL_PANEL_MIN_WIDTH_PX - TREE_RESIZE_HANDLE_WIDTH_PX,
+      );
+      const nextWidth = resizeStartWidthRef.current + (event.clientX - resizeStartXRef.current);
+      setTreePanelWidth(Math.max(TREE_PANEL_MIN_WIDTH_PX, Math.min(maxTreePanelWidth, nextWidth)));
+    };
+    const handleMouseUp = () => {
+      setIsTreePanelResizing(false);
+      resizeStartXRef.current = null;
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isTreePanelResizing]);
+
+  if (isLoading && viewContext === "historical-run" && !selectedRun)
+    return <div style={{ opacity: 0.7 }}>Loading execution details…</div>;
+  if (isLoading && viewContext === "live-workflow" && !selectedWorkflowNode)
+    return <div style={{ opacity: 0.7 }}>Loading live workflow state…</div>;
+  if (loadError) return <div style={{ color: "#b91c1c" }}>{loadError}</div>;
+  if (!selectedNodeId) return <div style={{ opacity: 0.7 }}>Select a node to inspect.</div>;
+
+  return (
+    <div
+      data-testid="workflow-execution-inspector"
+      ref={containerRef}
+      style={{
+        display: "grid",
+        gridTemplateColumns: `${treePanelWidth}px ${TREE_RESIZE_HANDLE_WIDTH_PX}px minmax(0, 1fr)`,
+        height: "100%",
+        minWidth: 0,
+        minHeight: 0,
+        overflow: "hidden",
+      }}
+    >
+      <WorkflowExecutionInspectorTreePanel
+        model={{
+          executionTreeData,
+          executionTreeExpandedKeys,
+          selectedExecutionTreeKey,
+          viewContext,
+        }}
+        formatting={{
+          formatDurationLabel: formatting.formatDurationLabel,
+          getNodeDisplayName: formatting.getNodeDisplayName,
+        }}
+        onSelectNode={onSelectNode}
+      />
+      <WorkflowExecutionInspectorSidebarResizer
+        widthPx={treePanelWidth}
+        isResizing={isTreePanelResizing}
+        onResizeStart={(clientX, currentWidth) => {
+          resizeStartXRef.current = clientX;
+          resizeStartWidthRef.current = currentWidth;
+          setIsTreePanelResizing(true);
+        }}
+      />
+      <WorkflowExecutionInspectorDetailBody model={model} actions={actions} formatting={formatting} />
+    </div>
+  );
+}

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

@@ -0,0 +1,213 @@
+import { WorkflowStatusIcon } from "./WorkflowDetailIcons";
+import { WorkflowExecutionInspectorPanes } from "./WorkflowExecutionInspectorPanes";
+import type {
+  WorkflowExecutionInspectorActions,
+  WorkflowExecutionInspectorFormatting,
+  WorkflowExecutionInspectorModel,
+} from "../../lib/workflowDetail/workflowDetailTypes";
+
+export function WorkflowExecutionInspectorDetailBody(
+  props: Readonly<{
+    model: Pick<
+      WorkflowExecutionInspectorModel,
+      | "inputPane"
+      | "outputPane"
+      | "selectedMode"
+      | "selectedNodeError"
+      | "selectedNodeId"
+      | "nodeActions"
+      | "selectedNodeSnapshot"
+      | "selectedPinnedOutput"
+      | "selectedWorkflowNode"
+      | "viewContext"
+    >;
+    formatting: Pick<
+      WorkflowExecutionInspectorFormatting,
+      | "formatDateTime"
+      | "formatDurationLabel"
+      | "getErrorClipboardText"
+      | "getErrorHeadline"
+      | "getErrorStack"
+      | "getNodeDisplayName"
+      | "getSnapshotTimestamp"
+    >;
+    actions: Pick<
+      WorkflowExecutionInspectorActions,
+      | "onClearPinnedOutput"
+      | "onEditSelectedOutput"
+      | "onSelectFormat"
+      | "onSelectInputPort"
+      | "onSelectMode"
+      | "onSelectOutputPort"
+    >;
+  }>,
+) {
+  const { actions, formatting, model } = props;
+  const {
+    inputPane,
+    nodeActions,
+    outputPane,
+    selectedMode,
+    selectedNodeError,
+    selectedNodeId,
+    selectedNodeSnapshot,
+    selectedPinnedOutput,
+    selectedWorkflowNode,
+    viewContext,
+  } = model;
+  const {
+    formatDateTime,
+    formatDurationLabel,
+    getErrorClipboardText,
+    getErrorHeadline,
+    getErrorStack,
+    getNodeDisplayName,
+    getSnapshotTimestamp,
+  } = formatting;
+  const {
+    onClearPinnedOutput,
+    onEditSelectedOutput,
+    onSelectFormat,
+    onSelectInputPort,
+    onSelectMode,
+    onSelectOutputPort,
+  } = actions;
+  const paneActions = {
+    onClearPinnedOutput,
+    onEditSelectedOutput,
+    onSelectFormat,
+    onSelectInputPort,
+    onSelectOutputPort,
+  };
+  const errorFormatting = { getErrorClipboardText, getErrorHeadline, getErrorStack };
+  const isInputVisible = selectedMode === "input" || selectedMode === "split";
+  const isOutputVisible = selectedMode === "output" || selectedMode === "split";
+  const panes = isInputVisible && isOutputVisible ? [inputPane, outputPane] : [isInputVisible ? inputPane : outputPane];
+  const selectedNodeDurationLabel = formatDurationLabel(selectedNodeSnapshot);
+
+  const toggleInspectorPane = (tab: "input" | "output") => {
+    if (tab === "input") {
+      onSelectMode(isInputVisible ? "output" : isOutputVisible ? "split" : "input");
+      return;
+    }
+    onSelectMode(isOutputVisible ? "input" : isInputVisible ? "split" : "output");
+  };
+
+  return (
+    <div style={{ display: "grid", gridTemplateRows: "auto 1fr", minWidth: 0, minHeight: 0, overflow: "hidden" }}>
+      <div style={{ display: "grid", gap: 8, padding: "10px 12px", borderBottom: "1px solid #d1d5db" }}>
+        <div
+          style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}
+        >
+          <div style={{ minWidth: 0 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <WorkflowStatusIcon status={selectedNodeSnapshot?.status ?? "pending"} />
+              <div
+                data-testid="selected-node-name"
+                style={{
+                  fontWeight: 800,
+                  fontSize: 14,
+                  minWidth: 0,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {getNodeDisplayName(selectedWorkflowNode, selectedNodeId)}
+              </div>
+              {selectedPinnedOutput ? (
+                <span
+                  data-testid="selected-node-pinned-badge"
+                  style={{
+                    border: "1px solid #c4b5fd",
+                    background: "#f5f3ff",
+                    color: "#6d28d9",
+                    fontSize: 11,
+                    fontWeight: 800,
+                    letterSpacing: 0.3,
+                    textTransform: "uppercase",
+                    padding: "2px 6px",
+                  }}
+                >
+                  Pinned
+                </span>
+              ) : null}
+            </div>
+            <div style={{ marginTop: 4, fontSize: 12, color: "#6b7280" }}>
+              {selectedNodeSnapshot ? (
+                <>
+                  <span>{formatDateTime(getSnapshotTimestamp(selectedNodeSnapshot))}</span>
+                  {selectedNodeDurationLabel ? (
+                    <span data-testid="selected-node-duration">{` · ${selectedNodeDurationLabel}`}</span>
+                  ) : null}
+                </>
+              ) : viewContext === "live-workflow" ? (
+                "Live workflow node"
+              ) : (
+                "No execution snapshot yet"
+              )}
+            </div>
+          </div>
+          <div style={{ display: "flex", minWidth: 0, flexWrap: "wrap", justifyContent: "flex-end", gap: 8 }}>
+            <div style={{ display: "flex", gap: 8 }}>
+              {[
+                { tab: "input" as const, isSelected: isInputVisible, hasError: false },
+                { tab: "output" as const, isSelected: isOutputVisible, hasError: Boolean(selectedNodeError) },
+              ].map(({ tab, isSelected, hasError }) => (
+                <button
+                  key={tab}
+                  type="button"
+                  role="checkbox"
+                  data-testid={`inspector-tab-${tab}`}
+                  onClick={() => toggleInspectorPane(tab)}
+                  aria-checked={isSelected}
+                  style={{
+                    border: isSelected ? "1px solid #111827" : "1px solid #d1d5db",
+                    background: isSelected ? "#111827" : "white",
+                    color: isSelected ? "white" : hasError ? "#991b1b" : "#111827",
+                    padding: "7px 11px",
+                    fontWeight: 700,
+                    fontSize: 12,
+                    cursor: "pointer",
+                  }}
+                >
+                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+                    <span>
+                      {tab[0]!.toUpperCase()}
+                      {tab.slice(1)}
+                    </span>
+                    {hasError ? (
+                      <span
+                        style={{
+                          border: isSelected ? "1px solid rgba(255,255,255,0.28)" : "1px solid #fecaca",
+                          background: isSelected ? "rgba(255,255,255,0.16)" : "#fef2f2",
+                          color: isSelected ? "#ffffff" : "#991b1b",
+                          fontSize: 10,
+                          fontWeight: 800,
+                          letterSpacing: 0.3,
+                          textTransform: "uppercase",
+                          padding: "1px 5px",
+                        }}
+                      >
+                        Error
+                      </span>
+                    ) : null}
+                  </span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <WorkflowExecutionInspectorPanes
+        panes={panes}
+        nodeActions={nodeActions}
+        selectedPinnedOutput={selectedPinnedOutput}
+        selectedNodeError={selectedNodeError}
+        actions={paneActions}
+        formatting={errorFormatting}
+      />
+    </div>
+  );
+}