agent-ui
A /workers pane of this session's child runs with a live tail, and the session's pinned asks above the prompt with their context on click; a right-click drops an ask.
確かめやすいコードターミナル＋デスクトップペインバンドBoxButtonClientLinkMarkdownText
何をするか
- 欄・プロンプトの上の帯を描く
- /workers を足す
- session.start・ui.messageにフックする
- プロセスを起こす
良いところ
- ネットワークに出ない
- TypeScript で書かれている
- デスクトップ専用の分岐がある
- エラーを扱う
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形（register.tsx）
register.tsx
import type { Register } from 'claude-code'
// Drawn like agent-ui by Nut S. (pane, band), as modscode read it from the mod's code:
// https://modscode.com/gallery/znut-agent-ui/
// 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: "Workers" })
on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
const { Box, Button, Text, Link, Markdown } = $.ui.resolve(e)
const sha = '…'
const state = '…'
const running = '…'
const queued = '…'
const top = '…'
const bottom = '…'
const map = '…'
const map2 = '…'
const map3 = '…'
const map4 = '…'
const map5 = '…'
const map6 = '…'
const map7 = '…'
const map8 = '…'
const map9 = '…'
const one = '…'
const length = '…'
const title = '…'
const summary = '…'
const error = '…'
const label = '…'
const text = '…'
const text2 = '…'
const text3 = '…'
const text4 = '…'
const text5 = '…'
const text6 = '…'
const text7 = '…'
const text8 = '…'
const text9 = '…'
const text10 = '…'
const text11 = '…'
const text12 = '…'
const summary2 = '…'
const error2 = '…'
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 summary3 = '…'
const error3 = '…'
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 href = '…'
const number = '…'
const result = '…'
const n = '…'
const get = '…'
const MARK = '…'
const kind = '…'
const model = '…'
const duration = '…'
const status = '…'
const line = '…'
const line2 = '…'
const line3 = '…'
const lastMessage = '…'
const head = '…'
const name = '…'
const nums = '…'
const name2 = '…'
const nums2 = '…'
const name3 = '…'
const nums3 = '…'
const head2 = '…'
const name4 = '…'
const nums4 = '…'
const name5 = '…'
const nums5 = '…'
const name6 = '…'
const nums6 = '…'
const head3 = '…'
const name7 = '…'
const nums7 = '…'
const name8 = '…'
const nums8 = '…'
const name9 = '…'
const nums9 = '…'
const line4 = '…'
const line5 = '…'
const line6 = '…'
const line7 = '…'
const line8 = '…'
const line9 = '…'
const line10 = '…'
const line11 = '…'
const line12 = '…'
const line13 = '…'
const line14 = '…'
const line15 = '…'
const line16 = '…'
const line17 = '…'
const line18 = '…'
const line19 = '…'
const line20 = '…'
const line21 = '…'
const line22 = '…'
const line23 = '…'
const line24 = '…'
const line25 = '…'
const line26 = '…'
const line27 = '…'
const line28 = '…'
const line29 = '…'
const line30 = '…'
return (
<Box flexDirection="column">
<Box flexDirection="row">
<Button plain dimColor label={`▾ main ${sha} · `} />
<Text>
{state}
</Text>
<Text dimColor>
{" · preview "}
</Text>
<Text color="green">
{running}
</Text>
<Text dimColor>
/
</Text>
<Text color="red">
{queued}
</Text>
</Box>
<Box flexDirection="column">
<Box flexDirection="row" height={6}>
<Box width={6} height={6} flexDirection="column" justifyContent="space-between">
<Text dimColor>
{top}
</Text>
<Text dimColor>
{bottom}
</Text>
</Box>
<Box width={2} height={6} flexDirection="column">
<Text>
{map}
</Text>
<Text>
{map2}
</Text>
<Text>
{map3}
</Text>
</Box>
<Box width={2} height={6} flexDirection="column">
<Text>
{map4}
</Text>
<Text>
{map5}
</Text>
<Text>
{map6}
</Text>
</Box>
<Box width={2} height={6} flexDirection="column">
<Text>
{map7}
</Text>
<Text>
{map8}
</Text>
<Text>
{map9}
</Text>
</Box>
</Box>
<Box flexDirection="row">
<Box flexDirection="row">
<Text dimColor>
{" · "}
</Text>
<Button plain label={`${one}`} />
</Box>
<Box flexDirection="row">
<Text dimColor>
{" · "}
</Text>
<Button plain label={`${one}`} />
</Box>
<Box flexDirection="row">
<Text dimColor>
{" · "}
</Text>
<Button plain label={`${one}`} />
</Box>
</Box>
<Text dimColor>
{`last ${length} runs · line = load · red = retry`}
</Text>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Button plain label={`▾ ${title}`} />
<Text dimColor>
{summary}
</Text>
</Box>
<Box marginLeft={2}>
<Text dimColor>
{error}
</Text>
</Box>
<Box flexDirection="column" marginLeft={2}>
<Box flexDirection="row">
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
</Box>
<Box flexDirection="row">
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
</Box>
<Box flexDirection="row">
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
</Box>
<Box flexDirection="row">
<Text>
{text}
</Text>
<Text>
{text2}
</Text>
<Text>
{text3}
</Text>
</Box>
<Box>
<Text dimColor>
no data
</Text>
</Box>
<Box flexDirection="row">
<Text>
{text4}
</Text>
<Text>
{text5}
</Text>
<Text>
{text6}
</Text>
</Box>
<Box flexDirection="row">
<Text>
{text7}
</Text>
<Text>
{text8}
</Text>
<Text>
{text9}
</Text>
</Box>
<Box flexDirection="row">
<Text>
{text10}
</Text>
<Text>
{text11}
</Text>
<Text>
{text12}
</Text>
</Box>
<Text dimColor />
</Box>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Button plain label={`▾ ${title}`} />
<Text dimColor>
{summary2}
</Text>
</Box>
<Box marginLeft={2}>
<Text dimColor>
{error2}
</Text>
</Box>
<Box flexDirection="column" marginLeft={2}>
<Box flexDirection="row">
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
</Box>
<Box flexDirection="row">
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
</Box>
<Box flexDirection="row">
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
</Box>
<Box flexDirection="row">
<Text>
{text13}
</Text>
<Text>
{text14}
</Text>
<Text>
{text15}
</Text>
</Box>
<Box>
<Text dimColor>
no data
</Text>
</Box>
<Box flexDirection="row">
<Text>
{text16}
</Text>
<Text>
{text17}
</Text>
<Text>
{text18}
</Text>
</Box>
<Box flexDirection="row">
<Text>
{text19}
</Text>
<Text>
{text20}
</Text>
<Text>
{text21}
</Text>
</Box>
<Box flexDirection="row">
<Text>
{text22}
</Text>
<Text>
{text23}
</Text>
<Text>
{text24}
</Text>
</Box>
<Text dimColor />
</Box>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Button plain label={`▾ ${title}`} />
<Text dimColor>
{summary3}
</Text>
</Box>
<Box marginLeft={2}>
<Text dimColor>
{error3}
</Text>
</Box>
<Box flexDirection="column" marginLeft={2}>
<Box flexDirection="row">
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
</Box>
<Box flexDirection="row">
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
</Box>
<Box flexDirection="row">
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
<Box flexDirection="row">
<Text>
{" "}
</Text>
<Button plain label={`${label}`} />
</Box>
</Box>
<Box flexDirection="row">
<Text>
{text25}
</Text>
<Text>
{text26}
</Text>
<Text>
{text27}
</Text>
</Box>
<Box>
<Text dimColor>
no data
</Text>
</Box>
<Box flexDirection="row">
<Text>
{text28}
</Text>
<Text>
{text29}
</Text>
<Text>
{text30}
</Text>
</Box>
<Box flexDirection="row">
<Text>
{text31}
</Text>
<Text>
{text32}
</Text>
<Text>
{text33}
</Text>
</Box>
<Box flexDirection="row">
<Text>
{text34}
</Text>
<Text>
{text35}
</Text>
<Text>
{text36}
</Text>
</Box>
<Text dimColor />
</Box>
</Box>
<Box flexDirection="column" marginBottom={1}>
<Text bold>
Needs you
</Text>
<Box>
<Text color="#CBA6F7">
<Link href={`${href}`} label={`#${number}`} />
</Text>
<Text>
{` ${title} ${result} ⚡ conflict`}
</Text>
</Box>
<Box>
<Text color="#CBA6F7">
<Link href={`${href}`} label={`#${number}`} />
</Text>
<Text>
{` ${title} ${result} ⚡ conflict`}
</Text>
</Box>
<Box>
<Text color="#CBA6F7">
<Link href={`${href}`} label={`#${number}`} />
</Text>
<Text>
{` ${title} ${result} ⚡ conflict`}
</Text>
</Box>
</Box>
<Box flexDirection="column" marginBottom={1}>
<Box flexDirection="row">
<Box flexDirection="row">
<Text dimColor>
{" → "}
</Text>
<Text color="green">
<Link href={`${href}`} label={`#${n}`} />
{" ✓"}
</Text>
</Box>
<Box flexDirection="row">
<Text dimColor>
{" → "}
</Text>
<Text color="green">
<Link href={`${href}`} label={`#${n}`} />
{" ✓"}
</Text>
</Box>
<Box flexDirection="row">
<Text dimColor>
{" → "}
</Text>
<Text color="green">
<Link href={`${href}`} label={`#${n}`} />
{" ✓"}
</Text>
</Box>
<Box display="none">
<Text dimColor wrap="truncate-end">
{` ${get}`}
</Text>
</Box>
<Box display="none">
<Text dimColor wrap="truncate-end">
{` ${get}`}
</Text>
</Box>
<Box display="none">
<Text dimColor wrap="truncate-end">
{` ${get}`}
</Text>
</Box>
</Box>
<Box flexDirection="row">
<Box flexDirection="row">
<Text dimColor>
{" → "}
</Text>
<Text color="green">
<Link href={`${href}`} label={`#${n}`} />
{" ✓"}
</Text>
</Box>
<Box flexDirection="row">
<Text dimColor>
{" → "}
</Text>
<Text color="green">
<Link href={`${href}`} label={`#${n}`} />
{" ✓"}
</Text>
</Box>
<Box flexDirection="row">
<Text dimColor>
{" → "}
</Text>
<Text color="green">
<Link href={`${href}`} label={`#${n}`} />
{" ✓"}
</Text>
</Box>
<Box display="none">
<Text dimColor wrap="truncate-end">
{` ${get}`}
</Text>
</Box>
<Box display="none">
<Text dimColor wrap="truncate-end">
{` ${get}`}
</Text>
</Box>
<Box display="none">
<Text dimColor wrap="truncate-end">
{` ${get}`}
</Text>
</Box>
</Box>
<Box flexDirection="row">
<Box flexDirection="row">
<Text dimColor>
{" → "}
</Text>
<Text color="green">
<Link href={`${href}`} label={`#${n}`} />
{" ✓"}
</Text>
</Box>
<Box flexDirection="row">
<Text dimColor>
{" → "}
</Text>
<Text color="green">
<Link href={`${href}`} label={`#${n}`} />
{" ✓"}
</Text>
</Box>
<Box flexDirection="row">
<Text dimColor>
{" → "}
</Text>
<Text color="green">
<Link href={`${href}`} label={`#${n}`} />
{" ✓"}
</Text>
</Box>
<Box display="none">
<Text dimColor wrap="truncate-end">
{` ${get}`}
</Text>
</Box>
<Box display="none">
<Text dimColor wrap="truncate-end">
{` ${get}`}
</Text>
</Box>
<Box display="none">
<Text dimColor wrap="truncate-end">
{` ${get}`}
</Text>
</Box>
</Box>
</Box>
<Text bold>
Workers
</Text>
<Box>
<Text dimColor>
set childrenDir in /config
</Text>
</Box>
<Box flexDirection="row">
<Text dimColor>
{" └ "}
</Text>
<Box>
<Text>
{`${MARK} `}
</Text>
</Box>
<Text>
{" "}
</Text>
<Button plain label={`${kind} ${label} ${model} ${duration} ${status} ▾${length}`} />
</Box>
<Box flexDirection="row">
<Text dimColor>
{" └ "}
</Text>
<Box>
<Text>
{`${MARK} `}
</Text>
</Box>
<Text>
{" "}
</Text>
<Button plain label={`${kind} ${label} ${model} ${duration} ${status} ▾${length}`} />
</Box>
<Box flexDirection="row">
<Text dimColor>
{" └ "}
</Text>
<Box>
<Text>
{`${MARK} `}
</Text>
</Box>
<Text>
{" "}
</Text>
<Button plain label={`${kind} ${label} ${model} ${duration} ${status} ▾${length}`} />
</Box>
<Box flexDirection="column" marginTop={1}>
<Text bold>
{`${label} (${status})`}
</Text>
<Text dimColor>
No output yet.
</Text>
<Text wrap="truncate-end">
{line}
</Text>
<Text wrap="truncate-end">
{line2}
</Text>
<Text wrap="truncate-end">
{line3}
</Text>
<Box flexDirection="column" marginTop={1}>
<Text bold>
last message
</Text>
<Markdown text={`${lastMessage}`} />
</Box>
</Box>
<Box top={2}>
<Box flexDirection="row" flexWrap="nowrap">
<Text color="#e1e1e6" wrap="truncate-end">
{head}
</Text>
</Box>
<Box flexDirection="row" flexWrap="nowrap">
<Text color="#9a9cab" wrap="truncate-end">
{name}
</Text>
<Text color="#9a9cab" wrap="truncate-end">
{nums}
</Text>
</Box>
<Box flexDirection="row" flexWrap="nowrap">
<Text color="#9a9cab" wrap="truncate-end">
{name2}
</Text>
<Text color="#9a9cab" wrap="truncate-end">
{nums2}
</Text>
</Box>
<Box flexDirection="row" flexWrap="nowrap">
<Text color="#9a9cab" wrap="truncate-end">
{name3}
</Text>
<Text color="#9a9cab" wrap="truncate-end">
{nums3}
</Text>
</Box>
</Box>
<Box top={2}>
<Box flexDirection="row" flexWrap="nowrap">
<Text color="#e1e1e6" wrap="truncate-end">
{head2}
</Text>
</Box>
<Box flexDirection="row" flexWrap="nowrap">
<Text color="#9a9cab" wrap="truncate-end">
{name4}
</Text>
<Text color="#9a9cab" wrap="truncate-end">
{nums4}
</Text>
</Box>
<Box flexDirection="row" flexWrap="nowrap">
<Text color="#9a9cab" wrap="truncate-end">
{name5}
</Text>
<Text color="#9a9cab" wrap="truncate-end">
{nums5}
</Text>
</Box>
<Box flexDirection="row" flexWrap="nowrap">
<Text color="#9a9cab" wrap="truncate-end">
{name6}
</Text>
<Text color="#9a9cab" wrap="truncate-end">
{nums6}
</Text>
</Box>
</Box>
<Box top={2}>
<Box flexDirection="row" flexWrap="nowrap">
<Text color="#e1e1e6" wrap="truncate-end">
{head3}
</Text>
</Box>
<Box flexDirection="row" flexWrap="nowrap">
<Text color="#9a9cab" wrap="truncate-end">
{name7}
</Text>
<Text color="#9a9cab" wrap="truncate-end">
{nums7}
</Text>
</Box>
<Box flexDirection="row" flexWrap="nowrap">
<Text color="#9a9cab" wrap="truncate-end">
{name8}
</Text>
<Text color="#9a9cab" wrap="truncate-end">
{nums8}
</Text>
</Box>
<Box flexDirection="row" flexWrap="nowrap">
<Text color="#9a9cab" wrap="truncate-end">
{name9}
</Text>
<Text color="#9a9cab" wrap="truncate-end">
{nums9}
</Text>
</Box>
</Box>
<Box>
<Text color="#e1e1e6">
{line4}
</Text>
<Text color="#e1e1e6">
{line5}
</Text>
<Text color="#e1e1e6">
{line6}
</Text>
</Box>
<Box>
<Text color="#e1e1e6">
{line7}
</Text>
<Text color="#e1e1e6">
{line8}
</Text>
<Text color="#e1e1e6">
{line9}
</Text>
</Box>
<Box>
<Text color="#e1e1e6">
{line10}
</Text>
<Text color="#e1e1e6">
{line11}
</Text>
<Text color="#e1e1e6">
{line12}
</Text>
</Box>
<Box>
<Text color="#e1e1e6">
{line13}
</Text>
<Text color="#e1e1e6">
{line14}
</Text>
<Text color="#e1e1e6">
{line15}
</Text>
</Box>
<Box>
<Text color="#e1e1e6">
{line16}
</Text>
<Text color="#e1e1e6">
{line17}
</Text>
<Text color="#e1e1e6">
{line18}
</Text>
</Box>
<Box>
<Text color="#e1e1e6">
{line19}
</Text>
<Text color="#e1e1e6">
{line20}
</Text>
<Text color="#e1e1e6">
{line21}
</Text>
</Box>
<Box>
<Text color="#e1e1e6">
{line22}
</Text>
<Text color="#e1e1e6">
{line23}
</Text>
<Text color="#e1e1e6">
{line24}
</Text>
</Box>
<Box>
<Text color="#e1e1e6">
{line25}
</Text>
<Text color="#e1e1e6">
{line26}
</Text>
<Text color="#e1e1e6">
{line27}
</Text>
</Box>
<Box>
<Text color="#e1e1e6">
{line28}
</Text>
<Text color="#e1e1e6">
{line29}
</Text>
<Text color="#e1e1e6">
{line30}
</Text>
</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, Client, Text, Link } = $.ui.resolve(e)
const issueHref = '…'
const issue = '…'
const trailingHref = '…'
const linkLabel = '…'
return (
<Box flexDirection="column">
<Box flexDirection="column">
<Box flexDirection="row">
<Client module="./ask-line.tsx" />
<Text>
{" "}
</Text>
<Text color="#CBA6F7">
<Link href={`${issueHref}`} label={`#${issue}`} />
</Text>
<Text color="#CBA6F7" underline>
<Link href={`${trailingHref}`} label={`${linkLabel}`} />
</Text>
</Box>
<Box flexDirection="column" marginLeft={2} />
</Box>
{await next(e)}
</Box>
)
})
}
Mod 自身のコード
読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。
コードが呼ぶもの
プログラム起動ファイル読み取り環境変数Claude を動かす
コードから読み取ったデザイン
Claude に頼む…
Workerslast 3 runs · line = load · red = retryWorkers
▾ main a1b2c3d · ok · preview Workers/Workers
DoneWorkers
DoneDoneDone
DoneDoneDone
DoneDoneDone
· Workers
· Workers
· Workers
▾ Fix loginNeeds you
Needs you
build
build
build
build
build
build
build
build
build
DoneDoneDone
no data
DoneDoneDone
DoneDoneDone
DoneDoneDone
▾ Fix loginNeeds you
Needs you
build
build
build
build
build
build
build
build
build
DoneDoneDone
no data
DoneDoneDone
DoneDoneDone
DoneDoneDone
▾ Fix loginNeeds you
Needs you
build
build
build
build
build
build
build
build
build
DoneDoneDone
no data
DoneDoneDone
DoneDoneDone
DoneDoneDone
Needs you
#3 Fix login ok ⚡ conflict
#3 Fix login ok ⚡ conflict
#3 Fix login ok ⚡ conflict
→ #3 ✓
→ #3 ✓
→ #3 ✓
Needs you
Needs you
Needs you
→ #3 ✓
→ #3 ✓
→ #3 ✓
Needs you
Needs you
Needs you
→ #3 ✓
→ #3 ✓
→ #3 ✓
Needs you
Needs you
Needs you
set childrenDir in /config
└
●
note build Opus 2h 10m ok ▾3 └
●
note build Opus 2h 10m ok ▾3 └
●
note build Opus 2h 10m ok ▾3build (ok)No output yet.WorkersWorkersWorkers
last message
Done
main
buildWorkers
buildWorkers
buildWorkers
main
buildWorkers
buildWorkers
buildWorkers
main
buildWorkers
buildWorkers
buildWorkers
WorkersWorkersWorkers
WorkersWorkersWorkers
WorkersWorkersWorkers
WorkersWorkersWorkers
WorkersWorkersWorkers
WorkersWorkersWorkers
WorkersWorkersWorkers
WorkersWorkersWorkers
WorkersWorkersWorkers
読み取ったコミットのソースから描いたもので、動かした結果ではありません。一覧は 3 回描き、条件はデスクトップアプリで描く最初の分岐を取り、動かしたときにだけ決まる値は仮の例（点線の下線）にするか省きます。色と書体はこのサイトのものです。
コードから読めること
2026-10-06 に読んだコミット 8edd080389e5 のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。plugins/agent-ui/hooks/register.tsx |
| 解析できる | すべてのファイルが TypeScript か JavaScript として解析できる。6 ファイルを解析 |
| コードが 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/… などは無い）。plugins/agent-ui/hooks/register.tsx:119 tail（Windows にない）; plugins/agent-ui/hooks/register.tsx:213 ps（Windows にない） |
| 通信 | fetch の送り先（https のホスト）がコードに書いてあるか。通信なし |
| プログラム | 起動するプログラムの名前がコードに書いてあり、シェル・インタプリタ・通信用の道具でないか。plugins/agent-ui/hooks/register.tsx:455 実行時に決まるプログラム; plugins/agent-ui/hooks/register.tsx:777 perl（シェル・インタプリタ） |
| 読んで送る | ファイルや環境変数を読み、かつ通信するか。通信しない |
| ソースの鍵 | ソースに 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 のデザイン「znut-agent-ui」をコードごと読んで、同じようなペインを作って似たデザイン
-
Claude に頼む…Mod controlsLive Claude ModCount: 0 / Initial / oneAdd oneName InitialOne**Markdown** with a [link](https://example.com)
const count = 1;
./counter.tsxFill composerAppend noteSuggest draftCopy text -
Claude に頼む…────────Clear doneClaude⋯└─ buildCancelCancelCancel└─ buildCancelCancelCancel└─ buildCancelCancelCancel
-
何をするか
- 欄・プロンプトの上の帯を描く
- /lingo を足す
- prompt.edit・prompt.submit・session.startにフックする
- ターンをまたいで自分の状態を持つ
-
Claude に頼む…GitHub inboxGitHubloading…Refresh rbuildbuildbuildClose xStealth IssuesNo open issues in this view.#3 Fix login · Pinned notice · 2h 10m · Top row commentsWork on itopen#3 Fix login · Pinned notice · 2h 10m · Top row commentsWork on itopen#3 Fix login · Pinned notice · 2h 10m · Top row commentsWork on itopenPull requestsNo open pull requests.#3 Fix login · main · draft · build · HiddenChecksReviewopen#3 Fix login · main · draft · build · HiddenChecksReviewopen#3 Fix login · main · draft · build · HiddenChecksReviewopenChecks for #3Plain
-
Claude に頼む…ReviewPR #3 Fix loginbranche couranteà traiter ▸3 ▸3 ▸3 · en relecture ▸3 ▸3 ▸3▸◉3 a1b2c3d ↩ répondu obsolète → Claude Review▸◉3 a1b2c3d ↩ répondu obsolète → Claude Review▸◉3 a1b2c3d ↩ répondu obsolète → Claude Review────────fil 31/3 Review ↗ GitHub
Review@alexReview@alexReview@alexReviewRéponse : Review publierEntrée publie · Esc annule la réponse · les touches n, p… tapent dans le champ… ReviewLe panneau n'a pas le clavier : ctrl+x tab ou un clic, et les touches marchent.p préc. n suiv. t PR suiv. x démarquer a tout démarquer f corriger (3) r répondre v résoudre o web q fermer -
Claude に頼む…✨ đang viết lại câu lệnh…Phiên làm việcWrite build Write build Write buildTIMELINE ────────▆▆▆■ build ■ build ■ buildHOẠT ĐỘNG ────────GrepGrepGrepbuildbây giờTOOL ────────Chưa có tool call nào.Read buildGrepSpinner3Read buildGrepSpinner3Read buildGrepSpinner3CHANGES ────────Không có thay đổi.ok src/app.ts−3+3ok src/app.ts−3+3ok src/app.ts−3+3… 3 file nữa▐ReadReadRead▌ main