refactor(sidebar): レイアウト刷新と親子ハイライト

[miyaoka]

概要

サイドバーのレイアウトを刷新し、repo / wt / task の視覚階層を整理しました。task の並び順を静的化、scrollbar によるレイアウト変動を撤去、wt と task の親子関係をブロック塗りで表現します。

背景

サイドバーには次の問題がありました。

• 階層が逆転していた: repo header が py-1.5 text-xs に対し wt header が py-2 text-sm で、子要素のほうが視覚的に強い
• task ソートが動的: state 優先順 + lastActivityAt を sort key にしていたため、Claude が動くたびに行位置が入れ替わり、空間記憶が壊れる (wt や repo は append 順固定なのに task だけ動的、という非対称設計)
• scrollbar が content 上に被る: 右端の git diff バッジが macOS overlay scrollbar や scrollbar-gutter:stable のガター幅と干渉
• highlight が二者択一だった: focus が task にあるとき wt header の active 表示が落ち、「どの wt のどの task に focus か」が一目で分からない
• terminal count バッジが phantom gap の原因: grid-cols-[auto_1fr_auto_auto] で 4 列目が空でも track gap が予約され、status badge の右端が TaskRow の経過時刻と 8px ズレる

変更内容

視覚階層の反転

• repo header: py-2.5 text-sm / icon size-5 / lucide--folder-open (展開時) / lucide--folder (折り畳み時) — folder-git-2 差分はやめ、collapse 状態を icon で示す
• wt header: py-1 text-xs / icon size-3.5 (列幅は size-5 wrapper で統一) — repo よりコンパクト
• task: p-2 line-clamp-2 break-all — 2 行表示対応。経過時刻は text-[10px]

task ソートの静的化

• task.createdAt 昇順 (append 順) のみ
• STATE_PRIORITY / resolveStateKey / stateKey / baseTime フィールドを削除
• lastActivityAt は TaskRow の相対時刻表示用にのみ残す (動的キーをソートで使うのを廃止し、表示用と分離)
• <doc> ブロックに「append 順 / 状態は icon + 相対時刻で表現」の責務分担を明記

親領域ハイライト

• <article> (wt ブロック全体) に data-[active=true]:bg-blue-500/10 の薄塗り
• TaskRow active に bg-blue-500/30 の中濃 capsule
• 同色相の濃度差 (10% / 30%) で親子の階層を表現
• wt header / repo header の active 時文字色変更 (text-blue-300) を撤去 — 面塗りの濃度で active を表現済みなので文字色との二重表現は冗長
• headerActive は props.active 単体評価に変更 (旧: props.active && focusedTaskId === undefined の排他)

レイアウト精度の改善

• grid 4 列構成を flex + flex-1 に変更 (phantom gap 解消で右端コンテンツ x 座標が統一)
• メニュー ⋮ ボタンを wt 行の relative wrapper 内に absolute right-1 top-1/2 で配置 — task 行を含む article 全体を基準にすると task 追加で縦中央が下方にずれる
• terminal count バッジを削除 (関連 prop チェーン getTerminalCount も剥がす)
• 経過時刻バッジを content-fit 化 (固定 size-4 廃止) で右端を 21m と揃える

scrollbar 撤去

• scrollbar-width: none + ::-webkit-scrollbar { display: none } で完全非表示
• macOS native の trackpad / wheel / keyboard でスクロール可能なため scrollbar UI 自体が不要、content がフル幅を保てる
• scrollbar-gutter: stable および classic 強制 (::-webkit-scrollbar { width: 10px }) は「scrollbar 列を常時予約」する点で content 幅を犠牲にするため不採用

padding / gap の SSOT 化

• サイドバー横余白の責務を RepoSection の p-2 に集約
• repo 間: SidebarPane 外枠 flex flex-col (gap なし)
• wt 間: RepoSection 内 flex flex-col (gap なし、wt ヘッダの py-1 で行高制御)
• header / wt list 間: gap-2 (8px)
• ラベル左端 x 座標を repo / wt / task で統一 (icon 列 20px + gap 8px = 28px)

