clawd-sidekick

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // Clawd lives in the Desktop app; the terminal keeps Claude Code's own.
    if (e.props.hasSurvey || e.surface === 'terminal') return next(e)
    const [doing, deadlines, isCollapsed, actors, usage, game, offset, talk, theme, zone, seasonPick, holidayPick, trophies, neighbors, egg, birthday, names, git, dark] = 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($, darkRoomsAtom),
      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

    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 stat = (label: string, value: string, color?: string): RenderElement => (
      <Text>
        <Text dimColor>{`${label} `}</Text>
        <Text color={color}>{value}</Text>
      </Text>
    )
    const elapsed = isWorking ? now - usage.turnStartedAt : lastTurnMs
    const clockText = `${Math.floor(elapsed / 60_000)}:${String(Math.floor((elapsed % 60_000) / 1000)).padStart(2, '0')}`
    // Before the first reply there is nothing to time.
    const hasReply = isWorking || lastTurnMs > 0
    const limit = (label: string, percent: number | null, resetsAt: number | null): RenderElement | null =>
      percent === null ? null : stat(label, `${Math.round(percent)}%${resetNote(percent, resetsAt, now, talk)}`, level(percent))
    const gitText = 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>
    )
    const deadlineText =
      nearest === undefined ? null : (
        <Text color={URGENCY_COLOR[urgency(nearest.due, now)]} wrap="truncate-end">
          {w.due(clip(nearest.title, 10), countdown(nearest.due, now, talk))}
        </Text>
      )

    const main = actors.find(a => a.cap === null)
    const langButton = <Button key="lang" label={w.otherLanguage} onPress={() => setLang($, talk === 'zh' ? 'en' : 'zh')} />
    if (isCollapsed) {
      const now_ = doing.label && doing.label !== w.sleepy ? doing.label : w.doings[main?.doing ?? 'idle']
      const label = <Text color={ORANGE} bold wrap="truncate-end">{`${names.main ?? 'Clawd'} · ${now_}`}</Text>
      const figures = [
        usage.contextPercent === null ? null : stat('ctx', `${Math.round(usage.contextPercent)}%`, level(usage.contextPercent)),
        limit('5h', usage.fiveHour, usage.fiveHourResetsAt),
        hasReply ? stat(isWorking ? w.turn : w.lastTurn, clockText) : null,
        gitText,
      ]
      const expand = <Button key="expand" label={w.expand} variant="primary" onPress={() => setCollapsed($, false)} />
      // Folded, the band keeps what matters at a glance: what he's doing, the context and the plan, this reply, git, the next deadline.
      const { Svg } = $.ui.resolve(e)
      return (
        <Box flexDirection="row" columnGap={2} alignItems="center" flexWrap="wrap">
          <Svg source={miniClawdSvg(main?.doing ?? 'idle')} alt="Clawd" width={36} height={24} />
          {label}
          {figures}
          {deadlineText}
          <Box flexGrow={1} />
          {expand}
          {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,
      dark,
    }
    let house: RenderElement
    {
      const { Svg } = $.ui.resolve(e)
      const frame = Math.round(width * CELL_PX)
      const height = Math.round((frame * SH) / SW)
      // An image, not a frame: a new drawing takes the old one's place without a blink.
      const art = <Svg key="art" source={sceneSvg(scene, now)} alt={w.houseAlt(doing.label || w.readingInLibrary)} width={frame} height={height} />
      house =
        e.surface === 'mobile' ? (
          art
        ) : (
          <Box key="house" position="relative" flexDirection="column">
            {art}
            {houseZones($, $.ui.resolve(e) as unknown as Elements['vscode'], scene, { width, height, now, git })}
          </Box>
        )
    }

    // Other sessions on this machine, one name a project however many there are.
    const projects = new Map<string, number>()
    for (const n of neighbors) projects.set(n.project, (projects.get(n.project) ?? 0) + 1)
    const neighborText = [...projects].map(([project, n]) => (n > 1 ? `${project} ×${n}` : project)).join(talk === 'zh' ? '、' : ', ')

    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>
          {gitText}
          {neighbors.length === 0 ? null : stat(w.neighborsLabel, neighborText)}
          {usage.model ? <Text dimColor>{usage.model}</Text> : null}
          {usage.contextPercent === null ? null : stat('ctx', `${bar(usage.contextPercent)} ${Math.round(usage.contextPercent)}%`, level(usage.contextPercent))}
          {limit('5h', usage.fiveHour, usage.fiveHourResetsAt)}
          {limit('7d', usage.sevenDay, usage.sevenDayResetsAt)}
          {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. */}
          {hasReply ? (
            <Text>
              <Text dimColor>{`${isWorking ? w.turn : w.lastTurn} `}</Text>
              {clockText}
              <Text dimColor>{` · ${w.tools} `}</Text>

  on('ui.render', { component: 'Pane', requestId: CHANGES_PANE }, async ($, e, next) => {
    if (e.surface === 'terminal') return next(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>
    )
  })