modscode EN

modscode / 図鑑 / jev

jev

Jev picks the tool that fits Claude's next step and Claude gets it as a hint, shown live and measured against a control group. Native to Claude Code: no gateway, no proxy.

確かめやすいコードターミナル＋デスクトップペインバンドトーストBoxButtonText

何をするか

  • デスクトップアプリに欄・プロンプトの上の帯・トーストを描く
  • /jev・/jev-setup を足す
  • ツールの呼び出しを見張る（止めることがある）
  • classic.Stop・prompt.submit・session.start・turn.complete ほか 2 個にフックする
  • ネットワークに出る

良いところ

  • TypeScript で書かれている
  • デスクトップ専用の分岐がある
  • エラーを扱う

作り始めるためのコード

2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。

雛形（register.tsx）

register.tsx
import type { Register } from 'claude-code'

// Drawn like jev by Matheus Tonelotto (pane, band, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/ntkode-jev/
// Written by modscode from that reading, not copied from the mod: use it as you like.
// Each value below stands for one the mod works out at run time; put in your own.
export const register: Register = on => {
  // the pane: open it with $.ui.open({ id: 'my-pane', title: "Jev" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const text = '…'
    const routingText = '…'
    const DONE_MODE_TEXT = '…'
    const gateway = '…'
    const tool = '…'
    const duration = '…'
    const steps = '…'
    const tokens = '…'
    const cleanPrompt = '…'
    const ARM_TEXT = '…'
    const doneText = '…'
    const cell = '…'
    const cell2 = '…'
    const cell3 = '…'
    const text2 = '…'
    const hinted = '…'
    const asked = '…'
    const pct = '…'
    const text3 = '…'
    const followed = '…'
    const hinted2 = '…'
    const text4 = '…'
    const toolCounts = '…'
    const text5 = '…'
    const map = '…'
    const text6 = '…'
    const latency = '…'
    const text7 = '…'
    const dollars = '…'
    const jevCost = '…'
    const asked2 = '…'
    const text8 = '…'
    const week = '…'
    const resets = '…'
    const split = '…'
    const line = '…'
    const split2 = '…'
    const line2 = '…'
    const split3 = '…'
    const line3 = '…'
    const turns = '…'
    const requests = '…'
    const controlTurns = '…'
    const latency2 = '…'
    const DONE_NEXT = '…'
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" justifyContent="space-between">
          <Text>
            <Text bold>
              Jev
            </Text>
            <Text>
              {" ● "}
              {text}
            </Text>
            <Text color="yellow">
              {" "}
              {routingText}
            </Text>
          </Text>
          <Text dimColor />
        </Box>
        <Text dimColor wrap="truncate-end">
          {"asked before each of Claude's requests · hints at ≥ 0.7 · "}
          20
          % control turns
        </Text>
        <Text wrap="truncate-end">
          <Text dimColor>
            {"done check "}
          </Text>
          <Text color="cyan">
            {DONE_MODE_TEXT}
          </Text>
        </Text>
        <Text color="yellow" wrap="wrap">
          This session's requests go through a local proxy (
          {gateway}
          ). If it is jev-gateway, it hints too: run one or the other to measure either.
        </Text>
        <Box marginTop={1}>
          <Text wrap="truncate-end">
            <Text color="yellow">
              {"▶ now "}
            </Text>
            <Text>
              Claude working
              {` · ${tool}`}
            </Text>
          </Text>
        </Box>
        <Box marginTop={1} flexDirection="column">
          <Text>
            <Text bold>
              Last turn
            </Text>
            <Text dimColor>
              {"  "}
              {duration}
              {" · "}
              {steps}
              {" requests"}
              {` · ${tokens} out`}
            </Text>
          </Text>
          <Box flexDirection="column">
            <Text dimColor italic wrap="truncate-end">
              “
              {cleanPrompt}
              ”
            </Text>
            <Text dimColor>
              {ARM_TEXT}
            </Text>
            <Text>
              {"done check · "}
              {doneText}
            </Text>
            <Box flexDirection="column" marginTop={1}>
              <Text wrap="wrap">
                <Text>
                  {cell}
                </Text>
                <Text>
                  {cell2}
                </Text>
                <Text>
                  {cell3}
                </Text>
              </Text>
              <Text>
                <Text dimColor>
                  {text2}
                </Text>
                <Text color="cyan" bold>
                  {hinted}
                </Text>
                <Text dimColor>
                  {" of "}
                  {asked}
                  {" asks"}
                  {pct}
                </Text>
              </Text>
              <Text>
                <Text dimColor>
                  {text3}
                </Text>
                <Text bold>
                  {followed}
                </Text>
                <Text dimColor>
                  {" of "}
                  {hinted2}
                </Text>
              </Text>
              <Text wrap="wrap">
                <Text dimColor>
                  {text4}
                </Text>
                <Text color="cyan">
                  {toolCounts}
                </Text>
              </Text>
              <Text wrap="wrap">
                <Text dimColor>
                  {text5}
                </Text>
                <Text>
                  {map}
                </Text>
              </Text>
              <Text>
                <Text dimColor>
                  {text6}
                </Text>
                <Text color="yellow">
                  {latency}
                </Text>
                <Text dimColor>
                  {" per ask, before Claude's request"}
                </Text>
              </Text>
            </Box>
          </Box>
        </Box>
        <Box marginTop={1} flexDirection="column">
          <Text>
            <Text bold>
              Spend
            </Text>
            <Text dimColor>
              {" this session"}
            </Text>
          </Text>
          <Text wrap="truncate-end">
            <Text dimColor>
              {text7}
            </Text>
            <Text>
              {"Claude "}
              {dollars}
            </Text>
            <Text dimColor>
              {" at API prices"}
            </Text>
            <Text>
              {" · Jev "}
              {jevCost}
            </Text>
            <Text dimColor>
              {" over "}
              {asked2}
              {" asks"}
            </Text>
          </Text>
          <Text wrap="truncate-end">
            <Text dimColor>
              {text8}
            </Text>
            <Text color="red" bold>
              {week}
              %
            </Text>
            <Text dimColor>
              {" used"}
              {` · resets ${resets}`}
            </Text>
          </Text>
        </Box>
        <Box marginTop={1} flexDirection="column">
          <Text wrap="wrap">
            <Text bold>
              {split}
            </Text>
            <Text dimColor>
              {line}
            </Text>
          </Text>
          <Text wrap="wrap">
            <Text bold>
              {split2}
            </Text>
            <Text dimColor>
              {line2}
            </Text>
          </Text>
          <Text wrap="wrap">
            <Text bold>
              {split3}
            </Text>
            <Text dimColor>
              {line3}
            </Text>
          </Text>
        </Box>
        <Box marginTop={1} flexDirection="column">
          <Text bold>
            This session
          </Text>
          <Box flexDirection="row" flexWrap="wrap">
            <Box flexDirection="column" marginRight={3}>
              <Text bold>
                {turns}
              </Text>
              <Text dimColor>
                turns
              </Text>
            </Box>
            <Box flexDirection="column" marginRight={3}>
              <Text bold>
                {requests}
              </Text>
              <Text dimColor>
                requests
              </Text>
            </Box>
            <Box flexDirection="column" marginRight={3}>
              <Text bold color="cyan">
                {`${hinted}${pct}`}
              </Text>
              <Text dimColor>
                hinted
              </Text>
            </Box>
            <Box flexDirection="column" marginRight={3}>
              <Text bold>
                {`${followed}${pct}`}
              </Text>
              <Text dimColor>
                followed
              </Text>
            </Box>
            <Box flexDirection="column" marginRight={3}>
              <Text bold>
                {controlTurns}
              </Text>
              <Text dimColor>
                control turns
              </Text>
            </Box>
            <Box flexDirection="column" marginRight={3}>
              <Text bold>
                {tokens}
              </Text>
              <Text dimColor>
                output
              </Text>
            </Box>
            <Box flexDirection="column" marginRight={3}>
              <Text bold color="yellow">
                {latency2}
              </Text>
              <Text dimColor>
                Jev p50
              </Text>
            </Box>
          </Box>
        </Box>
        <Box marginTop={1}>
          <Text dimColor wrap="wrap">
            Shadow: Jev is asked and its picks are recorded, but Claude never sees them. The last 7 days show how often Claude chos…
          </Text>
        </Box>
        <Box marginTop={1} flexDirection="row" flexWrap="wrap" columnGap={2}>
          <Button hotkey="s" plain variant="primary" label="set up" />
          <Button hotkey="p" plain label="resume" />
          <Button hotkey="d" plain label={`done check: ${DONE_NEXT}`} />
          <Button role="dismiss" plain label="close" />
        </Box>
      </Box>
    )
  })

  // the band above the prompt; what else goes there is drawn under it
  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const { Box, Text } = $.ui.resolve(e)
    const tool = '…'
    const status2 = '…'
    return (
      <Box flexDirection="column">
        <Box>
          <Text color="yellow">
            {"◆ "}
          </Text>
          <Text>
            Claude working
            {` · ${tool}`}
          </Text>
          <Text dimColor>
            {" · "}
            {status2}
          </Text>
        </Box>
        {await next(e)}
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const deny = '…'
    const message = '…'
    await $.ui.toast(`Jev: the done check stays shadow (${deny}).`)
    await $.ui.toast(`Jev: the done check stays shadow (${message}).`)
    return next(e)
  })
}

