claude-code-watcher 1.0.1 → 1.0.3

package/README.md

@@ -1,6 +1,17 @@
 # claude-code-watcher (ccw)
 
-![screenshot](./screenshot.png)
+<table>
+  <tr>
+    <td align="center">
+      <img src="./screenshot1.png" width="560"/><br/>
+      <sub>전체 뷰</sub>
+    </td>
+    <td align="center">
+      <img src="./screenshot2.png" width="220"/><br/>
+      <sub>컴팩트 뷰</sub>
+    </td>
+  </tr>
+</table>
 
 VS Code 터미널에서 실행 중인 Claude Code 세션을 실시간으로 모니터링하는 CLI 대시보드입니다.
 
@@ -9,10 +20,11 @@ VS Code 터미널에서 실행 중인 Claude Code 세션을 실시간으로 모
 ## 기능
 
 - **실시간 세션 목록** — 열려 있는 모든 Claude Code 세션의 상태를 TTY 오름차순으로 표시
-- **상태 추적** — `working` / `waiting` / `notification` / `stale` 상태 자동 전환
+- **상태 추적** — `대기중` ⚪ / `작업중` 🔵 / `응답 요청` 🔴 상태 자동 전환
 - **서브에이전트 추적** — Agent 툴 실행 중인 서브에이전트 수 표시
-- **알림** — `Stop`(응답 완료) 또는 `Notification`(권한 요청) 이벤트 발생 시 소리 알림 (사운드 커스터마이징 가능)
+- **알림** — `Stop`(응답 완료) 또는 `Notification`(응답 요청) 이벤트 발생 시 소리 알림 (사운드 커스터마이징 가능)
 - **세션 상세보기** — 선택한 세션의 마지막 메시지, 경로, 타임스탬프 등 상세 정보
+- **반응형 레이아웃** — 터미널 너비에 따라 자동으로 뷰 전환 (전체 → 컴팩트 → 상태 색상만)
 - **프로세스 재시작** — `R` 키로 대시보드 자체를 재실행
 
 ## 요구사항
@@ -87,39 +99,21 @@ ccw /sound stop Blow
 
 ## 세션 상태
 
-| 상태 | 색상 | 설명 |
+| 상태 | 표시 | 설명 |
 |------|------|------|
-| `working` | 노랑 | Claude가 응답을 처리 중 |
-| `waiting` | 초록 | 사용자 입력 대기 중 |
-| `notification` | 청록 | 권한 요청 등 알림 발생 |
-| `stale` | 회색 | 10분 이상 업데이트 없음 |
-| `error` | 빨강 | 오류 발생 |
+| 대기중 | ⚪ 흰색 | 사용자 입력 대기 중 |
+| 작업중 | 🔵 파랑 | Claude가 응답을 처리 중 |
+| 응답 요청 | 🔴 빨강 | 사용자 권한 요청 등 알림 발생 |
 
-## 동작 원리
+## 반응형 레이아웃
 
-Claude Code의 라이프사이클 훅을 통해 세션 상태를 추적합니다.
+터미널 너비에 따라 표시 방식이 자동으로 전환됩니다.
 
-```
-Claude Code 이벤트 발생
-       ↓
-~/.claude/hooks/session-tracker.mjs 실행
-       ↓
-~/.claude/dashboard/active/<sessionId>.json 업데이트
-       ↓
-ccw 대시보드가 파일 변경 감지 → 화면 갱신
-```
+| 너비 | 뷰 | 표시 내용 |
+|------|----|-----------|
+| 60 cols 이상 | 전체 대시보드 | 프로젝트명, 상태, 메시지, 시간 등 전체 정보 |
+| 60 cols 미만 | 컴팩트 뷰 | `● 프로젝트명` (상태 색상 + 이름) |
 
-등록되는 훅 이벤트:
-
-| 이벤트 | 전환 상태 |
-|--------|-----------|
-| `SessionStart` | `waiting` |
-| `UserPromptSubmit` | `working` |
-| `PreToolUse` / `PostToolUse` | `notification` → `working` 복원 |
-| `Stop` | `waiting` + 알림 |
-| `Notification` | `notification` (working 중일 때만) |
-| `SubagentStart` / `SubagentStop` | 서브에이전트 목록 관리 |
-| `SessionEnd` | 세션 파일 삭제 |
 
 ## 알려진 제한사항
 

package/hooks/session-tracker.mjs

@@ -73,10 +73,18 @@ switch (hookEvent) {
     break;
   }
 
