feat(desktop): GitHub Actionsログのネイティブ表示 by MocA-Love · Pull Request #72 · MocA-Love/superset

MocA-Love · 2026-04-04T03:55:58Z

概要

Review タブの Checks セクションに「View logs」ボタンを追加し、GitHub Actions のジョブログをブラウザではなくアプリ内のネイティブペインで閲覧できるようにした。

変更内容

新しいペインタイプ action-logs を追加（タブシステムに統合）
左サイドバー: 全ジョブ一覧（ステータスアイコン付き、ドラッグでリサイズ可能）
右メイン: ステップごとの開閉式ログビューア（GitHub 風 UI）
ANSI カラー対応: ansi_up で色付き表示
Re-run ボタン: ジョブヘッダーから Re-run failed / Re-run all を実行可能
ログ検索: ツールバーから全ログを横断検索
設定メニュー: タイムスタンプ表示切替、GitHub で開く、raw ログ表示
バックエンド: ステップメタデータとログを並列取得し、タイムスタンプベースでステップごとに分割

対象ファイル

apps/desktop/src/shared/tabs-types.ts — action-logs ペインタイプ追加
apps/desktop/src/lib/trpc/routers/ui-state/index.ts — Zod スキーマ更新
apps/desktop/src/lib/trpc/routers/workspaces/ — 構造化ログ取得 tRPC プロシージャ
apps/desktop/src/renderer/.../ActionLogsPane/ — 新ペインコンポーネント
apps/desktop/src/renderer/.../ReviewPanel/ — View logs ボタン追加
apps/desktop/src/renderer/stores/tabs/ — ストア・ユーティリティ拡張

テストプラン

Review タブの Checks セクションで「View logs」をクリックし、ネイティブペインが開くことを確認
左サイドバーでジョブを切り替えてステップが正しく表示されることを確認
ステップをクリックして開閉し、ログが正しく表示されることを確認
ANSI カラーコードが色付きで描画されることを確認
Re-run ボタンが正しく動作することを確認
検索で該当行がフィルタされることを確認
サイドバーのリサイズが動作することを確認
設定メニューのタイムスタンプ表示切替が動作することを確認

Summary by CodeRabbit

新機能

GitHub Actionsのジョブログを表示する専用パネルを追加しました。ステップごとのログ詳細、実行時間、ステータスが確認できます
Reviewパネルの「Checks」セクションに「View logs」ボタンを追加し、ジョブログへのすばやいアクセスが可能になりました

Review タブの Checks セクションに「View logs」ボタンを追加し、 GitHub Actions のジョブログをアプリ内のネイティブペインで閲覧可能にした。 - 新しいペインタイプ `action-logs` を追加 - 左サイドバーに全ジョブ一覧（ステータスアイコン付き、リサイズ可能） - 右側にステップごとの開閉式ログビューア - ANSI カラーコードを HTML に変換して色付き表示（ansi_up） - ステップごとの所要時間表示 - ジョブヘッダーに Re-run failed / Re-run all ボタン - ログ検索機能（ツールバーの虫眼鏡アイコン） - 設定メニュー（タイムスタンプ表示切替、GitHub で開く、raw ログ表示） - tRPC バックエンドで構造化ログ取得（ステップメタデータ + ログを並列取得・分割）

coderabbitai · 2026-04-04T03:56:05Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9c116852-69a7-498d-b2d2-f717a553030d

📥 Commits

Reviewing files that changed from the base of the PR and between 65a3fa8 and 8d2c68f.

⛔ Files ignored due to path filters (1)

