@naxodev/opencode-music-player 0.1.0

package/index.tsx

@@ -0,0 +1,428 @@
+/** @jsxImportSource @opentui/solid */
+import { Plugin } from "@opencode-ai/plugin/tui"
+import { createSessionSystemMedia, openNowPlayingApp } from "./system-media.ts"
+import { isMac, mergeArtworkCompletion, type SessionMedia } from "./types.ts"
+import { CompactPlayer, SidebarPlayer, type UiState } from "./ui.tsx"
+
+type Context = Plugin.Context
+type SessionStore = UiState
+type SeekIntent = {
+  positionMs: number
+  resolves: Array<() => void>
+}
+
+export type Controller = {
+  session: SessionStore
+  openApp: () => Promise<void>
+  refreshAll: () => Promise<void>
+  playPause: () => Promise<void>
+  seek: (positionMs: number) => Promise<void>
+  next: () => Promise<void>
+  prev: () => Promise<void>
+  dispose: () => void
+}
+
+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 }
+}
+
+function seekTarget(positionMs: number, durationMs?: number): number | null {
+  if (
+    !Number.isFinite(positionMs) ||
+    typeof durationMs !== "number" ||
+    !Number.isFinite(durationMs) ||
+    durationMs <= 0
+  )
+    return null
+  return Math.max(0, Math.min(durationMs, Math.round(positionMs)))
+}
+
+const controllerDependencies: ControllerDependencies = {
+  createSessionMedia: createSessionSystemMedia,
+}
+
+function errMsg(error: unknown): string {
+  return error && typeof error === "object" && "message" in error
+    ? String((error as { message: unknown }).message)
+    : String(error)
+}
+
+export function createController(
+  context: Context,
+  dependencies: ControllerDependencies = controllerDependencies,
+): Controller {
+  const [session, setSession] = context.storage.memory<SessionStore>(
+    "music-player.session.v5",
+    { initial: { loading: false, error: null, player: null } },
+  )
+  const media = dependencies.createSessionMedia()
+  let disposed = false
+  let lifecycleGeneration = 0
+  let eventDisposer: (() => void) | null = null
+  let presentationDisposer: (() => void) | null = null
+  let lifecycleError: {
+    message: string | null
+    source: "connection" | "provider" | "acquisition" | undefined
+  } = { 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 activeSeek: SeekIntent | null = null
+  let latestSeek: SeekIntent | null = null
+  const pending = new Set<() => void>()
+
+  const isActive = () => !disposed
+  const publishError = () => {
+    if (!isActive()) return
+    const message =
+      lifecycleError.source === "connection" && lifecycleError.message
+        ? lifecycleError.message
+        : (transportError ?? lifecycleError.message)
+    setSession((draft) => {
+      draft.error = message
+    })
+  }
+  const setLifecycleError = (
+    message: string | null,
+    source: "connection" | "provider" | "acquisition" | undefined,
+  ) => {
+    lifecycleError = { message, source }
+    publishError()
+  }
+  const setTransportError = (message: string | null) => {
+    transportError = message
+    publishError()
+  }
+  const updateLoading = () => {
+    if (!isActive()) return
+    setSession((draft) => {
+      draft.loading = pending.size > 0
+    })
+  }
+  const settle = (resolve: () => void) => {
+    if (!pending.delete(resolve)) return
+    resolve()
+    updateLoading()
+  }
+
+  const runCommand = (
+    command: () => Promise<unknown>,
+    afterSuccess?: () => void,
+  ) => {
+    if (!isActive()) return Promise.resolve()
+    const generation = lifecycleGeneration
+    const commandSnapshotEpoch = snapshotEpoch
+    return new Promise<void>((resolve) => {
+      pending.add(resolve)
+      updateLoading()
+      let result: Promise<unknown> | undefined
+      try {
+        result = command()
+      } catch (error) {
+        result = Promise.reject(error)
+      }
+      void Promise.resolve(result)
+        .then(
+          () => {
+            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)
+            setTransportError(message)
+            context.ui.toast.show({ title: "Music", message, variant: "error" })
+          },
+        )
+        .finally(() => settle(resolve))
+    })
+  }
+
+  const runSeek = (intent: SeekIntent) => {
+    activeSeek = intent
+    const operation = runCommand(
+      () => media.seek(intent.positionMs),
+      () => {
+        setSession((draft) => {
+          draft.player = optimisticSeekPlayerState(
+            draft.player,
+            intent.positionMs,
+          )
+        })
+      },
+    )
+    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 () => {
+    if (!isActive()) return
+    const generation = lifecycleGeneration
+    try {
+      const player = await media.player()
+      if (!isActive() || generation !== lifecycleGeneration || receivedSnapshot)
+        return
+      setSession((draft) => {
+        draft.player = player
+      })
+    } catch (error) {
+      if (isActive() && generation === lifecycleGeneration)
+        setTransportError(errMsg(error))
+    }
+  }
+
+  const playPause = () => {
+    const nextPlaying = !(playbackTarget ?? !!session.player?.is_playing)
+    playbackTarget = nextPlaying
+    playbackOperations++
+    return runCommand(
+      () => (nextPlaying ? media.play() : media.pause()),
+      () => {
+        setSession((draft) => {
+          draft.player = optimisticPlayerState(draft.player, nextPlaying)
+        })
+      },
+    ).finally(() => {
+      playbackOperations--
+      if (playbackOperations === 0) playbackTarget = undefined
+    })
+  }
+
+  const seek = (positionMs: number) => {
+    const target = seekTarget(positionMs, session.player?.track?.duration_ms)
+    if (!session.player?.track || target === null || !isActive())
+      return Promise.resolve()
+    return new Promise<void>((resolve) => {
+      if (activeSeek) {
+        if (latestSeek) {
+          latestSeek.positionMs = target
+          latestSeek.resolves.push(resolve)
+        } else {
+          latestSeek = { positionMs: target, resolves: [resolve] }
+        }
+        return
+      }
+      runSeek({ positionMs: target, resolves: [resolve] })
+    })
+  }
+
+  eventDisposer = media.subscribe((event) => {
+    if (!isActive()) return
+    if (event?.type === "snapshot") {
+      receivedSnapshot = true
+      snapshotEpoch++
+      setSession((draft) => {
+        draft.player = event.state
+      })
+      return
+    }
+    if (event?.type === "lifecycle") {
+      // Lifecycle and transport feedback are retained independently. A
+      // connection loss takes precedence, a transport failure temporarily
+      // 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.message !== null && latestSeek) {
+        latestSeek.resolves.splice(0).forEach((resolve) => resolve())
+        latestSeek = null
+      }
+    }
+  })
+  presentationDisposer = media.subscribePresentation((event) => {
+    if (!isActive()) return
+    setSession((draft) => {
+      draft.player = mergeArtworkCompletion(draft.player, event)
+    })
+  })
+  void refreshAll()
+
+  return {
+    session,
+    refreshAll,
+    async openApp() {
+      if (!isActive()) return
+      try {
+        openNowPlayingApp()
+        context.ui.toast.show({
+          title: "Music",
+          message: "Play in any app — the sidebar uses system media",
+          variant: "info",
+        })
+      } catch (error) {
+        setTransportError(errMsg(error))
+      }
+    },
+    playPause,
+    seek,
+    next: () => runCommand(() => media.next()),
+    prev: () => runCommand(() => media.previous()),
+    dispose() {
+      if (disposed) return
+      disposed = true
+      lifecycleGeneration++
+      eventDisposer?.()
+      eventDisposer = null
+      presentationDisposer?.()
+      presentationDisposer = null
+      latestSeek?.resolves.splice(0).forEach((resolve) => resolve())
+      latestSeek = null
+      activeSeek?.resolves.splice(0).forEach((resolve) => resolve())
+      activeSeek = null
+      for (const resolve of [...pending]) settle(resolve)
+      void media.dispose().catch(() => {})
+      if (session.loading) {
+        setSession((draft) => {
+          draft.loading = false
+        })
+      }
+    },
+  }
+}
+
+function AppHost(props: { context: Context; ctrl: Controller }) {
+  const { context, ctrl } = props
+  context.keymap.layer(() => ({
+    mode: "global",
+    priority: 200,
+    commands: [
+      {
+        id: "music.playpause",
+        title: "Play / pause",
+        group: "Music",
+        bind: "ctrl+shift+p",
+        palette: true,
+        run: () => void ctrl.playPause(),
+      },
+      {
+        id: "music.next",
+        title: "Next track",
+        group: "Music",
+        bind: "ctrl+shift+right",
+        palette: true,
+        run: () => void ctrl.next(),
+      },
+      {
+        id: "music.prev",
+        title: "Previous track",
+        group: "Music",
+        bind: "ctrl+shift+left",
+        palette: true,
+        run: () => void ctrl.prev(),
+      },
+      {
+        id: "music.open-app",
+        title: "Open music site",
+        group: "Music",
+        palette: true,
+        slash: { name: "music-app" },
+        run: () => void ctrl.openApp(),
+      },
+    ],
+  }))
+  return (
+    <CompactPlayer
+      context={context}
+      state={ctrl.session}
+      onPlayPause={() => void ctrl.playPause()}
+      onSeek={(positionMs) => void ctrl.seek(positionMs)}
+    />
+  )
+}
+
+export function createMusicPlayerPlugin(options?: {
+  createController?: (context: Context) => Controller
+  /** Test-only factory override; production always uses the session adapter. */
+  createSessionMedia?: () => SessionMedia
+}) {
+  return Plugin.define({
+    id: "music-player",
+    setup(context: Context) {
+      if (!isMac()) {
+        context.ui.toast.show({
+          title: "Music",
+          message: "System media control is macOS-only",
+          variant: "warning",
+        })
+      }
+      const ctrl =
+        options?.createController?.(context) ??
+        createController(
+          context,
+          options?.createSessionMedia
+            ? {
+                ...controllerDependencies,
+                createSessionMedia: options.createSessionMedia,
+              }
+            : controllerDependencies,
+        )
+      const unsubApp = context.ui.slot({
+        append: "app",
+        render: () => <AppHost context={context} ctrl={ctrl} />,
+      })
+      const unsubSidebar = context.ui.slot({
+        append: "sidebar.content",
+        render: () => (
+          <SidebarPlayer
+            context={context}
+            state={ctrl.session}
+            onPlayPause={() => void ctrl.playPause()}
+            onNext={() => void ctrl.next()}
+            onPrev={() => void ctrl.prev()}
+            onSeek={(positionMs) => void ctrl.seek(positionMs)}
+          />
+        ),
+      })
+      return () => {
+        unsubApp()
+        unsubSidebar()
+        ctrl.dispose()
+      }
+    },
+  })
+}
+
+export default createMusicPlayerPlugin()

