fix(validation): extract schema to shared file for client/server compatibility

Move ValidationResultSchema to lib/validation-schema.ts to avoid importing
server-side modules (ai-providers) into client-side code. This fixes the
Turbopack build error caused by the hook importing from the API route.

app/api/validate-diagram/route.ts

@@ -4,43 +4,15 @@
  */
 
 import { streamObject } from "ai"
-import { z } from "zod"
 import { getValidationModel } from "@/lib/ai-providers"
 import { VALIDATION_SYSTEM_PROMPT } from "@/lib/validation-prompts"
+import {
+    type ValidationResult,
+    ValidationResultSchema,
+} from "@/lib/validation-schema"
 
 export const maxDuration = 30
 
-// Schema for structured validation output - exported for client-side useObject
-export const ValidationResultSchema = z.object({
-    valid: z.boolean().describe("True if there are no critical issues"),
-    issues: z
-        .array(
-            z.object({
-                type: z
-                    .enum([
-                        "overlap",
-                        "edge_routing",
-                        "text",
-                        "layout",
-                        "rendering",
-                    ])
-                    .describe("Type of visual issue"),
-                severity: z
-                    .enum(["critical", "warning"])
-                    .describe("Severity level"),
-                description: z
-                    .string()
-                    .describe("Clear description of the issue"),
-            }),
-        )
-        .describe("List of visual issues found"),
-    suggestions: z
-        .array(z.string())
-        .describe("Actionable suggestions to fix issues"),
-})
-
-export type ValidationResult = z.infer<typeof ValidationResultSchema>
-
 interface ValidateDiagramRequest {
     imageData: string // Base64 PNG data URL
     sessionId?: string

hooks/use-validate-diagram.ts

@@ -6,18 +6,13 @@
 
 import { experimental_useObject as useObject } from "@ai-sdk/react"
 import { useCallback, useRef } from "react"
-import { ValidationResultSchema } from "@/app/api/validate-diagram/route"
 import { getApiEndpoint } from "@/lib/base-path"
+import {
+    type ValidationResult,
+    ValidationResultSchema,
+} from "@/lib/validation-schema"
 
-export type ValidationResult = {
-    valid: boolean
-    issues: Array<{
-        type: "overlap" | "edge_routing" | "text" | "layout" | "rendering"
-        severity: "critical" | "warning"
-        description: string
-    }>
-    suggestions: string[]
-}
+export type { ValidationResult }
 
 // Default valid result for fallback cases
 const DEFAULT_VALID_RESULT: ValidationResult = {

lib/validation-schema.ts

@@ -0,0 +1,37 @@
+/**
+ * Shared validation schema for VLM-based diagram validation.
+ * This file can be safely imported on both client and server.
+ */
+
+import { z } from "zod"
+
+// Schema for structured validation output
+export const ValidationResultSchema = z.object({
+    valid: z.boolean().describe("True if there are no critical issues"),
+    issues: z
+        .array(
+            z.object({
+                type: z
+                    .enum([
+                        "overlap",
+                        "edge_routing",
+                        "text",
+                        "layout",
+                        "rendering",
+                    ])
+                    .describe("Type of visual issue"),
+                severity: z
+                    .enum(["critical", "warning"])
+                    .describe("Severity level"),
+                description: z
+                    .string()
+                    .describe("Clear description of the issue"),
+            }),
+        )
+        .describe("List of visual issues found"),
+    suggestions: z
+        .array(z.string())
+        .describe("Actionable suggestions to fix issues"),
+})
+
+export type ValidationResult = z.infer<typeof ValidationResultSchema>