bun.lock is excluded by !**/*.lock

📒 Files selected for processing (13)

apps/desktop/package.json
apps/desktop/src/lib/trpc/routers/ui-state/index.ts
apps/desktop/src/lib/trpc/routers/workspaces/procedures/git-status.ts
apps/desktop/src/lib/trpc/routers/workspaces/utils/github/github.ts
apps/desktop/src/lib/trpc/routers/workspaces/utils/github/index.ts
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/ActionLogsPane/ActionLogsPane.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/ActionLogsPane/index.ts
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/index.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/ReviewPanel/ReviewPanel.tsx
apps/desktop/src/renderer/stores/tabs/store.ts
apps/desktop/src/renderer/stores/tabs/types.ts
apps/desktop/src/renderer/stores/tabs/utils.ts
apps/desktop/src/shared/tabs-types.ts

📝 Walkthrough

Walkthrough

GitHubアクションのジョブログを表示するための新しい「ActionLogs」ペインが追加されました。TRPC手続き、GitHub API統合、UIコンポーネント、ストア管理、型定義を実装し、Review パネルから「View logs」ボタンでアクセス可能です。

Changes

コホート / ファイル(s)	サマリー
依存関係と基本設定 `apps/desktop/package.json`	`ansi_up` v6.0.6 を新規追加（ANSIカラーコード表示用）
型定義とスキーマ `apps/desktop/src/shared/tabs-types.ts`, `apps/desktop/src/lib/trpc/routers/ui-state/index.ts`	`"action-logs"` ペインタイプを定義。`ActionLogsJob` と `ActionLogsPaneState` インターフェースを追加。UI状態スキーマに `actionLogs` フィールドを拡張
GitHub API統合 `apps/desktop/src/lib/trpc/routers/workspaces/utils/github/github.ts`, `apps/desktop/src/lib/trpc/routers/workspaces/utils/github/index.ts`, `apps/desktop/src/lib/trpc/routers/workspaces/procedures/git-status.ts`	`fetchStructuredJobLogs` 関数を実装してジョブステップログを並行取得・パース。`getJobLogs` TRPC 手続きを追加
UIコンポーネント `apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/ActionLogsPane/*`, `apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/index.tsx`	566行の `ActionLogsPane` コンポーネントを実装。左側ジョブリスト、右側ログビュー、タイムスタンプ切り替え、検索フィルタ、ステップ展開機能を備える。TabView で routing を追加
ストア管理 `apps/desktop/src/renderer/stores/tabs/store.ts`, `apps/desktop/src/renderer/stores/tabs/types.ts`, `apps/desktop/src/renderer/stores/tabs/utils.ts`	`addActionLogsTab` action をストアに追加。タブとペアのペイン作成。PostHog イベント emit
UIインテグレーション `apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/ReviewPanel/ReviewPanel.tsx`	「View logs」ボタンを Checks セクションに追加。クリック時に失敗ジョブをハイライトして ActionLogs タブを開く

Sequence Diagram(s)

sequenceDiagram
    participant User as User
    participant ReviewPanel as ReviewPanel<br/>(UI)
    participant TabsStore as TabsStore<br/>(State)
    participant TRPC as TRPC Client
    participant GitStatus as git-status<br/>Procedure
    participant GithubAPI as GitHub API<br/>(CLI)
    participant ActionLogsPane as ActionLogsPane<br/>(UI)

    User->>ReviewPanel: Click "View logs"
    ReviewPanel->>TabsStore: addActionLogsTab(workspaceId, jobs)
    TabsStore->>TabsStore: Create tab + pane<br/>(type: "action-logs")
    TabsStore->>ActionLogsPane: Render with jobs
    
    ActionLogsPane->>ActionLogsPane: User selects job
    ActionLogsPane->>TRPC: getJobLogs(workspaceId, detailsUrl)
    TRPC->>GitStatus: Resolve workspace & repoPath
    GitStatus->>GithubAPI: Fetch job steps metadata
    GitStatus->>GithubAPI: Fetch raw job logs
    GithubAPI-->>GitStatus: Step metadata + logs
    GitStatus->>GitStatus: Parse & structure logs<br/>Assign to steps
    GitStatus-->>TRPC: StructuredJobStep[]
    TRPC-->>ActionLogsPane: Job steps with logs
    ActionLogsPane->>ActionLogsPane: Render step list<br/>with ANSI colored logs

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

feat(desktop): シェル履歴サジェスト & Branch PR表示対応 #24: git-status.ts で repoPath を worktree.path または branch ワークスペース時は project mainRepoPath から導出するロジックを共通実装。
fix(desktop): ReviewパネルのURLをSupersetブラウザペインで開く #35: ReviewPanel.tsx のインタラクションロジックを拡張。このPRは「View logs」ボタンで addActionLogsTab を呼び出し、別PRはリンク動作を変更。
feat(desktop): Review パネル強化 — Actions ステップ・コメント展開・ファイルジャンプ #27: GitHub Actions ジョブ/ステップデータ取得と UI 表示を追加。このPRの fetchStructuredJobLogs と別PRの fetchCheckJobSteps は補完的。

Poem

🐰✨ ログをつなぎ、ステップを見る
アクションの光、画面に映る
失敗探して、再び走る
ウサギの手で、デバッグ楽々
ANSIの虹、タイムスタンプ飾る 🌈

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/action-logs-pane

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

- サイドバーにbg-muted/30を適用してメインログ領域と視覚的に区別 - biome lint エラーを修正（dangerouslySetInnerHTML, noArrayIndexKey, a11y） - non-null assertion を type guard に置換

fix(desktop): lint修正とサイドバー背景色の区別改善

8d2c68f

- サイドバーにbg-muted/30を適用してメインログ領域と視覚的に区別 - biome lint エラーを修正（dangerouslySetInnerHTML, noArrayIndexKey, a11y） - non-null assertion を type guard に置換

MocA-Love marked this pull request as ready for review April 4, 2026 04:04

MocA-Love merged commit 955ca2d into main Apr 4, 2026
13 of 14 checks passed

MocA-Love mentioned this pull request Apr 4, 2026

feat(desktop): Actionログの自動ポーリングとRe-run後即時更新 #73

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(desktop): GitHub Actionsログのネイティブ表示#72

feat(desktop): GitHub Actionsログのネイティブ表示#72
MocA-Love merged 2 commits intomainfrom
feat/action-logs-pane

MocA-Love commented Apr 4, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 4, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

MocA-Love commented Apr 4, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

概要

変更内容

対象ファイル

テストプラン

Summary by CodeRabbit

新機能

Uh oh!

coderabbitai Bot commented Apr 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

MocA-Love commented Apr 4, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 4, 2026 •

edited

Loading