tapback-cli 0.0.1

package/.claude/commands/commit-push.md

@@ -0,0 +1,67 @@
+# Commit and Push
+
+新しいブランチを作成し、変更をコミットしてプッシュし、PRを作成します。
+
+## ベースブランチ
+
+- main
+
+## 手順
+
+1. **ブランチの作成**
+   - 現在のブランチ状況を確認
+   - 新しいブランチを作成するか、既存のブランチを使用するかをユーザーに確認
+   - ユーザーに新しいブランチ名を確認（提案する場合は feature/xxx, fix/xxx, docs/xxx などのプレフィックスを使用）
+   - ベースブランチから新しいブランチを作成（必要に応じてベースブランチを最新化）
+
+2. **変更のコミット**
+   - git status で変更内容を確認
+   - git diff で差分を確認
+   - 明確な指示がない限り変更されているファイルはすべて含める。 `git add .` を使用
+   - 変更内容に応じた適切なコミットメッセージを作成
+   - 変更をステージングしてコミット
+   - コミットメッセージには以下を含める：
+     - 簡潔な変更内容の要約
+     - フッターに以下を追加：
+
+       ```text
+       🤖 Generated with [Claude Code](https://claude.com/claude-code)
+
+       Co-Authored-By: Claude <noreply@anthropic.com>
+       ```
+
+3. **リモートへのプッシュ**
+   - `git push -u origin {branch-name}` でリモートにプッシュ
+   - プッシュ後の状態を確認
+
+4. **PRの作成**
+   - `gh pr create --assignee @me` でPRを作成し、操作しているユーザーを担当者にアサイン
+   - PRのタイトルはコミットメッセージの要約を使用
+   - PRの本文には以下を含める：
+     - `## Summary` - 変更内容の要約（1-3行）
+     - `## Test plan` - テスト方法のチェックリスト
+     - フッターに以下を追加：
+
+       ```text
+       🤖 Generated with [Claude Code](https://claude.com/claude-code)
+       ```
+
+   - 作成後、PRのURLをユーザーに表示
+
+5. **レビューコメントの追加**
+   - レビュアーに説明が必要な変更箇所がある場合、該当行にコメントを追加する
+   - 以下のコマンドで特定の行にコメントを追加：
+
+     ```bash
+     gh api repos/{owner}/{repo}/pulls/{PR番号}/comments \
+       -f body="コメント内容" \
+       -f path="ファイルパス" \
+       -F position=diff内の行位置 \
+       -f commit_id="$(git rev-parse HEAD)"
+     ```
+
+## 注意事項
+
+- ブランチ名は機能や修正内容がわかるように命名する
+- コミット前に必ず変更内容を確認する
+- .env や credentials.json などの機密情報をコミットしないよう注意する

package/.claude/settings.local.json

@@ -0,0 +1,43 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(swift build:*)",
+      "WebSearch",
+      "Bash(swiftformat:*)",
+      "Bash(git checkout:*)",
+      "Bash(git add:*)",
+      "Bash(git commit -m \"$\\(cat <<''EOF''\nUI改善とメニューバー簡素化\n\n- メニューバーをOpen WindowとQuitのみに簡素化\n- PINステータスにCircleインジケーター追加\n- PIN表示の改行問題を修正\n- デフォルトproxyPortsを空に変更\n- セッション・設定の永続化\n\nCo-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>\nEOF\n\\)\")",
+      "Bash(grep:*)",
+      "WebFetch(domain:github.com)",
+      "WebFetch",
+      "Bash(swift package update:*)",
+      "Bash(git pull:*)",
+      "Bash(git commit -m \"$\\(cat <<''EOF''\nfeat: Add custom quick buttons for mobile interface\n\n- Add QuickButton model with label and command\n- Add quickButtons to ServerManager with persistence\n- Add Quick Button Settings UI in Mac app\n- Render custom buttons in mobile web interface with blue color scheme\n\nUsers can configure custom command buttons \\(e.g., /commit, /push\\) that\nappear on the mobile interface for quick access to frequently used commands.\n\nCo-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>\nEOF\n\\)\")",
+      "Bash(git push:*)",
+      "Bash(gh run view:*)",
+      "Bash(git commit -m \"$\\(cat <<''EOF''\nfix: Update softprops/action-gh-release to v2\n\nCo-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>\nEOF\n\\)\")",
+      "Bash(tmux list-sessions:*)",
+      "Bash(tmux capture-pane:*)",
+      "Bash(claude --resume --help:*)",
+      "Bash(claude -r:*)",
+      "Bash(ls:*)",
+      "Bash(curl:*)",
+      "Bash(while read s)",
+      "Bash(done)",
+      "Bash(python3:*)",
+      "Bash(iconutil:*)",
+      "Bash(git commit -m \"$\\(cat <<''EOF''\nfeat: Add app icon\n\n- Add mobile+terminal design icon \\(smartphone with >_ prompt\\)\n- Configure Package.swift to include icon resource\n- Set app icon on launch in AppDelegate\n\nCo-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>\nEOF\n\\)\")",
+      "Bash(chmod:*)",
+      "Bash(npm install)",
+      "Bash(timeout 3 node:*)",
+      "Bash(lsof:*)",
+      "Bash(xargs kill:*)",
+      "Bash(git commit:*)",
+      "Bash(gh pr create:*)",
+      "Bash(gh pr checks:*)",
+      "Bash(npx prettier:*)",
+      "Bash(npm run format:check:*)",
+      "Bash(gh run list:*)"
+    ]
+  }
+}

