refactor: group settings nav into AI Provider and Orchestration sections

Adds section headers to the left sidebar navigation so future
settings items slot naturally under the right category.

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

src/renderer/components/SettingsPanel.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ChevronLeft, ChevronRight, Cpu, Layers, Plus } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Cpu, Layers, Plus, Workflow } from 'lucide-react';
 
 import type { ModelDefinition } from '@shared/domain/models';
 import type { PatternDefinition } from '@shared/domain/pattern';
@@ -27,9 +27,24 @@ interface NavItem {
   icon: React.ReactNode;
 }
 
-const navItems: NavItem[] = [
+interface NavGroup {
-  { id: 'connection', label: 'Connection', icon: <Cpu className="size-4" /> },
+  label: string;
-  { id: 'patterns', label: 'Patterns', icon: <Layers className="size-4" /> },
+  items: NavItem[];
+}
+
+const navGroups: NavGroup[] = [
+  {
+    label: 'AI Provider',
+    items: [
+      { id: 'connection', label: 'Connection', icon: <Cpu className="size-3.5" /> },
+    ],
+  },
+  {
+    label: 'Orchestration',
+    items: [
+      { id: 'patterns', label: 'Patterns', icon: <Workflow className="size-3.5" /> },
+    ],
+  },
 ];
 
 function modeBadgeClasses(pattern: PatternDefinition) {
@@ -97,8 +112,14 @@ export function SettingsPanel({
       <div className="flex min-h-0 flex-1">
         {/* Left navigation */}
         <nav className="w-52 shrink-0 border-r border-[var(--color-border)] bg-[var(--color-surface-1)] p-3">
+          <div className="space-y-4">
+            {navGroups.map((group) => (
+              <div key={group.label}>
+                <span className="mb-1 block px-3 text-[10px] font-semibold uppercase tracking-wider text-zinc-600">
+                  {group.label}
+                </span>
                 <div className="space-y-0.5">
-            {navItems.map((item) => {
+                  {group.items.map((item) => {
                     const isActive = item.id === activeSection;
                     return (
                       <button
@@ -117,6 +138,9 @@ export function SettingsPanel({
                     );
                   })}
                 </div>
+              </div>
+            ))}
+          </div>
         </nav>
 
         {/* Content area */}