refresh models

src/apps/officer-web/Screens/Dashboard/Settings/ServerSettings/AIHarnessesSection.tsx

@@ -227,6 +227,7 @@ export const AIHarnessesSection = () => {
         auth,
       });
       queryClient.invalidateQueries({ queryKey: ['PI_MONO_LOCAL_PROVIDERS'] });
+      queryClient.invalidateQueries({ queryKey: ['PI_MONO_LOCAL_HEALTH'] });
       queryClient.invalidateQueries({ queryKey: ['PI_MODELS'] });
       toast.success(`Connected to ${probe.name}`);
       resetLocalForm();
@@ -239,6 +240,7 @@ export const AIHarnessesSection = () => {
   const removeLocalProvider = async (id: string) => {
     await client.delete(`/server-settings/pi-mono/local-providers/${id}`);
     queryClient.invalidateQueries({ queryKey: ['PI_MONO_LOCAL_PROVIDERS'] });
+    queryClient.invalidateQueries({ queryKey: ['PI_MONO_LOCAL_HEALTH'] });
     queryClient.invalidateQueries({ queryKey: ['PI_MODELS'] });
   };
 

src/apps/officer-web/Screens/Dashboard/Settings/SystemSettings.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useCallback, type DragEvent } from 'react';
 import { toast } from 'sonner';
-import { Terminal, Eye, Bot, Settings, X, Plus, Mail, Volume2, Mic, ScanText } from 'lucide-react';
+import { Terminal, Eye, Bot, Settings, X, Plus, Mail, Volume2, Mic, ScanText, RefreshCw } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
@@ -8,6 +8,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { Slider } from '@/components/ui/slider';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { useQueryClient } from '@tanstack/react-query';
+import { useClient } from 'hooks/useClient';
 import type { LayoutNode, PanelComponents } from 'officerdev';
 import { WorkspaceLayout, TerminalView } from 'officerdev';
 import { usePanelChannel } from 'hooks/usePanelChannel';
@@ -338,9 +339,25 @@ const DropZone = ({ label, children, onDrop }: DropZoneProps) => {
 };
 
 function ModelVisibilitySection() {
+  const client = useClient();
+  const queryClient = useQueryClient();
   const { policy, savePolicy } = useAccessPolicy();
   const piModels = usePiModels();
   const [activeProvider, setActiveProvider] = useUserState<string>('model-visibility-provider', '');
+  const [refreshing, setRefreshing] = useState(false);
+
+  const refreshModels = async () => {
+    setRefreshing(true);
+    try {
+      await client.post('/server-settings/pi-mono/local-providers/refresh');
+      queryClient.invalidateQueries({ queryKey: ['PI_MODELS'] });
+      toast.success('Models refreshed');
+    } catch {
+      toast.error('Failed to refresh models');
+    } finally {
+      setRefreshing(false);
+    }
+  };
 
   const enabledModels = policy.allowedModels;
 
@@ -419,7 +436,7 @@ function ModelVisibilitySection() {
   return (
     <div className="grid gap-4">
       {/* Provider tabs */}
-      <div className="flex flex-wrap gap-1 border-b border-duck-dark/10 dark:border-foreground/10 pb-1">
+      <div className="flex flex-wrap items-center gap-1 border-b border-duck-dark/10 dark:border-foreground/10 pb-1">
         {providers.map((p) => (
           <button
             key={p}
@@ -433,6 +450,15 @@ function ModelVisibilitySection() {
             {displayProviderName(p)}
           </button>
         ))}
+        <button
+          type="button"
+          onClick={refreshModels}
+          disabled={refreshing}
+          className="ml-auto p-1.5 rounded hover:bg-duck-teal/10 cursor-pointer transition-colors disabled:opacity-30"
+          title="Refresh models from providers"
+        >
+          <RefreshCw className={`h-3.5 w-3.5 text-duck-teal ${refreshing ? 'animate-spin' : ''}`} />
+        </button>
       </div>
 
       {/* Enabled section */}