feat(workshop): reworked phase flow — agent makeup, sidebar advance, responsive

Rebuild the participant flow around the agent itself:
- Phases: Team registration (+ agent name) -> Meet your agent -> Skills &
  Policies (edit the agent's makeup) -> UnoQ Dashboard (React Flow
  configurator) -> Submit. Swapped/renamed the two module pages
  (Module1/2 -> ModuleDashboard/ModuleMakeup).
- Agent name captured at registration, shown on the dashboard and used in
  the chat greeting (live, not hard-coded), pushed to the board.
- One shared conversation across pages (AgentChatContext); Clawd the crab
  animates the LED matrix and reacts to chat status.
- MAKEUP slide-outs: view, edit (wrench), or AI-refine (wand) the agent's
  personality files and save them back to the board.
- Advance button moved into the sidebar for every phase (ProceedContext).
- Dropped the ADD-doc build + submission gate; Submit just records the entry.
- Responsive pass: sidebar auto-collapses below lg, fluid padding, React
  Flow pan/zoom/fit + Controls, architecture panel becomes a mobile overlay.
- Add @xyflow/react for the configurator.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

src/pages/ModuleMakeup.tsx

@@ -1,65 +1,44 @@
-import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { AddLayerForm } from '@/components/AddLayerForm'
-import { PanelHeading, ProceedButton } from '@/components/cockpit/PanelChrome'
+import { PanelHeading } from '@/components/cockpit/PanelChrome'
+import { CockpitRail } from '@/components/cockpit/CockpitRail'
+import { ArchitectureProvider, ArchitecturePanel } from '@/components/cockpit/AgentArchitecture'
+import { useSetProceed } from '@/lib/ProceedContext'
 import { useSession } from '@/store/session'
 
-const L2_PREFILL =
-  'i2c_scan to enumerate both ADXL355Z; matrix_text and matrix_count for on-board readouts; adxl355_stream for live vibration.'
-const L3_PREFILL =
-  'Report only on exception; escalate ambiguous or high-consequence calls to the cloud model; never suppress a stale-sensor alarm.'
-
-export function Module2() {
+/**
+ * Skills & Policies — where you change up the agent's makeup after meeting it.
+ * The dashboard sits on the left with its MAKEUP slide-outs: open a card to
+ * inspect, edit (🔧), or AI-refine (🪄) the agent's persona, tooling, and memory,
+ * then save it back to the board.
+ */
+export function ModuleMakeup() {
   const navigate = useNavigate()
-  const l2 = useSession((s) => s.add.L2)
-  const l3 = useSession((s) => s.add.L3)
-  const tried = useSession((s) => s.tried)
-  const setAddLayer = useSession((s) => s.setAddLayer)
+  const connected = useSession((s) => s.device.connected)
   const completePhase = useSession((s) => s.completePhase)
 
-  const ready = l2.trim().length > 0 && l3.trim().length > 0
-
-  // If the team ran the three agent prompts in "Meet your agent", seed Layers 2 & 3
-  // with a starting draft (only if untouched).
-  useEffect(() => {
-    if (tried < 3) return
-    if (!useSession.getState().add.L2.trim()) setAddLayer('L2', L2_PREFILL)
-    if (!useSession.getState().add.L3.trim()) setAddLayer('L3', L3_PREFILL)
-  }, [tried, setAddLayer])
+  const ready = connected
 
   const onProceed = () => {
-    completePhase('m2')
-    navigate('/workshop/add')
+    completePhase('m1')
+    navigate('/workshop/module2')
   }
+  useSetProceed({ label: 'Proceed to Module 2 →', disabled: !ready, onClick: onProceed })
 
   return (
     <section>
       <PanelHeading
-        title="Module 2 · Skills & policies"
-        intro="Capture what your agent can do and the policy that governs it — Layers 2 and 3 of your Agent Design Document."
-        size={46}
+        title="Skills & Policies"
+        intro="Change up your agent's makeup — open a MAKEUP card in the dashboard to inspect its persona, tooling, and memory, then edit or refine it and save it back to the board."
+        size={34}
       />
 
-      <div className="mt-9 space-y-5">
-        <AddLayerForm
-          layer="L2"
-          title="ADD · Layer 2 — Skills"
-          description="What skills can the agent invoke to act on its domain?"
-          placeholder="Flash a sketch to the MCU; scroll a message; drive the damper; sample the IMU."
-        />
-        <AddLayerForm
-          layer="L3"
-          title="ADD · Layer 3 — Policies & failure"
-          description="The actuation gate — and what happens when things break. A fail-safe must never quietly report 'normal'."
-          placeholder="Report only on exception; escalate ambiguous calls to the cloud; never suppress a stale-sensor alarm."
-        />
-      </div>
-
-      <div className="mt-6 flex justify-end">
-        <ProceedButton disabled={!ready} onClick={onProceed}>
-          Proceed to Module 3 →
-        </ProceedButton>
-      </div>
+      {/* the full dashboard on the left, slide-outs intact */}
+      <ArchitectureProvider>
+        <div className="relative mt-8 w-full max-w-[620px]">
+          <ArchitecturePanel />
+          <CockpitRail variant="agent" />
+        </div>
+      </ArchitectureProvider>
     </section>
   )
 }