@naxodev/opencode-music-player 0.1.6 → 0.2.1

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

@@ -95,7 +95,6 @@ export function createController(
         loadingOwners: [],
         error: null,
         player: null,
-        clock_ms: Date.now(),
       },
     },
   )
@@ -119,18 +118,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 +227,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 +244,6 @@ export function createController(
         setSession((draft) => {
           draft.player = optimisticPlayerState(draft.player, nextPlaying)
         })
-        syncClock()
       },
     ).finally(() => {
       playbackOperations--
@@ -292,9 +276,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") {
@@ -350,7 +332,6 @@ 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)
     },
@@ -438,7 +419,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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@naxodev/opencode-music-player",
-  "version": "0.1.6",
+  "version": "0.2.1",
   "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,11 +5,13 @@ 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"
@@ -21,7 +23,6 @@ export type UiState = {
   loading: boolean
   error: string | null
   player: import("./types.ts").PlayerState | null
-  clock_ms?: number
 }
 
 type Theme = Context["theme"]
@@ -320,30 +321,52 @@ 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
+  player: UiState["player"]
   duration: number
   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 = () =>
+    progressSegments(liveProgress(props.player), props.duration, width())
+  const paint = () => {
+    const next = rendered()
+    if (leftNode) leftNode.children = [next.left]
+    if (thumbNode) thumbNode.children = [next.thumb]
+    if (rightNode) rightNode.children = [next.right]
+  }
+
+  createEffect(() => {
+    void props.player
+    void props.duration
+    void props.width
+    paint()
+  })
+  onMount(() => {
+    paint()
+    const timer = setInterval(() => {
+      if (props.player?.is_playing) paint()
+    }, 1_000)
+    onCleanup(() => clearInterval(timer))
   })
 
   return (
@@ -367,6 +390,7 @@ function ProgressBar(props: {
     >
       <text>
         <span
+          ref={(element) => (leftNode = element)}
           style={{
             fg: props.accent ?? props.theme.text.action.primary.default,
           }}
@@ -374,18 +398,47 @@ 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; player: UiState["player"] }) {
+  let text: TextRenderable | undefined
+  const paint = () => {
+    if (text) text.content = formatMs(liveProgress(props.player))
+  }
+  createEffect(() => {
+    void props.player
+    paint()
+  })
+  onMount(() => {
+    paint()
+    const timer = setInterval(() => {
+      if (props.player?.is_playing) paint()
+    }, 1_000)
+    onCleanup(() => clearInterval(timer))
+  })
+  return (
+    <text ref={(element) => (text = element)} fg={props.theme.text.subdued}>
+      {formatMs(liveProgress(props.player))}
+    </text>
+  )
+}
+
 /** Hover/press icon button — props read in JSX (Solid setup is once). */
 function IconBtn(props: {
   theme: Theme
@@ -467,9 +520,6 @@ export function SidebarPlayer(props: {
   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 (
@@ -559,14 +609,14 @@ export function SidebarPlayer(props: {
         <box flexDirection="column" gap={0} overflow="hidden">
           <ProgressBar
             theme={theme()}
-            progress={progress()}
+            player={player()}
             duration={duration()}
             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()} player={player()} />
             <text fg={theme().text.subdued}>{formatMs(duration())}</text>
           </box>
         </box>