diff --git a/app/src/canvas/tips.test.ts b/app/src/canvas/tips.test.ts
new file mode 100644
index 00000000..52a541cc
--- /dev/null
+++ b/app/src/canvas/tips.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+import { selectCanvasTip } from "./tips";
+import type { CanvasTipContext } from "../types/CanvasTipContext";
+
+const idleContext: CanvasTipContext = {
+  isRunning: false,
+  canGroup: false,
+  canUngroup: false,
+  canUndo: false,
+  hasUnconnectedNode: false,
+};
+
+describe("selectCanvasTip", () => {
+  it("prioritizes the contextual frame gesture", () => {
+    expect(
+      selectCanvasTip(
+        { ...idleContext, canGroup: true, canUndo: true },
+        new Set(),
+      )?.id,
+    ).toBe("group-selection");
+  });
+
+  it("never repeats a dismissed tip and suppresses tips during runs", () => {
+    expect(
+      selectCanvasTip(
+        { ...idleContext, canGroup: true, canUndo: true },
+        new Set(["group-selection"]),
+      )?.id,
+    ).toBe("undo");
+    expect(
+      selectCanvasTip({ ...idleContext, canGroup: true, isRunning: true }, new Set()),
+    ).toBeNull();
+  });
+});
diff --git a/app/src/canvas/tips.ts b/app/src/canvas/tips.ts
new file mode 100644
index 00000000..86ee2a76
--- /dev/null
+++ b/app/src/canvas/tips.ts
@@ -0,0 +1,41 @@
+import type { CanvasTipContext } from "../types/CanvasTipContext";
+import type { CanvasTipDefinition } from "../types/CanvasTipDefinition";
+
+const canvasTips: readonly CanvasTipDefinition[] = [
+  {
+    id: "group-selection",
+    text: "Frame this selection",
+    chord: "group",
+    when: (context) => context.canGroup,
+  },
+  {
+    id: "ungroup-selection",
+    text: "Release this frame",
+    chord: "ungroup",
+    when: (context) => context.canUngroup,
+  },
+  {
+    id: "undo",
+    text: "Undo your last canvas change",
+    chord: "undo",
+    when: (context) => context.canUndo,
+  },
+  {
+    id: "connect-node",
+    text: "Drag from a handle to connect this node",
+    when: (context) => context.hasUnconnectedNode,
+  },
+];
+
+/** The highest-priority eligible tip that has not been dismissed. */
+export function selectCanvasTip(
+  context: CanvasTipContext,
+  dismissed: ReadonlySet<string>,
+): CanvasTipDefinition | null {
+  if (context.isRunning) return null;
+  return (
+    canvasTips.find(
+      (tip) => !dismissed.has(tip.id) && tip.when(context),
+    ) ?? null
+  );
+}
diff --git a/app/src/components/AddNodesPanel.tsx b/app/src/components/AddNodesPanel.tsx
index 56760929..180bb9cd 100644
--- a/app/src/components/AddNodesPanel.tsx
+++ b/app/src/components/AddNodesPanel.tsx
@@ -13,6 +13,7 @@ import {
   Pencil,
   Trash2,
   StickyNote,
+  Frame,
   type LucideIcon,
 } from "lucide-react";
 import { toast } from "sonner";
@@ -55,6 +56,7 @@ const sectionIcons: Record<string, LucideIcon> = {
   "Control Flow": GitBranch,
   Validation: CheckCircle,
   Annotations: StickyNote,
+  Layout: Frame,
 };
 
 interface PaletteItem {
@@ -166,6 +168,16 @@ const nodeTemplates: { category: string; nodes: NodeTemplate[] }[] = [
       },
     ],
   },
