Claude Code の Mod で状態を画面に出す方法

// 今のブランチを調べて、プロンプトの下の 1 行に出す
async function showBranch($) {
  try {
    // 引数は配列で渡す。シェルを通さないので、引用符の扱いを気にしなくてよい
    const git = await $.process.run(['git', 'branch', '--show-current'])
    const branch = git.exitCode === 0 ? git.stdout.trim() : ''
    // git のリポジトリでないときは何も出さない
    $.ui.status(branch ? 'branch: ' + branch : '')
  } catch {
    // git が無いなど、起動できなかったとき。表示を足せないだけなので黙って戻る
  }
}

export function register(on) {
  // セッション開始時に 1 回
  on('session.start', async ($, e, next) => {
    await showBranch($)
    return next(e)
  })

  // Claude の返答が終わるたびに調べ直す
  on('turn.complete', async ($, e, next) => {
    await showBranch($)
    return next(e)
  })
}

import { expect, test } from 'claude-code/testing'

test('セッション開始でブランチ名を 1 行に出す', async ($, on) => {
  const lines: string[] = []
  on('process.run', () => ({ value: { exitCode: 0, stdout: 'feature/login\n', stderr: '' } }))
  on('ui.status', ($, e) => {
    lines.push(e.text)
    return { value: undefined }
  })
  on('session.start', () => ({ cwd: '/work' }))

  await $.session.start({ surface: 'terminal', isInteractive: true, cwd: '/work' })
  expect(lines).toEqual(['branch: feature/login'])
})

test('git のリポジトリでなければ空の行にする', async ($, on) => {
  const lines: string[] = []
  on('process.run', () => ({ value: { exitCode: 128, stdout: '', stderr: 'fatal: not a git repository' } }))
  on('ui.status', ($, e) => {
    lines.push(e.text)
    return { value: undefined }
  })
  on('session.start', () => ({ cwd: '/work' }))

  await $.session.start({ surface: 'terminal', isInteractive: true, cwd: '/work' })
  expect(lines).toEqual([''])
})

// ツールごとの回数。下の複数のフックが同じ変数を使う
const counts = {}

function total() {
  return Object.values(counts).reduce((sum, n) => sum + n, 0)
}

export function register(on) {
  // Claude がツールを使う直前に呼ばれる。数えるだけで、ツールはそのまま動かす
  on('tool.call', async ($, e, next) => {
    counts[e.tool] = (counts[e.tool] ?? 0) + 1
    // 画面を描き直すよう頼む
    $.ui.invalidate('ui.render')
    return next(e)
  })

  // スピナーの横に合計を足す。スピナー自体は Claude Code のものを使う
  on('ui.render', { component: 'Spinner' }, async ($, e, next) => {
    if (total() === 0) return next(e)
    return next({ ...e, props: { ...e.props, suffix: ' · ツール ' + total() + ' 回…' } })
  })
}

Thinking · ツール 2 回…

// 直近の計測値。session.measure で更新し、ui.render で表示する
let percent = null
// すでに知らせた利用枠の種類。同じ枠で何度も通知しないため
const notified = new Set()

export function register(on) {
  // 返答のたびと、利用枠の割合が変わったときに呼ばれる
  on('session.measure', async ($, e, next) => {
    percent = e.context.percent ?? null
    for (const limit of e.rateLimits) {
      if (limit.percentUsed >= 90 && !notified.has(limit.kind)) {
        notified.add(limit.kind)
        $.ui.toast(limit.kind + ' の枠を ' + limit.percentUsed + '% 使いました')
      }
    }
    // 画面を描き直すよう頼む
    $.ui.invalidate('ui.render')
    return next(e)
  })

  // プロンプトの上の帯に、コンテキストの使用率を 1 行足す
  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // まだ計測値がなければ、何も足さない
    if (percent === null) return next(e)
    const { Box, Text } = $.ui.resolve(e)
    // 他の Mod が帯に描いたものを残して、その下に足す
    const theirs = await next(e)
    return Box({
      flexDirection: 'column',
      children: [theirs, Text({ bold: percent >= 80, dimColor: percent < 80, children: ['コンテキスト ' + percent + '% 使用'] })],
    })
  })
}

{
  "description": "The usage-note hooks module",
  "modules": ["./register.js"]
}

import { expect, test } from 'claude-code/testing'

const BAND = {
  plugin: 'usage-note',
  component: 'AbovePrompt',
  requestId: 'band',
  viewport: { columns: 100, rows: 30 },
  props: { hasSurvey: false, isWorking: false, maxRows: 6, bodyColumns: 80, scroll: { offset: 0, bodyRows: 6 }, view: {} },
  surface: 'terminal',
} as const

test('計測値が届くと、帯にコンテキストの使用率が出る', async ($, on) => {
  on('session.measure', ($, e) => ({ changed: e.changed }))
  on('ui.render', () => ({ type: 'Text', props: {}, children: ['drawn by Claude Code'] }))

  await $.session.measure({ context: { window: 200000, tokens: 90000, percent: 45 }, rateLimits: [], changed: ['context'] })
  const ui = await $.ui.mount(BAND)
  expect(await ui.find({ type: 'Text', text: 'コンテキスト 45% 使用' })).toBeDefined()
})

test('利用枠が 90% を超えたら、1 回だけ通知する', async ($, on) => {
  const toasts: string[] = []
  on('ui.toast', ($, e) => {
    toasts.push(e.text)
    return { value: undefined }
  })
  on('session.measure', ($, e) => ({ changed: e.changed }))

  const reading = { context: { window: 200000 }, rateLimits: [{ kind: 'five_hour', percentUsed: 91 }], changed: ['rateLimits'] }
  await $.session.measure(reading)
  await $.session.measure(reading)
  expect(toasts).toEqual(['five_hour の枠を 91% 使いました'])
})