feat: add title and description for feature flags

Author: bnussbau

config/toggle.php

@@ -75,7 +75,23 @@
 
     'flags' => [
         'mcp' => env('TOGGLE_MCP', false),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Lab Experiments
+    |--------------------------------------------------------------------------
+    |
+    | Display metadata for experimental feature toggles shown on the Lab page.
+    | Flag values must remain booleans in "flags" above for the toggle package.
+    |
+    */
 
+    'experiments' => [
+        'mcp' => [
+            'title' => 'MCP Server',
+            'description' => 'Expose a Model Context Protocol server so AI tools can list, create, update, and render your recipes. Requires an MCP API token.',
+        ],
     ],
 
     /*

resources/views/pages/settings/lab.blade.php

@@ -6,12 +6,23 @@
 new class extends Component
 {
     /**
-     * @return array<string, bool>
+     * @return array{toggles: Illuminate\Support\Collection<int, array{name: string, title: string, description: string|null, active: bool}>|null}
      */
     public function with(): array
     {
         return [
-            'toggles' => auth()->user()->id === 1 ? Toggle::all() : null,
+            'toggles' => auth()->user()->id === 1
+                ? collect(Toggle::all())->map(function (bool $active, string $name): array {
+                    $experiment = config("toggle.experiments.{$name}", []);
+
+                    return [
+                        'name' => $name,
+                        'title' => $experiment['title'] ?? $name,
+                        'description' => $experiment['description'] ?? null,
+                        'active' => $active,
+                    ];
+                })->values()
+                : null,
         ];
     }
 
@@ -52,12 +63,15 @@ public function toggle(string $name, bool $active): void
                         <flux:separator />
 
                         <div class="space-y-4">
-                            @forelse ($toggles as $name => $active)
-                                <flux:field variant="inline">
-                                    <flux:label class="flex-1">{{ $name }}</flux:label>
+                            @forelse ($toggles as $toggle)
+                                <flux:field variant="inline" wire:key="{{ $toggle['name'] }}">
+                                    <flux:label class="flex-1">{{ $toggle['title'] }}</flux:label>
+                                    @if ($toggle['description'])
+                                        <flux:description>{{ $toggle['description'] }}</flux:description>
+                                    @endif
                                     <flux:switch
-                                        :checked="$active"
-                                        wire:change="toggle('{{ $name }}', $event.target.checked)"
+                                        :checked="$toggle['active']"
+                                        wire:change="toggle('{{ $toggle['name'] }}', $event.target.checked)"
                                     />
                                 </flux:field>
                             @empty

resources/views/pages/settings/layout.blade.php

@@ -1,30 +1,18 @@
 <div class="flex items-start max-md:flex-col">
     <div class="me-10 w-full pb-4 md:w-[220px]">
         <flux:navlist aria-label="{{ __('Settings') }}">
-            <flux:navlist.item
-                :href="route('settings.preferences')"
-                wire:navigate
-            >
+            <flux:navlist.item :href="route('settings.preferences')" wire:navigate>
                 {{ __('Preferences') }}</flux:navlist.item>
             <flux:navlist.item :href="route('appearance.edit')" wire:navigate>{{ __('Appearance') }}</flux:navlist.item>
             <flux:navlist.item :href="route('profile.edit')" wire:navigate>{{ __('Profile') }}</flux:navlist.item>
             @if (auth()?->user()?->oidc_sub === null)
-                <flux:navlist.item
-                    :href="route('security.edit')"
-                    wire:navigate
-                >
+                <flux:navlist.item :href="route('security.edit')" wire:navigate>
                     {{ __('Password & 2FA') }}</flux:navlist.item>
             @endif
-            <flux:navlist.item
-                :href="route('settings.api-tokens')"
-                wire:navigate
-            >
+            <flux:navlist.item :href="route('settings.api-tokens')" wire:navigate>
                 {{ __('API Tokens') }}</flux:navlist.item>
             @if (config('app.version'))
-                <flux:navlist.item
-                    :href="route('settings.update')"
-                    wire:navigate
-                >
+                <flux:navlist.item :href="route('settings.update')" wire:navigate>
                     {{ __('Updates') }}</flux:navlist.item>
             @endif
 
@@ -33,10 +21,7 @@
             </flux:navlist.group>
 
             <flux:navlist.group :heading="__('Support')" class="mt-2">
-                <flux:navlist.item
-                    :href="route('settings.support')"
-                    wire:navigate
-                >
+                <flux:navlist.item :href="route('settings.support')" wire:navigate>
                     {{ __('Support & Referral') }}</flux:navlist.item>
             </flux:navlist.group>
         </flux:navlist>

tests/Feature/Settings/LabTest.php

@@ -37,3 +37,11 @@
 
     expect(Toggle::active('test-feature'))->toBeFalse();
 });
+
+test('lab settings page shows mcp title and description from config', function (): void {
+    Toggle::enable('mcp');
+
+    Livewire::test('pages::settings.lab')
+        ->assertSee('MCP')
+        ->assertSee('Expose a Model Context Protocol server so AI tools can list, create, update, and render your recipes. Requires an MCP API token.');
+});