quiet-bash

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Hook, Register } from 'claude-code'
3
4import { MAX_IMAGE_SIDE, THUMB_BOXES, commandDir, diffStat, elapsed, failure, fit, isOversized, isQuietRead, keepsResult, openFileUrl, pipelineWaitTimeoutId, pngPathsIn, resolvePath, shortPath, shotMeta, shots, summary, supersede, thumbArgs, thumbKey, thumbRunKey, thumbText } from './rows'
5import type { ShotInfo, ThumbSize } from './rows'
6import type { Thumb } from '../types'
7
8const infos = new Map<string, ShotInfo | null>()
9const shrunk = new Map<string, string | null>()
10const startedAt = new Map<string, number>()
11const durations = new Map<string, number>()
12const readOnly = new Set<string>()
13const timedOutWaits = new Set<string>()
14
15type ToolUseRender = Extract<Parameters<Hook<'ui.render'>>[1], { component: 'ToolUse' }>
16type TerminalRender = Extract<Parameters<Hook<'ui.render'>>[1], { surface: 'terminal' }>
17type ToolCall = Parameters<Hook<'tool.call'>>[1]
18
19const MAX_WRITTEN_THUMBS = 3
20
21const isLoud = atom({ plugin: 'quiet-bash', key: 'isLoud' } as const, false)
22// In session state, so a hot reload of this module keeps the thumbnails of rows already drawn.
23const thumbs = atom({ plugin: 'quiet-bash', key: 'thumbs' } as const, {})
24
25async function shotInfo($: EngineInterface, file: string, mtimeMs = 0): Promise<ShotInfo | null> {
26  const key = `${file}@${mtimeMs}`
27  if (!infos.has(key)) {
28    infos.set(key, await identify($, file).catch(() => null))
29  }
30  return infos.get(key) ?? null
31}
32
33async function thumbOf($: EngineInterface, file: string, size: ThumbSize, since = 0): Promise<Thumb | null> {
34  const stat = await $.fs.stat(file).catch(() => null)
35  if (stat?.kind !== 'file' || stat.mtimeMs < since || !/\.png$/i.test(file)) {
36    return null
37  }
38  const info = await shotInfo($, file, stat.mtimeMs)
39  return info && { file, size, info, mtimeMs: stat.mtimeMs }
40}
41
42async function homeOf($: EngineInterface): Promise<string> {
43  return (await $.env.get('HOME')) ?? ''
44}
45
46// Read and SendUserFile show the PNGs they name; any other call, MCP included, shows PNGs its text names that changed while it ran.
47async function thumbsOf($: EngineInterface, call: ToolCall, result: unknown, since: number): Promise<Thumb[]> {
48  const home = await homeOf($)
49  const cwd = await $.session.cwd()
50  const named = call.tool === 'Read' ? [call.file_path] : call.tool === 'SendUserFile' ? call.files : null
51  if (named !== null) {
52    const found = await Promise.all(named.map(file => thumbOf($, resolvePath(file, cwd, home), 'small')))
53    return found.filter((thumb): thumb is Thumb => thumb !== null)
54  }
55  const dir = call.tool === 'Bash' ? commandDir(call.command, cwd, home) : cwd
56  const found: Thumb[] = []
57  for (const file of pngPathsIn(JSON.stringify([call, result]), dir, home)) {
58    const thumb = found.length < MAX_WRITTEN_THUMBS ? await thumbOf($, file, 'small', since) : null
59    if (thumb) {
60      found.push(thumb)
61    }
62  }
63  return found
64}
65
66async function shrink($: EngineInterface, file: string): Promise<string | null> {
67  const side = `${MAX_IMAGE_SIDE}x${MAX_IMAGE_SIDE}>`
68  const probe = await $.process.run(['magick', `${file}[0]`, '-resize', side, 'INLINE:PNG:-'])
69  const png = probe.stdout.trim().replace(/^data:image\/png;base64,/, '')
70  return probe.exitCode === 0 && !probe.isStdoutTruncated && png.length > 0 ? png : null
71}
72
73async function imageSource($: EngineInterface, thumb: Thumb) {
74  const fromFile = { file: thumb.file, format: 'png', generation: Math.floor(thumb.mtimeMs) } as const
75  if (!isOversized(thumb.info)) {
76    return fromFile
77  }
78  const key = `${thumb.file}@${thumb.mtimeMs}`
79  if (!shrunk.has(key)) {
80    shrunk.set(key, await shrink($, thumb.file).catch(() => null))
81  }
82  const png = shrunk.get(key)
83  return png ? { png } : fromFile
84}
85
86async function drawThumbs($: EngineInterface, e: TerminalRender, list: readonly Thumb[], home: string) {
87  const { Box, Image, Link, Text } = $.ui.resolve(e)
88  const room = Math.max(20, (e.viewport?.columns ?? 100) - 6)
89  const drawn = await Promise.all(list.map(async thumb => ({ thumb, source: await imageSource($, thumb) })))
90  return (
91    <Box flexDirection="column" paddingLeft={2}>
92      {drawn.map(({ thumb, source }) => {
93        const box = THUMB_BOXES[thumb.size]
94        return (
95          <Box flexDirection="column">
96            <Image
97              source={source}
98              {...fit(thumb.info, { columns: Math.min(box.columns, room), rows: box.rows })}
99              alt={thumb.file}
100            />
101            <Text dimColor><Link href={openFileUrl(thumb.file)} label={shortPath(thumb.file, home)} />{` · ${thumb.info.width}`}×{thumb.info.height}</Text>
102          </Box>
103        )
104      })}
105    </Box>
106  )
107}
108
109async function settle($: EngineInterface, id: string): Promise<number | undefined> {
110  const start = startedAt.get(id)
111  if (!durations.has(id) && start !== undefined) {
112    durations.set(id, (await $.clock.now()) - start)
113    startedAt.delete(id)
114  }
115  return durations.get(id)
116}
117
118async function identify($: EngineInterface, file: string): Promise<ShotInfo | null> {
119  const probe = await $.process.run(['magick', 'identify', '-format', '%w %h %B', `${file}[0]`])
120  const [width = 0, height = 0, size = 0] = probe.stdout.trim().split(' ').map(Number)
121  return probe.exitCode === 0 && width > 0 ? { width, height, bytes: size } : null
122}
123
124async function toolRow($: EngineInterface, e: ToolUseRender, engineRow: () => ReturnType<Parameters<Hook<'ui.render'>>[2]>) {
125  const { tool, input, isRunning, isErrored, isInterrupted, output } = e.props
126  const title = summary(tool, input, await homeOf($))
127  if (title === null || (await read($, isLoud))) {
128    return engineRow()
129  }
130
131  const { Box, Text } = $.ui.resolve(e)
132  const isFailed = isErrored && !isInterrupted
133  const shot = isRunning || isFailed ? null : shots(tool, input)
134  if (shot !== null && (await read($, thumbs))[e.props.tool_use_id]?.length === 0) {
135    return <Box />
136  }
137
138  if (shot !== null) {
139    const found = await Promise.all(shot.files.map(file => shotInfo($, file)))
140    return (
141      <Box>
142        <Text color="cyan">  ◆ </Text>
143        <Text bold wrap="truncate-end">{shot.caption}</Text>
144        <Box flexGrow={1} />
145        <Text dimColor>  {shotMeta(found)}</Text>
146      </Box>
147    )
148  }
149
150  const isDone = !isRunning && !isFailed && !isInterrupted
151  if (isDone && (title === '' || isQuietRead(tool, readOnly.has(e.props.tool_use_id)))) {
152    return <Box />
153  }
154
155  const took = isRunning ? '' : elapsed(await settle($, e.props.tool_use_id))
156  const detail = isInterrupted ? 'interrupted' : isFailed ? failure(output) : tool === 'Edit' || tool === 'Write' ? diffStat(output) : ''
157  const meta = [detail, took].filter(Boolean).join(' · ')
158
159  return (
160    <Box>
161      {isFailed ? <Text color="red">  ✗ </Text> : <Text dimColor>  {isRunning ? '…' : isInterrupted ? '⊘' : '✓'} </Text>}
162      <Text dimColor wrap="truncate-end">{title || tool}</Text>
163      {meta ? <Text dimColor>  {meta}</Text> : null}
164    </Box>
165  )
166}
167
168export const register: Register = on => {
169
170  on('session.start', async ($, e, next) => {
171    await $.command.register({ name: 'quiet', description: 'Toggle one-line tool rows' })
172    await $.command.register({ name: 'thumb', description: 'Show a PNG inline: /thumb <path>, /thumb big <path>' })
173    return next(e)
174  })
175
176  on('command.run', { command: 'quiet' }, async $ => {
177    const loud = await update($, isLoud, value => !value)
178    return { text: loud ? 'Full tool rows.' : 'One-line tool rows.' }
179  })
180
181  on('command.run', { command: 'thumb' }, async ($, e) => {
182    const home = await homeOf($)
183    const parsed = thumbArgs(e.args, home)
184    if ('pasted' in parsed) {
185      return { text: 'A pasted path turns into an image attachment before /thumb sees it. Type the path instead of pasting it.' }
186    }
187    const file = resolvePath(parsed.file, await $.session.cwd(), home)
188    const thumb = await thumbOf($, file, parsed.size)
189    if (!thumb) {
190      return { text: `Not a readable PNG: ${file}` }
191    }
192    const run = Object.keys(await read($, thumbs)).filter(key => key.startsWith(thumbKey(''))).length + 1
193    await update($, thumbs, all => ({ ...all, [thumbKey(run)]: [thumb] }))
194    return { text: thumbText(run, file) }
195  })
196
197  on('tool.call', async ($, e, next) => {
198    const since = await $.clock.now()
199    startedAt.set(e.tool_use_id, since)
200    try {
201      const result = await next(e)
202      if (result.isReadOnly) {
203        readOnly.add(e.tool_use_id)
204      }
205      const found = await thumbsOf($, e, result, since).catch(() => [])
206      if (found.length > 0) {
207        await update($, thumbs, all => supersede(all, e.tool_use_id, found))
208      }
209      return result
210    } finally {
211      await settle($, e.tool_use_id)
212      // The row may already have drawn as finished, before its duration and read-only flag were known.
213      $.ui.invalidate('ui.render')
214    }
215  })
216
217  on('ui.render', { component: 'ToolUse' }, async ($, e, next) => {
218    const row = await toolRow($, e, () => next(e))
219    const list = e.props.isRunning ? undefined : (await read($, thumbs))[e.props.tool_use_id]
220    if (!list || e.surface !== 'terminal' || (await read($, isLoud))) {
221      return row
222    }
223    const { Box } = $.ui.resolve(e)
224    return (
225      <Box flexDirection="column">
226        {row}
227        {await drawThumbs($, e, list, await homeOf($))}
228      </Box>
229    )
230  }).catch(($, e, next) => {
231    $.ui.toast(`quiet-bash: ${e.props.tool} row failed (${next.error.kind}): ${next.error.message ?? 'no message'}`)
232    return next(e)
233  })
234
235  on('ui.render', { component: 'ToolGroup' }, async ($, e, next) => {
236    const { calls, isExpanded } = e.props
237    const shown = await read($, thumbs)
238    const hasThumb = (call: (typeof calls)[number]) => {
239      const list = shown[call.tool_use_id ?? '']
240      return list === undefined ? shots(call.tool, call.input) !== null : list.length > 0
241    }
242    if (calls.some(hasThumb)) {
243      return next({ ...e, props: { ...e.props, isExpanded: true } })
244    }
245    if (isExpanded || calls.some(call => call.isErrored) || (await read($, isLoud))) {
246      return next(e)
247    }
248    const { Box } = $.ui.resolve(e)
249    return <Box />
250  })
251
252  on('ui.render', { component: 'ToolResult' }, async ($, e, next) => {
253    if ((await read($, thumbs))[e.props.tool_use_id] !== undefined && e.surface === 'terminal' && !(await read($, isLoud))) {
254      const { Box } = $.ui.resolve(e)
255      return <Box />
256    }
257    if (keepsResult(e.props.tool, e.props.output) || (await read($, isLoud))) {
258      return next(e)
259    }
260    const { Box } = $.ui.resolve(e)
261    return <Box />
262  })
263
264  on('ui.render', { component: 'CommandOutput', props: { command: 'thumb' } }, async ($, e, next) => {
265    const key = thumbRunKey(e.props.text)
266    const list = key === undefined ? undefined : (await read($, thumbs))[key]
267    return list && e.surface === 'terminal' ? await drawThumbs($, e, list, await homeOf($)) : next(e)
268  })
269
270  on('prompt.submit', async ($, e, next) => {
271    const id = e.origin.kind === 'task-notification' ? pipelineWaitTimeoutId(e.text) : undefined
272    if (id !== undefined) {
273      timedOutWaits.add(id)
274    }
275    return next(e)
276  })
277
278  on('ui.render', { component: 'UserMessage' }, async ($, e, next) => {
279    const { origin, task, isExpanded } = e.props
280    if (origin.kind !== 'task-notification' || isExpanded || !timedOutWaits.has(task?.id ?? '') || (await read($, isLoud))) {
281      return next(e)
282    }
283    const { Box } = $.ui.resolve(e)
284    return <Box />
285  })
286}
287

