mdview by xuanji86: Claude Code mod code and design

What it does

Draws a pane, toasts
Adds /md
Watches mcp__mdview__show calls and can refuse them
Hooks classic.CwdChanged, session.start, turn.complete, turn.start and 1 more
Starts processes

Good points

No network calls
Written in TypeScript
Has a desktop-specific branch
Handles errors

Code to start from

Two kinds: a starter modscode writes from the design above, and the lines of the mod's own code that draw it.

Starter (register.tsx)

import type { Register } from 'claude-code'

// Drawn like mdview by Anji Xu (pane, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/xuanji86-mdview/
// 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: "mdview" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Input, Button, Markdown } = $.ui.resolve(e)
    const basename = '…'
    const tilde = '…'
    const meta = '…'
    const query = '…'
    const at = '…'
    const hits = '…'
    const value = '…'
    const text = '…'
    const note = '…'
    const line = '…'
    const end = '…'
    return (
      <Box flexDirection="column">
        <Box flexDirection="row">
          <Text>
            {"⏺ "}
          </Text>
          <Text bold>
            {basename}
          </Text>
          <Text dimColor wrap="truncate-start">
            {`  ${tilde}${meta}`}
          </Text>
        </Box>
        <Box flexDirection="row" flexWrap="wrap" columnGap={1} marginBottom={1}>
          <Text dimColor>
            ·
          </Text>
          0
          <Text dimColor>
            ·
          </Text>
          0
          <Text dimColor>
            ·
          </Text>
          0
        </Box>
        <Box flexDirection="row" gap={1} marginBottom={1}>
          <Box flexGrow={1}>
            <Input label="search:" placeholder="text in this file" value={`${query}`} submitLabel="next" autoFocus />
          </Box>
          <Text dimColor>
            {`${at}1/${hits}`}
          </Text>
        </Box>
        <Box flexDirection="column" marginBottom={1}>
          <Box flexDirection="row">
            <Text color="suggestion">
              {"› "}
            </Text>
            <Button plain label={`${value}`} />
          </Box>
          <Box flexDirection="row">
            <Text color="suggestion">
              {"› "}
            </Text>
            <Button plain label={`${value}`} />
          </Box>
          <Box flexDirection="row">
            <Text color="suggestion">
              {"› "}
            </Text>
            <Button plain label={`${value}`} />
          </Box>
        </Box>
        <Text dimColor wrap="truncate-end">
          {`── ${text} ────────`}
        </Text>
        <Box flexDirection="row">
          <Text dimColor>
            {"⎿  "}
          </Text>
          <Markdown text={`${note}`} />
        </Box>
        <Box flexDirection="column" marginTop={0}>
          <Box flexDirection="column" marginTop={1}>
            <Box flexDirection="column" marginBottom={1}>
              <Box borderStyle="round" borderColor="promptBorder" paddingX={1}>
                <Input label={">"} placeholder={`what to change in lines ${line}-${end}`} submitLabel="send" autoFocus />
              </Box>
              <Box flexDirection="row" columnGap={1} paddingLeft={2}>
                <Text dimColor>
                  enter to send to Claude ·
                </Text>
                <Button plain dimColor label="cancel" />
              </Box>
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box position="absolute" top={0} right={0} display="none">
              <Button plain dimColor label="✎" />
            </Box>
          </Box>
          <Box flexDirection="column" marginTop={1}>
            <Box flexDirection="column" marginBottom={1}>
              <Box borderStyle="round" borderColor="promptBorder" paddingX={1}>
                <Input label={">"} placeholder={`what to change in lines ${line}-${end}`} submitLabel="send" autoFocus />
              </Box>
              <Box flexDirection="row" columnGap={1} paddingLeft={2}>
                <Text dimColor>
                  enter to send to Claude ·
                </Text>
                <Button plain dimColor label="cancel" />
              </Box>
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box position="absolute" top={0} right={0} display="none">
              <Button plain dimColor label="✎" />
            </Box>
          </Box>
          <Box flexDirection="column" marginTop={1}>
            <Box flexDirection="column" marginBottom={1}>
              <Box borderStyle="round" borderColor="promptBorder" paddingX={1}>
                <Input label={">"} placeholder={`what to change in lines ${line}-${end}`} submitLabel="send" autoFocus />
              </Box>
              <Box flexDirection="row" columnGap={1} paddingLeft={2}>
                <Text dimColor>
                  enter to send to Claude ·
                </Text>
                <Button plain dimColor label="cancel" />
              </Box>
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box position="absolute" top={0} right={0} display="none">
              <Button plain dimColor label="✎" />
            </Box>
          </Box>
        </Box>
        <Box flexDirection="column" marginTop={0}>
          <Box flexDirection="column" marginTop={1}>
            <Box flexDirection="column" marginBottom={1}>
              <Box borderStyle="round" borderColor="promptBorder" paddingX={1}>
                <Input label={">"} placeholder={`what to change in lines ${line}-${end}`} submitLabel="send" autoFocus />
              </Box>
              <Box flexDirection="row" columnGap={1} paddingLeft={2}>
                <Text dimColor>
                  enter to send to Claude ·
                </Text>
                <Button plain dimColor label="cancel" />
              </Box>
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box position="absolute" top={0} right={0} display="none">
              <Button plain dimColor label="✎" />
            </Box>
          </Box>
          <Box flexDirection="column" marginTop={1}>
            <Box flexDirection="column" marginBottom={1}>
              <Box borderStyle="round" borderColor="promptBorder" paddingX={1}>
                <Input label={">"} placeholder={`what to change in lines ${line}-${end}`} submitLabel="send" autoFocus />
              </Box>
              <Box flexDirection="row" columnGap={1} paddingLeft={2}>
                <Text dimColor>
                  enter to send to Claude ·
                </Text>
                <Button plain dimColor label="cancel" />
              </Box>
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box position="absolute" top={0} right={0} display="none">
              <Button plain dimColor label="✎" />
            </Box>
          </Box>
          <Box flexDirection="column" marginTop={1}>
            <Box flexDirection="column" marginBottom={1}>
              <Box borderStyle="round" borderColor="promptBorder" paddingX={1}>
                <Input label={">"} placeholder={`what to change in lines ${line}-${end}`} submitLabel="send" autoFocus />
              </Box>
              <Box flexDirection="row" columnGap={1} paddingLeft={2}>
                <Text dimColor>
                  enter to send to Claude ·
                </Text>
                <Button plain dimColor label="cancel" />
              </Box>
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box position="absolute" top={0} right={0} display="none">
              <Button plain dimColor label="✎" />
            </Box>
          </Box>
        </Box>
        <Box flexDirection="column" marginTop={0}>
          <Box flexDirection="column" marginTop={1}>
            <Box flexDirection="column" marginBottom={1}>
              <Box borderStyle="round" borderColor="promptBorder" paddingX={1}>
                <Input label={">"} placeholder={`what to change in lines ${line}-${end}`} submitLabel="send" autoFocus />
              </Box>
              <Box flexDirection="row" columnGap={1} paddingLeft={2}>
                <Text dimColor>
                  enter to send to Claude ·
                </Text>
                <Button plain dimColor label="cancel" />
              </Box>
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box position="absolute" top={0} right={0} display="none">
              <Button plain dimColor label="✎" />
            </Box>
          </Box>
          <Box flexDirection="column" marginTop={1}>
            <Box flexDirection="column" marginBottom={1}>
              <Box borderStyle="round" borderColor="promptBorder" paddingX={1}>
                <Input label={">"} placeholder={`what to change in lines ${line}-${end}`} submitLabel="send" autoFocus />
              </Box>
              <Box flexDirection="row" columnGap={1} paddingLeft={2}>
                <Text dimColor>
                  enter to send to Claude ·
                </Text>
                <Button plain dimColor label="cancel" />
              </Box>
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box position="absolute" top={0} right={0} display="none">
              <Button plain dimColor label="✎" />
            </Box>
          </Box>
          <Box flexDirection="column" marginTop={1}>
            <Box flexDirection="column" marginBottom={1}>
              <Box borderStyle="round" borderColor="promptBorder" paddingX={1}>
                <Input label={">"} placeholder={`what to change in lines ${line}-${end}`} submitLabel="send" autoFocus />
              </Box>
              <Box flexDirection="row" columnGap={1} paddingLeft={2}>
                <Text dimColor>
                  enter to send to Claude ·
                </Text>
                <Button plain dimColor label="cancel" />
              </Box>
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box flexDirection="column" alignItems="flex-start">
              <Button plain dimColor label="⎿  open the original" />
            </Box>
            <Box position="absolute" top={0} right={0} display="none">
              <Button plain dimColor label="✎" />
            </Box>
          </Box>
        </Box>
        <Box flexDirection="row" columnGap={1} marginTop={1}>
          <Text dimColor>
            ·
          </Text>
          0
          <Text dimColor>
            ·
          </Text>
          0
          <Text dimColor>
            ·
          </Text>
          0
          <Text dimColor>
            ──
          </Text>
        </Box>
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const where = '…'
    const stderr = '…'
    await $.ui.toast(`mdview: ${where}`)
    await $.ui.toast(`mdview: could not open it (${stderr})`)
    return next(e)
  })
}

