create-walle 0.9.30 → 0.9.32

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

@@ -572,6 +572,84 @@ html[data-theme="light"] #prompts-panel {
   padding: 2px 0;
 }
 
+/* ============================================================
+   Editor chrome declutter: selection bubble + "…" overflow menu
+   + Details popover. Reuses .toolbar-btn and the send-dropdown
+   open/close skeleton.
+   ============================================================ */
+
+/* Floating formatting bubble (shown on text selection in rich mode) */
+.pe-bubble {
+  position: fixed;
+  z-index: 120;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  background: var(--bg-light);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+}
+.pe-bubble .toolbar-btn { padding: 4px 8px; font-size: 12px; }
+.pe-bubble-sep {
+  width: 1px; align-self: stretch; margin: 2px 3px;
+  background: var(--border);
+}
+
+/* "…" overflow + Details popover share the dropdown skeleton */
+.pe-overflow-wrap, .pe-details-wrap { position: relative; display: inline-flex; }
+.pe-overflow-btn { font-size: 15px; letter-spacing: 1px; }
+.pe-details-btn {
+  color: var(--fg-dim); border: 1px solid transparent; background: none;
+  font-weight: 600; white-space: nowrap;
+}
+.pe-details-btn:hover { color: var(--fg); background: var(--bg-lighter); }
+.pe-overflow-menu, .pe-details-popover {
+  display: none;
+  position: absolute;
+  top: 100%;
+  margin-top: 4px;
+  background: var(--bg-light);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+  z-index: 100;
+  padding: 6px;
+}
+.pe-overflow-menu { left: 0; min-width: 220px; }
+.pe-details-popover { right: 0; min-width: 260px; }
+.pe-overflow-menu.open, .pe-details-popover.open { display: block; }
+.pe-overflow-section { padding: 4px 2px; border-bottom: 1px solid var(--border); }
+.pe-overflow-section:last-child { border-bottom: none; }
+.pe-overflow-label, .pe-details-label {
+  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
+  color: var(--fg-dim);
+}
+.pe-overflow-label { margin: 0 2px 4px; }
+.pe-overflow-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
+.pe-overflow-row select {
+  background: var(--bg); color: var(--fg); border: 1px solid var(--border);
+  border-radius: 4px; font-size: 11px; padding: 2px 4px; outline: none; cursor: pointer;
+}
+.pe-overflow-row #pe-font-select { min-width: 130px; }
+
+/* Details popover layout */
+.pe-details-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; }
+.pe-details-row .pe-details-label { width: 64px; flex-shrink: 0; }
+.pe-details-popover select {
+  flex: 1; background: var(--bg); color: var(--fg); border: 1px solid var(--border);
+  padding: 4px 8px; border-radius: 4px; font-size: 11px; outline: none;
+}
+.pe-details-popover .tags-input { flex: 1; }
+.pe-details-actions { gap: 6px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--border); }
+
+/* Narrow widths: let the inline insert trio wrap/collapse gracefully */
+@media (max-width: 680px) {
+  .pe-details-popover { min-width: 220px; }
+  .pe-overflow-menu { min-width: 200px; }
+}
+
 /* Send dropdown */
 .send-dropdown-wrap {
   position: relative;
@@ -1067,3 +1145,270 @@ html[data-theme="light"] #prompts-panel {
   padding: 8px 10px;
   border-bottom: 1px solid var(--border);
 }
