mcpField
O
openclaw-session-viewer

openclaw-session-viewer

github.com/theangrypitエージェントワークフロー042 回インストール今日更新
リポジトリ

openclaw-session-viewer について

Codex、Claude Code、OpenClaw、Pi のセッション記録を、ブラウザーで表示できる HTML にするスキルです。正規化・生データの出力、全履歴の読み込み、再利用できるファイル選択ビューアーに対応します。

主な機能

  1. 01対応するセッション記録を HTML 化
  2. 02正規化と生データの出力モード
  3. 03再利用可能なファイル選択ビューアー
  4. 04ツールの入出力をブラウザーで検索
  5. 05読み込み量の制限と省略警告

活用シーン

  1. 01ブラウザーでエージェントのセッション記録を確認
  2. 02共有用にセッション記録を出力
  3. 03履歴内のツール入出力を検索

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/theangrypit/theangryskills --skill openclaw-session-viewer

インストール後、Claude Code で/openclaw-session-viewerを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE
MIRROR.md
package.json
tsconfig.json
agents/
openai.yaml
scripts/
html.ts
open-browser.ts
read-session.ts
session-viewer.test.ts
session-viewer.ts
styles.ts
scripts/core/
detect.ts
jsonl.ts
types.ts
scripts/importers/
claude.ts
codex.ts
pi-openclaw.ts

詳細

セッションビューアー

Codex、Claude Code、OpenClaw、Pi のセッションのトランスクリプトをブラウザーで表示、エクスポート、調査、共有するよう求められたときに使用します。

コマンド

セッションのパスが不明で、agent-transcript スキルが利用可能な場合は、まずこのスキルを使って該当する JSONL セッションを探します。

.agents/skills/openclaw-agent-transcript/scripts/agent-transcript find \
  --query "$USER_GOAL_OR_TITLE $BRANCH_OR_URL" \
  --cwd "$PWD" \
  --since-days 14

信頼度が最も高い file の結果を選び、session-viewer でレンダリングします。

このスキルがあるリポジトリから実行します。

node skills/openclaw-session-viewer/scripts/session-viewer.ts <session.jsonl> --out /tmp/session.html --open

便利なモード：

node skills/openclaw-session-viewer/scripts/session-viewer.ts <session.jsonl> --out session.html
node skills/openclaw-session-viewer/scripts/session-viewer.ts <session.jsonl> --raw --out session.html
node skills/openclaw-session-viewer/scripts/session-viewer.ts --blank --out viewer.html --open

共有スキルを .agents/skills の下に同期する下流のリポジトリでは、 skills/openclaw-session-viewer を .agents/skills/openclaw-session-viewer に置き換えます。

デフォルトの動作：

  • codex、claude、pi-openclaw を検出します
  • 正規化されたセッションデータを 1 つの HTML ファイルに埋め込みます
  • ツールの入力／出力テキストを DOM に保持するため、ブラウザー検索で見つけられます
  • セッションファイル全体を読み取り、どちらのエクスポートモードでも完全な履歴を保持します
  • --raw は元の JSONL を埋め込み、ブラウザーで解析できるようにします
  • --blank は再利用可能なファイル選択ビューアーを作成します

明示的に一部のみをエクスポートする場合は、正の整数のバイト数を指定して --max-read-bytes N を使用します（例：8 MiB の場合は --max-read-bytes 8388608）。サイズが上限を超えるファイルでは、先頭と末尾が保持され、CLI とエクスポートされたビューアーに省略の警告が表示されます。切り詰められた境界部分のレコードは省略される場合があります。--raw は保持された JSONL のみを埋め込みます。上限以下のファイルは完全な状態で保持されます。読み取りが短い場合は再試行し、予期しないファイル終端が発生した場合は、完全に読み取ったと報告せずにエクスポートを失敗させます。

このオプトインの読み取り上限は、CLI によるファイルのエクスポートにのみ適用されます。ブラウザーのファイル選択機能は、引き続きファイル全体を読み込みます。

セッションの保存場所

Codex：

find "${CODEX_HOME:-$HOME/.codex}/sessions" -name 'rollout-*.jsonl' -type f | sort
ls -t "${CODEX_HOME:-$HOME/.codex}"/sessions/*/*/*/rollout-*.jsonl | head

OpenClaw/Pi：

AGENT_ID="<agentId>"
SESSION_DIR="${OPENCLAW_STATE_DIR:-$HOME/.openclaw}/agents/$AGENT_ID/sessions"
ls -t "$SESSION_DIR"/*.jsonl | head
find "${OPENCLAW_STATE_DIR:-$HOME/.openclaw}/agents" -path '*/sessions/*.jsonl' -type f | sort

同じディレクトリにある sessions.json を使用して、セッションキーをセッション ID に対応付けます。

Claude Code：

find "$HOME/.claude/projects" -name '*.jsonl' -type f | sort
ls -t "$HOME/.claude/projects"/**/*.jsonl | head

一部の Claude インストールでは、プロジェクト固有のキャッシュフォルダーにもエクスポートされた JSON／JSONL が保存されます。対象リポジトリのパスが親フォルダーに含まれる JSONL のうち、最も新しいものを優先してください。

開発

スクリプトはネイティブの Node TypeScript です。型の消去が可能な形式にしてください。

  • 使用可：型、インターフェース、ユニオン、satisfies
  • 避けるもの：列挙型、名前空間、デコレーター、パラメーター・プロパティ
  • tsconfig のパスエイリアスは使用せず、相対インポートを使用します

インポーターの担当範囲：

  • scripts/importers/codex.ts：Codex のロールアウト JSONL
  • scripts/importers/claude.ts：Claude Code の JSONL
  • scripts/importers/pi-openclaw.ts：Pi／OpenClaw のセッション JSONL

検証：

npm ci --ignore-scripts
npm run typecheck
node --test skills/openclaw-session-viewer/scripts/session-viewer.test.ts
scripts/validate-skills

コメント

Markdown 対応