@naxodev/opencode-music-player 0.2.0 → 0.2.2

package/README.md

@@ -34,12 +34,12 @@ set -g allow-passthrough on
 ```
 
 > [!IMPORTANT]
-> This package targets the beta OpenCode 2 TUI plugin API in `opencode2 v0.0.0-next-17395`. OpenCode may change this API before its stable release.
+> This package targets the beta OpenCode 2 TUI plugin API in `opencode2 v0.0.0-next-17444`. OpenCode may change this API before its stable release.
 
 ## Requirements
 
 - macOS
-- OpenCode 2 `v0.0.0-next-17395`
+- OpenCode 2 `v0.0.0-next-17444`
 - Bun, which OpenCode uses to load TypeScript plugin packages
 - [`media-control`](https://github.com/ungive/media-control), recommended:
 

package/artwork.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @opentui/solid */
-import type { BoxRenderable } from "@opentui/core"
+import type { BoxRenderable, CliRenderer } from "@opentui/core"
 import { For, onCleanup, onMount } from "solid-js"
 import type { Plugin } from "@opencode-ai/plugin/tui"
 import type { Artwork } from "./types.ts"
@@ -26,13 +26,33 @@ import {
 type Context = Plugin.Context
 const tmuxOffsetCache = createTmuxOffsetCache()
 const nativeArtworkImageId = kittyImageId("opencode-music-player:artwork")
-let latestNativeArtworkOwner = 0
+type NativeArtworkRuntime = {
+  latestOwner: number
+  state: NativeArtworkState
+  identity: string
+}
+const defaultOwnershipScope = { latestOwner: 0 }
+const nativeArtworkRuntimes = new WeakMap<CliRenderer, NativeArtworkRuntime>()
+
+function nativeArtworkRuntime(renderer: CliRenderer): NativeArtworkRuntime {
+  const existing = nativeArtworkRuntimes.get(renderer)
+  if (existing) return existing
+  const created = {
+    latestOwner: 0,
+    state: { transmitted: 0, placement: null },
+    identity: "",
+  }
+  nativeArtworkRuntimes.set(renderer, created)
+  return created
+}
 
 export type NativeArtworkOwnership = { isCurrent: () => boolean }
 
-export function claimNativeArtworkOwnership(): NativeArtworkOwnership {
-  const owner = ++latestNativeArtworkOwner
-  return { isCurrent: () => owner === latestNativeArtworkOwner }
+export function claimNativeArtworkOwnership(
+  scope: { latestOwner: number } = defaultOwnershipScope,
+): NativeArtworkOwnership {
+  const owner = ++scope.latestOwner
+  return { isCurrent: () => owner === scope.latestOwner }
 }
 
 export function cleanupNativeArtwork(
@@ -78,10 +98,10 @@ function copyState(next: NativeArtworkState): NativeArtworkState {
 }
 
 export function AlbumArtwork(props: { context: Context; artwork: Artwork }) {
-  const ownership = claimNativeArtworkOwnership()
+  const renderer = props.context.renderer
+  const runtime = nativeArtworkRuntime(renderer)
+  const ownership = claimNativeArtworkOwnership(runtime)
   let container: BoxRenderable | undefined
-  let state: NativeArtworkState = { transmitted: 0, placement: null }
-  let artworkIdentity = ""
   let paintPending = false
   let disposed = false
 
@@ -127,18 +147,18 @@ export function AlbumArtwork(props: { context: Context; artwork: Artwork }) {
   }
 
   const commitPlan = (plan: NativeArtworkPlacementPlan) => {
-    state = copyState(plan.nextState)
+    runtime.state = copyState(plan.nextState)
   }
 
   const paintNativeImage = () => {
     if (!ownership.isCurrent()) return
-    if (artworkIdentity !== props.artwork.id) {
-      artworkIdentity = props.artwork.id
+    if (runtime.identity !== props.artwork.id) {
+      runtime.identity = props.artwork.id
       writeGraphics(
         props.context.renderer,
         kittyDelete(legacyImageIdForResolvedArtwork(props.artwork)),
       )
-      state = { transmitted: 0, placement: null }
+      runtime.state = { transmitted: 0, placement: null }
     }
     const kittySupported = supportsKittyGraphics(props.context)
     const slotValid =
@@ -163,7 +183,7 @@ export function AlbumArtwork(props: { context: Context; artwork: Artwork }) {
     const height = slot?.height ?? 0
 
     const plan = planNativeArtworkPlacement({
-      state,
+      state: runtime.state,
       imageId,
       x,
       y,
@@ -191,10 +211,15 @@ export function AlbumArtwork(props: { context: Context; artwork: Artwork }) {
   onCleanup(() => {
     disposed = true
     props.context.renderer.off("frame", scheduleNativeImage)
-    // Clear even if this owner unmounts before its first native paint.
-    cleanupNativeArtwork(ownership, () => {
-      writeGraphics(props.context.renderer, kittyDelete(nativeArtworkImageId))
-    })
+    // A replacement mount claims ownership before the next task runs.
+    setTimeout(() => {
+      cleanupNativeArtwork(ownership, () => {
+        if (!renderer.isDestroyed)
+          writeGraphics(renderer, kittyDelete(nativeArtworkImageId))
+        runtime.state = { transmitted: 0, placement: null }
+        runtime.identity = ""
+      })
+    }, 0)
   })
 
   return (

package/index.tsx

@@ -18,6 +18,7 @@ type SeekIntent = {
 
 export type Controller = {
   session: SessionStore
+  subscribe: (listener: (session: SessionStore) => void) => () => void
   openApp: () => Promise<void>
   refreshAll: () => Promise<void>
   playPause: () => Promise<void>
@@ -87,7 +88,7 @@ export function createController(
   context: Context,
   dependencies: ControllerDependencies = controllerDependencies,
 ): Controller {
-  const [session, setSession] = context.storage.memory<SessionStore>(
+  const [session, setSessionStore] = context.storage.memory<SessionStore>(
     "music-player.session.v6",
     {
       initial: {
@@ -95,10 +96,20 @@ export function createController(
         loadingOwners: [],
         error: null,
         player: null,
-        clock_ms: Date.now(),
       },
     },
   )
+  const sessionListeners = new Set<(session: SessionStore) => void>()
+  const setSession = (update: (draft: SessionStore) => void) => {
+    setSessionStore(update)
+    for (const listener of [...sessionListeners]) {
+      try {
+        listener(session)
+      } catch {
+        // One mounted presentation cannot block controller state.
+      }
+    }
+  }
   const loadingOwner = crypto.randomUUID()
   const media = dependencies.createSessionMedia()
   let disposed = false
@@ -119,18 +130,6 @@ export function createController(
   let latestSeek: SeekIntent | null = null
   const pending = new Set<() => void>()
   const isActive = () => !disposed
-  let clockTimer: ReturnType<typeof setInterval> | null = null
-  const syncClock = () => {
-    if (clockTimer) clearInterval(clockTimer)
-    clockTimer = null
-    if (!isActive() || !session.player?.is_playing) return
-    clockTimer = setInterval(() => {
-      if (!isActive()) return
-      setSession((draft) => {
-        draft.clock_ms = Date.now()
-      })
-    }, 1_000)
-  }
 
   const publishError = () => {
     if (!isActive()) return
@@ -240,9 +239,7 @@ export function createController(
         return
       setSession((draft) => {
         draft.player = player
-        draft.clock_ms = Date.now()
       })
-      syncClock()
     } catch (error) {
       if (isActive() && generation === lifecycleGeneration)
         setTransportError(errMsg(error))
@@ -259,7 +256,6 @@ export function createController(
         setSession((draft) => {
           draft.player = optimisticPlayerState(draft.player, nextPlaying)
         })
-        syncClock()
       },
     ).finally(() => {
       playbackOperations--
@@ -292,9 +288,7 @@ export function createController(
       snapshotEpoch++
       setSession((draft) => {
         draft.player = mergePlayerSnapshot(draft.player, event.state)
-        draft.clock_ms = Date.now()
       })
-      syncClock()
       return
     }
     if (event?.type === "lifecycle") {
@@ -319,6 +313,11 @@ export function createController(
 
   return {
     session,
+    subscribe(listener) {
+      sessionListeners.add(listener)
+      listener(session)
+      return () => sessionListeners.delete(listener)
+    },
     refreshAll,
     async openApp() {
       if (!isActive()) return
@@ -350,9 +349,9 @@ export function createController(
       activeSeek?.resolves.splice(0).forEach((resolve) => resolve())
       activeSeek = null
       for (const resolve of [...pending]) settle(resolve)
-      if (clockTimer) clearInterval(clockTimer)
       void media.dispose().catch(() => {})
       setLoadingOwner(false)
+      sessionListeners.clear()
     },
   }
 }
@@ -438,7 +437,6 @@ export function createMusicPlayerPlugin(options?: {
         void ctrl.session.loading
         void ctrl.session.error
         void ctrl.session.player
-        void ctrl.session.clock_ms
       }
       const unsubApp = context.ui.slot({
         append: "session.composer.top",
@@ -455,6 +453,7 @@ export function createMusicPlayerPlugin(options?: {
             <SidebarPlayer
               context={context}
               state={ctrl.session}
+              subscribe={ctrl.subscribe}
               onPlayPause={() => void ctrl.playPause()}
               onNext={() => void ctrl.next()}
               onPrev={() => void ctrl.prev()}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@naxodev/opencode-music-player",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "macOS system Now Playing controls for the OpenCode 2 TUI",
   "license": "MIT",
   "author": {
@@ -68,14 +68,14 @@
   },
   "dependencies": {
     "@naxodev/music-core": "^0.1.0",
-    "@opencode-ai/plugin": "0.0.0-next-17395",
-    "@opentui/core": "0.5.2",
-    "@opentui/solid": "0.5.2",
+    "@opencode-ai/plugin": "0.0.0-next-17444",
+    "@opentui/core": "0.5.3",
+    "@opentui/solid": "0.5.3",
     "pngjs": "^7.0.0",
     "solid-js": "1.9.12"
   },
   "devDependencies": {
-    "@opencode-ai/theme": "0.0.0-next-17395",
+    "@opencode-ai/theme": "0.0.0-next-17444",
     "@types/bun": "^1.3.14",
     "@types/pngjs": "^6.0.5",
     "prettier": "3.9.6",

package/ui.tsx

@@ -5,27 +5,28 @@ import {
   createMemo,
   createSignal,
   onCleanup,
+  onMount,
 } from "solid-js"
 import type { Plugin } from "@opencode-ai/plugin/tui"
 import {
   MouseButton,
   type BoxRenderable,
+  type TextNodeRenderable,
   type TextRenderable,
 } from "@opentui/core"
-import { waveformSeedKey } from "@naxodev/music-core"
 import { formatMs } from "./types.ts"
 import { AlbumArtwork } from "./artwork.tsx"
-import { Waveform } from "./waveform.tsx"
+import { Waveform, type PlayerPresentationSource } from "./waveform.tsx"
 
 export type UiState = {
   loading: boolean
   error: string | null
   player: import("./types.ts").PlayerState | null
-  clock_ms?: number
 }
 
 type Theme = Context["theme"]
 type Context = Plugin.Context
+type UiStateSubscribe = (listener: (state: UiState) => void) => () => void
 
 /** Text presentation keeps media symbols single-cell on emoji fonts. */
 const t = (s: string) => s + "\uFE0E"
@@ -320,30 +321,54 @@ function liveProgress(player: UiState["player"], now = Date.now()): number {
   )
 }
 
+function progressSegments(progress: number, duration: number, width: number) {
+  if (duration <= 0) return { left: "", thumb: "", right: "─".repeat(width) }
+  const ratio = Math.max(0, Math.min(1, progress / duration))
+  const track = width - 1
+  const filled = Math.max(0, Math.min(track, Math.round(ratio * track)))
+  return {
+    left: "━".repeat(filled),
+    thumb: Icon.scrub,
+    right: "─".repeat(Math.max(0, track - filled)),
+  }
+}
+
 function ProgressBar(props: {
   theme: Theme
-  progress: number
-  duration: number
+  source: PlayerPresentationSource
   width?: number
   accent?: string | undefined
   onSeek: (positionMs: number) => void
 }) {
   let bar: BoxRenderable | undefined
+  let leftNode: TextNodeRenderable | undefined
+  let thumbNode: TextNodeRenderable | undefined
+  let rightNode: TextNodeRenderable | undefined
   const width = () => Math.max(8, props.width ?? 28)
-  const rendered = createMemo(() => {
-    const w = width()
-    if (props.duration <= 0) {
-      return { left: "", thumb: "", right: "─".repeat(w) }
-    }
-    const ratio = Math.max(0, Math.min(1, props.progress / props.duration))
-    // leave 1 cell for thumb
-    const track = w - 1
-    const filled = Math.max(0, Math.min(track, Math.round(ratio * track)))
-    return {
-      left: "━".repeat(filled),
-      thumb: Icon.scrub,
-      right: "─".repeat(Math.max(0, track - filled)),
-    }
+  const rendered = () => {
+    const player = props.source.current()
+    return progressSegments(
+      liveProgress(player),
+      player?.track?.duration_ms ?? 0,
+      width(),
+    )
+  }
+  const paint = () => {
+    const next = rendered()
+    if (leftNode) leftNode.children = [next.left]
+    if (thumbNode) thumbNode.children = [next.thumb]
+    if (rightNode) rightNode.children = [next.right]
+  }
+
+  onMount(() => {
+    const unsubscribe = props.source.subscribe(() => paint())
+    const timer = setInterval(() => {
+      if (props.source.current()?.is_playing) paint()
+    }, 1_000)
+    onCleanup(() => {
+      unsubscribe()
+      clearInterval(timer)
+    })
   })
 
   return (
@@ -357,7 +382,7 @@ function ProgressBar(props: {
         const position = seekPositionForCell(
           event.x - bar.x,
           bar.width,
-          props.duration,
+          props.source.current()?.track?.duration_ms ?? 0,
         )
         if (position === null) return
         event.preventDefault()
@@ -367,6 +392,7 @@ function ProgressBar(props: {
     >
       <text>
         <span
+          ref={(element) => (leftNode = element)}
           style={{
             fg: props.accent ?? props.theme.text.action.primary.default,
           }}
@@ -374,18 +400,49 @@ function ProgressBar(props: {
           {rendered().left}
         </span>
         <span
+          ref={(element) => (thumbNode = element)}
           style={{
             fg: props.accent ?? props.theme.text.action.primary.default,
           }}
         >
           {rendered().thumb}
         </span>
-        <span style={{ fg: props.theme.text.subdued }}>{rendered().right}</span>
+        <span
+          ref={(element) => (rightNode = element)}
+          style={{ fg: props.theme.text.subdued }}
+        >
+          {rendered().right}
+        </span>
       </text>
     </box>
   )
 }
 
+function LiveElapsed(props: {
+  theme: Theme
+  source: PlayerPresentationSource
+}) {
+  let text: TextRenderable | undefined
+  const paint = () => {
+    if (text) text.content = formatMs(liveProgress(props.source.current()))
+  }
+  onMount(() => {
+    const unsubscribe = props.source.subscribe(() => paint())
+    const timer = setInterval(() => {
+      if (props.source.current()?.is_playing) paint()
+    }, 1_000)
+    onCleanup(() => {
+      unsubscribe()
+      clearInterval(timer)
+    })
+  })
+  return (
+    <text ref={(element) => (text = element)} fg={props.theme.text.subdued}>
+      {formatMs(liveProgress(props.source.current()))}
+    </text>
+  )
+}
+
 /** Hover/press icon button — props read in JSX (Solid setup is once). */
 function IconBtn(props: {
   theme: Theme
@@ -457,19 +514,49 @@ function IconBtn(props: {
 export function SidebarPlayer(props: {
   context: Context
   state: UiState
+  subscribe?: UiStateSubscribe
   onPlayPause: () => void
   onNext: () => void
   onPrev: () => void
   onSeek: (positionMs: number) => void
 }) {
   const theme = () => props.context.theme
+  let latestPlayer = props.state.player
+  const presentationListeners = new Set<(player: UiState["player"]) => void>()
+  const publishPlayer = (player: UiState["player"]) => {
+    latestPlayer = player
+    for (const listener of [...presentationListeners]) {
+      try {
+        listener(player)
+      } catch {
+        // One presentation widget cannot block its siblings.
+      }
+    }
+  }
+  const source: PlayerPresentationSource = {
+    current: () => latestPlayer,
+    subscribe(listener) {
+      presentationListeners.add(listener)
+      try {
+        listener(latestPlayer)
+      } catch {
+        // Initial presentation failure remains isolated to this widget.
+      }
+      return () => presentationListeners.delete(listener)
+    },
+  }
+  createEffect(() => publishPlayer(props.state.player))
+  const unsubscribeSession = props.subscribe?.((state) =>
+    publishPlayer(state.player),
+  )
+  onCleanup(() => {
+    unsubscribeSession?.()
+    presentationListeners.clear()
+  })
   const player = createMemo(() => props.state.player)
   const track = createMemo(() => player()?.track)
   const playing = createMemo(() => !!player()?.is_playing)
 
-  const progress = createMemo(() =>
-    liveProgress(player(), props.state.clock_ms),
-  )
   const duration = createMemo(() => track()?.duration_ms ?? 0)
 
   return (
@@ -544,29 +631,20 @@ export function SidebarPlayer(props: {
       </Show>
 
       <box flexDirection="row" justifyContent="center" overflow="hidden">
-        <Waveform
-          theme={theme()}
-          player={player()}
-          trackIdentity={
-            track() ? waveformSeedKey(track()!.name, track()!.id) : ""
-          }
-          bars={24}
-          variant="hero"
-        />
+        <Waveform theme={theme()} source={source} bars={24} variant="hero" />
       </box>
 
       <Show when={track() && duration() > 0}>
         <box flexDirection="column" gap={0} overflow="hidden">
           <ProgressBar
             theme={theme()}
-            progress={progress()}
-            duration={duration()}
+            source={source}
             width={24}
             accent={track()?.artwork?.accent}
             onSeek={props.onSeek}
           />
           <box flexDirection="row" justifyContent="space-between">
-            <text fg={theme().text.subdued}>{formatMs(progress())}</text>
+            <LiveElapsed theme={theme()} source={source} />
             <text fg={theme().text.subdued}>{formatMs(duration())}</text>
           </box>
         </box>

package/waveform.tsx

@@ -5,21 +5,22 @@ import {
   isFlat,
   sameTrackIdentity,
   stepEngine,
+  waveformSeedKey,
   type WaveEngine,
 } from "@naxodev/music-core"
-import {
-  For,
-  createEffect,
-  createMemo,
-  createSignal,
-  onCleanup,
-} from "solid-js"
+import { onCleanup, onMount } from "solid-js"
+import { StyledText, fg, type TextRenderable } from "@opentui/core"
 import type { Plugin } from "@opencode-ai/plugin/tui"
 import type { PlayerState } from "./types.ts"
 
 type Context = Plugin.Context
 type Theme = Context["theme"]
 
+export type PlayerPresentationSource = {
+  current: () => PlayerState | null
+  subscribe: (listener: (player: PlayerState | null) => void) => () => void
+}
+
 export type WaveformScheduler = {
   setInterval: (callback: () => void, ms: number) => unknown
   clearInterval: (timer: unknown) => void
@@ -149,18 +150,26 @@ function blockChar(level: number): string {
 
 export function Waveform(props: {
   theme: Theme
-  player: PlayerState | null
-  trackIdentity: string
+  source: PlayerPresentationSource
   bars?: number
   /** Kept for API compatibility; both variants render one clean row. */
   variant?: "mini" | "hero"
   rows?: number
 }) {
   const barCount = () => props.bars ?? (props.variant === "hero" ? 48 : 16)
-  const [rendered, setRendered] = createSignal<{
-    player: PlayerState
-    engine: WaveEngine
-  } | null>(null)
+  let text: TextRenderable | undefined
+  const paint = (player: PlayerState, engine: WaveEngine) => {
+    if (!text) return
+    const playing = player.is_playing
+    text.content = new StyledText(
+      Array.from({ length: barCount() }, (_, index) => {
+        const level = displayLevel(engine.levels[index] ?? 0, index, playing)
+        return fg(blueFor(level, playing || level > 0.05, props.theme))(
+          blockChar(level),
+        )
+      }),
+    )
+  }
   const coordinator = createWaveformCoordinator({
     now: () => Date.now(),
     scheduler: {
@@ -169,37 +178,28 @@ export function Waveform(props: {
         clearInterval(timer as ReturnType<typeof setInterval>),
     },
     intervalMs: props.variant === "hero" ? 48 : 64,
-    render: (player, engine) => setRendered({ player, engine }),
-    clear: () => setRendered(null),
+    render: paint,
+    clear: () => {
+      if (text) text.content = " ".repeat(barCount())
+    },
   })
 
-  createEffect(() => {
-    coordinator.setInput(props.player, props.trackIdentity, barCount())
+  const update = (player: PlayerState | null) => {
+    coordinator.setInput(
+      player,
+      player?.track ? waveformSeedKey(player.track.name, player.track.id) : "",
+      barCount(),
+    )
     coordinator.frame()
-  })
-  onCleanup(() => coordinator.dispose())
-
-  const cells = createMemo(() => {
-    const current = rendered()
-    const n = barCount()
-    const levels = current?.engine.levels ?? new Float64Array(n)
-    const playing = current?.player.is_playing ?? false
-    const out: { ch: string; fg: ReturnType<typeof blueFor> }[] = []
-    for (let i = 0; i < n; i++) {
-      const level = displayLevel(levels[i] ?? 0, i, playing)
-      out.push({
-        ch: blockChar(level),
-        fg: blueFor(level, playing || level > 0.05, props.theme),
-      })
-    }
-    return out
+  }
+  const unsubscribe = props.source.subscribe(update)
+  onMount(() => coordinator.frame())
+  onCleanup(() => {
+    unsubscribe()
+    coordinator.dispose()
   })
 
   return (
-    <text>
-      <For each={cells()}>
-        {(cell) => <span style={{ fg: cell.fg }}>{cell.ch}</span>}
-      </For>
-    </text>
+    <text ref={(element) => (text = element)}>{" ".repeat(barCount())}</text>
   )
 }