clima-condor by condor090: Claude Code mod code and design

What it does

Draws a pane, toasts
Adds /clima
Hooks session.measure, session.start
Keeps its own state between turns
Calls the network

Good points

Written in TypeScript
Has a desktop-specific branch
Handles errors
Writes no files

Code to start from

Two kinds: a starter modscode writes from the design above, and the lines of the mod's own code that draw it.

Starter (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)
  })
}

The mod's own code

Shown under the mod's licence (MIT); its text is below. Keep the notice if you copy these lines.

hooks/register.tsx lines 612–771 · Pane

hooks/register.tsx:612

  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>

Licence 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.

What its code calls

networkruns programsreads filesenv varsremembers

The design, read from code

Claude — Code

Ask Claude…

Antigravity

📍 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

y 3 más lejos

Próximas horas

Mostly clearUserCloudyMayormente despejado%

Próximos 7 días

Niebla

User

Cloudy

Mayormente despejadoParcialmente nubladoMayormente despejado

Cloudy

💧Mayormente despejado%

Niebla

User

Cloudy

Mayormente despejadoParcialmente nubladoMayormente despejado

Cloudy

💧Mayormente despejado%

Niebla

User

Cloudy

Mayormente despejadoParcialmente nubladoMayormente despejado

Cloudy

💧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

y 3 más lejos

RelojUserDigital

◀Cloudy· Cloudy▶Partly cloudy1/3

Antigravity

Combustible% que queda · barra de arriba lo gastado, la de abajo el tiempo

◆ ClaudeClear

Antigravity

Mostly clear%