Home: widen the brain layout, fix its entrance, add a clear button to pinned charts

The force layout settled roughly square, so in a wide band the graph sat as a
small island. Vertical centring now pulls nearly three times as hard as
horizontal and the seed sits on an ellipse, which settles at about 2.2:1
without stretching the circles or the edges.

The graph also slid in on load: the rebuild fit ran with a 300ms duration, so
React Flow animated the pan from its default viewport to the content. The fit
is instant now, and the canvas grows in from the centre with `scaleIn` once it
has a layout.

The pinned chart header said "Esc clears", which a phone cannot act on. It
carries the same "× Clear" button as the list header instead; Escape still
works.

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

frontend/src/components/Flow/BrainView.tsx

@@ -17,9 +17,11 @@ import {
   forceY,
   type SimulationNodeDatum,
 } from "d3-force"
+import { motion } from "motion/react"
 import { useEffect, useMemo } from "react"
 
 import type { BrainGraph } from "@/client"
+import { scaleIn } from "@/lib/motion"
 import { BrainEdge } from "./BrainEdge"
 import { BrainNode, type BrainNodeData } from "./BrainNode"
 import "./flow.css"
@@ -46,8 +48,8 @@ type Placed = SimulationNodeDatum & { id: string; size: number; room: number }
  *
  * A live simulation would keep nudging nodes under the pointer while someone is
  * panning, and a graph that never stops moving is unreadable. Starting from a
- * circle rather than d3's own random phyllotaxis also means the same flows lay
+ * fixed ellipse rather than d3's own random phyllotaxis also means the same
- * out the same way twice.
+ * flows lay out the same way twice.
  *
  * `forceX`/`forceY` rather than `forceCenter`: centering only translates the
  * whole thing, so unconnected flows — which is most of them — would push each
@@ -68,8 +70,12 @@ function build(graph: BrainGraph): { nodes: Node[]; edges: Edge[] } {
       id: node.id,
       size,
       room: size / 2 + LABEL_ROOM,
-      x: Math.cos(angle) * radius,
+      // An ellipse, not a circle: the band across Home is far wider than it is
-      y: Math.sin(angle) * radius,
+      // tall, so the layout is meant to come out that way too. Seeding the
+      // shape it should settle into beats making the forces below fight a
+      // circle into one.
+      x: Math.cos(angle) * radius * 1.8,
+      y: Math.sin(angle) * radius * 0.55,
     }
   })
   const links = (graph.edges ?? []).map((edge) => ({
@@ -89,8 +95,13 @@ function build(graph: BrainGraph): { nodes: Node[]; edges: Edge[] } {
       "collide",
       forceCollide<Placed>((node) => node.room),
     )
-    .force("x", forceX(0).strength(0.06))
+    // Centring pulls nearly three times as hard vertically as horizontally, so
-    .force("y", forceY(0).strength(0.06))
+    // the graph compresses into a band roughly twice as wide as it is tall
+    // instead of the square an even pull settles into. Coming out of the
+    // simulation rather than out of a transform keeps the circles round and the
+    // edges the length the link force asked for.
+    .force("x", forceX(0).strength(0.05))
+    .force("y", forceY(0).strength(0.14))
     .stop()
     .tick(300)
 
@@ -144,13 +155,22 @@ function BrainCanvas() {
   useEffect(() => {
     if (!shape) return
     // After the new nodes have been measured, or the fit is of the old ones.
-    const frame = requestAnimationFrame(() =>
+    // Instant, never animated: an animated fit travels from React Flow's
-      fitView({ ...FIT, duration: 300 }),
+    // default viewport to the content, which on first load is the whole graph
-    )
+    // visibly sliding in from the corner.
+    const frame = requestAnimationFrame(() => fitView(FIT))
     return () => cancelAnimationFrame(frame)
   }, [shape, fitView])
 
   return (
+    // Held back until there is a layout, so the graph grows in from the centre
+    // of the band it is already fitted to rather than appearing mid-pan.
+    <motion.div
+      variants={scaleIn}
+      initial="hidden"
+      animate={nodes.length ? "visible" : "hidden"}
+      className="h-full w-full"
+    >
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -178,6 +198,7 @@ function BrainCanvas() {
         }}
         className="brain-flat h-full w-full"
       />
+    </motion.div>
   )
 }
 
@@ -191,7 +212,7 @@ function BrainCanvas() {
  */
 export function BrainView() {
   return (
-    <div className="h-64 w-full sm:h-80">
+    <div className="h-72 w-full sm:h-96">
       <ReactFlowProvider>
         <BrainCanvas />
       </ReactFlowProvider>

frontend/src/components/Health/HealthActivity.tsx

@@ -59,6 +59,28 @@ function useMoment() {
 
 type Moment = ReturnType<typeof useMoment>
 
+/**
+ * The way out of a held moment, on both the chart that set it and the list it
+ * drives — the same control in both places, because it is the same action.
+ *
+ * A control rather than the Escape hint it replaces on the chart: a phone has
+ * no Escape key. The shortcut still works, it is just no longer the only way.
+ */
+function ClearPin({ moment }: { moment: Moment }) {
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="-my-1 gap-1 px-2 text-xs"
+      onClick={moment.release}
+      aria-label="Clear the pinned moment"
+    >
+      <X className="size-3" />
+      Clear
+    </Button>
+  )
+}
+
 /** One chart, and the moment it hands to its list. */
 function Chart({
   title,
@@ -81,9 +103,11 @@ function Chart({
     >
       <div className="flex items-baseline justify-between gap-2">
         <h2 className={PANEL_SECTION}>{title}</h2>
-        <span className="text-xs text-muted-foreground">
+        {moment.pinned !== null ? (
-          {moment.pinned !== null ? "Esc clears" : "click to pin"}
+          <ClearPin moment={moment} />
-        </span>
+        ) : (
+          <span className="text-xs text-muted-foreground">click to pin</span>
+        )}
       </div>
       <UplotChart
         labels={labels}
@@ -106,17 +130,7 @@ function ListHeader({ title, moment }: { title: string; moment: Moment }) {
           {moment.pinned !== null ? "pinned to" : "showing"} {clock(moment.at)}
         </span>
       ) : null}
-      {moment.pinned !== null ? (
+      {moment.pinned !== null ? <ClearPin moment={moment} /> : null}
-        <Button
-          variant="ghost"
-          size="sm"
-          className="-my-1 h-6 gap-1 px-2 text-xs"
-          onClick={moment.release}
-        >
-          <X className="size-3" />
-          Clear
-        </Button>
-      ) : null}
     </div>
   )
 }