feat: format trim times as MM:SS.d instead of raw seconds

src/app/layout.tsx

@@ -82,7 +82,7 @@ export default function RootLayout({
             >
               <div className="flex items-center gap-2">
                 <BrandLogo size={24} />
-                <h1 className="text-lg font-semibold">Reframe</h1>
+                <span className="text-lg font-semibold">Reframe</span>
               </div>
               <ThemeToggle />
             </header>

src/components/AudioSpeedControl.tsx

@@ -91,6 +91,7 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
         </div>
         <input
           id="speed-control"
+          data-testid="speed-slider"
           type="range"
           min={0}
           max={SPEED_STEPS.length - 1}

src/components/DownloadResult.tsx

@@ -138,6 +138,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
         <a
           href={isValid ? result.blobUrl : undefined}
           download={isValid ? filename : undefined}
+          data-testid="download-button"
           className={cn(
             "flex-1 min-w-[10rem] flex items-center justify-center gap-2 py-3 text-sm font-heading font-bold uppercase tracking-wide rounded-lg transition-all",
             isValid 
@@ -167,6 +168,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
         </a>
         <button
           type="button"
+          data-testid="reset-button"
           title="Reset and upload a new video"
           aria-label="Upload a new video"
           onClick={handleReset}

src/components/ExportOverlay.tsx

@@ -133,6 +133,7 @@ export default function ExportOverlay({ status, progress, exportStartedAt, onCan
             <div className="w-full space-y-2">
               <div className="h-1 w-full bg-film-100 rounded-full overflow-hidden">
                 <div
+                  data-testid="export-progress"
                   role="progressbar"
                   aria-valuenow={progress}
                   aria-valuemin={0}

src/components/ExportSettings.tsx

@@ -72,6 +72,7 @@ export default function ExportSettings({
 
         <input
           id="quality-control"
+          data-testid="quality-slider"
           type="range"
           min={18}
           max={30}

src/components/FileUpload.tsx

@@ -188,6 +188,7 @@ export default function FileUpload({
   const DropZone = () => (
     <div
       id="upload-zone"
+      data-testid="file-upload-zone"
       role="button"
       tabIndex={0}
       aria-label="Video upload area. Drag and drop a video file or press Enter to browse."

src/components/PresetSelector.tsx

@@ -54,6 +54,7 @@ const QUICK_ACTIONS = [
     preset: "vertical-9-16",
     label: "Reels",
     platform: "Instagram",
+    dimensions: "1080 × 1920 — 9:16 Portrait",
     icon: (
       <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
         <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
@@ -64,6 +65,7 @@ const QUICK_ACTIONS = [
     preset: "vertical-9-16",
     label: "TikTok",
     platform: "TikTok",
+    dimensions: "1080 × 1920 — 9:16 Portrait",
     icon: (
       <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
         <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.32 6.32 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.78 1.52V6.75a4.85 4.85 0 01-1.01-.06z" />
@@ -74,6 +76,7 @@ const QUICK_ACTIONS = [
     preset: "vertical-9-16",
     label: "Short",
     platform: "YouTube",
+    dimensions: "1080 × 1920 — 9:16 Portrait",
     icon: (
       <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
         <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
@@ -84,6 +87,7 @@ const QUICK_ACTIONS = [
     preset: "landscape-16-9",
     label: "YouTube",
     platform: "YouTube",
+    dimensions: "1920 × 1080 — 16:9 Landscape",
     icon: (
       <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
         <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
@@ -94,6 +98,7 @@ const QUICK_ACTIONS = [
     preset: "twitter-hd",
     label: "Twitter/X",
     platform: "Twitter",
+    dimensions: "1920 × 1080 — 16:9 Landscape",
     icon: (
       <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
         <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.259 5.63L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z" />
@@ -142,14 +147,15 @@ export default function PresetSelector({ recipe, onChange }: Props) {
     <div className="space-y-3">
       {/* Quick-action row */}
       <div className="grid grid-cols-5 gap-1.5">
-        {QUICK_ACTIONS.map(({ preset, label, platform, icon }) => {
+        {QUICK_ACTIONS.map(({ preset, label, platform, dimensions, icon }) => {
           const isActive = recipe.preset === preset;
           return (
             <button
               key={`${preset}-${label}`}
               type="button"
               aria-label={`${platform} ${label}`}
               aria-pressed={isActive}
+              title={dimensions}
               onClick={() => onChange({ preset })}
               className={cn(
                 "flex flex-col items-center justify-center gap-1 py-2 px-1 rounded-lg border text-center transition-all duration-150 cursor-pointer hover:scale-[1.04] active:scale-[0.97]",

src/components/TrimControl.tsx

@@ -3,7 +3,7 @@
 import { EditRecipe } from "@/lib/types";
 import { useState, useEffect, useRef, useCallback } from "react";
 import { AlertCircle } from "lucide-react";
-import { formatDuration } from "@/lib/utils";
+import { formatDuration, formatTimeWithDecimal } from "@/lib/utils";
 import { useAudioWaveform } from "@/hooks/useAudioWaveform";
 import WaveformCanvas from "@/components/WaveformCanvas";
 
@@ -241,7 +241,7 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
             htmlFor="trim-start"
             className="font-heading mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-[var(--muted)]"
           >
-            Start (sec)
+            Start ({formatTimeWithDecimal(recipe.trimStart)})
           </label>
 
           <input
@@ -278,7 +278,7 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
             htmlFor="trim-end"
             className="font-heading mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-[var(--muted)]"
           >
-            End (sec)
+            End ({formatTimeWithDecimal(recipe.trimEnd ?? duration)})
           </label>
 
           <input

src/components/VideoEditor.tsx

@@ -732,6 +732,7 @@ return () => {
 
             <button
               id="export-button"
+              data-testid="export-button"
               type="button"
               onClick={handleExport}
                 disabled={!file || isProcessing}

src/lib/utils.ts

@@ -41,4 +41,14 @@ export function formatDuration(seconds: number): string {
   }
 
   return `${minutes}:${secs.toString().padStart(2, "0")}`;
+}
+
+export function formatTimeWithDecimal(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) {
+    return "00:00.0";
+  }
+
+  const m = Math.floor(seconds / 60);
+  const s = (seconds % 60).toFixed(1);
+  return `${String(m).padStart(2, "0")}:${String(s).padStart(4, "0")}`;
 }