roclaude

  on('ui.render', { component: 'Pane', requestId: ACTIVITY_PANE }, async ($, e) =>
    drawActivity($, e, e.props.bodyColumns ?? e.viewport?.columns ?? 50),
  )

async function drawActivity($: EngineInterface, e: Parameters<EngineInterface['ui']['resolve']>[0], width: number) {
  const { Box, Button, Code, Text } = $.ui.resolve(e)
  const list = await read($, touched)
  const working = await read($, isWorking)
  const snapshots = await read($, history)
  const { title, detail } = summarize(list)
  const isBusy = working || list.some(one => one.isActive)

  const color = { read: 'merged', edited: 'claude', created: 'success', changed: 'suggestion' } as const
  const label = { read: 'Read', edited: 'Edited', created: 'Created', changed: 'Changed' } as const
  const status = isBusy ? 'WORKING' : list.length > 0 ? 'DONE' : 'IDLE'
  const statusColor = isBusy ? 'warning' : list.length > 0 ? 'claude' : 'inactive'

  const changes = list.filter(one => one.action !== 'read')
  const chosen = (await read($, selected)) ?? changes[changes.length - 1]?.path ?? null
  const current = list.find(one => one.path === chosen) ?? null
  const at = current === null ? -1 : changes.findIndex(one => one.path === current.path)
  const pick = (path: string) => update($, selected, () => path)

  const services: string[] = []
  for (const one of list) if (!services.includes(serviceOf(one.path))) services.push(serviceOf(one.path))

  // The selected item's change.
  let body = <Text dimColor>Select something Claude touched to see what changed.</Text>
  if (current !== null && current.kind === 'script') {
    const edits = snapshots.filter(one => normalizePath(one.path) === current.path && one.after !== null)
    const first = edits[0]
    const last = edits[edits.length - 1]
    if (current.action === 'read' || first === undefined || last === undefined) {
      body = <Text dimColor>Claude read this script and did not change it.</Text>
    } else {
      const diff = lineDiff(first.source, last.after ?? '')
      body = (
        <Box flexDirection="column">
          <Text>
            <Text color="success">+{diff.added}</Text> <Text color="error">−{diff.removed}</Text>
            <Text dimColor>
              {' '}
              over {edits.length} edit{edits.length === 1 ? '' : 's'}
            </Text>
          </Text>
          <Box borderStyle="round" borderColor="inactive">
            {diff.unified === '' ? (
              <Text dimColor>No line changes.</Text>
            ) : (
              <Code key={`diff-${current.path}`} source={diff.unified} format="diff" language="lua" path={leafOf(current.path)} />
            )}
          </Box>
        </Box>
      )
    }
  } else if (current !== null) {
    const { propsBefore: before, propsAfter: after } = current
    if (current.action === 'read') body = <Text dimColor>Claude looked at this object and did not change it.</Text>
    else if (before === undefined && after === undefined) {
      body = <Text dimColor>Claude changed this with Luau; its properties could not be read.</Text>
    } else if (after === null) body = <Text color="error">Deleted.</Text>
    else if (before === null || before === undefined) body = <Text color="success">Created by Claude.</Text>
    else {
      const rows = after === undefined ? [] : propChanges(before, after)
      body =
        rows.length === 0 ? (
          <Text dimColor>No property changes seen.</Text>
        ) : (
          <Box flexDirection="column" borderStyle="round" borderColor="inactive" paddingX={1}>
            {rows.slice(0, 12).map(row => (
              <Box key={`prop-${row.name}`} justifyContent="space-between" gap={2}>
                <Text dimColor>{row.name}</Text>
                <Text wrap="truncate-start">
                  <Text color="error">{row.before}</Text>
                  <Text dimColor> → </Text>
                  <Text color="success">{row.after}</Text>
                </Text>
              </Box>
            ))}
            {rows.length > 12 && <Text dimColor>…and {rows.length - 12} more</Text>}
          </Box>
        )
    }
  }

  return (
    <Box flexDirection="column" width={width}>
      <Box borderStyle="round" borderColor={isBusy ? 'warning' : 'inactive'} paddingX={1} flexDirection="column">
        <Text bold color={statusColor}>
          {status}
        </Text>
        <Text bold>{title}</Text>
        {detail !== '' && <Text dimColor>{detail}</Text>}
      </Box>

      <Box justifyContent="space-between" marginTop={1}>
        <Text bold dimColor>
          CLAUDE TOUCHED
        </Text>
        <Text bold dimColor>
          {list.length} {list.length === 1 ? 'ITEM' : 'ITEMS'}
        </Text>
      </Box>
      {list.length === 0 && <Text dimColor>Scripts and objects Claude reads or changes in Studio show up here.</Text>}
      {services.map(service => (
        <Box flexDirection="column" key={`svc-${service}`}>
          <Text dimColor>{service}</Text>
          {list
            .filter(one => serviceOf(one.path) === service)
            .map(one => {
              const isChosen = current?.path === one.path
              const where = normalizePath(one.path).split('.').slice(1, -1).join('.')
              const badge = one.isActive ? (one.activeAs === 'reading' ? 'merged' : 'claude') : color[one.action]
              return (
                <Box
                  key={`row-${one.path}`}
                  justifyContent="space-between"
                  alignItems="center"
                  gap={1}
                  paddingLeft={1}
                  backgroundColor={isChosen ? 'subtle' : undefined}
                >
                  <Box gap={1} flexShrink={1} alignItems="center">
                    <Text bold color={one.kind === 'script' ? 'suggestion' : 'success'}>
                      {one.kind === 'script' ? 'LUA' : 'OBJ'}
                    </Text>
                    <Button key={`pick-${one.path}`} label={leafOf(one.path)} plain onPress={() => pick(one.path)} />
                    {where !== '' && (
                      <Text dimColor wrap="truncate-end">
                        {where}
                      </Text>
                    )}
                  </Box>
                  <Box flexShrink={0} paddingX={1} backgroundColor={badge}>
                    <Text bold color="inverseText">
                      {one.isActive ? `${one.activeAs}…` : label[one.action]}
                    </Text>
                  </Box>
                </Box>
              )
            })}
        </Box>
      ))}

      {current !== null && (
        <Box flexDirection="column" marginTop={1}>
          <Text bold color="claude">
            {at >= 0 ? `CHANGE ${at + 1} OF ${changes.length}` : 'READ ONLY'}
          </Text>
          <Text bold>{leafOf(current.path)}</Text>
          <Text dimColor>
            {current.path} · {label[current.action]}
          </Text>
        </Box>
      )}
      <Box marginTop={current === null ? 1 : 0}>{body}</Box>

      <Box marginTop={1} gap={1}>
        {changes.length > 1 && (
          <>
            <Button key="prev" label="Prev" onPress={() => pick(changes[Math.max(0, at - 1)]!.path)} />
            <Button
              key="next"
              label="Next"

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const seen = await read($, studio)
    if (e.props.hasSurvey || (await read($, isHidden))) return next(e)
    const { Box, Button, Text } = $.ui.resolve(e)
    const width = e.props.bodyColumns ?? e.viewport?.columns ?? 80

    // A filled tag: the band's status words, like a progress label.
    const pill = (key: string, text: string, color: 'warning' | 'success' | 'error' | 'inactive' | 'merged') => (
      <Box key={key} backgroundColor={color} paddingX={1}>
        <Text bold color="inverseText">
          {text}
        </Text>
      </Box>
    )
    const hide = <Button key="hide" label="Hide" plain onPress={() => update($, isHidden, () => true)} />

    if (seen === null) {
      return (
        <Box width={width} justifyContent="space-between" alignItems="center">
          <Box gap={1} alignItems="center">
            <Text color="inactive">●</Text>
            <Text bold>Roblox Studio</Text>
            {pill('state', 'Not connected', 'inactive')}
            <Text dimColor>Open a place with the MCP server on</Text>
          </Box>
          {hide}
        </Box>
      )
    }

    const lint = await read($, lastLint)
    const list = await read($, history)
    const members = await read($, team)
    const report = await read($, remotes)
    const unchecked = report === null ? 0 : orderHandlers(report).bad
    const issues = lint === null ? 0 : lint.issues.length
    const plural = (n: number, word: string) => `${n} ${word}${n === 1 ? '' : 's'}`

    // One colour says how the place is doing: red needs action, yellow a look.
    const errors = seen.untested === 0 ? (seen.errors ?? 0) : 0
    const health = unchecked > 0 || errors > 0 ? 'error' : seen.untested > 0 || issues > 0 ? 'warning' : 'success'

    const left = [
      <Text key="dot" color={health}>
        ●
      </Text>,
      <Text key="name" bold>
        {seen.name ?? 'Roblox Studio'}
      </Text>,
    ]
    if (seen.mode === 'play') left.push(pill('mode', 'Playing', 'merged'))
    else if (seen.mode === 'edit') left.push(pill('mode', 'Edit', 'inactive'))
    if (seen.untested > 0) left.push(pill('result', `${seen.untested} untested`, 'warning'))
    else if (errors > 0) left.push(pill('result', plural(errors, 'error'), 'error'))
    else if (seen.errors !== null) left.push(pill('result', 'Tested', 'success'))
    if (unchecked > 0) {
      left.push(
        <Text key="remotes" color="error">
          {plural(unchecked, 'unchecked remote')}
        </Text>,
      )
    }
    if (issues > 0) {
      left.push(
        <Text key="issues" color="warning">
          {plural(issues, 'issue')} in {shortName(lint?.file ?? '')}
        </Text>,
      )
    }
    if (members.length > 0) {
      left.push(
        <Text key="team" dimColor>
          {members.length <= 2 ? members.join(', ') : plural(members.length, 'collaborator')}
        </Text>,
      )
    }
    if (list.length > 0) {
      left.push(
        <Text key="undoable" dimColor>
          {list.length} undoable
        </Text>,
      )
    }

    const right = []
    if ((await read($, touched)).length > 0) {
      // Runs the command, so the view shows in a pane or, where none can be
      // placed, as a card in the chat.
      right.push(
        <Button
          key="activity"
          label="Activity"
          onPress={() => {
            void $.command.run({ command: 'roclaude', args: 'activity' }).catch(() => undefined)
          }}
        />,
      )
    }
    if (seen.untested > 0 && seen.mode !== 'play') {
      right.push(<Button key="test" label="Test" variant="primary" onPress={() => $.prompt.submit({ text: TEST_PROMPT })} />)
    }
    if (list.length > 0) {
      right.push(
        <Button
          key="undo"
          label="Undo"
          onPress={async () => {
            $.ui.toast(await undo($, false))
          }}
        />,
      )
    }
    right.push(hide)

    return (
      <Box width={width} justifyContent="space-between" alignItems="center">
        <Box gap={1} alignItems="center" flexWrap="wrap" flexShrink={1}>
          {left}
        </Box>
        <Box gap={1} alignItems="center" flexShrink={0}>
          {right}
        </Box>
      </Box>
    )
  })