その他

• + New worktree ボタンを破線ボーダーのゴーストボタン化 + 中央寄せ
• <dialog> 確認ダイアログ内の mt-2 / mb-4 を flex flex-col gap-4 に置換 (margin → gap)
• useTerminalStore の collectLeafIds export を削除 (knip 自動修正)

確認事項

• サイドバーで repo / wt / task の階層が視覚的に repo > wt > task の順で識別できる
• task 行の並びが Claude の活動で動かない (createdAt 昇順固定)
• active wt のブロック全体が薄い青、focus task に中濃の capsule が同時に出る
• scrollbar が出現しても content 幅がジャンプしない
• git diff バッジと task の経過時刻が右端で揃っている
• folder icon が collapse 状態と連動 (折り畳み時 folder / 展開時 folder-open)
• + New worktree の hover で border / bg / text が変化
• メニュー ⋮ ボタンが wt 行の縦中央に固定 (task が増えても下にズレない)

[coderabbitai]

Warning

Rate limit exceeded

@miyaoka has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 52 minutes and 6 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: eae440e8-386e-4dc1-bdff-421a79c7ef9d

📥 Commits

Reviewing files that changed from the base of the PR and between e6f2d6a and 5cce94f.

📒 Files selected for processing (2)

• apps/renderer/src/features/sidebar/features/worktree/TaskRow.vue
• apps/renderer/src/features/sidebar/features/worktree/WtCard.vue

📝 Walkthrough

Walkthrough

このプルリクエストはサイドバーのワークツリーカード実装を整理し、ターミナルカウント表示機能を削除してタスク表示ロジックを簡素化します。terminal モジュールから collectLeafIds エクスポートを削除し、SidebarPane と RepoSection から getTerminalCount 関連のコードを除去。WtCard ではタスクの並び順を従来の状態優先・時刻ベースから task.createdAt 昇順に変更し、関連するソートロジックを廃止。ヘッダハイライト判定を props.active のみに簡潔化し、CSS 制御を data 属性ベースに変更。あわせて TaskRow のレイアウトを flex ベースに更新し、テキスト表示とスタイルを調整します。

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR タイトルは「refactor(sidebar): レイアウト刷新と親子ハイライト」で、サイドバーのレイアウト刷新と親子ハイライト機能追加という主要な変更を明確に要約しており、PR 内容と完全に一致している。
Description check	✅ Passed	PR の説明は「概要」「背景」「変更内容」の3セクションで構成されており、サイドバーのレイアウト刷新、タスク並び順の静的化、親領域ハイライト実装、レイアウト精度改善など、実装内容と完全に対応している。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/sidebar-layout

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/renderer/src/features/sidebar/features/worktree/WtCard.vue (1)

105-158: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

data 属性ベースのスタイリングに移行

Line 106-107 と Line 113-114 で data-active 属性を使用し、Tailwind の data-[active=true]: バリアントでスタイル制御しています。

Tailwind v4 では boolean data 属性バリアントがサポートされているため、この実装は正しいです。ただし、Line 106 の data-active="active" は boolean 値を渡すべきです。

🔧 data 属性に boolean 値を渡す修正案

Line 106 では active (boolean) を直接渡していますが、明示的に boolean として扱うことを推奨します：

   <article
-    :data-active="active"
+    :data-active="active || undefined"
     class="rounded-lg transition-colors data-[active=true]:bg-blue-500/10"
   >

