feat(tools): 2.0 phase 5 wave 3b - audio depth (14 tools) (#222)

apps/web/src/components/tools/audio-channels-settings.tsx

@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+type ChannelMode = "stereo-to-mono" | "mono-to-stereo" | "swap";
+
+export function AudioChannelsSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["audio-channels"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("audio-channels");
+
+  const [mode, setMode] = useState<ChannelMode>("mono-to-stereo");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { mode };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="ac-mode" className="text-xs text-muted-foreground">
+          {s.mode}
+        </label>
+        <select
+          id="ac-mode"
+          value={mode}
+          onChange={(e) => setMode(e.target.value as ChannelMode)}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        >
+          <option value="stereo-to-mono">{s["stereo-to-mono"]}</option>
+          <option value="mono-to-stereo">{s["mono-to-stereo"]}</option>
+          <option value="swap">{s.swap}</option>
+        </select>
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="audio-channels-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/audio-metadata-settings.tsx

@@ -0,0 +1,113 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function AudioMetadataSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["audio-metadata"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("audio-metadata");
+
+  const [strip, setStrip] = useState(false);
+  const [title, setTitle] = useState("");
+  const [artist, setArtist] = useState("");
+  const [album, setAlbum] = useState("");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings: Record<string, unknown> = { strip };
+    if (title) settings.title = title;
+    if (artist) settings.artist = artist;
+    if (album) settings.album = album;
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <label className="flex items-center gap-2 text-sm text-foreground">
+        <input
+          type="checkbox"
+          checked={strip}
+          onChange={(e) => setStrip(e.target.checked)}
+          className="rounded"
+        />
+        {s.strip}
+      </label>
+
+      <div>
+        <label htmlFor="am-title" className="text-xs text-muted-foreground">
+          {s.title}
+        </label>
+        <input
+          id="am-title"
+          type="text"
+          maxLength={500}
+          value={title}
+          onChange={(e) => setTitle(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="am-artist" className="text-xs text-muted-foreground">
+          {s.artist}
+        </label>
+        <input
+          id="am-artist"
+          type="text"
+          maxLength={500}
+          value={artist}
+          onChange={(e) => setArtist(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="am-album" className="text-xs text-muted-foreground">
+          {s.album}
+        </label>
+        <input
+          id="am-album"
+          type="text"
+          maxLength={500}
+          value={album}
+          onChange={(e) => setAlbum(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>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="audio-metadata-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/audio-speed-settings.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function AudioSpeedSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["audio-speed"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("audio-speed");
+
+  const [factor, setFactor] = useState(1.5);
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { factor };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="as-factor" className="text-xs text-muted-foreground">
+          {s.factor}
+        </label>
+        <input
+          id="as-factor"
+          type="number"
+          min={0.25}
+          max={4}
+          step={0.25}
+          value={factor}
+          onChange={(e) => setFactor(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>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="audio-speed-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/fade-audio-settings.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function FadeAudioSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["fade-audio"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("fade-audio");
+
+  const [fadeInS, setFadeInS] = useState(1);
+  const [fadeOutS, setFadeOutS] = useState(1);
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { fadeInS, fadeOutS };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="fa-fadein" className="text-xs text-muted-foreground">
+          {s["fade-in-s"]}
+        </label>
+        <input
+          id="fa-fadein"
+          type="number"
+          min={0}
+          max={30}
+          step={0.5}
+          value={fadeInS}
+          onChange={(e) => setFadeInS(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="fa-fadeout" className="text-xs text-muted-foreground">
+          {s["fade-out-s"]}
+        </label>
+        <input
+          id="fa-fadeout"
+          type="number"
+          min={0}
+          max={30}
+          step={0.5}
+          value={fadeOutS}
+          onChange={(e) => setFadeOutS(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>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="fade-audio-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/merge-audio-settings.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+type AudioFormat = "mp3" | "wav" | "flac" | "m4a";
+
+export function MergeAudioSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["merge-audio"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("merge-audio");
+
+  const [outFormat, setOutFormat] = useState<AudioFormat>("mp3");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { format: outFormat };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="ma-format" className="text-xs text-muted-foreground">
+          {s.format}
+        </label>
+        <select
+          id="ma-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">{s.mp3}</option>
+          <option value="wav">{s.wav}</option>
+          <option value="flac">{s.flac}</option>
+          <option value="m4a">{s.m4a}</option>
+        </select>
+      </div>
+
+      <p className="text-[10px] text-muted-foreground">{s["order-hint"]}</p>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="merge-audio-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/noise-reduction-settings.tsx

@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+type Strength = "light" | "medium" | "strong";
+
+export function NoiseReductionSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["noise-reduction"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("noise-reduction");
+
+  const [strength, setStrength] = useState<Strength>("medium");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { strength };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="nr-strength" className="text-xs text-muted-foreground">
+          {s.strength}
+        </label>
+        <select
+          id="nr-strength"
+          value={strength}
+          onChange={(e) => setStrength(e.target.value as Strength)}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        >
+          <option value="light">{s.light}</option>
+          <option value="medium">{s.medium}</option>
+          <option value="strong">{s.strong}</option>
+        </select>
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="noise-reduction-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/normalize-audio-settings.tsx

@@ -0,0 +1,54 @@
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function NormalizeAudioSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["normalize-audio"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("normalize-audio");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = {};
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <p className="text-[10px] text-muted-foreground">{s.hint}</p>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="normalize-audio-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/pitch-shift-settings.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function PitchShiftSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["pitch-shift"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("pitch-shift");
+
+  const [semitones, setSemitones] = useState(3);
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { semitones };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="ps-semi" className="text-xs text-muted-foreground">
+          {s.semitones}
+        </label>
+        <input
+          id="ps-semi"
+          type="number"
+          min={-12}
+          max={12}
+          step={1}
+          value={semitones}
+          onChange={(e) => setSemitones(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"
+        />
+        <p className="text-[10px] text-muted-foreground mt-0.5">{s.hint}</p>
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="pitch-shift-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/reverse-audio-settings.tsx

@@ -0,0 +1,52 @@
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function ReverseAudioSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["reverse-audio"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("reverse-audio");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = {};
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="reverse-audio-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/ringtone-maker-settings.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function RingtoneMakerSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["ringtone-maker"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("ringtone-maker");
+
+  const [startS, setStartS] = useState(0);
+  const [durationS, setDurationS] = useState(30);
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { startS, durationS };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="rm-start" className="text-xs text-muted-foreground">
+          {s["start-s"]}
+        </label>
+        <input
+          id="rm-start"
+          type="number"
+          min={0}
+          step={0.5}
+          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="rm-duration" className="text-xs text-muted-foreground">
+          {s["duration-s"]}
+        </label>
+        <input
+          id="rm-duration"
+          type="number"
+          min={1}
+          max={30}
+          step={0.5}
+          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"
+        />
+        <p className="text-[10px] text-muted-foreground mt-0.5">{s["max-hint"]}</p>
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="ringtone-maker-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/silence-removal-settings.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function SilenceRemovalSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["silence-removal"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("silence-removal");
+
+  const [thresholdDb, setThresholdDb] = useState(-50);
+  const [minSilenceS, setMinSilenceS] = useState(0.5);
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { thresholdDb, minSilenceS };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="sr-threshold" className="text-xs text-muted-foreground">
+          {s["threshold-db"]}
+        </label>
+        <input
+          id="sr-threshold"
+          type="number"
+          min={-80}
+          max={-20}
+          step={1}
+          value={thresholdDb}
+          onChange={(e) => setThresholdDb(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="sr-minsilence" className="text-xs text-muted-foreground">
+          {s["min-silence-s"]}
+        </label>
+        <input
+          id="sr-minsilence"
+          type="number"
+          min={0.1}
+          max={5}
+          step={0.1}
+          value={minSilenceS}
+          onChange={(e) => setMinSilenceS(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>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="silence-removal-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/split-audio-settings.tsx

@@ -0,0 +1,155 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+type SplitMode = "time" | "parts" | "silence";
+
+export function SplitAudioSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["split-audio"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("split-audio");
+
+  const [mode, setMode] = useState<SplitMode>("time");
+  const [segmentS, setSegmentS] = useState(60);
+  const [parts, setParts] = useState(2);
+  const [thresholdDb, setThresholdDb] = useState(-40);
+  const [minSilenceS, setMinSilenceS] = useState(0.3);
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings: Record<string, unknown> = { mode };
+    if (mode === "time") settings.segmentS = segmentS;
+    if (mode === "parts") settings.parts = parts;
+    if (mode === "silence") {
+      settings.thresholdDb = thresholdDb;
+      settings.minSilenceS = minSilenceS;
+    }
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="sa-mode" className="text-xs text-muted-foreground">
+          {s.mode}
+        </label>
+        <select
+          id="sa-mode"
+          value={mode}
+          onChange={(e) => setMode(e.target.value as SplitMode)}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        >
+          <option value="time">{s.time}</option>
+          <option value="parts">{s.parts}</option>
+          <option value="silence">{s.silence}</option>
+        </select>
+      </div>
+
+      {mode === "time" && (
+        <div>
+          <label htmlFor="sa-segment" className="text-xs text-muted-foreground">
+            {s["segment-s"]}
+          </label>
+          <input
+            id="sa-segment"
+            type="number"
+            min={1}
+            max={3600}
+            step={1}
+            value={segmentS}
+            onChange={(e) => setSegmentS(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>
+      )}
+
+      {mode === "parts" && (
+        <div>
+          <label htmlFor="sa-parts" className="text-xs text-muted-foreground">
+            {s["num-parts"]}
+          </label>
+          <input
+            id="sa-parts"
+            type="number"
+            min={2}
+            max={20}
+            step={1}
+            value={parts}
+            onChange={(e) => setParts(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>
+      )}
+
+      {mode === "silence" && (
+        <>
+          <div>
+            <label htmlFor="sa-threshold" className="text-xs text-muted-foreground">
+              {s["threshold-db"]}
+            </label>
+            <input
+              id="sa-threshold"
+              type="number"
+              min={-80}
+              max={-20}
+              step={1}
+              value={thresholdDb}
+              onChange={(e) => setThresholdDb(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="sa-minsilence" className="text-xs text-muted-foreground">
+              {s["min-silence-s"]}
+            </label>
+            <input
+              id="sa-minsilence"
+              type="number"
+              min={0.1}
+              max={10}
+              step={0.1}
+              value={minSilenceS}
+              onChange={(e) => setMinSilenceS(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>
+        </>
+      )}
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="split-audio-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/volume-adjust-settings.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function VolumeAdjustSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["volume-adjust"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("volume-adjust");
+
+  const [gainDb, setGainDb] = useState(3);
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { gainDb };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="va-gain" className="text-xs text-muted-foreground">
+          {s["gain-db"]}
+        </label>
+        <input
+          id="va-gain"
+          type="number"
+          min={-30}
+          max={30}
+          step={0.5}
+          value={gainDb}
+          onChange={(e) => setGainDb(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>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="volume-adjust-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/waveform-image-settings.tsx

@@ -0,0 +1,103 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function WaveformImageSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["waveform-image"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("waveform-image");
+
+  const [width, setWidth] = useState(1024);
+  const [height, setHeight] = useState(256);
+  const [color, setColor] = useState("#4f46e5");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { width, height, color };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="wi-width" className="text-xs text-muted-foreground">
+          {s.width}
+        </label>
+        <input
+          id="wi-width"
+          type="number"
+          min={256}
+          max={3840}
+          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="wi-height" className="text-xs text-muted-foreground">
+          {s.height}
+        </label>
+        <input
+          id="wi-height"
+          type="number"
+          min={64}
+          max={1080}
+          step={1}
+          value={height}
+          onChange={(e) => setHeight(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="wi-color" className="text-xs text-muted-foreground">
+          {s.color}
+        </label>
+        <input
+          id="wi-color"
+          type="text"
+          maxLength={7}
+          value={color}
+          onChange={(e) => setColor(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>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="waveform-image-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/lib/icon-map.ts

@@ -1,9 +1,12 @@
 import type { LucideIcon } from "lucide-react";
 import {
+  Activity,
   Anchor,
   AppWindow,
   Archive,
   AudioLines,
+  AudioWaveform,
+  BellRing,
   BookImage,
   BookOpen,
   Braces,
@@ -57,6 +60,7 @@ import {
   MessageSquareText,
   MicVocal,
   Minimize2,
+  Music,
   Palette,
   PenLine,
   PenTool,
@@ -88,6 +92,7 @@ import {
   Volume2,
   VolumeX,
   Wand,
+  Waves,
   Wrench,
   Zap,
   ZoomIn,
@@ -96,10 +101,13 @@ import {
 // Only the icons actually used by tool definitions in @snapotter/shared constants.
 // Avoids `import * as icons from "lucide-react"` which pulls the entire 1000+ icon library.
 export const ICON_MAP: Record<string, LucideIcon> = {
+  Activity,
   Anchor,
   AppWindow,
   Archive,
   AudioLines,
+  AudioWaveform,
+  BellRing,
   BookImage,
   BookOpen,
   Braces,
@@ -152,6 +160,7 @@ export const ICON_MAP: Record<string, LucideIcon> = {
   MessageSquareText,
   MicVocal,
   Minimize2,
+  Music,
   Palette,
   PenLine,
   PenTool,
@@ -182,6 +191,7 @@ export const ICON_MAP: Record<string, LucideIcon> = {
   Volume2,
   VolumeX,
   Wand,
+  Waves,
   Wrench,
   Zap,
   ZoomIn,

apps/web/src/lib/tool-display-modes.ts

@@ -121,9 +121,23 @@ export const TOOL_DISPLAY_MODES: Record<string, DisplayMode> = {
   "video-metadata": "no-comparison",
 
   // Audio tools
+  "audio-channels": "media-player",
+  "audio-metadata": "no-comparison",
+  "audio-speed": "media-player",
   "convert-audio": "media-player",
-  "trim-audio": "media-player",
   "extract-audio": "media-player",
+  "fade-audio": "media-player",
+  "merge-audio": "media-player",
+  "noise-reduction": "media-player",
+  "normalize-audio": "media-player",
+  "pitch-shift": "media-player",
+  "reverse-audio": "media-player",
+  "ringtone-maker": "media-player",
+  "silence-removal": "media-player",
+  "split-audio": "no-comparison",
+  "trim-audio": "media-player",
+  "volume-adjust": "media-player",
+  "waveform-image": "no-comparison",
 
   // PDF & Document tools
   "merge-pdf": "document",
@@ -165,6 +179,7 @@ export const TOOL_DISPLAY_MODES: Record<string, DisplayMode> = {
  * Consumed by use-tool-processor; backend routes declare maxInputs.
  */
 export const MULTI_FILE_TOOLS: ReadonlySet<string> = new Set([
+  "merge-audio",
   "merge-pdf",
   "merge-videos",
   "replace-audio",

apps/web/src/lib/tool-registry.tsx

@@ -494,6 +494,76 @@ const ExtractAudioSettings = lazy(() =>
     default: m.ExtractAudioSettings,
   })),
 );
+const AudioChannelsSettings = lazy(() =>
+  import("@/components/tools/audio-channels-settings").then((m) => ({
+    default: m.AudioChannelsSettings,
+  })),
+);
+const AudioMetadataSettings = lazy(() =>
+  import("@/components/tools/audio-metadata-settings").then((m) => ({
+    default: m.AudioMetadataSettings,
+  })),
+);
+const AudioSpeedSettings = lazy(() =>
+  import("@/components/tools/audio-speed-settings").then((m) => ({
+    default: m.AudioSpeedSettings,
+  })),
+);
+const FadeAudioSettings = lazy(() =>
+  import("@/components/tools/fade-audio-settings").then((m) => ({
+    default: m.FadeAudioSettings,
+  })),
+);
+const MergeAudioSettings = lazy(() =>
+  import("@/components/tools/merge-audio-settings").then((m) => ({
+    default: m.MergeAudioSettings,
+  })),
+);
+const NoiseReductionSettings = lazy(() =>
+  import("@/components/tools/noise-reduction-settings").then((m) => ({
+    default: m.NoiseReductionSettings,
+  })),
+);
+const NormalizeAudioSettings = lazy(() =>
+  import("@/components/tools/normalize-audio-settings").then((m) => ({
+    default: m.NormalizeAudioSettings,
+  })),
+);
+const PitchShiftSettings = lazy(() =>
+  import("@/components/tools/pitch-shift-settings").then((m) => ({
+    default: m.PitchShiftSettings,
+  })),
+);
+const ReverseAudioSettings = lazy(() =>
+  import("@/components/tools/reverse-audio-settings").then((m) => ({
+    default: m.ReverseAudioSettings,
+  })),
+);
+const RingtoneMakerSettings = lazy(() =>
+  import("@/components/tools/ringtone-maker-settings").then((m) => ({
+    default: m.RingtoneMakerSettings,
+  })),
+);
+const SilenceRemovalSettings = lazy(() =>
+  import("@/components/tools/silence-removal-settings").then((m) => ({
+    default: m.SilenceRemovalSettings,
+  })),
+);
+const SplitAudioSettings = lazy(() =>
+  import("@/components/tools/split-audio-settings").then((m) => ({
+    default: m.SplitAudioSettings,
+  })),
+);
+const VolumeAdjustSettings = lazy(() =>
+  import("@/components/tools/volume-adjust-settings").then((m) => ({
+    default: m.VolumeAdjustSettings,
+  })),
+);
+const WaveformImageSettings = lazy(() =>
+  import("@/components/tools/waveform-image-settings").then((m) => ({
+    default: m.WaveformImageSettings,
+  })),
+);
 const MergePdfSettings = lazy(() =>
   import("@/components/tools/merge-pdf-settings").then((m) => ({
     default: m.MergePdfSettings,
@@ -809,6 +879,22 @@ const ENTRY_CONFIG: ReadonlyArray<[string, RegistryEntryConfig]> = [
   ["trim-audio", { accept: AUDIO_INPUTS.join(","), Settings: TrimAudioSettings }],
   ["extract-audio", { accept: VIDEO_INPUTS.join(","), Settings: ExtractAudioSettings }],
 
+  // Audio depth tools
+  ["audio-channels", { accept: AUDIO_INPUTS.join(","), Settings: AudioChannelsSettings }],
+  ["audio-metadata", { accept: AUDIO_INPUTS.join(","), Settings: AudioMetadataSettings }],
+  ["audio-speed", { accept: AUDIO_INPUTS.join(","), Settings: AudioSpeedSettings }],
+  ["fade-audio", { accept: AUDIO_INPUTS.join(","), Settings: FadeAudioSettings }],
+  ["merge-audio", { accept: AUDIO_INPUTS.join(","), Settings: MergeAudioSettings }],
+  ["noise-reduction", { accept: AUDIO_INPUTS.join(","), Settings: NoiseReductionSettings }],
+  ["normalize-audio", { accept: AUDIO_INPUTS.join(","), Settings: NormalizeAudioSettings }],
+  ["pitch-shift", { accept: AUDIO_INPUTS.join(","), Settings: PitchShiftSettings }],
+  ["reverse-audio", { accept: AUDIO_INPUTS.join(","), Settings: ReverseAudioSettings }],
+  ["ringtone-maker", { accept: AUDIO_INPUTS.join(","), Settings: RingtoneMakerSettings }],
+  ["silence-removal", { accept: AUDIO_INPUTS.join(","), Settings: SilenceRemovalSettings }],
+  ["split-audio", { accept: AUDIO_INPUTS.join(","), Settings: SplitAudioSettings }],
+  ["volume-adjust", { accept: AUDIO_INPUTS.join(","), Settings: VolumeAdjustSettings }],
+  ["waveform-image", { accept: AUDIO_INPUTS.join(","), Settings: WaveformImageSettings }],
+
   // PDF & Document tools
   ["merge-pdf", { accept: ".pdf", Settings: MergePdfSettings }],
   ["split-pdf", { accept: ".pdf", Settings: SplitPdfSettings }],