lazy-panda-panel

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const els = $.ui.resolve(e)
    // Input is on the terminal and desktop, Image on the terminal alone.
    const { Input, Image } = els as Partial<Elements['terminal']>
    const hasViews = e.surface === 'terminal' || e.surface === 'desktop'
    const { path, version } = await read($, open)
    const ctx: Ctx = {
      els,
      Input: hasViews ? Input : undefined,
      Image: e.surface === 'terminal' && session.isSharp ? Image : undefined,
      surface: e.surface,
      columns: Math.max(40, e.props.bodyColumns),
      bodyRows: e.props.scroll.bodyRows,
      pal: PALETTE,
      list: await read($, files),
      path,
      version,
      d: path === null ? undefined : docs.get(path),
      v: await read($, view),
      sel: await read($, selection),
      notes: await read($, comments),
      change: await read($, changed),
      isAuto: await read($, autoOpen),
      picture: null,
    }
    ctx.picture = await selectedPicture($, ctx.d, ctx.sel, version, ctx.v.raw === true)
    const { Box, Text } = els
    const drafts = ctx.notes.filter(c => c.status === 'draft')
    const section =
      ctx.list.length === 0
        ? emptySection(ctx)
        : !ctx.d
          ? { bar: <Text color={ctx.pal.dim}>Loading…</Text>, body: <Text> </Text> }
          : ctx.d.kind === 'error'
            ? ctx.d.isNotice
              ? { bar: <Text color={ctx.pal.warning} bold>ⓘ {baseName(ctx.d.path)} is over 4 MB, so it needs Python to open</Text>, body: <Text color={ctx.pal.text}>{ctx.d.message}</Text> }
              : { bar: <Text color={ctx.pal.error} bold>Couldn’t show {baseName(ctx.d.path)}</Text>, body: <Text color={ctx.pal.subtle}>{ctx.d.message}</Text> }
            : ctx.d.kind === 'image'
              ? imageSection($, ctx, ctx.d)
              : ctx.d.kind === 'lines'
                ? linesSection($, ctx, ctx.d, Math.min(drafts.length, MAX_LISTED))
                : gridSection($, ctx, ctx.d, Math.min(drafts.length, MAX_LISTED))
    const rule = <Text color={ctx.pal.dim}>{'─'.repeat(ctx.columns)}</Text>
    const actions = actionsRow($, ctx)
    const keyLine = keysRow(ctx, section.keys ?? [])
    const sent = ctx.notes.filter(c => c.status === 'sent').length
    // The three drawing modules, each named by a fixed path, on the surfaces that draw them; elsewhere, plain text.
    let fileBar: RenderNode | null | undefined = <Text bold>{baseName(path ?? 'Lazy Panda Panel')}</Text>
    let document: RenderNode | null | undefined = section.body
    let spinner: RenderNode | null | undefined = null
    if (e.surface === 'terminal' || e.surface === 'desktop') {
      // Each view is the call its JSX compiles to, with the element taken from the table right there and a fixed module path.
      fileBar = h($.ui.resolve(e).Client, { module: './filebar.tsx', key: 'file-tabs', props: fileBarProps(ctx) })
      if (section.viewer) {
        document = h($.ui.resolve(e).Client, { module: './viewer.tsx', key: 'viewer', props: section.viewer.props, height: section.viewer.height })
      }
      if (sent > 0) {
        const spinnerProps: SpinnerProps = { text: `Claude is working on ${plural(sent, 'comment')}…`, color: ctx.pal.claude, glow: ctx.pal.warning }
        spinner = h($.ui.resolve(e).Client, { module: './spinner.tsx', key: 'spinner', props: spinnerProps })
      }
    }
    return (
      <Box flexDirection="column" width={ctx.columns}>
        {fileBar}
        {section.bar}
        {rule}
        {document}
        {section.after ?? null}
        {section.footnote ? <Text color={ctx.pal.warning} wrap="wrap">{section.footnote}</Text> : null}
        <Box marginTop={isCompact(ctx) ? 0 : 1}>{commentRow($, ctx)}</Box>
        <Box marginTop={isCompact(ctx) ? 0 : 1}>{commentList($, ctx)}</Box>
        {actions && <Box marginTop={isCompact(ctx) ? 0 : 1}>{actions}</Box>}
        {spinner}
        {keyLine && !isCompact(ctx) && (
          <Box marginTop={1} flexDirection="column">
            {rule}
            {keyLine}
          </Box>
        )}
      </Box>
    )
  })

