feat: inherit model-picker reorder/accordion persistence and shift-delete from otto-ui (#1833)

* feat(model-picker): drag-to-reorder providers and persist accordion state

Ports two model/provider picker QoL features from otto-ui:
- Persist collapsed state of picker sections (favorites, recent, each
  provider) via a new persisted zustand store so collapse survives
  remounts and reloads, shared across every picker surface.
- Desktop drag-to-reorder of provider sections (whole header as the
  mouse activator, 8px threshold so a plain click still toggles
  collapse), with the order persisted in useUIStore.providerOrder and
  applied across ModelControls, ModelMultiSelect and ModelSelector.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* feat(sessions): shift-click quick action hard-deletes thread without prompt

Ports the shift-quick-delete feature from otto-ui. The sidebar quick
action (normally archive) becomes a no-prompt hard delete while Shift is
held: the icon switches to a trash bin, the affordance turns destructive,
and the click bypasses the confirmation dialog via a new skipConfirm
source flag. A shared useShiftKeyHeld hook (single window listener set,
useSyncExternalStore) keeps only the small action button re-rendering on
Shift state changes, and resets on window blur so the affordance can't
get stuck after alt-tab.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

---------

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

packages/ui/src/components/chat/ModelControls.tsx

@@ -366,6 +366,8 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
 
     const toggleFavoriteModel = useUIStore((state) => state.toggleFavoriteModel);
     const reorderFavoriteModel = useUIStore((state) => state.reorderFavoriteModel);
+    const providerOrder = useUIStore((state) => state.providerOrder);
+    const setProviderOrder = useUIStore((state) => state.setProviderOrder);
     const isFavoriteModel = useUIStore((state) => state.isFavoriteModel);
     const addRecentModel = useUIStore((state) => state.addRecentModel);
     const addRecentAgent = useUIStore((state) => state.addRecentAgent);
@@ -2368,6 +2370,9 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                 )}
                                 reorderFavoriteAriaLabel={t('chat.modelControls.reorderFavoriteAria')}
                                 reorderFavoriteTitle={t('chat.modelControls.reorderFavoriteTitle')}
+                                providerOrder={providerOrder}
+                                onReorderProvider={setProviderOrder}
+                                reorderProviderTitle={t('chat.modelControls.reorderProviderTitle')}
                                 footerContent={(activeEntry) => {
                                     const activeHasThinkingVariants = activeEntry
                                         ? getModelVariantOptions(activeEntry.providerID, activeEntry.modelID).length > 0

packages/ui/src/components/model-picker/ModelPickerList.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import {
   DndContext,
+  MouseSensor,
   PointerSensor,
   closestCenter,
   useSensor,
   useSensors,
   type DragEndEvent,
 } from '@dnd-kit/core';
-import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS as DndCSS } from '@dnd-kit/utilities';
 import { Icon } from '@/components/icon/Icon';
 import { Input } from '@/components/ui/input';
@@ -18,6 +19,7 @@ import { getCurrentIntlLocale } from '@/lib/i18n';
 import { mergeModelMetadataWithLiveModel } from '@/lib/modelMetadata';
 import { getModelDisplayName as getSharedModelDisplayName } from '@/lib/modelDisplay';
 import { cn } from '@/lib/utils';
+import { useModelPickerSectionsStore } from '@/stores/useModelPickerSectionsStore';
 import type { ModelMetadata } from '@/types';
 
 type ProviderModel = Record<string, unknown> & { id?: string; name?: string };
@@ -256,6 +258,35 @@ const SortableFavoriteModelRow: React.FC<{
   );
 };
 
