ClaudeMods
☰
KO
● 0 명 접속 중 · 조회 0 회
후원프로젝트 제출
GitHub 저장소 · 작성자 KyongSik-Yoon

desktop-look

터미널 트랜스크립트를 Claude Code 데스크톱 앱처럼 보이게 합니다. 프롬프트 버블, 도구 카드, 정보 밴드를 제공합니다.

KyongSik-Yoon@KyongSik-Yoon

KyongSik-Yoon/claude-mods/tree/main/desktop-look

원본 게시물 이미지1
번역 완료

이 mod 소개

desktop-look

터미널 트랜스크립트를 데스크톱 앱과 비슷하게 만드는 Claude Code mod입니다.

이전과 이후, 정보 밴드, 실행 중 및 실패 상태

  • 프롬프트 버블: 자신의 메시지는 오른쪽 둥근 버블에 놓이고 테마의 파란색으로 표시되며 터미널 너비의 일정 비율에서 줄바꿈됩니다
  • 도구 카드: 도구 호출, 실시간 진행 상황, 결과가 왼쪽 가장자리의 한 레일을 공유해 하나의 카드처럼 읽힙니다
  • 상태를 한눈에: 호출 중에는 레일이 파란색이고, 오류가 났거나 대화상자에서 거부되었거나 중단되면 빨간색이며 완료되면 어두워집니다
  • 엔진은 여전히 카드 안에 모든 것을 그리므로 각 도구의 요약과 diff는 바뀌지 않습니다
  • 프롬프트 위 정보 밴드: 왼쪽에 이 세션이 편집한 내용(✎ 2 files +7 -0)과 사용한 비용($0.05)을, 오른쪽에 실행 중인 도구(↻ Read ×3, Grep, 좁을 때는 ↻ 4 running)를 표시하며 보여 줄 것이 없으면 숨깁니다
  • 어시스턴트 답변은 건드리지 않으므로 smooth-stream과 함께 작동합니다
  • 터미널 전용이며 데스크톱 앱, VS Code, 모바일은 각자의 모양을 유지합니다

설치

claude plugin marketplace add KyongSik-Yoon/claude-mods
claude plugin install desktop-look@kyongsik-mods

그 다음 /reload-plugins를 실행하거나 새 세션을 시작합니다. mods를 지원하는 Claude Code 빌드가 필요합니다(2.1.289, 전체 화면, 라이트/다크 테마에서 테스트됨).

옵션

설정할 필요가 없습니다. 하나를 바꾸려면 /plugin configure desktop-look@kyongsik-mods(또는 /config)를 실행합니다.

| 옵션 | 기본값 | | | --- | --- | --- | | 버블 너비 | 75% | 터미널의 60%, 75%, 90% | | 정보 밴드 | on | 프롬프트 위의 밴드 | | 밴드: 모델 | off | 표시하지 않는 상태 줄을 위한 모델과 effort | | 밴드: 컨텍스트 | off | 컨텍스트 사용량: 안정적일 때 파란색, 300k 토큰 또는 70%부터 노란색, 500k 토큰 또는 90%부터 빨간색이며 먼저 도달한 기준을 따름 |

비용은 Claude Code가 API 가격으로 계산한 값이며 구독에서 청구되는 금액이 아닙니다.

작동 방식

  • UserMessage(자신의 프롬프트만 해당하며 작업 알림이나 다른 세션의 메시지는 제외)는 오른쪽 정렬된 둥근 테두리의 Box로 그립니다.
  • ToolUse, ToolGroup, ToolProgress, ToolResult는 별도 렌더링 위치이므로 하나의 테두리가 이들을 가로지를 수 없습니다. 각각 엔진의 행(await next(e))을 감싸고 행 높이만큼 늘어나는 절대 위치의 한 열 레일을 추가하며, 엔진이 도구 행을 시작할 때 넣는 빈 줄은 건너뜁니다.
  • 레일 색상은 행의 props인 isRunning, isErrored, isInterrupted와 그룹의 호출에서 결정됩니다.
  • 밴드는 $.state의 값을 읽는 AbovePrompt hook입니다. tool.call(실행 중인 도구와 각 Edit 및 Write 결과 패치의 +/- 행), session.measure(비용, 컨텍스트), turn.step(모델)이 값을 기록합니다. 새 세션(/clear)은 집계를 다시 시작하고 reload는 집계를 유지합니다.

개발

claude plugin validate .
claude plugin test .

설치

먼저 작성자의 README에서 marketplace와 플러그인 이름을 확인하세요. 저장소 구조에 따라 명령어가 달라질 수 있습니다.

claude plugin marketplace add KyongSik-Yoon/claude-mods
claude plugin install desktop-look
원문 / README

desktop-look

A Claude Code mod that makes the terminal transcript look more like the desktop app.

Before and after, the info band, running and failed states

  • Prompt bubbles: your own messages sit on the right in a rounded bubble, their text in the theme's blue, wrapping at a share of the terminal width
  • Tool cards: a tool call, its live progress and its result share one rail down the left edge, so they read as one card
  • State at a glance: the rail is blue while a call runs, red when it errored, was refused at the dialog or was interrupted, and dim once done
  • The engine still draws everything inside a card, so each tool's own summary and diff are unchanged
  • Info band above the prompt: what this session edited (✎ 2 files +7 -0) and spent ($0.05) on the left, the tools running (↻ Read ×3, Grep, or ↻ 4 running when narrow) on the right; hidden when there is nothing to show
  • Assistant replies are left alone, so it works alongside smooth-stream
  • Terminal only; the desktop app, VS Code and mobile keep their own look

Install

claude plugin marketplace add KyongSik-Yoon/claude-mods
claude plugin install desktop-look@kyongsik-mods

Then run /reload-plugins or start a new session. Requires a Claude Code build with mods support (tested on 2.1.289, fullscreen and light/dark themes).

Options

No setup needed. To change one, run /plugin configure desktop-look@kyongsik-mods (or open /config):

| Option | Default | | | --- | --- | --- | | Bubble width | 75% | 60%, 75% or 90% of the terminal | | Info band | on | The band above the prompt | | Band: model | off | Model and effort, for a status line that does not show them | | Band: context | off | Context fill, for a status line that does not show it: blue while calm, yellow from 300k tokens or 70%, red from 500k tokens or 90%, whichever comes first |

The cost is what Claude Code computes at API prices; on a subscription it is not what you are billed.

How it works

  • UserMessage (your own prompts only, not task notifications or other sessions' messages) is drawn as a right-aligned Box with a round border.
  • ToolUse, ToolGroup, ToolProgress and ToolResult are separate render sites, so one border cannot span them. Each wraps the engine's own row (await next(e)) and adds an absolutely positioned one-column rail that stretches to the row's height, skipping the blank line the engine opens a tool row with.
  • The rail colour comes from the row's props: isRunning, isErrored, isInterrupted, and the calls of a group.
  • The band is an AbovePrompt hook reading values in $.state, written by tool.call (tools running, and the +/- lines of each Edit and Write result's patch), session.measure (cost, context) and turn.step (model). A new session (/clear) starts the tally over; a reload keeps it.

Develop

claude plugin validate .
claude plugin test .

비슷한 프로젝트