fix(web): length / playback / preview consistency audit

The Length input could leave playback in a state that drifted from
the visible timeline. Audit + fixes:

- setTotalMs now clamps every block to the new total: blocks past
  the new end shrink to a 20ms tail at the very edge instead of
  vanishing; partially-overflowing blocks truncate. NaN-safe.
- Compose now stops the live pattern handle when totalMs or lanes
  change mid-playback; otherwise a length tweak left the audible
  pattern out of sync with what the playhead and waveform showed.
- onViewChange clamps view to [0, totalMs] so a length shrink
  doesn't leave the preview pointing past the rendered buffer.
- play() now drives a `playing` ref → PreviewPanel shows a small
  red "playing" indicator, and onEnded clears it.
- play() schedules a belt-and-braces timeout to clear the playing
  flag after the visual span in case onEnded never fires.

Author: productdevbook

web/src/components/PreviewPanel.vue

@@ -284,7 +284,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <section class="relative flex-1 flex flex-col bg-stone-900 text-paper rounded-2xl m-3 p-4 min-h-0 overflow-hidden">
+  <section class="relative flex-1 flex flex-col bg-stone-900 text-paper p-4 min-h-0 overflow-hidden">
     <header class="flex items-center gap-3 pb-2">
       <button
         type="button"
@@ -298,7 +298,14 @@ onUnmounted(() => {
         </svg>
       </button>
       <div class="flex flex-col">
-        <span class="font-mono text-[10px] uppercase tracking-wider opacity-50">Total</span>
+        <span class="flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-wider opacity-50">
+          Total
+          <span
+            v-if="props.playing"
+            class="inline-block h-1.5 w-1.5 rounded-full bg-red-500 animate-pulse"
+            title="Playing"
+          />
+        </span>
         <span class="font-mono text-[14px] tabular-nums">{{ totalLabel }}</span>
       </div>
       <div class="flex flex-col">
@@ -310,7 +317,7 @@ onUnmounted(() => {
       </div>
     </header>
 
-    <div class="relative flex-1 min-h-0 rounded-md overflow-hidden bg-stone-800/50">
+    <div class="relative flex-1 min-h-0 overflow-hidden bg-stone-800/40">
       <canvas ref="canvasEl" class="absolute inset-0 w-full h-full" />
       <div
         class="absolute top-0 bottom-0 w-px bg-paper/80"

web/src/composables/useBuilder.ts

@@ -392,7 +392,24 @@ export function useBuilder(opts: UseBuilderOptions = {}): UseBuilder {
   /* timeline controls */
 
   function setTotalMs(ms: number): void {
-    state.totalMs = Math.max(MIN_TOTAL, Math.min(MAX_TOTAL, ms))
+    if (!Number.isFinite(ms)) return
+    const next = Math.max(MIN_TOTAL, Math.min(MAX_TOTAL, ms))
+    state.totalMs = next
+    // Clamp every block to fit the new timeline. Blocks that started past
+    // the new end shrink to a 20ms minimum at the very end; blocks that
+    // partially overflow get truncated. We don't auto-delete — that would
+    // be too destructive on a typo'd length.
+    for (const lane of state.lanes) {
+      for (const b of lane.blocks) {
+        if (b.position >= next) {
+          // Squash to a 20ms tail at the very end so the block isn't lost.
+          b.position = Math.max(0, next - 20)
+          b.duration = Math.min(20, next - b.position)
+        } else if (b.position + b.duration > next) {
+          b.duration = Math.max(20, next - b.position)
+        }
+      }
+    }
   }
 
   function setPxPerMs(v: number): void {

web/src/pages/Compose.vue

@@ -95,19 +95,37 @@ function formatTime(ms: number): string {
 const timelineRef = ref<InstanceType<typeof Timeline> | null>(null)
 const previewRef = ref<InstanceType<typeof PreviewPanel> | null>(null)
 let liveHandle: PlayHandle | null = null
+const playing = ref(false)
 
 /** Visible ms window of the timeline, mirrored to the preview. */
 const view = ref<{ startMs: number; endMs: number }>({ startMs: 0, endMs: 10_000 })
 function onViewChange(payload: { startMs: number; endMs: number }): void {
-  view.value = payload
+  // Clamp to the current totalMs so a length shrink doesn't leave the
+  // preview reading samples past the buffer.
+  const total = builder.state.totalMs
+  view.value = {
+    startMs: Math.max(0, Math.min(total, payload.startMs)),
+    endMs: Math.max(0, Math.min(total, payload.endMs)),
+  }
 }
 
 async function play(): Promise<void> {
   if (builder.steps.value.length === 0) return
   if (liveHandle) liveHandle.stop()
-  timelineRef.value?.runPlayhead(builder.total.value)
-  previewRef.value?.runPlayhead(builder.total.value)
+  const span = builder.total.value
+  timelineRef.value?.runPlayhead(span)
+  previewRef.value?.runPlayhead(span)
+  playing.value = true
   liveHandle = await seslen.playPattern(builder.steps.value)
+  liveHandle.onEnded(() => {
+    playing.value = false
+    if (liveHandle) liveHandle = null
+  })
+  // Belt-and-braces: even if onEnded never fires (e.g. error path), make
+  // sure the indicator clears at the end of the visual playhead.
+  setTimeout(() => {
+    playing.value = false
+  }, span + 80)
 }
 
 function clearAll(): void {
@@ -408,6 +426,19 @@ const lengthInputSec = computed<number>({
 function setZoom(v: number): void {
   builder.setPxPerMs(v)
 }
+
+/* If the user changes length, lanes, or steps mid-playback, kill the live
+ * pattern. Otherwise the audible play diverges from the visible timeline. */
+watch(
+  () => [builder.state.totalMs, builder.state.lanes] as const,
+  () => {
+    if (liveHandle) {
+      liveHandle.stop()
+      liveHandle = null
+    }
+  },
+  { deep: true },
+)
 </script>
 
 <template>
@@ -524,7 +555,7 @@ function setZoom(v: number): void {
           :view-start-ms="view.startMs"
           :view-end-ms="view.endMs"
           :has-content="builder.steps.value.length > 0"
-          :playing="false"
+          :playing="playing"
           @play="play"
         />
       </div>