+const SortableProviderSection: React.FC<{
+  id: string;
+  disabled?: boolean;
+  children: (dragHandleProps: SortableFavoriteHandleProps) => React.ReactNode;
+}> = ({ id, disabled = false, children }) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id, disabled });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: DndCSS.Translate.toString(transform),
+        transition,
+      }}
+      className={cn(isDragging && 'opacity-60')}
+    >
+      {children({ attributes, listeners, setActivatorNodeRef, isDragging })}
+    </div>
+  );
+};
+
 const STICKY_HEADER_OFFSET = 32;
 
 const scrollIntoView = (container: HTMLElement | null, node: HTMLElement | null) => {
@@ -328,6 +359,9 @@ interface ModelPickerListProps {
   onReorderFavorite?: (active: ModelPickerEntry, over: ModelPickerEntry) => void;
   reorderFavoriteAriaLabel?: string;
   reorderFavoriteTitle?: string;
+  providerOrder?: string[];
+  onReorderProvider?: (orderedProviderIDs: string[]) => void;
+  reorderProviderTitle?: string;
   footerContent?: React.ReactNode | ((activeEntry: ModelPickerEntry | undefined) => React.ReactNode);
   renderVersion?: number;
   tooltipsEnabled?: boolean;
@@ -365,6 +399,9 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
   onReorderFavorite,
   reorderFavoriteAriaLabel,
   reorderFavoriteTitle,
+  providerOrder,
+  onReorderProvider,
+  reorderProviderTitle,
   footerContent,
   renderVersion,
   tooltipsEnabled = true,
@@ -376,10 +413,21 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
   const scrollRef = React.useRef<HTMLElement | null>(null);
   const keyboardOwnsSelectionRef = React.useRef(false);
   const lastMousePositionRef = React.useRef<{ x: number; y: number } | null>(null);
-  const [collapsedSections, setCollapsedSections] = React.useState<Set<string>>(() => new Set());
+  const collapsedRecord = useModelPickerSectionsStore((state) => state.collapsedSections);
+  const toggleSection = useModelPickerSectionsStore((state) => state.toggleSection);
+  const collapsedSections = React.useMemo(
+    () => new Set(Object.keys(collapsedRecord).filter((key) => collapsedRecord[key])),
+    [collapsedRecord],
+  );
   const favoriteRowSensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
   );
+  // Desktop-only provider reordering: a MouseSensor (no TouchSensor) keeps the
+  // section headers tappable/scrollable on touch devices while enabling
+  // click-and-drag with a mouse.
+  const providerSectionSensors = useSensors(
+    useSensor(MouseSensor, { activationConstraint: { distance: 8 } }),
+  );
 
   const allowedProviderSet = React.useMemo(() => {
     if (!allowedProviderIds || allowedProviderIds.length === 0) return null;
@@ -412,7 +460,17 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
     return matchesQuery(getModelDisplayName(model), providerName);
   }), [allowedProviderSet, isHidden, matchesQuery, providerById, recentModels]);
 
-  const filteredProviders = React.useMemo(() => providers
+  const orderedProviders = React.useMemo(() => {
+    if (!providerOrder || providerOrder.length === 0) return providers;
+    const rank = new Map(providerOrder.map((id, index) => [id, index] as const));
+    const ranked = providers
+      .filter((provider) => rank.has(provider.id))
+      .sort((a, b) => (rank.get(a.id) ?? 0) - (rank.get(b.id) ?? 0));
+    const unranked = providers.filter((provider) => !rank.has(provider.id));
+    return [...ranked, ...unranked];
+  }, [providerOrder, providers]);
+
+  const filteredProviders = React.useMemo(() => orderedProviders
     .filter((provider) => !allowedProviderSet || allowedProviderSet.has(provider.id))
     .map((provider) => {
       const models = Array.isArray(provider.models) ? provider.models : [];
@@ -423,7 +481,7 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
       });
       return { ...provider, models: filteredModels };
     })