-  case 'PreToolUse':
+  case 'PreToolUse': {
+    // PreToolUse means Claude is actively about to use a tool — always 'working'.
+    // This also covers the case where UserPromptSubmit didn't fire (hook failure, etc.).
+    const cur = existing.status ?? 'working';
+    status  = 'working';
+    message = cur === 'waiting' ? 'Processing...' : (existing.message ?? 'Processing...');
+    break;
+  }
+
   case 'PostToolUse': {
-    // Restore to 'working' from 'notification' (permission granted).
-    // Preserve 'waiting' and other states to avoid spurious transitions after Stop.
+    // Only restore to 'working' from active states; preserve 'waiting' to avoid
+    // spurious transitions when a delayed PostToolUse arrives after Stop.
     const cur = existing.status ?? 'working';
     status  = (cur === 'notification' || cur === 'working') ? 'working' : cur;
     message = existing.message ?? 'Processing...';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-watcher",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Claude Code 세션 CLI 대시보드",
   "type": "module",
   "bin": {
@@ -25,11 +25,11 @@
   "author": "roy-jung",
   "repository": {
     "type": "git",
-    "url": "https://oss.navercorp.com/roy-jung/claude-code-watcher"
+    "url": "https://github.com/roy-jung/claude-code-watcher"
   },
   "license": "MIT",
   "scripts": {
     "publish:internal": "npm publish --registry https://artifactory.navercorp.com/artifactory/api/npm/npm-naver/",
     "publish:public": "npm publish --registry https://registry.npmjs.org"
   }
-}
+}

package/src/commands/help.mjs

@@ -23,11 +23,9 @@ ${BOLD}Dashboard Keys:${RESET}
   ${color(FG.CYAN, 'q')}  /  ${color(FG.CYAN, 'Ctrl+C')}   종료
 
 ${BOLD}Status Colors:${RESET}
-  ${color(FG.YELLOW, 'working')}        Claude가 응답을 처리 중
-  ${color(FG.GREEN, 'waiting')}        사용자 입력 대기 중
-  ${color(FG.CYAN, 'notification')}   알림 수신됨
-  ${color(FG.BRIGHT_BLACK, 'stale')}          10분 이상 비활성
-  ${color(FG.RED, 'error')}          오류 발생
+  ${color(FG.BRIGHT_BLUE, 'working')}        Claude가 응답을 처리 중
+  ${color(FG.BRIGHT_WHITE, 'waiting')}        사용자 입력 대기 중
+  ${color(FG.BRIGHT_RED, 'notification')}   알림 수신됨
 
 ${BOLD}Session Data:${RESET}
   ~/.claude/dashboard/active/<sessionId>.json

package/src/core/session.mjs

@@ -1,5 +1,3 @@
-export const STALE_THRESHOLD_MS = 10 * 60 * 1000; // 10 minutes
-
 /**
  * Parse raw JSON data into a SessionRecord.
  * Returns null if the data is invalid.
@@ -40,7 +38,7 @@ export function parseSession(raw, filename) {
 export function deriveSession(record, now = new Date()) {
   const updatedAt = parseDate(record.updated) || now;
   const startedAt = parseDate(record.startedAt) || now;
-  const status = classifyStatus(record.status, updatedAt, now);
+  const status = classifyStatus(record.status);
 
   return {
     ...record,
@@ -53,18 +51,11 @@ export function deriveSession(record, now = new Date()) {
 }
 
 /**
- * Classify session status, marking as stale if inactive for > STALE_THRESHOLD_MS.
+ * Classify session status.
  * @param {string} status
- * @param {Date} updatedAt
- * @param {Date} now
  * @returns {string}
  */
