Connect fork-point and branch headers to their anchor message (#238)

* Connect fork-point and branch headers to their anchor message

The fork-point box rendered with an 8px top gap below the message it
hangs off (now visible as a landmark after #233), reading as a detached
floating element. The branch headers floated similarly above their own
content. Tie both to their anchors with a dashed top-border "connector"
and a closed gap, while the .children indent still shows subordination:

- .fork-point: top margin 8px → -1.2em (cancels the card's 1em bottom
  margin so it sticks up under the message above), border-top dashed,
  square top corners so the dashed edge reads as a connector tab.
- .branch-header: bottom margin 1em → 0 (sticks to its branch content
  below), matching dashed top border.

Snapshots regenerated (CSS is inlined into the HTML output); the diff is
limited to these two rules.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* Square the branch-header bottom to mirror the fork-point squared top

For visual consistency: the fork-point has a squared top (where it
connects up to the message above), so the branch header — which sticks
to its own content below — should have a squared bottom (where it
connects down). Round the top, square the bottom on .branch-header, and
square its own fold-bar's bottom corners too (the fold-bar sits at the
card's bottom edge, so its rounded corners would otherwise undo it).

Snapshots regenerated (inlined CSS); diff limited to these rules.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: cboos

claude_code_log/html/templates/components/message_styles.css

@@ -806,15 +806,29 @@ div.system-hook .header {
     box-shadow: none;
     border: none;
     border-left: 3px solid var(--branch-point-color);
+    /* Dashed top border as a connector (mirrors .fork-point), and no bottom
+       margin so the header sticks to its own branch content below. The bottom
+       corners are squared (mirroring .fork-point's squared top) so the left
+       rail flows cleanly into the branch content rather than rounding off. */
+    border-top: 1px dashed var(--branch-point-color);
+    border-radius: 8px 8px 0 0;
     padding: 8px 14px;
-    margin: 2em 0 1em 0;
+    margin: 2em 0 0 0;
 }
 
 .branch-header .header {
     font-size: 1em;
     margin-bottom: 0;
 }
 
+/* The header's own fold-bar sits at the bottom of the card; square its
+   bottom corners too so the squared branch-header bottom isn't undone by the
+   fold-bar's own rounded corners. Direct child only — never a fold-bar of a
+   message nested inside the branch content. */
+.branch-header > .fold-bar {
+    border-radius: 0;
+}
+
 .branch-header .fold-bar[data-border-color="session-header"] .fold-bar-section.folded {
     border-bottom-color: var(--branch-point-color);
 }

claude_code_log/html/templates/components/session_nav_styles.css

@@ -125,14 +125,19 @@ a.session-backlink:hover {
     line-height: 1.3;
 }
 
-/* Fork point element — standalone structural element after a fork message */
+/* Fork point element — rendered inside the fork node's .children, so it
+   reads as hanging off the message above it. Pull it up against that
+   message (negative top margin cancels the card's 1em bottom margin) and
+   add a dashed top border as a connector, while the .children indent still
+   shows it's subordinate. */
 .fork-point {
-    margin: 8px 0 2em 0;
+    margin: -1.2em 0 2em 0;
     padding: 8px 14px;
     font-size: 0.85em;
     color: var(--text-muted, #6c757d);
     border-left: 3px solid var(--fork-point-color);
-    border-radius: 8px;
+    border-top: 1px dashed var(--fork-point-color);
+    border-radius: 0 0 8px 8px;
 }
 
 .fork-point-header {