session-monitor

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    // Every mod's panes come through here, the built-in /diff included.
    if (e.requestId !== PANE_ID) return next(e)

    const elements = await $.ui.resolve(e)
    const { Box, Text, Button } = elements

    // Only the terminal has rasters; elsewhere the spinner line is plain text
    // without animation.
    type RasterElement = (props: {
      key: string
      columns: number
      rows: number
      cells: string
    }) => RenderElement
    const Raster =
      e.surface === 'terminal'
        ? (elements as unknown as { Raster?: RasterElement }).Raster
        : undefined

    const ownId = await $.session.id().catch(() => '')

    const clockMs = await $.clock.now().catch(() => 0)
    const nowMs = clockMs === 0 ? Date.now() : clockMs

    // Claude Code's settings directory: CLAUDE_CONFIG_DIR if set, otherwise
    // .claude in the home directory. The collector script reads the same
    // variable — it inherits the host's environment.
    const home =
      (await $.env.get('USERPROFILE').catch(() => undefined)) ??
      (await $.env.get('HOME').catch(() => undefined)) ??
      ''
    const claudeDir =
      (await $.env.get('CLAUDE_CONFIG_DIR').catch(() => undefined)) ??
      `${home}/.claude`

    lang = langFrom(await $.config.list().catch(() => []))
    const text = TEXT[lang]

    // The spinner colors follow the current theme. A custom theme
    // (`custom:<name>`) lives in themes/<name>.json and overrides tokens on top
    // of its base; it's re-read only when the theme changes.
    const settings = (await $.settings.read().catch(() => ({}))) as { theme?: unknown }

    const themeName = typeof settings.theme === 'string' ? settings.theme : ''
    if (themeName !== paletteTheme) {
      paletteTheme = themeName
      palette = { claude: DEFAULT_CLAUDE, shimmer: DEFAULT_SHIMMER }
      if (themeName.startsWith('custom:')) {
        const theme = await $.fs
          .read(`${claudeDir}/themes/${themeName.slice('custom:'.length)}.json`)
          .then((source) => JSON.parse(source) as { overrides?: Record<string, unknown> })
          .catch(() => null)
        palette = {
          claude: colorOf(theme?.overrides?.claude) ?? DEFAULT_CLAUDE,
          shimmer: colorOf(theme?.overrides?.claudeShimmer) ?? DEFAULT_SHIMMER,
        }
      }
    }

    // The guard: take the timestamps of the process files in sessions/ (the
    // engine rewrites them when a status changes) and of the transcripts. These
    // are in-process calls costing a fraction of a millisecond. Without the
    // folder there's nothing to show.
    let stamp: string | null = null
    const marks: string[] = [lang]
    const sessionsDir = `${claudeDir}/sessions`

    const listing = await $.fs.list(sessionsDir).catch(() => null)

    if (listing !== null) {
      for (const item of listing) {
        if (!/^\d+\.json$/.test(item.name)) continue
        const file = `${sessionsDir}/${item.name}`
        const stat = await $.fs.stat(file).catch(() => null)
        if (stat !== null) marks.push(`${item.name}:${stat.mtimeMs}`)
        const info = await $.fs
          .read(file)
          .then((source) => JSON.parse(source) as { sessionId?: string; cwd?: string })
          .catch(() => null)
        if (typeof info?.sessionId !== 'string' || typeof info?.cwd !== 'string') continue
        const slug = info.cwd.replace(/[^a-zA-Z0-9]/g, '-')
        const transcript = `${claudeDir}/projects/${slug}/${info.sessionId}.jsonl`
        const talk = await $.fs.stat(transcript).catch(() => null)
        if (talk !== null) marks.push(`${info.sessionId}:${talk.mtimeMs}`)
      }
      stamp = marks.join('|')
    }

    // A crashed process may leave its file behind: only the collector checks
    // liveness by pid, so it runs at least once every CACHE_MAX_AGE_MS even if
    // the timestamps didn't change.
    const isFresh =
      stamp !== null &&
      cache !== null &&
      cache.stamp === stamp &&
      nowMs - cache.collectedAt < CACHE_MAX_AGE_MS

    const collected = isFresh
      ? cache!.sessions
      : await $.process
          .run(['node', `${$.plugin.root}/scripts/sessions.mjs`, `--lang=${lang}`], {
            timeoutMs: 8000,
          })
          .then((result) =>
            result.exitCode === 0
              ? (JSON.parse(result.stdout) as SessionSummary[])
              : null,
          )
          .catch(() => null)

    if (!isFresh && collected !== null && stamp !== null) {
      cache = { stamp, sessions: collected, collectedAt: nowMs }
    }

    if (collected === null) {
      return Box({
        flexDirection: 'column',
        padding: 1,
        children: [Text({ dimColor: true, children: text.collectFailed })],
      })
    }

    // Read answers from earlier runs, once per module load.
    if (seenFile === null) {
      seenFile = `${claudeDir}/session-monitor-seen.json`
      const saved = await $.fs
        .read(seenFile)
        .then((source) => JSON.parse(source) as Record<string, unknown>)
        .catch(() => ({}))
      for (const [id, ms] of Object.entries(saved)) {
        if (typeof ms === 'number' && !seenAt.has(id)) seenAt.set(id, ms)
      }
    }
    // Forget closed sessions.
    const openIds = new Set(collected.map((session) => session.id))
    for (const id of seenAt.keys()) if (!openIds.has(id)) seenAt.delete(id)

    const views = collected.map((session) => viewOf(session, nowMs))
    unreadAnswers = views
      .filter((session) => session.shownState === 'answered')
      .map((session) => ({ id: session.id, title: session.title }))

    // This render's rasters. The spinner line is as wide as the card's inside
    // (pane body minus the pane padding, the border and the card padding) less
    // the creature column and its gap.
    spinners.clear()
    creatures.clear()
    const petColumns = Raster === undefined ? 0 : CREATURE_COLUMNS + 1
    const spinnerColumns = Math.max(12, Math.min(512, e.props.bodyColumns - 6 - petColumns))

    /** A card's bottom line: a live spinner or the last turn's result. */
    const turnLine = (session: SessionView): RenderElement | null => {
      const isActive = session.shownState === 'working' || session.shownState === 'received'

      if (isActive) {
        const spin = {
          verb: session.turnStart?.verb ?? 'Working',
          startMs: session.turnStart?.startMs ?? null,
        }