package/.github/workflows/ci.yml

@@ -0,0 +1,19 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm ci
+      - run: npm run format:check

package/.github/workflows/release.yml

@@ -0,0 +1,29 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+          registry-url: https://registry.npmjs.org
+      - run: npm ci
+      - run: npm run format:check
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Create GitHub Release
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: gh release create ${{ github.ref_name }} --generate-notes

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": true,
+  "printWidth": 100
+}

package/CLAUDE.md

@@ -0,0 +1,84 @@
+# CLAUDE.md
+
+このファイルはClaude Codeがこのリポジトリで作業する際のガイダンスを提供します。
+
+## プロジェクト概要
+
+Tapbackは、モバイル端末からClaude Code/Codexのターミナルを監視・操作するNode.js CLIツールです。tmuxセッションの出力をWebSocket経由でリアルタイム配信し、localhostで動作するWebアプリへのリバースプロキシ機能も提供します。
+
+## ビルドとテスト
+
+```bash
+# 依存インストール
+npm install
+
+# 実行
+node bin/cli.js
+
+# ポート指定
+node bin/cli.js 8080
+
+# プロキシ付き
+node bin/cli.js --proxy 3000:3001
+
+# PIN無効
+node bin/cli.js --no-pin
+```
+
+## アーキテクチャ
+
+### ディレクトリ構造
+
+```text
+tapback-node/
+├── package.json          # bin: tapback, dependencies
+├── bin/cli.js            # エントリーポイント (#!/usr/bin/env node)
+├── src/
+│   ├── server.js         # Express + WebSocket サーバー (ポート9876)
+│   ├── tmux.js           # tmuxコマンド実行 (child_process.execFile)
+│   ├── proxy.js          # リバースプロキシ (localhost書き換え)
+│   ├── claudeStatus.js   # Claude Codeステータス管理 + hooks設置
+│   ├── config.js         # 設定ファイル (~/.tapback.json) 読み書き
+│   └── html.js           # モバイルUI HTML生成
+```
+
+### 主要コンポーネント
+
+- **server.js**: Express + wsベースのサーバー。ターミナルUI、PIN認証（メイン/設定で別PIN）、WebSocket、設定API
+- **tmux.js**: tmuxコマンド（capture-pane, send-keys, list-sessions, display-message）のPromiseラッパー
+- **proxy.js**: http-proxyベースのリバースプロキシ。localhost参照を自動的にMacのIPに書き換え
+- **claudeStatus.js**: Claude Codeフック設置、ステータス受信・保存。`~/.claude/settings.json`を更新
+- **config.js**: `~/.tapback.json`による設定永続化（PIN有効/無効、プロキシポート、クイックボタン）
+- **html.js**: モバイル向けレスポンシブWebUI、設定ページ、PIN認証ページ
+
+### 通信フロー
+
+1. モバイル → `/api/sessions` でtmuxセッション一覧取得
+2. モバイル → `/ws` WebSocket接続
+3. サーバー → 全tmuxセッションの出力を1秒ごとにブロードキャスト
+4. モバイル → WebSocketでコマンド送信 → `tmux.sendKeys`でtmuxに転送
+
+### 認証
+
+- メインページ (`/`): 4桁PIN、Cookie(24h)。`--no-pin`または設定で無効化可能
+- 設定ページ (`/settings`): 別の4桁PIN、常に有効
+
+## コーディング規約
+
+- Node.js (CommonJS)
+- 非同期処理はasync/awaitとPromise
+- サーバーはExpress + ws
+
+## 依存関係
+
+- **express**: HTTPサーバー
+- **ws**: WebSocket
+- **http-proxy**: リバースプロキシ
+- **cookie-parser**: Cookie認証
+
+## 注意点
+
+- tmuxコマンドは明示的に`session:0.0`を指定（複数ウィンドウ/ペーン対応のため）
+- PATH設定で`/opt/homebrew/bin`と`/usr/local/bin`を追加（tmux検出用）
+- プロキシはlocalhost参照を自動的にMacのIPに書き換え
+- 設定ファイルは`~/.tapback.json`に保存

package/README.md

