@rch4com/agent-setup 1.4.0 → 1.6.0

package/lib/items/plugin.impeccable.mjs

@@ -1,14 +1,28 @@
 import { definePlugin } from '../catalog.mjs'
+import { CLI_IDS } from '../clis.mjs'
+import { msg } from '../i18n/index.mjs'
 // 상류의 멀티 CLI 경로(`npx impeccable install --providers=... --scope=project`)는
 // 쓰지 않는다. 실측 결과 그 명령이 `.claude/skills`를 **실제 디렉터리로 갈아치워**
 // 부트스트랩이 만든 `.agents/skills` Junction을 끊는다 — 공유 스킬이 전부
-// Claude Code 화면에서 사라진다. 플러그인 경로는 `.claude/skills`를 건드리지 않는다.
+// Claude Code 화면에서 사라진다. 버그가 아니라 설계다: 상류
+// `cli/bin/commands/skills.mjs`의 isInProjectProviderLink가 "프로젝트 안 다른
+// 프로바이더를 가리키는 링크"를 의도적으로 unlink한다(3.5.0 재확인, 2026-08-02).
+// 플러그인 경로는 `.claude/skills`를 건드리지 않는다.
 // 또 그 명령은 `--providers`와 `--scope`를 함께 주지 않으면 대화형으로 물으며,
 // 비TTY에서는 조용히 global을 골라 홈에 설치한다.
+// 상류 공식 프로바이더 14개 중 이 저장소의 CLI와 겹치는 것(아래 UPSTREAM).
+// Antigravity는 README에만 있고 설치 CLI는 거부한다(수동 복사 전용).
+const UPSTREAM = ['codex', 'gemini', 'opencode', 'kiro', 'grok', 'copilot']
 export default definePlugin({
   id: 'plugin.impeccable', label: 'impeccable', group: '__style',
   installId: 'impeccable@impeccable',
   detectIds: ['impeccable@impeccable'],
   marketplace: { name: 'impeccable', repo: 'pbakaus/impeccable' },
   note: 'item.plugin.impeccable.note',
+  unsupported: Object.fromEntries(
+    CLI_IDS.filter((c) => c !== 'claude').map((c) => [
+      c,
+      UPSTREAM.includes(c) ? msg('item.unsupported.impeccableJunction') : msg('item.unsupported.upstreamNone'),
+    ]),
+  ),
 })

package/lib/items/plugin.ponytail.mjs