+  {
+    category: "Layout",
+    nodes: [
+      {
+        type: "group",
+        label: "Group Frame",
+        description: "Organize related nodes",
+      },
+    ],
+  },
 ];
 
 export default function AddNodesPanel({
diff --git a/app/src/components/WorkflowCanvas.tsx b/app/src/components/WorkflowCanvas.tsx
index fa496772..8e02cb72 100644
--- a/app/src/components/WorkflowCanvas.tsx
+++ b/app/src/components/WorkflowCanvas.tsx
@@ -42,6 +42,7 @@ import NoteNode from "./nodes/NoteNode";
 import CustomEdge from "./CustomEdge";
 import { withNodeBoundary } from "./atoms/flow/NodeBoundary";
 import { EmptyCanvasHint } from "./atoms/EmptyCanvasHint";
+import { CanvasTip } from "./atoms/CanvasTip";
 import { RunMiniMap } from "./RunMiniMap";
 import AddNodesPanel from "./AddNodesPanel";
 import NodeModal from "./NodeModal";
@@ -71,7 +72,11 @@ import useWorkflowPolling from "../hooks/useWorkflowPolling";
 import useWorkflowLiveUpdates from "../hooks/useWorkflowLiveUpdates";
 import useRunCamera from "../hooks/useRunCamera";
 import { useClipboardActions } from "../hooks/useClipboardActions";
-import { useCanvasKeyboardShortcuts } from "../hooks/useCanvasKeyboardShortcuts";
+import {
+  canvasShortcutLabel,
+  useCanvasKeyboardShortcuts,
+} from "../hooks/useCanvasKeyboardShortcuts";
+import { useCanvasTip } from "../hooks/useCanvasTip";
 import { useSpacePan } from "../hooks/useSpacePan";
 import {
   preserveCanvasRuntimeState,
@@ -85,6 +90,8 @@ import {
 import { canvasToWorkflow, workflowToCanvas } from "../adapters/workflowCanvas";
 import {
   groupSelection,
+  adoptIntoFrame,
+  frameContainingNode,
   isFrameNode,
   selectedFrameIds,
   selectedIds,
@@ -106,7 +113,7 @@ import { canvasInteractionProps } from "../utils/canvasInteraction";
 import { nearestInDirection } from "../utils/directionalFocus";
 import type { FocusDirection } from "../types/FocusDirection";
 import type { FocusModeDirection } from "../types/FocusModeDirection";
-import { adjacentFocusModeNode } from "../utils/focusModeOrder";
+import { adjacentFocusModeNode, isEditableNode } from "../utils/focusModeOrder";
 import { asPresetNodeType } from "../utils/nodePresets";
 import { Wand2 } from "lucide-react";
 import { useScopeContext } from "../hooks/useScopeContext";
@@ -771,15 +778,33 @@ export function WorkflowCanvas({
     selectedNodeRef.current = null;
   }, []);
 
-  const onNodeDragStart = useCallback(() => {
+  const onNodeDragStart = useCallback((_: MouseEvent | TouchEvent, node: CanvasNode) => {
     // isDraggingNodeRef removed — auto-save skips during drag via isSwaggerRefreshing guard
     // Dragging a node under a moving camera is unusable; the camera yields.
     suspendFollow();
-  }, [suspendFollow]);
+    // A constrained child cannot ever cross its frame boundary, so temporarily
+    // lift the constraint. Drag stop immediately reparents it or restores it.
+    if (node.parentId !== undefined) {
+      setNodes((current) =>
+        current.map((item) => {
+          if (item.id !== node.id || item.extent === undefined) return item;
+          const dragged = { ...item };
+          delete dragged.extent;
+          return dragged;
+        }),
+      );
+    }
+  }, [setNodes, suspendFollow]);
 
-  const onNodeDragStop = useCallback(() => {
-    // Drag stop handler — no-op, auto-save resumes naturally
-  }, []);
+  const onNodeDragStop = useCallback((_: MouseEvent | TouchEvent, node: CanvasNode) => {
+    setNodes((current) =>
+      adoptIntoFrame(
+        current,
+        node.id,
+        frameContainingNode(current, node.id),
+      ),
+    );
+  }, [setNodes]);
 
   const onNodeDoubleClick = useCallback(
     (event: React.MouseEvent, node: Node<WorkflowCanvasNodeData>) => {
@@ -791,7 +816,9 @@ export function WorkflowCanvas({
       ) {
         return;
       }
-      if (node.type !== "start" && node.type !== "end") {
+      // Frames and notes are canvas objects: a double-click renames them in
+      // place (see `GroupNode`/`NoteNode`), it does not open a step editor.
+      if (isEditableNode(node)) {
         setIsFocusMode(false);
         setModalNode(node);
       }
@@ -802,7 +829,8 @@ export function WorkflowCanvas({
   /**
    * Double-click the empty pane to frame the whole graph. The gesture is free
    * because `zoomOnDoubleClick` is off — and on a *node* it already opens the
-   * editor, which is a better use of it than framing that one node.
+   * editor (or renames a frame/note), which is a better use of it than framing
+   * that one node.
    *
    * Through `suspendFollow` like the zoom controls: a mid-run double-click
    * would otherwise fight the camera and snap straight back.
@@ -886,7 +914,7 @@ export function WorkflowCanvas({
   const openFocusMode = useCallback(() => {
     const node =
       selectedNodeRef.current ?? nodesRef.current.find((item) => item.selected);
-    if (!node || node.type === "group" || node.type === "note" || node.type === "start" || node.type === "end") {
+    if (!node || !isEditableNode(node)) {
       toast.info("Select an editable node to enter focus mode");
       return;
     }
@@ -1192,6 +1220,32 @@ export function WorkflowCanvas({
     apply: applyHistoryEntry,
   });
 
+  const canvasTipContext = useMemo(() => {
+    const selection = selectedIds(nodes);
+    const selected = nodes.filter((node) => selection.has(node.id));
+    const hasUnconnectedNode = nodes.some(
+      (node) =>
+        !isFrameNode(node) &&
+        node.type !== "note" &&
+        node.type !== "start" &&
+        node.type !== "end" &&
+        !edges.some((edge) => edge.source === node.id || edge.target === node.id),
+    );
+    return {
+      isRunning,
+      canGroup:
+        selected.length >= 2 &&
+        selected.every(
+          (node) => !isFrameNode(node) && node.parentId === undefined,
+        ),
+      canUngroup: selectedFrameIds(nodes, selection).size > 0,
+      canUndo,
+      hasUnconnectedNode,
+    };
+  }, [canUndo, edges, isRunning, nodes]);
+  const { tip: canvasTip, dismiss: dismissCanvasTip } =
+    useCanvasTip(canvasTipContext);
+
   useCanvasKeyboardShortcuts({
     isEditorOverlayOpen,
     isRunning,
@@ -1392,10 +1446,11 @@ export function WorkflowCanvas({
         x: canvasBounds.left + canvasBounds.width / 2,
         y: canvasBounds.top + canvasBounds.height / 2,
       });
-      setNodes((currentNodes) => [
-        ...currentNodes,
-        createCanvasNode(template, position),
-      ]);
+      setNodes((currentNodes) => {
+        const node = createCanvasNode(template, position);
+        const next = [...currentNodes, node];
+        return adoptIntoFrame(next, node.id, frameContainingNode(next, node.id));
+      });
     },
     [setNodes],
   );
@@ -1621,6 +1676,10 @@ export function WorkflowCanvas({
         onRedo={redo}
         canUndo={canUndo}
         canRedo={canRedo}
+        onGroup={groupSelected}
+        onUngroup={ungroupSelected}
+        canGroup={canvasTipContext.canGroup}
+        canUngroup={canvasTipContext.canUngroup}
         onHistory={() => setShowHistory(true)}
         onJsonEditor={() => {
           if (!isHydrated) {
@@ -1674,6 +1733,16 @@ export function WorkflowCanvas({
         workspaceId={scope.workspaceId ?? ""}
       />
 
+      {canvasPrefs.tipsEnabled && canvasTip && (
+        <CanvasTip
+          tip={canvasTip}
+          shortcut={
+            canvasTip.chord ? canvasShortcutLabel(canvasTip.chord) : null
+          }
+          onDismiss={() => dismissCanvasTip(canvasTip.id)}
+        />
+      )}
+
       <CommandPalette
         open={isCommandPaletteOpen}
         commands={commands}
diff --git a/app/src/components/atoms/CanvasTip.tsx b/app/src/components/atoms/CanvasTip.tsx
new file mode 100644
index 00000000..cefba046
--- /dev/null
+++ b/app/src/components/atoms/CanvasTip.tsx
@@ -0,0 +1,32 @@
+import { X } from "lucide-react";
+import { IconButton } from "./IconButton";
+import type { CanvasTipProps } from "../../types/CanvasTipProps";
+
+/** A single, non-blocking canvas hint. */
+export function CanvasTip({ tip, shortcut, onDismiss }: CanvasTipProps) {
+  return (
+    <div className="pointer-events-none absolute bottom-4 left-1/2 z-20 -translate-x-1/2">
+      <div
+        role="status"
+        aria-live="polite"
+        className="pointer-events-auto flex items-center gap-2 rounded-sm border border-border bg-surface-raised px-2 py-1.5 text-xs text-text-secondary shadow-node dark:border-border-dark dark:bg-surface-dark-raised dark:text-text-secondary-dark"
+      >
+        <span>{tip.text}</span>
+        {shortcut && (
+          <kbd className="rounded-sm border border-border bg-surface px-1 py-0.5 font-mono text-[10px] text-text-primary dark:border-border-dark dark:bg-surface-dark dark:text-text-primary-dark">
+            {shortcut}
+          </kbd>
+        )}
+        <IconButton
+          size="xs"
+          variant="ghost"
+          tooltip="Dismiss tip"
+          aria-label="Dismiss canvas tip"
+          onClick={onDismiss}
+        >
+          <X className="h-3.5 w-3.5" />
+        </IconButton>
+      </div>
+    </div>
+  );
+}
diff --git a/app/src/components/nodes/GroupNode.test.tsx b/app/src/components/nodes/GroupNode.test.tsx
new file mode 100644
index 00000000..2aa17a0b
--- /dev/null
+++ b/app/src/components/nodes/GroupNode.test.tsx
@@ -0,0 +1,56 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { ReactFlowProvider } from "@xyflow/react";
+import GroupNode from "./GroupNode";
+
+const patchConfig = vi.fn();
+vi.mock("../../hooks/useNodeConfigPatch", () => ({
+  useNodeConfigPatch: () => patchConfig,
+}));
+
+function renderFrame(color?: string) {
+  return render(
+    <ReactFlowProvider>
+      <GroupNode
+        id="frame-1"
+        type="group"
+        selected
+        dragging={false}
+        draggable
+        selectable
+        deletable
+        zIndex={0}
+        isConnectable={false}
+        positionAbsoluteX={0}
+        positionAbsoluteY={0}
+        data={{ label: "Checkout", config: color === undefined ? {} : { color } }}
+      />
+    </ReactFlowProvider>,
+  );
+}
+
+describe("GroupNode tints", () => {
+  it("marks the stored tint and writes the one that is picked", async () => {
+    renderFrame("violet");
+
+    expect(screen.getByRole("button", { name: "violet" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: "rose" }));
+    expect(patchConfig).toHaveBeenCalledWith("color", "rose");
+  });
+
+  // An unknown stored name would leave `--aw-group-tint` undefined, which
+  // collapses every color-mix that draws the frame.
+  it("falls back to slate when the stored tint is not one of ours", () => {
+    renderFrame("chartreuse");
+
+    expect(screen.getByRole("button", { name: "slate" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+  });
+});
diff --git a/app/src/components/nodes/GroupNode.tsx b/app/src/components/nodes/GroupNode.tsx
index 57868e6e..004730a9 100644
--- a/app/src/components/nodes/GroupNode.tsx
+++ b/app/src/components/nodes/GroupNode.tsx
@@ -3,7 +3,12 @@ import { NodeResizer, useReactFlow } from "@xyflow/react";
 import type { NodeProps } from "@xyflow/react";
 import { Frame, Ungroup } from "lucide-react";
 import { IconButton } from "../atoms/IconButton";
-import { ungroupFrames } from "../../utils/canvasGroups";
+import { useNodeConfigPatch } from "../../hooks/useNodeConfigPatch";
+import {
+  FRAME_MIN_HEIGHT,
+  FRAME_MIN_WIDTH,
+  ungroupFrames,
+} from "../../utils/canvasGroups";
 import type { CanvasNode } from "../../types/CanvasNode";
 import { GROUP_TINTS } from "../../constants/GroupTints";
 import type { GroupTint } from "../../types/GroupTint";
@@ -24,10 +29,19 @@ import type { GroupTint } from "../../types/GroupTint";
  */
 function GroupNode({ id, data, selected }: NodeProps<CanvasNode>) {
   const { updateNodeData, setNodes } = useReactFlow<CanvasNode>();
+  const patchConfig = useNodeConfigPatch(id);
   const [isRenaming, setIsRenaming] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const tint = GROUP_TINTS[(data.config?.color as GroupTint) ?? "slate"];
+  // A stored name that is no longer a tint (renamed token, hand-edited file)
+  // would leave `--aw-group-tint` undefined and collapse every color-mix that
+  // draws this node, so it falls back rather than rendering an invisible frame.
+  const stored = data.config?.color;
+  const tintName: GroupTint =
+    typeof stored === "string" && stored in GROUP_TINTS
+      ? (stored as GroupTint)
+      : "slate";
+  const tint = GROUP_TINTS[tintName];
   const label = typeof data.label === "string" ? data.label : "Group";
 
   return (
@@ -35,8 +49,8 @@ function GroupNode({ id, data, selected }: NodeProps<CanvasNode>) {
       <NodeResizer
         isVisible={selected ?? false}
         color={tint}
-        minWidth={160}
-        minHeight={120}
+        minWidth={FRAME_MIN_WIDTH}
+        minHeight={FRAME_MIN_HEIGHT}
         // The dashed border below already is the outline; the resizer only
         // needs to contribute handles.
         lineStyle={{ borderColor: "transparent" }}
@@ -80,6 +94,21 @@ function GroupNode({ id, data, selected }: NodeProps<CanvasNode>) {
 
           {selected && (
             <span className="aw-group__actions nodrag">
+              <span className="aw-group__tints" role="group" aria-label={`Tint for ${label}`}>
+                {(Object.keys(GROUP_TINTS) as GroupTint[]).map((name) => (
+                  <button
+                    key={name}
+                    type="button"
+                    className="aw-group__swatch"
+                    style={{ "--aw-swatch": GROUP_TINTS[name] } as React.CSSProperties}
+                    data-active={name === tintName ? "true" : "false"}
+                    aria-pressed={name === tintName}
+                    aria-label={name}
+                    title={name}
+                    onClick={() => patchConfig("color", name)}
+                  />
+                ))}
+              </span>
               <IconButton
                 size="xs"
                 variant="ghost"
diff --git a/app/src/components/nodes/NoteNode.test.tsx b/app/src/components/nodes/NoteNode.test.tsx
index f05a91b7..319deedf 100644
--- a/app/src/components/nodes/NoteNode.test.tsx
+++ b/app/src/components/nodes/NoteNode.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
+import { ReactFlowProvider } from "@xyflow/react";
 import NoteNode from "./NoteNode";
 
 vi.mock("../../hooks/useNodeConfigPatch", () => ({
@@ -9,26 +10,30 @@ vi.mock("../../hooks/useNodeConfigPatch", () => ({
 describe("NoteNode", () => {
   it("renders as an annotation instead of an executable node", () => {
     render(
-      <NoteNode
-        id="note-1"
-        type="note"
-        selected={false}
-        dragging={false}
-        draggable
-        selectable
-        deletable
-        zIndex={0}
-        isConnectable={false}
-        positionAbsoluteX={0}
-        positionAbsoluteY={0}
-        data={{
-          label: "Retry plan",
-          config: { content: "Pause before the fallback request." },
-        }}
-      />,
+      <ReactFlowProvider>
+        <NoteNode
+          id="note-1"
+          type="note"
+          selected={false}
+          dragging={false}
+          draggable
+          selectable
+          deletable
+          zIndex={0}
+          isConnectable={false}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+          data={{
+            label: "Retry plan",
+            config: { content: "Pause before the fallback request." },
+          }}
+        />
+      </ReactFlowProvider>,
     );
 
     expect(screen.getByLabelText("Canvas note: Retry plan")).toBeTruthy();
+    // The title is edited on the note itself — it has no details dialog.
+    expect(screen.getByLabelText("Note title")).toHaveValue("Retry plan");
     expect(screen.getByText("Annotation")).toBeTruthy();
     expect(screen.getByDisplayValue("Pause before the fallback request.")).toBeTruthy();
     expect(screen.queryByLabelText(/Node status:/)).toBeNull();
diff --git a/app/src/components/nodes/NoteNode.tsx b/app/src/components/nodes/NoteNode.tsx
index 7a0e3870..1fc6fd4f 100644
--- a/app/src/components/nodes/NoteNode.tsx
+++ b/app/src/components/nodes/NoteNode.tsx
@@ -1,14 +1,21 @@
 import { memo } from "react";
 import { Pin, StickyNote } from "lucide-react";
+import { useReactFlow } from "@xyflow/react";
 import { TextArea } from "../atoms/TextArea";
 import { useNodeConfigPatch } from "../../hooks/useNodeConfigPatch";
 import type { CanvasNode } from "../../types/CanvasNode";
 import type { NodeProps } from "@xyflow/react";
 
+/**
+ * A note is a canvas object, not a step: it has no details dialog, so both its
+ * title and its body are edited in place here (`onNodeDoubleClick` skips it).
+ */
 function NoteNode({ id, data, selected }: NodeProps<CanvasNode>) {
+  const { updateNodeData } = useReactFlow<CanvasNode>();
   const patchConfig = useNodeConfigPatch(id);
   const content = typeof data.config?.content === "string" ? data.config.content : "";
-  const label = data.label?.trim() || "Note";
+  const title = typeof data.label === "string" ? data.label : "";
+  const label = title.trim() || "Note";
 
   return (
     <article
@@ -47,9 +54,14 @@ function NoteNode({ id, data, selected }: NodeProps<CanvasNode>) {
           <div className="border-b border-[color-mix(in_srgb,var(--aw-text-muted)_18%,transparent)]" />
           <div className="border-b border-[color-mix(in_srgb,var(--aw-text-muted)_18%,transparent)]" />
         </div>
-        <p className="mb-1.5 truncate font-display text-sm font-bold tracking-[-0.01em] text-text-primary dark:text-text-primary-dark" title={label}>
-          {label}
-        </p>
+        <input
+          className="nodrag relative z-10 mb-1.5 w-full truncate border-0 bg-transparent p-0 font-display text-sm font-bold tracking-[-0.01em] text-text-primary outline-none placeholder:font-normal placeholder:text-text-muted focus-visible:outline-2 focus-visible:outline-[var(--aw-primary)] focus-visible:outline-offset-[var(--aw-focus-ring-offset)] dark:text-text-primary-dark"
+          value={title}
+          onChange={(event) => updateNodeData(id, { label: event.target.value })}
+          placeholder="Note"
+          title={label}
+          aria-label="Note title"
+        />
         <TextArea
           size="xs"
           className="nodrag relative z-10 min-h-24 resize-y !border-0 !bg-transparent !px-0 !py-0 font-mono leading-6"
diff --git a/app/src/components/organisms/CanvasSettingsPanel.tsx b/app/src/components/organisms/CanvasSettingsPanel.tsx
index eef6f1c0..fecaec8a 100644
--- a/app/src/components/organisms/CanvasSettingsPanel.tsx
+++ b/app/src/components/organisms/CanvasSettingsPanel.tsx
@@ -22,7 +22,7 @@ const selectButtonClass =
  * reachable without leaving the workflow.
  */
 export function CanvasSettingsPanel() {
-  const { dragMode, snapToGrid, gridSize, wheelZoom, setCanvasPrefs } =
+  const { dragMode, snapToGrid, gridSize, wheelZoom, tipsEnabled, setCanvasPrefs } =
     useCanvasPrefsStore();
 
   return (
@@ -66,6 +66,13 @@ export function CanvasSettingsPanel() {
         onToggle={() => setCanvasPrefs({ snapToGrid: !snapToGrid })}
       />
 
+      <ToggleSetting
+        title="Contextual canvas tips"
+        description="Show a shortcut when the current selection unlocks an action."
+        checked={tipsEnabled}
+        onToggle={() => setCanvasPrefs({ tipsEnabled: !tipsEnabled })}
+      />
+
       {snapToGrid && (
         <div className="flex items-start justify-between gap-4">
           <div className="min-w-0">
diff --git a/app/src/components/organisms/CanvasToolbar.tsx b/app/src/components/organisms/CanvasToolbar.tsx
index 0f73e167..494051f7 100644
--- a/app/src/components/organisms/CanvasToolbar.tsx
+++ b/app/src/components/organisms/CanvasToolbar.tsx
@@ -15,6 +15,8 @@ import {
   Undo2,
   Redo2,
   Command,
+  Frame,
+  Ungroup,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { Button } from "../atoms/Button";
@@ -46,6 +48,10 @@ export function CanvasToolbar({
   onRedo,
   canUndo,
   canRedo,
+  onGroup,
+  onUngroup,
+  canGroup,
+  canUngroup,
   onHistory,
   onJsonEditor,
   onImport,
@@ -158,6 +164,34 @@ export function CanvasToolbar({
           >
             <Redo2 className="w-4 h-4" />
           </IconButton>
+          <IconButton
+            onClick={onGroup}
+            disabled={!canGroup}
+            tooltip={
+              canGroup
+                ? "Frame selection (Ctrl+G)"
+                : "Select two ungrouped nodes to frame"
+            }
+            aria-label="Frame selection"
+            variant="ghost"
+            size="sm"
+          >
+            <Frame className="w-4 h-4" />
+          </IconButton>
+          <IconButton
+            onClick={onUngroup}
+            disabled={!canUngroup}
+            tooltip={
+              canUngroup
+                ? "Ungroup selection (Ctrl+Shift+G)"
+                : "Select a frame or framed node to ungroup"
+            }
+            aria-label="Ungroup selection"
+            variant="ghost"
+            size="sm"
+          >
+            <Ungroup className="w-4 h-4" />
+          </IconButton>
           {!useOverflow && (
             <ToolbarButton
               icon={History}
diff --git a/app/src/components/organisms/__tests__/CanvasToolbar.test.tsx b/app/src/components/organisms/__tests__/CanvasToolbar.test.tsx
index 3de51fa3..d8c34a49 100644
--- a/app/src/components/organisms/__tests__/CanvasToolbar.test.tsx
+++ b/app/src/components/organisms/__tests__/CanvasToolbar.test.tsx
@@ -10,6 +10,10 @@ function renderToolbar() {
       onRedo={vi.fn()}
       canUndo={false}
       canRedo={false}
+      onGroup={vi.fn()}
+      onUngroup={vi.fn()}
+      canGroup={false}
+      canUngroup={false}
       onHistory={vi.fn()}
       onJsonEditor={vi.fn()}
       onImport={vi.fn()}
diff --git a/app/src/hooks/useCanvasDrop.ts b/app/src/hooks/useCanvasDrop.ts
index a0fc2b76..96810793 100644
--- a/app/src/hooks/useCanvasDrop.ts
+++ b/app/src/hooks/useCanvasDrop.ts
@@ -1,6 +1,12 @@
 import { useCallback } from "react";
 import type { Node, XYPosition } from "@xyflow/react";
 import type { CanvasNode, CanvasNodeTemplate } from "../types";
+import {
+  adoptIntoFrame,
+  FRAME_FALLBACK_HEIGHT,
+  FRAME_FALLBACK_WIDTH,
+  frameContainingNode,
+} from "../utils/canvasGroups";
 
 interface NodeConfig {
   [key: string]: unknown;
@@ -49,7 +55,7 @@ export function createCanvasNode(
   position: XYPosition,
 ): CanvasNode {
   const config = { ...getDefaultConfig(template.type), ...template.config };
-  return {
+  const node: CanvasNode = {
     id: `${template.type}-${Date.now()}`,
     type: template.type,
     position,
@@ -58,6 +64,12 @@ export function createCanvasNode(
       config,
     },
   };
+  if (template.type === "group") {
+    node.width = FRAME_FALLBACK_WIDTH;
+    node.height = FRAME_FALLBACK_HEIGHT;
+    node.dragHandle = ".aw-group-handle";
+  }
+  return node;
 }
 
 interface UseCanvasDropParams {
@@ -137,7 +149,14 @@ export default function useCanvasDrop({
         position,
       );
 
-      setNodes((nds) => [...nds, newNode]);
+      setNodes((nds) => {
+        const next = [...nds, newNode];
+        return adoptIntoFrame(
+          next,
+          newNode.id,
+          frameContainingNode(next, newNode.id),
+        );
+      });
     },
     [reactFlowInstanceRef, setNodes],
   );
diff --git a/app/src/hooks/useCanvasKeyboardShortcuts.ts b/app/src/hooks/useCanvasKeyboardShortcuts.ts
index 34aede7f..9ea1474f 100644
--- a/app/src/hooks/useCanvasKeyboardShortcuts.ts
+++ b/app/src/hooks/useCanvasKeyboardShortcuts.ts
@@ -58,6 +58,17 @@ const SHIFT_CHORDS: ChordTable = {
   arrowright: (h) => () => h.onFocusDirection("right"),
 };
 
+const CANVAS_SHORTCUT_LABELS: Record<string, string> = {
+  group: "Ctrl+G",
+  ungroup: "Ctrl+Shift+G",
+  undo: "Ctrl+Z",
+};
+
+/** Labels for surfaces that teach a canvas shortcut instead of handling it. */
+export function canvasShortcutLabel(shortcut: string): string | null {
+  return CANVAS_SHORTCUT_LABELS[shortcut] ?? null;
+}
+
 function runChord(
   e: KeyboardEvent,
   table: ChordTable,
diff --git a/app/src/hooks/useCanvasTip.ts b/app/src/hooks/useCanvasTip.ts
new file mode 100644
index 00000000..7f4cc633
--- /dev/null
+++ b/app/src/hooks/useCanvasTip.ts
@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { selectCanvasTip } from "../canvas/tips";
+import type { CanvasTipContext } from "../types/CanvasTipContext";
+
+const STORAGE_PREFIX = "apiweave.canvasTips.dismissed.";
+const SETTLE_MS = 500;
+
+function dismissedTips(): Set<string> {
+  try {
+    return new Set(
+      Object.keys(localStorage)
+        .filter((key) => key.startsWith(STORAGE_PREFIX))
+        .map((key) => key.slice(STORAGE_PREFIX.length)),
+    );
+  } catch {
+    return new Set();
+  }
+}
+
+/**
+ * Settles selection-driven hints after a marquee ends and remembers dismissals.
+ * A canvas tip is guidance, not an interruption, so a live run suppresses it.
+ */
+export function useCanvasTip(context: CanvasTipContext) {
+  const [settledContext, setSettledContext] = useState(context);
+  const [dismissed, setDismissed] = useState(dismissedTips);
+  const seenThisSession = useRef(new Set<string>());
+  const [activeTip, setActiveTip] = useState<ReturnType<typeof selectCanvasTip>>(
+    null,
+  );
+
+  useEffect(() => {
+    const timeout = window.setTimeout(() => setSettledContext(context), SETTLE_MS);
+    return () => window.clearTimeout(timeout);
+  }, [context]);
+
+  const candidate = selectCanvasTip(settledContext, dismissed);
+  useEffect(() => {
+    if (candidate === null) {
+      setActiveTip(null);
+      return;
+    }
+    setActiveTip((current) => {
+      if (current?.id === candidate.id) return current;
+      if (seenThisSession.current.has(candidate.id)) return null;
+      seenThisSession.current.add(candidate.id);
+      return candidate;
+    });
+  }, [candidate]);
+
+  const dismiss = useCallback((id: string) => {
+    setDismissed((current) => new Set(current).add(id));
+    setActiveTip((current) => (current?.id === id ? null : current));
+    try {
+      localStorage.setItem(`${STORAGE_PREFIX}${id}`, "1");
+    } catch {
+      // Storage being unavailable must not make a dismiss button lie.
+    }
+  }, []);
+
+  return { tip: activeTip, dismiss };
+}
diff --git a/app/src/index.css b/app/src/index.css
index 0b79e948..9125b3a1 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -476,5 +476,57 @@
   outline-offset: var(--aw-focus-ring-offset);
 }
 
+/* Tints sit inline in the bar, shown with the frame's other actions.
+   ponytail: six swatches read at a glance and need no open/dismiss state —
+   move to a popover if the palette grows. */
+.aw-group__tints {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 3px 6px;
+  border: 1px solid color-mix(in srgb, var(--aw-group-tint) 35%, transparent);
+  border-radius: 999px;
+  background: var(--aw-surface-raised);
+}
+
+.aw-group__swatch {
+  width: 9px;
+  height: 9px;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--aw-swatch) 55%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--aw-swatch) 55%, transparent);
+  cursor: pointer;
+  transition:
+    transform var(--aw-dur-fast) var(--aw-ease-standard),
+    background-color var(--aw-dur-fast) var(--aw-ease-standard);
+}
+
+.aw-group__swatch:hover {
+  transform: scale(1.3);
+  background: var(--aw-swatch);
+}
+
+.aw-group__swatch[data-active="true"] {
+  background: var(--aw-swatch);
+  border-color: var(--aw-swatch);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aw-swatch) 28%, transparent);
+}
+
+.aw-group__swatch:focus-visible {
+  outline: 2px solid var(--aw-primary);
+  outline-offset: var(--aw-focus-ring-offset);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aw-group__swatch {
+    transition: none;
+  }
+
+  .aw-group__swatch:hover {
+    transform: none;
+  }
+}
+
 /* Node layer reduced-motion rules live in styles/node-motion.css, next to
    the keyframes they neutralise. */
diff --git a/app/src/stores/CanvasPrefsStore.ts b/app/src/stores/CanvasPrefsStore.ts
index 7a0f1b37..d3edbd3f 100644
--- a/app/src/stores/CanvasPrefsStore.ts
+++ b/app/src/stores/CanvasPrefsStore.ts
@@ -23,17 +23,19 @@ const useCanvasPrefsStore = create<CanvasPrefsState>()(
       // can actually see rather than on an invisible lattice of its own.
       gridSize: 24,
       wheelZoom: true,
+      tipsEnabled: true,
 
       setCanvasPrefs: (patch: Partial<CanvasPrefs>) => set(patch),
     }),
     {
       name: "apiweave:v1:canvasPrefs",
-      partialize: ({ dragMode, locked, snapToGrid, gridSize, wheelZoom }) => ({
+      partialize: ({ dragMode, locked, snapToGrid, gridSize, wheelZoom, tipsEnabled }) => ({
         dragMode,
         locked,
         snapToGrid,
         gridSize,
         wheelZoom,
+        tipsEnabled,
       }),
     },
   ),
diff --git a/app/src/types/CanvasPrefs.ts b/app/src/types/CanvasPrefs.ts
index a3901b11..66a11fcb 100644
--- a/app/src/types/CanvasPrefs.ts
+++ b/app/src/types/CanvasPrefs.ts
@@ -13,4 +13,6 @@ export interface CanvasPrefs {
   gridSize: number;
   /** Wheel zooms (true, the historical behaviour) or pans (false). */
   wheelZoom: boolean;
+  /** Contextual hints appear on the canvas until the user turns them off. */
+  tipsEnabled: boolean;
 }
diff --git a/app/src/types/CanvasTipContext.ts b/app/src/types/CanvasTipContext.ts
new file mode 100644
index 00000000..64baf87f
--- /dev/null
+++ b/app/src/types/CanvasTipContext.ts
@@ -0,0 +1,7 @@
+export interface CanvasTipContext {
+  isRunning: boolean;
+  canGroup: boolean;
+  canUngroup: boolean;
+  canUndo: boolean;
+  hasUnconnectedNode: boolean;
+}
diff --git a/app/src/types/CanvasTipDefinition.ts b/app/src/types/CanvasTipDefinition.ts
new file mode 100644
index 00000000..bdfae090
--- /dev/null
+++ b/app/src/types/CanvasTipDefinition.ts
@@ -0,0 +1,8 @@
+import type { CanvasTipContext } from "./CanvasTipContext";
+
+export interface CanvasTipDefinition {
+  id: string;
+  text: string;
+  chord?: string;
+  when: (context: CanvasTipContext) => boolean;
+}
diff --git a/app/src/types/CanvasTipProps.ts b/app/src/types/CanvasTipProps.ts
new file mode 100644
index 00000000..e627a1da
--- /dev/null
+++ b/app/src/types/CanvasTipProps.ts
@@ -0,0 +1,7 @@
+import type { CanvasTipDefinition } from "./CanvasTipDefinition";
+
+export interface CanvasTipProps {
+  tip: CanvasTipDefinition;
+  shortcut: string | null;
+  onDismiss: () => void;
+}
diff --git a/app/src/types/CanvasToolbarProps.ts b/app/src/types/CanvasToolbarProps.ts
index 6016cce5..40418c80 100644
--- a/app/src/types/CanvasToolbarProps.ts
+++ b/app/src/types/CanvasToolbarProps.ts
@@ -4,6 +4,10 @@ export interface CanvasToolbarProps {
   onRedo: () => void;
   canUndo: boolean;
   canRedo: boolean;
+  onGroup: () => void;
+  onUngroup: () => void;
+  canGroup: boolean;
+  canUngroup: boolean;
   onHistory: () => void;
   onJsonEditor: () => void;
   onImport: () => void;
diff --git a/app/src/types/index.ts b/app/src/types/index.ts
index f12b235f..8e37f200 100644
--- a/app/src/types/index.ts
+++ b/app/src/types/index.ts
@@ -112,7 +112,10 @@ export type { MainHeaderProps } from "./MainHeaderProps";
 export type { MainFooterProps } from "./MainFooterProps";
 export type { WorkspaceProps } from "./WorkspaceProps";
 export type { TabBarProps } from "./TabBarProps";
-export type { CanvasToolbarProps } from "./CanvasToolbarProps";
+export type { CanvasToolbarProps } from "./CanvasToolbarProps";
+export type { CanvasTipContext } from "./CanvasTipContext";
+export type { CanvasTipDefinition } from "./CanvasTipDefinition";
+export type { CanvasTipProps } from "./CanvasTipProps";
 export type { ToolbarButtonProps } from "./ToolbarButtonProps";
 export type { ToolbarDensity } from "./ToolbarDensity";
 export type { KeyboardShortcutsHelpProps } from "./KeyboardShortcutsHelpProps";
diff --git a/app/src/utils/autoLayout.test.ts b/app/src/utils/autoLayout.test.ts
index d2fc4ab7..9e176cc4 100644
--- a/app/src/utils/autoLayout.test.ts
+++ b/app/src/utils/autoLayout.test.ts
@@ -210,34 +210,146 @@ describe("autoLayout with bezier edges", () => {
     );
   });
   // #4: dagre lays out a flat graph, and a framed node's position is relative
-  // to its frame. Laying them out together scatters the user's groups and puts
-  // absolute coordinates into a relative space.
-  it("leaves frames and their members where they are", () => {
-    const { nodes, edges } = buildGraph(6);
-    const framed = [
-      {
-        id: "frame-1",
-        type: "group",
-        position: { x: -50, y: -50 },
-        width: 400,
-        height: 300,
-        data: {},
-      },
-      ...nodes.map((node) =>
-        node.id === "n2" ? { ...node, parentId: "frame-1" } : node,
-      ),
-    ] as Node[];
-
-    const laidOut = autoLayoutRootNodes(framed, edges);
-    const byId = new Map(laidOut.map((node) => [node.id, node.position]));
-
-    expect(byId.get("frame-1")).toEqual({ x: -50, y: -50 });
-    expect(byId.get("n2")).toEqual(
-      framed.find((node) => node.id === "n2")?.position,
-    );
-    // Everything else still moved.
-    expect(byId.get("n1")).not.toEqual(
-      nodes.find((node) => node.id === "n1")?.position,
-    );
+  // to its frame. Excluding frames instead left them parked where they were
+  // while the freed chain fragments were laid out from the origin, straight
+  // over the top of them.
+  describe("with a frame", () => {
+    /** A 6-node chain with n2 and n3 framed, both parked overlapping at 0,0. */
+    function framedChain() {
+      const { nodes, edges } = buildGraph(6);
+      const members = new Set(["n2", "n3"]);
+      const framed = [
+        {
+          id: "frame-1",
+          type: "group",
+          position: { x: -50, y: -50 },
+          width: 400,
+          height: 300,
+          data: {},
+        },
+        ...nodes.map((node) =>
+          members.has(node.id)
+            ? { ...node, parentId: "frame-1", position: { x: 0, y: 0 } }
+            : node,
+        ),
+      ] as Node[];
+      return { framed, edges };
+    }
+
+    function frameRect(laidOut: Node[]): Rect {
+      const frame = laidOut.find((node) => node.id === "frame-1");
+      if (frame === undefined) throw new Error("frame missing from layout");
+      return {
+        x: frame.position.x,
+        y: frame.position.y,
+        width: frame.width ?? 0,
+        height: frame.height ?? 0,
+      };
+    }
+
+    function overlaps(a: Rect, b: Rect): boolean {
+      return (
+        a.x < b.x + b.width &&
+        a.x + a.width > b.x &&
+        a.y < b.y + b.height &&
+        a.y + a.height > b.y
+      );
+    }
+
+    it("tidies members inside the frame's own coordinate space", () => {
+      const { framed, edges } = framedChain();
+      const laidOut = autoLayoutRootNodes(framed, edges);
+      const byId = new Map(laidOut.map((node) => [node.id, node]));
+      const n2 = byId.get("n2");
+      const n3 = byId.get("n3");
+
+      // n2 -> n3, so the edge orders them left to right, and neither is left
+      // sitting on top of the other.
+      expect(n2?.position.x).toBeLessThan(n3?.position.x ?? 0);
+      expect(overlaps(rectFor(n2 as Node), rectFor(n3 as Node))).toBe(false);
+      // Still frame-relative: a member laid out in absolute canvas coordinates
+      // would render an unpredictable distance outside its frame.
+      expect(n2?.parentId).toBe("frame-1");
+      expect(n2?.position.x).toBeGreaterThanOrEqual(0);
+      expect(n2?.position.y).toBeGreaterThanOrEqual(0);
+    });
+
+    it("refits the frame around what it holds", () => {
+      const { framed, edges } = framedChain();
+      const laidOut = autoLayoutRootNodes(framed, edges);
+      const rect = frameRect(laidOut);
+
+      // Every member fits, with room to spare on all four sides.
+      for (const member of laidOut.filter((n) => n.parentId === "frame-1")) {
+        expect(member.position.x).toBeGreaterThan(0);
+        expect(member.position.y).toBeGreaterThan(0);
+        expect(member.position.x + NODE_W).toBeLessThan(rect.width);
+        expect(member.position.y + NODE_H).toBeLessThan(rect.height);
+      }
+      // Two 280px nodes side by side no longer fit the original 400px box.
+      expect(rect.width).toBeGreaterThan(400);
+    });
+
+    it("lays the frame out clear of every other node", () => {
+      const { framed, edges } = framedChain();
+      const laidOut = autoLayoutRootNodes(framed, edges);
+      const rect = frameRect(laidOut);
+
+      const colliding = laidOut
+        .filter((node) => node.id !== "frame-1" && node.parentId === undefined)
+        .filter((node) => overlaps(rectFor(node), rect))
+        .map((node) => node.id);
+
+      expect(colliding).toEqual([]);
+    });
+
+    it("keeps the chain's order through the frame", () => {
+      const { framed, edges } = framedChain();
+      const laidOut = autoLayoutRootNodes(framed, edges);
+      const x = (id: string) =>
+        laidOut.find((node) => node.id === id)?.position.x ?? NaN;
+
+      // n1 -> n2 and n3 -> n4 collapse to n1 -> frame -> n4, so the frame has
+      // to sit between them. Dropping those edges is what let the freed
+      // fragments pile up at the origin.
+      expect(x("n1")).toBeLessThan(x("frame-1"));
+      expect(x("frame-1")).toBeLessThan(x("n4"));
+    });
+
+    it("leaves notes where the user put them", () => {
+      const { nodes, edges } = buildGraph(4);
+      const withNote = [
+        ...nodes,
+        { id: "note-1", type: "note", position: { x: 999, y: 999 }, data: {} },
+      ] as Node[];
+
+      const laidOut = autoLayoutRootNodes(withNote, edges);
+      expect(laidOut.find((node) => node.id === "note-1")?.position).toEqual({
+        x: 999,
+        y: 999,
+      });
+    });
+
+    it("grows the frame to cover a note it holds rather than clipping it", () => {
+      const { framed, edges } = framedChain();
+      const withNote = [
+        ...framed,
+        {
+          id: "note-1",
+          type: "note",
+          parentId: "frame-1",
+          position: { x: 40, y: 800 },
+          width: 200,
+          height: 120,
+          data: {},
+        },
+      ] as Node[];
+
+      const laidOut = autoLayoutRootNodes(withNote, edges);
+      const note = laidOut.find((node) => node.id === "note-1");
+
+      expect(note?.position).toEqual({ x: 40, y: 800 });
+      expect(frameRect(laidOut).height).toBeGreaterThan(920);
+    });
   });
 });
diff --git a/app/src/utils/autoLayout.ts b/app/src/utils/autoLayout.ts
index 62fbcced..10cb1092 100644
--- a/app/src/utils/autoLayout.ts
+++ b/app/src/utils/autoLayout.ts
@@ -1,5 +1,6 @@
 import type { Node, Edge } from "@xyflow/react";
 import { dagreLayoutPositions, NODE_FALLBACK_WIDTH, NODE_FALLBACK_HEIGHT } from "@shared/layout/dagreLayout";
+import { FRAME_MIN_HEIGHT, FRAME_MIN_WIDTH, GROUP_PAD } from "./canvasGroups";
 
 export { NODE_FALLBACK_WIDTH, NODE_FALLBACK_HEIGHT };
 
@@ -19,11 +20,7 @@ export function autoLayout<N extends Node, E extends Edge>(
   direction: "LR" | "TB" = "LR",
 ): N[] {
   const positions = dagreLayoutPositions(
-    nodes.map((n) => ({
-      id: n.id,
-      width: n.measured?.width ?? n.width ?? undefined,
-      height: n.measured?.height ?? n.height ?? undefined,
-    })),
+    nodes.map((n) => ({ id: n.id, ...layoutSize(n) })),
     edges.map((e) => ({ source: e.source, target: e.target })),
     direction,
   );
@@ -31,18 +28,106 @@ export function autoLayout<N extends Node, E extends Edge>(
 }
 
 /**
- * Auto-layout, minus canvas-only nodes.
+ * The size a node contributes to a layout.
  *
- * dagre lays out a flat graph; a frame is fixed geometry whose children live in
- * its coordinate space. Handing both to dagre scatters a user's groups and
- * gives framed nodes absolute coordinates inside a relative space — so frames
- * and their members keep their positions. Notes are also intentional placement,
- * so only executable root nodes are re-laid.
+ * Measured size lives on `node.measured` since React Flow v12; reading
+ * `node.width` alone would size every node the app creates at the fallback.
+ */
+function layoutSize<N extends Node>(node: N): { width: number; height: number } {
+  return {
+    width: node.measured?.width ?? node.width ?? NODE_FALLBACK_WIDTH,
+    height: node.measured?.height ?? node.height ?? NODE_FALLBACK_HEIGHT,
+  };
+}
+
+/**
+ * Lay out one frame's members in the frame's own coordinate space, and refit
+ * the frame around the result.
+ *
+ * Returns the nodes it changed, keyed by id — the members at their new
+ * frame-relative positions, plus the resized frame. `measured` is rewritten
+ * alongside `width`/`height` so the outer placement pass sizes the frame by
+ * what it now holds rather than by what React Flow last measured; React Flow
+ * re-measures from the DOM on the next render either way.
+ *
+ * Note children keep their positions (a note is deliberate placement wherever
+ * it sits) but still count towards the frame's new size, so refitting cannot
+ * clip one out of view.
+ */
+function tidyFrame<N extends Node, E extends Edge>(
+  frame: N,
+  children: readonly N[],
+  edges: readonly E[],
+  direction: "LR" | "TB",
+): Map<string, N> {
+  const laidOut = children.filter((child) => child.type !== "note");
+  if (laidOut.length === 0) return new Map();
+
+  const memberIds = new Set(laidOut.map((child) => child.id));
+  const positions = dagreLayoutPositions(
+    laidOut.map((child) => ({ id: child.id, ...layoutSize(child) })),
+    edges.filter((e) => memberIds.has(e.source) && memberIds.has(e.target)),
+    direction,
+  );
+
+  // dagre's origin is arbitrary and can be negative; slide the block so its
+  // top-left corner sits one pad inside the frame.
+  let minX = Infinity;
+  let minY = Infinity;
+  for (const { x, y } of positions.values()) {
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+  }
+  const offsetX = GROUP_PAD - minX;
+  const offsetY = GROUP_PAD - minY;
+
+  const changed = new Map<string, N>();
+  let width = FRAME_MIN_WIDTH;
+  let height = FRAME_MIN_HEIGHT;
+  for (const child of children) {
+    const laid = positions.get(child.id);
+    const position =
+      laid === undefined
+        ? child.position
+        : { x: laid.x + offsetX, y: laid.y + offsetY };
+    const size = layoutSize(child);
+    width = Math.max(width, position.x + size.width + GROUP_PAD);
+    height = Math.max(height, position.y + size.height + GROUP_PAD);
+    if (laid !== undefined) changed.set(child.id, { ...child, position });
+  }
+  changed.set(frame.id, {
+    ...frame,
+    width,
+    height,
+    measured: { width, height },
+  });
+  return changed;
+}
+
+function frameChildren<N extends Node>(nodes: readonly N[]): Map<string, N[]> {
+  const childrenByFrame = new Map<string, N[]>();
+  for (const node of nodes) {
+    if (node.parentId === undefined) continue;
+    const siblings = childrenByFrame.get(node.parentId);
+    if (siblings === undefined) childrenByFrame.set(node.parentId, [node]);
+    else siblings.push(node);
+  }
+  return childrenByFrame;
+}
+
+/**
+ * Auto-layout that respects frames.
+ *
+ * Two passes, because dagre lays out a flat graph and a framed node's position
+ * is relative to its frame:
  *
- * ponytail: the richer alternative is a layout pass per frame followed by a
- * placement pass for the frames themselves. Worth it if anyone reaches for
- * Auto-layout on a framed graph often enough to complain that the frames
- * stayed put.
+ * 1. Each frame's members are laid out in the frame's coordinate space, using
+ *    only the edges between them, and the frame is refitted around them.
+ * 2. Frames go into the outer graph as single boxes at their refitted size,
+ *    and every edge touching a member is redirected to its frame so the chain
+ *    still constrains where the frame lands.
+ *
+ * Notes are intentional placement and never move.
  */
 export function autoLayoutRootNodes<N extends Node, E extends Edge>(
   nodes: N[],
@@ -50,22 +135,55 @@ export function autoLayoutRootNodes<N extends Node, E extends Edge>(
   direction: "LR" | "TB" = "LR",
 ): N[] {
   const movable = nodes.filter(
-    (node) => node.parentId === undefined && node.type !== "group" && node.type !== "note",
+    (node) => node.parentId === undefined && node.type !== "note",
   );
   if (movable.length === nodes.length) return autoLayout(nodes, edges, direction);
 
+  const byId = new Map(nodes.map((node) => [node.id, node]));
+  const childrenByFrame = frameChildren(nodes);
+
+  const tidied = new Map<string, N>();
+  for (const [frameId, children] of childrenByFrame) {
+    const frame = byId.get(frameId);
+    // A dangling parentId is `reconcileFrames`' job, not this one's.
+    if (frame === undefined) continue;
+    for (const [id, node] of tidyFrame(frame, children, edges, direction)) {
+      tidied.set(id, node);
+    }
+  }
+
   const movableIds = new Set(movable.map((node) => node.id));
-  const laidOut = autoLayout(
-    movable,
-    // An edge into a frame's member would make dagre invent the node it cannot
-    // see, and lay the graph out around a phantom.
-    edges.filter((e) => movableIds.has(e.source) && movableIds.has(e.target)),
+  // A framed node has no box of its own in the outer graph — its frame stands
+  // in for it. Anything else off that graph (a note) drops the edge, rather
+  // than have dagre invent the node it cannot see and lay the graph out around
+  // a phantom.
+  const boxFor = (id: string): string | undefined => {
+    const owner = byId.get(id)?.parentId ?? id;
+    return movableIds.has(owner) ? owner : undefined;
+  };
+
+  const collapsed: { source: string; target: string }[] = [];
+  for (const edge of edges) {
+    const source = boxFor(edge.source);
+    const target = boxFor(edge.target);
+    // Two members of the same frame collapse to a self-edge, which says
+    // nothing about where the frame goes.
+    if (source !== undefined && target !== undefined && source !== target) {
+      collapsed.push({ source, target });
+    }
+  }
+
+  const positions = dagreLayoutPositions(
+    movable.map((node) => {
+      const refitted = tidied.get(node.id) ?? node;
+      return { id: node.id, ...layoutSize(refitted) };
+    }),
+    collapsed,
     direction,
   );
-  const positions = new Map<string, N["position"]>();
-  for (const node of laidOut) positions.set(node.id, node.position);
   return nodes.map((node) => {
+    const tidiedNode = tidied.get(node.id) ?? node;
     const position = positions.get(node.id);
-    return position === undefined ? node : { ...node, position };
+    return position === undefined ? tidiedNode : { ...tidiedNode, position };
   });
 }
diff --git a/app/src/utils/canvasGroups.test.ts b/app/src/utils/canvasGroups.test.ts
index 9f331a52..b2e78565 100644
--- a/app/src/utils/canvasGroups.test.ts
+++ b/app/src/utils/canvasGroups.test.ts
@@ -1,6 +1,8 @@
 import { describe, expect, it } from "vitest";
 import type { CanvasNode } from "../types/CanvasNode";
 import {
+  adoptIntoFrame,
+  frameContainingNode,
   GROUP_PAD,
   groupSelection,
   reconcileFrames,
@@ -137,4 +139,29 @@ describe("canvasGroups", () => {
     expect(withAbsolutePositions(graph)).toBe(graph);
     expect(sortFramesFirst(graph).map((n) => n.id)).toEqual(["a", "b", "c"]);
   });
+
+  it("adopts by centre and frees a node without moving it on screen", () => {
+    const { nodes: grouped } = group(graph, ["a", "b"]);
+    const candidate = node("d", 300, 180);
+    const withCandidate = [...grouped, candidate];
+
+    expect(frameContainingNode(withCandidate, "d")).toBe("frame-1");
+    const adopted = adoptIntoFrame(withCandidate, "d", "frame-1");
+    expect(withAbsolutePositions(adopted).find((item) => item.id === "d")?.position)
+      .toEqual(candidate.position);
+
+    const frame = adopted[0]!;
+    const draggedOut = adopted.map((item) =>
+      item.id === "d"
+        ? { ...item, position: { x: 700 - frame.position.x, y: 180 - frame.position.y } }
+        : item,
+    );
+    expect(frameContainingNode(draggedOut, "d")).toBeNull();
+
+    const freed = adoptIntoFrame(draggedOut, "d", null);
+    expect(freed.find((item) => item.id === "d")).toMatchObject({
+      position: { x: 700, y: 180 },
+    });
+    expect(freed.find((item) => item.id === "d")).not.toHaveProperty("parentId");
+  });
 });
diff --git a/app/src/utils/canvasGroups.ts b/app/src/utils/canvasGroups.ts
index 146f70cf..ad33875b 100644
--- a/app/src/utils/canvasGroups.ts
+++ b/app/src/utils/canvasGroups.ts
@@ -9,12 +9,21 @@ import type { GroupOutcome } from "../types/GroupOutcome";
 export { FRAME_NODE_TYPE, isFrameNode };
 
 /** Breathing room between the selection's bounding box and the frame edge. */
+// fallow-ignore-next-line code-duplication -- frame geometry constants share syntax, not behavior, with unrelated camera tuning constants.
 export const GROUP_PAD = 28;
 
 /** A frame with no size yet — a paste, or a hand-written workflow JSON. */
 export const FRAME_FALLBACK_WIDTH = 320;
 export const FRAME_FALLBACK_HEIGHT = 220;
 
+/**
+ * The smallest a frame may get. `GroupNode`'s resizer enforces it on a drag;
+ * auto-layout's refit honours the same floor, so a frame holding one small
+ * node does not shrink below a grabbable size.
+ */
+export const FRAME_MIN_WIDTH = 160;
+export const FRAME_MIN_HEIGHT = 120;
+
 function nodeSize(node: CanvasNode): { width: number; height: number } {
   return {
     width: node.measured?.width ?? node.width ?? NODE_FALLBACK_WIDTH,
@@ -63,6 +72,77 @@ function freedFromFrame(
   return freed;
 }
 
+/** The frame containing a node's centre, if one owns that point. */
+export function frameContainingNode(
+  nodes: readonly CanvasNode[],
+  nodeId: string,
+): string | null {
+  const byId = nodesById(nodes);
+  const node = byId.get(nodeId);
+  if (node === undefined || isFrameNode(node)) return null;
+
+  const position = absoluteNodePosition(node, byId);
+  const size = nodeSize(node);
+  const center = {
+    x: position.x + size.width / 2,
+    y: position.y + size.height / 2,
+  };
+
+  for (const frame of nodes) {
+    if (!isFrameNode(frame) || frame.id === node.id) continue;
+    const frameSize = nodeSize(frame);
+    if (
+      center.x >= frame.position.x &&
+      center.x <= frame.position.x + frameSize.width &&
+      center.y >= frame.position.y &&
+      center.y <= frame.position.y + frameSize.height
+    ) {
+      return frame.id;
+    }
+  }
+  return null;
+}
+
+/**
+ * Move a node into a frame, or set it free when `frameId` is null.
+ *
+ * Both cases preserve the node's absolute position. Keeping this transform pure
+ * means palette drops and node drags cannot disagree about coordinate space.
+ */
+export function adoptIntoFrame(
+  nodes: readonly CanvasNode[],
+  nodeId: string,
+  frameId: string | null,
+): CanvasNode[] {
+  const byId = nodesById(nodes);
+  const node = byId.get(nodeId);
+  const frame = frameId === null ? undefined : byId.get(frameId);
+  if (
+    node === undefined ||
+    isFrameNode(node) ||
+    (frameId !== null && frame === undefined) ||
+    (frame !== undefined && !isFrameNode(frame))
+  ) {
+    return sortFramesFirst(nodes);
+  }
+
+  const position = absoluteNodePosition(node, byId);
+  const adopted = nodes.map((current) => {
+    if (current.id !== nodeId) return current;
+    if (frame === undefined) return freedFromFrame(current, position);
+    return {
+      ...current,
+      parentId: frame.id,
+      extent: "parent" as const,
+      position: {
+        x: position.x - frame.position.x,
+        y: position.y - frame.position.y,
+      },
+    };
+  });
+  return sortFramesFirst(adopted);
+}
+
 export function nodesById(
   nodes: readonly CanvasNode[],
 ): Map<string, CanvasNode> {
diff --git a/app/src/utils/canvasInteraction.test.ts b/app/src/utils/canvasInteraction.test.ts
index db11aa97..f5988722 100644
--- a/app/src/utils/canvasInteraction.test.ts
+++ b/app/src/utils/canvasInteraction.test.ts
@@ -8,6 +8,7 @@ const base: CanvasPrefs = {
   snapToGrid: false,
   gridSize: 24,
   wheelZoom: true,
+  tipsEnabled: true,
 };
 
 describe("canvasInteractionProps", () => {
diff --git a/app/src/utils/focusModeOrder.test.ts b/app/src/utils/focusModeOrder.test.ts
index 9bdeee67..ed07a312 100644
--- a/app/src/utils/focusModeOrder.test.ts
+++ b/app/src/utils/focusModeOrder.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 import type { Edge, Node } from "@xyflow/react";
-import { adjacentFocusModeNode, focusModeOrder } from "./focusModeOrder";
+import { adjacentFocusModeNode, focusModeOrder, isEditableNode } from "./focusModeOrder";
 import type { WorkflowCanvasNodeData } from "../types/WorkflowCanvasNodeData";
 
 function node(id: string, executionTimestamp?: number): Node<WorkflowCanvasNodeData> {
@@ -34,3 +34,14 @@ describe("focusModeOrder", () => {
     expect(focusModeOrder(nodes, diamondEdges)).toEqual(["b", "c", "a"]);
   });
 });
+
+describe("isEditableNode", () => {
+  // Frames and notes are edited in place on the canvas; treating them as steps
+  // is what opened an empty node-details dialog on a double-click.
+  it("keeps canvas objects and the terminals out of the details editor", () => {
+    expect(isEditableNode(node("a"))).toBe(true);
+    for (const type of ["group", "note", "start", "end"]) {
+      expect(isEditableNode({ ...node("a"), type })).toBe(false);
+    }
+  });
+});
diff --git a/app/src/utils/focusModeOrder.ts b/app/src/utils/focusModeOrder.ts
index fbac49b8..c1a7dd5c 100644
--- a/app/src/utils/focusModeOrder.ts
+++ b/app/src/utils/focusModeOrder.ts
@@ -4,7 +4,15 @@ import type { WorkflowCanvasNodeData } from "../types/WorkflowCanvasNodeData";
 
 type FocusableNode = Node<WorkflowCanvasNodeData>;
 
-function isFocusableNode(node: FocusableNode): boolean {
+/**
+ * Whether a node has a details editor at all.
+ *
+ * Frames and notes are canvas objects, not steps: they are edited in place on
+ * the canvas. Start and end carry nothing to edit. Focus mode and the
+ * double-click editor share this one definition so a node cannot be reachable
+ * through one and not the other.
+ */
+export function isEditableNode(node: FocusableNode): boolean {
   return node.type !== "group" && node.type !== "note" && node.type !== "start" && node.type !== "end";
 }
 
@@ -57,7 +65,7 @@ export function focusModeOrder(
   nodes: readonly FocusableNode[],
   edges: readonly Edge[],
 ): string[] {
-  const focusableNodes = nodes.filter(isFocusableNode);
+  const focusableNodes = nodes.filter(isEditableNode);
   const topologicalOrder = topologicalNodeOrder(focusableNodes, edges);
   const executedIds = focusableNodes
     .filter((node) => typeof node.data.executionTimestamp === "number")