file-explorer

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    if (e.surface !== 'desktop' && e.surface !== 'terminal') return $.ui.resolve(e).Text({ children: 'Files pane is available in Claude Desktop and the terminal.' })
    const elements = $.ui.resolve(e)
    const { Box, Text, Button, Input, Code, Markdown, Client } = elements
    const Svg = 'Svg' in elements ? elements.Svg : undefined
    try {
      await loadTheme($)
      if (!e.props.isFocused) { selectionActive = false; lastFileClick = undefined }
      const t: Tree = await current($)
      // No blur event: the pane losing the keyboard (a click outside) hides the open menu. Drawing only, no state write.
      if (paneFocused && !e.props.isFocused && t.menu) blurredMenu = t.menu
      paneFocused = e.props.isFocused
      paneView.offset = e.props.scroll.offset; paneView.body = e.props.scroll.bodyRows; paneView.mono = e.surface === 'desktop' && !!T.editorMono; paneView.fit = e.surface === 'desktop' && !paneView.mono ? T.textFit : 1
      if (findShown && !t.preview?.editing) { findShown = false; $.ui.status(undefined) }
      if (t.preview) {
        const p = t.preview
        const rel =p.path.slice(t.root.replace(/[\\/]+$/, '').length + 1)
        return (
          <Box flexDirection="column" paddingX={1} gap={1}>
            <Box flexDirection="row" justifyContent="space-between">
              <Client key="preview-navigation" module="./preview-navigation.tsx" props={{}} />
              {p.editable && <Box flexDirection="row" gap={1}>
                {p.editing && <Button key="preview-wrap" label={editorProps(p).wrap ? 'Wrap: on' : 'Wrap: off'} variant="secondary" onPress={() => update($, tree, (cur: Tree) => cur.preview ? { ...cur, preview: { ...cur.preview, editorWrap: !editorProps(cur.preview).wrap } } : cur)} />}
                <Button key="preview-edit" label="Edit" variant={p.editing ? 'primary' : 'secondary'} onPress={() => update($, tree, (cur: Tree) => ({ ...cur, preview: cur.preview ? { ...cur.preview, editing: true, confirmBack: false } : undefined }))} />
                <Button key="preview-save" label={p.busy ? 'Saving…' : 'Save'} variant="primary" onPress={() => savePreview($, p.request)} />
              </Box>}
            </Box>
            <Text bold wrap="wrap">{rel}{p.dirty ? ' • Unsaved' : ''}</Text>
            {p.confirmBack && <Box flexDirection="column" gap={1}>
              <Text>Save changes before returning to Files?</Text>
              <Box flexDirection="row" gap={1}>
                <Button key="preview-save-back" label="Save and return" variant="primary" onPress={async () => { await savePreview($, p.request); const latest = (await current($)).preview; if (latest?.request === p.request && !latest.dirty && !latest.busy && !latest.error) await backToFiles($) }} />
                <Button key="preview-discard" label="Discard changes" onPress={() => backToFiles($, true)} />
                <Button key="preview-keep-editing" label="Keep editing" onPress={() => update($, tree, (cur: Tree) => ({ ...cur, preview: cur.preview ? { ...cur.preview, confirmBack: false } : undefined }))} />
              </Box>
            </Box>}
            {p.error && <Text color="red" wrap="wrap">{p.error}</Text>}
            {p.kind === 'text' && (
              <Box flexDirection="row" gap={1}>
                {p.markdown && <Button key="preview-rendered" label="Preview" plain onPress={() => update($, tree, (cur: Tree) => ({ ...cur, preview: cur.preview ? { ...cur.preview, rendered: true, editing: false } : undefined }))} />}
                <Button key="preview-source" label="Source" plain onPress={() => update($, tree, (cur: Tree) => ({ ...cur, preview: cur.preview ? { ...cur.preview, rendered: false, editing: false } : undefined }))} />
              </Box>
            )}
            {p.kind === 'loading' ? <Text dimColor>Loading preview…</Text>
              : p.kind === 'image' && Svg ? <Svg source={p.content} alt={`Preview of ${rel}`} />
              : p.kind === 'image' ? <Text dimColor>Image preview is available in Claude Desktop.</Text>
              : p.kind === 'text' && p.editing ? <Box flexDirection="column">
                <Text dimColor>{`Ln ${(p.editorLine ?? 0) + 1}, Col ${(p.editorCol ?? 0) + 1}${p.editorSelected ? ` (${p.editorSelected} selected)` : ''} · ${ENCODINGS[p.encoding ?? ''] ?? p.encoding ?? ''} · ${(p.eol ?? 'lf').toUpperCase()} · Ctrl+S Save · Ctrl+Z Undo · Ctrl+Y Redo · Ctrl+V Paste`}</Text>
                {(() => {
                  const props = editorFor(p, Math.max(8, Math.min(40, e.props.scroll.bodyRows - 8)))
                  const client = <Client key="file-editor" module="./editor.tsx" width="100%" props={props} />
                  const geo = props.mono && Svg ? editorGeo.get(p.request) : undefined
                  if (!geo) return <Box flexDirection="column" position="relative">
                    <Box key="editor-caret" position="absolute" top={p.editorRow ?? 0} height={1} width={1} />
                    {client}
                  </Box>
                  // Monospace mode: the text is Code rows here, the Client lies on top for keys, pointer, caret and highlights.
                  const text = props.text
                  const gutter = Math.max(4, String(text.split('\n').length).length + 2)
                  const cells = Math.max(8, geo.columns - gutter)
                  const vrows = layout(text, geo.limit)
                  const from = Math.max(0, props.top - 20)
                  const to = Math.min(vrows.length, props.top + props.span + 20)
                  const caretLine = vrows[Math.min(vrows.length - 1, p.editorRow ?? 0)]?.line
                  const kinds = highlight(text, props.ext)
                  const sel: [number, number] | undefined = p.editorCaret !== undefined && p.editorAnchor !== undefined && p.editorCaret !== p.editorAnchor
                    ? [Math.min(p.editorCaret, p.editorAnchor), Math.max(p.editorCaret, p.editorAnchor)] : undefined
                  return <Box flexDirection="column" position="relative" height={vrows.length}>
                    {from > 0 && <Box key="code-top" height={from} flexShrink={0} />}
                    {vrows.slice(from, to).map((r, i) => {
                      const end = text[r.end - 1] === '\n' ? r.end - 1 : r.end
                      return <Box key={`code-row:${from + i}`} height={1} flexShrink={0} overflow="hidden" flexDirection="row" backgroundColor={r.line === caretLine ? '#151b23' : undefined}>
                        <Box width={gutter} flexShrink={0} />
                        <Box flexGrow={1} height={1} overflow="hidden">{Svg && (text.slice(r.start, end).trim() || from + i === p.editorRow || sel) ? <Svg source={rowSvg(text.slice(0, end), kinds, r.start, geo.left, cells, sel, from + i === p.editorRow ? p.editorCaret : undefined)} alt="editor row" width={Math.round(cells * T.cellW)} height={T.cellPx} /> : null}</Box>
                      </Box>
                    })}
                    <Box key="editor-caret" position="absolute" top={p.editorRow ?? 0} height={1} width={1} />
                    <Box position="absolute" top={0} left={0} width="100%" height={vrows.length}>{client}</Box>
                  </Box>
                })()}
              </Box>
              : p.kind === 'text' ? (p.content ? (p.markdown && p.rendered ? <Box flexDirection="column">{markdownChunks(p.content).map((part, index) => <Box key={`markdown:${index}`}>{part.code ? <Code source={part.text} language={part.code} /> : <Markdown text={part.text} />}</Box>)}</Box> : <Box flexDirection="column">{sourceChunks(p.content).map((part, index) => <Box key={`source:${index}`}><Code source={part.text} path={p.path} startLine={part.line} /></Box>)}</Box>) : <Text dimColor>Empty file.</Text>)
              : <Text color={p.kind === 'error' ? 'red' : undefined}>{p.content}</Text>}
            {p.notice && <Text dimColor>{p.notice}</Text>}
          </Box>
        )
      }
      const rows = flatten(t)
      const shown = rows.slice(0, MAX_ROWS)

      const setFilter = (v: string) => {
        lastFileClick = undefined
        if (v.trim() && searchIndex?.root !== t.root) buildSearchIndex($, t.root).catch(() => {})
        return update($, tree, (cur: Tree) => ({ ...cur, filter: v, picked: '' }))
      }

      const footer =
        (rows.length > MAX_ROWS ? `Showing ${MAX_ROWS} of ${rows.length}` : `${rows.length} items`) + ` | ${themeStatus}`

      const rootKey = norm(t.root)
      const isIgnored = (path: string) => {
        let key = norm(path)
        while (key.length > rootKey.length) {
          if (t.git[key] === 'I') return true
          key = key.slice(0, key.lastIndexOf('/'))
        }
        return false
      }

      // The highlight ends are in-flow cells; an absolute layer over the row would paint over its icon.
      // alignSelf flex-start pins the cell to the row's top: the desktop draws it zero-high, and centred it starts half a row low.
      const rowCap = (left: boolean, isPicked: boolean) => {
        if (!Svg) return <Box width={T.padX} />
        const color = isPicked ? T.bgPicked : T.bgHover
        return (
          <Box width={1} position="relative" alignSelf="flex-start">
            <Svg source={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 ${T.rowH}" width="8" height="${T.rowH}"/>`} alt="" width={8} height={T.rowH} />
            <Box position="absolute" top={0} left={0} display={isPicked ? 'flex' : 'none'} hover={isPicked ? undefined : { display: 'flex' }}>
              <Svg source={capSvg(color, left)} alt={isPicked ? 'row-cap-picked' : 'row-cap'} width={8} height={T.rowH} />
            </Box>
          </Box>
        )
      }
      // Drawn last in the rows container, so no row paints over it. Rows are rowH px tall and Box offsets are whole cells of cellPx px.
      const menuAt = t.menu && t.menu !== blurredMenu ? shown.findIndex(r => r.path === t.menu) : -1
      const menuPanel = (row: Row, idx: number) => {
        const mode = t.menuMode
        const edit = mode === 'rename' || mode === 'newfile' || mode === 'newfolder'
        const groups = menuGroups($, t, row, e.surface)
        const lines = edit ? 1 : mode === 'delete' ? 3 : groups.flat().length + groups.length - 1
        const cells = (rows: number) => Math.round((rows * T.rowH) / T.cellPx)
        const { offset = 0, bodyRows = 30 } = (e.props as any).scroll ?? {}
        // Beside its row, ending just left of the "…" (right cap cell + 2 trigger cells); flipped up near the bottom.
        const top = 4 + cells(idx) - offset + lines + 2 > bodyRows ? Math.max(0, cells(idx + 1) - lines - 2) : cells(idx)
        return (
          <Box key="menu-panel" position="absolute" top={top} right={3} width={MENU_W} flexDirection="column" backgroundColor={T.menuBg} borderStyle="round" borderColor={T.menuBorder} paddingX={1}>
            {edit && (
              <Input key="menu-input" label={mode === 'newfile' ? 'New file ' : mode === 'newfolder' ? 'New folder ' : ''} value={t.menuText ?? ''} onInput={(v: string) => update($, tree, (cur: Tree) => ({ ...cur, menuText: v }))}
                onSubmit={async (v: string) => {
                  await update($, tree, (cur: Tree) => ({ ...cur, ...NO_MENU, open: mode === 'rename' || cur.open.includes(row.path) ? cur.open : [...cur.open, row.path] }))
                  await fileOp($, mode as string, row.path, v)
                }} />
            )}
            {mode === 'delete' && <Text>Move to Recycle Bin?</Text>}
            {groups.map((group, g) => (
              <Box key={`menu-group-${g}`} flexDirection="column">
                {/* The desktop draws ─ 1.15 cells wide; a wrapping Box would move the rule to the top of its cell. */}
                {g > 0 && <Text color={T.menuBorder}>{'─'.repeat(Math.floor((MENU_W - 4) / (e.surface === 'desktop' ? 1.15 : 1)))}</Text>}
                {group.map(item => (
                  <Box key={`menu-row-${item.id}`} hover={{ backgroundColor: T.menuHover }}>
                    <Client key={`m:${item.id}`} module="./menu-item.tsx" width="100%" height={1} props={{ id: item.id, label: item.label }} />
                  </Box>
                ))}
              </Box>
            ))}
          </Box>
        )
      }

      return (