claude-code-monitor 1.0.4 → 1.1.1

package/CHANGELOG.md

@@ -5,6 +5,34 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.0] - 2026-01-22
+
+### Added
+
+- **Mobile Web Interface** - Monitor and control sessions from your smartphone
+  - Real-time session status via WebSocket
+  - View latest Claude messages with markdown rendering
+  - Focus terminal sessions remotely
+  - Send text messages to terminal (multi-line supported)
+  - Permission prompt responses (y/n/a) and Ctrl+C support
+  - Bottom sheet modal with swipe-to-close gesture
+- New command: `ccm serve` - Start mobile web server only
+- QR code display in terminal UI (press `h` to toggle)
+- Token-based authentication for mobile access
+- Auto-select available port when default port (3456) is in use
+
+### Changed
+
+- Redesigned README with demo GIFs for both Terminal UI and Mobile Web
+- Consolidated terminal fallback strategy for better code maintainability
+
+### Security
+
+- Mobile Web requires same Wi-Fi network (local network only)
+- Unique token generated per session for authentication
+- Warning messages about not sharing the access URL
+- Dangerous command detection in mobile input
+
 ## [1.0.4] - 2026-01-18
 
 ### Fixed

package/README.md

@@ -1,167 +1,144 @@
-# Claude Code Monitor CLI
+# Claude Code Monitor
 
 [![npm version](https://img.shields.io/npm/v/claude-code-monitor.svg)](https://www.npmjs.com/package/claude-code-monitor)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![macOS](https://img.shields.io/badge/platform-macOS-lightgrey.svg)](https://www.apple.com/macos/)
 
-**A CLI tool to monitor multiple Claude Code sessions in real-time from your terminal.**
+**Monitor multiple Claude Code sessions in real-time from your terminal or smartphone.**
+
+### Terminal UI
+Monitor sessions with keyboard navigation
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/onikan27/claude-code-monitor/main/docs/ccm-demo.gif" alt="Claude Code Monitor Demo" width="1000">
+  <img src="https://raw.githubusercontent.com/onikan27/claude-code-monitor/main/docs/ccm-demo.gif" alt="Terminal UI Demo" width="800">
 </p>
 
----
+### Mobile Web
+Control from your phone (same Wi-Fi required)
 
-## 📑 Table of Contents
-
-- [✨ Features](#-features)
-- [📋 Requirements](#-requirements)
-- [🚀 Installation](#-installation)
-- [⚡ Quick Start](#-quick-start)
-- [📖 Commands](#-commands)
-- [⌨️ Keybindings](#️-keybindings-watch-mode)
-- [🎨 Status Icons](#-status-icons)
-- [🖥️ Supported Terminals](#️-supported-terminals)
-- [💾 Data Storage](#-data-storage)
-- [📦 Programmatic Usage](#-programmatic-usage)
-- [🔧 Troubleshooting](#-troubleshooting)
-- [🔒 Security](#-security)
-- [⚠️ Disclaimer](#️-disclaimer)
-- [📝 Changelog](#-changelog)
-- [📄 License](#-license)
+<p align="center">
+  <img src="https://raw.githubusercontent.com/onikan27/claude-code-monitor/main/docs/mobile-web-demo.gif" alt="Mobile Web Demo" width="800">
+</p>
 
 ---
 
 ## ✨ Features
 
-- 🔌 **Serverless** - File-based session state management (no API server required)
-- 🔄 **Real-time** - Auto-updates on file changes
-- 🎯 **Tab Focus** - Instantly switch to the terminal tab of a selected session
-- 🎨 **Simple UI** - Displays only status and directory
+| Terminal (TUI) | Mobile Web |
+|----------------|------------|
+| Real-time session monitoring | Monitor from your smartphone |
+| Quick tab focus with keyboard | Remote terminal focus |
+| Vim-style navigation | Send messages to terminal |
+| Simple status display | Real-time sync via WebSocket |
+
+- 🔌 **Serverless** - File-based state management, no API server required
 - ⚡ **Easy Setup** - One command `ccm` for automatic setup and launch
+- 🔒 **Secure** - No external data transmission, token-based mobile auth
 
 ---
 
 ## 📋 Requirements
 
-> **Note**: This tool is **macOS only** due to its use of AppleScript for terminal focus features.
+> **Note**: This tool is **macOS only** due to its use of AppleScript for terminal control.
 
-- **macOS** (focus feature is macOS only)
+- **macOS**
 - **Node.js** >= 18.0.0
 - **Claude Code** installed
 
 ---
 
-## 🚀 Installation
+## 🚀 Quick Start
 
-### Global install (Recommended)
+### Install
 
 ```bash
 npm install -g claude-code-monitor
 ```
 
-### Run with npx (no install required)
+### Run
 
 ```bash
-npx claude-code-monitor
+ccm
 ```
 
-> **Note**: With npx, you must run `npx claude-code-monitor` each time (the `ccm` shortcut is only available with global install). Global install is recommended since this tool requires hook setup and is designed for continuous use.
-
----
+On first run, it automatically sets up hooks and launches the monitor.
 
-## ⚡ Quick Start
+### Mobile Access
 
-```bash
-ccm
-```
+1. Press `h` to show QR code (default port: 3456)
+2. Scan with your smartphone (same Wi-Fi required)
 
-On first run, it automatically sets up hooks and launches the monitor.
+> If port 3456 is in use, an available port is automatically selected.
 
 ---
 
-## 📖 Commands
+## 📖 Usage
+
+### Commands
 
 | Command | Alias | Description |
 |---------|-------|-------------|
-| `ccm` | - | Launch monitor TUI (auto-setup if not configured) |
-| `ccm watch` | `ccm w` | Launch monitor TUI |
+| `ccm` | - | Launch monitor (auto-setup if needed) |
+| `ccm watch` | `ccm w` | Launch monitor |
+| `ccm serve` | `ccm s` | Start mobile web server only |
 | `ccm setup` | - | Configure Claude Code hooks |
 | `ccm list` | `ccm ls` | List sessions |
 | `ccm clear` | - | Clear all sessions |
-| `ccm --version` | `ccm -V` | Show version |
-| `ccm --help` | `ccm -h` | Show help |
 
----
-
-## ⌨️ Keybindings (watch mode)
+### Keybindings
 
 | Key | Action |
 |-----|--------|
 | `↑` / `k` | Move up |
 | `↓` / `j` | Move down |
 | `Enter` / `f` | Focus selected session |
-| `1-9` | Quick select & focus by number |
+| `1-9` | Quick select & focus |
+| `h` | Show/Hide QR code |
 | `c` | Clear all sessions |
 | `q` / `Esc` | Quit |
 
----
-
-## 🎨 Status Icons
+### Status Icons
 
 | Icon | Status | Description |
 |------|--------|-------------|
 | `●` | Running | Claude Code is processing |
-| `◐` | Waiting | Waiting for user input (e.g., permission prompt) |
+| `◐` | Waiting | Waiting for user input |
 | `✓` | Done | Session ended |
 
 ---
 
-## 🖥️ Supported Terminals
-
-Focus feature works with the following terminals:
-
-| Terminal | Focus Support | Notes |
-|----------|--------------|-------|
-| iTerm2 | ✅ Full | TTY-based window/tab targeting |
-| Terminal.app | ✅ Full | TTY-based window/tab targeting |
-| Ghostty | ⚠️ Limited | Activates app only (cannot target specific window/tab) |
+## 📱 Mobile Web Interface
 
-> **Note**: Other terminals (Alacritty, kitty, Warp, etc.) can use monitoring but focus feature is not supported.
-
----
+Monitor and control Claude Code sessions from your smartphone.
 
-## 💾 Data Storage
+### Features
 
-Session data is stored in `~/.claude-monitor/sessions.json`.
+- Real-time session status via WebSocket
+- View latest Claude messages
+- Focus terminal sessions remotely
+- Send text messages to terminal (multi-line supported)
+- Swipe-to-close gesture on modal
+- Warning display for dangerous commands
 
-### What is stored
+### Security
 
-| Field | Description |
-|-------|-------------|
-| `session_id` | Claude Code session identifier |
-| `cwd` | Working directory path |
-| `tty` | Terminal device path (e.g., `/dev/ttys001`) |
-| `status` | Session status (running/waiting_input/stopped) |
-| `updated_at` | Last update timestamp |
+> **Important**: Your smartphone and Mac must be on the **same Wi-Fi network**.
 
-Data is automatically removed after 30 minutes of inactivity or when the terminal session ends.
+- **Token Authentication** - A unique token is generated for authentication
+- **Local Network Only** - Not accessible from the internet
+- **Do not share the URL** - Treat it like a password
 
 ---
 
-## 📦 Programmatic Usage
-
-Can also be used as a library:
+## 🖥️ Supported Terminals
 
-```typescript
-import { getSessions, getStatusDisplay } from 'claude-code-monitor';
+| Terminal | Focus Support | Notes |
+|----------|--------------|-------|
+| iTerm2 | ✅ Full | TTY-based targeting |
+| Terminal.app | ✅ Full | TTY-based targeting |
+| Ghostty | ⚠️ Limited | App activation only |
 
-const sessions = getSessions();
-for (const session of sessions) {
-  const { symbol, label } = getStatusDisplay(session.status);
-  console.log(`${symbol} ${label}: ${session.cwd}`);
-}
-```
+> Other terminals can use monitoring, but focus feature is not supported.
 
 ---
 
@@ -170,48 +147,66 @@ for (const session of sessions) {
 ### Sessions not showing
 
 1. Run `ccm setup` to verify hook configuration
-2. Check if `~/.claude/settings.json` contains hook settings
+2. Check `~/.claude/settings.json` for hook settings
 3. Restart Claude Code
 
-```bash
-# Check configuration
-cat ~/.claude/settings.json | grep ccm
-```
-
 ### Focus not working
 
-1. Verify you're using macOS
-2. Verify you're using iTerm2, Terminal.app, or Ghostty
-3. Check System Preferences > Privacy & Security > Accessibility permissions
+1. Verify you're using a supported terminal
+2. Check System Preferences > Privacy & Security > Accessibility
 
-### Reset session data
+### Reset data
 
 ```bash
 ccm clear
-# or
-rm ~/.claude-monitor/sessions.json
 ```
 
 ---
 
 ## 🔒 Security
 
-- This tool modifies `~/.claude/settings.json` to register hooks
-- Focus feature uses AppleScript to control terminal applications
-- All data is stored locally; no network requests are made
+- **No data sent to external servers** - All data stays on your machine
+- Hook registration modifies `~/.claude/settings.json`
+- Focus feature uses AppleScript for terminal control
+- Mobile Web uses token authentication on local network only
+
+---
+
+## 📦 Programmatic Usage
+
+```typescript
+import { getSessions, focusSession } from 'claude-code-monitor';
+
+const sessions = getSessions();
+if (sessions[0]?.tty) {
+  focusSession(sessions[0].tty);
+}
+```
 
 ---
 
 ## ⚠️ Disclaimer
 
-This is an unofficial community tool and is not affiliated with, endorsed by, or associated with Anthropic.
+This is an unofficial community tool and is not affiliated with Anthropic.
 "Claude" and "Claude Code" are trademarks of Anthropic.
 
 ---
 
+## 🐛 Issues
+
+Found a bug? [Open an issue](https://github.com/onikan27/claude-code-monitor/issues)
+
+---
+
+## 🤝 Contributing
+
+Contributions are welcome! Please open an issue or submit a PR.
+
+---
+
 ## 📝 Changelog
 
-See [CHANGELOG.md](./CHANGELOG.md) for a list of changes.
+See [CHANGELOG.md](./CHANGELOG.md) for details.
 
 ---
 

package/dist/bin/ccm.js

@@ -6,6 +6,7 @@ import { Command } from 'commander';
 import { render } from 'ink';
 import { Dashboard } from '../components/Dashboard.js';
 import { handleHookEvent } from '../hook/handler.js';
+import { startServer } from '../server/index.js';
 import { isHooksConfigured, setupHooks } from '../setup/index.js';
 import { clearSessions, getSessions } from '../store/file-store.js';
 import { getStatusDisplay } from '../utils/status.js';
@@ -47,13 +48,24 @@ function getTtyFromAncestors() {
 /**
  * Run TUI with alternate screen buffer
  */
-async function runWithAltScreen(renderFn) {
+async function runWithAltScreen(options = {}) {
     process.stdout.write(ENTER_ALT_SCREEN);
-    const { waitUntilExit } = renderFn();
+    // カーソルを非表示にして、より安定したレンダリングを行う
+    process.stdout.write('\x1b[?25l');
+    const instance = render(_jsx(Dashboard, { initialShowQr: options.qr }), { patchConsole: false });
+    // リサイズ時にInkの描画をクリアして再描画
+    const handleResize = () => {
+        instance.clear();
+        instance.rerender(_jsx(Dashboard, { initialShowQr: options.qr }));
+    };
+    process.stdout.on('resize', handleResize);
     try {
-        await waitUntilExit();
+        await instance.waitUntilExit();
     }
     finally {
+        process.stdout.off('resize', handleResize);
+        // カーソルを再表示
+        process.stdout.write('\x1b[?25h');
         process.stdout.write(EXIT_ALT_SCREEN);
     }
 }
@@ -61,13 +73,15 @@ const program = new Command();
 program
     .name('ccm')
     .description('Claude Code Monitor - CLI-based session monitoring')
-    .version(pkg.version);
+    .version(pkg.version)
+    .option('--qr', 'Show QR code for mobile access');
 program
     .command('watch')
     .alias('w')
     .description('Start the monitoring TUI')
-    .action(async () => {
-    await runWithAltScreen(() => render(_jsx(Dashboard, {})));
+    .option('--qr', 'Show QR code for mobile access')
+    .action(async (options) => {
+    await runWithAltScreen({ qr: options.qr });
 });
 program
     .command('hook <event>')
@@ -111,12 +125,21 @@ program
     .action(async () => {
     await setupHooks();
 });
+program
+    .command('serve')
+    .alias('s')
+    .description('Start web server for mobile monitoring')
+    .option('-p, --port <port>', 'Port number', '3456')
+    .action(async (options) => {
+    const port = parseInt(options.port, 10);
+    await startServer(port);
+});
 /**
- * Default action (when launched without arguments)
+ * Default action (when launched without arguments or with --qr only)
  * - Run setup if not configured
  * - Launch monitor if already configured
  */
-async function defaultAction() {
+async function defaultAction(options = {}) {
     if (!isHooksConfigured()) {
         console.log('Initial setup required.\n');
         await setupHooks();
@@ -128,12 +151,11 @@ async function defaultAction() {
         console.log('');
     }
     // Launch monitor
-    await runWithAltScreen(() => render(_jsx(Dashboard, {})));
-}
-// Default action when executed without commands
-if (process.argv.length === 2) {
-    defaultAction().catch(console.error);
-}
-else {
-    program.parse();
+    await runWithAltScreen(options);
 }
+// Handle default action (no subcommand)
+program.action(async () => {
+    const options = program.opts();
+    await defaultAction({ qr: options.qr });
+});
+program.parse();

package/dist/components/Dashboard.d.ts

@@ -1,3 +1,8 @@
 import type React from 'react';
-export declare function Dashboard(): React.ReactElement;
+interface DashboardProps {
+    /** Override default QR code visibility (e.g., from --qr CLI flag) */
+    initialShowQr?: boolean;
+}
+export declare function Dashboard({ initialShowQr }: DashboardProps): React.ReactElement;
+export {};
 //# sourceMappingURL=Dashboard.d.ts.map

package/dist/components/Dashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/components/Dashboard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,wBAAgB,SAAS,IAAI,KAAK,CAAC,YAAY,CAoH9C"}
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/components/Dashboard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,UAAU,cAAc;IACtB,qEAAqE;IACrE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,wBAAgB,SAAS,CAAC,EAAE,aAAa,EAAE,EAAE,cAAc,GAAG,KAAK,CAAC,YAAY,CA8L/E"}

package/dist/components/Dashboard.js

@@ -1,15 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text, useApp, useInput } from 'ink';
-import { useMemo, useState } from 'react';
+import { Box, Text, useApp, useInput, useStdout } from 'ink';
+import { useEffect, useMemo, useState } from 'react';
+import { MIN_TERMINAL_HEIGHT_FOR_QR } from '../constants.js';
+import { useServer } from '../hooks/useServer.js';
 import { useSessions } from '../hooks/useSessions.js';
-import { clearSessions } from '../store/file-store.js';
+import { clearSessions, readSettings, writeSettings } from '../store/file-store.js';
 import { focusSession } from '../utils/focus.js';
 import { SessionCard } from './SessionCard.js';
 const QUICK_SELECT_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
-export function Dashboard() {
+export function Dashboard({ initialShowQr }) {
     const { sessions, loading, error } = useSessions();
+    const { url, qrCode, loading: serverLoading } = useServer();
     const [selectedIndex, setSelectedIndex] = useState(0);
     const { exit } = useApp();
+    const { stdout } = useStdout();
+    // QRコード表示状態: --qrフラグが指定された場合はそれを優先、なければ設定を読み込む
+    const [qrCodeUserPref, setQrCodeUserPref] = useState(() => initialShowQr ?? readSettings().qrCodeVisible);
+    const [terminalHeight, setTerminalHeight] = useState(stdout?.rows ?? 40);
+    // Monitor terminal size changes
+    useEffect(() => {
+        if (!stdout)
+            return;
+        const handleResize = () => {
+            setTerminalHeight(stdout.rows ?? 40);
+        };
+        // Initial size
+        setTerminalHeight(stdout.rows ?? 40);
+        stdout.on('resize', handleResize);
+        return () => {
+            stdout.off('resize', handleResize);
+        };
+    }, [stdout]);
+    // QR code visibility: user preference AND terminal has enough space
+    const canShowQr = terminalHeight >= MIN_TERMINAL_HEIGHT_FOR_QR;
+    const qrCodeVisible = qrCodeUserPref && canShowQr;
+    const toggleQrCode = () => {
+        const newValue = !qrCodeUserPref;
+        setQrCodeUserPref(newValue);
+        writeSettings({ qrCodeVisible: newValue });
+    };
     const focusSessionByIndex = (index) => {
         const session = sessions[index];
         if (session?.tty) {
@@ -51,6 +80,11 @@ export function Dashboard() {
         if (input === 'c') {
             clearSessions();
             setSelectedIndex(0);
+            return;
+        }
+        if (input === 'h') {
+            toggleQrCode();
+            return;
         }
     });
     if (loading) {
@@ -60,5 +94,5 @@ export function Dashboard() {
         return _jsxs(Text, { color: "red", children: ["Error: ", error.message] });
     }
     const { running, waiting_input: waitingInput, stopped } = statusCounts;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Claude Code Monitor" }), _jsx(Text, { dimColor: true, children: " \u2502 " }), _jsxs(Text, { color: "green", children: ["\u25CF ", running] }), _jsx(Text, { dimColor: true, children: " " }), _jsxs(Text, { color: "yellow", children: ["\u25D0 ", waitingInput] }), _jsx(Text, { dimColor: true, children: " " }), _jsxs(Text, { color: "cyan", children: ["\u2713 ", stopped] })] }), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", marginTop: 1, paddingX: 1, paddingY: 0, children: sessions.length === 0 ? (_jsx(Box, { paddingY: 1, children: _jsx(Text, { dimColor: true, children: "No active sessions" }) })) : (sessions.map((session, index) => (_jsx(SessionCard, { session: session, index: index, isSelected: index === selectedIndex }, `${session.session_id}:${session.tty || ''}`)))) }), _jsxs(Box, { marginTop: 1, justifyContent: "center", gap: 1, children: [_jsx(Text, { dimColor: true, children: "[\u2191\u2193]Select" }), _jsx(Text, { dimColor: true, children: "[Enter]Focus" }), _jsx(Text, { dimColor: true, children: "[1-9]Quick" }), _jsx(Text, { dimColor: true, children: "[c]Clear" }), _jsx(Text, { dimColor: true, children: "[q]Quit" })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: "Claude Code Monitor" }), _jsx(Text, { dimColor: true, children: " " }), _jsxs(Text, { color: "gray", children: ["\u25CF ", running] }), _jsx(Text, { dimColor: true, children: " " }), _jsxs(Text, { color: "yellow", children: ["\u25D0 ", waitingInput] }), _jsx(Text, { dimColor: true, children: " " }), _jsxs(Text, { color: "green", children: ["\u2713 ", stopped] })] }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: sessions.length === 0 ? (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: "No active sessions" }) })) : (sessions.map((session, index) => (_jsx(SessionCard, { session: session, index: index, isSelected: index === selectedIndex }, `${session.session_id}:${session.tty || ''}`)))) })] }), _jsxs(Box, { marginTop: 1, justifyContent: "center", gap: 1, children: [_jsx(Text, { dimColor: true, children: "[\u2191\u2193]Select" }), _jsx(Text, { dimColor: true, children: "[Enter]Focus" }), _jsx(Text, { dimColor: true, children: "[1-9]Quick" }), _jsx(Text, { dimColor: true, children: "[c]Clear" }), _jsxs(Text, { dimColor: true, children: ["[h]", qrCodeUserPref ? 'Hide' : 'Show', "URL"] }), _jsx(Text, { dimColor: true, children: "[q]Quit" })] }), !serverLoading && url && !qrCodeUserPref && (_jsx(Box, { marginTop: 1, borderStyle: "round", borderColor: "gray", paddingX: 1, children: _jsx(Text, { color: "white", children: "\uD83D\uDCF1 Web UI available. Press [h] to show QR code for mobile access. (Same Wi-Fi required)" }) })), !serverLoading && url && qrCodeUserPref && (_jsxs(Box, { marginTop: 1, paddingX: 1, children: [qrCodeVisible && qrCode && (_jsx(Box, { flexShrink: 0, children: _jsx(Text, { children: qrCode }) })), _jsxs(Box, { flexDirection: "column", marginLeft: qrCodeVisible && qrCode ? 2 : 0, justifyContent: "center", children: [_jsx(Text, { bold: true, color: "magenta", children: "Web UI" }), _jsx(Text, { dimColor: true, children: url }), _jsx(Text, { dimColor: true, children: "Scan QR code to monitor sessions from your phone." }), _jsx(Text, { dimColor: true, children: "Tap a session to focus its terminal on this Mac." }), _jsx(Text, { color: "yellow", children: "\u26A0 Do not share this URL with others." }), !canShowQr && _jsx(Text, { color: "yellow", children: "\u26A0 Resize window to show QR code" })] })] }))] }));
 }

package/dist/components/SessionCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SessionCard.d.ts","sourceRoot":"","sources":["../../src/components/SessionCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAKjD,UAAU,gBAAgB;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;CACrB;AAOD,eAAO,MAAM,WAAW,8CAiCtB,CAAC"}
+{"version":3,"file":"SessionCard.d.ts","sourceRoot":"","sources":["../../src/components/SessionCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAIjD,UAAU,gBAAgB;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;CACrB;AAOD,eAAO,MAAM,WAAW,8CAyBtB,CAAC"}

package/dist/components/SessionCard.js

@@ -1,9 +1,8 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { memo } from 'react';
 import { getStatusDisplay } from '../utils/status.js';
 import { formatRelativeTime } from '../utils/time.js';
-import { Spinner } from './Spinner.js';
 function abbreviateHomePath(path) {
     if (!path)
         return '(unknown)';
@@ -13,6 +12,5 @@ export const SessionCard = memo(function SessionCard({ session, index, isSelecte
     const { symbol, color, label } = getStatusDisplay(session.status);
     const dir = abbreviateHomePath(session.cwd);
     const relativeTime = formatRelativeTime(session.updated_at);
-    const isRunning = session.status === 'running';
-    return (_jsxs(Box, { paddingX: 1, children: [_jsxs(Text, { color: isSelected ? 'cyan' : undefined, bold: isSelected, children: [isSelected ? '>' : ' ', " [", index + 1, "]"] }), _jsx(Text, { children: " " }), _jsx(Box, { width: 10, children: isRunning ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { color: "green" }), _jsxs(Text, { color: color, children: [" ", label] })] })) : (_jsxs(Text, { color: color, children: [symbol, " ", label] })) }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: relativeTime.padEnd(8) }), _jsx(Text, { color: isSelected ? 'white' : 'gray', children: dir })] }));
+    return (_jsxs(Box, { paddingX: 1, children: [_jsxs(Text, { color: isSelected ? 'cyan' : undefined, bold: isSelected, children: [isSelected ? '>' : ' ', " [", index + 1, "]"] }), _jsx(Text, { children: " " }), _jsx(Box, { width: 10, children: _jsxs(Text, { color: color, children: [symbol, " ", label] }) }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: relativeTime.padEnd(8) }), _jsx(Text, { color: isSelected ? 'white' : 'gray', children: dir })] }));
 });

package/dist/components/Spinner.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from 'ink';
 import { useSyncExternalStore } from 'react';
 const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
-const FRAME_INTERVAL_MS = 120; // Slightly slower for less CPU usage
+const FRAME_INTERVAL_MS = 200; // 200msでチラつきを軽減
 // Shared global spinner state - only ONE timer for all spinners
 let globalFrame = 0;
 let subscriberCount = 0;

package/dist/constants.d.ts

@@ -3,8 +3,6 @@
  */
 /** Package name used for npx commands */
 export declare const PACKAGE_NAME = "claude-code-monitor";
-/** Session timeout in milliseconds (30 minutes) */
-export declare const SESSION_TIMEOUT_MS: number;
 /** TTY cache TTL in milliseconds (30 seconds) */
 export declare const TTY_CACHE_TTL_MS = 30000;
 /** Maximum number of entries in TTY cache */
@@ -15,6 +13,11 @@ export declare const SESSION_UPDATE_DEBOUNCE_MS = 150;
 export declare const WRITE_DEBOUNCE_MS = 100;
 /** Periodic refresh interval for timeout detection in milliseconds (60 seconds) */
 export declare const SESSION_REFRESH_INTERVAL_MS = 60000;
+/**
+ * QRコード表示に必要な最小ターミナル高さ
+ * Header(1) + Sessions(3) + Shortcuts(2) + WebUI with QR(16) = 22行
+ */
+export declare const MIN_TERMINAL_HEIGHT_FOR_QR = 22;
 /** Hook event types supported by Claude Code */
 export declare const HOOK_EVENTS: readonly ["UserPromptSubmit", "PreToolUse", "PostToolUse", "Notification", "Stop"];
 export type HookEventName = (typeof HOOK_EVENTS)[number];

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,yCAAyC;AACzC,eAAO,MAAM,YAAY,wBAAwB,CAAC;AAElD,mDAAmD;AACnD,eAAO,MAAM,kBAAkB,QAAiB,CAAC;AAEjD,iDAAiD;AACjD,eAAO,MAAM,gBAAgB,QAAS,CAAC;AAEvC,6CAA6C;AAC7C,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,6DAA6D;AAC7D,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAE9C,0DAA0D;AAC1D,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAErC,mFAAmF;AACnF,eAAO,MAAM,2BAA2B,QAAS,CAAC;AAElD,gDAAgD;AAChD,eAAO,MAAM,WAAW,oFAMd,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,yCAAyC;AACzC,eAAO,MAAM,YAAY,wBAAwB,CAAC;AAElD,iDAAiD;AACjD,eAAO,MAAM,gBAAgB,QAAS,CAAC;AAEvC,6CAA6C;AAC7C,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,6DAA6D;AAC7D,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAE9C,0DAA0D;AAC1D,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAErC,mFAAmF;AACnF,eAAO,MAAM,2BAA2B,QAAS,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAE7C,gDAAgD;AAChD,eAAO,MAAM,WAAW,oFAMd,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/constants.js

@@ -3,8 +3,6 @@
  */
 /** Package name used for npx commands */
 export const PACKAGE_NAME = 'claude-code-monitor';
-/** Session timeout in milliseconds (30 minutes) */
-export const SESSION_TIMEOUT_MS = 30 * 60 * 1000;
 /** TTY cache TTL in milliseconds (30 seconds) */
 export const TTY_CACHE_TTL_MS = 30_000;
 /** Maximum number of entries in TTY cache */
@@ -15,6 +13,11 @@ export const SESSION_UPDATE_DEBOUNCE_MS = 150;
 export const WRITE_DEBOUNCE_MS = 100;
 /** Periodic refresh interval for timeout detection in milliseconds (60 seconds) */
 export const SESSION_REFRESH_INTERVAL_MS = 60_000;
+/**
+ * QRコード表示に必要な最小ターミナル高さ
+ * Header(1) + Sessions(3) + Shortcuts(2) + WebUI with QR(16) = 22行
+ */
+export const MIN_TERMINAL_HEIGHT_FOR_QR = 22;
 /** Hook event types supported by Claude Code */
 export const HOOK_EVENTS = [
     'UserPromptSubmit',

package/dist/hook/handler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"handler.d.ts","sourceRoot":"","sources":["../../src/hook/handler.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlE,gBAAgB;AAChB,eAAO,MAAM,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAMhD,CAAC;AAEH,gBAAgB;AAChB,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,aAAa,CAExE;AAED,gBAAgB;AAChB,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAEhE;AAED,wBAAsB,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAsDpF"}
+{"version":3,"file":"handler.d.ts","sourceRoot":"","sources":["../../src/hook/handler.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAKlE,gBAAgB;AAChB,eAAO,MAAM,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAMhD,CAAC;AAEH,gBAAgB;AAChB,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,aAAa,CAExE;AAED,gBAAgB;AAChB,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAEhE;AAED,wBAAsB,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAoDpF"}