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/convert-audio-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";
@@ -94,3 +94,70 @@ export function ConvertAudioSettings() {
     </div>
   );
 }
+
+export interface ConvertAudioControlsProps {
+  settings?: Record<string, unknown>;
+  onChange?: (settings: Record<string, unknown>) => void;
+}
+
+export function ConvertAudioControls({ settings: initial, onChange }: ConvertAudioControlsProps) {
+  const { t } = useTranslation();
+  const s = t.toolSettings["convert-audio"];
+  const [outFormat, setOutFormat] = useState<AudioFormat>("mp3");
+  const [bitrateKbps, setBitrateKbps] = useState(192);
+
+  const initializedRef = useRef(false);
+  useEffect(() => {
+    if (!initial || initializedRef.current) return;
+    initializedRef.current = true;
+    if (initial.format != null) setOutFormat(initial.format as AudioFormat);
+    if (initial.bitrateKbps != null) setBitrateKbps(Number(initial.bitrateKbps));
+  }, [initial]);
+
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  });
+  useEffect(() => {
+    onChangeRef.current?.({ format: outFormat, bitrateKbps });
+  }, [outFormat, bitrateKbps]);
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="ca-format" className="text-xs text-muted-foreground">
+          {s.format}
+        </label>
+        <select
+          id="ca-format"
+          value={outFormat}
+          onChange={(e) => setOutFormat(e.target.value as AudioFormat)}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        >
+          <option value="mp3">MP3</option>
+          <option value="wav">WAV</option>
+          <option value="ogg">OGG</option>
+          <option value="flac">FLAC</option>
+          <option value="m4a">M4A</option>
+        </select>
+      </div>
+      <div>
+        <label htmlFor="ca-bitrate" className="text-xs text-muted-foreground">
+          {s.bitrate}
+        </label>
+        <select
+          id="ca-bitrate"
+          value={bitrateKbps}
+          onChange={(e) => setBitrateKbps(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"
+        >
+          {BITRATE_OPTIONS.map((br) => (
+            <option key={br} value={br}>
+              {br} kbps
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}