Add flow settings, pulse emitting nodes, and simplify node state

- One dot per node now carries the whole story: primary while running, sage
  after a good run, red when anything is wrong, with the explanation on hover.
  The corner badge is gone, along with the second way of saying the same thing.
- A node that publishes something flashes a ring, so a running flow is legible
  without reading the edge values. Nodes that consume but publish nothing stay
  quiet, which is why the event carries an output count.
- Flow settings open in the same panel its nodes use, from a pencil in the
  dock: the title, the name, and deleting the flow. NodePanel and FlowPanel
  share the panel chrome rather than each drawing their own.
- Renaming is a server operation, because a flow's name is the namespace of its
  messages: the directory moves and every other flow reading `old.message` is
  repointed, instead of being left pointing at a flow that no longer exists.

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

frontend/src/components/Flow/SidePanel.tsx

@@ -0,0 +1,135 @@
+import { X } from "lucide-react"
+import { AnimatePresence, motion } from "motion/react"
+import type { ReactNode } from "react"
+import { useEffect } from "react"
+
+import { Button } from "@/components/ui/button"
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"
+import { useIsMobile } from "@/hooks/useMobile"
+import { duration, easeEmphasized, easeStandard } from "@/lib/motion"
+
+/** Same grammar as the shared `slideUp`, on the axis this panel travels. */
+const panelSlide = {
+  hidden: { opacity: 0, x: 16 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: { duration: duration.base, ease: easeEmphasized },
+  },
+  exit: {
+    opacity: 0,
+    x: 16,
+    transition: { duration: duration.fast, ease: easeStandard },
+  },
+}
+
+export const PANEL_SECTION =
+  "text-xs font-medium uppercase tracking-[0.5px] text-muted-foreground"
+
+/**
+ * The editor's settings panel: floating over the canvas so the graph stays
+ * visible and running behind it, a full-screen sheet where there is no room
+ * for that.
+ *
+ * Node settings and flow settings share it, so the two read as one surface.
+ */
+export function SidePanel({
+  open,
+  label,
+  testId,
+  bodyKey,
+  header,
+  footer,
+  children,
+  onClose,
+}: {
+  open: boolean
+  /** Names the panel for screen readers. */
+  label: string
+  testId: string
+  /** Remounts the contents when the thing being edited changes. */
+  bodyKey: string
+  header: ReactNode
+  footer?: ReactNode
+  children: ReactNode
+  onClose: () => void
+}) {
+  const isMobile = useIsMobile()
+
+  useEffect(() => {
+    if (!open) return
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose()
+    }
+    window.addEventListener("keydown", onKey)
+    return () => window.removeEventListener("keydown", onKey)
+  }, [open, onClose])
+
+  const contents = (
+    <>
+      <div className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-3">
+        {header}
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          className="shrink-0 text-muted-foreground"
+          onClick={onClose}
+          aria-label="Close"
+        >
+          <X />
+        </Button>
+      </div>
+
+      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+        {children}
+      </div>
+
+      {footer ? (
+        <div className="shrink-0 border-t border-border px-4 py-3">
+          {footer}
+        </div>
+      ) : null}
+    </>
+  )
+
+  if (isMobile) {
+    return (
+      <Sheet open={open} onOpenChange={(next) => !next && onClose()}>
+        <SheetContent
+          side="right"
+          // The panel header carries its own close button, and opening should
+          // not drop the caret into the first field.
+          className="flex h-dvh w-full max-w-none flex-col gap-0 rounded-none p-0 [&>button:last-of-type]:hidden"
+          onOpenAutoFocus={(event) => event.preventDefault()}
+        >
+          <SheetTitle className="sr-only">{label}</SheetTitle>
+          {open ? (
+            <div key={bodyKey} className="contents">
+              {contents}
+            </div>
+          ) : null}
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <AnimatePresence>
+      {open ? (
+        <motion.aside
+          key={bodyKey}
+          variants={panelSlide}
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          role="complementary"
+          aria-label={label}
+          data-testid={testId}
+          className="pointer-events-auto absolute inset-y-4 right-4 z-10 flex w-[400px] flex-col overflow-hidden rounded-lg border border-border bg-card/80 shadow-e2 backdrop-blur-md"
+        >
+          {contents}
+        </motion.aside>
+      ) : null}
+    </AnimatePresence>
+  )
+}