The mod's own code

Shown under the mod's licence (MIT); its text is below. Keep the notice if you copy these lines.

hooks/register.tsx lines 637–796 · Pane

hooks/register.tsx:637

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    isOpen = true
    paneColumns = e.props.bodyColumns || paneColumns
    const { Box, Button, Code, Markdown, Text } = $.ui.resolve(e)
    const Input = e.surface === 'mobile' ? null : $.ui.resolve(e).Input
    const Image = e.surface === 'terminal' ? $.ui.resolve(e).Image : null
    const Raster = e.surface === 'terminal' ? $.ui.resolve(e).Raster : null
    const d = await read($, doc)
    await read($, rev) // subscribes: a change on disk redraws
    const isTocOpen = await read($, toc)
    const f = await read($, find)
    const ed = await read($, edit)
    const sent = await read($, pending)
    // a ⎿ line, as Claude Code hangs a result under its row
    const hang = (body: RenderNode, key: string) => (
      <Box key={key} flexDirection="row">
        <Text dimColor>{'⎿  '}</Text>
        {body}
      </Box>
    )
    if (!d) return hang(<Text dimColor>{'Click a .md path in the conversation, or run /md <path>'}</Text>, 'empty')

    const v = await load($, d.path)
    const units = 'note' in v ? [] : v.units
    const pages = 'note' in v ? [0] : v.pages
    const pageCount = (pages.at(-1) ?? 0) + 1
    const page = Math.min(d.page, pageCount - 1)
    const heads = units.flatMap((u, i) => (u.level > 0 ? [{ u, i }] : []))
    const follow = (link: { href: string }) => press($, refOf(link.href))
    // the section in view: the one last jumped to, else the first on this page
    const inView = Number(/^u(\d+)/.exec(d.target ?? '')?.[1] ?? pages.indexOf(page))
    // The block the edit bar is on, and the one an edit was sent from: the block with the same text, nearest where it
    // was, since the file may have changed above it; a block whose text is gone has no bar (it closes rather than move).
    // lazy: two blocks of identical text are told apart by the nearer line only; harmless, as either holds that text
    const locate = (where: { path: string; line: number; hash: string } | null, nearest = false) => {
      let at: { i: number; k: number } | null = null
      let gap = Infinity
      if (where?.path !== d.path) return at
      for (const [i, u] of units.entries())
        for (const [k, b] of u.blocks.entries()) {
          if ((!nearest && b.hash !== where.hash) || Math.abs(b.line - where.line) >= gap) continue
          gap = Math.abs(b.line - where.line)
          at = { i, k }
        }
      return at
    }
    const editAt = locate(ed)
    // Each edit sent from ✎, as a line under its block: found by its text until Claude wrote the file, then the block
    // now at its lines.
    const progress = sent.flatMap(p => {
      const at = p.changed ? locate(p, true) : (locate(p) ?? locate(p, true))
      if (!at) return []
      const body =
        p.done === null ? (
          <Text color="claude">{p.turn ? '✶ Claude is editing…' : '✶ Waiting for Claude…'}</Text>
        ) : p.changed ? (
          <Text color="success">Updated</Text>
        ) : (
          <Text dimColor>No changes made</Text>
        )
      return [{ ...at, line: hang(body, `progress-${p.id}`) }]
    })

    // The keys, as Claude Code's own panels list theirs: one dim row, each a click away.
    const keys = [
      d.back.length > 0 && <Button key="back" plain dimColor hotkey="b" label="back" onPress={() => back($)} />,
      heads.length > 1 && <Button key="toc" plain dimColor hotkey="t" label="contents" onPress={() => update($, toc, x => !x)} />,
      Input && units.length > 0 && <Button key="find-toggle" plain dimColor hotkey="f" label="find" onPress={() => update($, find, x => (x ? null : { query: '', at: 0, hits: 0 }))} />,
      page > 0 && <Button key="prev" plain dimColor hotkey="p" label="previous part" onPress={() => moveTo($, page - 1, null)} />,
      page < pageCount - 1 && <Button key="next" plain dimColor hotkey="n" label="next part" onPress={() => moveTo($, page + 1, null)} />,
      isWarp && <Button key="warp" plain dimColor hotkey="w" label="Warp" onPress={() => openWith($, [warpUrl({ abs: d.path, frag: '' })])} />,
      <Button key="close" plain dimColor role="dismiss" hotkey="q" label="close" onPress={() => $.ui.close({ id: PANE })} />,
    ].filter(Boolean)
    // items in a dim row, a dot between each
    const dotted = <T,>(items: readonly T[], key: string) => items.flatMap((k, i) => (i ? [<Text key={`${key}${i}`} dimColor>·</Text>, k] : [k]))
    const dir = dirname(d.path)
    const meta =
      'note' in v
        ? ''
        : `${v.lines ? ` · ${v.lines} line${v.lines === 1 ? '' : 's'}` : ''}${heads.length ? ` · ${heads.length} section${heads.length === 1 ? '' : 's'}` : ''}`

    const draw = (p: Part, key: string) => {
      if (p.kind === 'code') return <Code key={key} source={p.source} path={p.path} startLine={p.startLine} wrap="wrap" />
      if (p.kind === 'raster')
        return Raster ? (
          <Box key={`${key}-box`} flexDirection="column" alignItems="flex-start">
            <Raster key={key} cells={p.cells} columns={p.columns} rows={p.rows} />
            <Button key={`${key}-original`} plain dimColor label="⎿  open the original" onPress={() => openWith($, [p.file])} />
          </Box>
        ) : (
          <Text key={key} dimColor>{`[picture: ${p.alt}]`}</Text>
        )
      if (p.kind === 'img')
        return Image ? (
          <Image key={key} source={{ file: p.file, format: 'png' }} columns={p.columns} rows={p.rows} alt={p.alt} />
        ) : (
          <Text key={key} dimColor>{`[picture: ${p.alt}]`}</Text>
        )
      return p.hrefs.length ? (
        <Markdown key={key} text={p.text} pressableLinks={p.hrefs} onLinkPress={follow} />
      ) : (
        <Markdown key={key} text={p.text} />
      )
    }

    // a part boundary, as a dim rule
    const rule = (text: string, key: string) => (
      <Text key={key} dimColor wrap="truncate-end">
        {`── ${text} ${'─'.repeat(Math.max(0, paneColumns - text.length - 4))}`}
      </Text>
    )

    return (
      <Box flexDirection="column">
        {/* the file, as Claude Code names one in its rows: ⏺ name, then where and how big, dim */}
        <Box flexDirection="row">
          <Text>{'⏺ '}</Text>
          <Text bold>{basename(d.path)}</Text>
          <Text dimColor wrap="truncate-start">{`  ${tilde(dir)}${meta}`}</Text>
        </Box>
        <Box flexDirection="row" flexWrap="wrap" columnGap={1} marginBottom={1}>
          {dotted(keys, 'dot')}
        </Box>
        {f && Input && (
          // the find row, as Claude Code's history search reads: search: <text>  2/5
          <Box flexDirection="row" gap={1} marginBottom={1}>
            <Box flexGrow={1}>
              <Input key="find" label="search:" placeholder="text in this file" value={f.query} submitLabel="next" autoFocus onSubmit={q => findNext($, q)} />
            </Box>
            {f.query !== '' && <Text dimColor>{f.hits ? `${f.at + 1}/${f.hits}` : 'no match'}</Text>}
          </Box>
        )}
        {isTocOpen && (
          // the contents, as Claude Code's own menus list: the section in view marked, a row lights while hovered
          <Box flexDirection="column" marginBottom={1}>
            {heads.slice(0, 200).map(({ u, i }) => (
              <Box key={`tocrow-${i}`} flexDirection="row">
                <Text color="suggestion">{i === inView ? '› ' : '  '}</Text>
                <Button
                  key={`toc-${i}`}
                  plain
                  hover={{ color: 'suggestion' }}
                  label={`${'  '.repeat(u.level - 1)}${u.title}`.slice(0, Math.max(10, paneColumns - 4))}
                  onPress={() => goUnit($, i)}
                />
              </Box>
            ))}
          </Box>
        )}
        {pageCount > 1 && page > 0 && rule(`part ${page + 1} of ${pageCount}`, 'rule-top')}
        {'note' in v && hang(<Markdown key="note" text={v.note} />, 'note')}
        {units.flatMap((u, i) => {
          if (pages[i] !== page) return []
          const firstPart = u.blocks.map((_, k) => u.blocks.slice(0, k).reduce((n, b) => n + b.parts.length, 0))
          return [
            // a blank line between sections and between blocks, as the file itself reads
            <Box key={`sec${i}`} flexDirection="column" marginTop={pages.indexOf(page) === i ? 0 : 1}>
              {u.blocks.map((b, k) => (
                // each block a hover scope: while the pointer is over it, it takes the background Claude Code gives
                // your own prompts, and shows its ✎

Licence text (MIT)

MIT License

Copyright (c) 2026 Anji Xu

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

What its code calls

runs programsreads filesenv varsdrives Claudetool calls

The design, read from code

Claude — Code

mdview: could not open it (Write)

Ask Claude…

⏺ src/ WriteUpdated

·0·0·0

search: Edit next

Updated1/3

› Edit

── Updated ────────

⎿

Updated