Branch views

public/css/branches.css

@@ -353,3 +353,242 @@
     font-size: 10px;
   }
 }
+
+/* --- Compare Mode Styles --- */
+
+/* Compare mode indicator on branches content */
+.branches-content.compare-mode .branch-item {
+  cursor: pointer;
+}
+
+.branches-content.compare-mode .branch-item:hover {
+  border-color: var(--accent);
+}
+
+.branches-content.compare-mode .branch-item.compare-selected {
+  background: var(--accent-alpha-15);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-alpha-30);
+}
+
+/* Compare overlay */
+.branches-compare {
+  position: absolute;
+  inset: 0;
+  background: var(--bg);
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+}
+
+.branches-compare.hidden {
+  display: none;
+}
+
+.compare-header {
+  padding: 12px 16px;
+  padding-top: calc(12px + var(--safe-top));
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px) saturate(1.4);
+  -webkit-backdrop-filter: blur(20px) saturate(1.4);
+  border-bottom: 1px solid var(--glass-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.compare-close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 8px 12px;
+  border-radius: 8px;
+  line-height: 1;
+  transition: background 0.15s, color 0.15s;
+}
+
+.compare-close-btn:hover {
+  background: var(--surface);
+  color: var(--text);
+}
+
+.compare-body {
+  flex: 1;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.compare-loading,
+.compare-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-secondary);
+  padding: 24px;
+  text-align: center;
+}
+
+.compare-error {
+  color: var(--danger);
+}
+
+/* Side-by-side view (desktop) */
+.compare-split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  height: 100%;
+}
+
+.compare-column {
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  min-width: 0;
+}
+
+.compare-column:last-child {
+  border-right: none;
+}
+
+.compare-column-header {
+  padding: 10px 12px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  font-weight: 600;
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 0;
+}
+
+.compare-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.compare-msg {
+  padding: 10px 14px;
+  margin-bottom: 10px;
+  border-radius: 10px;
+  font-size: 13px;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.compare-msg.user {
+  background: var(--accent-alpha-15);
+  color: var(--text);
+  margin-left: 20%;
+}
+
+.compare-msg.assistant {
+  background: var(--surface);
+  color: var(--text);
+  margin-right: 20%;
+}
+
+.compare-msg.empty {
+  background: var(--bg-tertiary);
+  opacity: 0.3;
+  min-height: 40px;
+}
+
+/* Unified diff view (mobile) */
+.compare-unified-header {
+  display: flex;
+  gap: 12px;
+  padding: 10px 12px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.unified-legend {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 3px 8px;
+  border-radius: 4px;
+}
+
+.unified-legend.parent {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
+.unified-legend.fork {
+  background: var(--accent-alpha-20);
+  color: var(--accent);
+}
+
+.compare-unified {
+  padding: 12px;
+}
+
+.unified-row {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+  align-items: flex-start;
+}
+
+.unified-row.fork {
+  padding-left: 20px;
+}
+
+.unified-source {
+  width: 32px;
+  min-width: 32px;
+  padding: 4px 6px;
+  border-radius: 4px;
+  font-size: 9px;
+  font-weight: 600;
+  text-align: center;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.unified-source.parent {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
+.unified-source.fork {
+  background: var(--accent-alpha-20);
+  color: var(--accent);
+}
+
+.unified-content {
+  flex: 1;
+  padding: 10px 14px;
+  background: var(--surface);
+  border-radius: 8px;
+  font-size: 13px;
+  line-height: 1.5;
+  word-break: break-word;
+  min-width: 0;
+}
+
+.unified-row.fork .unified-content {
+  background: var(--accent-alpha-10);
+  border: 1px solid var(--accent-alpha-30);
+}
+
+/* Responsive: mobile uses unified view */
+@media (max-width: 767px) {
+  .compare-split {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .compare-unified-header,
+  .compare-unified {
+    display: none;
+  }
+}

public/css/layout.css

@@ -191,6 +191,23 @@
   color: var(--accent);
 }
 
+/* Message highlight animation for jump-to-fork */
+.message-highlight,
+.message-wrapper.message-highlight {
+  animation: message-highlight-pulse 2s ease-out;
+}
+
+@keyframes message-highlight-pulse {
+  0% {
+    box-shadow: 0 0 0 3px var(--accent);
+    background: var(--accent-alpha-15);
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+    background: transparent;
+  }
+}
+
 .status-dot {
   width: 10px;
   height: 10px;

public/index.html

@@ -416,8 +416,19 @@ <h1>Concierge</h1>
     <header class="top-bar chat-header">
       <button id="branches-back-btn" class="back-btn" aria-label="Back">&larr;</button>
       <div class="chat-title"><span>Conversation Branches</span></div>
+      <button id="branches-compare-btn" class="header-icon-btn" aria-label="Compare branches" title="Compare">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M16 3h5v5"/><path d="M8 3H3v5"/><path d="M21 3l-9 9"/><path d="M3 3l9 9"/><path d="M21 21H3"/></svg>
+      </button>
     </header>
     <div id="branches-content" class="branches-content"></div>
+    <!-- Compare overlay -->
+    <div id="branches-compare" class="branches-compare hidden">
+      <div class="compare-header">
+        <span>Select two branches to compare</span>
+        <button id="compare-close-btn" class="compare-close-btn" aria-label="Close">&times;</button>
+      </div>
+      <div id="compare-body" class="compare-body"></div>
+    </div>
   </div>
 
   <!-- Standalone Files View -->
@@ -750,6 +761,10 @@ <h2>New Conversation</h2>
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="6" cy="6" r="3"/><circle cx="18" cy="18" r="3"/><circle cx="18" cy="6" r="3"/><path d="M6 9v6c0 3 3 3 6 3h3"/></svg>
       <span>Branches</span>
     </div>
+    <div class="more-menu-item hidden" id="chat-more-parent">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M9 14l-5-5 5-5"/><path d="M4 9h11a4 4 0 0 1 0 8h-1"/></svg>
+      <span>Jump to Parent</span>
+    </div>
     <div class="more-menu-item" id="chat-more-capabilities">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>
       <span>Commands &amp; Skills</span>

public/js/app.js

@@ -213,6 +213,10 @@ const branchesBtn = document.getElementById('branches-btn');
 const branchesView = document.getElementById('branches-view');
 const branchesBackBtn = document.getElementById('branches-back-btn');
 const branchesContent = document.getElementById('branches-content');
+const branchesCompareBtn = document.getElementById('branches-compare-btn');
+const branchesCompare = document.getElementById('branches-compare');
+const compareCloseBtn = document.getElementById('compare-close-btn');
+const compareBody = document.getElementById('compare-body');
 const filesStandaloneView = document.getElementById('files-standalone-view');
 const filesStandaloneBackBtn = document.getElementById('files-standalone-back-btn');
 const filesStandaloneTitle = document.getElementById('files-standalone-title');
@@ -457,6 +461,10 @@ initBranches({
   branchesView,
   branchesBackBtn,
   branchesContent,
+  branchesCompareBtn,
+  branchesCompare,
+  compareCloseBtn,
+  compareBody,
   listView,
   chatView
 });