@rch4com/agent-setup 1.4.0 → 1.5.0

package/lib/tui/detail.mjs

@@ -0,0 +1,118 @@
+// 상세 패널 — 커서가 놓인 항목의 전문을 여러 줄로 편다.
+// 순수 함수 모듈이다. 색도 커서도 터미널도 모른다 — render.mjs가 배치하고 칠한다.
+//
+// rows.mjs를 import 하지 않는 것이 규칙이다. render.mjs가 이 모듈을 쓰므로,
+// 여기서 rows를 끌어오면 render → detail → rows 방향이 생겨 rows.mjs가 순수
+// 렌더 층의 의존성이 된다. 그래서 사유 그룹핑이 rows가 아니라 여기 있고,
+// rows.mjs가 반대로 여기서 가져다 쓴다.
+import { toText, createT } from '../i18n/index.mjs'
+import { CLIS } from '../clis.mjs'
+import { categoryLabel } from '../design-md/flow.mjs'
+import { cut, pad, width, wrap } from '../width.mjs'
+
+// 미배선 사유를 **같은 사유끼리** 묶는다. 사유 하나가 CLI 아홉 개에 그대로
+// 반복되면 줄만 길어지고 "무엇이 왜 빠졌는가"는 오히려 묻힌다.
+// 사유가 둘 이상이면(ponytail처럼) 갈래가 그대로 보인다.
+export function unsupportedGroups(item, t) {
+  const entries = Object.entries(item?.unsupported ?? {})
+  if (entries.length === 0) return []
+  const byReason = new Map()
+  for (const [cli, why] of entries) {
+    const text = toText(t, why)
+    if (!byReason.has(text)) byReason.set(text, [])
+    byReason.get(text).push(cli)
+  }
+  return [...byReason].map(([why, clis]) => ({ clis, why }))
+}
+
+// '배선  ' / '미배선 ' 라벨 자리. 로케일마다 길이가 달라 상수로 박으면 열이
+// 어긋난다 — 그 로케일의 실제 라벨에서 폭을 뽑는다.
+function leadWidth(t) {
+  return Math.max(width(t('detail.wired')), width(t('detail.unwired'))) + 1
+}
+
+function headLine(row, w, t) {
+  const item = row.item
+  // item.scope는 오늘 모든 항목 종류가 채운다 — 그래도 이 값 하나로 화면
+  // 전체가 죽을 수는 없다. t()는 모르는 키에 던지고(i18n/index.mjs) 이
+  // 함수는 render() 안에서 돈다 — 항목 하나의 결손이 패널 하나가 아니라
+  // TUI 전체를 끌고 내려간다.
+  const bits = [item.category, item.scope ? t(`detail.scope.${item.scope}`) : null, t(`status.${row.status}`)]
+  return cut(`${item.label}   ${bits.filter(Boolean).join(' · ')}`, w)
+}
+
+function wiredLines(item, w, lead, t) {
+  const supports = item.supports ?? []
+  if (supports.length === 0) return []
+  // 경로는 MCP에서만 붙인다. 그때만 clis.mjs 어댑터가 경로의 유일한 진실이다 —
+  // plugin·skill은 설치 자리가 항목마다 달라 어댑터가 알지 못한다.
+  const showFile = item.category === 'mcp'
+  const nameWidth = Math.max(...supports.map((c) => width(c)))
+  return supports.map((cli, i) => {
+    const head = i === 0 ? pad(t('detail.wired'), lead) : ' '.repeat(lead)
+    const file = showFile && CLIS[cli]?.file ? `  ${CLIS[cli].file}` : ''
+    // 이름 뒤에 열이 없으면 맞출 대상도 없다 — 경로가 붙는 mcp에서만 이름을 편다.
+    const name = showFile ? pad(cli, nameWidth) : cli
+    return cut(`${head}✔ ${name}${file}`, w)
+  })
+}
+
+function unwiredLines(item, w, lead, t) {
+  const out = []
+  unsupportedGroups(item, t).forEach((group, i) => {
+    const head = i === 0 ? pad(t('detail.unwired'), lead) : ' '.repeat(lead)
+    out.push(cut(`${head}✖ ${group.clis.join('·')}`, w))
+    // 사유는 한 칸 더 들여 이어 붙인다. 첫 줄만 └를 달아 어느 CLI 묶음의
+    // 사유인지 눈으로 잇는다.
+    wrap(group.why, Math.max(1, w - lead - 3)).forEach((line, j) => {
+      out.push(cut(`${' '.repeat(lead + 1)}${j === 0 ? '└ ' : '  '}${line}`, w))
+    })
+  })
+  return out
+}
+
+function agentLines(row, w, t) {
+  const item = row.item
+  const lead = leadWidth(t)
+  const out = [headLine(row, w, t)]
+  if (item.note) out.push(...wrap(t(item.note), w))
+  if (row.statusDetail) out.push(...wrap(row.statusDetail, w))
+  out.push(...wiredLines(item, w, lead, t))
+  out.push(...unwiredLines(item, w, lead, t))
+  return out
+}
+
+function designLines(row, w, t) {
+  const item = row.item
+  const lead = leadWidth(t)
+  const bits = [item.category, categoryLabel(t, item.designCategory), t(`status.${row.status}`)]
+  const out = [cut(`${item.label}   ${bits.filter(Boolean).join(' · ')}`, w)]
+  if (item.providerId) out.push(cut(`${pad(t('detail.provider'), lead)}${item.providerId}`, w))
+  const target = row.previewTarget ?? item.webUrl ?? item.previewPath
+  if (target) out.push(cut(`${pad(t('detail.preview'), lead)}${target}`, w))
+  if (item.description) out.push(...wrap(item.description, w))
+  return out
+}
+
+// 액션 행은 체크 대상이 아니라 실행 대상이다 — 배선표가 없다.
+function actionLines(row, w) {
+  return [cut(row.label, w), ...wrap(row.fullHint ?? row.hint ?? '', w)]
+}
+
+// 행 하나와 지면 크기를 받아 줄 배열을 돌려준다. 색도 커서도 모른다.
+export function detailLines(row, { width: columns = 80, height = 8, t = createT('en') } = {}) {
+  if (!row || height <= 0) return []
+  const w = Math.max(20, columns)
+  const lines = row.kind === 'action'
+    ? actionLines(row, w)
+    : row.item?.category === 'design' ? designLines(row, w, t) : agentLines(row, w, t)
+
+  if (lines.length <= height) return lines
+  // 넘치면 조용히 자르지 않는다 — 남은 줄 수와 펼치는 길을 함께 알린다.
+  // 안내줄이 한 줄을 차지하므로 본문은 height - 1줄만 쓴다. height===1이면
+  // 그 한 줄조차 없어 안내줄 하나가 전부를 대신하고, 그때는 "한 줄 빼고 남은
+  // 수"가 아니라 "전부"를 세어야 거짓말이 되지 않는다.
+  const room = height - 1
+  const marker = cut(t('detail.more', { count: lines.length - Math.max(0, room) }), w)
+  return room <= 0 ? [marker] : [...lines.slice(0, room), marker]
+}

