A message shows its shape, and its contents when asked

A record or an artifact reference was serialised into the port row, and the
panel widened until the type selects and the buttons beside them were pushed
off its edge — a checkpoint reference is 130 characters of digest, and none of
them are what you want while wiring a flow. What shows now is what the value
*is*: 'artifact · weights.json · 60B', 'record · 3 fields'. A chevron unfolds
the whole of it, wrapped, inside the panel it belongs to.

A scalar still reads as itself, and scrolls its own overflow into view when it
is longer than the room it was given. That behaviour already existed inside
the edge inspector; it moves to Common/Marquee so the panel can have it too,
and the inspector drops its own copy of the raw-JSON block along with it.

The rows are smaller for it: the type select finally fits the word 'artifact',
and a port nothing has come through on says so with a dash rather than a
sentence — nine ports of 'nothing has come through yet' is a panel of prose
about the absence of values.

The e2e check asserts both halves: that the summary is what appears, and that
the panel is still exactly 400px with the value unfolded.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AD8SfVhzXBG2nAfFcVh3iD

frontend/src/components/Flow/EdgeInspector.tsx

@@ -1,17 +1,15 @@
 import { useMutation } from "@tanstack/react-query"
 import { ArrowRight, RotateCcw, Trash2 } from "lucide-react"
-import { motion } from "motion/react"
-import { useEffect, useRef, useState } from "react"
 
 import { FlowsService } from "@/client"
+import { Marquee } from "@/components/Common/Marquee"
 import { Button } from "@/components/ui/button"
 import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover"
-import { ScrollArea } from "@/components/ui/scroll-area"
 import useCustomToast from "@/hooks/useCustomToast"
-import { cn } from "@/lib/utils"
 import { displayName } from "./deriveEdges"
 import { useLiveValue } from "./liveStore"
 import { MessageSparkline } from "./MessageSparkline"
+import { ValuePreview } from "./ValuePreview"
 
 function relativeTime(ts: number | null | undefined): string {
   if (!ts) return "not seen yet"
@@ -35,47 +33,6 @@ function formatScalar(value: unknown): string | null {
   return null
 }
 
-/**
- * Text that scrolls its own overflow into view and back, so a long name stays
- * readable without widening the popover. Still text at rest when it fits.
- */
-function Marquee({ text, className }: { text: string; className?: string }) {
-  const ref = useRef<HTMLSpanElement>(null)
-  const [overflow, setOverflow] = useState(0)
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: a new string is what changes the measurement.
-  useEffect(() => {
-    const el = ref.current
-    if (el) setOverflow(Math.max(0, el.scrollWidth - el.clientWidth))
-  }, [text])
-
-  return (
-    <span
-      ref={ref}
-      className={cn("min-w-0 overflow-hidden whitespace-nowrap", className)}
-    >
-      <motion.span
-        className="inline-block"
-        animate={{ x: -overflow }}
-        transition={
-          overflow
-            ? {
-                duration: overflow / 25,
-                ease: "linear",
-                delay: 1.2,
-                repeat: Number.POSITIVE_INFINITY,
-                repeatType: "reverse",
-                repeatDelay: 1.2,
-              }
-            : undefined
-        }
-      >
-        {text}
-      </motion.span>
-    </span>
-  )
-}
-
 export type InspectedEdge = {
   message: string
   /** Node titles, so the popover names the two ends in the user's own words. */
@@ -199,11 +156,7 @@ export function EdgeInspector({
             Nothing has come through yet. Run the flow to see a value here.
           </p>
         ) : scalar === null ? (
-          <ScrollArea className="mt-2 max-h-48">
-            <pre className="whitespace-pre-wrap break-all font-mono text-xs">
-              {JSON.stringify(live.value, null, 2)}
-            </pre>
-          </ScrollArea>
+          <ValuePreview value={live.value} className="mt-2" defaultOpen />
         ) : null}
       </PopoverContent>
     </Popover>