@@ -67,8 +67,8 @@ export default {
   async install({ root, dryRun, exec, log = () => {}, t }) {
     let deferred = false
     if (!isPluginEnabled(root, [INSTALL_ID])) {
-      exec('claude', ['plugin', 'marketplace', 'add', MARKETPLACE.repo], { cwd: root })
-      const r = exec('claude', ['plugin', 'install', INSTALL_ID, '--scope', 'project'], { cwd: root })
+      await exec('claude', ['plugin', 'marketplace', 'add', MARKETPLACE.repo], { cwd: root })
+      const r = await exec('claude', ['plugin', 'install', INSTALL_ID, '--scope', 'project'], { cwd: root })
       if (!r.ok) {
         if (!dryRun) enablePlugin(root, INSTALL_ID, MARKETPLACE)
         deferred = true
@@ -86,7 +86,7 @@ export default {
 
   async uninstall({ root, dryRun, exec, log = () => {}, t }) {
     if (isPluginEnabled(root, [INSTALL_ID])) {
-      const r = exec('claude', ['plugin', 'uninstall', INSTALL_ID], { cwd: root })
+      const r = await exec('claude', ['plugin', 'uninstall', INSTALL_ID], { cwd: root })
       if (!r.ok && !dryRun) disablePlugin(root, [INSTALL_ID])
     }
     if (!hasOpencode(root)) return

package/lib/items/plugin.superpowers.mjs

@@ -1,7 +1,23 @@
 import { definePlugin } from '../catalog.mjs'
+import { CLI_IDS } from '../clis.mjs'
+import { msg } from '../i18n/index.mjs'
+
+// 상류(obra/superpowers v6.2.0)는 Codex·Antigravity·Copilot CLI 등 11개
+// 하니스를 지원하지만 설치 명령이 하니스마다 전부 달라 공유 경로가 없다
+// (README: "install Superpowers separately for each one"). 이 항목이 배선하는
+// 것은 Claude Code 플러그인 판뿐이다. Kilo·Kiro·Grok·VS Code는 상류에 공식
+// 설치 경로가 없다(2026-08-02 검증).
+const SEPARATE = ['codex', 'gemini', 'opencode', 'kimi', 'copilot']
+
 export default definePlugin({
   id: 'plugin.superpowers', label: 'superpowers', group: '__flow',
   installId: 'superpowers@claude-plugins-official',
   detectIds: ['superpowers@claude-plugins-official', 'superpowers@superpowers-marketplace'],
   note: 'item.plugin.superpowers.note',
+  unsupported: Object.fromEntries(
+    CLI_IDS.filter((c) => c !== 'claude').map((c) => [
+      c,
+      SEPARATE.includes(c) ? msg('item.unsupported.superpowersSeparate') : msg('item.unsupported.upstreamNone'),
+    ]),
+  ),
 })

package/lib/items/skill.gsd.mjs

@@ -1,25 +1,44 @@
 import { existsSync, readdirSync } from 'node:fs'
 import { join } from 'node:path'
 import { defineSkill } from '../catalog.mjs'
-import { LocalizedError } from '../i18n/index.mjs'
+import { CLI_IDS } from '../clis.mjs'
+import { LocalizedError, msg } from '../i18n/index.mjs'
 
 function hasGsdFiles(dir) {
   return existsSync(dir) && readdirSync(dir).some((f) => f.startsWith('gsd-'))
 }
 
+// 상류(v1.9.1)는 런타임 플래그 18개(--codex·--antigravity 등)를 지원하지만
+// 이 항목은 --claude만 배선한다. Gemini CLI는 상류가 명시 제거했다(2026-06-18
+// Google 종료, --gemini는 --antigravity 안내 후 종료). 상류의 --kilo는
+// OpenCode 파생 "Kilo"(~/.config/kilo)라 이 저장소의 Kilo Code(.kilocode)와
+// 같은 제품인지 미확인이라 지원으로 표기하지 않는다(2026-08-02 검증).
+const FLAGS = ['codex', 'opencode', 'copilot', 'kimi']
+
 export default defineSkill({
   id: 'skill.gsd', label: 'GSD (Get Shit Done)', group: '__flow', scope: 'project',
   note: 'item.skill.gsd.note',
+  unsupported: Object.fromEntries(
+    CLI_IDS.filter((c) => c !== 'claude').map((c) => [
+      c,
+      FLAGS.includes(c) ? msg('item.unsupported.gsdFlag')
+        : c === 'gemini' ? msg('item.unsupported.gsdGemini')
+          : msg('item.unsupported.upstreamNone'),
+    ]),
+  ),
   async detect({ root }) {
     const found = hasGsdFiles(join(root, '.claude', 'commands')) || hasGsdFiles(join(root, '.claude', 'skills'))
     return { status: found ? 'installed' : 'absent' }
   },
   async install({ root, exec }) {
-    const r = exec('npx', ['-y', '@opengsd/gsd-core@latest', '--claude', '--local'], { cwd: root })
+    const r = await exec('npx', ['-y', '@opengsd/gsd-core@latest', '--claude', '--local'], { cwd: root })
     if (!r.ok) throw new LocalizedError('error.gsdInstall', { output: r.output })
   },
   async uninstall({ root, exec }) {
-    const r = exec('npx', ['-y', '@opengsd/gsd-core@latest', '--uninstall'], { cwd: root })
+    // 런타임 플래그가 없으면 상류가 기본값 claude를 지운다 — 지금은 --claude만
+    // 설치하므로 맞지만, 다른 런타임을 설치하게 되면 여기에도 같은 플래그를
+    // 넘겨야 엉뚱한 설치본이 지워지지 않는다.
+    const r = await exec('npx', ['-y', '@opengsd/gsd-core@latest', '--uninstall'], { cwd: root })
     if (!r.ok) throw new LocalizedError('error.gsdUninstall', { output: r.output })
   },
 })

package/lib/items/skill.gstack.mjs

@@ -1,15 +1,29 @@
 import { existsSync, rmSync } from 'node:fs'
 import { join } from 'node:path'
 import { defineSkill } from '../catalog.mjs'
+import { CLI_IDS } from '../clis.mjs'
 import { repoPath, repoPathStrict } from '../context.mjs'
 import { ensureGitignoreEntries } from '../gitignore.mjs'
-import { LocalizedError } from '../i18n/index.mjs'
+import { LocalizedError, msg } from '../i18n/index.mjs'
 
 const REL_DIR = '.claude/skills/gstack'
 
+// 상류 setup은 --host codex·kiro·opencode(와 factory)도 지원하지만 이 항목은
+// 인자 없이 실행하며 setup의 기본값이 claude 단독이다. README 표에 있는
+// --host cursor·slate는 setup의 case 문이 거부해 exit 1로 죽는다 —
+// 확장한다면 안전한 값은 claude·codex·kiro·factory·opencode·auto뿐이다
+// (2026-08-02 검증).
+const HOSTS = ['codex', 'kiro', 'opencode']
+
 export default defineSkill({
   id: 'skill.gstack', label: 'gstack', group: '__flow', scope: 'project',
   note: 'item.skill.gstack.note',
+  unsupported: Object.fromEntries(
+    CLI_IDS.filter((c) => c !== 'claude').map((c) => [
+      c,
+      HOSTS.includes(c) ? msg('item.unsupported.gstackHost') : msg('item.unsupported.upstreamNone'),
+    ]),
+  ),
   async detect({ root }) {
     return { status: existsSync(repoPath(root, REL_DIR)) ? 'installed' : 'absent' }
   },
@@ -19,9 +33,9 @@ export default defineSkill({
     // .agents/skills Junction은 저장소 안이라 그대로 통과한다).
     const dir = repoPathStrict(root, REL_DIR)
     if (!existsSync(dir)) {
-      const clone = exec('git', ['clone', '--single-branch', '--depth', '1', 'https://github.com/garrytan/gstack.git', dir])
+      const clone = await exec('git', ['clone', '--single-branch', '--depth', '1', 'https://github.com/garrytan/gstack.git', dir])
       if (!clone.ok) throw new LocalizedError('error.gstackClone', { output: clone.output })
-      const setup = exec('bash', ['./setup'], { cwd: dir })
+      const setup = await exec('bash', ['./setup'], { cwd: dir })
       if (!setup.ok) {
         // setup 실패 잔존물이 detect를 installed로 오판시키지 않도록 정리한다.
         rmSync(dir, { recursive: true, force: true })
@@ -34,7 +48,7 @@ export default defineSkill({
   async uninstall({ root, dryRun, exec }) {
     const dir = repoPathStrict(root, REL_DIR)
     if (!existsSync(dir)) return
-    exec('bash', [join(dir, 'bin', 'gstack-uninstall'), '--force'], { cwd: dir }) // 실패해도 디렉터리 삭제로 폴백
+    await exec('bash', [join(dir, 'bin', 'gstack-uninstall'), '--force'], { cwd: dir }) // 실패해도 디렉터리 삭제로 폴백
     if (!dryRun && existsSync(dir)) rmSync(dir, { recursive: true, force: true })
   },
 })

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) {