@@ -0,0 +1,71 @@
+# Tapback
+
+モバイル端末からClaude Code/Codexのターミナルを監視・操作するNode.js CLIツール。
+
+tmuxセッションの出力をWebSocket経由でリアルタイム配信し、スマホからターミナルの閲覧・コマンド入力ができます。
+
+## 機能
+
+- tmuxセッションのリアルタイム監視（1秒間隔）
+- モバイルからのコマンド送信
+- Claude Codeのステータス表示（hooks連携）
+- localhostアプリのリバースプロキシ
+- PIN認証（メインページ・設定ページで別PIN）
+- Web設定画面（プロキシポート、クイックボタン）
+
+## インストール
+
+```bash
+npm install
+```
+
+## 使い方
+
+```bash
+# 基本起動（ポート9876）
+node bin/cli.js
+
+# ポート指定
+node bin/cli.js 8080
+
+# リバースプロキシ付き（localhost:3000 → :3001で外部公開）
+node bin/cli.js --proxy 3000:3001
+
+# PIN認証を無効化
+node bin/cli.js --no-pin
+```
+
+起動すると以下が表示されます：
+
+```text
+  Tapback is running!
+  URL:          http://192.168.x.x:9876/
+  Settings:     http://192.168.x.x:9876/settings
+  PIN:          1234
+  Settings PIN: 5678
+```
+
+スマホで表示されたURLにアクセスし、PINを入力してください。
+
+## 設定
+
+設定は`~/.tapback.json`に保存されます。Web UIの`/settings`からも編集可能です。
+
+```json
+{
+  "pinEnabled": true,
+  "proxyPorts": { "3000": 3001 },
+  "quickButtons": [{ "label": "push", "command": "/commit-push" }]
+}
+```
+
+## Claude Code連携
+
+起動時にClaude Codeのhooksを自動設置します（`~/.claude/hooks/tapback-status-hook.sh`）。
+Claude Codeのセッション状態（starting/processing/idle/waiting/ended）がリアルタイムでモバイルUIに反映されます。
+
+## 必要環境
+
+- Node.js 18+
+- tmux
+- macOS（ローカルIP取得にen0を使用）

package/bin/cli.js

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+
+const { createServer, getLocalIP } = require('../src/server');
+const { createProxyServer } = require('../src/proxy');
+const { installHooks } = require('../src/claudeStatus');
+const config = require('../src/config');
+
+// Load saved config
+const cfg = config.load();
+
+// CLI args override config
+let port = 9876;
+const proxyPorts = { ...cfg.proxyPorts };
+
+for (let i = 2; i < process.argv.length; i++) {
+  const arg = process.argv[i];
+  if (arg === '--proxy' && process.argv[i + 1]) {
+    const [target, external] = process.argv[++i].split(':').map(Number);
+    if (target && external) proxyPorts[String(target)] = external;
+  } else if (arg === '--no-pin') {
+    cfg.pinEnabled = false;
+  } else if (/^\d+$/.test(arg)) {
+    port = Number(arg);
+  }
+}
+
+// Install Claude Code hooks
+try {
+  installHooks(port);
+  console.log('[Tapback] Claude Code hooks installed');
+} catch (e) {
+  console.warn('[Tapback] Failed to install hooks:', e.message);
+}
+
+const macIP = getLocalIP();
+const firstExternalPort = Object.values(proxyPorts)[0];
+
+const { pin, settingsPin } = createServer({
+  port,
+  pinEnabled: cfg.pinEnabled,
+  quickButtons: cfg.quickButtons,
+  appURL: firstExternalPort ? `http://${macIP}:${firstExternalPort}/` : null,
+});
+
+// Start proxy servers
+for (const [target, external] of Object.entries(proxyPorts)) {
+  createProxyServer(Number(target), Number(external), macIP, proxyPorts);
+}
+
+console.log('');
+console.log('  Tapback is running!');
+console.log(`  URL:          http://${macIP}:${port}/`);
+console.log(`  Settings:     http://${macIP}:${port}/settings`);
+console.log(`  PIN:          ${pin} ${cfg.pinEnabled ? '' : '(disabled)'}`);
+console.log(`  Settings PIN: ${settingsPin}`);
+console.log('');
+
+process.on('SIGINT', () => process.exit(0));
+process.on('SIGTERM', () => process.exit(0));

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "tapback-cli",
+  "version": "0.0.1",
+  "description": "Monitor and control tmux sessions from your mobile device",
+  "bin": {
+    "tapback": "./bin/cli.js"
+  },
+  "scripts": {
+    "start": "node bin/cli.js",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  },
+  "keywords": [
+    "tmux",
+    "terminal",
+    "mobile",
+    "claude-code"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "cookie-parser": "^1.4.6",
+    "express": "^4.18.2",
+    "http-proxy": "^1.18.1",
+    "ws": "^8.16.0"
+  },
+  "devDependencies": {
+    "prettier": "^3.8.1"
+  }
+}

