clawd-sidekick

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const [doing, deadlines, isCollapsed, actors, usage, game, offset, talk, theme, zone, seasonPick, holidayPick, trophies, neighbors, egg, birthday, names, git] = await Promise.all([
      read($, activity),
      read($, deadlinesAtom),
      read($, collapsedAtom),
      read($, actorsAtom),
      read($, usageAtom),
      read($, gameAtom),
      read($, offsetAtom),
      read($, langAtom),
      read($, themeAtom),
      read($, zoneAtom),
      read($, seasonPickAtom),
      read($, holidayPickAtom),
      read($, trophiesAtom),
      read($, neighborsAtom),
      read($, eggAtom),
      read($, birthdayAtom),
      read($, namesAtom),
      read($, gitAtom),
      read($, nowAtom),
    ])
    const w = say(talk)
    const now = await $.clock.now()
    const ahead = deadlines.filter(d => d.due > now - 86_400_000)
    const nearest = ahead[0]
    const { Box, Text, Button } = $.ui.resolve(e)
    const width = e.props.bodyColumns

    // The terminal folds the band when the house cannot fit; the desktop scales it instead.
    const isCramped = e.surface === 'terminal' && (width < 70 || e.props.maxRows < SH / 2 + 3)
    const main = actors.find(a => a.cap === null)
    const langButton = <Button key="lang" label={w.otherLanguage} onPress={() => setLang($, talk === 'zh' ? 'en' : 'zh')} />
    if (isCollapsed || isCramped) {
      const now_ = doing.label && doing.label !== w.sleepy ? doing.label : w.doings[main?.doing ?? 'idle']
      const summary = [`${names.main ?? 'Clawd'} · ${now_}`]
      if (nearest !== undefined) summary.push(w.due(nearest.title, countdown(nearest.due, now, talk)))
      let face: RenderElement
      if (e.surface === 'terminal') {
        face = <Text color={ORANGE}>▐▛███▜▌</Text>
      } else {
        const { Svg } = $.ui.resolve(e)
        face = <Svg source={miniClawdSvg(main?.doing ?? 'idle')} alt="Clawd" width={36} height={24} />
      }
      return (
        <Box flexDirection="row" gap={1} alignItems="center">
          {face}
          <Text wrap="truncate-end">{summary.join(' · ')}</Text>
          <Box flexGrow={1} />
          {isCollapsed ? <Button key="expand" label={w.expand} variant="primary" onPress={() => setCollapsed($, false)} /> : null}
          {e.surface === 'terminal' ? null : langButton}
        </Box>
      )
    }

    const holiday = holidayPick !== 'auto' ? holidayPick : holidayOf(now, offset)
    const scene: SceneProps = {
      actors,
      // The board pins every deadline ahead, nearest first; the hour is fine enough.
      notes: ahead.slice(0, 8).map(d => ({ text: `${d.title} · ${countdown(d.due, now, talk, true)}`, urgency: urgency(d.due, now) })),
      days: nearest === undefined ? null : Math.max(0, Math.floor((nearest.due - now) / 86_400_000)),
      urgency: nearest === undefined ? 'none' : urgency(nearest.due, now),
      game,
      time: timeOfDay(now, offset),
      // To the hour only: a minute's change would redraw the desktop house and start its loops over.
      deadline: nearest === undefined ? '' : `${nearest.title} · ${formatDue(nearest.due, offset)} · ${countdown(nearest.due, now, talk, true)}`,
      lang: talk,
      theme,
      memory: usage.contextPercent === null ? null : Math.min(10, Math.floor(usage.contextPercent / 10)),
      isTired: (usage.fiveHour ?? 0) >= 80,
      season: seasonPick !== 'auto' ? seasonPick : seasonOf(now, offset, zone),
      holiday,
      medals: medalsOf(trophies.unlocked),
      trophyCount: [Object.keys(trophies.unlocked).length, TROPHY_TOTAL],
      // A holiday's hat stands in for the trophy hat, unless one was picked by hand.
      hat: trophies.hat === 'auto' && (holiday === 'christmas' || holiday === 'halloween') ? null : hatFor(trophies),
      pal: palFor(trophies),
      golden: goldenOf(trophies.unlocked),
      egg,
      isBirthday: birthday !== '' && monthDay(now, offset) === birthday,
      names,
    }
    let house: RenderElement
    if (e.surface === 'terminal') {
      const { Client } = $.ui.resolve(e)
      house = <Client key="house" module="./scene-client.tsx" props={scene} width="100%" height={SH / 2 + 1} />
    } else {
      const { Svg } = $.ui.resolve(e)
      const frame = Math.round(width * CELL_PX)
      house = (
        <Svg
          source={sceneSvg(scene, now)}
          alt={w.houseAlt(doing.label || w.readingInLibrary)}
          isInteractive
          width={frame}
          height={Math.round((frame * SH) / SW)}
        />
      )
    }

    const level = (percent: number | null): string | undefined =>
      percent === null ? undefined : percent >= 80 ? '#E5484D' : percent >= 50 ? '#F5C542' : '#4CB363'
    const bar = (percent: number): string => {
      const filled = Math.round(percent / 20)
      return '▰'.repeat(filled) + '▱'.repeat(5 - filled)
    }
    const elapsed = isWorking ? now - usage.turnStartedAt : lastTurnMs
    const clockText = `${Math.floor(elapsed / 60_000)}:${String(Math.floor((elapsed % 60_000) / 1000)).padStart(2, '0')}`
    const stat = (label: string, value: string, color?: string): RenderElement => (
      <Text>
        <Text dimColor>{`${label} `}</Text>
        <Text color={color}>{value}</Text>
      </Text>
    )

    return (
      <Box flexDirection="column">
        {house}
        <Box flexDirection="row" flexWrap="wrap" columnGap={2}>
          <Text color={ORANGE} bold wrap="truncate-end">
            {`「${doing.label || (isWorking ? w.thinking : w.hello)}」`}
          </Text>
          {git === null ? null : (
            <Text color={gitColor(git, dirtySince, now)} dimColor={gitColor(git, dirtySince, now) === undefined}>
              {w.gitLine(git.branch, git.ahead, git.behind, git.changed + git.untracked)}
            </Text>
          )}
          {neighbors.length === 0 ? null : stat(w.neighborsLabel, neighbors.map(n => n.project).join(talk === 'zh' ? '、' : ', '))}
          {usage.model ? <Text dimColor>{usage.model}</Text> : null}
          {usage.contextPercent === null ? null : stat('ctx', `${bar(usage.contextPercent)} ${Math.round(usage.contextPercent)}%`, level(usage.contextPercent))}
          {usage.fiveHour === null ? null : stat('5h', `${Math.round(usage.fiveHour)}%`, level(usage.fiveHour))}
          {usage.sevenDay === null ? null : stat('7d', `${Math.round(usage.sevenDay)}%`, level(usage.sevenDay))}
          {usage.usd === null ? null : stat('$', usage.usd.toFixed(2))}
          {/* One group, so it reads as one thing: how long Claude has been on your latest message (or took on the last), and what it did there. */}
          <Text>
            <Text dimColor>{`${isWorking ? w.turn : w.lastTurn} `}</Text>
            {clockText}
            <Text dimColor>{` · ${w.tools} `}</Text>
            {String(usage.tools)}
            <Text dimColor>{` · ${w.edited} `}</Text>
            {w.files(usage.edits)}
            <Text dimColor>{` · ${w.ran} `}</Text>
            {w.commands(usage.runs)}
          </Text>
        </Box>
        <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
          {nearest === undefined ? <Text dimColor>{w.noDeadline}</Text> : (
            <Text color={URGENCY_COLOR[urgency(nearest.due, now)]} wrap="truncate-end">
              {` ${w.due(clip(nearest.title, 10), countdown(nearest.due, now, talk))}`}
            </Text>
          )}
          <Box flexGrow={1} />
          <Button key="panel" label={w.list} hotkey="l" onPress={() => $.ui.open({ id: PANE, title: w.paneTitle })} />
          {e.surface === 'terminal' ? null : <Button key="pet" label={w.pet} onPress={() => onPet($, 'main')} />}
          <Button key="scene" label={w.scene(w.themes[theme])} hotkey="s" onPress={() => setTheme($, 'next')} />
          {langButton}
          <Button key="hide" label={w.hide} plain dimColor onPress={() => setCollapsed($, true)} />
        </Box>
      </Box>

  on('ui.render', { component: 'Pane', requestId: CHANGES_PANE }, async ($, e) => {
    const [talk, changes, git] = await Promise.all([read($, langAtom), read($, changesAtom), read($, gitAtom)])
    const root = await $.session.root()
    const w = say(talk)
    const { Box, Text } = $.ui.resolve(e)
    const sum = totals(changes)
    return (
      <Box flexDirection="column" gap={1}>
        <Text color={ORANGE} bold>{`── ${w.changesTitle} ──`}</Text>
        <Text>{sum.files + sum.commands === 0 ? w.changesNone : w.changesSummary(sum.files, sum.added, sum.removed, sum.commands, sum.failed)}</Text>
        <Text dimColor>{git === null ? w.notARepo : w.gitLine(git.branch, git.ahead, git.behind, git.changed + git.untracked)}</Text>
        {changes.files.length === 0 ? null : (
          <Box flexDirection="column">
            <Text bold>{`${w.changesFiles}  `}<Text color={ORANGE}>{w.changesThisTurn}</Text></Text>
            {changes.files.map(f => (
              <Box key={f.path} flexDirection="row" gap={1}>
                <Text color={ORANGE}>{f.turn === changes.turn ? '●' : ' '}</Text>
                <Text wrap="truncate-start">{relativePath(f.path, root)}</Text>
                {f.isNew ? <Text color="#4CB363">new</Text> : null}
                <Text color="#4CB363">{`+${f.added}`}</Text>
                <Text color="#E5484D">{`−${f.removed}`}</Text>
                <Text dimColor>{`×${f.edits}`}</Text>
              </Box>
            ))}
          </Box>
        )}
        {changes.commands.length === 0 ? null : (
          <Box flexDirection="column">
            <Text bold>{w.changesCommands}</Text>
            {changes.commands.slice(0, 15).map((c, i) => (
              <Box key={`cmd-${i}`} flexDirection="row" gap={1}>
                <Text color={ORANGE}>{c.turn === changes.turn ? '●' : ' '}</Text>
                <Text color={c.isOk ? '#4CB363' : '#E5484D'}>{c.isOk ? '✓' : '✗'}</Text>
                <Text wrap="truncate-end">{c.text}</Text>
              </Box>
            ))}
          </Box>
        )}
      </Box>
    )
  })