cache-bar（TheTsungYing）: Claude Code Mod のコードと画面

何をするか

プロンプトの上の帯・欄・トーストを描く
prompt.context・prompt.section・session.compact・session.end ほか 5 個にフックする
ターンをまたいで自分の状態を持つ

良いところ

ネットワークに出ない
プロセスを起こさない
TypeScript で書かれている
デスクトップ専用の分岐がある

作り始めるためのコード

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

雛形（register.tsx）

import type { Register } from 'claude-code'

// Drawn like cache-bar by TsungYing (pane, band, status, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/thetsungying-cache-bar/
// 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, Svg, Text, Button } = $.ui.resolve(e)
    const broke = '…'
    const rewriteNext = '…'
    const context = '…'
    const sparklineSvg = '…'
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" alignItems="center" gap={1}>
          <Svg alt="cache TTL countdown" source="" width={16} height={16} />
          <Text dimColor>
            …
          </Text>
          <Text dimColor>
            extending…
          </Text>
          <Button plain dimColor label="Details" />
          <Box flexDirection="row" gap={1}>
            <Text color="error">
              ⚠
            </Text>
            <Box display="none">
              <Text color="error">
                {`${broke}`}
              </Text>
            </Box>
          </Box>
          <Box display="none" flexDirection="row" alignItems="center" gap={1}>
            <Text dimColor>
              expired
              {" · "}
              {`${rewriteNext}`}
            </Text>
            <Text>
              <Text dimColor>
                hit
                {" "}
              </Text>
              0
            </Text>
            <Text>
              <Text dimColor>
                ctx
                {" "}
              </Text>
              {context}
            </Text>
            <Svg alt="hit rate per request" source={`${sparklineSvg}`} width={72} height={16} />
          </Box>
        </Box>
        {await next(e)}
      </Box>
    )
  })

  // the pane: open it with $.ui.open({ id: 'my-pane', title: "Prompt cache" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Svg, Text, Select } = $.ui.resolve(e)
    const rewriteNext = '…'
    const ttl = '…'
    const context = '…'
    const requests = '…'
    const breaks = '…'
    const extensions = '…'
    const formatTokens = '…'
    const source = '…'
    const breakLine = '…'
    const formatCauses = '…'
    const formatCauses2 = '…'
    const formatCauses3 = '…'
    const breakSensitivity = '…'
    const idleAt = '…'
    const trigger = '…'
    const extensionFailed = '…'
    const trigger2 = '…'
    const trigger3 = '…'
    const onExpiring = '…'
    const autoExtendMaxPerIdle = '…'
    const toast = '…'
    const ttlMode = '…'
    const ttlNote = '…'
    const band = '…'
    const language = '…'
    return (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="row" alignItems="center" gap={2}>
          <Svg alt="cache TTL countdown" source="" width={48} height={48} />
          <Box flexDirection="column">
            <Text dimColor>
              expired
              {" · "}
              {`${rewriteNext}`}
            </Text>
            <Text dimColor>
              {"TTL "}
              {ttl}
              {" · "}
              last hit
              {" "}
              0
              {" · "}
              ctx
              {" "}
              {context}
            </Text>
          </Box>
          <Text dimColor>
            extending…
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text bold>
            This conversation
          </Text>
          <Text>
            <Text>
              <Text dimColor>
                avg hit
                {" "}
              </Text>
              –
            </Text>
            {" ·"}
            {" "}
            <Text>
              <Text dimColor>
                req
                {" "}
              </Text>
              {requests}
            </Text>
            {" · "}
            <Text>
              <Text dimColor>
                breaks
                {" "}
              </Text>
              {breaks}
            </Text>
            {" ·"}
            {" "}
            <Text>
              <Text dimColor>
                extended
                {" "}
              </Text>
              {extensions}
            </Text>
            {" ·"}
            {" "}
            <Text>
              <Text dimColor>
                peak ctx
                {" "}
              </Text>
              {formatTokens}
            </Text>
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text bold>
            Per request · token cost
          </Text>
          <Svg alt="cost of each request in uncached-token equivalents, with its hit rate and idle gaps" source={`${source}`} isInteractive />
          <Box flexDirection="row" columnGap={2} rowGap={0} flexWrap="wrap">
            <Text>
              <Text>
                ■
              </Text>
              <Text dimColor>
                {" "}
                read ×0.1
              </Text>
            </Text>
            <Text>
              <Text>
                ■
              </Text>
              <Text dimColor>
                {" "}
                write
              </Text>
            </Text>
            <Text>
              <Text>
                □
              </Text>
              <Text dimColor>
                {" "}
                miss
              </Text>
            </Text>
            <Text>
              <Text color="#8F8B83">
                ▬
              </Text>
              <Text color="#E0B04A">
                ▬
              </Text>
              <Text color="#D97757">
                ▬
              </Text>
              <Text dimColor>
                {" "}
                hit rate
              </Text>
            </Text>
          </Box>
          <Box flexDirection="row" columnGap={2} rowGap={0} flexWrap="wrap">
            <Text>
              <Text>
                ▬
              </Text>
              <Text dimColor>
                {" "}
                break
              </Text>
            </Text>
            <Text>
              <Text>
                ┊
              </Text>
              <Text dimColor>
                {" "}
                idle near expiry
              </Text>
            </Text>
            <Text>
              <Text>
                ▲
              </Text>
              <Text dimColor>
                {" "}
                extended
              </Text>
            </Text>
          </Box>
        </Box>
        <Box flexDirection="column" gap={1}>
          <Box flexDirection="column">
            <Text bold>
              Cache breaks
            </Text>
            <Text dimColor>
              none
            </Text>
            <Box flexDirection="column">
              <Text>
                <Text color="error">
                  {"● "}
                </Text>
                {`${breakLine}`}
              </Text>
              <Text dimColor>
                {" "}
                {formatCauses}
              </Text>
            </Box>
            <Box flexDirection="column">
              <Text>
                <Text color="error">
                  {"● "}
                </Text>
                {`${breakLine}`}
              </Text>
              <Text dimColor>
                {" "}
                {formatCauses2}
              </Text>
            </Box>
            <Box flexDirection="column">
              <Text>
                <Text color="error">
                  {"● "}
                </Text>
                {`${breakLine}`}
              </Text>
              <Text dimColor>
                {" "}
                {formatCauses3}
              </Text>
            </Box>
            <Box marginTop={1}>
              <Box flexDirection="column">
                <Text dimColor>
                  Break sensitivity
                </Text>
                <Select value={`${breakSensitivity}`} />
                <Text dimColor>
                  Higher counts smaller drops as breaks; applies from the next request
                </Text>
              </Box>
            </Box>
          </Box>
          <Box flexDirection="column">
            <Text bold>
              Extensions
            </Text>
            <Text dimColor>
              none
            </Text>
            <Text>
              <Text dimColor>
                {`${idleAt}`}
                {" · "}
              </Text>
              {trigger}
              {" ·"}
              {" "}
              <Text color="error">
                {`${extensionFailed}`}
              </Text>
            </Text>
            <Text>
              <Text dimColor>
                {`${idleAt}`}
                {" · "}
              </Text>
              {trigger2}
              {" ·"}
              {" "}
              <Text color="error">
                {`${extensionFailed}`}
              </Text>
            </Text>
            <Text>
              <Text dimColor>
                {`${idleAt}`}
                {" · "}
              </Text>
              {trigger3}
              {" ·"}
              {" "}
              <Text color="error">
                {`${extensionFailed}`}
              </Text>
            </Text>
          </Box>
        </Box>
        <Box flexDirection="column">
          <Text bold>
            Settings
          </Text>
          <Box flexDirection="column" gap={1}>
            <Box flexDirection="column">
              <Text dimColor>
                When about to expire
              </Text>
              <Select value={`${onExpiring}`} />
            </Box>
            <Box flexDirection="column">
              <Text dimColor>
                Auto-extend per idle stretch
              </Text>
              <Select value={`${autoExtendMaxPerIdle}`} />
            </Box>
            <Box flexDirection="column">
              <Text dimColor>
                Toast notifications
              </Text>
              <Select value={`${toast}`} />
            </Box>
            <Box flexDirection="column">
              <Text dimColor>
                Cache TTL
              </Text>
              <Select value={`${ttlMode}`} />
              <Text dimColor>
                {ttlNote}
              </Text>
            </Box>
            <Box flexDirection="column">
              <Text dimColor>
                Band above the prompt
              </Text>
              <Select value={`${band}`} />
            </Box>
            <Box flexDirection="column">
              <Text dimColor>
                Break sensitivity
              </Text>
              <Select value={`${breakSensitivity}`} />
              <Text dimColor>
                Higher counts smaller drops as breaks; applies from the next request
              </Text>
            </Box>
            <Box flexDirection="column">
              <Text dimColor>
                Language
              </Text>
              <Select value={`${language}`} />
            </Box>
          </Box>
        </Box>
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const bandTurnedOff = '…'
    const notice = '…'
    const hint = '…'
    const panel = '…'
    await $.ui.toast(`${bandTurnedOff}`)
    await $.ui.toast(`${notice} · ${hint}${panel}`)
    return next(e)
  })
}