function commentRow($: EngineInterface, ctx: Ctx) {
  const { Box, Text } = ctx.els
  const { pal, sel, d, Input } = ctx
  if (!sel) {
    if (!d || d.kind === 'error') return null
    // A box that looks like where comments go, saying how to start one.
    return (
      <Box {...(isCompact(ctx) ? {} : { borderStyle: 'round', borderColor: pal.dim, paddingX: 1 })}>
        <Text wrap="truncate-end">
          <Text color={pal.comment} bold>✎ Comment </Text>
          <Text color={pal.subtle}>· {d.kind === 'image' ? 'click the picture' : `click or drag over ${d.kind === 'grid' ? 'cells' : 'lines'}`} above, then type here</Text>
        </Text>
      </Box>
    )
  }
  if (!Input) return <Text color={pal.subtle}>Comments can be added from the terminal.</Text>
  // A selection that already carries a waiting comment edits that comment.
  const editing = ctx.notes.find(c => c.status === 'draft' && isAt(c, sel))
  const key = commentKey(ctx.notes, sel)
  const short = sel.sheet !== undefined ? sel.label.slice(sel.label.lastIndexOf('!') + 1) : sel.label
  // Exactly what the comment will quote to Claude, on one or two lines: text the view cuts off (a long cell, a wide code line) is seen here.
  const flat = sel.quote.replace(/\n/g, ' ⏎ ').replace(/ {4,}/g, run => ` ·${run.length} spaces· `)
  const lead = `Quoted for Claude (${plural(sel.quote.length, 'character')}): `
  const room = Math.max(10, (ctx.columns - 4) * 2 - lead.length - 16)
  const shown = flat.length > room ? `“${flat.slice(0, room)}” … and ${flat.length - room} more characters, also sent (Edit before sending shows them all)` : `“${flat}”`
  return (
    <Box flexDirection="column" {...(isCompact(ctx) ? {} : { borderStyle: 'round', borderColor: pal.comment, paddingX: 1 })}>
      <Box flexDirection="row">
      <Box flexShrink={0}>
        <Text color={pal.comment} bold>✎ </Text>
      </Box>
      <Input
        key={key}
        label={`${editing ? 'Edit comment on' : 'Comment on'} ${cutTo(sanitizeLine(short), clamp(Math.floor(ctx.columns * 0.25), 12, 80))}`}
        placeholder={editing ? 'Clear it and press Enter to delete · Esc: back to Claude' : 'What should change? · Esc: back to Claude'}
        submitLabel={editing ? 'Save' : 'Add'}
        {...(editing ? { value: editing.text } : {})}
        autoFocus
        onSubmit={value => void saveComment($, value, d?.kind === 'grid')}
      />
      </Box>
      {sel.quote ? (
        <Text color={pal.dim} wrap="wrap">
          {lead}
          {shown}
        </Text>
      ) : null}
    </Box>
  )
}