package/lib/tui/progress.mjs

@@ -0,0 +1,160 @@
+// 진행 화면 — 순수 함수 모듈이다. 터미널도 시계도 모른다.
+//
+// 시각을 인자로 받는 것이 핵심이다. 모듈 안에서 Date.now()를 부르면 테스트가
+// 실제 시간에 묶여 "14초 경과"를 검증할 방법이 없다.
+import { createT } from '../i18n/index.mjs'
+import { cut, labelWidth, pad, width } from '../width.mjs'
+
+const ESC = String.fromCharCode(27)
+const DIM = `${ESC}[2m`
+const BOLD = `${ESC}[1m`
+const RESET = `${ESC}[0m`
+
+const MARK = { done: '✔', failed: '✖', running: '▸', pending: ' ', skipped: '–' }
+
+export function createProgress(changes) {
+  return {
+    total: changes.length,
+    startedAt: null,
+    aborted: false,
+    entries: changes.map(({ item, action }) => ({
+      item, action, state: 'pending', ok: null, ms: 0, command: null, startedAt: null,
+    })),
+  }
+}
+
+// 이벤트 하나를 접어 넣는다. 새 상태를 돌려준다 — 화면은 이 값만 보고 그린다.
+export function applyEvent(progress, event, now) {
+  const entries = progress.entries.slice()
+  const at = entries[event.index]
+  if (!at) return progress
+  if (event.phase === 'start') entries[event.index] = { ...at, state: 'running', startedAt: now }
+  else if (event.phase === 'command') entries[event.index] = { ...at, command: event.command }
+  else if (event.phase === 'done') {
+    entries[event.index] = { ...at, state: event.ok ? 'done' : 'failed', ok: event.ok, ms: event.ms ?? 0 }
+  }
+  return { ...progress, entries, startedAt: progress.startedAt ?? now }
+}
+
+function seconds(ms) {
+  return (Math.max(0, ms) / 1000).toFixed(1).replace(/\.0$/, '')
+}
+
+function elapsedText(ms, t) {
+  const total = Math.floor(Math.max(0, ms) / 1000)
+  return total >= 60
+    ? t('progress.elapsedMin', { minutes: Math.floor(total / 60), seconds: total % 60 })
+    : t('progress.elapsed', { seconds: total })
+}
+
+function bar(done, total, room) {
+  if (room <= 2) return ''
+  const inner = room - 2
+  const filled = total === 0 ? 0 : Math.round((done / total) * inner)
+  return `[${'█'.repeat(filled)}${'░'.repeat(Math.max(0, inner - filled))}]`
+}
+
+// 항목 한 개가 차지하는 줄. 실행 중이면 경과와 명령을 함께 낸다.
+function entryLines(entry, w, actionWidth, now, t) {
+  let tail = ''
+  if (entry.state === 'running') {
+    const ran = Math.floor(Math.max(0, now - (entry.startedAt ?? now)) / 1000)
+    tail = `  ${t('progress.running', { seconds: ran })}`
+  } else if (entry.state === 'done' || entry.state === 'failed') {
+    tail = `  ${t('progress.elapsed', { seconds: seconds(entry.ms) })}`
+  } else if (entry.state === 'skipped') {
+    tail = `  ${t('progress.skipped')}`
+  }
+  const mark = MARK[entry.state] ?? ' '
+  const out = [cut(`${mark} ${pad(t(`change.${entry.action}`), actionWidth)} ${entry.item.label}${tail}`, w)]
+  // 명령은 실행 중일 때만. 끝난 뒤에도 남기면 화면이 명령 목록이 된다.
+  if (entry.state === 'running' && entry.command) out.push(cut(`      ${entry.command}`, w))
+  return out
+}
+
+// 중단되면 아직 시작하지 않은(pending) 항목이 곧 건너뛴 항목이다. applyEvent는
+// Task 9의 이벤트(start·command·done)만 받아 항목 상태가 'skipped'가 되는
+// 경로가 없다 — 그래서 화면을 그릴 때만 pending을 skipped로 겹쳐 본다.
+// 집계와 표시가 같은 규칙을 쓰게 해, "건너뜀 0건"처럼 숫자와 말이 어긋나지 않게 한다.
+function viewEntry(entry, aborted) {
+  return aborted && entry.state === 'pending' ? { ...entry, state: 'skipped' } : entry
+}
+
+export function progressLines(progress, opts = {}) {
+  const { width: columns = 80, height = 24, color = false, dryRun = false, now = 0, t = createT('en') } = opts
+  const w = Math.max(24, columns - 1)
+  const paint = (code, text) => (color ? `${code}${text}${RESET}` : text)
+
+  const done = progress.entries.filter((e) => e.state === 'done' || e.state === 'failed').length
+  const skipped = progress.aborted ? progress.entries.filter((e) => e.state === 'pending').length : 0
+  const percent = progress.total === 0 ? 100 : Math.round((done / progress.total) * 100)
+  const counter = t('progress.counter', { done, total: progress.total, percent })
+  const elapsed = progress.startedAt === null ? '' : `   ${elapsedText(now - progress.startedAt, t)}`
+
+  const title = t('progress.title', { count: progress.total, suffix: dryRun ? ' (dry-run)' : '' })
+  const lines = [paint(BOLD, cut(title, w)), '']
+
+  const meta = `  ${counter}${elapsed}`
+  lines.push(cut(`${bar(done, progress.total, Math.max(0, w - width(meta)))}${meta}`, w))
+  lines.push('')
+
+  const actionWidth = labelWidth(t, ['change.install', 'change.complete', 'change.uninstall'])
+  const body = Math.max(1, height - lines.length - 2)
+
+  // 지면이 모자라면 **완료된 것부터** 접는다. 지금 무엇이 도는지가 가장 알고
+  // 싶은 정보라, 실행 중 항목은 언제나 화면에 남는다.
+  //
+  // 실행 중 항목(없으면 마지막으로 끝난 항목)을 기준점으로 잡고 지면이
+  // 허락하는 만큼만 위로 거슬러 올라간다. 기준점에서 시작하므로 그 줄이
+  // 잘려 나갈 수 없다 — "완료분부터 접는다"를 규칙이 아니라 구조로 보장한다.
+  const blocks = progress.entries.map((e) => entryLines(viewEntry(e, progress.aborted), w, actionWidth, now, t))
+  const running = progress.entries.findIndex((e) => e.state === 'running')
+  const anchor = running === -1 ? Math.max(0, done - 1) : running
+
+  let from = anchor
+  let used = blocks.slice(anchor).reduce((n, b) => n + b.length, 0)
+  while (from > 0 && used + blocks[from - 1].length <= body - 1) {
+    from--
+    used += blocks[from].length
+  }
+  // '더보기' 줄은 부가 정보일 뿐이다. 지면이 1줄밖에 없으면 실행 중 항목이
+  // 이긴다 — 더보기 줄에 밀려 정작 지금 도는 항목이 사라지면 안 된다.
+  const showMore = from > 0 && body > 1
+  const shown = blocks.slice(from).flat().slice(0, Math.max(1, body - (showMore ? 1 : 0)))
+  if (showMore) lines.push(paint(DIM, cut(t('progress.more', { count: from }), w)))
+  for (const line of shown) lines.push(line)
+  for (let i = lines.length; i < height - 2; i++) lines.push('')
+
+  lines.push('')
+  // done 분기(아래)는 aborted가 아닐 때만 오고, 그때 skipped는 위에서 늘
+  // 0이다 — 그래서 skippedSuffix는 항상 빈 문자열이다. progress.doneSkipped
+  // 키는 이 분기가 실제로 채울 일이 없어 지웠다(더는 어디서도 쓰지 않는다).
+  const foot = progress.aborted
+    ? t('progress.aborted', { count: skipped })
+    : done < progress.total
+      ? t('progress.abortHint')
+      : t('progress.done', {
+        ok: progress.entries.filter((e) => e.state === 'done').length,
+        failed: progress.entries.filter((e) => e.state === 'failed').length,
+        skippedSuffix: '',
+      })
+  lines.push(paint(DIM, cut(foot, w)))
+  return lines.slice(0, height)
+}
+
+// 비TTY(CI·파이프)용. 바를 그리지 않고 항목마다 한 줄씩 흘린다 —
+// ANSI 제어문자로 CI 로그를 더럽히지 않는다.
+export function plainLine(event, t = createT('en')) {
+  if (event.phase === 'start') {
+    return t('progress.plain', {
+      index: event.index + 1,
+      total: event.total,
+      action: t(`change.${event.action}`),
+      label: event.item.label,
+    })
+  }
+  if (event.phase === 'done') {
+    return t('progress.plainDone', { mark: event.ok ? '✔' : '✖', seconds: seconds(event.ms ?? 0) })
+  }
+  return null
+}