-    .filter((provider) => provider.models.length > 0), [allowedProviderSet, isHidden, matchesQuery, providers]);
+    .filter((provider) => provider.models.length > 0), [allowedProviderSet, isHidden, matchesQuery, orderedProviders]);
 
   const flatModelList = React.useMemo(() => {
     const items: ModelPickerEntry[] = [];
@@ -438,6 +496,7 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
 
   const hasResults = flatModelList.length > 0;
   const favoriteSortingEnabled = Boolean(onReorderFavorite) && searchQuery.trim().length === 0 && filteredFavorites.length > 1;
+  const providerSortingEnabled = Boolean(onReorderProvider) && searchQuery.trim().length === 0 && !allowedProviderSet && filteredProviders.length > 1;
   const favoriteLookup: Map<string, ModelPickerEntry> = React.useMemo(() => new Map(
     filteredFavorites.map((entry) => [`${entry.providerID}:${entry.modelID}`, entry] as const),
   ), [filteredFavorites]);
@@ -591,18 +650,61 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
     onReorderFavorite(activeFavorite, overFavorite);
   };
 
-  const isSectionCollapsed = (key: string) => collapsedSections.has(key);
+  const handleProviderDragEnd = (event: DragEndEvent) => {
-  const toggleSectionCollapsed = (key: string) => {
+    if (!onReorderProvider) return;
-    setCollapsedSections((prev) => {
+    const { active, over } = event;
-      const next = new Set(prev);
+    if (!over || active.id === over.id) return;
-      if (next.has(key)) next.delete(key);
+
-      else next.add(key);
+    const ids = orderedProviders.map((provider) => provider.id);
-      return next;
+    const from = ids.indexOf(String(active.id));
-    });
+    const to = ids.indexOf(String(over.id));
+    if (from === -1 || to === -1) return;
+
+    onReorderProvider(arrayMove(ids, from, to));
   };
 
-  const renderSectionHeader = (key: string, icon: React.ReactNode, label: React.ReactNode) => {
+  const isSectionCollapsed = (key: string) => collapsedSections.has(key);
+  const toggleSectionCollapsed = (key: string) => toggleSection(key);
+
+  const renderSectionHeader = (key: string, icon: React.ReactNode, label: React.ReactNode, headerDragProps?: SortableFavoriteHandleProps) => {
     const collapsed = isSectionCollapsed(key);
+    const toggleKeyDown = (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        toggleSectionCollapsed(key);
+      }
+    };
+
+    // When the section is reorderable, the whole header acts as the drag
+    // activator (desktop mouse, with an 8px threshold so a plain click still
+    // toggles collapse). A <button> cannot be the activator because dnd-kit's
+    // attributes/listeners turn it into a draggable widget, so render a div
+    // with button semantics. The drag listeners are spread first so our
+    // onClick/onKeyDown collapse handlers take precedence.
+    if (headerDragProps) {
+      return (
+        <div
+          ref={headerDragProps.setActivatorNodeRef}
+          {...headerDragProps.attributes}
+          {...headerDragProps.listeners}
+          role="button"
+          tabIndex={0}
+          aria-expanded={!collapsed}
+          title={reorderProviderTitle}
+          className={cn(headerClassName, 'w-full text-left cursor-grab select-none active:cursor-grabbing')}
+          onClick={() => toggleSectionCollapsed(key)}
+          onKeyDown={toggleKeyDown}
+        >
+          <Icon name="draggable" className="size-3.5 flex-shrink-0 text-muted-foreground/70" />
+          {icon}
+          <span className="min-w-0 truncate">{label}</span>
+          <span className="ml-auto flex size-4 flex-shrink-0 items-center justify-center text-muted-foreground">
+            <Icon name={collapsed ? 'arrow-right-s' : 'arrow-down-s'} className="size-4" />
+          </span>
+        </div>
+      );
+    }
+
     return (
       <button
         type="button"
@@ -619,6 +721,20 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
     );
   };
 
+  const renderProviderSection = (
+    provider: (typeof filteredProviders)[number],
+    providerIndex: number,
+    headerDragProps?: SortableFavoriteHandleProps,
+  ) => (
+    <>
+      {providerIndex > 0 ? <div className="h-px bg-border/40 my-1" /> : null}
+      {renderSectionHeader(`provider:${provider.id}`, <ProviderLogo providerId={provider.id} className="h-4 w-4 flex-shrink-0" />, provider.name || provider.id, headerDragProps)}
+      {!isSectionCollapsed(`provider:${provider.id}`)
+        ? provider.models.map((model) => renderRow({ model, providerID: provider.id, modelID: model.id as string }, 'provider', false, currentFlatIndex++))
+        : null}
+    </>
+  );
+
   return (
     <>
       <div className="px-2 py-1 border-b border-border/40">
@@ -687,15 +803,23 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
 
           {(filteredFavorites.length > 0 || filteredRecents.length > 0) && filteredProviders.length > 0 ? <div className="h-px bg-border/40 my-1" /> : null}
 
-          {filteredProviders.map((provider, providerIndex) => (
+          {providerSortingEnabled ? (
-            <div key={provider.id}>
+            <DndContext sensors={providerSectionSensors} collisionDetection={closestCenter} onDragEnd={handleProviderDragEnd}>
-              {providerIndex > 0 ? <div className="h-px bg-border/40 my-1" /> : null}
+              <SortableContext items={filteredProviders.map((provider) => provider.id)} strategy={verticalListSortingStrategy}>
-              {renderSectionHeader(`provider:${provider.id}`, <ProviderLogo providerId={provider.id} className="h-4 w-4 flex-shrink-0" />, provider.name || provider.id)}
+                {filteredProviders.map((provider, providerIndex) => (
-              {!isSectionCollapsed(`provider:${provider.id}`)
+                  <SortableProviderSection key={provider.id} id={provider.id} disabled={disabled}>
-                ? provider.models.map((model) => renderRow({ model, providerID: provider.id, modelID: model.id as string }, 'provider', false, currentFlatIndex++))
+                    {(dragHandleProps) => renderProviderSection(provider, providerIndex, dragHandleProps)}
-                : null}
+                  </SortableProviderSection>
-            </div>
+                ))}
-          ))}
+              </SortableContext>
+            </DndContext>
+          ) : (
+            filteredProviders.map((provider, providerIndex) => (
+              <div key={provider.id}>
+                {renderProviderSection(provider, providerIndex)}
+              </div>
+            ))
+          )}
         </div>
       </ScrollableOverlay>
 

packages/ui/src/components/multirun/ModelMultiSelect.tsx

@@ -107,6 +107,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
   const isFavoriteModel = useUIStore((state) => state.isFavoriteModel);
   const { favoriteModelsList, recentModelsList } = useModelLists();
   const hiddenModels = useUIStore((state) => state.hiddenModels);
+  const providerOrder = useUIStore((state) => state.providerOrder);
   const [isOpen, setIsOpen] = React.useState(false);
   const [searchQuery, setSearchQuery] = React.useState('');
   const [availableHeight, setAvailableHeight] = React.useState<number | null>(null);
@@ -260,6 +261,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
             >
               <ModelPickerList
                 providers={providers}
+                providerOrder={providerOrder}
                 favoriteModels={favoriteModelsList}
                 recentModels={recentModelsList}
                 modelsMetadata={modelsMetadata}

packages/ui/src/components/sections/agents/ModelSelector.tsx

@@ -46,6 +46,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     const toggleFavoriteModel = useUIStore((state) => state.toggleFavoriteModel);
     const isFavoriteModel = useUIStore((state) => state.isFavoriteModel);
     const addRecentModel = useUIStore((state) => state.addRecentModel);
+    const providerOrder = useUIStore((state) => state.providerOrder);
     const { favoriteModelsList, recentModelsList } = useModelLists();
     const { isMobile: deviceIsMobile } = useDeviceInfo();
     const isActuallyMobile = isMobile || deviceIsMobile;
@@ -94,6 +95,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     const picker = (
         <ModelPickerList
             providers={providers}
+            providerOrder={providerOrder}
             favoriteModels={favoriteModelsList}
             recentModels={recentModelsList}
             modelsMetadata={modelsMetadata}

packages/ui/src/components/session/sidebar/SessionNodeItem.tsx

@@ -33,6 +33,7 @@ import { useSessionDisplayStore } from '@/stores/useSessionDisplayStore';
 import { useSessionUnseenCount } from '@/sync/notification-store';
 import { useSessionMultiSelectStore } from '@/stores/useSessionMultiSelectStore';
 import { useI18n } from '@/lib/i18n';
+import { useShiftKeyHeld } from '@/hooks/useShiftKeyHeld';
 import { getRuntimeBearerTokenSync } from '@/lib/runtime-auth';
 import { getRuntimeApiBaseUrl } from '@/lib/runtime-switch';
 import { parseMultiRunSessionTitle } from '@/lib/multirun/title';
@@ -82,7 +83,7 @@ type Props = {
   addSessionToFolder: (scopeKey: string, folderId: string, sessionId: string) => void;
   createFolderAndStartRename: (scopeKey: string, parentId?: string | null) => { id: string } | null;
   openContextPanelTab: (directory: string, options: { mode: 'chat'; dedupeKey: string; label: string; readOnly?: boolean }) => void;
-  handleDeleteSession: (session: Session, source?: { archivedBucket?: boolean; hardDelete?: boolean }) => void;
+  handleDeleteSession: (session: Session, source?: { archivedBucket?: boolean; hardDelete?: boolean; skipConfirm?: boolean }) => void;
   mobileVariant: boolean;
   alwaysShowActions: boolean;
   renderSessionNode: (
@@ -139,6 +140,68 @@ type Props = {
   liveSessionById: Map<string, Session>;
 };
 
+type QuickSessionActionProps = {
+  archiveLabel: string;
+  deleteLabel: string;
+  buttonSizeClass: string;
+  iconSizeClass: string;
+  onPointerDown: (event: React.PointerEvent<HTMLButtonElement>) => void;
+  onMouseDown: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onArchive: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onDelete: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+// Extracted so only this small button re-renders when Shift is pressed/released,
+// instead of every mounted session row.
+const QuickSessionAction = React.memo(function QuickSessionAction({
+  archiveLabel,
+  deleteLabel,
+  buttonSizeClass,
+  iconSizeClass,
+  onPointerDown,
+  onMouseDown,
+  onArchive,
+  onDelete,
+}: QuickSessionActionProps): React.ReactNode {
+  const shiftHeld = useShiftKeyHeld();
+  const label = shiftHeld ? deleteLabel : archiveLabel;
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (shiftHeld || event.shiftKey) {
+      onDelete(event);
+      return;
+    }
+    onArchive(event);
+  };
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          className={cn(
+            'inline-flex items-center justify-center rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity',
+            shiftHeld
+              ? 'text-destructive hover:text-destructive'
+              : 'text-muted-foreground hover:text-foreground',
+            buttonSizeClass,
+          )}
+          aria-label={label}
+          onPointerDown={onPointerDown}
+          onMouseDown={onMouseDown}
+          onClick={handleClick}
+          onKeyDown={(event) => event.stopPropagation()}
+        >
+          <Icon name={shiftHeld ? 'delete-bin' : 'archive'} className={iconSizeClass} />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="left" sideOffset={8}>
+        {label}
+      </TooltipContent>
+    </Tooltip>
+  );
+});
+
 function SessionNodeItemComponent(props: Props): React.ReactNode {
   const { t } = useI18n();
   const {
@@ -634,6 +697,13 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
     handleDeleteSession(session, { archivedBucket });
   };
 
+  const handleQuickDeleteClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setOpenSidebarMenuKey(null);
+    handleDeleteSession(session, { archivedBucket, hardDelete: true, skipConfirm: true });
+  };
+
   const handleOpenInEditorPointerDown = (event: React.PointerEvent<HTMLButtonElement>) => {
     event.preventDefault();
     event.stopPropagation();
@@ -1046,27 +1116,16 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
                 : cn('opacity-0', revealOnHoverClass),
           )}>
             {showQuickArchiveAction ? (
-              <Tooltip>
+              <QuickSessionAction
-                <TooltipTrigger asChild>
+                archiveLabel={t('sessions.sidebar.bulkActions.archive')}
-                  <button
+                deleteLabel={t('sessions.sidebar.bulkActions.delete')}
-                    type="button"
+                buttonSizeClass={isMinimalMode && !alwaysShowActions ? 'h-4 w-4' : 'h-6 w-6'}
-                    className={cn(
+                iconSizeClass={isMinimalMode && !alwaysShowActions ? 'h-2.5 w-2.5' : 'h-3.5 w-3.5'}
-                      'inline-flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity',
+                onPointerDown={handleQuickArchivePointerDown}
-                      isMinimalMode && !alwaysShowActions ? 'h-4 w-4' : 'h-6 w-6',
+                onMouseDown={handleQuickArchiveMouseDown}
-                    )}
+                onArchive={handleQuickArchiveClick}
-                    aria-label={t('sessions.sidebar.bulkActions.archive')}
+                onDelete={handleQuickDeleteClick}
-                    onPointerDown={handleQuickArchivePointerDown}
+              />
-                    onMouseDown={handleQuickArchiveMouseDown}
-                    onClick={handleQuickArchiveClick}
-                    onKeyDown={(event) => event.stopPropagation()}
-                  >
-                    <Icon name="archive" className={cn(isMinimalMode && !alwaysShowActions ? 'h-2.5 w-2.5' : 'h-3.5 w-3.5')} />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="left" sideOffset={8}>
-                  {t('sessions.sidebar.bulkActions.archive')}
-                </TooltipContent>
-              </Tooltip>
             ) : null}
             {showOpenInEditorAction ? (
               <Tooltip>

packages/ui/src/components/session/sidebar/hooks/useSessionActions.ts

@@ -15,6 +15,8 @@ type DeleteSessionConfirmSetter = React.Dispatch<React.SetStateAction<{
 type DeleteSessionSource = {
   archivedBucket?: boolean;
   hardDelete?: boolean;
+  /** Bypass the confirmation dialog and delete/archive immediately. */
+  skipConfirm?: boolean;
 };
 
 type Args = {
@@ -253,7 +255,7 @@ export const useSessionActions = (args: Args) => {
         collectDescendants(session.id),
         shouldHardDelete,
       ).map((s) => s.id);
-      if (!args.showDeletionDialog) {
+      if (!args.showDeletionDialog || source?.skipConfirm === true) {
         void executeDeleteSession(session, source, { descendantIds: effectiveDescendantIds });
         return;
       }

packages/ui/src/components/ui/ProviderLogo.tsx

@@ -34,6 +34,7 @@ export const ProviderLogo: React.FC<ProviderLogoProps> = ({
             loading="eager"
             decoding="async"
             fetchPriority="high"
+            draggable={false}
             onError={handleError}
         />
     );

packages/ui/src/hooks/useShiftKeyHeld.ts

@@ -0,0 +1,77 @@
+import { useSyncExternalStore } from 'react';
+
+/**
+ * Tracks whether the Shift key is currently held, shared across all consumers
+ * via a single set of window listeners.
+ *
+ * Using one module-level listener set (instead of per-component listeners)
+ * keeps this cheap even when many rows subscribe, and `useSyncExternalStore`
+ * lets unrelated subtrees stay isolated — only components that actually call
+ * this hook re-render when the Shift state flips.
+ */
+let shiftHeld = false;
+const listeners = new Set<() => void>();
+let initialized = false;
+
+function emit(): void {
+  for (const listener of listeners) {
+    listener();
+  }
+}
+
+function setShiftHeld(next: boolean): void {
+  if (shiftHeld === next) {
+    return;
+  }
+  shiftHeld = next;
+  emit();
+}
+
+function handleKeyDown(event: KeyboardEvent): void {
+  if (event.key === 'Shift') {
+    setShiftHeld(true);
+  }
+}
+
+function handleKeyUp(event: KeyboardEvent): void {
+  if (event.key === 'Shift') {
+    setShiftHeld(false);
+  }
+}
+
+// The window can lose focus while Shift is held (e.g. alt-tab), and the
+// matching keyup never arrives — reset so the UI doesn't get stuck in the
+// "delete" affordance.
+function handleReset(): void {
+  setShiftHeld(false);
+}
+
+function ensureListeners(): void {
+  if (initialized || typeof window === 'undefined') {
+    return;
+  }
+  initialized = true;
+  window.addEventListener('keydown', handleKeyDown);
+  window.addEventListener('keyup', handleKeyUp);
+  window.addEventListener('blur', handleReset);
+}
+
+function subscribe(onStoreChange: () => void): () => void {
+  ensureListeners();
+  listeners.add(onStoreChange);
+  return () => {
+    listeners.delete(onStoreChange);
+  };
+}
+
+function getSnapshot(): boolean {
+  return shiftHeld;
+}
+
+function getServerSnapshot(): boolean {
+  return false;
+}
+
+export function useShiftKeyHeld(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

packages/ui/src/lib/i18n/messages/en.ts

@@ -1999,6 +1999,7 @@ export const dict = {
   'chat.modelControls.noProvidersOrModelsFound': 'No providers or models match your search.',
   'chat.modelControls.reorderFavoriteAria': 'Reorder favorite',
   'chat.modelControls.reorderFavoriteTitle': 'Drag to reorder favorite',
+  'chat.modelControls.reorderProviderTitle': 'Drag to reorder provider',
   'chat.modelControls.permissionLabel.custom': 'Custom',
   'chat.modelControls.permissionLabel.allow': 'Allow',
   'chat.modelControls.permissionLabel.deny': 'Deny',

packages/ui/src/lib/i18n/messages/es.ts

@@ -1965,6 +1965,7 @@ export const dict: Record<I18nKey, string> = {
   "chat.modelControls.noProvidersOrModelsFound": "Ningún proveedor o modelo coincide con tu búsqueda.",
   "chat.modelControls.reorderFavoriteAria": "Reordenar favorito",
   "chat.modelControls.reorderFavoriteTitle": "Arrastrar para reordenar favorito",
+  "chat.modelControls.reorderProviderTitle": "Arrastrar para reordenar proveedor",
   "chat.modelControls.permissionLabel.custom": "Personalizado",
   "chat.modelControls.permissionLabel.allow": "Permitir",
   "chat.modelControls.permissionLabel.deny": "Denegar",

packages/ui/src/lib/i18n/messages/fr.ts

@@ -1820,6 +1820,7 @@ export const dict = {
   'chat.modelControls.noProvidersOrModelsFound': 'Aucun fournisseur ou modèle ne correspond à votre recherche.',
   'chat.modelControls.reorderFavoriteAria': 'Réorganiser les favoris',
   'chat.modelControls.reorderFavoriteTitle': 'Faites glisser pour réorganiser les favoris',
+  'chat.modelControls.reorderProviderTitle': 'Faites glisser pour réorganiser le fournisseur',
   'chat.modelControls.permissionLabel.custom': 'Personnalisé',
   'chat.modelControls.permissionLabel.allow': 'Permettre',
   'chat.modelControls.permissionLabel.deny': 'Refuser',

packages/ui/src/lib/i18n/messages/ko.ts

@@ -1999,6 +1999,7 @@ export const dict: Record<I18nKey, string> = {
   'chat.modelControls.noProvidersOrModelsFound': '검색과 일치하는 프로바이더 또는 모델이 없습니다.',
   'chat.modelControls.reorderFavoriteAria': '즐겨찾기 순서 변경',
   'chat.modelControls.reorderFavoriteTitle': '드래그하여 즐겨찾기 순서 변경',
+  'chat.modelControls.reorderProviderTitle': '드래그하여 공급자 순서 변경',
   'chat.modelControls.permissionLabel.custom': '사용자 지정',
   'chat.modelControls.permissionLabel.allow': '허용',
   'chat.modelControls.permissionLabel.deny': '거부',

packages/ui/src/lib/i18n/messages/pl.ts

@@ -1169,6 +1169,7 @@ export const dict: Record<I18nKey, string> = {
   'chat.modelControls.removeFromFavorites': 'Usuń z ulubionych',
   'chat.modelControls.reorderFavoriteAria': 'Zmień kolejność ulubionych',
   'chat.modelControls.reorderFavoriteTitle': 'Przeciągnij, aby zmienić kolejność ulubionych',
+  'chat.modelControls.reorderProviderTitle': 'Przeciągnij, aby zmienić kolejność dostawcy',
   'chat.modelControls.resetToDefault': 'Przywróć domyślne',
   'chat.modelControls.searchAgents': 'Szukaj agentów',
   'chat.modelControls.searchModels': 'Szukaj modeli...',

packages/ui/src/lib/i18n/messages/pt-BR.ts

@@ -1965,6 +1965,7 @@ export const dict: Record<I18nKey, string> = {
   "chat.modelControls.noProvidersOrModelsFound": "Nenhum provedor ou modelo corresponde à sua pesquisa.",
   "chat.modelControls.reorderFavoriteAria": "Reordenar favorito",
   "chat.modelControls.reorderFavoriteTitle": "Arraste para reordenar favorito",
+  "chat.modelControls.reorderProviderTitle": "Arraste para reordenar provedor",
   "chat.modelControls.permissionLabel.custom": "Personalizado",
   "chat.modelControls.permissionLabel.allow": "Permitir",
   "chat.modelControls.permissionLabel.deny": "Negar",

packages/ui/src/lib/i18n/messages/uk.ts

@@ -1965,6 +1965,7 @@ export const dict: Record<I18nKey, string> = {
   "chat.modelControls.noProvidersOrModelsFound": "Жоден провайдер або модель не відповідає пошуку.",
   "chat.modelControls.reorderFavoriteAria": "Змінити порядок вибраного",
   "chat.modelControls.reorderFavoriteTitle": "Перетягніть, щоб змінити порядок вибраного",
+  "chat.modelControls.reorderProviderTitle": "Перетягніть, щоб змінити порядок провайдера",
   "chat.modelControls.permissionLabel.custom": "Custom",
   "chat.modelControls.permissionLabel.allow": "Дозволити",
   "chat.modelControls.permissionLabel.deny": "Заборонити",

packages/ui/src/lib/i18n/messages/zh-CN.ts

@@ -1965,6 +1965,7 @@ export const dict: Record<I18nKey, string> = {
   'chat.modelControls.noProvidersOrModelsFound': '没有提供商或模型匹配你的搜索。',
   'chat.modelControls.reorderFavoriteAria': '重新排序收藏',
   'chat.modelControls.reorderFavoriteTitle': '拖动以重新排序收藏',
+  'chat.modelControls.reorderProviderTitle': '拖动以重新排序提供商',
   'chat.modelControls.permissionLabel.custom': '自定义',
   'chat.modelControls.permissionLabel.allow': '允许',
   'chat.modelControls.permissionLabel.deny': '拒绝',

packages/ui/src/lib/i18n/messages/zh-TW.ts

@@ -1969,6 +1969,7 @@ export const dict: Record<I18nKey, string> = {
   'chat.modelControls.noProvidersOrModelsFound': '沒有供應商或模型符合你的搜尋。',
   'chat.modelControls.reorderFavoriteAria': '重新排序最愛',
   'chat.modelControls.reorderFavoriteTitle': '拖曳以重新排序最愛',
+  'chat.modelControls.reorderProviderTitle': '拖曳以重新排序供應商',
   'chat.modelControls.permissionLabel.custom': '自訂',
   'chat.modelControls.permissionLabel.allow': '允許',
   'chat.modelControls.permissionLabel.deny': '拒絕',

packages/ui/src/stores/useModelPickerSectionsStore.ts

@@ -0,0 +1,36 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+/**
+ * Persisted collapsed state for the collapsible sections (accordions) in the
+ * model/provider picker (`ModelPickerList`): the `favorites` and `recent`
+ * sections plus each `provider:<id>` group. Section keys are stable and shared
+ * across every picker surface, so collapsing a provider in one picker is
+ * remembered everywhere and survives remounts and full page reloads.
+ *
+ * Only collapsed keys are stored (presence === collapsed); the default for any
+ * unknown key is expanded.
+ */
+type ModelPickerSectionsStore = {
+  collapsedSections: Record<string, boolean>;
+  toggleSection: (key: string) => void;
+};
+
+export const useModelPickerSectionsStore = create<ModelPickerSectionsStore>()(
+  persist(
+    (set) => ({
+      collapsedSections: {},
+      toggleSection: (key) =>
+        set((state) => {
+          const next = { ...state.collapsedSections };
+          if (next[key]) delete next[key];
+          else next[key] = true;
+          return { collapsedSections: next };
+        }),
+    }),
+    {
+      name: 'model-picker-collapsed-sections',
+      version: 1,
+    },
+  ),
+);

packages/ui/src/stores/useUIStore.ts

@@ -577,6 +577,7 @@ interface UIStore {
 
   favoriteModels: Array<{ providerID: string; modelID: string }>;
   hiddenModels: Array<{ providerID: string; modelID: string }>;
+  providerOrder: string[];
   collapsedModelProviders: string[];
   recentModels: Array<{ providerID: string; modelID: string }>;
   recentAgents: string[];
@@ -727,6 +728,7 @@ interface UIStore {
     overProviderID: string,
     overModelID: string,
   ) => void;
+  setProviderOrder: (orderedProviderIDs: string[]) => void;
   toggleHiddenModel: (providerID: string, modelID: string) => void;
   isHiddenModel: (providerID: string, modelID: string) => boolean;
   hideAllModels: (providerID: string, modelIDs: string[]) => void;
@@ -861,6 +863,7 @@ export const useUIStore = create<UIStore>()(
         mobileKeyboardMode: getStoredMobileKeyboardMode(),
         favoriteModels: [],
         hiddenModels: [],
+        providerOrder: [],
         collapsedModelProviders: [],
         recentModels: [],
         recentAgents: [],
@@ -1735,6 +1738,17 @@ export const useUIStore = create<UIStore>()(
           });
         },
 
+        setProviderOrder: (orderedProviderIDs) => {
+          set((state) => {
+            const next = orderedProviderIDs.filter((id) => typeof id === 'string' && id.length > 0);
+            const current = state.providerOrder;
+            if (current.length === next.length && current.every((id, index) => id === next[index])) {
+              return state;
+            }
+            return { providerOrder: next };
+          });
+        },
+
         toggleHiddenModel: (providerID, modelID) => {
           set((state) => {
             const exists = state.hiddenModels.some(
@@ -2217,6 +2231,7 @@ export const useUIStore = create<UIStore>()(
           cornerRadius: state.cornerRadius,
           favoriteModels: state.favoriteModels,
           hiddenModels: state.hiddenModels,
+          providerOrder: state.providerOrder,
           collapsedModelProviders: state.collapsedModelProviders,
           recentModels: state.recentModels,
           recentAgents: state.recentAgents,