+
+/* ============================================================
+   Phase 1 — Findability: consolidated sidebar (Views + Tags)
+   One organization model: search + Favorites/Recent/All + tags.
+   ============================================================ */
+.pe-views { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; }
+.pe-view {
+  display: flex; align-items: center; justify-content: center; gap: 5px;
+  background: var(--bg); color: var(--fg-muted); border: 1px solid var(--border);
+  border-radius: 7px; padding: 5px 6px; font-size: 11px; cursor: pointer; min-width: 0;
+}
+.pe-view:hover { border-color: var(--accent); color: var(--fg); }
+.pe-view.active { background: var(--accent-soft, rgba(122,162,247,0.13)); border-color: var(--accent); color: var(--accent); font-weight: 600; }
+.pe-view .pe-view-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pe-view .pe-view-ct { font-size: 10px; opacity: 0.8; font-family: 'SF Mono', Menlo, monospace; }
+.pe-view .pe-view-ic { font-size: 11px; line-height: 1; }
+
+.pe-tag-facets { margin-top: 10px; }
+.pe-facet-title {
+  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
+  color: var(--fg-dim); margin: 0 2px 6px;
+}
+.pe-tag-wrap { display: flex; flex-wrap: wrap; gap: 5px; max-height: 116px; overflow-y: auto; }
+.pe-tag-chip {
+  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px;
+  padding: 2px 8px; border-radius: 20px; background: var(--bg-lighter);
+  color: var(--fg-muted); border: 1px solid var(--border); cursor: pointer; user-select: none;
+}
+.pe-tag-chip:hover { border-color: var(--accent); color: var(--fg); }
+.pe-tag-chip.on { background: var(--accent); color: var(--accent-fg, #0d1117); border-color: var(--accent); font-weight: 600; }
+.pe-tag-chip .pe-tag-ct { font-size: 9px; opacity: 0.7; font-family: 'SF Mono', Menlo, monospace; }
+.pe-tag-chip.on .pe-tag-ct { opacity: 0.85; }
+
+.pe-sidebar-actions { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
+
+.pe-list-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 8px 10px 5px; gap: 8px;
+}
+.pe-list-head .pe-list-scope {
+  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.pe-list-head .pe-list-count {
+  font-size: 10px; color: var(--fg-dim); background: var(--bg-lighter);
+  border-radius: 20px; padding: 1px 8px; font-weight: 600; flex-shrink: 0;
+}
+
+.pe-folders-group { margin: 2px 0 4px; border-bottom: 1px solid var(--border); }
+.pe-folders-group > summary {
+  list-style: none; cursor: pointer; padding: 6px 10px; font-size: 10px; font-weight: 700;
+  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); user-select: none;
+}
+.pe-folders-group > summary::-webkit-details-marker { display: none; }
+.pe-folders-group > summary::before { content: '▸ '; color: var(--fg-dim); }
+.pe-folders-group[open] > summary::before { content: '▾ '; }
+.pe-folders-group > summary:hover { color: var(--fg); }
+
+/* Per-row favorite toggle (replaces the old star + pin duo with one axis) */
+.prompt-item .pe-fav-btn {
+  background: none; border: 0; cursor: pointer; padding: 0; margin-top: 1px;
+  color: var(--fg-dim); font-size: 13px; line-height: 1; flex-shrink: 0; opacity: 0.55;
+}
+.prompt-item:hover .pe-fav-btn { opacity: 0.9; }
+.prompt-item .pe-fav-btn.on { color: var(--yellow); opacity: 1; }
+.prompt-item .pe-fav-btn:hover { color: var(--yellow); opacity: 1; }
+/* The dedicated button replaces the old ::before star marker */
+.prompt-item.starred .prompt-title::before { content: none; }
+.prompt-item.starred { border-left-color: var(--yellow); }
+
+/* Row meta badges */
+.prompt-item .prompt-meta .pe-varbadge {
+  font-family: 'SF Mono', Menlo, monospace; font-size: 9px; color: var(--purple);
+  background: color-mix(in srgb, var(--purple) 14%, transparent); border-radius: 4px; padding: 0 4px;
+}
+.prompt-item .prompt-meta .pe-vbadge {
+  font-family: 'SF Mono', Menlo, monospace; font-size: 9px; color: var(--green);
+  background: var(--success-soft, rgba(158,206,106,0.14)); border-radius: 4px; padding: 0 4px;
+}
+.prompt-item .prompt-meta .pe-uses { font-size: 9.5px; color: var(--fg-dim); }
+.prompt-item .prompt-meta .when { margin-left: auto; font-size: 9.5px; color: var(--fg-dim); }
+.prompt-item .prompt-meta mark { background: var(--warning-soft, rgba(224,175,104,0.22)); color: inherit; border-radius: 2px; padding: 0 1px; }
+.prompt-item .prompt-title mark { background: var(--warning-soft, rgba(224,175,104,0.22)); color: inherit; border-radius: 2px; padding: 0 1px; }
+
+/* Body-match snippet under the title (search results, #10) */
+.prompt-item .prompt-snippet {
+  font-size: 10px; color: var(--fg-dim); line-height: 1.4; margin: 2px 0 1px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.prompt-item .prompt-snippet mark {
+  background: var(--warning-soft, rgba(224,175,104,0.22)); color: inherit; border-radius: 2px; padding: 0 1px;
+}
+
+.pe-empty {
+  padding: 16px 12px; font-size: 12px; color: var(--fg-dim); text-align: center; line-height: 1.5;
+}
+.pe-empty b { color: var(--fg-muted); }
+
+/* ============================================================
+   Phase 2 — Dual-mode editor (Rich WYSIWYG default + Markdown)
+   ============================================================ */
+.pe-mode-switch, .pe-submode-switch {
+  display: inline-flex; background: var(--bg); border: 1px solid var(--border);
+  border-radius: 7px; padding: 2px; gap: 2px;
+}
+.pe-submode-switch { margin-left: 6px; }
+.pe-mode-btn, .pe-submode-btn {
+  font: inherit; font-size: 11px; color: var(--fg-muted); background: none; border: 0;
+  padding: 3px 9px; border-radius: 5px; cursor: pointer; white-space: nowrap;
+}
+.pe-mode-btn:hover, .pe-submode-btn:hover { color: var(--fg); }
+.pe-mode-btn.active, .pe-submode-btn.active { background: var(--accent); color: var(--accent-fg, #0d1117); font-weight: 600; }
+
+.pe-token-meter {
+  font-family: 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--fg-dim);
+  white-space: nowrap; padding: 2px 4px;
+}
+
+.pe-var-bar {
+  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
+  padding: 6px 12px; margin: 0 8px 4px; background: var(--bg-light, #24283b);
+  border: 1px solid var(--border); border-radius: 6px;
+}
+.pe-var-bar-label {
+  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim);
+}
+.pe-var-chip {
+  font-family: 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--purple);
+  background: color-mix(in srgb, var(--purple) 15%, transparent); border-radius: 5px; padding: 1px 7px;
+}
+/* Inline {{variable}} chips rendered inside the rich editor (#19) */
+.pe-var-inline {
+  font-family: 'SF Mono', Menlo, monospace; font-size: 0.92em; color: var(--purple);
+  background: color-mix(in srgb, var(--purple) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--purple) 30%, transparent);
+  border-radius: 5px; padding: 0 4px; white-space: nowrap;
+}
+
+/* Markdown panes */
+.pe-md { display: flex; gap: 0; min-height: 320px; align-items: stretch; }
+.pe-md-edit { flex: 1; min-width: 0; position: relative; display: flex; }
+.pe-md-preview {
+  flex: 1; min-width: 0; overflow: auto; padding: 4px 18px; border-left: 1px solid var(--border);
+  font-size: 14px; line-height: 1.6; color: var(--fg);
+}
+/* When only one pane is shown it takes the full width (no divider) */
+.pe-md-edit:only-child, .pe-md-preview:only-child { border-left: 0; }
+
+/* Highlight overlay: transparent textarea on top of a highlighted <pre>,
+   sharing identical box metrics so the caret aligns with the text. */
+.pe-md-pre, .pe-md-input {
+  margin: 0; padding: 8px 12px; border: 0;
+  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 13px; line-height: 1.6; tab-size: 2;
+  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
+}
+.pe-md-pre {
+  position: absolute; inset: 0; overflow: auto; pointer-events: none;
+  color: var(--fg); background: transparent; z-index: 0;
+}
+.pe-md-input {
+  position: relative; flex: 1; width: 100%; resize: none; outline: none;
+  background: transparent; color: transparent; caret-color: var(--accent);
+  z-index: 1; overflow: auto;
+}
+.pe-md-input::placeholder { color: var(--fg-dim); }
+
+/* Markdown source token colors (escape-safe spans from highlightMarkdownSource) */
+.pe-md-pre .md-h { color: var(--syn-fn, var(--accent)); font-weight: 700; }
+.pe-md-pre .md-var { color: var(--purple); background: color-mix(in srgb, var(--purple) 16%, transparent); border-radius: 3px; }
+.pe-md-pre .md-code { color: var(--syn-str, var(--green)); }
+.pe-md-pre .md-ctx { color: var(--syn-num, #ff9e64); background: color-mix(in srgb, var(--syn-num, #ff9e64) 14%, transparent); border-radius: 3px; }
+.pe-md-pre .md-bold { color: var(--fg); font-weight: 700; }
+
+.pe-md-preview h1, .pe-md-preview h2, .pe-md-preview h3 { margin: 0.6em 0 0.3em; line-height: 1.25; }
+.pe-md-preview p { margin: 0 0 0.7em; }
+.pe-md-preview ul, .pe-md-preview ol { margin: 0 0 0.7em 1.3em; }
+.pe-md-preview code { font-family: 'SF Mono', Menlo, monospace; font-size: 0.88em; background: var(--code-bg, rgba(122,162,247,0.12)); border-radius: 4px; padding: 1px 5px; }
+.pe-md-preview pre { background: var(--bg-lighter); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; overflow: auto; }
+.pe-md-preview pre code { background: none; padding: 0; }
+.pe-md-preview blockquote { border-left: 3px solid var(--border); margin: 0 0 0.7em; padding-left: 12px; color: var(--fg-muted); }
+
+/* ============================================================
+   Phase 3 — Variable fill-in form (Reuse)
+   ============================================================ */
+.pe-fill-overlay {
+  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-start;
+  justify-content: center; padding-top: 14vh; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
+}
+.pe-fill-modal {
+  width: 460px; max-width: 92vw; max-height: 74vh; overflow: auto;
+  background: var(--bg-elevated, #2b3045); border: 1px solid var(--border); border-radius: 13px;
+  box-shadow: 0 24px 60px rgba(0,0,0,0.45); padding: 18px 20px;
+}
+.pe-ff-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
+.pe-ff-title { font-size: 14px; font-weight: 650; color: var(--fg); }
+.pe-ff-sub { font-size: 11px; color: var(--fg-dim); margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
+.pe-ff-field { margin-bottom: 13px; }
+.pe-ff-field label {
+  display: block; font-size: 10.5px; color: var(--fg-dim); margin-bottom: 5px;
+  text-transform: uppercase; letter-spacing: 0.05em;
+}
+.pe-ff-input {
+  width: 100%; background: var(--bg-input, var(--bg)); border: 1px solid var(--border);
+  border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--fg);
+  font-family: 'SF Mono', Menlo, monospace; outline: none;
+}
+.pe-ff-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring, rgba(122,162,247,0.32)); }
+.pe-ff-nofields { font-size: 12.5px; color: var(--fg-muted); margin-bottom: 10px; }
+.pe-ff-dyn {
+  margin-top: 6px; padding: 9px 11px; background: var(--bg-light, #24283b); border: 1px solid var(--border);
+  border-radius: 8px; font-size: 11.5px; color: var(--fg-muted); line-height: 1.6;
+}
+.pe-ff-dyn code {
+  font-family: 'SF Mono', Menlo, monospace; font-size: 10.5px; color: var(--syn-num, #ff9e64);
+  background: color-mix(in srgb, var(--syn-num, #ff9e64) 14%, transparent); border-radius: 4px; padding: 1px 5px;
+}
+.pe-ff-dyn-hint { display: block; margin-top: 4px; color: var(--fg-dim); font-size: 10.5px; }
+.pe-ff-actions { display: flex; gap: 9px; margin-top: 18px; }
+.pe-ff-btn { flex: 1; text-align: center; font: inherit; font-size: 12.5px; font-weight: 600; padding: 9px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); }
+.pe-ff-btn.primary { background: var(--accent); color: var(--accent-fg, #0d1117); border-color: var(--accent); }
+.pe-ff-btn.ghost { background: var(--bg-light, #24283b); color: var(--fg-muted); }
+.pe-ff-btn .pe-ff-kbd { font-family: 'SF Mono', Menlo, monospace; font-size: 10px; opacity: 0.7; margin-left: 4px; }
+
+/* ============================================================
+   Phase 4 — Version diff (side-by-side)
+   ============================================================ */
+.pe-diff-modal {
+  width: 860px; max-width: 94vw; max-height: 80vh; display: flex; flex-direction: column;
+  background: var(--bg-elevated, #2b3045); border: 1px solid var(--border); border-radius: 13px;
+  box-shadow: 0 24px 60px rgba(0,0,0,0.45); overflow: hidden;
+}
+.pe-diff-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
+.pe-diff-title { font-size: 14px; font-weight: 650; color: var(--fg); }
+.pe-diff-stat { font-family: 'SF Mono', Menlo, monospace; font-size: 12px; }
+.pe-diff-stat .add { color: var(--green); } .pe-diff-stat .del { color: var(--red); }
+.pe-diff-head .pe-ff-btn { margin-left: auto; }
+.pe-diff-cols { display: flex; padding: 6px 16px; background: var(--bg-panel, var(--bg-light)); border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); }
+.pe-diff-cols span { flex: 1; }
+.pe-diff-body { overflow: auto; }
+.pe-diff-table { width: 100%; border-collapse: collapse; font-family: 'SF Mono', 'JetBrains Mono', Menlo, monospace; font-size: 12px; line-height: 1.55; }
+.pe-diff-gutter { width: 38px; text-align: right; padding: 0 8px; color: var(--fg-dim); opacity: 0.6; user-select: none; vertical-align: top; }
+.pe-diff-side { width: 50%; padding: 0 10px 0 4px; white-space: pre-wrap; word-break: break-word; vertical-align: top; color: var(--fg); }
+.pe-diff-side.left { border-right: 1px solid var(--border); }
+.pe-diff-sign { display: inline-block; width: 1ch; margin-right: 6px; opacity: 0.6; }
+.pe-diff-del .left { background: var(--diff-del-bg, rgba(247,118,142,0.16)); }
+.pe-diff-add .right { background: var(--diff-add-bg, rgba(158,206,106,0.16)); }
+.pe-diff-del .left .pe-diff-sign { color: var(--red); }
+.pe-diff-add .right .pe-diff-sign { color: var(--green); }
+
+/* ============================================================
+   Gap-close: toolbar insert chips, palette footer, token over-limit
+   ============================================================ */
+.pe-insert-btn {
+  font-family: 'SF Mono', Menlo, monospace !important; font-size: 10.5px !important;
+  padding: 2px 7px !important; white-space: nowrap;
+}
+.pe-token-meter.over { color: var(--red); font-weight: 600; }
+
+.pe-palette-foot {
+  display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--border);
+  background: var(--bg-panel, var(--bg-light)); font-size: 11px; color: var(--fg-dim);
+}
+.pe-palette-foot .kbd {
+  font-family: 'SF Mono', Menlo, monospace; font-size: 10px; color: var(--fg-dim);
+  border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; margin-right: 3px; background: var(--bg);
+}

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

@@ -94,6 +94,17 @@
 .ctm-doc-review-link:hover {
   color: var(--fg, #c0caf5);
 }
+.ctm-commit-link {
+  color: var(--accent, #7aa2f7);
+  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+.ctm-commit-link:hover {
+  color: var(--fg, #c0caf5);
+}
 
 /* Commit summary card (shown at top of diff area when a commit is selected) */
 .cr-file-item.summary {
@@ -633,7 +644,11 @@
 }
 
 /* Side-by-side (split) diff layout */
-.cr-diff-table.split { table-layout: fixed; }
+.cr-diff-table.split { table-layout: fixed; width: 100%; }
+/* Column widths come from the colgroup (see _renderFileDiffSplit): narrow gutters,
+   two equal code columns. Without this the colspan=4 hunk header would force four
+   equal 25% columns and leave a dead channel between the panes. */
+.cr-diff-table.split col.cr-col-num { width: 46px; }
 .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;
@@ -971,45 +986,6 @@
 .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);
-}
-.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 {
-  display: flex; flex-direction: column; gap: 2px;
-}
-.cr-project-session-item {
-  display: flex; align-items: center; gap: 6px; padding: 4px 8px;
-  border-radius: 4px; font-size: 11px; cursor: pointer;
-  transition: background 0.1s;
-}
-.cr-project-session-item:hover { background: rgba(122,162,247,0.1); }
-.cr-project-session-item.hidden { display: none; }
-.cr-session-active {
-  font-size: 9px; font-weight: 600; color: var(--green, #9ece6a);
-  background: rgba(158,206,106,0.12); padding: 1px 5px; border-radius: 8px;
-  flex-shrink: 0;
-}
-.cr-session-label {
-  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
-  white-space: nowrap; color: var(--fg);
-}
-.cr-session-time {
-  font-size: 10px; color: var(--fg-dim); flex-shrink: 0; white-space: nowrap;
-}
-.cr-session-toggle {
-  font-size: 10px; color: var(--accent); background: none; border: none;
-  cursor: pointer; padding: 2px 8px; text-align: left;
-}
-.cr-session-toggle:hover { text-decoration: underline; }
-
 .cr-project-files {
   display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
 }
@@ -1253,3 +1229,235 @@
 }
 .cr-chat-toggle:hover { background: var(--bg-lighter); color: var(--fg); }
 .cr-chat-toggle.active { color: var(--accent); border-color: var(--accent); }
+
+/* ===== Phase A: shared shell — nav history + breadcrumb ===== */
+.cr-navcluster {
+  display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 1;
+}
+.cr-nav-history { display: inline-flex; gap: 2px; flex-shrink: 0; }
+.cr-nav-btn {
+  width: 26px; height: 26px; display: inline-grid; place-items: center;
+  font-size: 14px; line-height: 1; cursor: pointer; color: var(--fg-dim);
+  background: var(--bg-light); border: 1px solid var(--border); border-radius: 7px;
+  transition: color .12s, border-color .12s, background .12s;
+}
+.cr-nav-btn:hover:not(:disabled) { color: var(--fg); border-color: var(--accent); }
+.cr-nav-btn:disabled { opacity: 0.34; cursor: default; }
+.cr-breadcrumb {
+  display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; flex-wrap: nowrap; overflow: hidden;
+}
+.cr-crumb {
+  color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch;
+  border-radius: 5px; padding: 2px 4px;
+}
+.cr-crumb[role="link"] { cursor: pointer; }
+.cr-crumb[role="link"]:hover { color: var(--fg); background: var(--bg-hover); }
+.cr-crumb.active { color: var(--fg); font-weight: 600; }
+.cr-crumb-sep { color: var(--fg-dim); flex-shrink: 0; }
+.cr-hub-tagline { font-size: 12px; color: var(--fg-dim); margin-left: 4px; }
+
+/* ===== Phase A: project groups (worktrees nested under their repo) ===== */
+.cr-project-groups { display: flex; flex-direction: column; gap: 16px; }
+.cr-project-group {
+  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-panel, var(--bg-light));
+}
+.cr-project-group.solo { border: 0; border-radius: 0; background: none; overflow: visible; }
+.cr-project-group-header {
+  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
+  background: var(--bg-lighter); border-bottom: 1px solid var(--border);
+}
+.cr-project-group-icon { font-size: 14px; opacity: 0.85; }
+.cr-project-group-name { font-size: 14px; font-weight: 700; color: var(--fg); }
+.cr-project-group-meta { font-size: 11.5px; color: var(--fg-dim); }
+.cr-project-group-changes {
+  margin-left: auto; font-size: 11px; font-weight: 600; color: var(--accent);
+  background: var(--accent-soft); border-radius: 20px; padding: 2px 10px;
+}
+.cr-project-group-members { display: flex; flex-direction: column; gap: 1px; padding: 8px; }
+.cr-project-group-members .cr-project-card {
+  border-radius: 9px;
+}
+.cr-project-group-members .cr-project-card.is-worktree {
+  margin-left: 14px; border-left: 2px solid var(--border);
+}
+.cr-project-group-members .cr-project-card.is-worktree.has-changes { border-left-color: var(--accent); }
+.cr-worktree-name {
+  font-size: 11px; color: var(--purple); font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
+  background: color-mix(in srgb, var(--purple) 12%, transparent); border-radius: 6px; padding: 1px 7px;
+}
+
+/* ===== Phase B: viewer quality — highlight.js + stronger diff/inline-code ===== */
+#codereview-panel { --cr-teal: #2ac3de; }
+html[data-theme="light"] #codereview-panel { --cr-teal: #0e7490; }
+
+/* Inline code: accent text + hairline border = unmistakably "code" */
+.cr-doc-markdown code {
+  color: var(--accent); font-size: 0.88em;
+  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 5px;
+}
+.cr-doc-markdown pre code { color: var(--fg); border: 0; }
+
+/* Diff lines: stronger fill + a left accent bar so add/del read at a glance */
+.cr-diff-line.add { background: var(--success-soft, rgba(158,206,106,0.14)); }
+.cr-diff-line.del { background: var(--danger-soft, rgba(247,118,142,0.14)); }
+.cr-diff-line.add:hover { background: rgba(158,206,106,0.22); }
+.cr-diff-line.del:hover { background: rgba(247,118,142,0.22); }
+.cr-diff-line.add .cr-line-content { box-shadow: inset 2px 0 0 var(--green, #9ece6a); }
+.cr-diff-line.del .cr-line-content { box-shadow: inset 2px 0 0 var(--red, #f7768e); }
+.cr-diff-line-split .cr-line-content.add { background: var(--success-soft, rgba(158,206,106,0.14)); box-shadow: inset 2px 0 0 var(--green, #9ece6a); }
+.cr-diff-line-split .cr-line-content.del { background: var(--danger-soft, rgba(247,118,142,0.14)); box-shadow: inset 2px 0 0 var(--red, #f7768e); }
+
+/* highlight.js token theme — semantic CTM vars, flips with the app theme,
+   scoped to the review panel so it never leaks into other code surfaces. */
+#codereview-panel .hljs { color: var(--fg); background: transparent; }
+#codereview-panel .hljs-comment, #codereview-panel .hljs-quote { color: var(--fg-dim); font-style: italic; }
+#codereview-panel .hljs-keyword, #codereview-panel .hljs-selector-tag, #codereview-panel .hljs-literal, #codereview-panel .hljs-meta-keyword { color: var(--purple); }
+#codereview-panel .hljs-string, #codereview-panel .hljs-regexp, #codereview-panel .hljs-char.escape_, #codereview-panel .hljs-symbol { color: var(--green); }
+#codereview-panel .hljs-number { color: var(--yellow); }
+#codereview-panel .hljs-title, #codereview-panel .hljs-title.function_, #codereview-panel .hljs-section { color: var(--accent); }
+#codereview-panel .hljs-attr, #codereview-panel .hljs-attribute, #codereview-panel .hljs-property, #codereview-panel .hljs-variable, #codereview-panel .hljs-template-variable, #codereview-panel .hljs-built_in, #codereview-panel .hljs-type, #codereview-panel .hljs-title.class_ { color: var(--cr-teal); }
+#codereview-panel .hljs-tag, #codereview-panel .hljs-name, #codereview-panel .hljs-selector-id, #codereview-panel .hljs-selector-class { color: var(--red); }
+#codereview-panel .hljs-meta { color: var(--fg-dim); }
+#codereview-panel .hljs-emphasis { font-style: italic; }
+#codereview-panel .hljs-strong { font-weight: 700; }
+#codereview-panel .hljs-deletion { color: var(--red); }
+#codereview-panel .hljs-addition { color: var(--green); }
+
+/* ===== Phase C: file-router context menu + typed file links ===== */
+.ctm-file-menu {
+  position: fixed; z-index: 100050; min-width: 210px; padding: 6px;
+  background: var(--bg-elevated, var(--bg-light)); border: 1px solid var(--border);
+  border-radius: 11px; box-shadow: 0 18px 46px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.03) inset;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+}
+html[data-theme="light"] .ctm-file-menu { box-shadow: 0 24px 60px rgba(15,23,42,0.18), 0 8px 20px rgba(15,23,42,0.08); }
+.ctm-file-menu-head {
+  font-size: 10.5px; color: var(--fg-dim); font-family: var(--mono, 'SF Mono', Menlo, monospace);
+  padding: 7px 10px 8px; border-bottom: 1px solid var(--border); margin-bottom: 5px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
+  direction: rtl; text-align: left;
+}
+.ctm-file-menu-item {
+  display: block; width: 100%; text-align: left; font: inherit; font-size: 13px;
+  color: var(--fg); background: none; border: 0; padding: 8px 10px; border-radius: 7px; cursor: pointer;
+}
+.ctm-file-menu-item:hover { background: var(--accent); color: var(--accent-fg); }
+.ctm-file-menu-item.primary { color: var(--accent); font-weight: 600; }
+.ctm-file-menu-item.primary:hover { color: var(--accent-fg); }
+.ctm-file-menu-sep { height: 1px; background: var(--border); margin: 5px 6px; }
+
+/* Typed file links in session output / summaries — a subtle per-type tint */
+.ctm-file-link { cursor: pointer; text-underline-offset: 2px; }
+.ctm-file-link.type-source { text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
+.ctm-file-link.type-html { text-decoration-color: color-mix(in srgb, var(--purple) 50%, transparent); }
+.ctm-file-link.type-html { color: var(--purple); }
+.ctm-file-link.type-source { color: var(--accent); }
+
+/* ===== Hub two-pane layout: Changed Code | Documents ===== */
+.cr-hub-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; }
+.cr-hub-col-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
+.cr-hub-col-head h4 {
+  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); margin: 0;
+}
+.cr-hub-col-count { font-size: 11px; color: var(--fg-dim); background: var(--bg-lighter); border-radius: 20px; padding: 2px 9px; font-weight: 600; }
+.cr-hub-docs { position: sticky; top: 8px; }
+.cr-hub-docs-list { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto; }
+.cr-hub-doc-row {
+  display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
+}
+.cr-hub-doc-row:hover { border-color: var(--accent); }
+.cr-hub-doc-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
+.cr-hub-doc-icon { color: var(--accent); flex-shrink: 0; }
+.cr-hub-doc-name { font-size: 13px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cr-hub-doc-dir {
+  margin-left: auto; font-size: 11px; color: var(--fg-dim); flex-shrink: 0;
+  font-family: var(--mono, 'SF Mono', Menlo, monospace); max-width: 45%;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: right;
+}
+.cr-hub-docs-empty { font-size: 12.5px; color: var(--fg-dim); padding: 16px 12px; text-align: center; }
+@media (max-width: 920px) { .cr-hub-cols { grid-template-columns: 1fr; } .cr-hub-docs { position: static; } }
+
+/* ===== Redesign fixes: compact cards · collapsible groups · docs · empty-state ===== */
+
+/* Compact project card — a single clickable row (matches the design proposal) */
+.cr-project-card.compact {
+  display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 0;
+  border-radius: 9px; cursor: pointer; position: relative;
+}
+.cr-project-card.compact:hover { border-color: var(--accent); background: var(--bg-hover); }
+.cr-pc-icon {
+  width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
+  border-radius: 8px; background: var(--bg-lighter); font-size: 14px;
+}
+.cr-pc-icon.worktree { color: var(--purple); }
+.cr-pc-icon.folder { color: var(--accent); }
+.cr-pc-body { flex: 1; min-width: 0; }
+.cr-pc-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.cr-pc-star { color: var(--yellow); flex-shrink: 0; font-size: 11px; }
+.cr-pc-title { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 40px; }
+.cr-pc-branch {
+  font-family: var(--mono, 'SF Mono', Menlo, monospace); font-size: 10.5px; color: var(--purple);
+  background: color-mix(in srgb, var(--purple) 12%, transparent); border-radius: 6px; padding: 1px 7px;
+  flex-shrink: 0; max-width: 46%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.cr-pc-branch.main { color: var(--fg-dim); background: var(--bg-lighter); }
+.cr-pc-type { font-size: 10px; color: var(--fg-dim); flex-shrink: 0; white-space: nowrap; }
+.cr-pc-sub {
+  font-size: 11px; color: var(--fg-dim); font-family: var(--mono, 'SF Mono', Menlo, monospace);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
+}
+.cr-pc-stat { flex-shrink: 0; font-family: var(--mono, 'SF Mono', Menlo, monospace); font-size: 12px; }
+.cr-pc-files { color: var(--accent); font-weight: 600; }
+.cr-pc-clean { color: var(--fg-dim); font-size: 11px; }
+.cr-pc-pin {
+  flex-shrink: 0; background: none; border: 0; cursor: pointer; font-size: 12px; padding: 4px;
+  opacity: 0; transition: opacity .12s; line-height: 1;
+}
+.cr-project-card.compact:hover .cr-pc-pin { opacity: 0.55; }
+.cr-pc-pin.pinned { opacity: 0.85; }
+.cr-pc-pin:hover { opacity: 1 !important; }
+
+/* Collapsible groups — default collapsed; chevron rotates when open */
+.cr-project-group-header {
+  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
+  background: var(--bg-lighter); border: 0; cursor: pointer; font: inherit; padding: 11px 14px;
+}
+.cr-project-group.expanded .cr-project-group-header { border-bottom: 1px solid var(--border); }
+.cr-project-group:not(.expanded) .cr-project-group-members { display: none; }
+.cr-group-chevron { color: var(--fg-dim); font-size: 11px; transition: transform .15s; flex-shrink: 0; }
+.cr-project-group.expanded .cr-group-chevron { transform: rotate(90deg); }
+.cr-project-group-header:hover { background: var(--bg-elevated, var(--bg-lighter)); }
+.cr-project-group-header:hover .cr-project-group-name { color: var(--accent); }
+.cr-project-group-clean { margin-left: auto; font-size: 11px; color: var(--fg-dim); }
+.cr-project-group-members { padding: 6px; gap: 2px; }
+.cr-project-group-members .cr-project-card.is-worktree { margin-left: 18px; }
+
+/* Documents column — two-line rows, full title, no truncation hack, no right clipping */
+.cr-hub-docs-list { padding-right: 4px; }
+.cr-hub-doc-row { align-items: center; gap: 10px; padding: 8px 11px; }
+.cr-hub-doc-text { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
+.cr-hub-doc-name {
+  font-size: 13px; color: var(--fg); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  max-width: none; margin-left: 0;
+}
+.cr-hub-doc-dir {
+  font-size: 10.5px; color: var(--fg-dim); font-family: var(--mono, 'SF Mono', Menlo, monospace);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  direction: ltr; text-align: left; margin-left: 0; max-width: none;
+}
+
+/* Empty-review state — actionable, suggests a base that has changes */
+.cr-no-changes {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 9px; padding: 56px 20px; text-align: center;
+}
+.cr-no-changes-icon { font-size: 30px; color: var(--green); opacity: 0.55; }
+.cr-no-changes-text { font-size: 15px; font-weight: 600; color: var(--fg); }
+.cr-no-changes-sub { font-size: 12px; color: var(--fg-dim); }
+.cr-no-changes-suggest { margin-top: 10px; }
+.cr-no-changes-suggest-label { font-size: 10.5px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 9px; }
+.cr-no-changes-suggest-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
+.cr-no-changes-base .cr-suggest-count { color: var(--accent); font-family: var(--mono, 'SF Mono', Menlo, monospace); margin-left: 5px; font-weight: 600; }
+.cr-no-changes-back { margin-top: 12px; background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 12.5px; }
+.cr-no-changes-back:hover { text-decoration: underline; }