@rch4com/agent-setup 1.3.0 → 1.5.0

package/lib/tui/run.mjs

@@ -7,10 +7,13 @@ import { netFetch, CATALOG_PATH } from '../design-md/catalog.mjs'
 import { createT, toText, LOCALES } from '../i18n/index.mjs'
 import { RECORD_REL, writeLang } from '../bootstrap/record.mjs'
 import { collectRows, installedIds } from './rows.mjs'
+import { CLI_IDS } from '../clis.mjs'
 import {
   createState, setQuery, setFocus, move, moveTab, toggle, toggleVisible, scroll, currentRow, replaceRows, activeTab,
+  cycleCliFilter,
 } from './state.mjs'
 import { render, renderReview, bodyHeight } from './render.mjs'
+import { createProgress, applyEvent, progressLines } from './progress.mjs'
 
 const ESC = String.fromCharCode(27)
 const HIDE_CURSOR = `${ESC}[?25l`
@@ -34,6 +37,16 @@ function keyReader(stdin) {
   stdin.on('keypress', onKey)
   return {
     next: () => (queue.length > 0 ? Promise.resolve(queue.shift()) : new Promise((r) => { waiting = r })),
+    // 적용 중 중단 감시용. 큐를 **소비하지 않고** Ctrl+C만 들여다본다.
+    // next()로 기다리는 두 번째 소비자를 두면 적용이 끝난 뒤 눌린 키가
+    // 그 대기로 흘러 사라지고, 본 루프의 "아무 키나" 대기가 멈춘다.
+    // Ctrl+C가 있을 때만 거기까지를 버린다.
+    hasAbort: () => {
+      const at = queue.findIndex((k) => k.ctrl && k.name === 'c')
+      if (at === -1) return false
+      queue.splice(0, at + 1)
+      return true
+    },
     stop: () => stdin.off('keypress', onKey),
   }
 }
@@ -50,7 +63,9 @@ function printPlain(rows, log, t = createT('en')) {
   for (const row of rows) {
     if (row.section !== section) { section = row.section; log(`[${t(`section.${section}`)}]`) }
     const mark = row.kind === 'action' ? '▶' : row.status === 'absent' ? ' ' : '×'
-    log(`  [${mark}] ${row.label}${row.hint ? ` — ${row.hint}` : ''}`)
+    // 화면 폭 제약이 없는 자리다 — 여기서는 긴 힌트가 낫다.
+    const hint = row.fullHint ?? row.hint
+    log(`  [${mark}] ${row.label}${hint ? ` — ${hint}` : ''}`)
   }
 }
 