package/lib/tui/render.mjs

@@ -1,10 +1,11 @@
 // 순수 렌더 — 상태와 크기를 받아 화면 줄 배열을 돌려준다.
 // 커서 이동·지우기 같은 제어 시퀀스는 run.mjs가 맡는다.
-import { displayList, tabCounts, activeTab } from './state.mjs'
+import { displayList, tabCounts, activeTab, currentRow } from './state.mjs'
 import { CLI_IDS } from '../clis.mjs'
 import { createT } from '../i18n/index.mjs'
 import { categoryLabel } from '../design-md/flow.mjs'
 import { cut, pad, width } from '../width.mjs'
+import { detailLines } from './detail.mjs'
 
 // 폭 계산은 화면 전용이 아니다 — 비대화형 목록도 같은 열 맞춤이 필요해
 // lib/width.mjs에 있다. 여기서 다시 내보내는 것은 호출부(테스트 포함)가
@@ -21,7 +22,34 @@ const RESET = `${ESC}[0m`
 const CHROME = 6
 export const LABEL_WIDTH = 24
 
-export function bodyHeight(height) {
+// 상세 패널은 목록과 화면을 나눠 갖는다. 높이를 커서가 아니라 **터미널
+// 크기로만** 정하는 것이 핵심이다 — 커서를 옮길 때마다 높이가 변하면
+// 목록이 출렁이고, 그것이 아코디언(행 펼침)을 기각한 이유였다.
+const PANEL_SHARE = 0.4
+const PANEL_MIN = 4
+const PANEL_MAX = 12
+// 목록이 3줄 밑으로 내려가는 쪽이 패널이 사라지는 것보다 나쁘다.
+const PANEL_FLOOR = PANEL_MIN + 3
+
+export function panelHeight(height, expanded = false) {
+  const room = Math.max(0, height - CHROME)
+  if (expanded) return room
+  if (room < PANEL_FLOOR) return 0
+  return Math.min(PANEL_MAX, Math.max(PANEL_MIN, Math.round(room * PANEL_SHARE)))
+}
+
+export function bodyHeight(height, expanded = false) {
+  const room = Math.max(0, height - CHROME)
+  const panel = panelHeight(height, expanded)
+  // 패널이 없을 때는 예전과 같이 최소 3줄을 보장한다.
+  return panel === 0 ? Math.max(3, room) : room - panel
+}
+
+// 제출 검토 화면(renderReview) 전용 — 거긴 패널을 그리지 않는다. bodyHeight를
+// 그대로 재사용하면 그리지도 않는 패널 몫을 미리 떼어 두게 되고, 적용 직전
+// 마지막 확인 화면이 화면에 여유가 남았는데도 변경 목록을 이유 없이 잘라
+// "…외 N건"으로 감춘다. 그래서 패널을 도입하기 전의 옛 산식을 그대로 쓴다.
+export function reviewBodyHeight(height) {
   return Math.max(3, height - CHROME)
 }
 
@@ -32,20 +60,22 @@ function checkbox(row, selected) {
   return `[${selected.has(row.id) ? MARK.on : MARK.off}]`
 }
 
-// 탭 줄. 검색 중이면 탭마다 적중 수를 보여 준다 —
-// 검색은 활성 탭 안으로만 걸리므로, 다른 탭에 결과가 있다는 사실을 여기서 알린다.
+// 탭 줄. 목록이 좁혀졌으면(검색어·CLI 필터 어느 쪽이든) 탭마다 적중 수를
+// 보여 준다 — 검색·필터는 활성 탭 안으로만 걸리므로, 다른 탭에 결과가
+// 있다는 사실을 여기서 알린다. 그래야 필터가 사용자를 빈 탭에 가둬 두고
+// 아무 설명도 없이 방치하는 일이 없다.
 // 폭이 모자라면 활성 탭 하나 + 위치 표시로 줄인다(줄바꿈은 화면을 무너뜨린다).
 // tab 자체는 rows.mjs가 만든 소문자 id다 — 화면에는 t로 번역한 이름만 낸다.
-export function tabBar(state, { width: limit, color = false, searching = false, t = createT('en') } = {}) {
+export function tabBar(state, { width: limit, color = false, narrowed = false, t = createT('en') } = {}) {
   const counts = tabCounts(state)
   if (counts.length === 0) return ''
   const active = activeTab(state)
 
   const segs = counts.map(({ tab, shown, total }) => ({
     tab,
-    text: searching ? `${t(`section.${tab}`)} ${shown}/${total}` : `${t(`section.${tab}`)} ${total}`,
+    text: narrowed ? `${t(`section.${tab}`)} ${shown}/${total}` : `${t(`section.${tab}`)} ${total}`,
     active: tab === active,
-    empty: searching && shown === 0,
+    empty: narrowed && shown === 0,
   }))
 
   const SEP = '  '
@@ -65,23 +95,52 @@ export function tabBar(state, { width: limit, color = false, searching = false,
     .join('')
 }
 
+// 필터 표시. 검색줄 오른쪽 끝에 붙는다 — 새 줄을 만들면 CHROME이 늘어
+// 목록이 그만큼 준다. 필터가 없으면 아무것도 내지 않는다(잡음 방지).
+//
+// 색은 여기서 입히지 않는다 — 이 반환값이 searchLine의 tailWidth 계산에도
+// 그대로 쓰이는데, 색 코드를 섞으면 ESC 시퀀스가 표시 폭에 끼어든다(폭은
+// 항상 색을 입히기 전에 재야 한다). 칠하는 일은 호출부가 폭 계산을 끝낸
+// 뒤 마지막에 한다.
+export function filterSegment(state, { t = createT('en'), options = [] } = {}) {
+  if (!state.cliFilter) return ''
+  const at = options.indexOf(state.cliFilter)
+  const pos = at === -1 ? '' : ` (${t('tui.filter.position', { current: at + 1, total: options.length })})`
+  return `${t('tui.filter.prefix')}${state.cliFilter}${pos}`
+}
+
 // 검색줄 = 하나의 입력칸이다. 포커스가 여기 있으면 입력 커서(▌)로 드러내고,
-// 컬러에서는 줄 전체를 반전시켜 "지금 여기에 타이핑된다"를 분명히 한다 —
+// 컬러에서는 입력 영역을 반전시켜 "지금 여기에 타이핑된다"를 분명히 한다 —
 // 이 상태에서만 스페이스가 선택이 아니라 검색어로 들어가기 때문이다.
-function searchLine(state, { limit, color, paint, t }) {
+//
+// 반전은 **입력 영역까지만** 칠한다. 줄 끝까지 채워 반전시키면 오른쪽 필터
+// 표시가 반전에 먹혀 읽히지 않는다.
+function searchLine(state, { limit, color, paint, t, filter = '' }) {
   const prefix = t('tui.search.prefix')
-  const room = Math.max(0, limit - width(prefix))
+  // filter는 항상 순수 텍스트다(filterSegment 참고) — 폭은 색을 입히기 전에
+  // 재고, tail을 화면에 낼 때만 paint로 칠한다.
+  const tailWidth = filter ? width(filter) + 2 : 0
+  const tail = filter ? `  ${paint(BOLD, filter)}` : ''
+  const room = Math.max(0, limit - width(prefix) - tailWidth)
+
+  // 필터를 넣을 자리가 없으면 필터를 버린다 — 타이핑 중인 글자가 사라지는
+  // 쪽이 더 나쁘다. 탭 줄의 shown/total 표기가 필터가 걸려 있음을 이미 알린다.
+  if (room < 8) return searchLine(state, { limit, color, paint, t, filter: '' })
+
   if (state.focus === 'search') {
-    const text = `${prefix}${cut(`${state.query}▌`, room)}`
-    return color ? `${REVERSE}${pad(text, limit)}${RESET}` : text
+    const field = `${prefix}${cut(`${state.query}▌`, room)}`
+    const body = color ? `${REVERSE}${pad(field, limit - tailWidth)}${RESET}` : field
+    return `${body}${tail}`
   }
-  if (state.query) return `${prefix}${cut(state.query, room)}`
-  return `${prefix}${paint(DIM, cut(t('tui.search.placeholder'), room))}`
+  const body = state.query
+    ? `${prefix}${cut(state.query, room)}`
+    : `${prefix}${paint(DIM, cut(t('tui.search.placeholder'), room))}`
+  return `${body}${tail}`
 }
 
 export function render(state, opts = {}) {
   // columns로 받는다 — width로 두면 모듈의 width() 함수를 함수 스코프 전체에서 가린다.
-  const { width: columns = 80, height = 24, repo = '', dryRun = false, color = false, status = '', t = createT('en') } = opts
+  const { width: columns = 80, height = 24, repo = '', dryRun = false, color = false, status = '', detailExpanded = false, cliOptions = [], t = createT('en') } = opts
 
   // 마지막 칸은 비워 둔다 — 폭을 꽉 채우면 터미널이 줄을 넘긴다.
   const w = Math.max(24, columns - 1)
@@ -94,19 +153,31 @@ export function render(state, opts = {}) {
   const counts = t('tui.counts', { picked, total: items.length })
   const head = cut(`${title}  ${counts}  ${repo}`, w)
   const searching = String(state.query ?? '').trim() !== ''
+  // 목록이 좁혀졌는가 — 검색어·CLI 필터 어느 쪽이든 활성 탭 안에서만 걸리는
+  // 좁힘이라, 다른 탭에 뭐가 남았는지 알리는 몫(탭 줄의 shown/total)은
+  // 둘이 똑같이 진다.
+  const narrowed = searching || Boolean(state.cliFilter)
 
+  const filter = filterSegment(state, { t, options: cliOptions })
   const lines = [
     color ? `${BOLD}${title}${RESET}${cut(`  ${counts}  ${repo}`, Math.max(0, w - width(title)))}` : head,
-    tabBar(state, { width: w, color, searching, t }),
-    searchLine(state, { limit: w, color, paint, t }),
+    tabBar(state, { width: w, color, narrowed, t }),
+    searchLine(state, { limit: w, color, paint, t, filter }),
     '',
   ]
 
-  const body = bodyHeight(height)
+  const body = bodyHeight(height, detailExpanded)
   const all = displayList(state)
 
   if (all.length === 0) {
-    lines.push(paint(DIM, cut(searching ? t('tui.empty.filtered') : t('tui.empty.none'), w)))
+    // 빈 이유가 검색어 때문일 수도 있는데, cliFilter를 먼저 물으면 "이 CLI에는
+    // 배선된 게 없다"는 문구가 거짓으로 뜰 수 있다 — 그 CLI가 이 탭의 다른
+    // 항목들을 지원하더라도, 검색어가 전부 걸러내면 이 분기에 들어온다.
+    // 검색어가 있으면 그쪽이 항상 참이므로 우선한다.
+    const empty = searching
+      ? t('tui.empty.filtered')
+      : state.cliFilter ? t('tui.filter.empty', { cli: state.cliFilter }) : t('tui.empty.none')
+    if (body > 0) lines.push(paint(DIM, cut(empty, w)))
     for (let i = 1; i < body; i++) lines.push('')
   } else {
     const window = all.slice(state.offset, state.offset + body)
@@ -128,6 +199,18 @@ export function render(state, opts = {}) {
     for (let i = window.length; i < body; i++) lines.push('')
   }
 
+  // 상세 패널 — 목록 아래 고정 자리. 높이가 커서와 무관하므로 목록이
+  // 출렁이지 않는다. 지면이 모자라면 panelHeight가 0을 돌려 통째로 빠진다.
+  const panel = panelHeight(height, detailExpanded)
+  if (panel > 0) {
+    lines.push(paint(DIM, '─'.repeat(w)))
+    const room = panel - 1
+    const detail = detailLines(currentRow(state), { width: w, height: room, t })
+    const shown = detail.length > 0 ? detail : [paint(DIM, cut(t('detail.empty'), w))]
+    for (const line of shown.slice(0, room)) lines.push(line)
+    for (let i = shown.length; i < room; i++) lines.push('')
+  }
+
   const hint = state.focus === 'search' ? t('tui.hint.search') : t('tui.hint.list')
   lines.push('')
   lines.push(paint(DIM, cut(status || hint, w)))
@@ -146,7 +229,7 @@ export function renderReview(changes, opts = {}) {
   const title = `${t('tui.review.title', { count: changes.length })}${dryRun ? ' (dry-run)' : ''}`
   const lines = [color ? `${BOLD}${cut(title, w)}${RESET}` : cut(title, w), '']
 
-  const body = bodyHeight(height)
+  const body = reviewBodyHeight(height)
   const room = Math.max(1, body - 1)
   const shown = changes.slice(0, room)
   for (const c of shown) {

package/lib/tui/rows.mjs

@@ -11,6 +11,7 @@ import { createT, toText } from '../i18n/index.mjs'
 import { loadCatalog, buildItems, netFetch, CATALOG_PATH } from '../design-md/catalog.mjs'
 import { discoverSources, extraDirsFromEnv } from '../design-md/scan.mjs'
 import { refreshCatalog, updateInstalled, findStale, categoryLabel } from '../design-md/flow.mjs'
+import { unsupportedGroups } from './detail.mjs'
 
 // 섹션은 탭 이름이자 정렬 키이자 state.tabs의 원소다. 표시 문자열을 그대로
 // 쓰면 번역하는 순간 정렬이 깨진다 — id를 두고 render.mjs가 표시할 때만
@@ -53,17 +54,15 @@ function sectionTerms(t, section) {
 // 미지원 CLI를 **같은 사유끼리 묶어** 한 줄로 만든다. 사유 하나가 CLI 아홉 개에
 // 그대로 반복되면 줄만 길어지고 "무엇이 왜 빠졌는가"는 오히려 묻힌다.
 // 사유가 둘 이상이면(ponytail처럼) 갈래가 그대로 보인다.
+// 그룹핑은 detail.mjs가 한다 — 상세 패널과 규칙을 한 곳에 둔다.
 export function unsupportedText(item, t) {
-  const entries = Object.entries(item.unsupported ?? {})
-  if (entries.length === 0) return null
-  const byReason = new Map()
-  for (const [cli, why] of entries) {
-    const text = toText(t, why)
-    if (!byReason.has(text)) byReason.set(text, [])
-    byReason.get(text).push(cli)
-  }
-  const groups = [...byReason].map(([why, clis]) => t('item.unsupportedGroup', { clis: clis.join('·'), why }))
-  return t('item.unsupportedList', { count: entries.length, groups: groups.join(' / ') })
+  const groups = unsupportedGroups(item, t)
+  if (groups.length === 0) return null
+  const count = groups.reduce((n, g) => n + g.clis.length, 0)
+  const text = groups
+    .map((g) => t('item.unsupportedGroup', { clis: g.clis.join('·'), why: g.why }))
+    .join(' / ')
+  return t('item.unsupportedList', { count, groups: text })
 }
 
 // 에이전트 항목 힌트 — 상태·CLI 커버리지·설치 위치·미지원 사유까지 한 줄에 담는다.
@@ -97,9 +96,28 @@ export function designHint(state, multiProvider = false, t) {
   return parts.filter(Boolean).join(' · ')
 }
 
+// 목록 행에 실제로 찍히는 힌트. 80칸 터미널이면 힌트 자리는 49칸(한글 24자)뿐이라,
+// 예전처럼 사유까지 이어 붙이면 뒤쪽이 통째로 잘렸다. 사유·note·detail은
+// 상세 패널이 여러 줄로 편다 — 여기 남는 것은 잘릴 일이 없는 두 가지뿐이다.
+export function agentShortHint(item, state, t = createT('en')) {
+  const parts = []
+  if (state.status !== 'absent') parts.push(t(`status.${state.status}`))
+  if (item.supports) parts.push(t('item.cliCoverage', { covered: item.supports.length, total: CLI_IDS.length }))
+  return parts.join(' · ')
+}
+
+// design.md도 같은 이유로 줄인다. 설명 전문은 상세 패널이 맡는다.
+export function designShortHint(state, multiProvider = false, t = createT('en')) {
+  const parts = []
+  if (multiProvider) parts.push(state.item.providerId)
+  parts.push(categoryLabel(t, state.item.designCategory))
+  if (state.status !== 'absent') parts.push(t(`status.${state.status}`))
+  return parts.filter(Boolean).join(' · ')
+}
+
 // group = 탭 **안쪽**의 소분류 헤더. design.md만 76개라 카테고리로 갈라야 읽힌다.
 // 나머지 탭은 항목이 적어 그룹 없이 평평하게 둔다.
-function itemRow({ id, section, label, hint, status, previewTarget = null, item, extra = '', group = null, t = createT('en') }) {
+function itemRow({ id, section, label, hint, fullHint = hint, statusDetail = null, status, previewTarget = null, item, extra = '', group = null, t = createT('en') }) {
   return {
     kind: 'item',
     id,
@@ -107,10 +125,14 @@ function itemRow({ id, section, label, hint, status, previewTarget = null, item,
     group,
     label,
     hint,
+    // 화면에 안 찍히는 긴 힌트. 비대화형 목록(printPlain)과 검색이 쓴다 —
+    // 짧은 힌트로 검색하면 'AGENTS.md'로 ponytail을 찾을 수 없게 된다.
+    fullHint,
+    statusDetail,
     status,
     previewTarget,
     item,
-    searchText: `${label} ${hint} ${sectionTerms(t, section)} ${extra}`.toLowerCase(),
+    searchText: `${label} ${fullHint} ${sectionTerms(t, section)} ${extra}`.toLowerCase(),
   }
 }
 
@@ -122,6 +144,8 @@ function actionRow({ id, label, hint, run = null, t = createT('en') }) {
     group: null,
     label,
     hint,
+    fullHint: hint,
+    statusDetail: null,
     status: 'absent',
     previewTarget: null,
     run,
@@ -201,7 +225,9 @@ export function buildRows({ actions = [], agentStates = [], designStates = [], m
         section: s.item.category,
         group: s.item.group ?? null,
         label: s.item.label,
-        hint: agentHint(s.item, s, t),
+        hint: agentShortHint(s.item, s, t),
+        fullHint: agentHint(s.item, s, t),
+        statusDetail: toText(t, s.detail) ?? null,
         status: s.status,
         item: s.item,
         extra: s.item.id,
@@ -221,7 +247,8 @@ export function buildRows({ actions = [], agentStates = [], designStates = [], m
         section: 'design',
         group: s.item.designCategory || CATCH_ALL_CATEGORY,
         label: s.item.label,
-        hint: designHint(s, multiProvider, t),
+        hint: designShortHint(s, multiProvider, t),
+        fullHint: designHint(s, multiProvider, t),
         status: s.status,
         previewTarget: s.item.webUrl ?? s.item.previewPath ?? null,
         item: s.item,