refactor(workspaces): Phase 3 — Routing + Scope sections, badge wiring

Split BindingForm into RoutingFields (space + feature sets) and
ScopeFields (machine + workspace root). Replace the single Mapping
collapsible with Routing (default open) and Scope (collapsed, ref.expand).
Wire header machine badge to expand Scope. Move create-from-live icon
appearance autosave to the panel. Add CollapsibleSectionRef.expand().

Autonomous decisions:
- Added forwardRef/useImperativeHandle to CollapsibleSection in
  WorkspacesPage.tsx (required for scopeSectionRef.expand(); not in
  the phase file list but unavoidable without duplicating the component)
- Routing section uses Route icon; Scope uses Monitor
- Edit-mode routing subtitle reflects live form state (spaceId/fsIds),
  not the saved binding snapshot
- Removed BindingForm entirely; create-mode submit stays in ScopeFields

Signed-off-by: crimsonsunset <jsangio1@gmail.com>

Author: crimsonsunset

apps/desktop/src/features/workspaces/WorkspacesPage.tsx

@@ -1,6 +1,8 @@
 import {
+  forwardRef,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useMemo,
   useRef,
   useState,
@@ -1138,31 +1140,46 @@ const SECTION_TONES: Record<SectionTone, SectionToneSpec> = {
   },
 };
 
-export function CollapsibleSection({
-  icon,
-  tone = 'primary',
-  title,
-  subtitle,
-  defaultOpen = true,
-  badge,
-  headerExtra,
-  testId,
-  children,
-}: {
-  icon: React.ReactNode;
-  tone?: SectionTone;
-  title: string;
-  subtitle?: React.ReactNode;
-  defaultOpen?: boolean;
-  badge?: number;
-  /** Small element rendered next to the title (e.g. save status). */
-  headerExtra?: React.ReactNode;
-  testId?: string;
-  children: React.ReactNode;
-}) {
+/** Imperative handle for programmatically expanding a collapsible section. */
+export type CollapsibleSectionRef = {
+  expand: () => void;
+};
+
+export const CollapsibleSection = forwardRef<
+  CollapsibleSectionRef,
+  {
+    icon: React.ReactNode;
+    tone?: SectionTone;
+    title: string;
+    subtitle?: React.ReactNode;
+    defaultOpen?: boolean;
+    badge?: number;
+    /** Small element rendered next to the title (e.g. save status). */
+    headerExtra?: React.ReactNode;
+    testId?: string;
+    children: React.ReactNode;
+  }
+>(function CollapsibleSection(
+  {
+    icon,
+    tone = 'primary',
+    title,
+    subtitle,
+    defaultOpen = true,
+    badge,
+    headerExtra,
+    testId,
+    children,
+  },
+  ref,
+) {
   const [open, setOpen] = useState(defaultOpen);
   const toneSpec = SECTION_TONES[tone] ?? SECTION_TONES.primary;
 
+  useImperativeHandle(ref, () => ({
+    expand: () => setOpen(true),
+  }));
+
   return (
     <div
       className="bg-[rgb(var(--background))] rounded-xl border-2 border-[rgb(var(--border))] overflow-hidden transition-all"
@@ -1228,7 +1245,7 @@ export function CollapsibleSection({
       )}
     </div>
   );
-}
+});
 
 // ---------------------------------------------------------------------------
 // Effective features — what tools / prompts / resources this folder sees