package/kitty-graphics.ts

@@ -0,0 +1,90 @@
+import type { CliRenderer } from "@opentui/core"
+
+const APC = "\x1b_G"
+const ST = "\x1b\\"
+const CHUNK_SIZE = 4096
+
+export function tmuxPassthrough(data: string): string {
+  return `\x1bPtmux;${data.replaceAll("\x1b", "\x1b\x1b")}\x1b\\`
+}
+
+export function kittyTransmitPng(pngBase64: string, imageId: number): string[] {
+  const chunks: string[] = []
+  for (let offset = 0; offset < pngBase64.length; offset += CHUNK_SIZE) {
+    const chunk = pngBase64.slice(offset, offset + CHUNK_SIZE)
+    const more = offset + CHUNK_SIZE < pngBase64.length ? 1 : 0
+    const control =
+      offset === 0 ? `a=t,f=100,i=${imageId},q=2,m=${more}` : `m=${more}`
+    chunks.push(`${APC}${control};${chunk}${ST}`)
+  }
+  return chunks
+}
+
+export function kittyDisplayPng(
+  pngBase64: string,
+  imageId: number,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+): string[] {
+  const chunks = kittyTransmitPng(pngBase64, imageId)
+  return chunks.map((command, index) => {
+    let next = command
+    if (index === 0) {
+      next = next.replace(
+        `${APC}a=t,f=100,i=${imageId},q=2,`,
+        `\x1b7\x1b[${y + 1};${x + 1}H${APC}a=T,f=100,i=${imageId},p=${imageId},q=2,C=1,c=${width},r=${height},z=1,`,
+      )
+    }
+    return index === chunks.length - 1 ? `${next}\x1b8` : next
+  })
+}
+
+export function kittyPlace(
+  imageId: number,
+  placementId: number,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+): string {
+  return `\x1b7\x1b[${y + 1};${x + 1}H${APC}a=p,i=${imageId},p=${placementId},q=2,c=${width},r=${height},z=1;${ST}\x1b8`
+}
+
+export function kittyDelete(imageId: number): string {
+  return `${APC}a=d,d=I,i=${imageId},q=2;${ST}`
+}
+
+export function kittyDeletePlacement(imageId: number): string {
+  return `${APC}a=d,d=i,i=${imageId},q=2;${ST}`
+}
+
+export function kittyImageId(key: string): number {
+  let hash = 2166136261
+  for (let i = 0; i < key.length; i++) {
+    hash ^= key.charCodeAt(i)
+    hash = Math.imul(hash, 16777619)
+  }
+  return hash >>> 0 || 1
+}
+
+type RendererWriter = {
+  stdout?: NodeJS.WriteStream
+  realStdoutWrite?: NodeJS.WriteStream["write"]
+}
+
+/** OpenTUI detects Kitty graphics but does not yet expose a raw output API. */
+export function writeGraphics(renderer: CliRenderer, data: string): boolean {
+  const target = renderer as unknown as RendererWriter
+  if (!target.stdout || typeof target.realStdoutWrite !== "function")
+    return false
+  try {
+    const output =
+      process.env.TMUX && !process.env.HERDR_ENV ? tmuxPassthrough(data) : data
+    target.realStdoutWrite.call(target.stdout, output)
+    return true
+  } catch {
+    return false
+  }
+}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@naxodev/opencode-music-player",
+  "version": "0.1.0",
+  "description": "macOS system Now Playing controls for the OpenCode 2 TUI",
+  "license": "MIT",
+  "author": {
+    "name": "Nacho Vazquez",
+    "url": "https://github.com/NachoVazquez"
+  },
+  "funding": "https://github.com/sponsors/NachoVazquez",
+  "homepage": "https://github.com/naxodev/ai/tree/main/packages/opencode-music-player#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/naxodev/ai.git",
+    "directory": "packages/opencode-music-player"
+  },
+  "bugs": {
+    "url": "https://github.com/naxodev/ai/issues"
+  },
+  "type": "module",
+  "keywords": [
+    "opencode",
+    "opencode-plugin",
+    "tui",
+    "macos",
+    "now-playing",
+    "media-control"
+  ],
+  "exports": "./index.tsx",
+  "files": [
+    "CHANGELOG.md",
+    "artwork-placement.ts",
+    "artwork.ts",
+    "artwork.tsx",
+    "index.tsx",
+    "kitty-graphics.ts",
+    "ui.tsx",
+    "system-media.ts",
+    "tmux-offset.ts",
+    "types.ts",
+    "waveform.tsx",
+    "SUPPORT.md",
+    "LICENSE",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "engines": {
+    "bun": ">=1.3.0"
+  },
+  "os": [
+    "darwin"
+  ],
+  "scripts": {
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "check": "tsc --noEmit",
+    "test": "bun test --preload @opentui/solid/preload",
+    "pack:check": "bun run scripts/verify-pack.ts",
+    "smoke:package": "bun run scripts/package-smoke.ts",
+    "validate": "bun run format:check && bun run check && bun run test && bun run pack:check"
+  },
+  "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",
+    "pngjs": "^7.0.0",
+    "solid-js": "1.9.12"
+  },
+  "devDependencies": {
+    "@opencode-ai/theme": "0.0.0-next-17395",
+    "@types/bun": "^1.3.14",
+    "@types/pngjs": "^6.0.5",
+    "prettier": "3.9.6",
+    "typescript": "7.0.2"
+  }
+}