wiki-viewer

Wiki Viewer

pro-workflow ウィキを単一の HTML ファイルで表示します。~/.pro-workflow/data.db を読み込み、ブラウザー内検索、リンクグラフ、シードキューパネルを備えた、自己完結型の HTML ドキュメントにウィキを出力します。

Markdown ではなく HTML を使う理由

• 情報密度 — ページ、ソース、主張、シード、リンクグラフを 1 つの画面に表示できます
• 視覚的な明瞭さ — 長いウィキは生の Markdown では読みづらく、HTML なら見やすく表示できます
• 共有しやすさ — S3 にアップロードして URL を送れば、受信者は pro-workflow をインストールする必要がありません
• 双方向の操作 — 「シードとしてコピー」ボタンを使うと、未解決の質問をシードキューのプロンプトに変換し、Claude Code に貼り付けられます
• 監査可能性 — 自動リサーチループで役立つ成果が得られたことを、すばやく視覚的に確認できます

使用するタイミング

• /wiki research の実行後に、生成された内容を確認するとき
• ウィキをチームメイトやリーダー層と共有する前
• コードレビュー：なじみのないモジュールの codebase 形式のウィキをレンダリングするとき
• インシデントレビュー：事後分析用の報告に向けて incident ウィキをレンダリングするとき
• 定期監査：古い主張の検出、孤立ページの確認

コマンド

node $SKILL_ROOT/scripts/render.js <slug> [--out <path>] [--theme dark|light]

デフォルト：

• 出力先：<wiki-root>/derived/viewer.html
• テーマ：dark

ファイルに含まれるもの

パネル	内容
ヘッダー	ウィキのスラッグ、形式、スコープ、ルートパス、最終更新日時、ページ数、ソース数、キルスイッチの状態
サイドバー	page_type ごとにグループ化されたページ一覧、ページ内フィルター入力欄
メイン	選択したページの詳細：タイトル、概要、Markdown 全文（レンダリング済み）、ソース行を参照するインライン引用
ソース	すべての wiki_sources 行と手動追加の sources.md 行を含むテーブル
シード	ステータスごとにグループ化されたシードキューテーブル。保留中の各シードに「リサーチプロンプトとしてコピー」ボタン
リンクグラフ	ページ間の引用とバックリンクを示す SVG の力学的レイアウト
検索	タイトル、概要、コンテンツを対象とした、ブラウザー内の部分一致検索とトークン検索
フッター	メタ情報：スキーマのバージョン、存在する場合は埋め込みモデル、生成ツールのバージョン

自己完結型

CDN、外部フォント、<script src=> は使用しません。インライン CSS、インライン SVG、インライン JS のみを使用します。生成されるのは、ローカルまたは任意の静的ホストから開ける単一の .html ファイルです。

ほかの機能との組み合わせ

# Generate after auto-research run completes
/wiki research agent-memory --max-pages 5
node skills/wiki-viewer/scripts/render.js agent-memory
open ~/.pro-workflow/wikis/agent-memory/derived/viewer.html

# Hand off to a teammate
aws s3 cp ~/.pro-workflow/wikis/agent-memory/derived/viewer.html s3://my-bucket/agent-memory.html --acl public-read

設計原則

1. テキスト優先 — すべてのパネルでテキストを主体とし、可視化は補助的なもので、不可欠ではありません。
2. 装飾なし — グラデーション、光彩、雰囲気を演出する背景は使用しません。
3. 色に意味を持たせる — Anthropic のコーラル色は、アクティブなページと CTA のみに使用します。
4. 印刷に適した表示 — @media print によりサイドバーを折りたたみ、Markdown コンテンツをきれいに印刷できます。

制限事項（初回リリース）

• Markdown のレンダリングには、ファイル内の小規模なパーサーを使用します（見出し、リスト、コードブロック、リンク、引用、テーブル、脚注の引用）。Markdown 内の HTML には対応していません。
• リンクグラフは事前に計算され、SVG としてシリアライズされます。動的なレイアウト変更には対応していません。
• 検索は部分一致とトークン化した AND 条件の照合です。BM25 は SQLite 内で処理され、ビューアーに表示されるのはスナップショットです。
• 変更をまとめて加えるたびに再レンダリングしてください。このファイルはライブではありません。

今後の拡張項目（初回リリースには含まれません）

• --include-council を指定して、リンクされたすべての council トランスクリプトをインラインで同梱する
• --include-survey を指定して、生成されたアンケートを同梱する
• contested タグが付いた主張の横に「council プロンプトとしてコピー」ボタンを配置する
• 差分表示：--against <previous.html> を指定して、以前のレンダリング以降に追加された主張を強調表示する