reelkit-cli 0.10.0 → 0.10.2

package/skill/hooks/register.tsx

@@ -0,0 +1,533 @@
+import { atom, read, update } from 'claude-code'
+import type { Elements, EngineInterface, Register } from 'claude-code'
+
+import type { Film, LibraryItem, LibrarySearch, StudioTab } from '../types'
+import { playerHtml } from './player'
+import { baseName, findProjects, join, loadFilm, projectOf } from './project'
+import type { Host } from './project'
+import { clock, timelineLanes, timelineSvg } from './timeline'
+import type { Cell } from './timeline'
+
+const PANE = 'reelkit-studio'
+const TITLE = 'Reelkit'
+const COMMAND = 'reelkit-studio'
+
+const TABS: readonly { id: StudioTab; label: string; hotkey: string }[] = [
+  { id: 'timeline', label: 'Timeline', hotkey: '1' },
+  { id: 'plan', label: 'Plan', hotkey: '2' },
+  { id: 'music', label: 'Music', hotkey: '3' },
+  { id: 'components', label: 'Components', hotkey: '4' },
+  { id: 'browser', label: 'Browser', hotkey: '5' },
+]
+const KINDS = ['music', 'sfx', 'component', 'image', 'clip'] as const
+const NO_SEARCH: LibrarySearch = { kind: 'music', query: '', status: 'idle', note: '', items: [] }
+
+const tabAtom = atom({ plugin: 'reelkit', key: 'tab' } as const, 'timeline')
+const filmAtom = atom({ plugin: 'reelkit', key: 'film' } as const, null)
+const projectsAtom = atom({ plugin: 'reelkit', key: 'projects' } as const, [])
+const sceneAtom = atom({ plugin: 'reelkit', key: 'scene' } as const, 0)
+const componentAtom = atom({ plugin: 'reelkit', key: 'component' } as const, '')
+const searchAtom = atom({ plugin: 'reelkit', key: 'search' } as const, NO_SEARCH)
+
+type Kit = Pick<Elements['mobile'], 'Box' | 'Text' | 'Button' | 'Markdown' | 'Code'> &
+  Partial<Pick<Elements['desktop'], 'Svg' | 'Input' | 'Select'>>
+
+// The scene pictures the timeline embeds, by file and by the load that made them, so a redraw reads each once.
+const pictures = new Map<string, string>()
+
+// The engine as the project loader takes it: plain functions over the file system, the clock and host commands.
+const hostOf = ($: EngineInterface): Host => ({
+  read: path => $.fs.read(path),
+  list: path => $.fs.list(path),
+  exists: path => $.fs.exists(path),
+  stat: path => $.fs.stat(path),
+  run: (argv, timeoutMs) => $.process.run(argv, { timeoutMs }),
+  cwd: () => $.session.cwd(),
+  now: () => $.clock.now(),
+})
+
+// Reads the projects in reach and the chosen one's film into the state the pane draws from. `dir` switches project.
+async function refresh($: EngineInterface, dir?: string): Promise<Film | null> {
+  const projects = await findProjects(hostOf($)).catch(() => [] as string[])
+  const current = await read($, filmAtom)
+  const wanted = dir ?? current?.dir ?? projects[0]
+  const film = wanted ? await loadFilm(hostOf($), wanted).catch(() => null) : null
+  const listed = film && !projects.includes(film.dir) ? [film.dir, ...projects] : projects
+  await update($, projectsAtom, () => listed)
+  await update($, filmAtom, () => film)
+  if (film?.dir !== current?.dir) await update($, sceneAtom, () => 0)
+  return film
+}
+
+// Opens a file or page with the machine's own opener.
+async function reveal($: EngineInterface, path: string): Promise<boolean> {
+  for (const opener of ['open', 'xdg-open']) {
+    const ran = await $.process.run([opener, path]).catch(() => undefined)
+    if (ran?.exitCode === 0) return true
+  }
+  $.ui.toast(`Could not open ${path}`)
+  return false
+}
+
+// Writes the player page beside the render and opens it in the browser.
+async function openPlayer($: EngineInterface, film: Film): Promise<void> {
+  const page = join(film.dir, 'out/studio.html')
+  await $.process.run(['mkdir', '-p', join(film.dir, 'out')]).catch(() => undefined)
+  await $.fs.write(page, playerHtml(film))
+  if (await reveal($, page)) $.ui.toast(film.render ? 'Opened the film with its timeline' : 'Opened the preview frames with the timeline')
+}
+
+// Hands Claude a request: the words land in the prompt for the person to finish or send.
+async function ask($: EngineInterface, text: string): Promise<void> {
+  await $.prompt.fill({ text })
+  $.ui.toast('Written into the prompt')
+}
+
+async function searchLibrary($: EngineInterface, film: Film | null, kind: string, query: string): Promise<void> {
+  const asked = query.trim()
+  if (!asked) return
+  await update($, searchAtom, () => ({ kind, query: asked, status: 'busy' as const, note: '', items: [] }))
+  const ran = await $.process
+    .run(['reelkit', 'assets', 'search', asked, '--kind', kind, '--json'], { cwd: film?.dir, timeoutMs: 45000 })
+    .catch(() => undefined)
+  let items: LibraryItem[] = []
+  let note = ''
+  try {
+    const answer = JSON.parse(ran?.stdout ?? '') as { ok?: boolean; summary?: string; data?: { items?: Record<string, any>[] } }
+    if (answer.ok === false) note = String(answer.summary ?? 'The search failed.').split('\n')[0] ?? ''
+    items = (answer.data?.items ?? []).slice(0, 12).map(one => ({
+      id: String(one.id),
+      kind: String(one.kind ?? kind),
+      title: String(one.title ?? one.id),
+      about: String(one.description ?? '').slice(0, 220),
+      match: Math.round((Number(one.match) || 0) * 100),
+      detail: [
+        one.meta?.durationSec ? `${Math.round(Number(one.meta.durationSec))}s` : '',
+        one.meta?.bpm ? `${Math.round(Number(one.meta.bpm))} BPM` : '',
+        one.meta?.category ? String(one.meta.category) : '',
+      ]
+        .filter(Boolean)
+        .join(' · '),
+    }))
+  } catch {
+    note = (ran?.stderr || ran?.stdout || 'The reelkit command did not answer. Is it installed and on the PATH?').trim().split('\n')[0] ?? ''
+  }
+  await update($, searchAtom, () => ({ kind, query: asked, status: note ? ('failed' as const) : ('done' as const), note: note.slice(0, 300), items }))
+}
+
+const useRequest = (item: LibraryItem): string => {
+  if (item.kind === 'music') return `Pull ${item.id} from the Reelkit library and use it as the music for this video. `
+  if (item.kind === 'component') return `Pull the component ${item.id} from the Reelkit library and use it in this video: `
+  return `Pull ${item.id} (${item.kind}) from the Reelkit library and use it in this video: `
+}
+
+const ago = (now: number, then: number): string => {
+  const minutes = Math.max(0, Math.round((now - then) / 60000))
+  if (minutes < 1) return 'just now'
+  if (minutes < 60) return `${minutes} min ago`
+  if (minutes < 60 * 24) return `${Math.round(minutes / 60)} h ago`
+  return `${Math.round(minutes / 1440)} d ago`
+}
+
+const megabytes = (bytes: number): string => `${(bytes / 1048576).toFixed(1)} MB`
+
+const TONES: Record<Cell['tone'], Record<string, string | boolean>> = {
+  clip: { backgroundColor: 'blue', color: 'white' },
+  clipAlt: { backgroundColor: 'magenta', color: 'white' },
+  picked: { inverse: true, bold: true },
+  text: { color: 'magenta' },
+  voice: { color: 'cyan' },
+  music: { color: 'blue' },
+  empty: { dimColor: true },
+}
+
+function planMarkdown(film: Film): string {
+  const settings = [
+    film.aspect,
+    `${clock(film.totalFrames / film.fps)}${film.isTimed ? '' : ' (estimated)'}`,
+    film.voice ? `voice ${film.voice}` : '',
+    film.pace ? `pace ${film.pace}` : '',
+    film.captions ? `captions ${film.captions}` : '',
+  ].filter(Boolean)
+  const scenes = film.scenes.map((scene, i) => {
+    const lines = [`**${i + 1}. ${scene.id}** · ${(scene.frames / film.fps).toFixed(1)}s${scene.treatment ? ` · ${scene.treatment}` : ''}`]
+    if (scene.narration) lines.push(`> ${scene.narration}`)
+    if (scene.text.length) lines.push(`On screen: ${scene.text.map(one => `\`${one.replace(/`/g, "'")}\``).join(' ')}`)
+    return lines.join('\n\n')
+  })
+  return [`## ${film.title}`, settings.join(' · '), ...scenes].join('\n\n').slice(0, 9800)
+}
+
+export const register: Register = on => {
+  on('session.start', async ($, e, next) => {
+    await $.command.register({ name: COMMAND, description: 'Open the Reelkit studio pane: timeline, plan, music, components and the library' })
+    const film = await refresh($).catch(() => null)
+    if (film) void $.ui.open({ id: PANE, title: TITLE })
+
+    return next(e)
+  })
+
+  on('command.run', { command: COMMAND }, async ($, e) => {
+    const cwd = await $.session.cwd()
+    const named = e.args.trim()
+    const dir = named ? await projectOf(hostOf($), named.startsWith('/') ? named : join(cwd, named)) : undefined
+    const film = await refresh($, dir)
+    await $.ui.open({ id: PANE, title: TITLE })
+    if (named && !dir) return { text: `No Reelkit project at ${named}. The studio pane shows ${film ? film.name : 'no project'}.` }
+
+    return { text: film ? `Reelkit studio opened on ${film.name}.` : 'Reelkit studio opened. No Reelkit project is in this folder yet.' }
+  })
+
+  // A reelkit command, or an edit inside a project, changes what the pane shows: follow the project it touched.
+  on('tool.call', { tool: 'Bash' }, async ($, e, next) => {
+    const ran = await next(e)
+    if (!/\breelkit\b/.test(e.command)) return ran
+    const paths = (e.command.match(/\/[^\s"';&|)]+/g) ?? []).slice(0, 4)
+    let dir: string | undefined
+    for (const path of paths) dir ??= await projectOf(hostOf($), path).catch(() => undefined)
+    await refresh($, dir).catch(() => null)
+
+    return ran
+  })
+
+  on('tool.call', { tool: ['Write', 'Edit'] }, async ($, e, next) => {
+    const ran = await next(e)
+    const dir = await projectOf(hostOf($), e.file_path.split('/').slice(0, -1).join('/')).catch(() => undefined)
+    if (dir) await refresh($, dir).catch(() => null)
+
+    return ran
+  })
+
+  on('turn.complete', async ($, e, next) => {
+    const done = await next(e)
+    if (e.agentId === undefined && (await read($, filmAtom))) await refresh($).catch(() => null)
+
+    return done
+  })
+
+  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
+    const kit: Kit = $.ui.resolve(e)
+    const { Box, Text, Button, Markdown, Code } = kit
+    // A table is completed with every surface's names, the missing ones drawing nothing: the surface says which really draw.
+    const Svg = e.surface === 'terminal' ? undefined : kit.Svg
+    const Input = e.surface === 'mobile' ? undefined : kit.Input
+    const Select = e.surface === 'mobile' ? undefined : kit.Select
+    const [tab, film, projects, sceneIndex, componentName, search] = await Promise.all([
+      read($, tabAtom),
+      read($, filmAtom),
+      read($, projectsAtom),
+      read($, sceneAtom),
+      read($, componentAtom),
+      read($, searchAtom),
+    ])
+    const columns = Math.max(40, e.props.bodyColumns)
+
+    const tabs = (
+      <Box flexDirection="row" gap={1} flexWrap="wrap">
+        {TABS.map(one => (
+          <Button
+            key={`tab-${one.id}`}
+            label={one.label}
+            hotkey={one.hotkey}
+            variant={one.id === tab ? 'primary' : 'secondary'}
+            onPress={() => void update($, tabAtom, () => one.id)}
+          />
+        ))}
+        <Button key="refresh" label="Refresh" hotkey="r" dimColor onPress={() => void refresh($)} />
+      </Box>
+    )
+
+    if (!film) {
+      return (
+        <Box flexDirection="column" gap={1}>
+          <Text bold>Reelkit studio</Text>
+          <Text dimColor wrap="wrap">
+            No Reelkit project in this folder yet. Start a video and its timeline, plan, music and components show here.
+          </Text>
+          <Box flexDirection="row" gap={1}>
+            <Button key="new" label="New video" variant="primary" onPress={() => void ask($, 'Make a short video with Reelkit about ')} />
+            <Button key="refresh" label="Refresh" onPress={() => void refresh($)} />
+          </Box>
+        </Box>
+      )
+    }
+
+    const seconds = film.totalFrames / film.fps
+    const picked = Math.min(Math.max(0, sceneIndex), Math.max(0, film.scenes.length - 1))
+    const scene = film.scenes[picked]
+    const now = await $.clock.now()
+
+    const header = (
+      <Box flexDirection="column">
+        <Box flexDirection="row" gap={1} flexWrap="wrap">
+          <Text bold>{film.title}</Text>
+          <Text dimColor>{`${film.aspect} · ${clock(seconds)}${film.isTimed ? '' : ' est.'} · ${film.scenes.length} scenes`}</Text>
+        </Box>
+        {Select && projects.length > 1 && (
+          <Select
+            key="project"
+            label="Project"
+            value={film.dir}
+            options={projects.map(dir => ({ value: dir, label: baseName(dir) }))}
+            onSelect={dir => void refresh($, dir)}
+          />
+        )}
+      </Box>
+    )
+
+    let body
+    if (tab === 'timeline') {
+      let drawing
+      if (Svg) {
+        const thumbs: Record<string, string> = {}
+        await Promise.all(
+          film.scenes.map(async one => {
+            if (!one.thumb) return
+            const key = `${one.thumb}@${film.loadedAt}`
+            let picture = pictures.get(key)
+            if (picture === undefined) {
+              picture = await $.fs
+                .read(one.thumb, { as: 'bytes' })
+                .then(bytes => bytes.base64)
+                .catch(() => '')
+              if (pictures.size > 96) pictures.clear()
+              pictures.set(key, picture)
+            }
+            if (picture && picture.length < 12000) thumbs[one.id] = picture
+          }),
+        )
+        drawing = <Svg source={timelineSvg(film, picked, thumbs)} alt={`Timeline of ${film.title}: ${film.scenes.length} scenes over ${clock(seconds)}`} />
+      } else {
+        const { ruler, lanes } = timelineLanes(film, picked, columns - 7)
+        drawing = (
+          <Box flexDirection="column">
+            <Box flexDirection="row">
+              <Text dimColor>{'       '}</Text>
+              <Text dimColor wrap="truncate">
+                {ruler}
+              </Text>
+            </Box>
+            {lanes.map(lane => (
+              <Box flexDirection="row">
+                <Text dimColor>{lane.label.padEnd(7, ' ')}</Text>
+                {lane.cells.map(cell => (
+                  <Text wrap="truncate" {...TONES[cell.tone]}>
+                    {cell.text}
+                  </Text>
+                ))}
+              </Box>
+            ))}
+          </Box>
+        )
+      }
+
+      body = (
+        <Box flexDirection="column" gap={1}>
+          {drawing}
+          <Box flexDirection="row" gap={1} flexWrap="wrap">
+            <Button key="prev" label="◀ Scene" hotkey="j" onPress={() => void update($, sceneAtom, n => Math.max(0, Math.min(n, film.scenes.length - 1) - 1))} />
+            <Button key="next" label="Scene ▶" hotkey="k" onPress={() => void update($, sceneAtom, n => Math.min(film.scenes.length - 1, n + 1))} />
+            <Button key="player" label="▶ Play with timeline" hotkey="p" variant="primary" onPress={() => void openPlayer($, film)} />
+            {film.render && <Button key="video" label="Open video" hotkey="o" onPress={() => void reveal($, film.render?.path ?? '')} />}
+          </Box>
+          {scene && (
+            <Box flexDirection="column">
+              <Text bold>
+                {`${picked + 1}. ${scene.id} · ${clock(scene.start / film.fps)} to ${clock((scene.start + scene.frames) / film.fps)} · ${(scene.frames / film.fps).toFixed(1)}s`}
+              </Text>
+              {scene.narration !== '' && <Text wrap="wrap">{scene.narration}</Text>}
+              {scene.text.length > 0 && (
+                <Text dimColor wrap="wrap">{`On screen: ${scene.text.join(' · ')}`}</Text>
+              )}
+              <Box flexDirection="row" gap={1} flexWrap="wrap">
+                <Button key="edit-scene" label="Edit this scene" hotkey="e" onPress={() => void ask($, `In the Reelkit video "${film.name}", change scene "${scene.id}": `)} />
+                <Button
+                  key="look-scene"
+                  label="Show its frames"
+                  onPress={() => void ask($, `Run reelkit preview in ${film.dir} and show me the frames of scene "${scene.id}".`)}
+                />
+              </Box>
+            </Box>
+          )}
+          <Box flexDirection="row" gap={1} flexWrap="wrap">
+            <Text dimColor>
+              {`${film.render ? `Rendered ${megabytes(film.render.bytes)}, ${ago(now, film.render.at)}` : 'Not rendered yet'} · ${film.previews} preview frames`}
+            </Text>
+            <Button key="render" label={film.render ? 'Render again' : 'Render'} onPress={() => void ask($, `Render the Reelkit video in ${film.dir}.`)} />
+          </Box>
+        </Box>
+      )
+    } else if (tab === 'plan') {
+      body = (
+        <Box flexDirection="column" gap={1}>
+          <Markdown text={planMarkdown(film)} />
+          <Box flexDirection="row" gap={1} flexWrap="wrap">
+            <Button key="plan-change" label="Change the plan" variant="primary" onPress={() => void ask($, `Change the plan of the Reelkit video "${film.name}": `)} />
+            <Button key="plan-check" label="Check it" onPress={() => void ask($, `Run reelkit plan check in ${film.dir} and fix what it reports.`)} />
+            <Button key="plan-open" label="Open plan.json" onPress={() => void reveal($, join(film.dir, 'plan.json'))} />
+          </Box>
+        </Box>
+      )
+    } else if (tab === 'music') {
+      const sounds = film.sounds.filter(one => one.kind !== 'music')
+      const short = film.music && film.music.seconds > 0 && film.music.seconds + 0.5 < seconds
+      body = (
+        <Box flexDirection="column" gap={1}>
+          {film.music ? (
+            <Box flexDirection="column">
+              <Text bold>{`♪ ${film.music.title}`}</Text>
+              <Text dimColor>
+                {`${film.music.bpm ? `${Math.round(film.music.bpm)} BPM · ` : ''}${film.music.seconds ? `${clock(film.music.seconds)} long · ` : ''}${film.music.beats.length} beats in the film`}
+              </Text>
+              {short && (
+                <Text color="yellow" wrap="wrap">{`The track ends at ${clock(film.music.seconds)}; the film runs to ${clock(seconds)}.`}</Text>
+              )}
+            </Box>
+          ) : (
+            <Text dimColor>No music chosen yet.</Text>
+          )}
+          <Box flexDirection="row" gap={1} flexWrap="wrap">
+            {film.music && <Button key="music-play" label="▶ Play track" hotkey="p" onPress={() => void reveal($, join(film.dir, film.music?.path ?? ''))} />}
+            <Button
+              key="music-find"
+              label="Find music"
+              variant="primary"
+              onPress={async () => {
+                await update($, searchAtom, old => ({ ...old, kind: 'music' }))
+                await update($, tabAtom, () => 'browser')
+              }}
+            />
+            <Button key="music-change" label="Change it" onPress={() => void ask($, `Change the music of the Reelkit video "${film.name}" to something `)} />
+          </Box>
+          <Text bold>Voice</Text>
+          <Text dimColor>
+            {`${film.voice ? `${film.voice}${film.pace ? ` · pace ${film.pace}` : ''}` : 'No narrator'} · ${film.scenes.filter(one => one.words.length > 0).length} of ${film.scenes.length} scenes recorded`}
+          </Text>
+          <Text bold>{`Sound effects (${sounds.length})`}</Text>
+          {sounds.length === 0 && <Text dimColor>None pulled yet.</Text>}
+          {sounds.slice(0, 14).map(one => (
+            <Box flexDirection="row" gap={1}>
+              <Button key={`sound-${one.id}`} label="▶" plain onPress={() => void reveal($, join(film.dir, one.path))} />
+              <Text wrap="truncate-end">{`${one.title}${one.seconds ? ` · ${one.seconds.toFixed(1)}s` : ''}`}</Text>
+            </Box>
+          ))}
+        </Box>
+      )
+    } else if (tab === 'components') {
+      const chosen = film.components.find(one => one.name === componentName) ?? film.components[0]
+      const source = chosen ? await $.fs.read(chosen.path).catch(() => '') : ''
+      body = (
+        <Box flexDirection="column" gap={1}>
+          {film.components.length === 0 && (
+            <Text dimColor wrap="wrap">
+              This project has no components of its own yet. They appear here as src/ fills up.
+            </Text>
+          )}
+          {chosen &&
+            (Select ? (
+              <Select
+                key="component"
+                label="Component"
+                value={chosen.name}
+                options={film.components.map(one => ({ value: one.name }))}
+                onSelect={name => void update($, componentAtom, () => name)}
+              />
+            ) : (
+              <Box flexDirection="row" gap={1} flexWrap="wrap">
+                {film.components.map(one => (
+                  <Button
+                    key={`component-${one.name}`}
+                    label={one.name}
+                    variant={one.name === chosen.name ? 'primary' : 'secondary'}
+                    onPress={() => void update($, componentAtom, () => one.name)}
+                  />
+                ))}
+              </Box>
+            ))}
+          {chosen && (
+            <Box flexDirection="column" gap={1}>
+              <Text wrap="wrap" dimColor={chosen.about === ''}>
+                {chosen.about || 'No description at the top of the file.'}
+              </Text>
+              <Box flexDirection="row" gap={1} flexWrap="wrap">
+                <Button
+                  key="component-use"
+                  label="Use in a scene"
+                  variant="primary"
+                  onPress={() => void ask($, `In the Reelkit video "${film.name}", use the ${chosen.name} component in scene "${scene?.id ?? ''}" to show `)}
+                />
+                <Button key="component-change" label="Change it" onPress={() => void ask($, `Change the ${chosen.name} component (${chosen.path}): `)} />
+                <Button key="component-open" label="Open file" onPress={() => void reveal($, chosen.path)} />
+              </Box>
+              <Code source={source.split('\n').slice(0, 40).join('\n').slice(0, 4000)} language="tsx" path={chosen.path} wrap="truncate-end" />
+            </Box>
+          )}
+          <Button
+            key="component-find"
+            label="Find components in the library"
+            onPress={async () => {
+              await update($, searchAtom, old => ({ ...old, kind: 'component' }))
+              await update($, tabAtom, () => 'browser')
+            }}
+          />
+        </Box>
+      )
+    } else {
+      body = (
+        <Box flexDirection="column" gap={1}>
+          <Text dimColor wrap="wrap">{`Search the shared Reelkit library. Use hands the pick to Claude to pull into ${film.name}.`}</Text>
+          {Select ? (
+            <Select
+              key="kind"
+              label="Kind"
+              value={search.kind}
+              options={KINDS.map(kind => ({ value: kind }))}
+              onSelect={kind => void update($, searchAtom, old => ({ ...old, kind, status: 'idle' as const, note: '', items: [] }))}
+            />
+          ) : (
+            <Text dimColor>{`Kind: ${search.kind}`}</Text>
+          )}
+          {Input ? (
+            <Input
+              key="query"
+              label="Search"
+              placeholder={search.kind === 'music' ? 'upbeat, 120 BPM' : `what the ${search.kind} shows`}
+              value={search.query}
+              submitLabel="search"
+              onSubmit={text => void searchLibrary($, film, search.kind, text)}
+            />
+          ) : (
+            <Button key="ask-search" label="Ask Claude to search" onPress={() => void ask($, `Search the Reelkit library for ${search.kind}: `)} />
+          )}
+          {search.status === 'busy' && <Text dimColor>{`Searching for "${search.query}"…`}</Text>}
+          {search.status === 'failed' && (
+            <Text color="red" wrap="wrap">
+              {search.note}
+            </Text>
+          )}
+          {search.status === 'done' && search.items.length === 0 && <Text dimColor>{`Nothing matched "${search.query}".`}</Text>}
+          {search.items.map(item => (
+            <Box flexDirection="column">
+              <Box flexDirection="row" gap={1}>
+                <Button key={`use-${item.id}`} label="Use" onPress={() => void ask($, useRequest(item))} />
+                <Text bold wrap="truncate-end">{`${item.match}% ${item.title}`}</Text>
+                {item.detail !== '' && <Text dimColor>{item.detail}</Text>}
+              </Box>
+              <Text dimColor wrap="wrap">
+                {item.about}
+              </Text>
+            </Box>
+          ))}
+        </Box>
+      )
+    }
+
+    return (
+      <Box flexDirection="column" gap={1}>
+        {header}
+        {tabs}
+        {body}
+      </Box>
+    )
+  })
+}