Home: one sparkline style with a left fade, SI values, a full-width activity table, roomier panels

The trend curve was two components: a rich one in the node panel and on edges,
and a bare line in the flow table. It is one `Sparkline` now, taking the colour
token, the height and whether the live dot and the readout show. The flow table
draws its rollup in the chart ramp with no dot — the rollups are polled, so the
right edge is the last completed slice rather than this instant — and keeps its
"nothing yet" state, as the panel keeps its three distinct silences.

All of them fade out to the left, through an SVG mask over the curve and its
area. The dot sits outside the mask: the newest reading is the one thing that
must stay solid.

`si` replaces `compact` and the ad-hoc "k" the uPlot axis carried. It prefixes
k/M/G and m/µ, but only outside 0.01–1000, where the plain number is already
the shortest thing to read and a written unit ("0.4 ms") stays honest. The
sparkline readout asks for four digits, so two neighbouring readings never
collapse into one string. Exact counts and anything the user acts on — a
payload, a form field, the edge inspector's value — are left unrounded.
`src/lib/utils.check.ts` asserts the rounding cases.

The activity table now spans its card: the flow name anchors the left, the four
numbers read down their own centre, and the trend takes the slack on the right.
Panel rhythm steps up one notch, gap-5 to gap-6 outside and gap-2 to gap-3
within a section.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XC2jX6Hdj7pxGGKzBTrbqB

frontend/src/components/Flow/NodePanel.tsx

@@ -223,7 +223,7 @@ function PortList({
   }
 
   return (
-    <div className="grid gap-2">
+    <div className="grid gap-3">
       <div className="flex items-center justify-between">
         <span className={SECTION}>{title}</span>
         <Button
@@ -366,7 +366,7 @@ function FreeParamsForm({
   }
 
   return (
-    <div className="grid gap-2">
+    <div className="grid gap-3">
       <div className="flex items-center justify-between">
         <span className={SECTION}>Settings</span>
         <Button
@@ -704,7 +704,7 @@ function SharingSection({
 
   if (shared) {
     return (
-      <div className="grid gap-2">
+      <div className="grid gap-3">
         <span className={SECTION}>Shared</span>
         <p className="text-sm text-muted-foreground">
           Runs <span className="font-mono">{shared}</span> from the library
@@ -730,7 +730,7 @@ function SharingSection({
   }
 
   return (
-    <div className="grid gap-2">
+    <div className="grid gap-3">
       <span className={SECTION}>Reuse</span>
       <p className="text-sm text-muted-foreground">
         Move this node's code to the library so other flows can run it too.
@@ -901,7 +901,7 @@ function PanelBody({
 
   return (
     <>
-      <div className={cn("grid gap-5 p-4", expanded && "max-w-2xl")}>
+      <div className={cn("grid gap-6 p-4", expanded && "max-w-2xl")}>
         <PortList
           title="Consumes"
           specs={node.requires ?? []}