@@ -90,6 +105,10 @@ export async function runTui(root, opts = {}) {
   // 타이핑하면 검색칸으로 올라간다.
   let state = createState(collected.rows, { selectedIds: installedIds(collected.rows), focus: 'list' })
   let status = ''
+  // 순환 대상: 전체(null) + CLI 10개. state.mjs는 아무것도 import 하지 않으므로
+  // 목록을 여기서 만들어 넘긴다.
+  const CLI_OPTIONS = [null, ...CLI_IDS]
+  let detailExpanded = false
 
   emitKeypressEvents(stdin)
   stdin.setRawMode(true)
@@ -101,8 +120,11 @@ export async function runTui(root, opts = {}) {
   const draw = (lines) => stdout.write(HOME + lines.map((l) => l + CLEAR_LINE).join('\n') + '\n' + CLEAR_DOWN)
   const paint = () => {
     const height = stdout.rows ?? 24
-    state = scroll(state, bodyHeight(height))
-    draw(render(state, { width: stdout.columns ?? 80, height, repo: root, dryRun, color, status, t }))
+    state = scroll(state, bodyHeight(height, detailExpanded))
+    draw(render(state, {
+      width: stdout.columns ?? 80, height, repo: root, dryRun, color, status, t,
+      detailExpanded, cliOptions: CLI_OPTIONS,
+    }))
   }
 
   // 로그는 화면 안에 우겨넣지 않는다 — 실패 메시지가 길고, 잘리면 진단이 불가능해진다.
@@ -178,6 +200,54 @@ export async function runTui(root, opts = {}) {
     }
   }
 
+  // 적용 중에는 alt 화면을 떠나지 않는다. exec가 비동기가 된 덕에 이벤트
+  // 루프가 살아 있어, 100ms 타이머가 경과 시간을 실제로 흘려 준다.
+  const runApply = async (changes) => {
+    let progress = { ...createProgress(changes), startedAt: Date.now() }
+    let stopRequested = false
+
+    // 중단 요청은 큐를 엿봐서 안다. 한 번 서면 되돌리지 않는다.
+    const checkAbort = () => {
+      if (!stopRequested && keys.hasAbort()) stopRequested = true
+      return stopRequested
+    }
+    const drawProgress = () => draw(progressLines(progress, {
+      width: stdout.columns ?? 80, height: stdout.rows ?? 24, color, dryRun, now: Date.now(), t,
+    }))
+
+    drawProgress()
+    const timer = setInterval(() => { checkAbort(); drawProgress() }, 100)
+    // 타이머가 프로세스를 붙잡지 않게 한다 — 화면 갱신은 종료를 미룰 이유가 없다.
+    timer.unref?.()
+
+    try {
+      const results = await apply(root, changes, {
+        dryRun,
+        log: () => {}, // 로그는 진행 화면이 대신한다
+        t,
+        shouldStop: checkAbort,
+        onProgress: (event) => {
+          progress = applyEvent(progress, event, Date.now())
+          drawProgress()
+        },
+      })
+      // aborted는 apply()가 끝난 뒤에만 세운다 — 도중에 세우면 실행 중 항목이
+      // aborted:true와 공존해, progressLines의 pending→skipped 겹쳐 보기가
+      // 아직 끝나지 않은 항목까지 건너뛴 것으로 잘못 그린다. entries 자체는
+      // 건드리지 않는다 — 시도조차 하지 않은 항목은 그대로 pending으로
+      // 남아 있어야 progressLines(viewEntry)가 그 상태를 skipped로 겹쳐
+      // 보며 표시와 집계("N건 건너뜀")를 함께 맞출 수 있다. 여기서 먼저
+      // state를 skipped로 바꿔 버리면 그 겹쳐 보기가 더는 pending을 찾지
+      // 못해 집계가 항상 0이 된다.
+      progress = { ...progress, aborted: stopRequested }
+      drawProgress()
+      if (results.some((r) => !r.ok && !r.skipped)) process.exitCode = 1
+      return results
+    } finally {
+      clearInterval(timer)
+    }
+  }
+
   try {
     for (;;) {
       paint()
@@ -186,6 +256,16 @@ export async function runTui(root, opts = {}) {
 
       if (key.ctrl && key.name === 'c') break
 
+      // Ctrl 조합은 두 포커스에서 모두 통한다 — 검색으로 좁힌 직후가 CLI
+      // 필터를 겹쳐 걸고 싶은 순간이다. 글자 키(c·d)를 쓰지 않는 이유는
+      // 목록 포커스에서 아무 글자나 누르면 검색칸으로 올라가기 때문이다:
+      // c를 필터에 배정하면 codex·claude를 검색어로 칠 수 없다.
+      if (key.ctrl && (key.name === 'f' || key.name === 'b')) {
+        state = cycleCliFilter(state, key.name === 'f' ? 1 : -1, CLI_OPTIONS)
+        continue
+      }
+      if (key.ctrl && key.name === 'd') { detailExpanded = !detailExpanded; continue }
+
       // ── 검색칸에 포커스: 타이핑이 곧 검색어다(스페이스 포함, 두 단어 검색 가능).
       if (state.focus === 'search') {
         // Esc: 검색어가 있으면 지우고 검색칸에 남는다. 이미 비었으면 목록으로 내려간다.
@@ -221,8 +301,8 @@ export async function runTui(root, opts = {}) {
         continue
       }
       if (key.name === 'down' || (key.ctrl && key.name === 'n')) { state = move(state, 1); continue }
-      if (key.name === 'pageup') { state = move(state, -bodyHeight(stdout.rows ?? 24)); continue }
-      if (key.name === 'pagedown') { state = move(state, bodyHeight(stdout.rows ?? 24)); continue }
+      if (key.name === 'pageup') { state = move(state, -bodyHeight(stdout.rows ?? 24, detailExpanded)); continue }
+      if (key.name === 'pagedown') { state = move(state, bodyHeight(stdout.rows ?? 24, detailExpanded)); continue }
 
       // 탭 이동 — Tab/Shift+Tab, 좌우 화살표.
       if (key.name === 'tab') { state = moveTab(state, key.shift ? -1 : 1); continue }
@@ -264,15 +344,24 @@ export async function runTui(root, opts = {}) {
         if (verdict === 'quit') break
         if (verdict === 'cancel') { status = t('tui.submitCancelled'); continue }
 
+        const results = await runApply(changes)
+
+        // 실패가 있으면 자세한 사연을 화면 밖에서 보여 준다 — 실패 메시지는
+        // 길고, 화면 안에서 잘리면 진단이 불가능해진다. 성공해도 message가
+        // 붙은 결과(definePlugin·ponytail이 claude CLI 부재로 config 직접
+        // 기록으로 대체할 때 등)는 똑같이 사연이 있다 — ok만 보고 걸러내면
+        // 그 사연이 조용히 사라진다. 건너뜀은 실패가 아니다 — 진행 화면에
+        // 이미 나타났고, 다시 여기 나열하면 사용자가 스스로 취소한 일을
+        // 실패처럼 읽게 된다.
+        const notable = results.filter((r) => !r.skipped && (!r.ok || r.message))
         await suspend(async () => {
-          log(`\n${t('tui.applyHeader', { count: changes.length, suffix: dryRun ? ' (dry-run)' : '' })}`)
-          for (const c of changes) log(`  ${t(`change.${c.action}`)} ${c.item.label}`)
-          const results = await apply(root, changes, { dryRun, log, t })
-          for (const r of results) {
-            const message = toText(t, r.message)
-            log(`  ${r.ok ? '✔' : '✖'} ${t(`change.${r.action}`)} ${r.item.label}${message ? ` — ${message}` : ''}`)
+          if (notable.length > 0) {
+            log('')
+            for (const r of notable) {
+              const message = toText(t, r.message)
+              log(`  ${r.ok ? '✔' : '✖'} ${t(`change.${r.action}`)} ${r.item.label}${message ? ` — ${message}` : ''}`)
+            }
           }
-          if (results.some((r) => !r.ok)) process.exitCode = 1
           log(`\n${t('apply.seeGitDiff')}`)
           await pause()
         })

package/lib/tui/state.mjs

@@ -17,7 +17,7 @@ export function tabsOf(rows) {
 // 어느 쪽이 포커스인지가 Space·타이핑의 뜻을 가른다 — 검색칸에서는 글자가
 // 검색어(스페이스 포함)로, 목록에서는 Space가 선택으로 동작한다.
 // 흔한 TUI의 두-존(zone) 모델이다.
-export function createState(rows, { selectedIds = [], query = '', tabIndex = 0, focus = 'list' } = {}) {
+export function createState(rows, { selectedIds = [], query = '', tabIndex = 0, focus = 'list', cliFilter = null } = {}) {
   const tabs = tabsOf(rows)
   const index = clamp(tabIndex, 0, Math.max(0, tabs.length - 1))
   return {
@@ -26,7 +26,8 @@ export function createState(rows, { selectedIds = [], query = '', tabIndex = 0,
     tabIndex: index,
     focus,
     query,
-    filtered: visibleRows(rows, query, tabs[index]),
+    cliFilter,
+    filtered: visibleRows(rows, query, tabs[index], cliFilter),
     selected: new Set(selectedIds),
     cursor: 0,
     offset: 0,
@@ -47,20 +48,33 @@ export function filterRows(rows, query) {
   return rows.filter((row) => tokens.every((tok) => row.searchText.includes(tok)))
 }
 
-// 화면에 실제로 보이는 행 = 활성 탭 ∩ 검색 결과.
+// CLI 필터 통과 판정. 액션 행은 CLI 개념이 없고(설치가 아니라 실행이다),
+// design.md는 모든 CLI가 함께 읽는 문서라 supports를 갖지 않는다.
+// 둘을 걸러 내면 필터를 건 순간 화면에서 길이 끊긴다.
+export function matchesCli(row, cliFilter) {
+  if (!cliFilter) return true
+  if (row.kind !== 'item') return true
+  const supports = row.item?.supports
+  if (!supports) return true
+  return supports.includes(cliFilter)
+}
+
+// 화면에 실제로 보이는 행 = 활성 탭 ∩ 검색 결과 ∩ CLI 필터.
 // 검색은 탭 안으로 스코프하되, 다른 탭의 적중 수는 tabCounts로 함께 보여 준다 —
 // 그래야 "어느 탭에 있는지" 를 잃지 않으면서도 Tab 키가 늘 의미를 갖는다.
-function visibleRows(rows, query, tab) {
-  return filterRows(rows, query).filter((row) => row.section === tab)
+function visibleRows(rows, query, tab, cliFilter) {
+  return filterRows(rows, query).filter((row) => row.section === tab && matchesCli(row, cliFilter))
 }
 
 export function activeTab(state) {
   return state.tabs[state.tabIndex] ?? null
 }
 
-// 탭별 적중 수 — 검색 중에도 어느 탭에 결과가 있는지 한눈에 보이게 한다.
+// 탭별 적중 수 — 검색·필터 중에도 어느 탭에 결과가 있는지 한눈에 보이게 한다.
+// total은 필터를 타지 않는다: 분모가 함께 줄면 "이 탭에서 몇 개가 걸러졌나"를
+// 알 수 없다.
 export function tabCounts(state) {
-  const hits = filterRows(state.rows, state.query)
+  const hits = filterRows(state.rows, state.query).filter((r) => matchesCli(r, state.cliFilter))
   return state.tabs.map((tab) => ({
     tab,
     shown: hits.filter((r) => r.section === tab).length,
@@ -74,7 +88,7 @@ export function currentRow(state) {
 
 function refocus(state, patch) {
   const next = { ...state, ...patch }
-  return { ...next, filtered: visibleRows(next.rows, next.query, activeTab(next)), cursor: 0, offset: 0 }
+  return { ...next, filtered: visibleRows(next.rows, next.query, activeTab(next), next.cliFilter), cursor: 0, offset: 0 }
 }
 
 // 검색어를 바꾸면 커서는 첫 행으로 돌아간다.
@@ -98,6 +112,22 @@ export function setTab(state, index) {
   return tabIndex === state.tabIndex ? state : refocus(state, { tabIndex })
 }
 
+// 필터를 바꾸면 커서는 첫 행으로 돌아간다. selected는 절대 건드리지 않는다 —
+// setQuery와 같은 규칙이다. 화면 밖 설치본이 조용히 사라지지 않게 하는 핵심이다.
+export function setCliFilter(state, cliFilter) {
+  return cliFilter === state.cliFilter ? state : refocus(state, { cliFilter })
+}
+
+// 순환 대상은 [null, ...CLI_IDS]다. 이 모듈은 아무것도 import 하지 않으므로
+// 목록을 인자로 받는다 — 그 규칙이 이 파일을 순수하게 지켜 준다.
+export function cycleCliFilter(state, delta, options) {
+  if (!options || options.length === 0) return state
+  const at = options.indexOf(state.cliFilter ?? null)
+  const n = options.length
+  const next = options[((((at === -1 ? 0 : at) + delta) % n) + n) % n]
+  return setCliFilter(state, next ?? null)
+}
+
 // 양 끝에서 멈춘다(순환 없음) — 76개 목록에서 한 칸 지나쳤을 때 반대편으로 튀면 길을 잃는다.
 export function move(state, delta) {
   if (state.filtered.length === 0) return state
@@ -134,7 +164,7 @@ export function toggleVisible(state, on) {
 export function replaceRows(state, rows, selectedIds) {
   const tabs = tabsOf(rows)
   const tabIndex = clamp(tabs.indexOf(activeTab(state)), 0, Math.max(0, tabs.length - 1))
-  const filtered = visibleRows(rows, state.query, tabs[tabIndex])
+  const filtered = visibleRows(rows, state.query, tabs[tabIndex], state.cliFilter)
   return {
     ...state,
     rows,

package/lib/width.mjs

@@ -49,6 +49,64 @@ export function pad(text, limit) {
   return s + ' '.repeat(Math.max(0, limit - width(s)))
 }
 
+// 접기. cut은 넘치는 글을 버리고 pad는 모자란 폭을 채우지만, 상세 패널과
+// 진행 화면은 넘치는 글을 다음 줄로 이어 가야 한다.
+//
+// 공백이 있으면 마지막 공백에서 끊고(영문), 한 낱말이 limit보다 길거나
+// 공백이 없으면(한글) 표시 폭에서 끊는다. limit이 0 이하면 빈 배열을
+// 돌려준다 — 호출부가 폭을 잘못 계산했을 때 무한 루프에 빠지지 않게 한다.
+//
+// 문자 하나의 표시 폭이 limit보다 넓으면 그 문자를 버린다. limit < 2에서는
+// 폭을 지키면서 동시에 모든 문자를 담을 수 없다. 폭을 넘기면 TUI 레이아웃이
+// 무너지지만, 버리면 내용만 손실된다. 따라서 폭 불변식을 택했다.
+export function wrap(text, limit) {
+  const s = String(text ?? '')
+  if (limit <= 0 || s === '') return []
+  const out = []
+  for (const para of s.split('\n')) {
+    let line = ''
+    let w = 0
+    let breakAt = -1 // line 안에서 마지막으로 본 공백의 위치
+    for (const ch of para) {
+      const cw = charWidth(ch.codePointAt(0))
+      // 공백을 먼저 기록한다. 이렇게 해야 가장 최근의 공백을 추적할 수 있다.
+      // 뒤에 아직 추가될 문자들이 있어도, 그 공백이 overflow가 되지 않으면
+      // breakAt으로 유지되고, 되면 그 공백에서 끊을 준비가 된다.
+      if (ch === ' ') breakAt = line.length
+      if (w + cw > limit) {
+        // Overflow: line이 limit을 초과할 것이다.
+        if (breakAt > 0) {
+          // 이전에 공백을 본 적이 있다. 그 공백에서 끊는다.
+          out.push(line.slice(0, breakAt))
+          line = line.slice(breakAt + 1)
+        } else {
+          // 공백이 없다. 현재 line을 그대로 끊는다.
+          // 단, 현재 line이 비어있으면 빈 항목을 만들지 않는다.
+          if (line) out.push(line)
+          line = ''
+        }
+        w = width(line)
+        breakAt = -1
+        // Overflow를 유발한 공백은 버린다. 그 공백은 이미 line을 초과시켰으므로
+        // 다음 줄에 포함하면 불필요한 공백이 앞에 붙는다.
+        if (ch === ' ') continue
+      }
+      // Overflow가 아니라면, 또는 처리 후라면, 문자를 추가한다.
+      // 단, 현재 line이 비어있는데 그 문자 자체가 limit보다 넓으면 건너뛴다.
+      // 호출부가 폭을 잘못 계산해도 이 함수가 limit을 지키기 위함이다.
+      if (w === 0 && cw > limit) {
+        continue
+      }
+      line += ch
+      w += cw
+    }
+    // 이번 문단을 끝낸다. 문단이 비어있거나 line이 비어있지 않으면 추가한다.
+    // 이렇게 해서 "접힘 자리의 공백 때문에 빈 줄이 생기는" 문제를 피한다.
+    if (line || para === '') out.push(line)
+  }
+  return out
+}
+
 // 상태 라벨은 로케일마다 길이가 다르다(영어 'Not installed' 13, 한국어
 // '미설치' 6). 한 번 재어 상수로 박으면 다른 로케일에서 열이 깨지므로,
 // 화면을 그릴 때 그 로케일의 실제 라벨에서 폭을 뽑는다.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rch4com/agent-setup",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Repository-scoped bootstrap and optional-item installer for using multiple coding-agent CLIs in one repository | 여러 코딩 에이전트 CLI를 한 저장소에서 함께 쓰기 위한 저장소 범위 부트스트랩과 선택 항목 설치기",
   "keywords": [
     "agents-md",