-export function classifyStatus(status, updatedAt, now = new Date()) {
-  if (status === 'error') return 'error';
-
-  const sinceMs = now - updatedAt;
-  if (sinceMs > STALE_THRESHOLD_MS && status !== 'working' && status !== 'notification') return 'stale';
-
+export function classifyStatus(status) {
   return status || 'waiting';
 }
 

package/src/ui/format.mjs

@@ -61,24 +61,30 @@ export function formatTime(date) {
 export function statusColor(status) {
   switch (status) {
     case 'working':
-      return FG.YELLOW;
+      return FG.BRIGHT_BLUE;
     case 'waiting':
-      return FG.GREEN;
-    case 'stale':
-      return FG.BRIGHT_BLACK;
+      return FG.BRIGHT_WHITE;
     case 'notification':
-      return FG.CYAN;
-    case 'error':
-      return FG.RED;
+      return FG.BRIGHT_RED;
     default:
-      return FG.WHITE;
+      return FG.BRIGHT_BLACK;
   }
 }
 
+const STATUS_LABEL = {
+  working:      '작업중',
+  waiting:      '대기중',
+  notification: '응답 요청',
+};
+
+export function statusLabel(status) {
+  return STATUS_LABEL[status] ?? status;
+}
+
 /**
  * Return a colored status label string.
  */
 export function formatStatus(status) {
-  return color(statusColor(status), status);
+  return color(statusColor(status), statusLabel(status));
 }
 

package/src/ui/renderer.mjs

@@ -20,6 +20,7 @@ import {
   padEnd,
   padStart,
   statusColor,
+  statusLabel,
   truncate,
 } from './format.mjs';
 
@@ -224,28 +225,56 @@ export class Renderer {
     const lines = [];
 
     if (cols < MIN_WIDTH) {
-      lines.push('');
-      lines.push(
-        color(FG.RED, `  Terminal too narrow (min ${MIN_WIDTH} cols)`),
-      );
-      lines.push(color(FG.BRIGHT_BLACK, `  Current: ${cols} cols`));
-      this.#flush(lines, rows);
-      return;
+      this.#renderCompact(lines, cols, rows);
+    } else {
+      // Use cols-1 so the box never touches the terminal's last column,
+      // avoiding auto-wrap artifacts in terminals like Ghostty.
+      const w = cols - 1;
+      if (this.#view === 'detail' && this.#sessions.length > 0) {
+        this.#renderDetail(lines, w, rows);
+      } else {
+        this.#renderList(lines, w, rows);
+      }
     }
+    this.#flush(lines, rows);
+  }
+
+  /** Compact view: project name + colored status indicator (COMPACT_WIDTH <= cols < MIN_WIDTH). */
+  #renderCompact(lines, cols, rows) {
+    const w = cols - 1; // avoid auto-wrap like full view
+    const inner = w - 2; // between │ and │
 
-    // Use cols-1 so the box never touches the terminal's last column,
-    // avoiding auto-wrap artifacts in terminals like Ghostty.
-    const w = cols - 1;
+    // Top border with title: ╭─ Claude Code Watcher ───╮
+    const titleStr = '─ Claude Code Watcher ';
+    const rightDashes = Math.max(0, inner - titleStr.length);
+    lines.push(color(FG.WHITE, `╭${titleStr}${'─'.repeat(rightDashes)}╮`));
 
-    if (this.#view === 'detail' && this.#sessions.length > 0) {
-      this.#renderDetail(lines, w, rows);
+    if (this.#sessions.length === 0) {
+      lines.push(
+        `${color(FG.WHITE, '│')}${padEnd(color(FG.BRIGHT_BLACK, ' ○'), inner)}${color(FG.WHITE, '│')}`,
+      );
     } else {
-      this.#renderList(lines, w, rows);
+      const nameW = inner - 3; // ' ● ' = 3
+      for (const session of this.#sessions) {
+        const dot = color(statusColor(session.status), '●');
+        const name = color(statusColor(session.status), padEnd(truncate(session.displayName, nameW), nameW));
+        lines.push(
+          `${color(FG.WHITE, '│')} ${dot} ${name}${color(FG.WHITE, '│')}`,
+        );
+      }
     }
+
+    lines.push(color(FG.WHITE, `╰${'─'.repeat(inner)}╯`));
+
+    const credit = color(FG.BRIGHT_BLACK, '@roy-jung');
+    lines.push(
+      ' '.repeat(Math.max(0, w - visibleLength('@roy-jung'))) + credit,
+    );
+
     this.#flush(lines, rows);
   }
 
-  #renderHeader(lines, cols, now) {
+#renderHeader(lines, cols, now) {
     const count = this.#sessions.length;
     const inner = cols - 4;
     const dot = count > 0 ? color(FG.CYAN, '●') : color(FG.BRIGHT_BLACK, '○');
@@ -304,7 +333,9 @@ export class Renderer {
           color(isSelected ? FG.CYAN : FG.BRIGHT_BLACK, numStr.padStart(NUM_W)),
           NUM_W,
         );
-        const proj = padEnd(truncate(session.displayName, projW), projW);
+        const rc = str => color(statusColor(session.status), str);
+
+        const proj = rc(padEnd(truncate(session.displayName, projW), projW));
         const subagents = this.#store.getSubagents(session.sessionId);
         const activeSubCount = subagents.filter(
           s => s.status === 'working',
@@ -313,7 +344,7 @@ export class Renderer {
         if (activeSubCount > 0) {
           const badge = color(FG.BRIGHT_BLACK, `[${activeSubCount}]`);
           const badgeW = 1 + String(activeSubCount).length + 2; // ' [N]'
-          const label = truncate(session.status, STAT_W - badgeW);
+          const label = truncate(statusLabel(session.status), STAT_W - badgeW);
           stat = padEnd(
             `${coloredStatus(session.status, label)} ${badge}`,
             STAT_W,
@@ -321,14 +352,11 @@ export class Renderer {
         } else {
           stat = padEnd(formatStatus(session.status), STAT_W);
         }
-        const msg = padEnd(
+        const msg = rc(padEnd(
           truncate(session.message || session.lastResponse || '', msgW),
           msgW,
-        );
-        const time = color(
-          FG.BRIGHT_BLACK,
-          padEnd(session.sinceLabel || '', TIME_W),
-        );
+        ));
+        const time = rc(padEnd(session.sinceLabel || '', TIME_W));
 
         const rowLine = buildDataLine(sel, num, proj, stat, msg, time);
         lines.push(