1import type { Thumb, Thumbs } from '../types'
2
3const PLAN_FILE = /\/\.claude\/plans\/[^/]+$/
4const IMAGE_FILE = /\.(png|jpe?g|gif|webp)$/i
5
6export type ShotInfo = { width: number; height: number; bytes: number }
7
8const ENGINE_DRAWN = new Set(['AskUserQuestion', 'ExitPlanMode', 'EnterPlanMode', 'TodoWrite'])
9
10export function keepsResult(tool: string, output: unknown): boolean {
11  return ENGINE_DRAWN.has(tool) || tool === 'SendUserFile' || (tool === 'Read' && (output as { type?: string } | undefined)?.type === 'image')
12}
13
14function bytes(n: number): string {
15  return n >= 1024 * 1024 ? `${(n / 1024 / 1024).toFixed(1)} MB` : `${Math.max(1, Math.round(n / 1024))} KB`
16}
17
18export function shotMeta(infos: readonly (ShotInfo | null)[]): string {
19  const known = infos.filter((info): info is ShotInfo => info !== null)
20  const count = infos.length === 1 ? '1 image' : `${infos.length} images`
21  if (known.length === 0) {
22    return count
23  }
24  const dims = known.map(info => `${info.width}×${info.height}`).join(', ')
25  return `${count} · ${dims} · ${bytes(known.reduce((sum, info) => sum + info.bytes, 0))}`
26}
27
28const READ_TOOLS = new Set(['Read', 'Grep', 'Glob', 'LS'])
29// Browser steps come in dozens per task; only navigate says where the browser went.
30const BROWSER_STEP = /^mcp__claude-in-chrome__(?!navigate$)/
31
32export function isQuietRead(tool: string, isFlaggedReadOnly: boolean): boolean {
33  return isFlaggedReadOnly || READ_TOOLS.has(tool) || BROWSER_STEP.test(tool)
34}
35
36type Fields = {
37  command?: string
38  description?: string
39  file_path?: string
40  offset?: number
41  limit?: number
42  url?: string
43  query?: string
44  skill?: string
45  files?: string[]
46  caption?: string
47}
48
49export function shortPath(path: string, home: string): string {
50  return home !== '' && (path === home || path.startsWith(`${home}/`)) ? `~${path.slice(home.length)}` : path
51}
52
53// herdr's ctrl+click ignores file:// and a `Link` takes only https or localhost, so the herdr plugin local.link-toast opens this URL's path.
54export function openFileUrl(path: string): string {
55  return `http://localhost/open-file${path.split('/').map(encodeURIComponent).join('/')}`
56}
57
58export function shots(tool: string, input: unknown): { caption: string; files: string[] } | null {
59  const fields = (input ?? {}) as Fields
60  const files =
61    tool === 'SendUserFile' ? (fields.files ?? []).filter(file => IMAGE_FILE.test(file))
62    : tool === 'Read' && fields.file_path !== undefined && IMAGE_FILE.test(fields.file_path) ? [fields.file_path]
63    : []
64  if (files.length === 0) {
65    return null
66  }
67  return { caption: fields.caption ?? files.map(file => file.split('/').pop()).join(' · '), files }
68}
69
70function firstText(input: unknown): string | undefined {
71  const value = Object.values((input ?? {}) as Record<string, unknown>).find(v => typeof v === 'string')
72  return typeof value === 'string' ? value.split('\n')[0] : undefined
73}
74
75export function summary(tool: string, input: unknown, home: string): string | null {
76  if (ENGINE_DRAWN.has(tool)) {
77    return null
78  }
79  const fields = (input ?? {}) as Fields
80  const path = fields.file_path === undefined ? undefined : shortPath(fields.file_path, home)
81  switch (tool) {
82    case 'Bash':
83      return fields.description ?? fields.command?.split('\n')[0] ?? ''
84    case 'Read': {
85      const { offset, limit } = fields
86      const range = offset === undefined ? '' : `:${offset}-${limit === undefined ? '' : offset + limit - 1}`
87      return `Read ${path}${range}`
88    }
89    case 'Edit':
90      return PLAN_FILE.test(fields.file_path ?? '') ? `Updated plan ${path?.split('/').pop()}` : `Edit ${path}`
91    case 'Write':
92      return PLAN_FILE.test(fields.file_path ?? '') ? `Wrote plan ${path?.split('/').pop()}` : `Write ${path}`
93    case 'WebFetch':
94      return `Fetch ${(fields.url ?? '').replace(/^https?:\/\//, '')}`
95    case 'WebSearch':
96      return `Search "${fields.query ?? ''}"`
97    case 'Agent':
98      return `Agent: ${fields.description ?? ''}`
99    case 'Skill':
100      return `Skill ${fields.skill ?? ''}`
101    case 'SendUserFile':
102      return `Sent ${(fields.files ?? []).map(file => file.split('/').pop()).join(', ')}`
103  }
104  const mcp = /^mcp__(.+?)__(.+)$/.exec(tool)
105  const name = mcp ? `${(mcp[1] ?? '').replace(/^claude_ai_/, '')} ${mcp[2] ?? ''}` : tool
106  const detail = firstText(input)
107  return detail === undefined ? name : `${name}: ${detail}`
108}
109
110type Hunk = { lines?: string[] }
111
112export function diffStat(output: unknown): string {
113  const hunks = ((output ?? {}) as { structuredPatch?: Hunk[] }).structuredPatch ?? []
114  const lines = hunks.flatMap(hunk => hunk.lines ?? [])
115  const added = lines.filter(line => line.startsWith('+')).length
116  const removed = lines.filter(line => line.startsWith('-')).length
117  return added + removed === 0 ? '' : `+${added} −${removed}`
118}
119
120const SLOW_MS = 10_000
121
122export function elapsed(ms: number | undefined): string {
123  if (ms === undefined || ms < SLOW_MS) {
124    return ''
125  }
126  const seconds = Math.round(ms / 1000)
127  return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m${String(seconds % 60).padStart(2, '0')}s`
128}
129
130export function failure(output: unknown): string {
131  const exit = typeof output === 'string' ? /^Exit code (\d+)/.exec(output) : null
132  return exit ? `exit ${exit[1]}` : 'failed'
133}
134
135const PIPELINE_WAIT_TIMEOUT = /<task-id>([^<]+)<\/task-id>[\s\S]*\(gitlab\/wait_for_pipeline\) failed[\s\S]*Timed out waiting for terminal status/
136
137// A wait slice caps at 600 s and Claude re-arms it, so its timeout row is noise; the row's own text lacks the reason, the notification has it.
138export function pipelineWaitTimeoutId(notification: string): string | undefined {
139  return PIPELINE_WAIT_TIMEOUT.exec(notification)?.[1]
140}
141
142export type Box = { columns: number; rows: number }
143export type ThumbSize = 'small' | 'large'
144
145export const THUMB_BOXES: Record<ThumbSize, Box> = {
146  small: { columns: 40, rows: 10 },
147  large: { columns: 120, rows: 40 },
148}
149
150// The terminal draws nothing for a PNG wider or taller than this, so bigger ones are drawn from a shrunk copy.
151export const MAX_IMAGE_SIDE = 2048
152
153export function isOversized(info: ShotInfo): boolean {
154  return info.width > MAX_IMAGE_SIDE || info.height > MAX_IMAGE_SIDE
155}
156
157// A path starts at the start of a word, so the `//host/a.png` of a URL is not one.
158const PNG_PATHS = /(?<![^\s"'`()<>[\]{},;=])[^\s"'`()<>[\]{},;:\\]+\.png(?![\w/-]|\.\w)/gi
159const LEADING_CD = /^\s*cd(?:\s+("[^"]*"|'[^']*'|[^\s&]+))?\s*&&/
160
161function expandHome(word: string): string {
162  return word.replace(/^\$(?:HOME|\{HOME\})(?=\/|$)/, '~')
163}
164
165function absolute(path: string, dir: string, home: string): string {
166  return path.startsWith('/') ? path : path === '~' || path.startsWith('~/') ? `${home}${path.slice(1)}` : `${dir}/${path}`
167}
168
169export function resolvePath(target: string, dir: string, home: string): string {
170  const parts: string[] = []
171  for (const part of absolute(expandHome(target.replace(/^(['"])(.*)\1$/, '$2')), dir, home).split('/')) {
172    if (part === '..') {
173      parts.pop()
174    } else if (part !== '' && part !== '.') {
175      parts.push(part)
176    }
177  }
178  return `/${parts.join('/')}`
179}
180
181// Where a command's relative paths point: the session cwd, moved by any `cd X &&` it starts with.
182export function commandDir(command: string, cwd: string, home: string): string {
183  let dir = cwd
184  let previous = cwd
185  let rest = command
186  for (let cd = LEADING_CD.exec(rest); cd !== null; cd = LEADING_CD.exec(rest)) {
187    const next = cd[1] === '-' ? previous : resolvePath(cd[1] ?? '~', dir, home)
188    previous = dir
189    dir = next
190    rest = rest.slice(cd[0].length)
191  }
192  return dir
193}
194
195// Terminal cells are about twice as tall as wide, so a picture keeps its shape at half the rows.
196export function fit(info: { width: number; height: number }, box: Box): Box {
197  let columns = box.columns
198  let rows = Math.round((columns * info.height) / info.width / 2)
199  if (rows > box.rows) {
200    rows = box.rows
201    columns = Math.round((rows * 2 * info.width) / info.height)
202  }
203  const clamp = (n: number) => Math.min(255, Math.max(1, n))
204  return { columns: clamp(columns), rows: clamp(rows) }
205}
206
207// `text` is JSON, so its escapes (`\n`, `\"`, `\/`) are undone before paths are cut out of it.
208export function pngPathsIn(text: string, dir: string, home: string): string[] {
209  const paths = text.replace(/\\\//g, '/').replace(/\\[nrt"\\]/g, ' ').match(PNG_PATHS) ?? []
210  return [...new Set(paths.map(path => resolvePath(path, dir, home)))]
211}
212
213export function thumbArgs(args: string, home: string): { file: string; size: ThumbSize } | { pasted: true } {
214  const trimmed = args.trim()
215  const file = trimmed.replace(/^big\s+/, '')
216  if (/^\[Image #\d+\]$/.test(file)) {
217    return { pasted: true }
218  }
219  return { file: file.replace(/^~(?=\/|$)/, home), size: file === trimmed ? 'small' : 'large' }
220}
221
222const THUMB_RUN = /^thumb #(\d+): /
223
224export function thumbText(run: number, file: string): string {
225  return `thumb #${run}: ${file}`
226}
227
228export function thumbKey(run: number | string): string {
229  return `cmd:${run}`
230}
231
232// Identical `/thumb x.png` runs each keep their own image, so a later one does not redraw an earlier row.
233export function thumbRunKey(text: string): string | undefined {
234  const run = THUMB_RUN.exec(text)
235  return run ? thumbKey(run[1] ?? '') : undefined
236}
237
238// The newest call showing an unchanged image keeps it, so a Read checked before SendUserFile does not draw it twice.
239export function supersede(all: Thumbs, id: string, found: readonly Thumb[]): Thumbs {
240  const isShown = (thumb: Thumb) => found.some(f => f.file === thumb.file && f.mtimeMs === thumb.mtimeMs)
241  const rest = Object.fromEntries(Object.entries(all).map(([key, list]) => [key, key.startsWith('cmd:') ? list : list.filter(thumb => !isShown(thumb))]))
242  return { ...rest, [id]: [...found] }
243}
244

1export type IsLoud = boolean
2export type Thumb = { file: string; size: 'small' | 'large'; info: { width: number; height: number; bytes: number }; mtimeMs: number }
3export type Thumbs = Record<string, Thumb[]>
4
5declare module 'claude-code' {
6  interface PluginState {
7    'quiet-bash': { isLoud: IsLoud; thumbs: Thumbs }
8  }
9}
10