create-walle 0.9.21 → 0.9.23

package/template/claude-task-manager/public/css/reviews.css

@@ -19,22 +19,52 @@
 .cr-header-actions {
   display: flex; gap: 6px; margin-left: auto; align-items: center;
 }
+.cr-review-target {
+  display: grid; grid-template-columns: auto minmax(80px, max-content) minmax(0, 1fr);
+  align-items: center; gap: 6px; min-width: 220px; max-width: 520px;
+  padding: 4px 8px; border: 1px solid rgba(122,162,247,0.24);
+  border-radius: 6px; background: rgba(122,162,247,0.08);
+}
+.cr-review-target-kicker,
+.cr-compare-label {
+  font-size: 10px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0;
+  font-weight: 700;
+}
+.cr-review-target-name {
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--fg); font-size: 12px; font-weight: 700;
+}
+.cr-review-target-meta {
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--fg-dim); font-size: 11px;
+}
 .cr-review-mode-tabs,
 .cr-doc-view-tabs {
-  display: inline-flex; align-items: center; overflow: hidden;
-  border: 1px solid var(--border); border-radius: 6px; background: var(--bg);
+  display: inline-flex; align-items: center;
+  padding: 2px;
+  border: 1px solid var(--border); border-radius: 6px;
+  background: var(--bg);
+  gap: 0;
 }
 .cr-review-mode-btn,
 .cr-doc-view-btn {
-  border: 0; border-right: 1px solid var(--border); background: transparent;
-  color: var(--fg-dim); cursor: pointer; font-size: 11px; padding: 4px 9px;
+  border: 0; background: transparent;
+  color: var(--fg-dim); cursor: pointer;
+  font-size: 11px; font-weight: 500;
+  padding: 4px 10px;
+  border-radius: 4px;
+  transition: background 0.12s ease, color 0.12s ease;
 }
-.cr-review-mode-btn:last-child,
-.cr-doc-view-btn:last-child { border-right: 0; }
 .cr-review-mode-btn:hover,
-.cr-doc-view-btn:hover { color: var(--fg); background: rgba(255,255,255,0.05); }
+.cr-doc-view-btn:hover { color: var(--fg); background: var(--bg-hover, rgba(255,255,255,0.06)); }
+/* Tinted active state — subtle accent fill, not solid blue. Reads as
+   "selected" without dominating the header. */
 .cr-review-mode-btn.active,
