= {};
+ for (const input of tool.inputs) {
+ restored[input.key] = (body[input.key] as string) || "";
+ }
+ setFields(restored);
+ setResult(restoredResult);
+ },
+ [tool, setResult]
+ );
+
+ const { canExecute, getToolUsage, trackExecution, redirectToUpgrade } = useAuth();
+
+ // ── HYDRATION FIX ──────────────────────────────────────────────────────────
+ // getToolUsage reads from localStorage/cookies which don't exist on the server.
+ // We defer the real value until after mount so SSR and client agree on the
+ // initial render (both see the zero/default state), then the effect below
+ // runs on the client and updates to the real value.
+ const [mounted, setMounted] = useState(false);
+ useEffect(() => setMounted(true), []);
+
+ // Always call the hook (Rules of Hooks) — but only use its value post-mount.
+ const rawToolUsage = getToolUsage(tool.id);
+ const toolUsage = mounted
+ ? rawToolUsage
+ : {
+ // Issue 8: use optional chaining + safe defaults to prevent SSR TypeError
+ // when getToolUsage returns undefined or an incomplete object before hydration.
+ used: 0,
+ limit: rawToolUsage?.limit ?? 0,
+ remaining: rawToolUsage?.limit ?? 0,
+ limitReached: false,
+ plan: rawToolUsage?.plan ?? "free",
+ };
+ // ── END HYDRATION FIX ──────────────────────────────────────────────────────
+
+ const [showUpgradeDialog, setShowUpgradeDialog] = useState(false);
+
+ // Show popup when limit is newly reached
+ useEffect(() => {
+ if (mounted && toolUsage.limitReached) {
+ setShowUpgradeDialog(true);
+ }
+ }, [mounted, toolUsage.limitReached]);
+
+ const handleExecute = () => {
+ // Check per-tool usage limit
+ if (!canExecute(tool.id)) {
+ setShowUpgradeDialog(true);
+ return;
+ }
+ // Check required fields
+ for (const field of tool.requiredFields) {
+ if (!fields[field]?.trim()) return;
+ }
+
+ // Always Flux ai_image + enterpriseArchitecture — no user selection needed
+ const resolvedMode = "ai_image";
+
+ console.info("[mode-resolved]", { requestedModel: model, resolvedMode });
+
+ execute({
+ ...fields,
+ model,
+ diagramType: "enterpriseArchitecture",
+ generationMode: resolvedMode,
+ generation_mode: resolvedMode,
+ });
+ trackExecution(tool.id);
+ };
+
+ // Check if all required fields are filled
+ const isReady = tool.requiredFields.every((field) => fields[field]?.trim());
+
+ const uploadedImageSrc = useMemo(() => {
+ const imageKey = tool.inputs.find((i) => i.type === "image")?.key;
+ return imageKey ? fields[imageKey] : undefined;
+ }, [tool.inputs, fields]);
+
+ return (
+ <>
+
+
+ {/* Render input fields from tool definition */}
+ {tool.inputs.map((input) => (
+
setField(input.key, value)}
+ />
+ ))}
+
+ {/* Execute button + Usage counter */}
+
+ {mounted && toolUsage.limitReached ? (
+
+
+
+ Upgrade your plan for more daily executions.{" "}
+
+
+
+ ) : (
+
+ )}
+
+ {/* Usage indicator pill - per tool */}
+ {/* Deferred until after mount to prevent hydration mismatch from localStorage */}
+
+
+
+ {mounted ? toolUsage.used : 0}/{toolUsage.limit} uses today
+
+
+ {mounted ? toolUsage.plan : "free"}
+
+
+
+ ⚡ {toolUsage.remaining} use{toolUsage.remaining === 1 ? "" : "s"} remaining for
+ this tool today.{" "}
+
+
+ )}
+
+ {/* Results */}
+
+
+ {/* Issue 19: derive the image src from whichever input has type==='image',
+ instead of hardcoding fields['image']. */}
+
+
+
+
+ {/* Close button */}
+
+
+ {/* Icon */}
+
+
+
+
+ {/* Title */}
+
Daily Limit Reached
+
+ You've used all {toolUsage.limit} executions for{" "}
+ {tool.name} today on the{" "}
+
+ {getPlanDisplayName(toolUsage.plan)}
+ {" "}
+ plan.
+
+
+ {/* Tier comparison */}
+
+
+ Free
+
+ 5 / tool / day {toolUsage.plan === "free" && "(current)"}
+
+
+
+ Pro
+
+ 20 / tool / day {toolUsage.plan === "pro" && "(current)"}
+
+
+
+ Premium
+
+ 100 / tool / day {toolUsage.plan === "premium" && "(current)"}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+
+ );
+ case "textarea":
+ return (
+
+
+