app: code-block edge margins + gate scroll FAB until initial scroll settles

Code blocks only carry margins facing neighboring segments — a message
starting/ending with a code block keeps its outer edge flush, matching
enriched message edges.

The FAB was flashing on every session open: during list boot the viewport
sits at the top for a few frames and checkAtBottom unconditionally reports
isNearEnd=false (the hasActiveInitialScroll skip only guards isEndReached).
Gate visibility behind a fabReady shared value set in onLoad, which fires
once containers have laid out AND the initial scroll finished.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: yyq1025

packages/app/src/components/transcript/chat-panel.tsx

@@ -194,11 +194,23 @@ export function ChatPanel({
   // Written by the list on the UI thread (reanimated integration) — drives the
   // scroll-to-end FAB without a single JS-side re-render.
   const isNearEnd = useSharedValue(true);
+  // Gates the FAB until the list's initial scroll settles. During boot the
+  // list sits at the top for a few frames, so checkAtBottom legitimately
+  // reports isNearEnd=false (the library's hasActiveInitialScroll skip only
+  // guards isEndReached, not isNearEnd) — without this gate the FAB flashes
+  // on every session open. `onLoad` fires exactly once, when containers have
+  // laid out AND the initial scroll finished.
+  const fabReady = useSharedValue(false);
   const scrollFabStyle = useAnimatedStyle(() => ({
-    opacity: withTiming(isNearEnd.value ? 0 : 1, { duration: 160 }),
+    opacity: withTiming(fabReady.value && !isNearEnd.value ? 1 : 0, {
+      duration: 160,
+    }),
   }));
   const scrollFabProps = useAnimatedProps<ViewProps>(() => ({
-    pointerEvents: isNearEnd.value ? ("none" as const) : ("box-none" as const),
+    pointerEvents:
+      fabReady.value && !isNearEnd.value
+        ? ("box-none" as const)
+        : ("none" as const),
   }));
 
   // The "real send" handed to InputBar. InputBar already intercepts slash
@@ -347,6 +359,10 @@ export function ChatPanel({
         // List → UI-thread state mirror (reanimated integration). `isNearEnd`
         // gates the scroll-to-end FAB; no JS re-render involved.
         sharedValues={{ isNearEnd }}
+        // Initial render + initial scroll settled → un-gate the FAB.
+        onLoad={() => {
+          fabReady.set(true);
+        }}
         // Stabilize the visible position on size/layout changes (keyboard
         // toggle, streaming item growth) but NOT on data adds — with
         // maintainScrollAtEnd gone, new data moves nothing by design: the

packages/app/src/lib/markdown/chunked-markdown.tsx

@@ -101,10 +101,19 @@ const TokenLine = memo(
 const CodeBlockSegment = memo(function CodeBlockSegment({
   lang,
   code,
+  isFirst,
+  isLast,
   onTokenizeMs,
 }: {
   lang: string;
   code: string;
+  /** Margins only face NEIGHBORING segments: a message that starts or
+   *  ends with a code block keeps its outer edge flush, matching how
+   *  enriched messages start/end (their first/last block margins don't
+   *  add outer padding either). `isLast` flips once when more content
+   *  streams in after the block — a single cheap re-render. */
+  isFirst: boolean;
+  isLast: boolean;
   onTokenizeMs?: (ms: number) => void;
 }) {
   const hl = useHighlighter();
@@ -122,7 +131,9 @@ const CodeBlockSegment = memo(function CodeBlockSegment({
 
   return (
     <View
-      className="my-3 rounded-lg overflow-hidden"
+      className={`rounded-lg overflow-hidden ${isFirst ? "" : "mt-3"} ${
+        isLast ? "" : "mb-3"
+      }`}
       style={{
         backgroundColor: palette.codeBlockBg,
       }}
@@ -195,6 +206,8 @@ export function ChunkedMarkdown({
               key={seg.key}
               lang={seg.lang}
               code={seg.code}
+              isFirst={i === 0}
+              isLast={i === lastIndex}
               onTokenizeMs={onTokenizeMs}
             />
           );