@codemation/next-host 0.0.1

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

@@ -0,0 +1,114 @@
+import JsonView from "@uiw/react-json-view";
+import { githubLightTheme } from "@uiw/react-json-view/githubLight";
+import { useState } from "react";
+
+import type { CopyState } from "../../lib/workflowDetail/workflowDetailTypes";
+
+export function WorkflowInspectorJsonView(args: Readonly<{ value: unknown; emptyLabel: string }>) {
+  const { value, emptyLabel } = args;
+  const [collapsedLevel, setCollapsedLevel] = useState<boolean | number>(1);
+  const [copyState, setCopyState] = useState<CopyState>("idle");
+  const isRenderableJson = value !== null && typeof value === "object";
+
+  if (value === undefined) {
+    return (
+      <div data-testid="workflow-inspector-empty-state" style={{ opacity: 0.62, fontSize: 13 }}>
+        {emptyLabel}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ height: "100%", minHeight: 0, display: "grid", gridTemplateRows: "auto 1fr", gap: 10 }}>
+      <div
+        style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 10 }}
+      >
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+          <button
+            onClick={() => setCollapsedLevel(true)}
+            style={{
+              border: "1px solid #d1d5db",
+              background: "white",
+              padding: "6px 10px",
+              cursor: "pointer",
+              fontWeight: 700,
+              fontSize: 12,
+            }}
+          >
+            Collapse all
+          </button>
+          <button
+            onClick={() => setCollapsedLevel(false)}
+            style={{
+              border: "1px solid #d1d5db",
+              background: "white",
+              padding: "6px 10px",
+              cursor: "pointer",
+              fontWeight: 700,
+              fontSize: 12,
+            }}
+          >
+            Expand all
+          </button>
+        </div>
+        <div data-testid="workflow-inspector-json-copy-hint" style={{ fontSize: 12, opacity: 0.65 }}>
+          {copyState === "copied" ? "Copied to clipboard" : "Use the copy icon in the viewer"}
+        </div>
+      </div>
+      <div
+        data-testid="workflow-inspector-json-panel"
+        style={{
+          minWidth: 0,
+          overflowX: "hidden",
+          overflowY: "auto",
+          border: "1px solid #d1d5db",
+          background: "#f8fafc",
+          padding: 12,
+        }}
+      >
+        {isRenderableJson ? (
+          <div style={{ minWidth: 0, overflowWrap: "anywhere", wordBreak: "break-word" }}>
+            <JsonView
+              value={value as object}
+              collapsed={collapsedLevel}
+              enableClipboard
+              displayDataTypes={false}
+              displayObjectSize
+              shortenTextAfterLength={0}
+              style={{
+                ...githubLightTheme,
+                backgroundColor: "transparent",
+                padding: 0,
+                fontSize: 12,
+                lineHeight: 1.6,
+                fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+              }}
+              onCopied={() => {
+                setCopyState("copied");
+                window.setTimeout(() => setCopyState("idle"), 1500);
+              }}
+              onExpand={() => {
+                if (copyState === "copied") setCopyState("idle");
+              }}
+            />
+          </div>
+        ) : (
+          <pre
+            style={{
+              margin: 0,
+              whiteSpace: "pre-wrap",
+              overflowWrap: "anywhere",
+              wordBreak: "break-word",
+              fontSize: 12,
+              lineHeight: 1.6,
+              color: "#111827",
+              fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+            }}
+          >
+            {JSON.stringify(value, null, 2)}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,132 @@
+import type { ReactNode } from "react";
+
+import type { PrettyJsonTreeNode } from "../../lib/workflowDetail/workflowDetailTypes";
+
+export class WorkflowInspectorPrettyTreePresenter {
+  static buildTreeData(value: unknown): ReadonlyArray<PrettyJsonTreeNode> {
+    if (value === undefined) {
+      return [];
+    }
+    if (Array.isArray(value)) {
+      if (value.length === 0) {
+        return [this.createEmptyCollectionNode("value", "Array(0)", "pretty-root")];
+      }
+      return value.map((entry, index) => this.createNode(`[${index}]`, entry, `pretty-root.${index}`));
+    }
+    if (this.isRecord(value)) {
+      const entries = Object.entries(value);
+      if (entries.length === 0) {
+        return [this.createEmptyCollectionNode("value", "Object(0)", "pretty-root")];
+      }
+      return entries.map(([key, entry]) => this.createNode(key, entry, `pretty-root.${key}`));
+    }
+    return [this.createNode("value", value, "pretty-root.value")];
+  }
+
+  static collectKeys(nodes: ReadonlyArray<PrettyJsonTreeNode>): ReadonlyArray<string> {
+    const keys: string[] = [];
+    this.collectKeysRecursive(nodes, keys);
+    return keys;
+  }
+
+  private static collectKeysRecursive(nodes: ReadonlyArray<PrettyJsonTreeNode>, keys: string[]): void {
+    for (const node of nodes) {
+      const children = node.children ?? [];
+      if (children.length > 0) {
+        keys.push(node.key);
+        this.collectKeysRecursive(children, keys);
+      }
+    }
+  }
+
+  private static createNode(label: string, value: unknown, key: string): PrettyJsonTreeNode {
+    if (Array.isArray(value)) {
+      const children = value.map((entry, index) => this.createNode(`[${index}]`, entry, `${key}.${index}`));
+      if (children.length === 0) {
+        return {
+          key,
+          label,
+          inlineValue: this.renderInlineValue("[]"),
+          isLeaf: true,
+        };
+      }
+      return {
+        key,
+        label,
+        children,
+        isLeaf: false,
+      };
+    }
+    if (this.isRecord(value)) {
+      const children = Object.entries(value).map(([childKey, childValue]) =>
+        this.createNode(childKey, childValue, `${key}.${childKey}`),
+      );
+      if (children.length === 0) {
+        return {
+          key,
+          label,
+          inlineValue: this.renderInlineValue("{}"),
+          isLeaf: true,
+        };
+      }
+      return {
+        key,
+        label,
+        children,
+        isLeaf: false,
+      };
+    }
+    const multilineValue = typeof value === "string" && value.includes("\n") ? value : undefined;
+    return {
+      key,
+      label,
+      inlineValue: multilineValue ? undefined : this.renderInlineValue(value),
+      multilineValue,
+      isLeaf: true,
+    };
+  }
+
+  private static createEmptyCollectionNode(label: string, summary: string, key: string): PrettyJsonTreeNode {
+    return {
+      key,
+      label,
+      inlineValue: this.renderInlineValue(summary === "Array(0)" ? "[]" : "{}"),
+      isLeaf: true,
+    };
+  }
+
+  private static renderInlineValue(value: unknown): ReactNode {
+    if (typeof value === "string") {
+      return (
+        <span style={{ color: "#0f766e", fontSize: 12, lineHeight: 1.5, wordBreak: "break-word" }}>
+          {value === "" ? '""' : value}
+        </span>
+      );
+    }
+    if (typeof value === "number" || typeof value === "boolean" || value === null) {
+      return (
+        <span
+          style={{
+            border: "1px solid #d1d5db",
+            background: "#ffffff",
+            color: "#334155",
+            fontSize: 11,
+            fontWeight: 700,
+            padding: "1px 6px",
+          }}
+        >
+          {String(value)}
+        </span>
+      );
+    }
+    return (
+      <span style={{ color: "#64748b", fontSize: 12, lineHeight: 1.5 }}>
+        {value === undefined ? "undefined" : JSON.stringify(value)}
+      </span>
+    );
+  }
+
+  private static isRecord(value: unknown): value is Readonly<Record<string, unknown>> {
+    return value !== null && typeof value === "object" && !Array.isArray(value);
+  }
+}

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

@@ -0,0 +1,147 @@
+import { ChevronRight } from "lucide-react";
+
+import type { ReactNode } from "react";
+
+import type { PrettyJsonTreeNode } from "../../lib/workflowDetail/workflowDetailTypes";
+
+export class WorkflowInspectorPrettyTreeViewRenderer {
+  private static readonly INDENT_PX = 18;
+
+  static renderNodes(
+    nodes: ReadonlyArray<PrettyJsonTreeNode>,
+    expandedKeys: ReadonlySet<string>,
+    onToggle: (key: string) => void,
+    depth = 0,
+  ): ReactNode {
+    return (
+      <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
+        {nodes.map((node) => (
+          <li key={node.key} style={{ listStyle: "none", margin: 0, padding: 0 }}>
+            {node.isLeaf
+              ? this.renderLeafNode(node, depth)
+              : this.renderBranchNode(node, expandedKeys, onToggle, depth)}
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  private static renderBranchNode(
+    node: PrettyJsonTreeNode,
+    expandedKeys: ReadonlySet<string>,
+    onToggle: (key: string) => void,
+    depth: number,
+  ): ReactNode {
+    const isExpanded = expandedKeys.has(node.key);
+    const children = node.children ?? [];
+    return (
+      <div data-testid={`pretty-json-branch-${node.key}`} style={{ display: "grid", gap: 4 }}>
+        <div
+          data-testid={`pretty-json-row-${node.key}`}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            minWidth: 0,
+            padding: "4px 0",
+            paddingLeft: depth * this.INDENT_PX,
+          }}
+        >
+          <button
+            type="button"
+            data-testid={`pretty-json-toggle-${node.key}`}
+            aria-expanded={isExpanded}
+            onClick={() => onToggle(node.key)}
+            style={{
+              border: "none",
+              background: "transparent",
+              padding: 0,
+              margin: 0,
+              cursor: "pointer",
+              fontSize: 12,
+              fontWeight: 800,
+              color: "#0f172a",
+              textAlign: "left",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 4,
+            }}
+          >
+            <ChevronRight
+              size={13}
+              strokeWidth={2.2}
+              style={{
+                color: "#64748b",
+                transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
+                transition: "transform 120ms ease",
+                flex: "0 0 auto",
+              }}
+            />
+            {node.label}
+          </button>
+        </div>
+        {isExpanded && children.length > 0 ? this.renderNodes(children, expandedKeys, onToggle, depth + 1) : null}
+      </div>
+    );
+  }
+
+  private static renderLeafNode(node: PrettyJsonTreeNode, depth: number): ReactNode {
+    return (
+      <div
+        data-testid={`pretty-json-leaf-${node.key}`}
+        style={{
+          display: "grid",
+          gap: node.multilineValue ? 6 : 0,
+          padding: "4px 0",
+        }}
+      >
+        <div
+          data-testid={`pretty-json-row-${node.key}`}
+          style={{
+            display: "flex",
+            alignItems: "flex-start",
+            gap: 8,
+            minWidth: 0,
+            flexWrap: "wrap",
+            paddingLeft: depth * this.INDENT_PX,
+          }}
+        >
+          <span style={{ fontSize: 12, fontWeight: 800, color: "#0f172a" }}>{node.label}</span>
+          {node.multilineValue ? (
+            <span
+              style={{
+                border: "1px solid #bfdbfe",
+                background: "#eff6ff",
+                color: "#1d4ed8",
+                fontSize: 11,
+                fontWeight: 700,
+                padding: "1px 6px",
+              }}
+            >
+              multiline string
+            </span>
+          ) : (
+            node.inlineValue
+          )}
+        </div>
+        {node.multilineValue ? (
+          <div
+            data-testid={`pretty-json-multiline-${node.key}`}
+            style={{
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+              border: "1px solid #dbeafe",
+              background: "#ffffff",
+              color: "#0f172a",
+              padding: "8px 10px",
+              marginLeft: depth * this.INDENT_PX,
+              lineHeight: 1.6,
+            }}
+          >
+            {node.multilineValue}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,65 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+
+import { WorkflowInspectorPrettyTreePresenter } from "./WorkflowInspectorPrettyTreePresenter";
+import { WorkflowInspectorPrettyTreeViewRenderer } from "./WorkflowInspectorPrettyTreeViewRenderer";
+
+export function WorkflowInspectorPrettyView(args: Readonly<{ value: unknown; emptyLabel: string }>) {
+  const { value, emptyLabel } = args;
+  const treeData = useMemo(() => WorkflowInspectorPrettyTreePresenter.buildTreeData(value), [value]);
+  const allExpandedKeys = useMemo(() => WorkflowInspectorPrettyTreePresenter.collectKeys(treeData), [treeData]);
+  const [expandedKeys, setExpandedKeys] = useState<ReadonlyArray<string>>([]);
+  const expandedKeySet = useMemo(() => new Set(expandedKeys), [expandedKeys]);
+
+  useEffect(() => {
+    setExpandedKeys(allExpandedKeys);
+  }, [allExpandedKeys]);
+
+  if (value === undefined) {
+    return (
+      <div data-testid="workflow-inspector-empty-state" className="text-sm text-muted-foreground opacity-80">
+        {emptyLabel}
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid h-full min-h-0 grid-rows-[auto_1fr] gap-2.5">
+      <div className="flex flex-wrap items-center justify-between gap-2.5">
+        <div className="flex flex-wrap gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="text-xs font-bold"
+            onClick={() => setExpandedKeys([])}
+          >
+            Collapse all
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="text-xs font-bold"
+            onClick={() => setExpandedKeys(allExpandedKeys)}
+          >
+            Expand all
+          </Button>
+        </div>
+        <div data-testid="workflow-inspector-pretty-hint" className="text-xs text-muted-foreground">
+          Readable tree view with preserved line breaks
+        </div>
+      </div>
+      <div className="min-w-0 overflow-x-hidden overflow-y-auto border border-border bg-muted/40 p-3">
+        <div data-testid="workflow-inspector-pretty-tree">
+          {WorkflowInspectorPrettyTreeViewRenderer.renderNodes(treeData, expandedKeySet, (key) => {
+            setExpandedKeys((current) =>
+              current.includes(key) ? current.filter((entry) => entry !== key) : [...current, key],
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,5 @@
+export { WorkflowInspectorAttachmentList } from "./WorkflowInspectorAttachmentList";
+export { WorkflowInspectorBinaryView } from "./WorkflowInspectorBinaryView";
+export { WorkflowInspectorErrorView } from "./WorkflowInspectorErrorView";
+export { WorkflowInspectorJsonView } from "./WorkflowInspectorJsonView";
+export { WorkflowInspectorPrettyView } from "./WorkflowInspectorPrettyView";

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

@@ -0,0 +1,74 @@
+"use client";
+
+import type { BinaryAttachment } from "@codemation/core/browser";
+import { ApiPaths } from "@codemation/host-src/presentation/http/ApiPaths";
+import { useRef, type ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+export function WorkflowJsonEditorBinaryAttachmentRow(
+  args: Readonly<{
+    workflowId: string;
+    itemIndex: number;
+    name: string;
+    attachment: BinaryAttachment;
+    uploadBusyKey: string | null;
+    onReplace: (file: File) => void;
+    onRemove: () => void;
+  }>,
+): ReactNode {
+  const { workflowId, itemIndex, name, attachment, uploadBusyKey, onReplace, onRemove } = args;
+  const replaceInputRef = useRef<HTMLInputElement | null>(null);
+  return (
+    <div
+      className="flex flex-wrap items-center gap-2 rounded border border-border/60 bg-background px-2 py-1.5"
+      data-testid={`workflow-json-editor-binary-row-${itemIndex}-${name}`}
+    >
+      <span className="text-xs font-bold">{name}</span>
+      <a
+        className="text-xs font-medium text-primary underline"
+        href={ApiPaths.workflowOverlayBinaryContent(workflowId, attachment.id)}
+        target="_blank"
+        rel="noreferrer"
+      >
+        Open
+      </a>
+      <Input
+        ref={replaceInputRef}
+        type="file"
+        className="hidden"
+        data-testid={`workflow-json-editor-binary-replace-${itemIndex}-${name}`}
+        onChange={(event) => {
+          const file = event.target.files?.[0];
+          event.target.value = "";
+          if (file) {
+            onReplace(file);
+          }
+        }}
+      />
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        className="h-7 text-[11px] font-bold"
+        disabled={uploadBusyKey !== null}
+        onClick={() => {
+          replaceInputRef.current?.click();
+        }}
+      >
+        Replace
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className="h-7 text-[11px] font-bold text-destructive"
+        data-testid={`workflow-json-editor-binary-remove-${itemIndex}-${name}`}
+        onClick={onRemove}
+      >
+        Remove
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,69 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function WorkflowJsonEditorBinaryUploadRow(
+  args: Readonly<{
+    itemIndex: number;
+    suggestName: string;
+    busyKey: string | null;
+    onUpload: (file: File, attachmentName: string) => void;
+  }>,
+): ReactNode {
+  const { itemIndex, suggestName, busyKey, onUpload } = args;
+  const [name, setName] = useState(suggestName);
+  const uploadInputRef = useRef<HTMLInputElement | null>(null);
+  const nameFieldId = `workflow-json-editor-binary-name-${itemIndex}`;
+  useEffect(() => {
+    setName(suggestName);
+  }, [suggestName]);
+  const disabled = busyKey !== null || !name.trim();
+  return (
+    <div className="flex flex-wrap items-end gap-2 border-t border-border/60 pt-2">
+      <div className="flex min-w-[120px] flex-1 flex-col gap-1.5">
+        <Label htmlFor={nameFieldId} className="text-[11px] font-bold text-muted-foreground">
+          Attachment name
+        </Label>
+        <Input
+          id={nameFieldId}
+          className="h-8 text-xs"
+          value={name}
+          onChange={(e) => {
+            setName(e.target.value);
+          }}
+          data-testid={`workflow-json-editor-binary-name-${itemIndex}`}
+        />
+      </div>
+      <Input
+        ref={uploadInputRef}
+        type="file"
+        className="hidden"
+        data-testid={`workflow-json-editor-binary-upload-${itemIndex}`}
+        disabled={disabled}
+        onChange={(event) => {
+          const file = event.target.files?.[0];
+          event.target.value = "";
+          if (file && name.trim()) {
+            onUpload(file, name.trim());
+          }
+        }}
+      />
+      <Button
+        type="button"
+        variant="secondary"
+        size="sm"
+        className="h-8 text-[11px] font-bold"
+        disabled={disabled}
+        onClick={() => {
+          uploadInputRef.current?.click();
+        }}
+      >
+        Upload
+      </Button>
+    </div>
+  );
+}