feat(automate): make the pipeline builder fully multi-modal (#335)

* feat(shared): add outputModality to Tool metadata for crossing tools

* feat(shared): add modalityForExtension, toolInputModality, toolOutputModality

* fix(pipeline): route finalize and parent jobs to the pipeline's modality pool

* feat(automate): add ConvertAudioControls pipeline step (exemplar)

* feat(automate): add video tool settings controls to pipelines

* feat(automate): add audio tool settings controls to pipelines

* feat(automate): add document tool settings controls to pipelines

* feat(automate): add chart-maker settings control to pipelines

* feat(automate): warn on modality-incompatible pipeline steps

* feat(automate): add single-file download button for pipeline results

* refactor(automate): modality-aware icons, nav handler rename, mobile size bar

* test(pipeline): cover audio, document, file, and cross-modality chains

* i18n(automate): translate the modality-warning tooltip

* test(pipeline): gate media-pool routing assertion on ffmpeg availability

apps/web/src/components/tools/video-to-gif-settings.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ProgressCard } from "@/components/common/progress-card";
 import { useTranslation } from "@/contexts/i18n-context";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
@@ -119,3 +119,99 @@ export function VideoToGifSettings() {
     </div>
   );
 }
+
+export interface VideoToGifControlsProps {
+  settings?: Record<string, unknown>;
+  onChange?: (settings: Record<string, unknown>) => void;
+}
+
+export function VideoToGifControls({ settings: initial, onChange }: VideoToGifControlsProps) {
+  const { t } = useTranslation();
+  const s = t.toolSettings["video-to-gif"];
+  const [fps, setFps] = useState(12);
+  const [width, setWidth] = useState(480);
+  const [startS, setStartS] = useState(0);
+  const [durationS, setDurationS] = useState(5);
+
+  const initializedRef = useRef(false);
+  useEffect(() => {
+    if (!initial || initializedRef.current) return;
+    initializedRef.current = true;
+    if (initial.fps != null) setFps(Number(initial.fps));
+    if (initial.width != null) setWidth(Number(initial.width));
+    if (initial.startS != null) setStartS(Number(initial.startS));
+    if (initial.durationS != null) setDurationS(Number(initial.durationS));
+  }, [initial]);
+
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  });
+  useEffect(() => {
+    onChangeRef.current?.({ fps, width, startS, durationS });
+  }, [fps, width, startS, durationS]);
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="vtgp-fps" className="text-xs text-muted-foreground">
+          {s.fps}
+        </label>
+        <input
+          id="vtgp-fps"
+          type="number"
+          min={1}
+          max={30}
+          step={1}
+          value={fps}
+          onChange={(e) => setFps(Number(e.target.value))}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        />
+      </div>
+      <div>
+        <label htmlFor="vtgp-width" className="text-xs text-muted-foreground">
+          {s.width}
+        </label>
+        <input
+          id="vtgp-width"
+          type="number"
+          min={64}
+          max={1280}
+          step={1}
+          value={width}
+          onChange={(e) => setWidth(Number(e.target.value))}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        />
+      </div>
+      <div>
+        <label htmlFor="vtgp-start" className="text-xs text-muted-foreground">
+          {s.start}
+        </label>
+        <input
+          id="vtgp-start"
+          type="number"
+          min={0}
+          step={0.1}
+          value={startS}
+          onChange={(e) => setStartS(Number(e.target.value))}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        />
+      </div>
+      <div>
+        <label htmlFor="vtgp-duration" className="text-xs text-muted-foreground">
+          {s.duration}
+        </label>
+        <input
+          id="vtgp-duration"
+          type="number"
+          min={0.1}
+          max={60}
+          step={0.1}
+          value={durationS}
+          onChange={(e) => setDurationS(Number(e.target.value))}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        />
+      </div>
+    </div>
+  );
+}