# Temper TUI Mockup

Bubbletea v2 · Bubbles · Huh · Lip Gloss

🔥 Temper Forge
theme:
available
taken
premium
reserved
aftermarket
checking
slow
1 temper init — 첫 설정 (Huh 폼) Charm Huh 라이브러리 기반 multi-step form
temper — init
┌─ Welcome to temper ─────────────────────────────────────┐ │ │ │ Step 1 of 3 · 터미널에서 도메인 찾기를 시작합니다 │ │ │ │ 선호 레지스트라를 선택하세요 │ │ │ │ ● Cloudflare 도매가, 개발자 1순위 │ │ ○ Porkbun 업셀 없음, 투명한 가격 │ │ ○ Namecheap 입문자 친화 │ │ ○ Vercel 배포까지 한 번에 │ │ │ │ │ ├─────────────────────────────────────────────────────────┤ │ j/k up/down · enter next · esc cancel │ └─────────────────────────────────────────────────────────┘
Huh 적용: Charm의 공식 폼 라이브러리. `Select` 필드로 4개 옵션 표시. Vim 스타일 `j/k` 네비게이션. 다음 단계: "기본 TLD 설정" → "테마 선택".
2 검색 중 — Progressive Rendering 0.7초 경과, Bubbles spinner + gradient progress
temper — search keycove
┌─ temper search keycove ──────────────────────────────────┐ │ │ │ Searching 30 TLDs... 18/30 (0.7s elapsed) │ │ │ │ keycove.com ✗ taken (0.54s) │ │ keycove.net ✓ available (0.63s) │ │ keycove.org ✓ available (0.75s) │ │ keycove.ai ✓ available (0.62s) │ │ keycove.io ✓ available (0.80s, whois) │ │ keycove.app ✓ available (0.44s) │ │ keycove.dev ✓ available (0.47s) │ │ keycove.shop ✓ available (0.09s) │ │ keycove.info ✓ available (0.55s) │ │ keycove.xyz … checking │ │ keycove.co … checking │ │ keycove.store … checking │ │ keycove.site … checking │ │ keycove.online … checking │ │ keycove.tech … checking │ │ keycove.pro … checking │ │ ... │ │ │ │ ████████████░░░░░░░░ 60% │ ├─────────────────────────────────────────────────────────┤ │ ctrl+c cancel · esc back │ └─────────────────────────────────────────────────────────┘
Bubbles 컴포넌트: `spinner` (Braille 문자 회전), `progress` (gradient), `list` (30개 TLD 스크롤). Progressive rendering: channel로 goroutine 결과가 도착하는 대로 UI 즉시 업데이트.
3 검색 완료 + 도메인 선택 Vim 네비게이션 (j/k), / 필터, gg/G 점프
temper — search keycove
┌─ temper search keycove ──────────────────────────────────┐ │ │ │ ✓ Search complete 29/30 (1.4s) │ │ │ │ keycove.com ✗ taken │ │ keycove.net ✓ available │ │ keycove.org ✓ available │ │ keycove.ai ✓ available │ │ ▸ keycove.io ✓ available │ │ keycove.xyz ✓ available │ │ keycove.app ✓ available │ │ keycove.shop ✓ available │ │ keycove.info ✓ available │ │ keycove.co ✗ taken │ │ keycove.store ✓ available │ │ keycove.site ✓ available │ │ keycove.online ✓ available │ │ keycove.dev ✓ available │ │ keycove.tech ✓ available │ │ keycove.pro ✓ available │ │ ... │ │ keycove.top ⚠ slow (timeout) │ │ │ ├─────────────────────────────────────────────────────────┤ │ j/k move · / filter · enter buy · w watch · q quit │ └─────────────────────────────────────────────────────────┘
Vim 네비게이션: `j/k` 이동, `/` 필터, `gg/G` 맨위/맨아래, `q` 종료. gh-dash 참고: 선택 행 좌측 accent bar + surface 배경. Flow 깨지 않음: 상세는 우측 패널이 아닌 인라인 확장.
4 필터 모드 — `/` 누름 Bubbles list 내장 fuzzy filter
temper — search keycove (filter)
┌─ temper search keycove ──────────────────────────────────┐ │ │ │ / Filter: dev │ │ │ │ keycove.dev ✓ available │ │ ▸ keycove.developer ✓ available │ │ │ │ 1 of 2 matches │ │ │ ├─────────────────────────────────────────────────────────┤ │ esc clear · enter confirm │ └─────────────────────────────────────────────────────────┘
Bubbles list의 fuzzy filter: `/` 키로 활성화, 실시간 매칭, 일치 부분 강조. gh-dash 스타일: filter 활성 시 결과 개수 표시. `esc`로 초기화.
5 레지스트라 선택 (lazygit 스타일 팝업) 모달 메뉴, c/p/n/v 단일키 선택
temper — search keycove
┌─ temper search keycove ──────────────────────────────────┐ │ │ │ Selected: keycove.io ✓ available │ │ │ │ ╭─ Where to buy? ────────────────────────────────╮ │ │ │ │ │ │ │ [c] Cloudflare 도매가, 개발자 1순위 │ │ │ │ [p] Porkbun 업셀 없음, 투명한 가격 │ │ │ │ [n] Namecheap 입문자 친화 │ │ │ │ [v] Vercel 배포까지 한 번에 │ │ │ │ │ │ │ │ 기본: Cloudflare (~/.temper/config.json) │ │ │ ╰────────────────────────────────────────────────╯ │ │ │ ├─────────────────────────────────────────────────────────┤ │ c/p/n/v select · esc cancel │ └─────────────────────────────────────────────────────────┘ → c 키 누름: ✓ Opening Cloudflare in your browser... https://domains.cloudflare.com/?domainToCheck=keycove.io $
lazygit 팝업 패턴: 라운드 모서리 (`╭╮╰╯`) 모달, 단일키 액션. 브랜드 컬러: Cloudflare peach, Porkbun maroon, Namecheap red, Vercel text. 기본값 표시: config에서 설정한 레지스트라 하단 안내.
6 검색 히스토리 (temper history) Bubbles table 컴포넌트
temper — history
$ temper history ┌─ Recent searches ─────────────────────────────────────────┐ │ │ │ DATE QUERY TLDs RESULT │ │ ───────────────────────────────────────────────── │ │ 2026-04-06 14:32 keycove 30 28 avail │ │ 2026-04-06 10:15 vaultly 18 9 avail │ │ 2026-04-05 22:04 safekit 30 27 avail │ │ 2026-04-05 15:48 lockpath 30 25 avail │ │ 2026-04-04 09:21 keynest 30 30 avail │ │ 2026-04-03 18:07 jotbox 30 22 avail │ │ 2026-04-03 11:32 pinkit 30 19 avail │ │ │ │ Total: 7 searches · ~/.temper/history.json │ │ │ ├─────────────────────────────────────────────────────────┤ │ j/k move · enter re-search · d delete · q quit │ └─────────────────────────────────────────────────────────┘
Bubbles table: 열 헤더 + 구분선. `enter`로 재검색 (이전 쿼리 재실행). 로컬 저장 위치 하단 표시.
7 Watchlist (temper list) premium/aftermarket 상태 포함
temper — list
$ temper list ┌─ Watchlist ───────────────────────────────────────────────┐ │ │ │ lockpath.io ◆ premium $2,500 2d ago │ │ vaultly.com ◈ aftermarket $850 1d ago │ │ keycove.com ✗ taken — 1d ago │ │ safekit.io ◉ reserved — 3h ago │ │ │ │ 4 watched · ~/.temper/watchlist.json │ │ │ ├─────────────────────────────────────────────────────────┤ │ j/k move · r refresh · d remove · q quit │ └─────────────────────────────────────────────────────────┘
상태 아이콘 통일: `◆ premium`, `◈ aftermarket`, `◉ reserved`. 이모지 대신 기하학 기호: 터미널 호환성 + 시각적 일관성 (Catppuccin 팔레트와 조화).
8 조합어 생성 (temper suggest) 접두사/접미사 그룹별 정렬
temper — suggest keycove
$ temper suggest keycove ┌─ Suggestions for "keycove" ───────────────────────────────┐ │ │ │ BASE │ │ keycove ✓ available │ │ │ │ PREFIX │ │ getkeycove ✓ available │ │ usekeycove ✗ taken │ │ mykeycove ✗ taken │ │ trykeycove ✓ available │ │ │ │ SUFFIX │ │ keycoveapp ✓ available │ │ keycovely ✓ available │ │ keycovehq ✓ available │ │ keycovelabs ✓ available │ │ │ │ Summary: 7 available · 2 taken │ │ │ ├─────────────────────────────────────────────────────────┤ │ j/k move · enter check all TLDs · q quit │ └─────────────────────────────────────────────────────────┘
그룹 헤더: BASE / PREFIX / SUFFIX 대문자 라벨 (lavender 색). 인라인 요약: 맨 아래 dim 색상으로. `enter`로 선택 도메인의 30개 TLD 전체 조회.