Mod 自身のコード

読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。

コードが呼ぶもの

通信プログラム起動ファイル書き込み環境変数ツール呼び出し

コードから読み取ったデザイン

読み取ったコミットのソースから描いたもので、動かした結果ではありません。一覧は 3 回描き、条件はデスクトップアプリで描く最初の分岐を取り、動かしたときにだけ決まる値は仮の例（点線の下線）にするか省きます。色と書体はこのサイトのものです。

コードから読めること

2026-10-06 に読んだコミット 459f3a11bf67 のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。

載せる条件: 確かめやすいコード
入口を読んだhooks/hooks.json が名指すモジュールをすべて読んだ。jev/plugins/jev/hooks/register.tsx
解析できるすべてのファイルが TypeScript か JavaScript として解析できる。3 ファイルを解析
コードが Mod の中で完結import は Mod 自身のファイルかエンジンのモジュールだけ。パッケージも require もない。コードはすべて Mod の中
読める圧縮した行・eval・new Function・計算した道の import()・符号化した塊がない。圧縮・eval・符号化した塊なし
呼び出しが見える通信とプログラム起動はその場で $.http.fetch・$.process.run と書き、他へ渡さない。外への呼び出しはすべてその場の $ で
入れる前に自分で判断する材料
描く場所コードから読んだ、描く先。ターミナル・デスクトップアプリ・両方・何も描かない（フックだけ: 見張りやプロンプトの書き換え）のどれか。出すだけで、外す理由にはしない。ターミナルとデスクトップアプリに同じように描く
入れる手順リポジトリ自身の .claude-plugin/marketplace.json にこの Mod が載っていて、ページに書いた手順でそのマーケットプレイスから入れられるか。リポジトリの .claude-plugin/marketplace.json に載っており、そこから入れられる
Windows のプログラム$.process で起動するプログラムが Windows にあるか（tail・date・open・osascript・/usr/… などは無い）。jev/plugins/jev/hooks/register.tsx:926 chmod（Windows にない）
通信fetch の送り先（https のホスト）がコードに書いてあるか。jev/plugins/jev/hooks/register.tsx:230 fetch(a.url)
プログラム起動するプログラムの名前がコードに書いてあり、シェル・インタプリタ・通信用の道具でないか。jev/plugins/jev/hooks/register.tsx:892 実行時に決まるプログラム; jev/plugins/jev/hooks/register.tsx:961 実行時に決まるプログラム
読んで送るファイルや環境変数を読み、かつ通信するか。reads environment variables and files and reaches the network
ソースの鍵ソースに API キーや秘密鍵らしきものがあるか。ソースに鍵なし
ライセンスオープンなライセンス（MIT・Apache-2.0・BSD・ISC・Unlicense・0BSD・CC0）で全文があれば、modscode にコードを載せる。違えばリンクだけ。ライセンスなし

コードの文面を読んだだけで、安全の審査ではありません。動かしてはおらず、起動するプログラムの中で何が起きるかも見えません。入れる前の確認はあなたの役目です。 載せる条件

入れる

入れる前に、必ず自分で確かめてください。Mod はサンドボックスなしで、あなたの権限で動きます。modscode はこのコードの安全を保証しません。下のコードを読み（またはフォルダーで claude plugin validate .）、触るものを見て、読んだコミットを入れてください。

リポジトリがそのままマーケットプレイスです。このマーケットプレイスを足し（ターミナルでは次のコマンド、デスクトップアプリではプラグインの設定）、そこから Mod を入れます。

/plugin marketplace add ntkode/notkode-mods
/plugin install jev@notkode-mods

入るのはマーケットプレイスの最新のコミットで、ここで読んだもの（459f3a11bf67）と違うことがあります。入れる前に見比べてください。

Claude に聞く

modscode のコネクタを入れると、Claude がこのデザイン・コードが触るもの・コードを読んで、それをもとに作れます。たとえば:

modscode のデザイン「ntkode-jev」をコードごと読んで、同じようなペインを作って

Claude から探す: MCP コネクタ

似たデザイン