Omar SobhandClaude Opus 4.8
05207ba986
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]>
45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import { useNavigate } from 'react-router-dom'
|
|
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'
|
|
|
|
/**
|
|
* 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 connected = useSession((s) => s.device.connected)
|
|
const completePhase = useSession((s) => s.completePhase)
|
|
|
|
const ready = connected
|
|
|
|
const onProceed = () => {
|
|
completePhase('m1')
|
|
navigate('/workshop/module2')
|
|
}
|
|
useSetProceed({ label: 'Proceed to Module 2 →', disabled: !ready, onClick: onProceed })
|
|
|
|
return (
|
|
<section>
|
|
<PanelHeading
|
|
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}
|
|
/>
|
|
|
|
{/* 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>
|
|
)
|
|
}
|