hermes-agent

1/**2 * Reference user widget: a live clock docked above the status bar.3 * Copy to ~/.hermes/tui-widgets/clock.mjs, then `/widgets-reload` and `/clock`.4 */5export default function register(sdk) {6  const { Box, Dialog, React, Text, defineWidgetApp, h } = sdk7 8  function Face({ label, t }) {9    const [now, setNow] = React.useState(() => new Date())10 11    React.useEffect(() => {12      const id = setInterval(() => setNow(new Date()), 1000)13 14      return () => clearInterval(id)15    }, [])16 17    return h(18      Box,19      { columnGap: 1, flexDirection: 'row' },20      h(Text, { bold: true, color: t.color.label }, label),21      h(Text, { color: t.color.text }, now.toLocaleTimeString('en-GB', { hour12: false, timeZone: label === 'local' ? undefined : label }))22    )23  }24 25  defineWidgetApp({26    id: 'clock',27    help: 'live clock in the dock (arg: IANA timezone)',28    mode: 'ambient',29    usage: 'usage: /clock [timezone]   e.g. /clock UTC · /clock Asia/Tokyo',30 31    init(arg) {32      const label = arg.trim() || 'local'33 34      try {35        new Date().toLocaleTimeString('en-GB', { timeZone: label === 'local' ? undefined : label })36      } catch {37        return null38      }39 40      return { label }41    },42 43    reduce(state, { ch, key }) {44      return key.escape || ch === 'q' ? null : state45    },46 47    render({ state, t }) {48      return h(Dialog, { width: 30 }, h(Face, { label: state.label, t }))49    }50  })51}52