Give the pulse its own duration, and let the editor fill the screen

The shared duration tokens had been stretched to slow the pulses down, which
also slowed every panel and dock animation and left `motion.ts` out of step
with the CSS. Both are back to 200/300 ms, and the pulses use a new
`--duration-pulse` (500 ms): a message arriving is a signal, not a state
change, and it is the only thing here that should linger. The edge pulse read
its own 300 ms constant, so it now takes the token through `motion.ts` and the
two sides cannot drift again.

The code editor also expands: the same node panel fills the content region
beside the sidebar, the canvas chrome steps aside rather than floating on top,
and the settings above the editor keep a readable width.

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

frontend/src/components/Flow/SidePanel.tsx

@@ -7,6 +7,7 @@ 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"
+import { cn } from "@/lib/utils"
 
 /** Same grammar as the shared `slideUp`, on the axis this panel travels. */
 const panelSlide = {
@@ -38,6 +39,7 @@ export function SidePanel({
   label,
   testId,
   bodyKey,
+  expanded = false,
   header,
   footer,
   children,
@@ -49,6 +51,8 @@ export function SidePanel({
   testId: string
   /** Remounts the contents when the thing being edited changes. */
   bodyKey: string
+  /** Fill the content area instead of floating beside the canvas. */
+  expanded?: boolean
   header: ReactNode
   footer?: ReactNode
   children: ReactNode
@@ -125,7 +129,14 @@ export function SidePanel({
           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"
+          data-expanded={expanded || undefined}
+          className={cn(
+            "pointer-events-auto absolute z-20 flex flex-col overflow-hidden border border-border bg-card/80 shadow-e2 backdrop-blur-md",
+            expanded
+              ? // Fills the content region, which already starts after the sidebar.
+                "inset-0 rounded-none"
+              : "inset-y-4 right-4 w-[400px] rounded-lg",
+          )}
         >
           {contents}
         </motion.aside>