Mod 自身のコード

Mod のライセンス（MIT）に従って載せています。全文は下にあります。写すときは著作権表示を残してください。

plugins/cache-bar/hooks/register.tsx 487〜617 行 · バンド

plugins/cache-bar/hooks/register.tsx:487

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.surface !== 'desktop' || e.props.hasSurvey) {
      return next(e)
    }

    // Set even when the band is off: the desktop keeps no status line then.
    hasBand = true
    // Redraw on the stage, not every second: the ring and the clock count down
    // by SMIL, and a per-second redraw of the band resets an open Select's
    // highlight in the panel too.
    await read($, stage)
    applyPicks(await read($, overrides))

    if (config.band === 'off') {
      return next(e)
    }

    const { Box, Text, Button, Svg } = $.ui.resolve(e)
    const now = await $.clock.now()
    const list = await read($, samples)
    const last = list.at(-1)
    const s = strings
    const details = (
      <Button
        key="details"
        plain
        dimColor
        label={s.details}
        onPress={() => {
          forgetPaneDrawings()
          void $.ui.open({ id: PANE, title: s.paneTitle })
        }}
      />
    )

    if (last === undefined) {
      return (
        <Box key="band" flexDirection="row" alignItems="center" gap={1}>
          <Svg key="ring" alt={s.ringAlt} source={idleRingSvg()} width={RING_SIZE} height={RING_SIZE} />
          {details}
          <Box display="none" hover={{ display: 'flex' }}>
            <Text dimColor>{s.waiting}</Text>
          </Box>
        </Box>
      )
    }

    const breakList = await read($, breaks)
    const countdown = countdownOf(list, await read($, extensions), config.ttlMode, await read($, ttl), config, now)
    const isExtending = await read($, extending)

    if (countdown === null) {
      return next(e)
    }

    const context = formatTokens(contextOf(last))
    const isAnswering = e.props.isWorking
    const ringKey = isAnswering ? 'working' : `${countdown.anchor}|${countdown.ttl}|${countdown.phase}`

    if (ring.key !== ringKey) {
      ring = { key: ringKey, source: isAnswering ? pausedRingSvg() : ringSvg(countdown) }
    }

    const lastBreak = breakList.at(-1)
    const didBreak = lastBreak !== undefined && lastBreak.at === last.sentAt
    const isExpired = !isAnswering && countdown.phase === 'expired'
    const canExtend = !isAnswering && countdown.phase === 'alert' && config.onExpiring !== 'notify'
    const clockColor =
      countdown.phase === 'warn' ? COLORS.warn : countdown.phase === 'alert' ? COLORS.alert : COLORS.neutral

    if (smallClock.key !== ringKey) {
      smallClock = { key: ringKey, ...clockSvg(countdown.leftMs, clockColor, CLOCK_SIZE) }
    }

    return (
      <Box key="band" flexDirection="row" alignItems="center" gap={1}>
        <Svg key="ring" alt={s.ringAlt} source={ring.source} width={RING_SIZE} height={RING_SIZE} />
        {/* Answering: the countdown waits, since each request refreshes the cache. */}
        {isAnswering ? (
          <Text dimColor>…</Text>
        ) : isExpired ? null : (
          <Svg
            key="clock"
            alt={formatClock(countdown.leftMs)}
            source={smallClock.source}
            width={smallClock.width}
            height={smallClock.height}
          />
        )}
        {isExtending ? (
          <Text dimColor>{s.extending}</Text>
        ) : canExtend ? (
          <Button key="extend" variant="primary" label={s.extendShort} onPress={() => void extendNow?.('manual')} />
        ) : null}
        {details}
        {didBreak ? (
          <Box key="break" flexDirection="row" gap={1}>
            <Text color={TEXT_ALERT}>⚠</Text>
            <Box display="none" hover={{ display: 'flex' }}>
              <Text color={TEXT_ALERT}>{s.broke(formatCauses(lastBreak.causes, s))}</Text>
            </Box>
          </Box>
        ) : null}
        {/* Shown while the pointer is over the band; after the buttons, so it never moves them. */}
        <Box display="none" hover={{ display: 'flex' }} flexDirection="row" alignItems="center" gap={1}>
          {isExpired ? (
            <Text dimColor>
              {s.expired} · {s.rewriteNext(context)}
            </Text>
          ) : null}
          <Text>
            <Text dimColor>{s.hit} </Text>
            {formatPercent(hitRateOf(last))}
          </Text>
          <Text>
            <Text dimColor>{s.context} </Text>
            {context}
          </Text>
          {list.length > 1 ? (
            <Svg
              key="spark"
              alt={s.sparkAlt}
              source={sparklineSvg(recentHits(list, breakList, SPARK_POINTS))}
              width={SPARK_WIDTH}
              height={SPARK_HEIGHT}
            />
          ) : null}
        </Box>
      </Box>
    )
  })

