Phase 19: compose validate (docker compose config) + diff vs deployed in editor (0.25.0)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/api/editor.ts

@@ -1,6 +1,10 @@
 import api from "./client";
 
 export const editorApi = {
+  validate: (yaml: string, env: string) =>
+    api
+      .post<{ ok: boolean; errors: string }>("/api/editor/validate", { yaml, env })
+      .then((r) => r.data),
   services: (yaml: string) =>
     api
       .post<{ services: string[] }>("/api/editor/services", { yaml })

frontend/src/pages/StackEditor.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import Editor from "@monaco-editor/react";
-import { Rocket, Save, Wand2, FileCode } from "lucide-react";
+import Editor, { DiffEditor } from "@monaco-editor/react";
+import { Rocket, Save, Wand2, FileCode, CheckCircle2, GitCompare, X } from "lucide-react";
 import { Button, Card, Input } from "@/components/ui";
 import { EditorHelperPanel } from "@/components/stacks/EditorHelperPanel";
 import { EnvEditor } from "@/components/env/EnvEditor";
@@ -10,6 +10,7 @@ import { PortConflictDialog } from "@/components/stacks/PortConflictDialog";
 import { DeployConsole } from "@/components/stacks/DeployConsole";
 import { stacksApi } from "@/api/stacks";
 import { agentsApi } from "@/api/agents";
+import { editorApi } from "@/api/editor";
 import { portsApi, type PortConflict } from "@/api/ports";
 import { apiErrorMessage } from "@/api/client";
 import { useThemeStore } from "@/store/theme";
@@ -43,6 +44,9 @@ export function StackEditor() {
   const [host, setHost] = useState("local");
   const [deployId, setDeployId] = useState<string | null>(null);
   const [deployAgentId, setDeployAgentId] = useState<number | undefined>(undefined);
+  const [validating, setValidating] = useState(false);
+  const [validation, setValidation] = useState<{ ok: boolean; errors: string } | null>(null);
+  const [showDiff, setShowDiff] = useState(false);
 
   const existing = useQuery({
     queryKey: ["stack", id],
@@ -135,6 +139,23 @@ export function StackEditor() {
     save(true);
   };
 
+  const originalYaml = existing.data?.yaml ?? "";
+  const dirty = !isNew && originalYaml !== yaml;
+
+  const validate = async () => {
+    setValidating(true);
+    setValidation(null);
+    try {
+      const result = await editorApi.validate(yaml, env);
+      setValidation(result);
+      if (result.ok) toast.success("Compose config is valid");
+    } catch (err) {
+      toast.error(apiErrorMessage(err));
+    } finally {
+      setValidating(false);
+    }
+  };
+
   const convert = async () => {
     try {
       const { yaml: converted } = await stacksApi.convert(runCmd);
@@ -206,7 +227,21 @@ export function StackEditor() {
       <div className="flex min-h-0 flex-1 gap-3">
         {/* Editor */}
         <div className="min-h-0 flex-1 overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700">
-          {tab === "compose" ? (
+          {tab === "compose" && showDiff ? (
+            <DiffEditor
+              height="100%"
+              language="yaml"
+              theme={theme === "dark" ? "vs-dark" : "light"}
+              original={originalYaml}
+              modified={yaml}
+              options={{
+                minimap: { enabled: false },
+                fontSize: 13,
+                readOnly: true,
+                renderSideBySide: true,
+              }}
+            />
+          ) : tab === "compose" ? (
             <Editor
               height="100%"
               language="yaml"
@@ -223,14 +258,34 @@ export function StackEditor() {
         </div>
 
         {/* Helper panel (Volumes / GPU / Devices) */}
-        {tab === "compose" && (
+        {tab === "compose" && !showDiff && (
           <div className="w-[38%] min-w-[320px] overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700">
             <EditorHelperPanel yaml={yaml} onYaml={setYaml} />
           </div>
         )}
       </div>
 
-      <div className="flex justify-end gap-2">
+      {validation && !validation.ok && (
+        <Card className="border-red-300 bg-red-50 dark:border-red-900/60 dark:bg-red-950/30">
+          <div className="mb-1 text-sm font-medium text-red-600 dark:text-red-400">
+            Compose config errors
+          </div>
+          <pre className="max-h-40 overflow-auto whitespace-pre-wrap text-xs text-red-700 dark:text-red-300">
+            {validation.errors}
+          </pre>
+        </Card>
+      )}
+
+      <div className="flex flex-wrap justify-end gap-2">
+        <Button variant="outline" onClick={validate} loading={validating}>
+          <CheckCircle2 className="h-4 w-4" /> Validate
+        </Button>
+        {dirty && (
+          <Button variant="outline" onClick={() => setShowDiff((v) => !v)}>
+            {showDiff ? <X className="h-4 w-4" /> : <GitCompare className="h-4 w-4" />}
+            {showDiff ? "Hide diff" : "Diff vs deployed"}
+          </Button>
+        )}
         <Button variant="outline" onClick={() => save(false)} loading={saving}>
           <Save className="h-4 w-4" /> Save Draft
         </Button>