@marimo-team/islands 0.25.3-dev21 → 0.25.3-dev211

package/src/components/app-config/user-config-form.tsx

@@ -23,7 +23,6 @@ import {
   Form,
   FormControl,
   FormDescription,
-  FormField,
   FormItem,
   FormLabel,
   FormMessage,
@@ -37,6 +36,7 @@ import { capabilitiesAtom } from "@/core/config/capabilities";
 import { mergeConfig, useUserConfig } from "@/core/config/config";
 import {
   PackageManagerNames,
+  TYPE_INFERENCE_MODES,
   type UserConfig,
   UserConfigSchema,
 } from "@/core/config/config-schema";
@@ -403,6 +403,40 @@ export const UserConfigForm: React.FC = () => {
                   </div>
                 )}
               />
+              {!isWasmRuntime && (
+                <OverriddenFormField
+                  control={form.control}
+                  name="formatting.infer_types"
+                  render={({ field, override }) => (
+                    <div className="flex flex-col space-y-1">
+                      <FormItem className={formItemClasses}>
+                        <FormLabel>Infer types on save</FormLabel>
+                        <FormControl>
+                          <NativeSelect
+                            data-testid="infer-types-select"
+                            onChange={(e) => field.onChange(e.target.value)}
+                            value={override.value}
+                            disabled={field.disabled || override.isOverridden}
+                            className="inline-flex mr-2"
+                          >
+                            {TYPE_INFERENCE_MODES.map((option) => (
+                              <option value={option} key={option}>
+                                {option}
+                              </option>
+                            ))}
+                          </NativeSelect>
+                        </FormControl>
+                        <FormMessage />
+                        <IsOverridden override={override} />
+                      </FormItem>
+                      <FormDescription>
+                        Add inferred type annotations to cell signatures when
+                        saving.
+                      </FormDescription>
+                    </div>
+                  )}
+                />
+              )}
             </SettingGroup>
             <SettingGroup title="Autocomplete">
               <OverriddenFormField