-.cr-doc-view-btn.active { background: var(--accent); color: #fff; }
+.cr-doc-view-btn.active {
+  background: var(--accent-soft, rgba(122,162,247,0.18));
+  color: var(--fg);
+  font-weight: 600;
+}
 .cr-doc-header-name {
   min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
   white-space: nowrap; color: var(--fg); font-size: 12px; font-weight: 650;
@@ -54,6 +84,16 @@
 .cr-btn.success { background: var(--green, #9ece6a); color: #1a1b26; border-color: var(--green); }
 .cr-btn.danger { background: var(--red, #f7768e); color: #fff; border-color: var(--red); }
 .cr-btn:disabled { opacity: 0.4; cursor: default; }
+.ctm-doc-review-link {
+  color: var(--accent, #7aa2f7);
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+.ctm-doc-review-link:hover {
+  color: var(--fg, #c0caf5);
+}
 
 /* Commit summary card (shown at top of diff area when a commit is selected) */
 .cr-file-item.summary {
@@ -85,6 +125,9 @@
   width: 240px; min-width: 180px; border-right: 1px solid var(--border);
   overflow-y: auto; flex-shrink: 0; padding: 6px 0;
 }
+/* Project chooser has no file tree — reclaim the empty left rail */
+#codereview-panel.cr-choosing .cr-file-tree,
+#codereview-panel.cr-choosing .cr-resize-handle { display: none; }
 .cr-file-item {
   display: flex; align-items: center; gap: 6px; padding: 5px 10px;
   cursor: pointer; font-size: 11px; transition: background 0.1s;
@@ -93,6 +136,16 @@
 .cr-file-item:hover { background: var(--bg-hover, rgba(255,255,255,0.04)); }
 .cr-file-item.active { background: var(--bg-lighter); border-left-color: var(--accent); }
 .cr-file-item.has-comments { font-weight: 600; }
+.cr-file-item.viewed .cr-file-name { color: var(--fg-dim); text-decoration: line-through; text-decoration-color: var(--fg-muted, rgba(255,255,255,0.25)); }
+.cr-file-item.viewed .cr-file-icon { opacity: 0.45; }
+/* Per-file "Viewed" checkbox in the tree */
+.cr-file-viewed {
+  flex-shrink: 0; width: 14px; height: 14px; line-height: 12px; text-align: center;
+  border: 1px solid var(--border); border-radius: 3px; font-size: 9px; color: var(--green, #9ece6a);
+  background: var(--bg); cursor: pointer; transition: border-color 0.1s, background 0.1s;
+}
+.cr-file-viewed:hover { border-color: var(--green, #9ece6a); }
+.cr-file-viewed.on { background: rgba(158,206,106,0.15); border-color: var(--green, #9ece6a); }
 .cr-file-icon { font-size: 13px; flex-shrink: 0; }
 .cr-file-name {
   flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
@@ -166,6 +219,26 @@
   font-size: 12px; font-weight: 600; color: var(--fg); position: sticky; top: 0; z-index: 5;
 }
 .cr-diff-file-path { flex: 1; font-family: var(--mono, 'SF Mono', Menlo, monospace); }
+/* Header "Viewed" toggle pill + collapse of viewed file sections */
+.cr-diff-file-viewed {
+  flex-shrink: 0; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
+  border: 1px solid var(--border); color: var(--fg-dim); background: var(--bg); cursor: pointer;
+  transition: all 0.12s;
+}
+.cr-diff-file-viewed:hover { border-color: var(--green, #9ece6a); color: var(--fg); }
+.cr-diff-file-viewed.on { background: rgba(158,206,106,0.15); border-color: var(--green, #9ece6a); color: var(--green, #9ece6a); }
+.cr-diff-file-section.viewed .cr-diff-table,
+.cr-diff-file-section.viewed > .cr-diff-empty { display: none; }
+.cr-diff-file-section.viewed .cr-diff-file-path { color: var(--fg-dim); }
+/* Review progress (footer) */
+.cr-progress { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 0 12px; }
+.cr-progress-label { font-size: 11px; color: var(--fg-dim); white-space: nowrap; }
+.cr-progress-bar {
+  width: 90px; height: 5px; border-radius: 3px; background: var(--bg-lighter);
+  overflow: hidden; display: inline-block;
+}
+.cr-progress-fill { display: block; height: 100%; background: var(--green, #9ece6a); transition: width 0.2s; }
+.cr-resolve-all { font-size: 11px; padding: 3px 10px; }
 .cr-diff-mode-toggle {
   display: flex; border: 1px solid var(--border); border-radius: 5px; overflow: hidden;
 }
@@ -183,82 +256,299 @@
   font-family: var(--mono, 'SF Mono', Menlo, monospace);
   background: var(--bg-lighter); padding: 1px 4px; border-radius: 4px;
 }
-.cr-doc-heading { font-size: 11px; }
-.cr-doc-heading .cr-file-icon {
-  font-family: var(--mono, 'SF Mono', Menlo, monospace); color: var(--accent); opacity: 0.75;
+.cr-doc-candidate-shell {
+  min-height: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 48px 24px;
+}
+.cr-doc-candidate-panel {
+  width: min(760px, 100%);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg-light);
+  box-shadow: 0 18px 54px rgba(0,0,0,0.18);
+  padding: 22px;
+}
+.cr-doc-candidate-eyebrow {
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: 8px;
 }
-.cr-doc-level-2 { padding-left: 18px; }
-.cr-doc-level-3 { padding-left: 26px; }
-.cr-doc-level-4,
-.cr-doc-level-5,
-.cr-doc-level-6 { padding-left: 34px; }
-.cr-doc-workspace {
-  min-height: 100%; background: var(--bg);
+.cr-doc-candidate-panel h2 {
+  margin: 0 0 8px;
+  color: var(--fg);
+  font-size: 20px;
+  line-height: 1.25;
 }
-.cr-doc-canvas {
-  display: flex; align-items: stretch; min-height: 100%; width: 100%;
+.cr-doc-candidate-panel p {
+  margin: 0 0 18px;
+  color: var(--fg-dim);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.cr-doc-candidate-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.cr-doc-candidate {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 3px;
+  width: 100%;
+  text-align: left;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--bg);
+  color: var(--fg);
+  padding: 11px 12px;
+  cursor: pointer;
+}
+.cr-doc-candidate:hover,
+.cr-doc-candidate:focus-visible {
+  border-color: var(--accent);
+  background: var(--bg-hover, var(--bg-lighter));
+  outline: none;
 }
-.cr-doc-canvas.split .cr-doc-pane {
-  width: 50%; min-width: 0;
+.cr-doc-candidate-name {
+  font-family: var(--mono, 'SF Mono', Menlo, monospace);
+  font-size: 13px;
+  color: var(--fg);
+  overflow-wrap: anywhere;
 }
-.cr-doc-canvas.split .cr-doc-rendered-pane {
-  border-right: 1px solid var(--border);
+.cr-doc-candidate-path {
+  font-size: 11px;
+  color: var(--fg-dim);
+  overflow-wrap: anywhere;
+}
+/* ── Document Review — Markdown Pane (May 2026 redesign) ──────────────────
+   Design tokens documented in docs/design/markdown-review-pane.md.
+   Goals: prose-first rendering, no code-editor leakage in Docs mode,
+   5-level type scale, theme-aware contrast, accessible AAA on body text.
+   ───────────────────────────────────────────────────────────────────── */
+
+/* TOC sidebar entries (left rail) — strip raw `#` glyphs, indent by depth. */
+.cr-doc-heading { font-size: 12px; padding-left: 8px; position: relative; }
+.cr-doc-heading .cr-file-icon {
+  /* Hide the literal `#` rendered by reviews.js — markdown syntax doesn't
+     belong in a parsed TOC. Indentation conveys hierarchy instead. */
+  display: none;
+}
+.cr-doc-heading .cr-file-name {
+  font-weight: 500;
+}
+.cr-doc-heading.cr-doc-level-2 { padding-left: 14px; }
+.cr-doc-heading.cr-doc-level-3 { padding-left: 28px; font-size: 11.5px; color: var(--fg-dim); }
+.cr-doc-heading.cr-doc-level-4 { padding-left: 42px; font-size: 11px;  color: var(--fg-muted); }
+.cr-doc-heading.cr-doc-level-5,
+.cr-doc-heading.cr-doc-level-6 { padding-left: 56px; font-size: 11px; color: var(--fg-muted); }
+.cr-doc-heading.active {
+  /* Subtle accent rail on the active entry — scroll-spy target. */
+  background: var(--accent-soft, rgba(122,162,247,0.10));
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+.cr-doc-heading.active .cr-file-name { color: var(--fg); font-weight: 600; }
+
+/* Workspace surfaces — soft elevated bg so the article surface lifts. */
+.cr-doc-workspace {
+  min-height: 100%;
+  background: var(--bg);
 }
-.cr-doc-pane {
-  flex: 1; min-width: 0; overflow-x: auto;
+.cr-doc-canvas {
+  display: flex; align-items: stretch; min-height: 100%; width: 100%;
 }
+.cr-doc-canvas.split .cr-doc-pane { width: 50%; min-width: 0; }
+.cr-doc-canvas.split .cr-doc-rendered-pane { border-right: 1px solid var(--border); }
+.cr-doc-pane { flex: 1; min-width: 0; overflow-x: auto; }
+
+/* Reading container — capped width for line-length readability (~75ch).
+   Aligns with research on prose typography: lines beyond 80 chars become
+   harder to scan. Reduced from 920px → 800px. */
 .cr-doc-article {
-  max-width: 920px; margin: 0 auto; padding: 18px 28px 80px;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 24px 32px 96px;
 }
+
+/* Block — generous left padding for the line-number gutter, which is now
+   hidden by default and only revealed on hover. */
 .cr-doc-block {
-  position: relative; border-left: 2px solid transparent;
-  padding: 4px 12px 8px 52px; margin: 0 0 4px;
+  position: relative;
+  border-left: 2px solid transparent;
+  padding: 4px 12px 8px 16px;
+  margin: 0 0 6px;
   border-radius: 6px;
 }
 .cr-doc-block:hover,
 .cr-doc-block.active {
-  background: rgba(122, 162, 247, 0.06); border-left-color: var(--accent);
+  background: var(--accent-soft, rgba(122,162,247,0.06));
+  border-left-color: var(--accent);
 }
+
+/* Line-range gutter — hidden in rendered/split rendered pane, since line
+   numbers belong with source code. They reappear on hover as a quiet
+   anchor hint for review reference. */
 .cr-doc-block-lines {
-  position: absolute; left: 12px; top: 10px; width: 30px;
-  color: var(--fg-dim); opacity: 0.6; font-size: 10px; text-align: right;
+  position: absolute;
+  left: -44px; top: 10px;
+  width: 36px;
+  color: var(--fg-muted);
+  opacity: 0;
+  font-size: 10px;
+  text-align: right;
   font-family: var(--mono, 'SF Mono', Menlo, monospace);
+  pointer-events: none;
+  transition: opacity 0.12s ease;
+}
+.cr-doc-block:hover .cr-doc-block-lines { opacity: 0.55; }
+/* Source/split panes — line numbers ARE the source code's. Keep visible
+   there as a left-side gutter. */
+.cr-doc-mode-source .cr-doc-block-lines,
+.cr-doc-source-pane .cr-doc-block-lines {
+  position: static; opacity: 0.55; display: inline-block; margin-right: 8px;
 }
+
+/* Comment "+" trigger — invisible by default, surfaces on hover. */
 .cr-doc-comment-btn {
-  position: absolute; right: 8px; top: 8px; width: 22px; height: 22px;
-  border-radius: 50%; border: 1px solid var(--border);
-  background: var(--bg-lighter); color: var(--accent); cursor: pointer;
-  opacity: 0; transition: opacity 0.12s, background 0.12s;
+  position: absolute; right: 8px; top: 8px;
+  width: 24px; height: 24px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: var(--bg-lighter, var(--bg-light));
+  color: var(--accent); cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s ease, background 0.12s ease, border-color 0.12s ease;
+  font-size: 13px; line-height: 1;
 }
 .cr-doc-block:hover .cr-doc-comment-btn,
-.cr-doc-block.active .cr-doc-comment-btn { opacity: 1; }
-.cr-doc-comment-btn:hover { background: rgba(122, 162, 247, 0.16); }
+.cr-doc-block.active .cr-doc-comment-btn,
+.cr-doc-comment-btn:focus-visible { opacity: 1; }
+.cr-doc-comment-btn:hover {
+  background: var(--accent-soft, rgba(122,162,247,0.16));
+  border-color: var(--accent);
+}
+
+/* Body type — slate-tinted body color (not pure --fg) for prose comfort.
+   Line-height 1.7 hits the prose-reading sweet spot. Matches GitHub/Stripe
+   docs body-text balance. */
 .cr-doc-markdown {
-  color: var(--fg); line-height: 1.62; font-size: 14px;
+  color: var(--fg);
+  line-height: 1.7;
+  font-size: 15px;
   overflow-wrap: anywhere;
 }
+
+/* 5-level type scale ────────────────────────────────────────────────────
+   H1   28 / 700 / line-height 1.20
+   H2   22 / 650 / line-height 1.25 + top spacing + bottom hairline
+   H3   17 / 600 / line-height 1.30
+   H4   15 / 600 / muted color
+   H5   13 / 700 / uppercase letterspace (used as eyebrow / kicker)
+   ───────────────────────────────────────────────────────────────────── */
 .cr-doc-markdown h1,
 .cr-doc-markdown h2,
 .cr-doc-markdown h3,
+.cr-doc-markdown h4,
+.cr-doc-markdown h5,
+.cr-doc-markdown h6 {
+  color: var(--fg); line-height: 1.25; font-weight: 650;
+  scroll-margin-top: 16px;
+}
+.cr-doc-markdown h1 {
+  font-size: 28px; font-weight: 700; line-height: 1.2;
+  margin: 4px 0 16px; letter-spacing: -0.01em;
+}
+.cr-doc-markdown h2 {
+  font-size: 22px; font-weight: 650; line-height: 1.25;
+  margin: 28px 0 12px; padding-bottom: 6px;
+  border-bottom: 1px solid var(--border);
+}
+.cr-doc-markdown h3 {
+  font-size: 17px; font-weight: 600; line-height: 1.3;
+  margin: 22px 0 8px;
+}
 .cr-doc-markdown h4 {
-  color: var(--fg); margin: 14px 0 8px; line-height: 1.25;
+  font-size: 15px; font-weight: 600; color: var(--fg-dim);
+  margin: 16px 0 6px;
 }
-.cr-doc-markdown h1 { font-size: 24px; }
-.cr-doc-markdown h2 { font-size: 19px; }
-.cr-doc-markdown h3 { font-size: 16px; }
-.cr-doc-markdown p,
+.cr-doc-markdown h5,
+.cr-doc-markdown h6 {
+  font-size: 12px; font-weight: 700; color: var(--fg-muted);
+  text-transform: uppercase; letter-spacing: 0.08em;
+  margin: 14px 0 4px;
+}
+
+/* Paragraphs and list spacing — looser to breathe like a doc, not a panel. */
+.cr-doc-markdown p { margin: 8px 0 12px; }
 .cr-doc-markdown ul,
-.cr-doc-markdown ol,
-.cr-doc-markdown pre { margin: 8px 0; }
+.cr-doc-markdown ol { margin: 8px 0 14px; padding-left: 22px; }
+.cr-doc-markdown li { margin: 4px 0; }
+.cr-doc-markdown li > p { margin: 2px 0 6px; }
+.cr-doc-markdown blockquote {
+  margin: 12px 0; padding: 4px 14px;
+  border-left: 3px solid var(--border);
+  color: var(--fg-dim);
+}
+
+/* Inline code — body-colored on a faint accent-tinted pill (NOT amber).
+   Reserves color emphasis for prose accents / heading colors instead. */
 .cr-doc-markdown code {
-  font-family: var(--mono, 'SF Mono', Menlo, monospace); font-size: 12px;
-  background: rgba(255,255,255,0.07); padding: 1px 4px; border-radius: 4px;
+  font-family: var(--mono, 'SF Mono', Menlo, monospace);
+  font-size: 0.9em;
+  background: var(--accent-soft, rgba(122,162,247,0.10));
+  color: var(--fg);
+  padding: 1px 6px;
+  border-radius: 4px;
+  white-space: pre-wrap;
 }
+
+/* Block code — distinct surface, thin border for "this is a contained block". */
 .cr-doc-markdown pre {
-  background: var(--bg-light); border: 1px solid var(--border);
-  border-radius: 6px; padding: 10px 12px; overflow-x: auto;
+  background: var(--bg-light);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px 14px;
+  margin: 12px 0 14px;
+  overflow-x: auto;
+  font-size: 13px;
+  line-height: 1.55;
+}
+.cr-doc-markdown pre code {
+  background: transparent;
+  padding: 0;
+  color: var(--fg);
+  font-size: inherit;
+}
+
+/* Tables — readable on dark + light. */
+.cr-doc-markdown table {
+  border-collapse: collapse; margin: 12px 0; font-size: 13px; width: auto; max-width: 100%;
+}
+.cr-doc-markdown th,
+.cr-doc-markdown td {
+  border: 1px solid var(--border); padding: 6px 12px; text-align: left;
+}
+.cr-doc-markdown th { background: var(--bg-lighter, var(--bg-light)); font-weight: 600; }
+
+/* Links — accent color with subtle underline. */
+.cr-doc-markdown a {
+  color: var(--accent);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+  text-decoration-color: var(--accent-soft, rgba(122,162,247,0.4));
+}
+.cr-doc-markdown a:hover { text-decoration-color: var(--accent); }
+
+/* HR — thin neutral rule. */
+.cr-doc-markdown hr {
+  border: 0; height: 1px; background: var(--border); margin: 24px 0;
 }
-.cr-doc-markdown pre code { background: transparent; padding: 0; }
 .cr-doc-source-table {
   width: 100%; border-collapse: collapse; font-family: var(--mono, 'SF Mono', Menlo, monospace);
   font-size: 12px; line-height: 1.55;
@@ -289,6 +579,13 @@
   padding: 4px 12px;
 }
 .cr-diff-hunk-header td { padding: 4px 12px; font-style: italic; }
+/* Expand-context row between/around hunks */
+.cr-diff-expand-row td { padding: 0; background: rgba(122,162,247,0.05); }
+.cr-expand-btn {
+  width: 100%; text-align: left; padding: 3px 12px; background: transparent; border: none;
+  color: var(--fg-dim); font-size: 11px; cursor: pointer; font-family: var(--mono, monospace);
+}
+.cr-expand-btn:hover { background: rgba(122,162,247,0.12); color: var(--accent, #7aa2f7); }
 
 /* Line rows */
 .cr-diff-line { position: relative; }
@@ -311,6 +608,12 @@
   display: flex; align-items: center; justify-content: center;
 }
 .cr-line-num:hover::before { opacity: 1; }
+/* Surface the "+" add-comment affordance on whole-line hover (more discoverable than
+   hovering the narrow gutter cell); full opacity when pointing right at the gutter. */
+.cr-diff-line:hover .cr-line-num::before,
+.cr-diff-line-split:hover .cr-line-num::before { opacity: 0.55; }
+.cr-diff-line .cr-line-num:hover::before,
+.cr-diff-line-split .cr-line-num:hover::before { opacity: 1; }
 
 .cr-line-prefix {
   width: 14px; min-width: 14px; text-align: center; user-select: none;
@@ -329,6 +632,20 @@
   background: rgba(247, 118, 142, 0.25); border-radius: 2px;
 }
 
+/* Side-by-side (split) diff layout */
+.cr-diff-table.split { table-layout: fixed; }
+.cr-diff-table.split .cr-line-num { width: 46px; min-width: 46px; }
+.cr-diff-table.split .cr-line-content {
+  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; padding: 0 10px;
+}
+.cr-diff-line-split td:nth-child(3) { border-left: 2px solid var(--border); }
+.cr-diff-line-split:hover { background: rgba(255,255,255,0.02); }
+.cr-diff-line-split .cr-line-content.del { background: rgba(247, 118, 142, 0.10); }
+.cr-diff-line-split .cr-line-content.add { background: rgba(158, 206, 106, 0.10); }
+.cr-diff-line-split .cr-split-empty {
+  background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(255,255,255,0.02) 6px, rgba(255,255,255,0.02) 12px);
+}
+
 /* Line selection for range comments */
 .cr-diff-line.selected { background: rgba(122, 162, 247, 0.12) !important; }
 .cr-diff-line.selected .cr-line-num { color: var(--accent); opacity: 1; }
@@ -463,20 +780,124 @@
 .cr-history-status.resolved { background: var(--fg-dim); }
 
 /* Project list view */
+.cr-project-picker {
+  padding: 20px 18px 28px; max-width: 980px; margin: 0 auto; width: 100%;
+}
+.cr-project-chooser-header {
+  display: flex; justify-content: space-between; gap: 18px; align-items: flex-end;
+  padding: 4px 2px 16px;
+}
+.cr-project-chooser-copy {
+  min-width: 0;
+}
+.cr-picker-eyebrow {
+  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0;
+  color: var(--accent, #7aa2f7); margin-bottom: 5px;
+}
+.cr-project-chooser-copy h2 {
+  margin: 0; color: var(--fg); font-size: 20px; line-height: 1.2;
+}
+.cr-project-chooser-copy p {
+  margin: 7px 0 0; color: var(--fg-dim); font-size: 12px; line-height: 1.45;
+  max-width: 620px;
+}
+.cr-project-chooser-stats {
+  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0;
+}
+.cr-project-chooser-stats span {
+  display: inline-flex; align-items: center; gap: 4px; min-height: 28px;
+  padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
+  background: var(--bg); color: var(--fg-dim); font-size: 11px;
+}
+.cr-project-chooser-stats strong { color: var(--fg); }
+.cr-project-scan-status {
+  display: inline-flex; align-items: center; gap: 7px; min-height: 28px;
+  padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px;
+  background: color-mix(in srgb, var(--bg) 82%, var(--bg-lighter) 18%);
+  color: var(--fg-dim); font-size: 11px; font-weight: 650; white-space: nowrap;
+}
+.cr-project-scan-status.active {
+  color: var(--accent); border-color: rgba(122,162,247,0.45);
+}
+.cr-project-scan-status.error {
+  color: var(--red); border-color: rgba(247,118,142,0.45);
+}
+.cr-project-scan-status .spinner {
+  width: 12px; height: 12px; border-width: 2px;
+}
+.cr-project-toolbar {
+  display: grid; grid-template-columns: minmax(260px, 1fr) auto auto;
+  align-items: center; gap: 10px; margin-bottom: 14px;
+}
+.cr-project-search {
+  min-width: 0; display: flex; align-items: center; gap: 8px;
+  height: 38px; padding: 0 10px; border: 1px solid var(--border);
+  border-radius: 7px; background: var(--bg);
+}
+.cr-project-search:focus-within {
+  border-color: var(--accent); box-shadow: 0 0 0 2px rgba(122,162,247,0.18);
+}
+.cr-project-search-icon {
+  color: var(--fg-dim); font-size: 13px; flex-shrink: 0;
+}
+.cr-project-search input {
+  width: 100%; min-width: 0; border: 0; outline: 0; background: transparent;
+  color: var(--fg); font-size: 12px; font-family: inherit;
+}
+.cr-project-search input::placeholder { color: var(--fg-dim); opacity: 0.75; }
+.cr-project-filters {
+  display: inline-flex; align-items: center; gap: 4px; padding: 3px;
+  border: 1px solid var(--border); border-radius: 7px; background: var(--bg);
+}
+.cr-project-filter {
+  min-height: 30px; border: 0; border-radius: 5px; padding: 4px 9px;
+  background: transparent; color: var(--fg-dim); cursor: pointer;
+  font-size: 11px; font-weight: 650; white-space: nowrap;
+}
+.cr-project-filter span {
+  color: var(--fg-dim); font-weight: 600; margin-left: 3px;
+}
+.cr-project-filter:hover { color: var(--fg); background: rgba(255,255,255,0.05); }
+.cr-project-filter.active {
+  color: var(--fg); background: rgba(122,162,247,0.22);
+}
+.cr-project-result-count {
+  color: var(--fg-dim); font-size: 11px; white-space: nowrap;
+}
+.cr-project-results {
+  min-height: 120px;
+}
 .cr-project-list {
-  padding: 16px; display: flex; flex-direction: column; gap: 10px;
-  max-width: 800px; margin: 0 auto; width: 100%;
+  display: flex; flex-direction: column; gap: 12px; width: 100%;
 }
 .cr-project-card {
-  border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px;
-  cursor: pointer; transition: all 0.15s; background: var(--bg);
+  border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px 13px;
+  cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+  background: color-mix(in srgb, var(--bg) 86%, var(--bg-lighter) 14%);
+}
+.cr-project-card:hover {
+  background: var(--bg-lighter); border-color: rgba(122,162,247,0.75);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
+}
+.cr-project-card:focus-visible {
+  outline: 2px solid var(--accent); outline-offset: 2px;
 }
-.cr-project-card:hover { background: var(--bg-lighter); border-color: var(--accent); }
 .cr-project-card.has-changes { border-left: 3px solid var(--accent); }
 .cr-project-card.pinned { border-color: var(--yellow, #e0af68); }
 .cr-project-card.pinned.has-changes { border-left-color: var(--yellow, #e0af68); }
 .cr-project-card-header {
-  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
+  display: flex; align-items: flex-start; justify-content: space-between;
+  gap: 12px; margin-bottom: 10px;
+}
+.cr-project-card-left {
+  display: flex; align-items: center; gap: 8px; min-width: 0;
+}
+.cr-project-title-group {
+  display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap;
+}
+.cr-project-status-row {
+  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
+  min-width: 200px;
 }
 /* Pin button */
 /* Drag handle for pinned cards */
@@ -499,7 +920,28 @@
 .cr-pin-btn.pinned { opacity: 1; }
 
 .cr-project-name {
-  font-size: 14px; font-weight: 700; color: var(--fg);
+  font-size: 15px; font-weight: 760; color: var(--fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px;
+}
+.cr-worktree-name {
+  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-size: 11px; color: var(--accent); background: rgba(122,162,247,0.14);
+  border: 1px solid rgba(122,162,247,0.22); padding: 2px 7px; border-radius: 999px;
+}
+.cr-target-type {
+  font-size: 10px; font-weight: 760; color: var(--fg);
+  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
+  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
+}
+.cr-target-type.claude-worktree,
+.cr-target-type.walle-worktree,
+.cr-target-type.worktree {
+  color: var(--accent); border-color: rgba(122,162,247,0.28);
+  background: rgba(122,162,247,0.12);
+}
+.cr-target-type.main-checkout {
+  color: var(--green, #9ece6a); border-color: rgba(158,206,106,0.25);
+  background: rgba(158,206,106,0.10);
 }
 .cr-project-badge {
   font-size: 10px; font-weight: 600; background: var(--accent); color: #fff;
@@ -508,16 +950,40 @@
 .cr-project-clean {
   font-size: 10px; color: var(--green, #9ece6a); opacity: 0.7;
 }
+.cr-project-path-grid {
+  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px;
+  margin: 0 0 10px; align-items: center;
+}
+.cr-path-label {
+  color: var(--fg-dim); font-size: 10px; font-weight: 800; text-transform: uppercase;
+  letter-spacing: 0;
+}
 .cr-project-path {
   font-size: 11px; color: var(--fg-dim); font-family: var(--mono, 'SF Mono', Menlo, monospace);
-  margin-bottom: 4px;
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.cr-project-card-actions {
+  display: flex; align-items: center; gap: 10px; margin: 2px 0 10px;
+}
+.cr-review-target-btn {
+  min-height: 32px; font-weight: 750;
+}
+.cr-project-action-hint {
+  color: var(--fg-dim); font-size: 11px;
 }
 /* Session list inside project card */
 .cr-project-session-count {
-  font-size: 10px; color: var(--fg-dim); margin-left: auto;
+  font-size: 10px; color: var(--fg-dim);
+}
+.cr-project-session-section {
+  margin: 9px 0 4px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06);
+}
+.cr-session-section-label {
+  margin-bottom: 4px; color: var(--fg-dim); font-size: 10px; font-weight: 800;
+  text-transform: uppercase; letter-spacing: 0;
 }
 .cr-project-session-list {
-  margin: 8px 0 4px; display: flex; flex-direction: column; gap: 2px;
+  display: flex; flex-direction: column; gap: 2px;
 }
 .cr-project-session-item {
   display: flex; align-items: center; gap: 6px; padding: 4px 8px;
@@ -552,6 +1018,30 @@
   color: var(--fg-dim); background: var(--bg-lighter); padding: 2px 6px;
   border-radius: 4px; white-space: nowrap;
 }
+.cr-project-empty-state {
+  display: grid; place-items: center; min-height: 180px; text-align: center;
+  border: 1px dashed var(--border); border-radius: 8px; color: var(--fg-dim);
+  background: rgba(255,255,255,0.02);
+}
+.cr-project-empty-title {
+  color: var(--fg); font-size: 14px; font-weight: 700; margin-bottom: 4px;
+}
+.cr-project-empty-copy {
+  font-size: 12px;
+}
+
+@media (max-width: 900px) {
+  .cr-project-chooser-header { align-items: stretch; flex-direction: column; }
+  .cr-project-chooser-stats { justify-content: flex-start; }
+  .cr-project-toolbar { grid-template-columns: 1fr; }
+  .cr-project-filters { overflow-x: auto; justify-content: flex-start; }
+  .cr-project-result-count { display: none; }
+  .cr-project-card-header { flex-direction: column; align-items: stretch; }
+  .cr-project-status-row { justify-content: flex-start; min-width: 0; }
+  .cr-project-card-actions { flex-direction: column; align-items: flex-start; }
+  .cr-review-target { grid-template-columns: auto minmax(0, 1fr); max-width: 100%; }
+  .cr-review-target-meta { grid-column: 2; }
+}
 
 /* No changes state */
 .cr-no-changes {