@naxodev/opencode-music-player 0.2.2 → 0.2.4

package/artwork.tsx

@@ -121,7 +121,7 @@ export function AlbumArtwork(props: { context: Context; artwork: Artwork }) {
           action.width,
           action.height,
         )
-        return commands.every((command) => writeGraphics(renderer, command))
+        return writeGraphics(renderer, commands)
       }
       case "place":
         return writeGraphics(

package/index.tsx

@@ -7,7 +7,12 @@ import {
   mergePlayerSnapshot,
   type SessionMedia,
 } from "./types.ts"
-import { CompactPlayer, SidebarPlayer, type UiState } from "./ui.tsx"
+import {
+  CompactPlayer,
+  sanitizeTerminalText,
+  SidebarPlayer,
+  type UiState,
+} from "./ui.tsx"
 
 type Context = Plugin.Context
 type SessionStore = UiState & { loadingOwners?: string[] }
@@ -32,36 +37,12 @@ export type ControllerDependencies = {
   createSessionMedia: () => SessionMedia
 }
 
-/** Apply successful daemon transport state until the next authoritative replay. */
-export function optimisticPlayerState(
-  player: SessionStore["player"],
-  playing: boolean,
-  now = Date.now(),
-): SessionStore["player"] {
-  if (!player) return player
-  const progress = player.is_playing
-    ? Math.min(
-        player.track?.duration_ms || Number.POSITIVE_INFINITY,
-        Math.max(0, player.progress_ms + (now - player.fetched_at)),
-      )
-    : player.progress_ms
-  return {
-    ...player,
-    progress_ms: progress,
-    is_playing: playing,
-    fetched_at: now,
-  }
-}
-
-export function optimisticSeekPlayerState(
-  player: SessionStore["player"],
-  positionMs: number,
-  now = Date.now(),
-): SessionStore["player"] {
-  const target = seekTarget(positionMs, player?.track?.duration_ms)
-  if (!player?.track || target === null) return player
-  return { ...player, progress_ms: target, fetched_at: now }
-}
+/**
+ * Seeking to the exact duration finishes the track immediately, so a click
+ * near the end of a seek bar would skip songs instead of seeking. Clamp to
+ * just short of the end; skipping is what the next button is for.
+ */
+export const SEEK_END_MARGIN_MS = 1_000
 
 function seekTarget(positionMs: number, durationMs?: number): number | null {
   if (
@@ -71,7 +52,8 @@ function seekTarget(positionMs: number, durationMs?: number): number | null {
     durationMs <= 0
   )
     return null
-  return Math.max(0, Math.min(durationMs, Math.round(positionMs)))
+  const ceiling = Math.max(0, durationMs - SEEK_END_MARGIN_MS)
+  return Math.max(0, Math.min(ceiling, Math.round(positionMs)))
 }
 
 const controllerDependencies: ControllerDependencies = {
@@ -122,10 +104,14 @@ export function createController(
   } = { message: null, source: undefined }
   let transportError: string | null = null
   let receivedSnapshot = false
-  // An authority fence for optimistic UI projection, not a host sampling lane.
   let snapshotEpoch = 0
-  let playbackTarget: boolean | undefined
-  let playbackOperations = 0
+  let playbackIntent:
+    | {
+        readonly target: boolean
+        readonly startedAtEpoch: number
+        settled: boolean
+      }
+    | undefined
   let activeSeek: SeekIntent | null = null
   let latestSeek: SeekIntent | null = null
   const pending = new Set<() => void>()
@@ -172,11 +158,10 @@ export function createController(
 
   const runCommand = (
     command: () => Promise<unknown>,
-    afterSuccess?: () => void,
+    onSettled?: (succeeded: boolean) => void,
   ) => {
     if (!isActive()) return Promise.resolve()
     const generation = lifecycleGeneration
-    const commandSnapshotEpoch = snapshotEpoch
     return new Promise<void>((resolve) => {
       pending.add(resolve)
       updateLoading()
@@ -186,48 +171,46 @@ export function createController(
       } catch (error) {
         result = Promise.reject(error)
       }
+      let succeeded = false
       void Promise.resolve(result)
         .then(
           () => {
+            succeeded = true
             if (!isActive() || generation !== lifecycleGeneration) return
             if (transportError !== null) setTransportError(null)
-            // A later daemon snapshot is authoritative over command optimism.
-            if (snapshotEpoch === commandSnapshotEpoch) afterSuccess?.()
           },
           (error) => {
             if (!isActive() || generation !== lifecycleGeneration) return
-            const message = errMsg(error)
+            const message = sanitizeTerminalText(errMsg(error))
             setTransportError(message)
             context.ui.toast.show({ title: "Music", message, variant: "error" })
           },
         )
-        .finally(() => settle(resolve))
+        .finally(() => {
+          try {
+            onSettled?.(succeeded)
+          } finally {
+            settle(resolve)
+          }
+        })
     })
   }
 
   const runSeek = (intent: SeekIntent) => {
     activeSeek = intent
-    const operation = runCommand(
+    void runCommand(
       () => media.seek(intent.positionMs),
       () => {
-        setSession((draft) => {
-          draft.player = optimisticSeekPlayerState(
-            draft.player,
-            intent.positionMs,
-          )
-        })
+        if (activeSeek !== intent) return
+        activeSeek = null
+        for (const resolve of intent.resolves) resolve()
+        intent.resolves = []
+        const next = latestSeek
+        latestSeek = null
+        if (isActive() && next) runSeek(next)
+        else next?.resolves.splice(0).forEach((resolve) => resolve())
       },
     )
-    void operation.then(() => {
-      if (activeSeek !== intent) return
-      activeSeek = null
-      for (const resolve of intent.resolves) resolve()
-      intent.resolves = []
-      const next = latestSeek
-      latestSeek = null
-      if (isActive() && next) runSeek(next)
-      else next?.resolves.splice(0).forEach((resolve) => resolve())
-    })
   }
 
   const refreshAll = async () => {
@@ -247,20 +230,31 @@ export function createController(
   }
 
   const playPause = () => {
-    const nextPlaying = !(playbackTarget ?? !!session.player?.is_playing)
-    playbackTarget = nextPlaying
-    playbackOperations++
+    const nextPlaying = !(
+      playbackIntent?.target ?? !!session.player?.is_playing
+    )
+    const intent = {
+      target: nextPlaying,
+      startedAtEpoch: snapshotEpoch,
+      settled: false,
+    }
+    playbackIntent = intent
     return runCommand(
       () => (nextPlaying ? media.play() : media.pause()),
-      () => {
-        setSession((draft) => {
-          draft.player = optimisticPlayerState(draft.player, nextPlaying)
-        })
+      (succeeded) => {
+        if (playbackIntent !== intent) return
+        if (!succeeded) {
+          playbackIntent = undefined
+          return
+        }
+        intent.settled = true
+        if (
+          snapshotEpoch > intent.startedAtEpoch &&
+          session.player?.is_playing === intent.target
+        )
+          playbackIntent = undefined
       },
-    ).finally(() => {
-      playbackOperations--
-      if (playbackOperations === 0) playbackTarget = undefined
-    })
+    )
   }
 
   const seek = (positionMs: number) => {
@@ -289,6 +283,12 @@ export function createController(
       setSession((draft) => {
         draft.player = mergePlayerSnapshot(draft.player, event.state)
       })
+      if (
+        playbackIntent?.settled &&
+        snapshotEpoch > playbackIntent.startedAtEpoch &&
+        event.state.is_playing === playbackIntent.target
+      )
+        playbackIntent = undefined
       return
     }
     if (event?.type === "lifecycle") {
@@ -297,6 +297,8 @@ export function createController(
       // takes precedence over provider status, and clearing it restores the
       // latest daemon lifecycle state without requiring a repeated event.
       setLifecycleError(event.message, event.source)
+      if (event.source === "connection" && event.message !== null)
+        playbackIntent = undefined
       if (event.message !== null && latestSeek) {
         latestSeek.resolves.splice(0).forEach((resolve) => resolve())
         latestSeek = null

package/kitty-graphics.ts

@@ -75,16 +75,31 @@ type RendererWriter = {
 }
 
 /** OpenTUI detects Kitty graphics but does not yet expose a raw output API. */
-export function writeGraphics(renderer: CliRenderer, data: string): boolean {
+export function writeGraphics(
+  renderer: CliRenderer,
+  data: string | readonly string[],
+): boolean {
   const target = renderer as unknown as RendererWriter
   if (!target.stdout || typeof target.realStdoutWrite !== "function")
     return false
+  const output = (value: string) =>
+    process.env.TMUX && !process.env.HERDR_ENV ? tmuxPassthrough(value) : value
+  let cursorSaved = false
   try {
-    const output =
-      process.env.TMUX && !process.env.HERDR_ENV ? tmuxPassthrough(data) : data
-    target.realStdoutWrite.call(target.stdout, output)
+    for (const command of typeof data === "string" ? [data] : data) {
+      if (command.includes("\x1b7")) cursorSaved = true
+      target.realStdoutWrite.call(target.stdout, output(command))
+      if (command.includes("\x1b8")) cursorSaved = false
+    }
     return true
   } catch {
+    if (cursorSaved) {
+      try {
+        target.realStdoutWrite.call(target.stdout, output("\x1b8"))
+      } catch {
+        // The original transaction still failed; restoration is best effort.
+      }
+    }
     return false
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@naxodev/opencode-music-player",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "macOS system Now Playing controls for the OpenCode 2 TUI",
   "license": "MIT",
   "author": {
@@ -67,7 +67,7 @@
     "validate": "bun run format:check && bun run check && bun run test && bun run pack:check"
   },
   "dependencies": {
-    "@naxodev/music-core": "^0.1.0",
+    "@naxodev/music-core": "^0.1.1",
     "@opencode-ai/plugin": "0.0.0-next-17444",
     "@opentui/core": "0.5.3",
     "@opentui/solid": "0.5.3",

package/system-media.ts

@@ -29,7 +29,6 @@ type ArtworkCacheEntry = {
   pending: boolean
   attempts: number
   retry_at: number
-  owner: PresentationHost | null
   interests: Map<PresentationHost, ArtworkIdentity>
 }
 const MAX_ARTWORK_ENTRIES = 32
@@ -71,6 +70,7 @@ const createOpenCodeSessionClient: SessionClientFactory = () =>
 type PresentationHost = {
   publish: (event: ArtworkCompletionEvent) => void
   isActive: () => boolean
+  accepts: (identity: ArtworkIdentity) => boolean
 }
 
 export type { CommandResult }
@@ -172,6 +172,7 @@ function publishArtworkCompletion(
   artwork: Artwork | null,
 ) {
   for (const [host, identity] of entry.interests) {
+    if (!host.isActive() || !host.accepts(identity)) continue
     host.publish({
       type: "artwork-completion",
       identity,
@@ -184,22 +185,10 @@ function publishArtworkCompletion(
 
 function removeArtworkInterests(host: PresentationHost) {
   removeWaitingInterest(host)
-  for (const [key, entry] of artworkCache) {
+  for (const entry of artworkCache.values()) entry.interests.delete(host)
+  // A host owns only its interest. The physical job keeps its slot until it settles.
+  for (const entry of artworkJobs.values()) {
     entry.interests.delete(host)
-    if (entry.owner !== host || entry.pending) continue
-    if (entry.value === null) artworkCache.delete(key)
-    else entry.owner = null
-  }
-  for (const [key, entry] of artworkJobs) {
-    entry.interests.delete(host)
-    if (entry.owner !== host) continue
-    entry.pending = false
-    entry.owner = null
-    if (artworkCache.get(key) === entry && entry.value === null)
-      artworkCache.delete(key)
-    // Disposal/cancellation frees a slot too. A deferred current identity
-    // must be admitted even when its predecessor never resolves.
-    releaseArtworkSlot(key)
   }
 }
 
@@ -248,18 +237,12 @@ function artworkForTrack(
       pending: false,
       attempts: 0,
       retry_at: 0,
-      owner: null,
       interests: new Map(),
     }
   }
   // A state change that reached admission supersedes any older deferred
   // identity owned by this adapter generation.
   removeWaitingInterest(host)
-  if (entry.pending && entry.owner && !entry.owner.isActive()) {
-    entry.pending = false
-    entry.owner = null
-    artworkJobs.delete(key)
-  }
   if (
     !entry.pending &&
     entry.attempts < 3 &&
@@ -270,8 +253,6 @@ function artworkForTrack(
     entry.attempts++
     artworkJobs.set(key, entry)
     const activeEntry = entry
-    const activeHost = host
-    activeEntry.owner = activeHost
     void (async () => {
       let data: string | null = null
       try {
@@ -279,12 +260,9 @@ function artworkForTrack(
       } catch {
         // Session artwork failure is transient; host catalog fallback remains.
       }
-      if (!activeHost.isActive() || activeEntry.owner !== activeHost)
-        return { artwork: null, duration_ms: activeEntry.duration_ms }
       return resolver(key, target, data, legacyKey)
     })().then(
       (resolution) => {
-        if (!activeHost.isActive() || activeEntry.owner !== activeHost) return
         activeEntry.value = resolution.artwork
         activeEntry.duration_ms = resolution.duration_ms
         activeEntry.resolved = true
@@ -295,7 +273,6 @@ function artworkForTrack(
         publishArtworkCompletion(activeEntry, resolution.artwork)
       },
       () => {
-        if (!activeHost.isActive() || activeEntry.owner !== activeHost) return
         activeEntry.value = null
         activeEntry.resolved = true
         activeEntry.pending = false
@@ -326,6 +303,7 @@ export function createSessionSystemMedia(
   const listeners = new Set<(event: SessionMediaEvent) => void>()
   const presentationListeners = new Set<ArtworkPresentationListener>()
   let disposed = false
+  let currentArtworkIdentity: string | null = null
   let client: ReconnectingMusicSessionClient | undefined
   let installed = false
   let latest: RevisionedState | undefined
@@ -364,6 +342,8 @@ export function createSessionSystemMedia(
       }
     },
     isActive: () => !disposed,
+    accepts: (identity) =>
+      currentArtworkIdentity === artworkIdentityKey(identity),
   }
   const lifecycle = (): SessionMediaLifecycleEvent => {
     if (
@@ -404,10 +384,17 @@ export function createSessionSystemMedia(
     emit(event)
   }
   const project = (state: RevisionedState | undefined): PlayerState | null => {
-    if (!state) return null
-    if (!state.state.track) return state.state as PlayerState
+    if (!state) {
+      currentArtworkIdentity = null
+      return null
+    }
+    if (!state.state.track) {
+      currentArtworkIdentity = null
+      return state.state as PlayerState
+    }
     const track = state.state.track
     const identity = identityFromTrack(track)
+    currentArtworkIdentity = artworkIdentityKey(identity)
     const artworkState = artworkForTrack(
       artworkCacheKey(identity),
       artworkIdentityKey(identity),
@@ -427,7 +414,7 @@ export function createSessionSystemMedia(
           album: track.album,
           duration_ms: track.duration_ms,
         } satisfies SessionArtworkIdentity)
-        return !disposed && active === client && result.type === "available"
+        return active === client && result.type === "available"
           ? result.base64
           : null
       },
@@ -440,8 +427,6 @@ export function createSessionSystemMedia(
       ...state.state,
       track: {
         ...track,
-        duration_ms:
-          track.duration_ms > 0 ? track.duration_ms : artworkState.duration_ms,
         artwork: artworkState.artwork,
         artwork_loading: artworkState.loading,
       },

package/types.ts

@@ -108,8 +108,6 @@ export function mergeArtworkCompletion(
       ...track,
       artwork: event.artwork,
       artwork_loading: false,
-      duration_ms:
-        track.duration_ms > 0 ? track.duration_ms : event.duration_ms,
     },
   }
 }
@@ -140,8 +138,6 @@ export function mergePlayerSnapshot(
       ...next,
       artwork: next.artwork ?? current.artwork,
       artwork_loading: false,
-      duration_ms:
-        next.duration_ms > 0 ? next.duration_ms : current.duration_ms,
     },
   }
 }

package/ui.tsx

@@ -146,9 +146,11 @@ export type CompactPresentation = {
   artist: string | null
 }
 
-function sanitize(value: string, fallback = ""): string {
+export function sanitizeTerminalText(value: string, fallback = ""): string {
   const clean = value
     .normalize("NFC")
+    .replace(/(?:\x1b\]|\x9d)[\s\S]*?(?:\x07|\x1b\\|\x9c|$)/g, "")
+    .replace(/(?:\x1b\[|\x9b)[0-?]*[ -/]*[@-~]/g, "")
     .replace(/[\u0000-\u001f\u007f-\u009f\u2028\u2029]+/g, " ")
     .replace(/\s+/g, " ")
     .trim()
@@ -176,8 +178,8 @@ export function compactPresentation(
 ): CompactPresentation {
   const available = Math.max(1, Math.floor(width))
   const marker = playing ? Icon.pause : Icon.play
-  const cleanTitle = sanitize(title, "Unknown track")
-  const cleanArtist = sanitize(artist)
+  const cleanTitle = sanitizeTerminalText(title, "Unknown track")
+  const cleanArtist = sanitizeTerminalText(artist)
 
   const tier: CompactTier =
     available >= COMPACT_BUDGETS.wide.minWidth
@@ -576,7 +578,11 @@ export function SidebarPlayer(props: {
       flexShrink={0}
     >
       <Show when={props.state.error}>
-        {(err) => <text fg={theme().text.feedback.error.default}>{err()}</text>}
+        {(err) => (
+          <text fg={theme().text.feedback.error.default}>
+            {sanitizeTerminalText(err())}
+          </text>
+        )}
       </Show>
 
       <box flexDirection="row" justifyContent="center">
@@ -618,13 +624,17 @@ export function SidebarPlayer(props: {
         {(t) => (
           <box flexDirection="column" gap={0}>
             <text fg={theme().text.default}>
-              <b>{t().name}</b>
+              <b>{sanitizeTerminalText(t().name, "Unknown track")}</b>
             </text>
             <Show when={t().artists}>
-              <text fg={theme().text.subdued}>{t().artists}</text>
+              <text fg={theme().text.subdued}>
+                {sanitizeTerminalText(t().artists)}
+              </text>
             </Show>
             <Show when={t().album}>
-              <text fg={theme().text.subdued}>{t().album}</text>
+              <text fg={theme().text.subdued}>
+                {sanitizeTerminalText(t().album)}
+              </text>
             </Show>
           </box>
         )}