agon
Agon inside Claude Code: a status band above the prompt, a read-only trade view and a market list whose every number comes from your Agon server; Buy, Sell and Ask only fill your prompt, with the mint and the numbers on screen, never a tok…
確かめやすいコードターミナル＋デスクトップペインバンドトーストBoxButtonInputSvgText
何をするか
- プロンプトの上の帯・欄・トーストを描く
- /agon-band・/agon を足す
- session.startにフックする
- ターンをまたいで自分の状態を持つ
- ネットワークに出る
良いところ
- プロセスを起こさない
- TypeScript で書かれている
- デスクトップ専用の分岐がある
- エラーを扱う
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形（register.tsx）
register.tsx
import type { Register } from 'claude-code'
// Drawn like agon by jishnu-baruah (pane, band, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/manjeetsharma0796-agon/
// 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 band above the prompt; what else goes there is drawn under it
on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
const { Box, Button, Text } = $.ui.resolve(e)
const toggleLabel = '…'
const text = '…'
const text2 = '…'
const text3 = '…'
return (
<Box flexDirection="column">
<Box flexDirection="row" gap={2} alignItems="center" flexWrap="nowrap" overflow="hidden">
<Button plain label={`${toggleLabel}`} />
<Box flexDirection="row" gap={2} flexWrap="nowrap">
<Text wrap="truncate-end">
{text}
</Text>
<Text wrap="truncate-end">
{text2}
</Text>
<Text wrap="truncate-end">
{text3}
</Text>
</Box>
<Button label="trade" />
</Box>
{await next(e)}
</Box>
)
})
// the pane: open it with $.ui.open({ id: 'my-pane', title: "Agon trade" })
on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
const { Box, Text, Button, Input } = $.ui.resolve(e)
const text = '…'
const text2 = '…'
const text3 = '…'
const label = '…'
const l = '…'
const l2 = '…'
const l3 = '…'
const text4 = '…'
const text5 = '…'
const text6 = '…'
const text7 = '…'
const text8 = '…'
const text9 = '…'
const text10 = '…'
const text11 = '…'
const text12 = '…'
const l4 = '…'
const l5 = '…'
const l6 = '…'
const l7 = '…'
const l8 = '…'
const l9 = '…'
const l10 = '…'
const l11 = '…'
const l12 = '…'
const l13 = '…'
const l14 = '…'
const l15 = '…'
const text13 = '…'
const text14 = '…'
const text15 = '…'
const text16 = '…'
const text17 = '…'
const text18 = '…'
const text19 = '…'
const text20 = '…'
const text21 = '…'
const text22 = '…'
const text23 = '…'
const text24 = '…'
const l16 = '…'
const l17 = '…'
const l18 = '…'
const r = '…'
const text25 = '…'
const text26 = '…'
const text27 = '…'
const text28 = '…'
const text29 = '…'
const text30 = '…'
const text31 = '…'
const text32 = '…'
const text33 = '…'
const text34 = '…'
const text35 = '…'
const text36 = '…'
const l19 = '…'
const l20 = '…'
const l21 = '…'
const text37 = '…'
const text38 = '…'
const text39 = '…'
const row = '…'
const row2 = '…'
const row3 = '…'
const row4 = '…'
const row5 = '…'
const row6 = '…'
const row7 = '…'
const row8 = '…'
const age = '…'
const row9 = '…'
const l22 = '…'
const l23 = '…'
const l24 = '…'
const row10 = '…'
const row11 = '…'
const row12 = '…'
const l25 = '…'
const l26 = '…'
const l27 = '…'
const l28 = '…'
const l29 = '…'
const l30 = '…'
const l31 = '…'
const l32 = '…'
const l33 = '…'
return (
<Box flexDirection="column">
<Box flexDirection="column">
<Box flexDirection="row" gap={2} flexWrap="nowrap">
<Text wrap="truncate-end">
{text}
</Text>
<Text wrap="truncate-end">
{text2}
</Text>
<Text wrap="truncate-end">
{text3}
</Text>
</Box>
<Box flexDirection="row" gap={2} flexWrap="nowrap">
{`pick-${label}`}
{`pick-${label}`}
{`pick-${label}`}
<Button plain hotkey="r" label="refresh" />
</Box>
</Box>
<Box flexDirection="column">
<Text wrap="truncate-end">
{l}
</Text>
<Text wrap="truncate-end">
{l2}
</Text>
<Text wrap="truncate-end">
{l3}
</Text>
<Box flexDirection="row" gap={2} flexWrap="nowrap">
<Text wrap="truncate-end">
{text4}
</Text>
<Text wrap="truncate-end">
{text5}
</Text>
<Text wrap="truncate-end">
{text6}
</Text>
</Box>
<Box flexDirection="row" gap={2} flexWrap="nowrap">
<Text wrap="truncate-end">
{text7}
</Text>
<Text wrap="truncate-end">
{text8}
</Text>
<Text wrap="truncate-end">
{text9}
</Text>
</Box>
<Box flexDirection="row" gap={2} flexWrap="nowrap">
<Text wrap="truncate-end">
{text10}
</Text>
<Text wrap="truncate-end">
{text11}
</Text>
<Text wrap="truncate-end">
{text12}
</Text>
</Box>
<Input placeholder="paste a mint address, then Enter" />
<Text color="yellow" wrap="truncate-end">
{l4}
</Text>
<Text color="yellow" wrap="truncate-end">
{l5}
</Text>
<Text color="yellow" wrap="truncate-end">
{l6}
</Text>
<Text wrap="truncate-end">
{l7}
</Text>
<Text wrap="truncate-end">
{l8}
</Text>
<Text wrap="truncate-end">
{l9}
</Text>
<Text wrap="truncate-end">
{l10}
</Text>
<Text wrap="truncate-end">
{l11}
</Text>
<Text wrap="truncate-end">
{l12}
</Text>
<Text wrap="truncate-end">
{l13}
</Text>
<Text wrap="truncate-end">
{l14}
</Text>
<Text wrap="truncate-end">
{l15}
</Text>
</Box>
<Box flexDirection="column">
<Box flexDirection="row" gap={2} flexWrap="nowrap">
<Text wrap="truncate-end">
{text13}
</Text>
<Text wrap="truncate-end">
{text14}
</Text>
<Text wrap="truncate-end">
{text15}
</Text>
</Box>
<Box flexDirection="row" gap={2} flexWrap="nowrap">
<Text wrap="truncate-end">
{text16}
</Text>
<Text wrap="truncate-end">
{text17}
</Text>
<Text wrap="truncate-end">
{text18}
</Text>
</Box>
<Box flexDirection="row" gap={2} flexWrap="nowrap">
<Text wrap="truncate-end">
{text19}
</Text>
<Text wrap="truncate-end">
{text20}
</Text>
<Text wrap="truncate-end">
{text21}
</Text>
</Box>
<Box flexDirection="row" gap={2} flexWrap="nowrap">
<Text wrap="truncate-end">
{text22}
</Text>
<Text wrap="truncate-end">
{text23}
</Text>
<Text wrap="truncate-end">
{text24}
</Text>
</Box>
<Text color="yellow" wrap="truncate-end">
{l16}
</Text>
<Text color="yellow" wrap="truncate-end">
{l17}
</Text>
<Text color="yellow" wrap="truncate-end">
{l18}
</Text>
</Box>
<Box flexDirection="row" gap={1} flexWrap="nowrap">
{`range-${r}`}
{`range-${r}`}
{`range-${r}`}
</Box>
<Box flexDirection="column">
<Box flexDirection="row" gap={2} flexWrap="nowrap">
<Text wrap="truncate-end">
{text25}
</Text>
<Text wrap="truncate-end">
{text26}
</Text>
<Text wrap="truncate-end">
{text27}
</Text>
</Box>
<Box flexDirection="row" gap={2} flexWrap="nowrap">
<Text wrap="truncate-end">
{text28}
</Text>
<Text wrap="truncate-end">
{text29}
</Text>
<Text wrap="truncate-end">
{text30}
</Text>
</Box>
<Box flexDirection="row" gap={2} flexWrap="nowrap">
<Text wrap="truncate-end">
{text31}
</Text>
<Text wrap="truncate-end">
{text32}
</Text>
<Text wrap="truncate-end">
{text33}
</Text>
</Box>
<Box flexDirection="row" gap={2} flexWrap="nowrap">
<Text wrap="truncate-end">
{text34}
</Text>
<Text wrap="truncate-end">
{text35}
</Text>
<Text wrap="truncate-end">
{text36}
</Text>
</Box>
</Box>
<Box flexDirection="row" gap={2} flexWrap="nowrap">
<Box flexDirection="column">
<Box flexDirection="column">
<Text bold>
Order book / depth
</Text>
<Text color="yellow" wrap="truncate-end">
{l19}
</Text>
<Text color="yellow" wrap="truncate-end">
{l20}
</Text>
<Text color="yellow" wrap="truncate-end">
{l21}
</Text>
<Box flexDirection="row" gap={2} flexWrap="nowrap">
<Text wrap="truncate-end">
{text37}
</Text>
<Text wrap="truncate-end">
{text38}
</Text>
<Text wrap="truncate-end">
{text39}
</Text>
</Box>
<Box flexDirection="column">
<Text dimColor bold>
{row}
</Text>
<Text color="red" wrap="truncate-end">
{row2}
</Text>
<Text color="red" wrap="truncate-end">
{row3}
</Text>
<Text color="red" wrap="truncate-end">
{row4}
</Text>
<Text>
{row5}
</Text>
<Text color="red" wrap="truncate-end">
{row6}
</Text>
<Text color="red" wrap="truncate-end">
{row7}
</Text>
<Text color="red" wrap="truncate-end">
{row8}
</Text>
</Box>
</Box>
</Box>
<Box flexDirection="column">
<Box flexDirection="column">
<Text bold>
{`Recent trades, ${age} old, stale`}
</Text>
<Text dimColor bold>
{row9}
</Text>
<Text wrap="truncate-end">
{l22}
</Text>
<Text wrap="truncate-end">
{l23}
</Text>
<Text wrap="truncate-end">
{l24}
</Text>
<Text color="green" wrap="truncate-end">
{row10}
</Text>
<Text color="green" wrap="truncate-end">
{row11}
</Text>
<Text color="green" wrap="truncate-end">
{row12}
</Text>
<Text wrap="truncate-end">
{l25}
</Text>
<Text wrap="truncate-end">
{l26}
</Text>
<Text wrap="truncate-end">
{l27}
</Text>
</Box>
</Box>
</Box>
<Box flexDirection="column">
<Box flexDirection="row" gap={1} flexWrap="nowrap">
<Button hotkey="b" variant="primary" label="Buy" />
<Button hotkey="s" label="Sell" />
<Button hotkey="c" label="Check" />
<Button hotkey="a" label="Ask" />
</Box>
<Button hotkey="a" label="Ask" />
<Text wrap="truncate-end">
{l28}
</Text>
<Text wrap="truncate-end">
{l29}
</Text>
<Text wrap="truncate-end">
{l30}
</Text>
<Text wrap="truncate-end">
{l31}
</Text>
<Text wrap="truncate-end">
{l32}
</Text>
<Text wrap="truncate-end">
{l33}
</Text>
</Box>
</Box>
)
})
on('session.start', async ($, e, next) => {
const mint = '…'
const range = '…'
const marketError = '…'
await $.ui.toast(`Agon needs Claude Code 2.1.286 or newer. Run \`claude update\`, then restart claude.`)
await $.ui.toast(`Nothing to ask about yet: /market has not answered for ${mint} ${range} (${marketError}). Press Ask again once the header …`)
return next(e)
})
}
Mod 自身のコード
読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。
plugins/claude-code/hooks/register.tsx363〜366 行plugins/claude-code/hooks/register.tsx542〜624 行plugins/claude-code/hooks/register.tsx487〜504 行plugins/claude-code/hooks/register.tsx368〜371 行plugins/claude-code/hooks/register.tsx2126〜2268 行plugins/claude-code/hooks/register.tsx1963〜2003 行
コードが呼ぶもの
通信保存
コードから読み取ったデザイン
Agon needs Claude Code 2.1.286 or newer. Run `claude update`, then restart claude.
Nothing to ask about yet: /market has not answered for Buy Sell (Agon trade). Press Ask again once the header …
Claude に頼む…
Agon trade
SellSellSell
pick-buildpick-buildpick-buildr refresh
Agon tradeAgon tradeAgon trade
SellSellSell
SellSellSell
SellSellSell
paste a mint address, then EnterAgon tradeAgon tradeAgon tradeAgon tradeAgon tradeAgon tradeAgon tradeAgon tradeAgon tradeAgon tradeAgon tradeAgon tradeSellSellSell
SellSellSell
SellSellSell
SellSellSell
Agon tradeAgon tradeAgon traderange-Agon traderange-Agon traderange-Agon trade
SellSellSell
SellSellSell
SellSellSell
SellSellSell
Order book / depthAgon tradeAgon tradeAgon trade
SellSellSell
BuyBuyBuyBuyBuyBuyBuyBuy
Recent trades, 2h 10m old, staleBuyAgon tradeAgon tradeAgon tradeBuyBuyBuyAgon tradeAgon tradeAgon trade
Buy bSell sCheck cAsk a
Ask aAgon tradeAgon tradeAgon tradeAgon tradeAgon tradeAgon trade読み取ったコミットのソースから描いたもので、動かした結果ではありません。一覧は 3 回描き、条件はデスクトップアプリで描く最初の分岐を取り、動かしたときにだけ決まる値は仮の例（点線の下線）にするか省きます。色と書体はこのサイトのものです。
コードから読めること
2026-10-06 に読んだコミット 538621772d7c のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。plugins/claude-code/hooks/register.tsx |
| 解析できる | すべてのファイルが TypeScript か JavaScript として解析できる。1 ファイルを解析 |
| コードが 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/… などは無い）。Windows にないプログラムを使わない |
| 通信 | fetch の送り先（https のホスト）がコードに書いてあるか。plugins/claude-code/hooks/register.tsx:167 fetch(`${server}${path}`); plugins/claude-code/hooks/register.tsx:1855 fetch(`${server}/logo?mint=${encodeURIComponent(mint)}&s) |
| プログラム | 起動するプログラムの名前がコードに書いてあり、シェル・インタプリタ・通信用の道具でないか。プログラムを起動しない |
| 読んで送る | ファイルや環境変数を読み、かつ通信するか。通信するが、ファイルも環境変数も読まない |
| ソースの鍵 | ソースに API キーや秘密鍵らしきものがあるか。ソースに鍵なし |
| ライセンス | オープンなライセンス（MIT・Apache-2.0・BSD・ISC・Unlicense・0BSD・CC0）で全文があれば、modscode にコードを載せる。違えばリンクだけ。ライセンスなし |
コードの文面を読んだだけで、安全の審査ではありません。動かしてはおらず、起動するプログラムの中で何が起きるかも見えません。入れる前の確認はあなたの役目です。 載せる条件
入れる
入れる前に、必ず自分で確かめてください。Mod はサンドボックスなしで、あなたの権限で動きます。modscode はこのコードの安全を保証しません。下のコードを読み（またはフォルダーで claude plugin validate .）、触るものを見て、読んだコミットを入れてください。
リポジトリの .claude-plugin/marketplace.json にこの Mod が載っていないため、入れる手順は出せません。コードとして読むか、作者の README に従ってください。
Claude に聞く
modscode のコネクタを入れると、Claude がこのデザイン・コードが触るもの・コードを読んで、それをもとに作れます。たとえば:
modscode のデザイン「manjeetsharma0796-agon」をコードごと読んで、同じようなペインを作って似たデザイン
-
Claude に頼む…Skins0 Your promptadd rate limiting to the hub api0 Tool rows: finished, running, failedYour prompt Spinner0 Folded group of reads and searches●main · note 3 · note 3 · note 30 Edit diff cardDesktop only; the terminal keeps Claude Code's diff.0 Shell output cardDesktop only.0 Code block cardDesktop only; the terminal keeps Claude Code's markdown.0 TableAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentCopyAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentCopyAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentCopy0 SpinnerAccent SpinnerSpinnerSpinner… 2h 10m0 Band above the prompt: normal, then nudging to compact█████░░░ 42% build█████░░░ 42% build█████░░░ 42% buildContext is 42% full0 Compact now0 Band above a questionTable BashBashBash0 Turn footer (terminal)3 build in 2h 10m · Grep · +3 −3
-
Claude に頼む…蹦一蹦Claude needs youBack to ClaudeClick, hold SpaceContextShortcutShortcutShortcutSlow network, still loading…3 Skills33 Skills33 Skills3SkillsLeave leaderboardok. Showing the last resultsRetry3♪
-
Claude に頼む…Model routerLast reply: Fix login → a1b2c3dKept off Opus to save the cache. Start a prompt with @Opus to force it.OnOffRoutes model and effort for each kind of prompt0 Fix loginbuildbuildbuildbuildbuildbuild0 Fix loginbuildbuildbuildbuildbuildbuild0 Fix loginbuildbuildbuildbuildbuildbuildYour rules checked firstNo rules yet. Pick a model and effort, type the words, press Add rule.Tasksa1b2c3d✕Tasksa1b2c3d✕Tasksa1b2c3d✕words, for example landing page, redesign Add rulebuildbuildbuildbuildbuildbuildOptions CoolingWhen still broken after xhigh, move tobuildbuildbuildCache saver: skip one-off model switches in long chatsbuildbuildbuildOne prompt only: start it with @opus, @max or @hardReset
-
build hatched! Say hi with /tamabuild grew into a build!Claude に頼む…
-
Claude に頼む…Historyf ◂ expand⚙ settingsFix loginbuildRemindAuto Remind ConcisebuildRemindAuto Remind ConcisebuildRemindAuto Remind Concise$1.24 this session · auto-compact at 3wrap-up 5h Remind · 7d Remind · /compact Learningwrap-up in 2h 10m CancelFix loginauto 2h 10m ■ Stop stotal 2h 10m · think 2h 10m0 · write 2h 10m0 · tools 2h 10m03 out · 12.4 tok/s◌ build 2h 10m◌ build 2h 10m◌ build 2h 10mFix login● 2h 10m · think 2h 10m · Explanatory tok/s · 3 tools · stopped● 2h 10m · think 2h 10m · Explanatory tok/s · 3 tools · stopped● 2h 10m · think 2h 10m · Explanatory tok/s · 3 tools · stoppedFix loginbuild 3 · Remind%build 3 · Remind%build 3 · Remind%
-
Claude に頼む…Prayer timesOct 6Next prayer‹Today›⋯buildnowin 2h 10m2h 10m✓Sunrise 14:32buildnowin 2h 10m2h 10m✓Sunrise 14:32buildnowin 2h 10m2h 10m✓Sunrise 14:32