@@ -1258,61 +1292,6 @@ export const UserConfigForm: React.FC = () => {
               notebook to take effect.
             </p>
 
-            <FormField
-              control={form.control}
-              name="experimental.rtc_v2"
-              render={({ field }) => (
-                <div className="flex flex-col gap-y-1">
-                  <FormItem className={formItemClasses}>
-                    <FormLabel className="font-normal">
-                      Real-Time Collaboration
-                    </FormLabel>
-                    <FormControl>
-                      <Checkbox
-                        data-testid="rtc-checkbox"
-                        checked={field.value === true}
-                        onCheckedChange={field.onChange}
-                      />
-                    </FormControl>
-                  </FormItem>
-
-                  <FormDescription>
-                    Enable experimental real-time collaboration. This change
-                    requires a page refresh to take effect.
-                  </FormDescription>
-                </div>
-              )}
-            />
-            <OverriddenFormField
-              control={form.control}
-              name="experimental.external_agents"
-              render={({ field, override }) => (
-                <div className="flex flex-col gap-y-1">
-                  <FormItem className={formItemClasses}>
-                    <FormLabel className="font-normal">
-                      External Agents
-                    </FormLabel>
-                    <FormControl>
-                      <Checkbox
-                        data-testid="external-agents-checkbox"
-                        checked={override.value === true}
-                        disabled={override.isOverridden}
-                        onCheckedChange={field.onChange}
-                      />
-                    </FormControl>
-                  </FormItem>
-                  <IsOverridden override={override} />
-                  <FormDescription>
-                    Enable experimental external agents such as Claude Code and
-                    Codex. Learn more in the{" "}
-                    <ExternalLink href="https://docs.marimo.io/guides/editor_features/agents/">
-                      docs
-                    </ExternalLink>
-                    .
-                  </FormDescription>
-                </div>
-              )}
-            />
             <OverriddenFormField
               control={form.control}
               name="experimental.debugger"

package/src/components/chat/__tests__/message-queue.test.tsx

@@ -77,6 +77,23 @@ describe("useMessageQueue", () => {
     expect(result.current.messages).toEqual([]);
   });
 
+  it("preserves multiple enqueues and flushes before React renders", () => {
+    const { result } = renderHook(() => useMessageQueue());
+    const send = vi.fn();
+
+    act(() => {
+      result.current.enqueue([textPart("first")]);
+      result.current.enqueue([textPart("second")]);
+      result.current.flushNext(send);
+      result.current.flushNext(send);
+    });
+
+    expect(send).toHaveBeenNthCalledWith(1, [textPart("first")]);
+    expect(send).toHaveBeenNthCalledWith(2, [textPart("second")]);
+    expect(result.current.messages).toEqual([]);
+    expect(result.current.hasQueuedRef.current).toBe(false);
+  });
+
   it("flushNext on an empty queue is a no-op", () => {
     const { result } = renderHook(() => useMessageQueue());
     const send = vi.fn();

package/src/components/chat/__tests__/notebook-access-selector.test.tsx

@@ -0,0 +1,64 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { CopilotMode } from "@/core/config/config-schema";
+import { NotebookAccessSelector } from "../notebook-access-selector";
+
+Element.prototype.scrollIntoView = vi.fn();
+
+describe("NotebookAccessSelector", () => {
+  it("shows legacy Manual as Read only and offers exactly three levels", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <NotebookAccessSelector value="manual" onValueChange={onValueChange} />,
+    );
+
+    fireEvent.keyDown(
+      screen.getByRole("combobox", { name: "Notebook access: Read only" }),
+      { key: "ArrowDown" },
+    );
+    const options = await screen.findAllByRole("option");
+    expect(options.map((option) => option.getAttribute("data-state"))).toEqual([
+      "checked",
+      "unchecked",
+      "unchecked",
+    ]);
+    expect(options.map((option) => option.textContent)).toEqual([
+      "Read onlyRead notebook code, outputs, and variable previews.",
+      "Suggest editsRead the notebook and propose cell changes for review.",
+      "Full accessRead, edit, and run cells, with Python scratchpad access.",
+    ]);
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it.each<{ mode: CopilotMode; label: string }>([
+    { mode: "ask", label: "Read only" },
+    { mode: "agent", label: "Suggest edits" },
+    { mode: "code_mode", label: "Full access" },
+  ])("maps $label to the existing $mode setting", async ({ mode, label }) => {
+    const onValueChange = vi.fn();
+    const { rerender } = render(
+      <NotebookAccessSelector value={mode} onValueChange={onValueChange} />,
+    );
+
+    expect(
+      screen.getByRole("combobox", { name: `Notebook access: ${label}` }),
+    ).toHaveTextContent(label);
+    expect(onValueChange).not.toHaveBeenCalled();
+
+    rerender(
+      <NotebookAccessSelector
+        value={mode === "ask" ? "agent" : "ask"}
+        onValueChange={onValueChange}
+      />,
+    );
+    fireEvent.keyDown(screen.getByRole("combobox"), { key: "ArrowDown" });
+    const option = await screen.findByRole("option", {
+      name: new RegExp(`^${label} `),
+    });
+    fireEvent.keyDown(option, { key: "Enter" });
+
+    expect(onValueChange).toHaveBeenCalledExactlyOnceWith(mode);
+  });
+});

package/src/components/chat/acp/__tests__/session-tabs.test.tsx

@@ -0,0 +1,43 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { expect, it, vi } from "vitest";
+import { SessionTabs } from "../session-tabs";
+import { addSession, agentSessionStateAtom } from "../state";
+
+vi.mock("../agent-selector", () => ({ AgentSelector: () => null }));
+
+it("keeps session selection and close as separate named buttons", () => {
+  const first = addSession(
+    { sessions: [], activeTabId: null },
+    { agentId: "claude", firstMessage: "First" },
+  ).sessions[0];
+  const second = addSession(
+    { sessions: [], activeTabId: null },
+    { agentId: "codex", firstMessage: "Second" },
+  ).sessions[0];
+  const store = createStore();
+  store.set(agentSessionStateAtom, {
+    sessions: [first, second],
+    activeTabId: first.tabId,
+  });
+  render(
+    <Provider store={store}>
+      <SessionTabs />
+    </Provider>,
+  );
+  const select = screen.getByRole("button", {
+    name: /Second$/,
+    pressed: false,
+  });
+  select.focus();
+  expect(select).toHaveFocus();
+  fireEvent.click(select);
+  expect(select).toHaveAttribute("aria-pressed", "true");
+  fireEvent.click(screen.getByRole("button", { name: "Close First" }));
+  expect(store.get(agentSessionStateAtom).activeTabId).toBe(second.tabId);
+  expect(
+    store.get(agentSessionStateAtom).sessions.map((session) => session.title),
+  ).toEqual(["Second"]);
+});

package/src/components/chat/acp/__tests__/state.test.ts

@@ -74,7 +74,7 @@ describe("state utility functions", () => {
       const newState = addSession(initialState, session);
 
       // Remove the dynamic tabId for snapshot comparison
-      const { tabId, ...sessionWithoutId } = newState.sessions[0];
+      const { tabId: _tabId, ...sessionWithoutId } = newState.sessions[0];
       expect({
         ...newState,
         sessions: [sessionWithoutId],
@@ -116,7 +116,7 @@ describe("state utility functions", () => {
       const newState = addSession(initialState, newSession);
 
       // Remove dynamic tabId for snapshot
-      const { tabId, ...sessionWithoutId } = newState.sessions[0];
+      const { tabId: _tabId, ...sessionWithoutId } = newState.sessions[0];
       expect({
         ...newState,
         sessions: [sessionWithoutId],

package/src/components/chat/acp/blocks.tsx

@@ -328,15 +328,16 @@ export const PlansBlock = (props: { data: PlanNotificationEvent[] }) => {
         </span>
       </div>
       <ul className="flex flex-col gap-1">
-        {plans.map((item, index) => (
+        {plans.map((item) => (
           <li
-            key={`${item.status}-${index}`}
+            key={item.content}
             className={`
               flex items-center gap-2 px-2 py-1 rounded
             `}
           >
             <input
               type="checkbox"
+              aria-label={item.content}
               checked={item.status === "completed"}
               readOnly={true}
               className="accent-primary h-4 w-4 rounded border border-muted-foreground/30"

package/src/components/chat/acp/session-tabs.tsx

@@ -32,17 +32,22 @@ const SessionTab: React.FC<SessionTabProps> = memo(
           "flex items-center gap-1 px-2 py-1 text-xs border-r border-border bg-muted/30 hover:bg-muted/50 cursor-pointer min-w-0",
           isActive && "bg-background border-b-0 relative z-1",
         )}
-        onClick={() => onSelect(session.tabId)}
       >
-        <div className="flex items-center gap-1 min-w-0 flex-1">
+        <button
+          type="button"
+          aria-pressed={isActive}
+          onClick={() => onSelect(session.tabId)}
+          className="flex items-center gap-1 min-w-0 flex-1 text-left focus-visible:outline focus-visible:outline-ring"
+        >
           <span className="text-muted-foreground text-[10px] font-medium">
             <AiProviderIcon provider={session.agentId} className="h-3 w-3" />
           </span>
           <span className="truncate" title={session.title}>
             {session.title}
           </span>
-        </div>
+        </button>
         <Button
+          aria-label={`Close ${session.title}`}
           variant="ghost"
           size="sm"
           className="h-4 w-4 p-0 hover:bg-destructive/20 hover:text-destructive shrink-0"

package/src/components/chat/chat-components.tsx

@@ -124,6 +124,7 @@ export const AddContextButton = ({
   return (
     <Tooltip content="Add context">
       <Button
+        aria-label="Add context"
         variant="text"
         size="icon"
         onClick={handleAddContext}
@@ -148,6 +149,7 @@ export const AttachFileButton = ({
     <>
       <Tooltip content="Attach a file">
         <Button
+          aria-label="Attach a file"
           variant="text"
           size="icon"
           onClick={() => fileInputRef.current?.click()}

package/src/components/chat/chat-panel.tsx

@@ -13,28 +13,15 @@ import {
 import { useAtom, useAtomValue, useSetAtom, useStore } from "jotai";
 import {
   BotMessageSquareIcon,
-  HatGlasses,
   ArrowRightIcon,
   Loader2,
-  type LucideIcon,
-  MessageCircleIcon,
-  NotebookText,
   PlusIcon,
   SparklesIcon,
   SettingsIcon,
-  CodeIcon,
 } from "lucide-react";
 import { memo, useEffect, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
 import { Button } from "@/components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-} from "@/components/ui/select";
 import { replaceMessagesInChat } from "@/core/ai/chat-utils";
 import { useAIConfigActions } from "@/core/ai/config";
 import { AI_SDK_UI_THROTTLE_MS } from "@/core/ai/constants";
@@ -49,11 +36,8 @@ import {
   pendingAiPromptAtom,
 } from "@/core/ai/state";
 import type { ToolNotebookContext } from "@/core/ai/tools/base";
-import {
-  type CopilotMode,
-  FRONTEND_TOOL_REGISTRY,
-} from "@/core/ai/tools/registry";
-import { useCellActions } from "@/core/cells/cells";
+import { FRONTEND_TOOL_REGISTRY } from "@/core/ai/tools/registry";
+import { useCellActions } from "@/core/cells/actions";
 import { aiAtom, aiModelConfiguredAtom } from "@/core/config/config";
 import { DEFAULT_AI_MODEL } from "@/core/config/config-schema";
 import { useRequestClient } from "@/core/network/requests";
@@ -97,6 +81,7 @@ import {
 import { renderUIMessage } from "./chat-display";
 import { ChatHistoryPopover } from "./chat-history-popover";
 import { CapabilitiesPopover } from "./capabilities-popover";
+import { NotebookAccessSelector } from "./notebook-access-selector";
 import {
   type ChatMessagePart,
   convertToFileUIPart,
@@ -117,7 +102,7 @@ import ScrollToBottomButton from "./acp/scroll-to-bottom-button";
 import { useChatControllerId } from "./use-chat-controller-id";
 
 // Default mode for the AI
-const DEFAULT_MODE = "manual";
+const DEFAULT_MODE = "ask";
 
 const QueuedMessageDisplay = memo(
   ({ message }: { message: QueuedUserMessage }) => {
@@ -166,7 +151,12 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   return (
     <div className="flex border-b px-2 py-1 justify-between shrink-0 items-center">
       <Tooltip content="New chat">
-        <Button variant="text" size="icon" onClick={onNewChat}>
+        <Button
+          aria-label="New chat"
+          variant="text"
+          size="icon"
+          onClick={onNewChat}
+        >
           <PlusIcon className="h-4 w-4" />
         </Button>
       </Tooltip>
@@ -316,82 +306,17 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
 
     const { saveModeChange } = useAIConfigActions();
 
-    const modeOptions: {
-      value: CopilotMode;
-      label: string;
-      subtitle: string;
-      Icon: LucideIcon;
-    }[] = [
-      {
-        value: "manual",
-        label: "Manual",
-        subtitle: "Pure chat, no tool usage",
-        Icon: MessageCircleIcon,
-      },
-      {
-        value: "ask",
-        label: "Ask",
-        subtitle: "AI with access to read-only tools like documentation search",
-        Icon: NotebookText,
-      },
-      {
-        value: "agent",
-        label: "Agent",
-        subtitle: "AI with access to read and write tools",
-        Icon: HatGlasses,
-      },
-      {
-        value: "code_mode",
-        label: "Code Mode (beta)",
-        subtitle:
-          "AI with access to the notebook's kernel. Potentially destructive.",
-        Icon: CodeIcon,
-      },
-    ];
-
     const isAttachmentSupported =
       PROVIDERS_THAT_SUPPORT_ATTACHMENTS.has(currentProvider);
 
-    const currentModeOption = modeOptions.find((o) => o.value === currentMode);
-    const CurrentModeIcon = currentModeOption?.Icon;
-    const CurrentModeLabel = currentModeOption?.label;
-
     return (
       <TooltipProvider>
         <div className="px-3 py-2 border-t border-border/20 flex flex-wrap items-center gap-1">
           <div className="flex flex-wrap items-center gap-1">
-            <Select value={currentMode} onValueChange={saveModeChange}>
-              <SelectTrigger className="h-6 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 py-0 px-2 gap-1.5 shrink-0">
-                {CurrentModeIcon && <CurrentModeIcon className="h-3 w-3" />}
-                <span className="text-nowrap">{CurrentModeLabel}</span>
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium">
-                    AI Mode
-                  </SelectLabel>
-                  {modeOptions.map((option) => (
-                    <SelectItem
-                      key={option.value}
-                      value={option.value}
-                      className="text-xs py-1"
-                    >
-                      <div className="flex items-start gap-2.5">
-                        <span className="mt-1 text-muted-foreground">
-                          <option.Icon className="h-3 w-3" />
-                        </span>
-                        <div className="flex flex-col gap-0.5">
-                          <span className="font-semibold">{option.label}</span>
-                          <span className="text-muted-foreground">
-                            {option.subtitle}
-                          </span>
-                        </div>
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
+            <NotebookAccessSelector
+              value={currentMode}
+              onValueChange={saveModeChange}
+            />
             <AIModelDropdown
               placeholder="Model"
               triggerClassName="h-6 text-xs shadow-none! ring-0! bg-muted hover:bg-muted/30 rounded-sm max-w-[200px]"
@@ -568,7 +493,7 @@ const ChatPanelBody = () => {
     setAbortNotice(null);
   });
   const runtimeManager = useRuntimeManager();
-  const { invokeAiTool, sendRun } = useRequestClient();
+  const { invokeAiTool } = useRequestClient();
   const { openModal, closeModal } = useImperativeModal();
 
   const activeChatId = activeChat?.id;
@@ -577,12 +502,10 @@ const ChatPanelBody = () => {
   const store = useStore();
 
   const { addStagedCell } = useStagedAICellsActions();
-  const { createNewCell, prepareForRun } = useCellActions();
+  const { createCell } = useCellActions();
   const toolContext: ToolNotebookContext = {
     addStagedCell,
-    createNewCell,
-    prepareForRun,
-    sendRun,
+    createCell,
     store,
   };
 
@@ -716,14 +639,10 @@ const ChatPanelBody = () => {
   );
 
   const isLoading = status === "submitted" || status === "streaming";
-  // Read via a ref so the queue-vs-send decision stays correct even when it is
-  // made after an `await` (e.g. resolving @-context), by which point the render
-  // closure's `isLoading` may be stale.
-  const isLoadingRef = useRef(isLoading);
-  isLoadingRef.current = isLoading;
-
+  // useEvent reads the latest loading state, even when called after an await
+  // (e.g. resolving @-context) that outlives the original render's closure.
   const submitOrQueue = useEvent((parts: ChatMessagePart[]) => {
-    if (isLoadingRef.current || hasQueuedRef.current) {
+    if (isLoading || hasQueuedRef.current) {
       enqueueUserMessage(parts);
     } else {
       sendUserMessage(parts);

package/src/components/chat/chat-utils.ts

@@ -294,16 +294,12 @@ export function useMessageQueue() {
   // invoked from a callback (e.g. `onFinish`) in the same tick as `enqueue`.
   const messagesRef = useRef<QueuedUserMessage[]>([]);
   const hasQueuedRef = useRef(false);
-  messagesRef.current = messages;
-  hasQueuedRef.current = messages.length > 0;
 
   const enqueue = useEvent((parts: ChatMessagePart[]) => {
-    setMessages((prev) => {
-      const next = [...prev, { id: generateUUID(), parts }];
-      messagesRef.current = next;
-      hasQueuedRef.current = true;
-      return next;
-    });
+    const next = [...messagesRef.current, { id: generateUUID(), parts }];
+    messagesRef.current = next;
+    hasQueuedRef.current = true;
+    setMessages(next);
   });
 
   const flushNext = useEvent((send: (parts: ChatMessagePart[]) => void) => {

package/src/components/chat/notebook-access-selector.stories.tsx

@@ -0,0 +1,22 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { NotebookAccessSelector } from "./notebook-access-selector";
+
+const meta = {
+  title: "Chat/Notebook access",
+  component: NotebookAccessSelector,
+  args: { value: "ask", onValueChange: () => undefined },
+  render: function Render(args) {
+    const [value, setValue] = useState(args.value);
+    return <NotebookAccessSelector value={value} onValueChange={setValue} />;
+  },
+} satisfies Meta<typeof NotebookAccessSelector>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ReadOnly: Story = { args: { value: "ask" } };
+export const SuggestEdits: Story = { args: { value: "agent" } };
+export const FullAccess: Story = { args: { value: "code_mode" } };

package/src/components/chat/notebook-access-selector.tsx

@@ -0,0 +1,100 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  EyeIcon,
+  type LucideIcon,
+  PencilIcon,
+  TerminalIcon,
+} from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+} from "@/components/ui/select";
+import type { CopilotMode } from "@/core/config/config-schema";
+
+const ACCESS_LEVELS = {
+  ask: {
+    label: "Read only",
+    description: "Read notebook code, outputs, and variable previews.",
+    Icon: EyeIcon,
+  },
+  agent: {
+    label: "Suggest edits",
+    description: "Read the notebook and propose cell changes for review.",
+    Icon: PencilIcon,
+  },
+  code_mode: {
+    label: "Full access",
+    description: "Read, edit, and run cells, with Python scratchpad access.",
+    Icon: TerminalIcon,
+  },
+} satisfies Record<
+  Exclude<CopilotMode, "manual">,
+  { label: string; description: string; Icon: LucideIcon }
+>;
+
+const ACCESS_MODES = ["ask", "agent", "code_mode"] as const;
+
+interface NotebookAccessSelectorProps {
+  value: CopilotMode;
+  onValueChange: (value: CopilotMode) => void;
+}
+
+export const NotebookAccessSelector = ({
+  value,
+  onValueChange,
+}: NotebookAccessSelectorProps) => {
+  const mode = value === "manual" ? "ask" : value;
+  const selected = ACCESS_LEVELS[mode];
+
+  return (
+    <Select
+      value={mode}
+      onValueChange={(value) => {
+        const mode = ACCESS_MODES.find((mode) => mode === value);
+        if (mode) {
+          onValueChange(mode);
+        }
+      }}
+    >
+      <SelectTrigger
+        aria-label={`Notebook access: ${selected.label}`}
+        title={`Notebook access: ${selected.description}`}
+        className="h-6 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 py-0 px-2 gap-1.5 shrink-0"
+      >
+        <selected.Icon className="h-3 w-3" />
+        <span className="text-nowrap">{selected.label}</span>
+      </SelectTrigger>
+      <SelectContent className="max-w-[calc(100vw-2rem)]">
+        <SelectGroup>
+          <SelectLabel className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium">
+            Notebook access
+          </SelectLabel>
+          {ACCESS_MODES.map((mode) => {
+            const { label, description, Icon } = ACCESS_LEVELS[mode];
+            return (
+              <SelectItem
+                key={mode}
+                value={mode}
+                textValue={label}
+                className="text-xs py-1"
+              >
+                <div className="flex items-start gap-2.5">
+                  <Icon className="h-3 w-3 mt-1 shrink-0 text-muted-foreground" />
+                  <div className="flex flex-col gap-0.5">
+                    <span className="font-semibold">{label}</span>
+                    <span className="text-muted-foreground">{description}</span>
+                  </div>
+                </div>
+              </SelectItem>
+            );
+          })}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+};