feat: fix settings header overlap, redesign pattern editor

- Fix SettingsPanel and PatternEditor headers with pt-12 to clear
  the title bar overlay zone
- Replace mode dropdown with visual mode selector cards showing
  icon, description, and inline flow diagrams for each pattern
- Add flow pill diagrams (Single, Sequential, Concurrent, Handoff,
  Group Chat, Magentic) illustrating how agents interact
- Add reasoning effort selector (Low/Medium/High/Maximum) to
  agent cards — previously not exposed in the editor
- Improve agent cards with numbered badges and 3-column layout
  for name, model, and reasoning fields

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/renderer/components/SettingsPanel.tsx

@@ -54,8 +54,8 @@ export function SettingsPanel({
 
   return (
     <div className="fixed inset-0 z-50 flex flex-col bg-[var(--color-surface-0)]">
-      {/* Header */}
-      <div className="flex items-center justify-between border-b border-[var(--color-border)] px-6 py-3">
+      {/* Header — top padding clears the title bar overlay zone */}
+      <div className="flex items-center justify-between border-b border-[var(--color-border)] px-6 pb-3 pt-12">
         <h2 className="text-sm font-semibold text-zinc-100">Settings</h2>
         <button
           className="flex size-8 items-center justify-center rounded-lg text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"