clima-condor
Clima, sol y luna reales, marea, huracanes y relojes en un panel de Claude Code: /clima
確かめやすいコードターミナル＋デスクトップペイントーストBoxButtonLinkSvgText
何をするか
- 欄・トーストを描く
- /clima を足す
- session.measure・session.startにフックする
- ターンをまたいで自分の状態を持つ
- ネットワークに出る
良いところ
- TypeScript で書かれている
- デスクトップ専用の分岐がある
- エラーを扱う
- ファイルを書かない
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形（register.tsx）
register.tsx
import type { Register } from 'claude-code'
// Drawn like clima-condor by Daniel Cheuqueman (pane, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/condor090-clima-condor/
// 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: "‹titulo›" })
on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
const { Box, Text, Button, Link } = $.ui.resolve(e)
const nombre = '…'
const nombre2 = '…'
const cuando = '…'
const vel = '…'
const altSol = '…'
const altLuna = '…'
const tr = '…'
const icono = '…'
const grados = '…'
const texto = '…'
const grados2 = '…'
const humedad = '…'
const viento = '…'
const rafagas = '…'
const uv = '…'
const amanecer = '…'
const atardecer = '…'
const emoji = '…'
const nombre3 = '…'
const iluminada = '…'
const cuando2 = '…'
const km = '…'
const altura = '…'
const cuando3 = '…'
const altura2 = '…'
const cuando4 = '…'
const altura3 = '…'
const cuando5 = '…'
const altura4 = '…'
const textoNivel = '…'
const miles = '…'
const nombre4 = '…'
const claseTexto = '…'
const vientoKmh = '…'
const miles2 = '…'
const rumbo16 = '…'
const mueveKmh = '…'
const miles3 = '…'
const cuando6 = '…'
const url = '…'
const nombre5 = '…'
const claseTexto2 = '…'
const vientoKmh2 = '…'
const miles4 = '…'
const miles5 = '…'
const cuando7 = '…'
const nombre6 = '…'
const claseTexto3 = '…'
const vientoKmh3 = '…'
const miles6 = '…'
const miles7 = '…'
const cuando8 = '…'
const length = '…'
const hora = '…'
const icono2 = '…'
const grados3 = '…'
const lluvia = '…'
const hora2 = '…'
const icono3 = '…'
const grados4 = '…'
const lluvia2 = '…'
const hora3 = '…'
const icono4 = '…'
const grados5 = '…'
const lluvia3 = '…'
const nombreDia = '…'
const icono5 = '…'
const grados6 = '…'
const antes = '…'
const rango = '…'
const despues = '…'
const grados7 = '…'
const lluvia4 = '…'
const nombreDia2 = '…'
const icono6 = '…'
const grados8 = '…'
const antes2 = '…'
const rango2 = '…'
const despues2 = '…'
const grados9 = '…'
const lluvia5 = '…'
const nombreDia3 = '…'
const icono7 = '…'
const grados10 = '…'
const antes3 = '…'
const rango3 = '…'
const despues3 = '…'
const grados11 = '…'
const lluvia6 = '…'
const textoNivel2 = '…'
const miles8 = '…'
const nombre7 = '…'
const claseTexto4 = '…'
const vientoKmh4 = '…'
const miles9 = '…'
const miles10 = '…'
const cuando9 = '…'
const nombre8 = '…'
const claseTexto5 = '…'
const vientoKmh5 = '…'
const miles11 = '…'
const miles12 = '…'
const cuando10 = '…'
const nombre9 = '…'
const claseTexto6 = '…'
const vientoKmh6 = '…'
const miles13 = '…'
const miles14 = '…'
const cuando11 = '…'
const nombreEn = '…'
const nombreEn2 = '…'
const indice = '…'
const nombre10 = '…'
const nombre11 = '…'
const nombre12 = '…'
const filter = '…'
const nombre13 = '…'
const queda = '…'
const reinicioCorto = '…'
const texto2 = '…'
const nombre14 = '…'
const queda2 = '…'
const reinicioCorto2 = '…'
const texto3 = '…'
const nombre15 = '…'
const queda3 = '…'
const reinicioCorto3 = '…'
const texto4 = '…'
const nombre16 = '…'
const filter2 = '…'
const nombre17 = '…'
const queda4 = '…'
const reinicioCorto4 = '…'
const texto5 = '…'
const nombre18 = '…'
const queda5 = '…'
const reinicioCorto5 = '…'
const texto6 = '…'
const nombre19 = '…'
const queda6 = '…'
const reinicioCorto6 = '…'
const texto7 = '…'
const nombre20 = '…'
const filter3 = '…'
const nombre21 = '…'
const queda7 = '…'
const reinicioCorto7 = '…'
const texto8 = '…'
const nombre22 = '…'
const queda8 = '…'
const reinicioCorto8 = '…'
const texto9 = '…'
const nombre23 = '…'
const queda9 = '…'
const reinicioCorto9 = '…'
const texto10 = '…'
const nombre24 = '…'
const filter4 = '…'
const nombre25 = '…'
const queda10 = '…'
const reinicioCorto10 = '…'
const texto11 = '…'
const nombre26 = '…'
const queda11 = '…'
const reinicioCorto11 = '…'
const texto12 = '…'
const nombre27 = '…'
const queda12 = '…'
const reinicioCorto12 = '…'
const texto13 = '…'
const NOMBRE_IDIOMA = '…'
return (
<Box flexDirection="column" paddingX={1}>
<Box borderStyle="round" paddingX={1} flexDirection="column">
<Text color="#7dd3fc" bold>
{"📍 "}
{nombre}
</Text>
<Box marginTop={1}>
</Box>
<Box gap={1}>
<Text color="#fbbf24" bold>
{"⏩ "}
{nombre2}
</Text>
<Text>
{cuando}
</Text>
<Text dimColor>
×
{vel}
{" · "}
sol
{" "}
{altSol}
{"° · "}
luna
{" "}
{altLuna}
°
</Text>
<Button label={`${tr}`} plain />
</Box>
<Box marginTop={1} gap={2}>
<Text>
{icono}
</Text>
<Text bold>
{grados}
</Text>
<Text>
{texto}
</Text>
</Box>
<Text dimColor>
Sensación
{" "}
{grados2}
{" · "}
Humedad
{" "}
{humedad}
%
</Text>
<Text dimColor>
Viento
{" "}
{viento}
{" km/h "}
N
{" · "}
Ráfagas
{" "}
{rafagas}
{" · UV "}
{uv}
</Text>
<Text dimColor>
{"🌅 "}
{amanecer}
{" 🌇 "}
{atardecer}
</Text>
<Text>
<Text>
{emoji}
{" "}
</Text>
<Text color="#e5e7eb">
{nombre3}
</Text>
<Text dimColor>
{" · "}
{iluminada}
{"% "}
iluminada
{" · "}
llena
{" "}
{cuando2}
</Text>
</Text>
<Text dimColor>
{`Luna a ${altLuna}° sobre el horizonte`}
{` · ${tr} ${cuando}`}
{` · ${tr} ${cuando}`}
</Text>
<Box marginTop={1} gap={2}>
<Box flexDirection="column" flexShrink={1}>
<Box gap={1}>
<Text color="#38bdf8" bold>
{"🌊 "}
Marea
</Text>
<Text dimColor>
{"costa a "}
{km}
{" km al "}
N
</Text>
</Box>
<Text>
<Text color="#38bdf8" bold>
↑ Subiendo
</Text>
<Text>
{" "}
{altura}
{" m"}
</Text>
</Text>
<Text>
<Text color="#fde047">
●
</Text>
<Text dimColor>
{" "}
Pleamar
{" "}
{cuando3}
{" · "}
{altura2}
{" m"}
</Text>
</Text>
<Text>
<Text color="#fde047">
●
</Text>
<Text dimColor>
{" "}
Pleamar
{" "}
{cuando4}
{" · "}
{altura3}
{" m"}
</Text>
</Text>
<Text>
<Text color="#fde047">
●
</Text>
<Text dimColor>
{" "}
Pleamar
{" "}
{cuando5}
{" · "}
{altura4}
{" m"}
</Text>
</Text>
<Text dimColor>
modelo global, no sirve para navegar
</Text>
</Box>
</Box>
</Box>
<Box flexDirection="column" marginTop={1}>
<Box gap={1}>
<Text>
🌀
</Text>
<Text color="#7dd3fc" bold>
Huracanes
</Text>
<Text bold>
{textoNivel}
</Text>
<Text dimColor>
NHC
{` · ${cuando}`}
{" · sin conexión"}
</Text>
</Box>
<Box marginTop={1} gap={2}>
<Box flexDirection="column" alignItems="center">
<Text dimColor>
anillos cada
{" "}
{miles}
{" km"}
</Text>
</Box>
<Box flexDirection="column" flexShrink={1}>
<Box flexDirection="column" marginBottom={1}>
<Text>
<Text bold>
{"● "}
{nombre4}
</Text>
<Text>
{" · "}
{claseTexto}
{" · "}
{vientoKmh}
{" km/h"}
</Text>
</Text>
<Text dimColor>
{"A "}
{miles2}
{" km "}
al
{" "}
N
{` · ${tr} ${rumbo16} ${tr} ${mueveKmh} km/h`}
{" · se acerca"}
</Text>
<Text>
Lo más cerca
{": "}
{miles3}
{" km, "}
{cuando6}
</Text>
<Link href={`${url}`} label={`${tr}`} />
</Box>
<Box flexDirection="column" marginBottom={1}>
<Text>
<Text bold>
{"● "}
{nombre5}
</Text>
<Text>
{" · "}
{claseTexto2}
{" · "}
{vientoKmh2}
{" km/h"}
</Text>
</Text>
<Text dimColor>
{"A "}
{miles4}
{" km "}
al
{" "}
N
{` · ${tr} ${rumbo16} ${tr} ${mueveKmh} km/h`}
{" · se acerca"}
</Text>
<Text>
Lo más cerca
{": "}
{miles5}
{" km, "}
{cuando7}
</Text>
<Link href={`${url}`} label={`${tr}`} />
</Box>
<Box flexDirection="column" marginBottom={1}>
<Text>
<Text bold>
{"● "}
{nombre6}
</Text>
<Text>
{" · "}
{claseTexto3}
{" · "}
{vientoKmh3}
{" km/h"}
</Text>
</Text>
<Text dimColor>
{"A "}
{miles6}
{" km "}
al
{" "}
N
{` · ${tr} ${rumbo16} ${tr} ${mueveKmh} km/h`}
{" · se acerca"}
</Text>
<Text>
Lo más cerca
{": "}
{miles7}
{" km, "}
{cuando8}
</Text>
<Link href={`${url}`} label={`${tr}`} />
</Box>
<Text dimColor>
{`y ${length} más lejos`}
</Text>
</Box>
</Box>
</Box>
<Text color="#7dd3fc" bold>
Próximas horas
</Text>
<Box flexDirection="row" flexWrap="wrap">
<Box flexDirection="column" width={6} alignItems="center">
<Text dimColor>
{hora}
</Text>
<Text>
{icono2}
</Text>
<Text>
{grados3}
</Text>
<Text color="#38bdf8">
{lluvia}
%
</Text>
</Box>
<Box flexDirection="column" width={6} alignItems="center">
<Text dimColor>
{hora2}
</Text>
<Text>
{icono3}
</Text>
<Text>
{grados4}
</Text>
<Text color="#38bdf8">
{lluvia2}
%
</Text>
</Box>
<Box flexDirection="column" width={6} alignItems="center">
<Text dimColor>
{hora3}
</Text>
<Text>
{icono4}
</Text>
<Text>
{grados5}
</Text>
<Text color="#38bdf8">
{lluvia3}
%
</Text>
</Box>
</Box>
<Box marginTop={1}>
<Text color="#7dd3fc" bold>
Próximos 7 días
</Text>
</Box>
<Box gap={1}>
<Box width={7}>
<Text>
{nombreDia}
</Text>
</Box>
<Text>
{icono5}
</Text>
<Box width={4} justifyContent="flex-end">
<Text>
{grados6}
</Text>
</Box>
<Text>
<Text dimColor>
{antes}
</Text>
<Text>
{rango}
</Text>
<Text dimColor>
{despues}
</Text>
</Text>
<Box width={4}>
<Text>
{grados7}
</Text>
</Box>
<Text color="#38bdf8">
💧
{lluvia4}
%
</Text>
</Box>
<Box gap={1}>
<Box width={7}>
<Text>
{nombreDia2}
</Text>
</Box>
<Text>
{icono6}
</Text>
<Box width={4} justifyContent="flex-end">
<Text>
{grados8}
</Text>
</Box>
<Text>
<Text dimColor>
{antes2}
</Text>
<Text>
{rango2}
</Text>
<Text dimColor>
{despues2}
</Text>
</Text>
<Box width={4}>
<Text>
{grados9}
</Text>
</Box>
<Text color="#38bdf8">
💧
{lluvia5}
%
</Text>
</Box>
<Box gap={1}>
<Box width={7}>
<Text>
{nombreDia3}
</Text>
</Box>
<Text>
{icono7}
</Text>
<Box width={4} justifyContent="flex-end">
<Text>
{grados10}
</Text>
</Box>
<Text>
<Text dimColor>
{antes3}
</Text>
<Text>
{rango3}
</Text>
<Text dimColor>
{despues3}
</Text>
</Text>
<Box width={4}>
<Text>
{grados11}
</Text>
</Box>
<Text color="#38bdf8">
💧
{lluvia6}
%
</Text>
</Box>
<Box flexDirection="column" marginTop={1}>
<Box gap={1}>
<Text>
🌀
</Text>
<Text color="#7dd3fc" bold>
Huracanes
</Text>
<Text bold>
{textoNivel2}
</Text>
<Text dimColor>
NHC
{` · ${cuando}`}
{" · sin conexión"}
</Text>
</Box>
<Box marginTop={1} gap={2}>
<Box flexDirection="column" alignItems="center">
<Text dimColor>
anillos cada
{" "}
{miles8}
{" km"}
</Text>
</Box>
<Box flexDirection="column" flexShrink={1}>
<Box flexDirection="column" marginBottom={1}>
<Text>
<Text bold>
{"● "}
{nombre7}
</Text>
<Text>
{" · "}
{claseTexto4}
{" · "}
{vientoKmh4}
{" km/h"}
</Text>
</Text>
<Text dimColor>
{"A "}
{miles9}
{" km "}
al
{" "}
N
{` · ${tr} ${rumbo16} ${tr} ${mueveKmh} km/h`}
{" · se acerca"}
</Text>
<Text>
Lo más cerca
{": "}
{miles10}
{" km, "}
{cuando9}
</Text>
<Link href={`${url}`} label={`${tr}`} />
</Box>
<Box flexDirection="column" marginBottom={1}>
<Text>
<Text bold>
{"● "}
{nombre8}
</Text>
<Text>
{" · "}
{claseTexto5}
{" · "}
{vientoKmh5}
{" km/h"}
</Text>
</Text>
<Text dimColor>
{"A "}
{miles11}
{" km "}
al
{" "}
N
{` · ${tr} ${rumbo16} ${tr} ${mueveKmh} km/h`}
{" · se acerca"}
</Text>
<Text>
Lo más cerca
{": "}
{miles12}
{" km, "}
{cuando10}
</Text>
<Link href={`${url}`} label={`${tr}`} />
</Box>
<Box flexDirection="column" marginBottom={1}>
<Text>
<Text bold>
{"● "}
{nombre9}
</Text>
<Text>
{" · "}
{claseTexto6}
{" · "}
{vientoKmh6}
{" km/h"}
</Text>
</Text>
<Text dimColor>
{"A "}
{miles13}
{" km "}
al
{" "}
N
{` · ${tr} ${rumbo16} ${tr} ${mueveKmh} km/h`}
{" · se acerca"}
</Text>
<Text>
Lo más cerca
{": "}
{miles14}
{" km, "}
{cuando11}
</Text>
<Link href={`${url}`} label={`${tr}`} />
</Box>
<Text dimColor>
{`y ${length} más lejos`}
</Text>
</Box>
</Box>
</Box>
<Box flexDirection="column" marginTop={1}>
<Box gap={1}>
<Text color="#7dd3fc" bold>
Reloj
</Text>
<Button label={`${tr}`} variant="primary" />
<Button label="Digital" variant="primary" />
</Box>
<Box gap={1}>
<Button label="◀" plain />
<Text bold>
{nombreEn}
</Text>
<Text dimColor>
{"· "}
{nombreEn2}
</Text>
<Button label="▶" plain />
<Text dimColor>
{`${indice}1`}
/
{length}
</Text>
</Box>
<Box marginTop={1} gap={2}>
<Box flexDirection="column" alignItems="center">
<Text dimColor>
{nombre10}
</Text>
</Box>
<Box flexDirection="column" alignItems="center">
<Text dimColor>
{nombre11}
</Text>
</Box>
<Box flexDirection="column" alignItems="center">
<Text dimColor>
{nombre12}
</Text>
</Box>
</Box>
<Box marginTop={1} gap={2}>
<Text color="#7dd3fc" bold>
Combustible
</Text>
<Text dimColor>
% que queda · barra de arriba lo gastado, la de abajo el tiempo
</Text>
</Box>
<Box marginTop={1} gap={1}>
<Text bold>
{"◆ "}
Claude
</Text>
<Text dimColor>
{filter}
</Text>
</Box>
<Box gap={1}>
<Box width={2} />
<Box width={12}>
<Text>
{nombre13}
</Text>
</Box>
<Box width={5} justifyContent="flex-end">
<Text bold>
{queda}
%
</Text>
</Box>
<Text dimColor>
{reinicioCorto}
</Text>
<Text>
{texto2}
</Text>
</Box>
<Box gap={1}>
<Box width={2} />
<Box width={12}>
<Text>
{nombre14}
</Text>
</Box>
<Box width={5} justifyContent="flex-end">
<Text bold>
{queda2}
%
</Text>
</Box>
<Text dimColor>
{reinicioCorto2}
</Text>
<Text>
{texto3}
</Text>
</Box>
<Box gap={1}>
<Box width={2} />
<Box width={12}>
<Text>
{nombre15}
</Text>
</Box>
<Box width={5} justifyContent="flex-end">
<Text bold>
{queda3}
%
</Text>
</Box>
<Text dimColor>
{reinicioCorto3}
</Text>
<Text>
{texto4}
</Text>
</Box>
<Box flexDirection="column">
<Box marginTop={1} gap={1}>
<Text bold>
{"◆ "}
{nombre16}
</Text>
<Text dimColor>
{filter2}
</Text>
</Box>
<Box gap={1}>
<Box width={2} />
<Box width={12}>
<Text>
{nombre17}
</Text>
</Box>
<Box width={5} justifyContent="flex-end">
<Text bold>
{queda4}
%
</Text>
</Box>
<Text dimColor>
{reinicioCorto4}
</Text>
<Text>
{texto5}
</Text>
</Box>
<Box gap={1}>
<Box width={2} />
<Box width={12}>
<Text>
{nombre18}
</Text>
</Box>
<Box width={5} justifyContent="flex-end">
<Text bold>
{queda5}
%
</Text>
</Box>
<Text dimColor>
{reinicioCorto5}
</Text>
<Text>
{texto6}
</Text>
</Box>
<Box gap={1}>
<Box width={2} />
<Box width={12}>
<Text>
{nombre19}
</Text>
</Box>
<Box width={5} justifyContent="flex-end">
<Text bold>
{queda6}
%
</Text>
</Box>
<Text dimColor>
{reinicioCorto6}
</Text>
<Text>
{texto7}
</Text>
</Box>
</Box>
<Box flexDirection="column">
<Box marginTop={1} gap={1}>
<Text bold>
{"◆ "}
{nombre20}
</Text>
<Text dimColor>
{filter3}
</Text>
</Box>
<Box gap={1}>
<Box width={2} />
<Box width={12}>
<Text>
{nombre21}
</Text>
</Box>
<Box width={5} justifyContent="flex-end">
<Text bold>
{queda7}
%
</Text>
</Box>
<Text dimColor>
{reinicioCorto7}
</Text>
<Text>
{texto8}
</Text>
</Box>
<Box gap={1}>
<Box width={2} />
<Box width={12}>
<Text>
{nombre22}
</Text>
</Box>
<Box width={5} justifyContent="flex-end">
<Text bold>
{queda8}
%
</Text>
</Box>
<Text dimColor>
{reinicioCorto8}
</Text>
<Text>
{texto9}
</Text>
</Box>
<Box gap={1}>
<Box width={2} />
<Box width={12}>
<Text>
{nombre23}
</Text>
</Box>
<Box width={5} justifyContent="flex-end">
<Text bold>
{queda9}
%
</Text>
</Box>
<Text dimColor>
{reinicioCorto9}
</Text>
<Text>
{texto10}
</Text>
</Box>
</Box>
<Box flexDirection="column">
<Box marginTop={1} gap={1}>
<Text bold>
{"◆ "}
{nombre24}
</Text>
<Text dimColor>
{filter4}
</Text>
</Box>
<Box gap={1}>
<Box width={2} />
<Box width={12}>
<Text>
{nombre25}
</Text>
</Box>
<Box width={5} justifyContent="flex-end">
<Text bold>
{queda10}
%
</Text>
</Box>
<Text dimColor>
{reinicioCorto10}
</Text>
<Text>
{texto11}
</Text>
</Box>
<Box gap={1}>
<Box width={2} />
<Box width={12}>
<Text>
{nombre26}
</Text>
</Box>
<Box width={5} justifyContent="flex-end">
<Text bold>
{queda11}
%
</Text>
</Box>
<Text dimColor>
{reinicioCorto11}
</Text>
<Text>
{texto12}
</Text>
</Box>
<Box gap={1}>
<Box width={2} />
<Box width={12}>
<Text>
{nombre27}
</Text>
</Box>
<Box width={5} justifyContent="flex-end">
<Text bold>
{queda12}
%
</Text>
</Box>
<Text dimColor>
{reinicioCorto12}
</Text>
<Text>
{texto13}
</Text>
</Box>
</Box>
</Box>
<Box marginTop={1} gap={1}>
<Text dimColor>
Actualizando…
{" · sin conexión"}
</Text>
<Button label={`${tr}`} hotkey="r" dimColor />
<Button label={`${tr}`} hotkey="x" dimColor />
<Button label={`🌐 ${NOMBRE_IDIOMA}`} hotkey="l" dimColor />
</Box>
<Text dimColor>
{"Open-Meteo · NHC · "}
{"/clima <ciudad> para cambiar"}
</Text>
</Box>
)
})
on('session.start', async ($, e, next) => {
const textoNivel = '…'
const claseTexto = '…'
const nombre = '…'
const tr = '…'
const miles = '…'
const rumbo16 = '…'
await $.ui.toast(`🌀 ${textoNivel}: ${claseTexto} ${nombre} ${tr}${miles} km ${tr} ${rumbo16} · ${tr}`)
return next(e)
})
}
Mod 自身のコード
Mod のライセンス（MIT）に従って載せています。全文は下にあります。写すときは著作権表示を残してください。
hooks/register.tsx 612〜771 行 · ペイン
on('ui.render', { component: 'Pane', requestId: PANEL }, async ($, e) => {
const el = $.ui.resolve(e)
const { Box, Text, Button, Link } = el
const Raster = e.surface === 'terminal' ? $.ui.resolve(e).Raster : null
// Sin Raster (escritorio, VS Code, móvil) las mismas celdas se dibujan como SVG
const Svg = !Raster && 'Svg' in el ? el.Svg : null
const pixeles = (key: string, cells: string, columnas: number, filas: number, alt: string, lado = 4) =>
Raster ? (
<Raster key={key} columns={columnas} rows={filas} cells={cells} />
) : Svg ? (
<Svg key={key} source={svgDe(cells, columnas, filas, lado)} alt={alt} width={columnas * lado} height={filas * 2 * lado} />
) : null
// Un dibujo vectorial: SVG animado en el escritorio, píxeles en la terminal
const vector = (key: string, d: Dibujo, alt: string, lado: number) =>
Raster ? (
<Raster key={key} columns={d.ancho} rows={d.alto / 2} cells={celdasVector(d)} />
) : Svg ? (
<Svg key={key} source={svgVector(d, lado)} alt={alt} width={d.ancho * lado} height={d.alto * lado} isInteractive />
) : null
const c = await read($, clima)
const fallo = await read($, error)
const ocupado = await read($, cargando)
if (!c) {
return (
<Box flexDirection="column" paddingX={1}>
<Text color={ACENTO} bold>{titulo()}</Text>
{fallo ? <Text color="#f87171">{tr('No pude obtener el clima', "Couldn't get the weather")}: {fallo}</Text> : <Text dimColor>{tr('Mirando el cielo…', 'Looking at the sky…')}</Text>}
{fallo && <Button key="reintentar" label={tr('Reintentar', 'Retry')} hotkey="r" onPress={() => void refrescar($)} />}
</Box>
)
}
const a = c.actual
const cie = cielo(a.codigo)
const hoy = c.dias[0]
const bajo = Math.min(...c.dias.map(d => d.min))
const alto = Math.max(...c.dias.map(d => d.max))
const ahora = await $.clock.now()
const indice = await read($, caratulaA)
const modo = await read($, modoA)
await read($, minutoA)
// Redibuja al cambiar de idioma
await read($, idiomaA)
const tema = TEMAS[indice] ?? TEMAS[0]!
const caratula = modo === 'analogico' ? tema.analogico : tema.digital
const relojes = relojesDe(c, indice, modo, ahora)
const consumo = ventanas(await read($, limitesA), ahora)
const agentes = [
{ id: 'x', nombre: 'Codex', color: '#10a37f', datos: await read($, codexA) },
{ id: 'g', nombre: 'Grok Build', color: '#e5e7eb', datos: await read($, grokA) },
{ id: 'a', nombre: 'Antigravity', color: '#8ab4f8', datos: await read($, antigravityA) },
]
if (Raster) animar($)
else if (Svg) pulsoEscritorio($)
const graficos = Boolean(Raster || Svg)
// Luna: fase de hoy y la próxima llena (o nueva, si ya va menguando)
const luna = faseLunar(ahora, c.lugar.lat)
const siguiente = proxima(ahora, luna.creciente ? 180 : 0)
const lunaSale = cruce('luna', ahora, c.lugar.lat, c.lugar.lon, true)
const lunaPone = cruce('luna', ahora, c.lugar.lat, c.lugar.lon, false)
// Timelapse en curso
const sim = await read($, simA)
const tEscena = tiempoEscena(ahora, sim)
const cielito = capasDe(c, tEscena)
// Marea de la costa más cercana
const marea = await read($, mareaA)
const em = marea ? estadoMarea(marea, ahora) : null
// Ciclones: el más cercano manda el nivel
const hur = await read($, huracanesA)
const ciclones = hur?.ciclones ?? []
const principal = ciclones[0]
const nivelPrincipal = principal ? nivel(principal) : 'lejos'
const urgente = nivelPrincipal === 'alerta' || nivelPrincipal === 'vigilancia'
// Una ventana de uso en una línea: nombre, medidor, lo que queda, reinicio y ritmo
const fila = (p: string, v: (typeof consumo)[number]) => {
if (!graficos) return null
const r = ritmoCorto(v, ahora, c.offsetMin)
const queda = Math.max(0, Math.round(100 - v.usado))
return (
<Box key={`v-${p}-${v.kind}`} gap={1}>
<Box width={2} />
<Box width={12}>
<Text>{v.nombre}</Text>
</Box>
{pixeles(`m-${p}-${v.kind}`, medidor(v, MEDIDOR), MEDIDOR, 1, `${v.nombre}: ${Math.round(v.usado)}% ${tr('usado', 'used')}`, 6)}
<Box width={5} justifyContent="flex-end">
<Text color={hex(colorUso(v.usado))} bold>{queda}%</Text>
</Box>
<Text dimColor>{reinicioCorto(v, ahora, c.offsetMin)}</Text>
{r ? <Text color={r.color}>{r.texto}</Text> : null}
</Box>
)
}
// Encabezado de cada agente: nombre en su color y los datos en gris
const encabezado = (key: string, nombre: string, color: string, datos: string[]) => (
<Box key={key} marginTop={1} gap={1}>
<Text color={color} bold>◆ {nombre}</Text>
<Text dimColor>{datos.filter(Boolean).join(' · ')}</Text>
</Box>
)
// Marea: altímetro chico a la izquierda y los datos a la derecha
const seccionMarea =
marea && em ? (
<Box key="marea" marginTop={1} gap={2}>
{graficos ? vector('marea-g', dibujoMarea(marea, ahora), `${tr('Marea', 'Tide')}: ${em.subiendo ? tr('subiendo', 'rising') : tr('bajando', 'falling')}, ${em.altura.toFixed(2)} m`, 4) : null}
<Box flexDirection="column" flexShrink={1}>
<Box gap={1}>
<Text color="#38bdf8" bold>🌊 {tr('Marea', 'Tide')}</Text>
<Text dimColor>costa a {marea.km} km al {rumbo16(marea.rumbo)}</Text>
</Box>
<Text>
<Text color={em.subiendo ? '#38bdf8' : '#94a3b8'} bold>{em.subiendo ? tr('↑ Subiendo', '↑ Rising') : tr('↓ Bajando', '↓ Falling')}</Text>
<Text> {em.altura.toFixed(2)} m</Text>
</Text>
{em.proximas.map(x => (
<Text key={`ex-${x.ms}`}>
<Text color={x.tipo === 'alta' ? '#fde047' : '#a78bfa'}>●</Text>
<Text dimColor> {x.tipo === 'alta' ? tr('Pleamar', 'High tide') : tr('Bajamar', 'Low tide')} {cuando(x.ms, ahora, c.offsetMin)} · {x.altura.toFixed(2)} m</Text>
</Text>
))}
<Text dimColor>{tr('modelo global, no sirve para navegar', 'global model, not for navigation')}</Text>
</Box>
</Box>
) : null
const seccionHuracanes = (
<Box key="huracanes" flexDirection="column" marginTop={1}>
<Box gap={1}>
{Svg && principal ? vector('espiral', dibujoEspiral(c.lugar.lat < 0, Number.parseInt(COLOR_NIVEL[nivelPrincipal].slice(1), 16)), tr('Ciclón activo', 'Active cyclone'), 2) : <Text>🌀</Text>}
<Text color={principal ? COLOR_NIVEL[nivelPrincipal] : ACENTO} bold>{tr('Huracanes', 'Hurricanes')}</Text>
{principal ? <Text color={COLOR_NIVEL[nivelPrincipal]} bold>{textoNivel(nivelPrincipal)}</Text> : null}
<Text dimColor>NHC{hur?.consultado ? ` · ${cuando(hur.consultado, ahora, c.offsetMin).replace(/^hoy /, '')}` : ''}{hur?.error ? tr(' · sin conexión', ' · offline') : ''}</Text>
</Box>
{!hur ? (
<Text dimColor>{tr('Consultando el Centro Nacional de Huracanes…', 'Checking the National Hurricane Center…')}</Text>
) : ciclones.length === 0 ? (
<Text dimColor>{tr('Sin ciclones activos en el Atlántico ni en el Pacífico.', 'No active cyclones in the Atlantic or the Pacific.')}</Text>
) : (
<Box marginTop={1} gap={2}>
{graficos ? (
<Box flexDirection="column" alignItems="center">
{vector('radar', dibujoRadar(ciclones, c.lugar, ahora), `${tr('Radar de ciclones', 'Cyclone radar')}: ${principal?.nombre ?? ''} ${tr('a ', '')}${miles(principal?.km ?? 0)} km`, 4)}
<Text dimColor>{tr('anillos cada', 'rings every')} {miles(Math.round(escalaRadar(ciclones) / 3))} km</Text>
</Box>
) : null}
<Box flexDirection="column" flexShrink={1}>
{ciclones.slice(0, 3).map(cc => {
const n = nivel(cc)
const masCerca = cc.cercania && cc.cercania.ms > ahora + 3_600_000 && cc.cercania.km < cc.km - 50
return (
<Box key={`c-${cc.id}`} flexDirection="column" marginBottom={1}>
<Text>ライセンスの全文（MIT）
MIT License Copyright (c) 2026 Daniel Cheuqueman 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 に頼む…
AntigravityPróximas horas
📍 Antigravity
⏩ AntigravityCloudy×Nublado · sol Niebla° · luna Mayormente despejado°User
UserCloudyMostly clear
Sensación Cloudy · Humedad Cloudy%Viento Parcialmente nublado km/h N · Ráfagas Niebla · UV Antigravity🌅 Clear 🌇 Niebla● Antigravity · Mostly clear% iluminada · llena CloudyLuna a Mayormente despejado° sobre el horizonte · User Cloudy · User Cloudy🌊 Mareacosta a Mostly clear km al N
↑ Subiendo Parcialmente nublado m● Pleamar Cloudy · Parcialmente nublado m● Pleamar Cloudy · Parcialmente nublado m● Pleamar Cloudy · Parcialmente nublado mmodelo global, no sirve para navegar🌀HuracanesLibraryNHC · Cloudy · sin conexión
anillos cada Cloudy km
● Antigravity · Clear · Parcialmente nublado km/hA Cloudy km al N · User Clear User Mostly clear km/h · se acercaLo más cerca: Cloudy km, CloudyUser
● Antigravity · Clear · Parcialmente nublado km/hA Cloudy km al N · User Clear User Mostly clear km/h · se acercaLo más cerca: Cloudy km, CloudyUser
● Antigravity · Clear · Parcialmente nublado km/hA Cloudy km al N · User Clear User Mostly clear km/h · se acercaLo más cerca: Cloudy km, CloudyUser
y 3 más lejosMostly clearUserCloudyMayormente despejado%
Mostly clearUserCloudyMayormente despejado%
Mostly clearUserCloudyMayormente despejado%
Próximos 7 días
Niebla
UserCloudy
Mayormente despejadoParcialmente nubladoMayormente despejadoCloudy
💧Mayormente despejado%Niebla
UserCloudy
Mayormente despejadoParcialmente nubladoMayormente despejadoCloudy
💧Mayormente despejado%Niebla
UserCloudy
Mayormente despejadoParcialmente nubladoMayormente despejadoCloudy
💧Mayormente despejado%🌀HuracanesLibraryNHC · Cloudy · sin conexión
anillos cada Cloudy km
● Antigravity · Clear · Parcialmente nublado km/hA Cloudy km al N · User Clear User Mostly clear km/h · se acercaLo más cerca: Cloudy km, CloudyUser
● Antigravity · Clear · Parcialmente nublado km/hA Cloudy km al N · User Clear User Mostly clear km/h · se acercaLo más cerca: Cloudy km, CloudyUser
● Antigravity · Clear · Parcialmente nublado km/hA Cloudy km al N · User Clear User Mostly clear km/h · se acercaLo más cerca: Cloudy km, CloudyUser
y 3 más lejosRelojUserDigital
◀Cloudy· Cloudy▶Partly cloudy1/3
Antigravity
Antigravity
Antigravity
Combustible% que queda · barra de arriba lo gastado, la de abajo el tiempo
◆ ClaudeClear
Antigravity
Mostly clear%
Mayormente despejadoMostly clearAntigravity
Mostly clear%
Mayormente despejadoMostly clearAntigravity
Mostly clear%
Mayormente despejadoMostly clear◆ AntigravityClear
Antigravity
Mostly clear%
Mayormente despejadoMostly clearAntigravity
Mostly clear%
Mayormente despejadoMostly clearAntigravity
Mostly clear%
Mayormente despejadoMostly clear◆ AntigravityClear
Antigravity
Mostly clear%
Mayormente despejadoMostly clearAntigravity
Mostly clear%
Mayormente despejadoMostly clearAntigravity
Mostly clear%
Mayormente despejadoMostly clear◆ AntigravityClear
Antigravity
Mostly clear%
Mayormente despejadoMostly clearAntigravity
Mostly clear%
Mayormente despejadoMostly clearAntigravity
Mostly clear%
Mayormente despejadoMostly clearActualizando… · sin conexiónUser rUser x🌐 Parcialmente nublado l
Open-Meteo · NHC · /clima <ciudad> para cambiar読み取ったコミットのソースから描いたもので、動かした結果ではありません。一覧は 3 回描き、条件はデスクトップアプリで描く最初の分岐を取り、動かしたときにだけ決まる値は仮の例（点線の下線）にするか省きます。色と書体はこのサイトのものです。
コードから読めること
2026-10-06 に読んだコミット a902f8476624 のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。hooks/register.tsx |
| 解析できる | すべてのファイルが TypeScript か JavaScript として解析できる。16 ファイルを解析 |
| コードが 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 のホスト）がコードに書いてあるか。hooks/register.tsx:387 fetch('http://ip-api.com/json/?fields=city,regionName,la); hooks/register.tsx:401 fetch(urlGeocodificar(nombre)); hooks/register.tsx:420 fetch(urlMarea(candidatos(lugar))); hooks/register.tsx:438 fetch(URL_NHC); hooks/register.tsx:447 fetch(urlAviso) |
| プログラム | 起動するプログラムの名前がコードに書いてあり、シェル・インタプリタ・通信用の道具でないか。hooks/register.tsx:94 実行時に決まるプログラム; hooks/register.tsx:133 実行時に決まるプログラム |
| 読んで送る | ファイルや環境変数を読み、かつ通信するか。reads environment variables and files and reaches the network |
| ソースの鍵 | ソースに API キーや秘密鍵らしきものがあるか。ソースに鍵なし |
| ライセンス | オープンなライセンス（MIT・Apache-2.0・BSD・ISC・Unlicense・0BSD・CC0）で全文があれば、modscode にコードを載せる。違えばリンクだけ。MIT |
コードの文面を読んだだけで、安全の審査ではありません。動かしてはおらず、起動するプログラムの中で何が起きるかも見えません。入れる前の確認はあなたの役目です。 載せる条件
入れる
入れる前に、必ず自分で確かめてください。Mod はサンドボックスなしで、あなたの権限で動きます。modscode はこのコードの安全を保証しません。下のコードを読み（またはフォルダーで claude plugin validate .）、触るものを見て、読んだコミットを入れてください。
リポジトリがそのままマーケットプレイスです。このマーケットプレイスを足し（ターミナルでは次のコマンド、デスクトップアプリではプラグインの設定）、そこから Mod を入れます。
/plugin marketplace add condor090/clima-condor/plugin install clima-condor@condor入るのはマーケットプレイスの最新のコミットで、ここで読んだもの（a902f8476624）と違うことがあります。入れる前に見比べてください。
Claude に聞く
modscode のコネクタを入れると、Claude がこのデザイン・コードが触るもの・コードを読んで、それをもとに作れます。たとえば:
modscode のデザイン「condor090-clima-condor」をコードごと読んで、同じようなペインを作って似たデザイン
-
Claude に頼む…Fix loginRemoveCopy markdownacme/app · mainCopy linkCopy markdownbuild2h 10mbuild2h 10mbuild2h 10mHosted on uploads.sh, not committed to the repo.They will appear in a comment on the pull request once opened.
-
✦ explain as pick how Claude answers×3 ● build3 ● build3 ● build▸ VideoClaude に頼む…
-
Claude に頼む…LubbDubbLubbDubb■Paused· 3 of Hide slotsResume pNothing waiting on you.Needs you3Work through asks n●buildFleet resumedbuild●buildFleet resumedbuild+3 more●buildFleet resumedbuildFeatures3 in progress⋯No open pull requests.Pull requests3●buildFleet resumedbuild●buildFleet resumedbuild+3 more●buildFleet resumedbuild
-
Claude に頼む…YouTube Side Player1 Player2 Position (top-right)3 build4 buildScreen Radar: [top-right]Inline · unknown: not detected yetInstall inline video (yt-dlp + ffmpeg, ~100 MB) [i] i● PLAYING INLINE · TOP-RIGHT () · MEDIUMFix loginChannel: alex · ID: a1b2c3dOpen on YouTube
-
Claude に頼む…Approved appsApproved appsComputer use can control these apps without asking.High riskAlways allowed (3)None. Allow one below.Not installed (3)This conversation (3)None.Allow an app App name, bundle id or path allowbuilda1b2c3dbuilda1b2c3dbuilda1b2c3d
-
Claude に頼む…Session inboxK build 3K build 3K build 3Nothing is waiting on you.Running 3● build example.com● build example.com● build example.com▸ Fix login 3✓ Done✓ Done✓ Done▸ Fix login 3OpportunityOpportunityOpportunityokupdate failed, retries after the next reply