function commentList($: EngineInterface, ctx: Ctx) {
  const { Box, Text, Button } = ctx.els
  const { pal, sel, d, path, columns } = ctx
  const drafts = ctx.notes.filter(c => c.status === 'draft')
  if (drafts.length === 0) {
    if (!d || d.kind === 'error' || isCompact(ctx)) return null
    return (
      <Box flexDirection="column">
        {sectionHeader(ctx, 'Comments', '')}
        <Text color={pal.dim}>  No comments yet. Select something and say what to change.</Text>
      </Box>
    )
  }
  const listed = drafts.slice(0, MAX_LISTED)
  const editing = sel ? drafts.find(c => isAt(c, sel)) : undefined
  const labelWidth = clamp(Math.max(...listed.map(c => strWidth(noteLabel(c, path)))), 6, 24)
  return (
    <Box flexDirection="column">
      {sectionHeader(ctx, `Comments · ${drafts.length}`, 'click one to review or edit it')}
      {listed.map((c, i) => {
        const isOpen = editing?.id === c.id
        return (
          <Box key={`note-${c.id}`} flexDirection="row" justifyContent="space-between" width={columns}>
            <Box flexDirection="row">
              <Text color={c.isStale ? pal.warning : isOpen ? pal.accent : pal.comment} bold>{c.isStale ? '⚠ ' : isOpen ? '▸ ' : '● '}</Text>
              <Button
                key={`open-${c.id}`}
                label={`${String(i + 1).padStart(2)}  ${padRight(sanitizeLine(noteLabel(c, path)), labelWidth)}`}
                plain
                onPress={press => void jumpTo($, c.id, press.surface)}
              />
              <Text bold={isOpen} color={pal.text} wrap="truncate-end">
                {' '}
                {c.isStale ? <Text color={pal.warning}>(text changed) </Text> : null}
                {c.text}
              </Text>
            </Box>
            <Button
              key={`del-${c.id}`}
              label="✕"
              plain
              dimColor
              onPress={async () => {
                await update($, comments, old => old.filter(one => one.id !== c.id))
                $.ui.toast('Comment deleted')
              }}
            />
          </Box>
        )
      })}
      {drafts.length > listed.length && <Text color={pal.subtle}>   … and {drafts.length - listed.length} more</Text>}
    </Box>
  )
}

function sectionHeader(ctx: Ctx, title: string, detail: string) {
  const { Text } = ctx.els
  const head = ` ${title} `
  const tail = detail ? ` ${detail} ` : ''
  return (
    <Text wrap="truncate-end">
      <Text color={ctx.pal.dim}>──</Text>
      <Text color={ctx.pal.comment} bold>{head}</Text>
      <Text color={ctx.pal.subtle}>{tail}</Text>
      <Text color={ctx.pal.dim}>{'─'.repeat(Math.max(2, ctx.columns - 2 - head.length - tail.length))}</Text>
    </Text>
  )
}

function actionsRow($: EngineInterface, ctx: Ctx) {
  const { Box, Text, Button } = ctx.els
  const { pal } = ctx
  const drafts = ctx.notes.filter(c => c.status === 'draft').length
  const queued = ctx.notes.filter(c => c.status === 'queued').length
  const parts: JSX.Element[] = []
  if (drafts > 0) {
    parts.push(
      <Box key="send-row" flexDirection="row" columnGap={2}>
        <Button key="send" label={`➤ Send ${plural(drafts, 'comment')} to Claude`} variant="primary" onPress={() => void deliver($, 'submit')} />
        <Button key="fill" label="Edit before sending" plain onPress={() => void deliver($, 'fill')} />
      </Box>,
    )
  }
  if (queued > 0) {
    parts.push(
      <Box key="queued-row" flexDirection="row" columnGap={2}>
        <Text color={pal.subtle}>✎ {plural(queued, 'comment')} in the prompt box: press Enter there to send</Text>
        <Button key="unqueue" label="↩ back to drafts" plain onPress={() => void backToDrafts($)} />
      </Box>,
    )
  }
  return parts.length === 0 ? null : <Box flexDirection="column">{parts}</Box>
}

function keysRow(ctx: Ctx, keys: [string, string][]) {
  const { Text } = ctx.els
  const { pal } = ctx
  if (keys.length === 0) return null
  // Key hints as chips: the key on a band, what it does after it.
  return (
    <Text wrap="truncate-end">
      {keys.map(([key, what], i) => (
        <Text key={`k${i}`}>
          <Text backgroundColor={pal.band || undefined} color={pal.text} bold inverse={!pal.band}>{` ${key} `}</Text>
          <Text color={pal.subtle}> {what}{i < keys.length - 1 ? '   ' : ''}</Text>
        </Text>
      ))}
    </Text>
  )
}