package/src/claudeStatus.js

@@ -0,0 +1,113 @@
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+
+class ClaudeStatusStore {
+  constructor() {
+    this.statuses = new Map(); // key: project_dir or session_id
+  }
+
+  update(status) {
+    const key = status.project_dir || status.session_id;
+    this.statuses.set(key, { ...status, timestamp: new Date().toISOString() });
+    // Clean up old (>1h)
+    const cutoff = Date.now() - 3600000;
+    for (const [k, v] of this.statuses) {
+      if (new Date(v.timestamp).getTime() < cutoff) this.statuses.delete(k);
+    }
+  }
+
+  getAll() {
+    return [...this.statuses.values()].sort(
+      (a, b) => new Date(b.timestamp) - new Date(a.timestamp),
+    );
+  }
+}
+
+function installHooks(port = 9876) {
+  const homeDir = os.homedir();
+  const hooksDir = path.join(homeDir, '.claude', 'hooks');
+  const hookScriptPath = path.join(hooksDir, 'tapback-status-hook.sh');
+  const settingsPath = path.join(homeDir, '.claude', 'settings.json');
+
+  fs.mkdirSync(hooksDir, { recursive: true });
+
+  const hookScript = `#!/bin/bash
+# Tapback Status Hook for Claude Code
+# Auto-installed by Tapback
+
+set -e
+
+input=$(cat)
+
+hook_event_name=$(echo "$input" | jq -r '.hook_event_name // empty')
+session_id=$(echo "$input" | jq -r '.session_id // empty')
+cwd=$(echo "$input" | jq -r '.cwd // empty')
+model=$(echo "$input" | jq -r '.model // empty')
+
+if [ -z "$session_id" ]; then
+    exit 0
+fi
+
+case "$hook_event_name" in
+    "SessionStart") status="starting" ;;
+    "UserPromptSubmit") status="processing" ;;
+    "Stop") status="idle" ;;
+    "Notification")
+        notification_type=$(echo "$input" | jq -r '.notification_type // empty')
+        if [ "$notification_type" = "idle_prompt" ]; then
+            status="waiting"
+        else
+            exit 0
+        fi
+        ;;
+    "SessionEnd") status="ended" ;;
+    *) exit 0 ;;
+esac
+
+TAPBACK_URL="\${TAPBACK_URL:-http://localhost:${port}}"
+
+curl -s -X POST "\${TAPBACK_URL}/api/claude-status" \\
+    -H "Content-Type: application/json" \\
+    -d "{\\"session_id\\":\\"$session_id\\",\\"status\\":\\"$status\\",\\"project_dir\\":\\"$cwd\\",\\"model\\":\\"$model\\"}" \\
+    >/dev/null 2>&1 || true
+
+exit 0
+`;
+
+  fs.writeFileSync(hookScriptPath, hookScript, { mode: 0o755 });
+
+  // Update settings.json
+  const hooksConfig = {};
+  const hookCommand = hookScriptPath;
+  for (const event of ['SessionStart', 'UserPromptSubmit', 'Stop', 'SessionEnd']) {
+    hooksConfig[event] = [{ hooks: [{ type: 'command', command: hookCommand }] }];
+  }
+  hooksConfig['Notification'] = [
+    { matcher: 'idle_prompt', hooks: [{ type: 'command', command: hookCommand }] },
+  ];
+
+  let settings = {};
+  try {
+    settings = JSON.parse(fs.readFileSync(settingsPath, 'utf8'));
+  } catch {}
+
+  const existing = settings.hooks || {};
+  for (const [key, value] of Object.entries(hooksConfig)) {
+    const arr = existing[key] || [];
+    const hasTapback = arr.some(
+      (item) =>
+        item.hooks &&
+        item.hooks.some((h) => h.command && h.command.includes('tapback-status-hook.sh')),
+    );
+    if (!hasTapback) {
+      existing[key] = [...arr, ...value];
+    }
+  }
+  settings.hooks = existing;
+
+  fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2));
+  return true;
+}
+
+module.exports = { ClaudeStatusStore, installHooks };

package/src/config.js

@@ -0,0 +1,26 @@
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+
+const CONFIG_PATH = path.join(os.homedir(), '.tapback.json');
+
+const DEFAULTS = {
+  pinEnabled: true,
+  proxyPorts: {}, // { "3000": 3001 } = localhost:3000 -> :3001
+  quickButtons: [], // [{ label, command }]
+};
+
+function load() {
+  try {
+    const data = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf8'));
+    return { ...DEFAULTS, ...data };
+  } catch {
+    return { ...DEFAULTS };
+  }
+}
+
+function save(config) {
+  fs.writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2));
+}
+
+module.exports = { load, save, CONFIG_PATH };