Vue では false の場合に属性自体が削除されるため、|| undefined を追加することで意図が明確になります。ただし、現在の実装でも動作上の問題はありません。

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/renderer/src/features/sidebar/features/worktree/WtCard.vue` around lines
105 - 158, The data-active attributes should be passed as boolean/explicit so
Vue doesn't remove them when false; update both occurrences
(:data-active="active" on the <article> and :data-active="headerActive" on the
header div in WtCard.vue) to explicitly yield undefined when false (e.g. use
active || undefined and headerActive || undefined) so the data attribute is
present only when truthy and works with Tailwind's data-[active=true] variant.

🧹 Nitpick comments (1)

apps/renderer/src/features/sidebar/features/worktree/TaskRow.vue (1)

108-108: ⚡ Quick win

テキストの読みやすさのため break-words を検討してください。

break-all は単語の途中でも強制的に改行するため、タイトルテキストが読みづらくなる可能性があります。break-words を使用すると、まず単語境界で改行を試み、必要な場合のみ単語内で改行するため、より自然な表示になります。

♻️ 提案する修正

-    <span class="line-clamp-2 flex-1 text-sm break-all" :title="title">{{ title }}</span>
+    <span class="line-clamp-2 flex-1 text-sm break-words" :title="title">{{ title }}</span>

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/renderer/src/features/sidebar/features/worktree/TaskRow.vue` at line
108, Replace the hard break behavior on the title span in TaskRow.vue: the span
with class "line-clamp-2 flex-1 text-sm break-all" (the element rendering
:title="title" and {{ title }}) should use "break-words" instead of "break-all"
so words are preferred break points and only broken when necessary; update that
class list accordingly and run a quick visual check for multi-word titles to
confirm improved readability.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/renderer/src/features/sidebar/features/worktree/TaskRow.vue`:
- Line 109: The timestamp span uses an extremely small fixed font class
`text-[10px]` which harms accessibility; replace that class with a slightly
larger size such as `text-[11px]` (or a Tailwind semantic size like `text-xs` /
`text-sm` if you prefer consistent design tokens) while keeping the
`tabular-nums` and `opacity-70` classes intact so the `relativeTime` rendering
remains visually subordinate but more readable.
- Line 99: Replace the use of the focus-visible:outline-none utility in the root
element's class string of TaskRow.vue with focus-visible:outline-hidden so that
the custom focus ring remains visually but accessibility in forced-colors mode
is preserved; locate the class containing "focus-visible:ring-2
focus-visible:ring-blue-500 focus-visible:outline-none" and change that token to
"focus-visible:outline-hidden".

---

Outside diff comments:
In `@apps/renderer/src/features/sidebar/features/worktree/WtCard.vue`:
- Around line 105-158: The data-active attributes should be passed as
boolean/explicit so Vue doesn't remove them when false; update both occurrences
(:data-active="active" on the <article> and :data-active="headerActive" on the
header div in WtCard.vue) to explicitly yield undefined when false (e.g. use
active || undefined and headerActive || undefined) so the data attribute is
present only when truthy and works with Tailwind's data-[active=true] variant.

---

Nitpick comments:
In `@apps/renderer/src/features/sidebar/features/worktree/TaskRow.vue`:
- Line 108: Replace the hard break behavior on the title span in TaskRow.vue:
the span with class "line-clamp-2 flex-1 text-sm break-all" (the element
rendering :title="title" and {{ title }}) should use "break-words" instead of
"break-all" so words are preferred break points and only broken when necessary;
update that class list accordingly and run a quick visual check for multi-word
titles to confirm improved readability.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: acd1aa72-93c6-4319-87f8-e4afa7c0985a

📥 Commits

Reviewing files that changed from the base of the PR and between 730e7c4 and e6f2d6a.

📒 Files selected for processing (5)

• apps/renderer/src/features/sidebar/SidebarPane.vue
• apps/renderer/src/features/sidebar/features/repo/RepoSection.vue
• apps/renderer/src/features/sidebar/features/worktree/TaskRow.vue
• apps/renderer/src/features/sidebar/features/worktree/WtCard.vue
• apps/renderer/src/features/terminal/index.ts

💤 Files with no reviewable changes (1)

• apps/renderer/src/features/terminal/index.ts