plugins/cache-bar/hooks/register.tsx 630〜789 行 · ペイン

plugins/cache-bar/hooks/register.tsx:630

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Text, Button } = ui
    const Svg = 'Svg' in ui ? ui.Svg : null
    const Select = 'Select' in ui ? ui.Select : null
    // Redraw on the stage, not every second: the ring and clock count down by
    // SMIL. Without Svg (the terminal) the clock is text, so it reads `now`.
    await read($, stage)
    applyPicks(await read($, overrides))
    const s = strings

    if (Svg === null) {
      await read($, clock)
    }

    const now = await $.clock.now()
    const list = await read($, samples)
    const breakList = await read($, breaks)
    const extensionList = await read($, extensions)
    const learned = await read($, ttl)
    const isExtending = await read($, extending)
    const last = list.at(-1)
    const countdown = countdownOf(list, extensionList, config.ttlMode, learned, config, now)

    const setOption = async (field: QuickSetting, value: string) => {
      const failed = await pickOption?.(field, value)

      if (failed !== null && failed !== undefined) {
        $.ui.toast(failed)
      }
    }

    // How the TTL was settled; it explains the TTL setting, so it sits there.
    const ttlNote =
      config.ttlMode !== 'auto'
        ? null
        : learned.detected === '1h' && learned.idleMs !== null
          ? s.ttlLearned('1h', Math.floor(learned.idleMs / 60_000))
          : s.ttlAssumed
    const title = (text: string) => <Text bold>{text}</Text>
    const stat = (label: string, value: string) => (
      <Text>
        <Text dimColor>{label} </Text>
        {value}
      </Text>
    )

    const toastName = (isOn: boolean) => (isOn ? s.toastOptions.on : s.toastOptions.off)
    const sensitivitySelect =
      Select === null ? null : (
        <Box flexDirection="column">
          <Text dimColor>{s.breakSensitivityLabel}</Text>
          <Select
            key="breakSensitivity"
            value={config.breakSensitivity}
            options={SENSITIVITIES.map(v => ({ value: v, label: s.breakSensitivityOptions[v] }))}
            onSelect={value => void setOption('breakSensitivity', value)}
          />
          <Text dimColor>{s.breakSensitivityNote}</Text>
        </Box>
      )

    const settings = (withSensitivity: boolean) => (
      <Box flexDirection="column">
        {title(s.settingsTitle)}
        {Select === null ? (
          <Text dimColor>
            {s.onExpiringLabel}: {s.onExpiringOptions[config.onExpiring]}
            {config.onExpiring === 'auto' ? ` (${s.autoExtendTimes(config.autoExtendMaxPerIdle)})` : ''} ·{' '}
            {s.toastLabel}: {toastName(config.toast)} · {s.ttlModeLabel}: {s.ttlModeOptions[config.ttlMode]} ·{' '}
            {s.bandLabel}: {s.bandOptions[config.band]} · {s.breakSensitivityLabel}:{' '}
            {s.breakSensitivityOptions[config.breakSensitivity]} · {s.languageLabel}: {LANGUAGE_NAMES[config.language]}
            {ttlNote === null ? '' : `\n${ttlNote}`}
          </Text>
        ) : (
          <Box flexDirection="column" gap={1}>
            <Box flexDirection="column">
              <Text dimColor>{s.onExpiringLabel}</Text>
              <Select
                key="onExpiring"
                value={config.onExpiring}
                options={(['notify', 'button', 'auto'] as const).map(v => ({ value: v, label: s.onExpiringOptions[v] }))}
                onSelect={value => void setOption('onExpiring', value)}
              />
            </Box>
            {/* Only automatic extension has a limit to set. */}
            {config.onExpiring === 'auto' ? (
              <Box flexDirection="column">
                <Text dimColor>{s.autoExtendMaxLabel}</Text>
                <Select
                  key="autoExtendMaxPerIdle"
                  value={String(config.autoExtendMaxPerIdle)}
                  options={autoExtendSteps(config.autoExtendMaxPerIdle).map(n => ({
                    value: String(n),
                    label: s.autoExtendTimes(n),
                  }))}
                  onSelect={value => void setOption('autoExtendMaxPerIdle', value)}
                />
              </Box>
            ) : null}
            <Box flexDirection="column">
              <Text dimColor>{s.toastLabel}</Text>
              <Select
                key="toast"
                value={String(config.toast)}
                options={[true, false].map(v => ({ value: String(v), label: toastName(v) }))}
                onSelect={value => void setOption('toast', value)}
              />
            </Box>
            <Box flexDirection="column">
              <Text dimColor>{s.ttlModeLabel}</Text>
              <Select
                key="ttlMode"
                value={config.ttlMode}
                options={(['auto', '5m', '1h'] as const).map(v => ({ value: v, label: s.ttlModeOptions[v] }))}
                onSelect={value => void setOption('ttlMode', value)}
              />
              {ttlNote === null ? null : <Text dimColor>{ttlNote}</Text>}
            </Box>
            <Box flexDirection="column">
              <Text dimColor>{s.bandLabel}</Text>
              <Select
                key="band"
                value={config.band}
                options={(['compact', 'off'] as const).map(v => ({ value: v, label: s.bandOptions[v] }))}
                onSelect={value => void setOption('band', value)}
              />
            </Box>
            {withSensitivity ? sensitivitySelect : null}
            <Box flexDirection="column">
              <Text dimColor>{s.languageLabel}</Text>
              <Select
                key="language"
                value={config.language}
                options={LANGUAGES.map(v => ({ value: v, label: LANGUAGE_NAMES[v] }))}
                onSelect={value => void setOption('language', value)}
              />
            </Box>
          </Box>
        )}
      </Box>
    )

    if (last === undefined || countdown === null) {
      return (
        <Box flexDirection="column" gap={1}>
          <Box flexDirection="row" alignItems="center" gap={2}>
            {Svg === null ? null : (
              <Svg
                key="ring"
                alt={s.ringAlt}
                source={idleRingSvg(BIG_RING_SIZE)}
                width={BIG_RING_SIZE}
                height={BIG_RING_SIZE}
              />
            )}
            <Text dimColor>{s.waiting}</Text>
          </Box>
          {settings(true)}
        </Box>

ライセンスの全文（MIT）

MIT License

Copyright (c) 2026 TsungYing

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

コードが呼ぶもの

Claude を動かす保存

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

Claude — Code

…extending…Details

⚠

Off

expired · Lowhit 0ctx 42%

Claude に頼む…

Prompt cache

expired · LowTTL Cache breaks · last hit 0 · ctx 42%

extending…

This conversationavg hit – · req English · breaks Compact · extended Compact · peak ctx 12.4k

Per request · token cost

■ read ×0.1■ write□ miss▬▬▬ hit rate

▬ break┊ idle near expiry▲ extended

Cache breaksnone

● Low Extend

Break sensitivityEnglishHigher counts smaller drops as breaks; applies from the next request

Extensionsnone2h 10m · English · 32h 10m · English · 32h 10m · English · 3

Settings

When about to expireLow

Auto-extend per idle stretch2h 10m

Toast notificationsDetails

Cache TTLautoPrompt cache

Band above the promptOff

Break sensitivityEnglishHigher counts smaller drops as breaks; applies from the next request

Languageen

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

コードから読めること

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

載せる条件: 確かめやすいコード
入口を読んだ	hooks/hooks.json が名指すモジュールをすべて読んだ。plugins/cache-bar/hooks/register.tsx
解析できる	すべてのファイルが TypeScript か JavaScript として解析できる。4 ファイルを解析
コードが 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 のホスト）がコードに書いてあるか。通信なし
プログラム	起動するプログラムの名前がコードに書いてあり、シェル・インタプリタ・通信用の道具でないか。プログラムを起動しない
読んで送る	ファイルや環境変数を読み、かつ通信するか。通信しない
ソースの鍵	ソースに API キーや秘密鍵らしきものがあるか。ソースに鍵なし
ライセンス	オープンなライセンス（MIT・Apache-2.0・BSD・ISC・Unlicense・0BSD・CC0）で全文があれば、modscode にコードを載せる。違えばリンクだけ。MIT

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

入れる

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

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

/plugin marketplace add TheTsungYing/claude-cache-bar

/plugin install cache-bar@claude-cache-bar

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

Claude に聞く

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

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

Claude から探す: MCP コネクタ