session

import type { Register } from 'claude-code'

// Drawn like session by djavrell (pane), as modscode read it from the mod's code:
// https://modscode.com/gallery/djavrell-session/
// 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: "Session" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text } = $.ui.resolve(e)
    const icon = '…'
    const type = '…'
    const description = '…'
    const icon2 = '…'
    const type2 = '…'
    const description2 = '…'
    const icon3 = '…'
    const type3 = '…'
    const description3 = '…'
    const skillList = '…'
    const added = '…'
    const deleted = '…'
    const path = '…'
    const added2 = '…'
    const deleted2 = '…'
    const path2 = '…'
    const added3 = '…'
    const deleted3 = '…'
    const path3 = '…'
    const length = '…'
    const n = '…'
    const effort = '…'
    const usd = '…'
    const br = '…'
    const percentUsed = '…'
    const percentUsed2 = '…'
    const fmtLeft = '…'
    const percentUsed3 = '…'
    const fmtElapsed = '…'
    const ctxTail = '…'
    return (
      <Box flexDirection="column">
        <Box flexDirection="column" flexGrow={1}>
          <Text bold>
            Agents
          </Text>
          <Text dimColor>
            None.
          </Text>
          <Box flexDirection="row" gap={1}>
            <Text>
              {icon}
            </Text>
            <Text>
              {type}
            </Text>
            <Text wrap="truncate-end" dimColor>
              {description}
            </Text>
          </Box>
          <Box flexDirection="row" gap={1}>
            <Text>
              {icon2}
            </Text>
            <Text>
              {type2}
            </Text>
            <Text wrap="truncate-end" dimColor>
              {description2}
            </Text>
          </Box>
          <Box flexDirection="row" gap={1}>
            <Text>
              {icon3}
            </Text>
            <Text>
              {type3}
            </Text>
            <Text wrap="truncate-end" dimColor>
              {description3}
            </Text>
          </Box>
          <Text>
            {" "}
          </Text>
          <Text bold>
            Skills
          </Text>
          <Text dimColor>
            None.
          </Text>
          <Text wrap="wrap">
            {skillList}
          </Text>
          <Text>
            {" "}
          </Text>
          <Text bold>
            Changes
          </Text>
          <Text dimColor>
            No changes.
          </Text>
          <Box flexDirection="row" gap={1}>
            <Text>
              new
            </Text>
            <Text dimColor>
              bin
            </Text>
            <Text>
              +
              {added}
            </Text>
            <Text>
              -
              {deleted}
            </Text>
            <Text wrap="truncate-start">
              {path}
            </Text>
          </Box>
          <Box flexDirection="row" gap={1}>
            <Text>
              new
            </Text>
            <Text dimColor>
              bin
            </Text>
            <Text>
              +
              {added2}
            </Text>
            <Text>
              -
              {deleted2}
            </Text>
            <Text wrap="truncate-start">
              {path2}
            </Text>
          </Box>
          <Box flexDirection="row" gap={1}>
            <Text>
              new
            </Text>
            <Text dimColor>
              bin
            </Text>
            <Text>
              +
              {added3}
            </Text>
            <Text>
              -
              {deleted3}
            </Text>
            <Text wrap="truncate-start">
              {path3}
            </Text>
          </Box>
          <Text dimColor>
            {length}
            {" files, +"}
            {`${n}${added}`}
            {" -"}
            {`${n}${deleted}`}
          </Text>
          <Text>
            {" "}
          </Text>
        </Box>
        <Text bold>
          Status
        </Text>
        <Box flexDirection="row" gap={2}>
          <Text>
            {"🤖 "}
            Claude
          </Text>
          <Text>
            {"🧠 "}
            {effort}
          </Text>
          <Text>
            💰 $
            {usd}
          </Text>
        </Box>
        <Box flexDirection="row" gap={2}>
          <Text>
            {"⎇ "}
            {br}
          </Text>
          <Text>
            <Text>
              {"⚡ "}
            </Text>
            <Text>
              {percentUsed}
              %
            </Text>
            <Text dimColor>
              /
            </Text>
            <Text>
              {percentUsed2}
              %
            </Text>
            <Text>
              {" ↺ "}
              {fmtLeft}
            </Text>
          </Text>
          <Text>
            {"💳 "}
            {percentUsed3}
            %
          </Text>
          <Text>
            {"⏱ "}
            {fmtElapsed}
          </Text>
        </Box>
        <Text wrap="truncate-end">
          [
          <Text>
            ████████
          </Text>
          ░░░░░░░░
          ]
          {ctxTail}
        </Text>
      </Box>
    )
  })
}