improved tools for ai

frontend/src/components/VolumePanel.tsx

@@ -2,7 +2,19 @@ import { useMemo, useState } from 'react';
 import { useEditorStore } from '../store/editorStore';
 import { Trash2, Volume2 } from 'lucide-react';
 
-export default function VolumePanel() {
+interface VolumePanelProps {
+  gainMode: boolean;
+  onToggleGainMode: () => void;
+  timelineGainDb: number;
+  onTimelineGainDbChange: (gainDb: number) => void;
+}
+
+export default function VolumePanel({
+  gainMode,
+  onToggleGainMode,
+  timelineGainDb,
+  onTimelineGainDbChange,
+}: VolumePanelProps) {
   const {
     words,
     selectedWordIndices,
@@ -65,6 +77,34 @@ export default function VolumePanel() {
         </div>
       </div>
 
+      <div className="space-y-2 pt-1 border-t border-editor-border">
+        <label className="text-xs text-editor-text-muted font-medium">Timeline Gain Zone (dB)</label>
+        <div className="flex items-center gap-2">
+          <input
+            type="number"
+            min={-24}
+            max={24}
+            step={0.5}
+            value={timelineGainDb}
+            onChange={(e) => onTimelineGainDbChange(Math.max(-24, Math.min(24, Number(e.target.value) || 0)))}
+            className="w-24 px-2 py-1.5 text-xs bg-editor-surface border border-editor-border rounded focus:border-editor-accent focus:outline-none"
+          />
+          <button
+            onClick={onToggleGainMode}
+            className={`px-3 py-1.5 text-xs rounded transition-colors ${
+              gainMode
+                ? 'bg-editor-accent text-white hover:bg-editor-accent-hover'
+                : 'bg-editor-accent/20 text-editor-accent hover:bg-editor-accent/30'
+            }`}
+          >
+            {gainMode ? 'Exit Zone Mode' : 'Add Gain Zones'}
+          </button>
+        </div>
+        <p className="text-[11px] text-editor-text-muted">
+          In gain zone mode, drag on the timeline to create a zone with this dB value.
+        </p>
+      </div>
+
       <div className="space-y-2 pt-1 border-t border-editor-border">
         <label className="text-xs text-editor-text-muted font-medium">Selection Gain (dB)</label>
         <div className="flex items-center gap-2">