pi-mono

src/apps/officer-web/App.tsx

@@ -37,8 +37,7 @@ export function App() {
           <Routes>
             <Route path="/" element={<Dashboard.HomeScreen />} />
             <Route path="/settings/profile" element={<Dashboard.ProfileSettings />} />
-            <Route path="/settings/ai" element={<Dashboard.AISettings />} />
-            <Route path="/settings/server" element={<Dashboard.ServerSettings />} />
+            <Route path="/settings/system" element={<Dashboard.SystemSettings />} />
             <Route path="/settings/resources" element={<Dashboard.ResourceSettings />} />
             <Route path="/automation" element={<Dashboard.Automation />} />
             <Route path="/chat" element={<Dashboard.SessionListPage />} />
@@ -46,6 +45,8 @@ export function App() {
             <Route path="/chat/:sessionId" element={<Dashboard.SessionListPage />} />
             <Route path="/chat/opencode/new" element={<Dashboard.SessionListPage provider="opencode" isNew />} />
             <Route path="/chat/opencode/:sessionId" element={<Dashboard.SessionListPage provider="opencode" />} />
+            <Route path="/chat/pi-mono/new" element={<Dashboard.SessionListPage provider="pi-mono" isNew />} />
+            <Route path="/chat/pi-mono/:sessionId" element={<Dashboard.SessionListPage provider="pi-mono" />} />
             <Route path="/plans" element={<Dashboard.Plans />} />
             <Route path="/files" element={<Dashboard.FilesPage />} />
 

src/apps/officer-web/Screens/Dashboard/CapabilityPage.tsx

@@ -8,12 +8,13 @@ import { ArrowLeft, Pencil, Plus, Check, X, Trash2, Search, ChevronRight } from
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
 import { useClient } from 'hooks/useClient';
-import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
+import { useVisibleClaudeModels, useVisibleOpenCodeModels, useVisiblePiMonoModels } from '@/state/useModels';
 import { useSettings } from '@/state/useSettings';
 import { Card } from '@/components/Card';
 import type { ChatMessage } from 'apps/Chat';
 import { useClaude } from '@/Screens/Dashboard/Chat/useClaude';
 import { useOpenCode } from '@/Screens/Dashboard/Chat/useOpenCode';
+import { usePiMono } from '@/Screens/Dashboard/Chat/usePiMono';
 import { EmbeddableChat } from '@/Screens/Dashboard/Chat/EmbeddableChat';
 type CapabilitySummary = {
   dirName: string;
@@ -60,7 +61,7 @@ type CapabilityChatProps = {
 };
 
 type CapabilityChatInnerProps = CapabilityChatProps & {
-  onProviderChange: (p: 'claude' | 'opencode') => void;
+  onProviderChange: (p: 'claude' | 'opencode' | 'pi-mono') => void;
 };
 
 const CapabilityChatClaude = ({
@@ -174,15 +175,59 @@ const CapabilityChatOpenCode = ({
   );
 };
 
+const CapabilityChatPiMono = ({
+  kind,
+  filePath,
+  resourceDir,
+  isNew,
+  description,
+  onResponseEnd,
+  onProviderChange,
+}: CapabilityChatInnerProps) => {
+  const piMonoModels = useVisiblePiMonoModels();
+  const seedFile = `${kind.toUpperCase()}.md`;
+  const promptFrontmatter = `<frontmatter>\ninput file: ${filePath}\n${seedFile}: ${filePath}\ndir: ${resourceDir}\n\nBe aware of any extra files alongside the same dir as the ${kind} file we're handling, for possible extra context. You can also, if pertinent, create scripts or other files that will help you in the future.\n</frontmatter>`;
+  const defaultInput = isNew
+    ? description ?? `Help me create the content for this new ${kind} file`
+    : `Help me understand and improve this ${kind} file`;
+
+  const piMono = usePiMono(undefined, undefined, { replaceUrl: false });
+
+  const onResponseEndRef = useRef(onResponseEnd);
+  onResponseEndRef.current = onResponseEnd;
+
+  const wasGenerating = useRef(false);
+  useEffect(() => {
+    if (wasGenerating.current && !piMono.isGenerating) {
+      onResponseEndRef.current?.();
+    }
+    wasGenerating.current = piMono.isGenerating;
+  }, [piMono.isGenerating]);
+
+  return (
+    <EmbeddableChat
+      chat={piMono}
+      provider="pi-mono"
+      availableModels={piMonoModels}
+      onProviderChange={onProviderChange}
+      defaultInput={defaultInput}
+      promptPrefix={promptFrontmatter}
+      className="h-full"
+    />
+  );
+};
+
 export const CapabilityChat = (props: CapabilityChatProps) => {
   const { settings } = useSettings();
-  const [provider, setProvider] = useState<'claude' | 'opencode'>(settings.chat.defaultProvider);
+  const [provider, setProvider] = useState<'claude' | 'opencode' | 'pi-mono'>(settings.chat.defaultProvider);
 
-  return provider === 'claude' ? (
-    <CapabilityChatClaude key="claude" {...props} onProviderChange={setProvider} />
-  ) : (
-    <CapabilityChatOpenCode key="opencode" {...props} onProviderChange={setProvider} />
-  );
+  if (provider === 'claude') {
+    return <CapabilityChatClaude key="claude" {...props} onProviderChange={setProvider} />;
+  }
+  if (provider === 'opencode') {
+    return <CapabilityChatOpenCode key="opencode" {...props} onProviderChange={setProvider} />;
+  }
+  return <CapabilityChatPiMono key="pi-mono" {...props} onProviderChange={setProvider} />;
 };
 
 export const FrontmatterBlock = ({ yaml }: { yaml: string }) => {

src/apps/officer-web/Screens/Dashboard/Chat/ChatPanel.tsx

@@ -12,9 +12,9 @@ export type { Attachment };
 
 type ChatPanelProps = {
   chat: ReturnType<typeof useClaude>;
-  provider?: 'claude' | 'opencode';
+  provider?: 'claude' | 'opencode' | 'pi-mono';
   availableModels?: ModelOption[];
-  onProviderChange?: (provider: 'claude' | 'opencode') => void;
+  onProviderChange?: (provider: 'claude' | 'opencode' | 'pi-mono') => void;
 };
 
 export const ChatPanel = ({ chat, provider = 'claude', availableModels = [], onProviderChange }: ChatPanelProps) => {

src/apps/officer-web/Screens/Dashboard/Chat/EmbeddableChat.tsx

@@ -13,9 +13,9 @@ export type Attachment =
 
 type EmbeddableChatProps = {
   chat: ReturnType<typeof useClaude>;
-  provider?: 'claude' | 'opencode';
+  provider?: 'claude' | 'opencode' | 'pi-mono';
   availableModels?: ModelOption[];
-  onProviderChange?: (provider: 'claude' | 'opencode') => void;
+  onProviderChange?: (provider: 'claude' | 'opencode' | 'pi-mono') => void;
   onBeforeSend?: (text: string) => boolean | Promise<boolean>;
   commandFeedback?: string | null;
   defaultInput?: string;

src/apps/officer-web/Screens/Dashboard/Chat/InputArea.tsx

@@ -61,9 +61,9 @@ type InputAreaProps = {
   isConnected: boolean;
   commandFeedback: string | null;
   textareaRef: RefObject<HTMLTextAreaElement | null>;
-  provider: 'claude' | 'opencode';
+  provider: 'claude' | 'opencode' | 'pi-mono';
   messages: ChatMessage[];
-  onProviderChange?: (provider: 'claude' | 'opencode') => void;
+  onProviderChange?: (provider: 'claude' | 'opencode' | 'pi-mono') => void;
   availableModels: ModelOption[];
   selectedModel: string | null;
   onModelChange: (modelId: string) => void;

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

@@ -5,9 +5,9 @@ import type { ChatMessage } from 'apps/Chat';
 import { OpenCodeModelPicker } from './OpenCodeModelPicker';
 
 type SettingsProps = {
-  provider: 'claude' | 'opencode';
+  provider: 'claude' | 'opencode' | 'pi-mono';
   messages: ChatMessage[];
-  onProviderChange?: (provider: 'claude' | 'opencode') => void;
+  onProviderChange?: (provider: 'claude' | 'opencode' | 'pi-mono') => void;
   availableModels: ModelOption[];
   selectedModel: string | null;
   onModelChange: (modelId: string) => void;
@@ -35,11 +35,11 @@ export const Settings = ({
     <div className="flex items-center justify-between mt-2">
       {messages.length > 0 ? (
         <span className="rounded-md bg-duck-dark/80 px-3 py-1 text-xs font-medium text-white">
-          {provider === 'claude' ? 'Claude' : 'OpenCode'}
+          {provider === 'claude' ? 'Claude' : provider === 'opencode' ? 'OpenCode' : 'Pi'}
         </span>
       ) : (
         <div className="flex items-center gap-1 rounded-lg bg-background/60 p-1">
-          {(['claude', 'opencode'] as const).map((value) => (
+          {(['claude', 'opencode', 'pi-mono'] as const).map((value) => (
             <button
               key={value}
               onClick={() => onProviderChange?.(value)}
@@ -47,7 +47,7 @@ export const Settings = ({
                 provider === value ? 'bg-background text-duck-dark shadow-sm' : 'text-duck-dark/70 hover:text-duck-dark/90'
               } ${!onProviderChange ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`}
             >
-              {value === 'claude' ? 'Claude' : 'OpenCode'}
+              {value === 'claude' ? 'Claude' : value === 'opencode' ? 'OpenCode' : 'Pi'}
             </button>
           ))}
         </div>

src/apps/officer-web/Screens/Dashboard/Chat/usePiMono.ts

@@ -0,0 +1,205 @@
+import { useState, useEffect, useRef } from 'react';
+import { useChatWebSocket } from 'hooks/useChatWebSocket';
+import { useChatSessions } from '@/state/useChatSessions';
+import type { ChatMessage, ServerMessage, TaskInfo } from 'apps/Chat';
+
+const SAVE_DEBOUNCE_MS = 1000;
+
+type UsePiMonoOptions = {
+  replaceUrl?: boolean;
+  taskInfo?: TaskInfo;
+};
+
+export const usePiMono = (initialSessionId?: string, initialModel?: string | null, options?: UsePiMonoOptions) => {
+  const { replaceUrl = true, taskInfo } = options ?? {};
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [streamingText, setStreamingText] = useState('');
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [sessionId, setSessionId] = useState<string | null>(initialSessionId ?? null);
+  const [model, setModel] = useState<string | null>(null);
+  const [selectedModel, setSelectedModel] = useState<string | null>(initialModel ?? null);
+
+  const streamingRef = useRef('');
+  const rafRef = useRef<number | null>(null);
+  const sessionIdRef = useRef<string | null>(initialSessionId ?? null);
+  const saveTimerRef = useRef<number | null>(null);
+
+  const { getMessages, saveMessages } = useChatSessions();
+
+  const token = localStorage.getItem('BEARER_TOKEN');
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const wsUrl = `${protocol}//${window.location.host}/api/harness/pi-mono/ws?token=${token}`;
+
+  const flushStreaming = () => {
+    if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(() => {
+      setStreamingText(streamingRef.current);
+      rafRef.current = null;
+    });
+  };
+
+  const commitStreaming = () => {
+    if (!streamingRef.current) return;
+    setMessages((prev) => [...prev, { role: 'assistant', text: streamingRef.current }]);
+    streamingRef.current = '';
+    setStreamingText('');
+  };
+
+  const handleMessage = (data: unknown) => {
+    const msg = data as ServerMessage;
+
+    switch (msg.type) {
+      case 'session:init':
+        sessionIdRef.current = msg.sessionId;
+        setSessionId(msg.sessionId);
+        setModel(msg.model);
+        if (replaceUrl) window.history.replaceState(null, '', `/chat/pi-mono/${msg.sessionId}`);
+        break;
+
+      case 'system:prompt':
+        setMessages((prev) => [...prev, { role: 'system', text: msg.text }]);
+        break;
+
+      case 'assistant:partial':
+        streamingRef.current += msg.text;
+        flushStreaming();
+        break;
+
+      case 'assistant:text':
+        if (streamingRef.current) {
+          commitStreaming();
+        } else {
+          setMessages((prev) => [...prev, { role: 'assistant', text: msg.text }]);
+        }
+        break;
+
+      case 'tool:use':
+        setMessages((prev) => [
+          ...prev,
+          { role: 'tool', toolName: msg.toolName, toolInput: msg.toolInput, toolUseId: msg.toolUseId },
+        ]);
+        break;
+
+      case 'tool:result':
+        setMessages((prev) =>
+          prev.map((m) =>
+            m.role === 'tool' && m.toolUseId === msg.toolUseId ? { ...m, output: msg.output, isError: msg.isError } : m,
+          ),
+        );
+        break;
+
+      case 'result':
+        commitStreaming();
+        setMessages((prev) => [
+          ...prev,
+          {
+            role: 'result',
+            costUsd: msg.costUsd,
+            durationMs: msg.durationMs,
+            numTurns: msg.numTurns,
+            isError: msg.isError,
+          },
+        ]);
+        setIsGenerating(false);
+        break;
+
+      case 'error':
+        commitStreaming();
+        setMessages((prev) => [...prev, { role: 'error', text: msg.message }]);
+        setIsGenerating(false);
+        break;
+
+      case 'stopped':
+        commitStreaming();
+        setIsGenerating(false);
+        break;
+    }
+  };
+
+  const { isConnected, send } = useChatWebSocket({ url: wsUrl, onMessage: handleMessage });
+
+  // Load messages from server on mount when resuming a session
+  useEffect(() => {
+    if (!initialSessionId) return;
+    getMessages('pi-mono', initialSessionId)
+      .then((data) => {
+        if (Array.isArray(data) && data.length > 0) setMessages(data);
+      })
+      .catch(() => {});
+  }, [initialSessionId]);
+
+  // Debounced save messages to server
+  useEffect(() => {
+    if (!sessionIdRef.current || messages.length === 0) return;
+
+    if (saveTimerRef.current !== null) clearTimeout(saveTimerRef.current);
+
+    const sid = sessionIdRef.current;
+    const snapshot = messages;
+    saveTimerRef.current = window.setTimeout(() => {
+      saveMessages('pi-mono', sid, snapshot).catch(() => {});
+      saveTimerRef.current = null;
+    }, SAVE_DEBOUNCE_MS);
+
+    return () => {
+      if (saveTimerRef.current !== null) {
+        clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = null;
+      }
+    };
+  }, [messages]);
+
+  // Clean up RAF on unmount
+  useEffect(() => {
+    return () => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+
+  const sendPrompt = (
+    text: string,
+    attachmentIds?: string[],
+    images?: { filename: string; dataUrl: string }[],
+    cwd?: { root?: string; path: string },
+  ) => {
+    setMessages((prev) => [...prev, { role: 'user', text, ...(images?.length ? { images } : {}) }]);
+    setIsGenerating(true);
+    streamingRef.current = '';
+    setStreamingText('');
+
+    const imageData = images
+      ?.map((img) => {
+        const match = img.dataUrl.match(/^data:([^;]+);base64,(.+)$/);
+        return match ? { mediaType: match[1], data: match[2] } : null;
+      })
+      .filter((x): x is { mediaType: string; data: string } => x !== null);
+
+    send({
+      type: 'chat',
+      prompt: text,
+      sessionId: sessionIdRef.current,
+      ...(selectedModel ? { model: selectedModel } : {}),
+      ...(cwd ? { cwd } : {}),
+      ...(attachmentIds?.length ? { attachmentIds } : {}),
+      ...(imageData?.length ? { images: imageData } : {}),
+      ...(taskInfo ? { taskInfo } : {}),
+    });
+  };
+
+  const stopGeneration = () => {
+    send({ type: 'stop' });
+  };
+
+  return {
+    messages,
+    streamingText,
+    isConnected,
+    isGenerating,
+    sessionId,
+    model,
+    selectedModel,
+    setSelectedModel,
+    sendPrompt,
+    stopGeneration,
+  };
+};

src/apps/officer-web/Screens/Dashboard/ChatHistory/ChatDetailPanel.tsx

@@ -3,14 +3,15 @@ import { useLocation } from 'react-router';
 import { Trash2, Archive } from 'lucide-react';
 import { usePanelChannel } from 'hooks/usePanelChannel';
 import { useChatSessions } from '@/state/useChatSessions';
-import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
+import { useVisibleClaudeModels, useVisibleOpenCodeModels, useVisiblePiMonoModels } from '@/state/useModels';
 import { useClaude } from '@/Screens/Dashboard/Chat/useClaude';
 import { useOpenCode } from '@/Screens/Dashboard/Chat/useOpenCode';
+import { usePiMono } from '@/Screens/Dashboard/Chat/usePiMono';
 import { EmbeddableChat } from '@/Screens/Dashboard/Chat/EmbeddableChat';
 
 export type SelectedSession = {
   id: string;
-  provider: 'claude' | 'opencode';
+  provider: 'claude' | 'opencode' | 'pi-mono';
   model?: string | null;
 } | null;
 
@@ -26,7 +27,7 @@ type ChatLocationState = {
 } | null;
 
 type DetailBarProps = {
-  provider: 'claude' | 'opencode';
+  provider: 'claude' | 'opencode' | 'pi-mono';
   sessionTitle: string | undefined;
   isConnected: boolean;
   isGenerating: boolean;
@@ -138,7 +139,33 @@ const OpenCodeInner = ({ sessionId, model }: InnerProps) => {
   );
 };
 
-const NewClaudeInner = ({ onProviderChange }: { onProviderChange: (p: 'claude' | 'opencode') => void }) => {
+const PiMonoInner = ({ sessionId, model }: InnerProps) => {
+  const chat = usePiMono(sessionId, model, { replaceUrl: false });
+  const models = useVisiblePiMonoModels();
+  const { sessions, deleteSession } = useChatSessions();
+  const [, setSelected] = usePanelChannel<SelectedSession>(CHANNEL, null);
+  const sessionTitle = sessions.find((s) => s.id === sessionId)?.title;
+
+  return (
+    <div className="flex flex-col h-full">
+      <DetailBar
+        provider="pi-mono"
+        sessionTitle={sessionTitle}
+        isConnected={chat.isConnected}
+        isGenerating={chat.isGenerating}
+        onArchive={undefined}
+        onDelete={async () => {
+          await deleteSession('pi-mono', sessionId);
+          setSelected(null);
+          window.history.replaceState(null, '', '/chat');
+        }}
+      />
+      <EmbeddableChat chat={chat} provider="pi-mono" availableModels={models} className="flex-1 min-h-0" />
+    </div>
+  );
+};
+
+const NewClaudeInner = ({ onProviderChange }: { onProviderChange: (p: 'claude' | 'opencode' | 'pi-mono') => void }) => {
   const location = useLocation();
   const locationState = location.state as ChatLocationState;
   const initialSentRef = useRef(false);
@@ -189,7 +216,7 @@ const NewClaudeInner = ({ onProviderChange }: { onProviderChange: (p: 'claude' |
   );
 };
 
-const NewOpenCodeInner = ({ onProviderChange }: { onProviderChange: (p: 'claude' | 'opencode') => void }) => {
+const NewOpenCodeInner = ({ onProviderChange }: { onProviderChange: (p: 'claude' | 'opencode' | 'pi-mono') => void }) => {
   const location = useLocation();
   const locationState = location.state as ChatLocationState;
   const initialSentRef = useRef(false);
@@ -239,8 +266,58 @@ const NewOpenCodeInner = ({ onProviderChange }: { onProviderChange: (p: 'claude'
   );
 };
 
+const NewPiMonoInner = ({ onProviderChange }: { onProviderChange: (p: 'claude' | 'opencode' | 'pi-mono') => void }) => {
+  const location = useLocation();
+  const locationState = location.state as ChatLocationState;
+  const initialSentRef = useRef(false);
+  const chat = usePiMono();
+  const models = useVisiblePiMonoModels();
+  const [, setSelected] = usePanelChannel<SelectedSession>(CHANNEL, null);
+
+  useEffect(() => {
+    if (chat.sessionId) {
+      setSelected({ id: chat.sessionId, provider: 'pi-mono', model: chat.model });
+    }
+  }, [chat.sessionId]);
+
+  useEffect(() => {
+    if (!locationState || initialSentRef.current || !chat.isConnected) return;
+    if (locationState.prefillInput) {
+      initialSentRef.current = true;
+      window.history.replaceState({}, '', location.pathname);
+      return;
+    }
+    if (!locationState.initialMessage) return;
+    initialSentRef.current = true;
+    if (locationState.model) chat.setSelectedModel(locationState.model);
+    chat.sendPrompt(locationState.initialMessage, locationState.attachmentIds, locationState.images);
+    window.history.replaceState({}, '', location.pathname);
+  }, [chat.isConnected, location.state]);
+
+  return (
+    <div className="flex flex-col h-full">
+      <DetailBar
+        provider="pi-mono"
+        sessionTitle={undefined}
+        isConnected={chat.isConnected}
+        isGenerating={chat.isGenerating}
+        onArchive={undefined}
+        onDelete={undefined}
+      />
+      <EmbeddableChat
+        chat={chat}
+        provider="pi-mono"
+        availableModels={models}
+        onProviderChange={onProviderChange}
+        defaultInput={locationState?.prefillInput ?? ''}
+        className="flex-1 min-h-0"
+      />
+    </div>
+  );
+};
+
 type NewChatPanelProps = {
-  initialProvider?: 'claude' | 'opencode';
+  initialProvider?: 'claude' | 'opencode' | 'pi-mono';
 };
 
 const NewChatPanel = ({ initialProvider = 'claude' }: NewChatPanelProps) => {
@@ -248,24 +325,28 @@ const NewChatPanel = ({ initialProvider = 'claude' }: NewChatPanelProps) => {
 
   const provider = selected?.provider ?? initialProvider;
 
-  const handleProviderChange = (p: 'claude' | 'opencode') => {
+  const handleProviderChange = (p: 'claude' | 'opencode' | 'pi-mono') => {
     setSelected({ id: 'new', provider: p });
   };
 
   // Once a session is created, the inner component updates selected via the channel
   if (selected && selected.id !== 'new') {
-    return selected.provider === 'claude' ? (
-      <ClaudeInner key={selected.id} sessionId={selected.id} model={selected.model} />
-    ) : (
-      <OpenCodeInner key={selected.id} sessionId={selected.id} model={selected.model} />
-    );
+    if (selected.provider === 'claude') {
+      return <ClaudeInner key={selected.id} sessionId={selected.id} model={selected.model} />;
+    }
+    if (selected.provider === 'opencode') {
+      return <OpenCodeInner key={selected.id} sessionId={selected.id} model={selected.model} />;
+    }
+    return <PiMonoInner key={selected.id} sessionId={selected.id} model={selected.model} />;
   }
 
-  return provider === 'claude' ? (
-    <NewClaudeInner key="new-claude" onProviderChange={handleProviderChange} />
-  ) : (
-    <NewOpenCodeInner key="new-opencode" onProviderChange={handleProviderChange} />
-  );
+  if (provider === 'claude') {
+    return <NewClaudeInner key="new-claude" onProviderChange={handleProviderChange} />;
+  }
+  if (provider === 'opencode') {
+    return <NewOpenCodeInner key="new-opencode" onProviderChange={handleProviderChange} />;
+  }
+  return <NewPiMonoInner key="new-pi-mono" onProviderChange={handleProviderChange} />;
 };
 
 export const ChatDetailPanel = () => {
@@ -283,9 +364,11 @@ export const ChatDetailPanel = () => {
     return <NewChatPanel key="new" initialProvider={selected.provider} />;
   }
 
-  return selected.provider === 'claude' ? (
-    <ClaudeInner key={selected.id} sessionId={selected.id} model={selected.model} />
-  ) : (
-    <OpenCodeInner key={selected.id} sessionId={selected.id} model={selected.model} />
-  );
+  if (selected.provider === 'claude') {
+    return <ClaudeInner key={selected.id} sessionId={selected.id} model={selected.model} />;
+  }
+  if (selected.provider === 'opencode') {
+    return <OpenCodeInner key={selected.id} sessionId={selected.id} model={selected.model} />;
+  }
+  return <PiMonoInner key={selected.id} sessionId={selected.id} model={selected.model} />;
 };

src/apps/officer-web/Screens/Dashboard/ChatHistory/Screen.tsx

@@ -4,7 +4,7 @@ import { usePanelChannel } from 'hooks/usePanelChannel';
 import { useChatSessions } from '@/state/useChatSessions';
 import type { SelectedSession } from './ChatDetailPanel';
 
-type Filter = 'all' | 'claude' | 'opencode';
+type Filter = 'all' | 'claude' | 'opencode' | 'pi-mono';
 
 export const SessionList = () => {
   const [filter, setFilter] = useState<Filter>('all');
@@ -29,11 +29,16 @@ export const SessionList = () => {
 
   const handleSelect = (session: (typeof sessions)[number]) => {
     setSelected({ id: session.id, provider: session.provider, model: session.model ?? null });
-    const path = session.provider === 'claude' ? `/chat/${session.id}` : `/chat/opencode/${session.id}`;
+    const path =
+      session.provider === 'claude'
+        ? `/chat/${session.id}`
+        : session.provider === 'opencode'
+          ? `/chat/opencode/${session.id}`
+          : `/chat/pi-mono/${session.id}`;
     window.history.replaceState(null, '', path);
   };
 
-  const handleDelete = async (provider: 'claude' | 'opencode', id: string) => {
+  const handleDelete = async (provider: 'claude' | 'opencode' | 'pi-mono', id: string) => {
     if (selected?.id === id && selected?.provider === provider) {
       setSelected(null);
       window.history.replaceState(null, '', '/chat');
@@ -49,7 +54,7 @@ export const SessionList = () => {
         <div className="flex items-center gap-2">
           {/* Radio filter */}
           <div className="flex items-center gap-0.5 rounded-lg bg-duck-dark/5 dark:bg-foreground/5 p-0.5">
-            {(['all', 'claude', 'opencode'] as const).map((value) => (
+            {(['all', 'claude', 'opencode', 'pi-mono'] as const).map((value) => (
               <button
                 key={value}
                 onClick={() => setFilter(value)}
@@ -59,7 +64,7 @@ export const SessionList = () => {
                     : 'text-duck-dark/50 dark:text-foreground/50 hover:text-duck-dark/80 dark:hover:text-foreground/80'
                 }`}
               >
-                {value === 'all' ? 'All' : value === 'claude' ? 'Claude' : 'OpenCode'}
+                {value === 'all' ? 'All' : value === 'claude' ? 'Claude' : value === 'opencode' ? 'OpenCode' : 'Pi'}
               </button>
             ))}
           </div>
@@ -114,10 +119,14 @@ export const SessionList = () => {
                     })}
                     <span
                       className={`ml-2 text-xs font-medium ${
-                        session.provider === 'claude' ? 'text-duck-teal' : 'text-duck-orange'
+                        session.provider === 'claude'
+                          ? 'text-duck-teal'
+                          : session.provider === 'opencode'
+                            ? 'text-duck-orange'
+                            : 'text-purple-500'
                       }`}
                     >
-                      {session.provider === 'claude' ? 'Claude' : 'OpenCode'}
+                      {session.provider === 'claude' ? 'Claude' : session.provider === 'opencode' ? 'OpenCode' : 'Pi'}
                     </span>
                     <span className="ml-2 font-mono text-duck-dark/25 dark:text-foreground/25">
                       {session.id.slice(0, 8)}

src/apps/officer-web/Screens/Dashboard/ChatHistory/index.tsx

@@ -22,7 +22,7 @@ const layout: LayoutNode = {
 };
 
 type SessionListPageProps = {
-  provider?: 'claude' | 'opencode';
+  provider?: 'claude' | 'opencode' | 'pi-mono';
   isNew?: boolean;
 };
 

src/apps/officer-web/Screens/Dashboard/Files/Screen/TaskRunnerModal.tsx

@@ -6,8 +6,9 @@ import { cardStyle } from '@/components/Card';
 import type { TaskInfo } from 'apps/Chat';
 import { useClaude } from '@/Screens/Dashboard/Chat/useClaude';
 import { useOpenCode } from '@/Screens/Dashboard/Chat/useOpenCode';
+import { usePiMono } from '@/Screens/Dashboard/Chat/usePiMono';
 import { EmbeddableChat } from '@/Screens/Dashboard/Chat/EmbeddableChat';
-import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
+import { useVisibleClaudeModels, useVisibleOpenCodeModels, useVisiblePiMonoModels } from '@/state/useModels';
 import { useSettings } from '@/state/useSettings';
 import type { TaskSummary } from 'apps/FileBrowser';
 
@@ -39,7 +40,7 @@ type InnerProps = {
   defaultInput: string;
   cwd: { root?: string; path: string };
   initialModel: string | null;
-  onProviderChange: (p: 'claude' | 'opencode') => void;
+  onProviderChange: (p: 'claude' | 'opencode' | 'pi-mono') => void;
 };
 
 const ClaudeInner = ({
@@ -100,6 +101,35 @@ const OpenCodeInner = ({
   );
 };
 
+const PiMonoInner = ({
+  defaultInput,
+  cwd,
+  initialModel,
+  onProviderChange,
+  taskInfo,
+}: InnerProps & { taskInfo: TaskInfo }) => {
+  const chat = usePiMono(undefined, initialModel, { replaceUrl: false, taskInfo });
+  const models = useVisiblePiMonoModels();
+
+  const wasGenerating = useRef(false);
+  useEffect(() => {
+    if (wasGenerating.current && !chat.isGenerating) playDing();
+    wasGenerating.current = chat.isGenerating;
+  }, [chat.isGenerating]);
+
+  return (
+    <EmbeddableChat
+      chat={chat}
+      provider="pi-mono"
+      availableModels={models}
+      onProviderChange={onProviderChange}
+      defaultInput={defaultInput}
+      cwd={cwd}
+      className="flex-1 min-h-0"
+    />
+  );
+};
+
 type TaskRunnerModalProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -113,7 +143,7 @@ type TaskRunnerModalProps = {
 export const TaskRunnerModal = ({ open, onOpenChange, task, entryName, entryType, cwd = { path: '' }, promptOverride }: TaskRunnerModalProps) => {
   const { settings } = useSettings();
   const taskSettings = settings.tasks;
-  const [provider, setProvider] = useState<'claude' | 'opencode'>(taskSettings.defaultProvider);
+  const [provider, setProvider] = useState<'claude' | 'opencode' | 'pi-mono'>(taskSettings.defaultProvider);
   const defaultInput = promptOverride
     ?? (entryName && entryType
       ? `Read the task instructions at ${task.filePath} and execute them on the ${entryType}: ${entryName}`
@@ -150,7 +180,7 @@ export const TaskRunnerModal = ({ open, onOpenChange, task, entryName, entryType
               onProviderChange={setProvider}
               taskInfo={taskInfo}
             />
-          ) : (
+          ) : provider === 'opencode' ? (
             <OpenCodeInner
               key="opencode"
               defaultInput={defaultInput}
@@ -159,6 +189,15 @@ export const TaskRunnerModal = ({ open, onOpenChange, task, entryName, entryType
               onProviderChange={setProvider}
               taskInfo={taskInfo}
             />
+          ) : (
+            <PiMonoInner
+              key="pi-mono"
+              defaultInput={defaultInput}
+              cwd={cwd}
+              initialModel={taskSettings.defaultProvider === 'pi-mono' ? taskSettings.defaultModel : null}
+              onProviderChange={setProvider}
+              taskInfo={taskInfo}
+            />
           )}
         </DialogPrimitive.Content>
       </DialogPortal>

src/apps/officer-web/Screens/Dashboard/Home/ChatLauncher.tsx

@@ -23,7 +23,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { useSettings } from '@/state/useSettings';
-import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
+import { useVisibleClaudeModels, useVisibleOpenCodeModels, useVisiblePiMonoModels } from '@/state/useModels';
 import type { Attachment } from '@/Screens/Dashboard/Chat/EmbeddableChat';
 
 export const ChatLauncher = () => {
@@ -31,9 +31,10 @@ export const ChatLauncher = () => {
   const { settings } = useSettings();
   const claudeModels = useVisibleClaudeModels();
   const openCodeModels = useVisibleOpenCodeModels();
+  const piMonoModels = useVisiblePiMonoModels();
 
   const client = useClient();
-  const [provider, setProvider] = useState<'claude' | 'opencode'>(settings.chat.defaultProvider);
+  const [provider, setProvider] = useState<'claude' | 'opencode' | 'pi-mono'>(settings.chat.defaultProvider);
   const [model, setModel] = useState<string | null>(settings.chat.defaultModel);
   const [input, setInput] = useState('');
   const [attachments, setAttachments] = useState<Attachment[]>([]);
@@ -47,7 +48,7 @@ export const ChatLauncher = () => {
     setModel(settings.chat.defaultModel);
   }, [settings.chat.defaultProvider, settings.chat.defaultModel]);
 
-  const models = provider === 'claude' ? claudeModels : openCodeModels;
+  const models = provider === 'claude' ? claudeModels : provider === 'opencode' ? openCodeModels : piMonoModels;
 
   const handleAttachWebpage = async (url: string) => {
     const idx = attachments.length;
@@ -124,7 +125,8 @@ export const ChatLauncher = () => {
       attachmentIds.push(a.attachmentId);
     }
 
-    const route = provider === 'claude' ? '/chat/new' : '/chat/opencode/new';
+    const route =
+      provider === 'claude' ? '/chat/new' : provider === 'opencode' ? '/chat/opencode/new' : '/chat/pi-mono/new';
     navigate(route, {
       state: {
         initialMessage: prompt,
@@ -257,7 +259,7 @@ export const ChatLauncher = () => {
 
         <div className="flex items-center justify-between px-4 pb-3">
           <div className="flex items-center gap-1 rounded-lg bg-duck-dark/5 p-1">
-            {(['claude', 'opencode'] as const).map((value) => (
+            {(['claude', 'opencode', 'pi-mono'] as const).map((value) => (
               <button
                 key={value}
                 onClick={() => {
@@ -270,7 +272,7 @@ export const ChatLauncher = () => {
                     : 'text-duck-dark/50 hover:text-duck-dark/70'
                 }`}
               >
-                {value === 'claude' ? 'Claude' : 'OpenCode'}
+                {value === 'claude' ? 'Claude' : value === 'opencode' ? 'OpenCode' : 'Pi'}
               </button>
             ))}
           </div>

src/apps/officer-web/Screens/Dashboard/Layout/Header/UserMenu.tsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router';
 import * as Dropdown from '@/components/ui/dropdown-menu';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { User, LogOut, Server, Package, Bot, Sun, Moon } from 'lucide-react';
+import { User, LogOut, Settings, Package, Sun, Moon } from 'lucide-react';
 import { useAuth } from 'hooks/useAuth';
 import { useTranslation } from '@/lib/i18n';
 import { useColorMode } from '@/components/ui/ThemeProvider';
@@ -42,15 +42,9 @@ export function UserMenu() {
           </Link>
         </DropdownMenuItem>
         <DropdownMenuItem asChild className="cursor-pointer">
-          <Link to="/settings/ai">
-            <Bot className="mr-2 h-4 w-4" />
-            {t('header.userMenu.aiSettings')}
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild className="cursor-pointer">
-          <Link to="/settings/server">
-            <Server className="mr-2 h-4 w-4" />
-            {t('header.userMenu.serverSettings')}
+          <Link to="/settings/system">
+            <Settings className="mr-2 h-4 w-4" />
+            {t('header.userMenu.systemSettings')}
           </Link>
         </DropdownMenuItem>
         <DropdownMenuItem asChild className="cursor-pointer">

src/apps/officer-web/Screens/Dashboard/Settings/ProfileSettings/TaskDefaults.tsx

@@ -12,12 +12,13 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { useSettings } from '@/state/useSettings';
-import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
+import { useVisibleClaudeModels, useVisibleOpenCodeModels, useVisiblePiMonoModels } from '@/state/useModels';
 
 export const TaskDefaults = () => {
   const { settings, saveSettings } = useSettings();
   const claudeModels = useVisibleClaudeModels();
   const openCodeModels = useVisibleOpenCodeModels();
+  const piMonoModels = useVisiblePiMonoModels();
   const [isSaving, setIsSaving] = useState(false);
 
   const [model, setModel] = useState<string | null>(settings.tasks.defaultModel);
@@ -26,24 +27,28 @@ export const TaskDefaults = () => {
     setModel(settings.tasks.defaultModel);
   }, [settings]);
 
-  const openCodeGroups = useMemo(() => {
+  const buildGroups = (models: { id: string; name: string; provider?: string }[], fallback: string) => {
     const groups: Record<string, { id: string; name: string }[]> = {};
-    for (const m of openCodeModels) {
-      const provider = m.provider ?? 'OpenCode';
+    for (const m of models) {
+      const provider = m.provider ?? fallback;
       if (!groups[provider]) groups[provider] = [];
       groups[provider].push({ id: m.id, name: m.name });
     }
     return Object.entries(groups)
       .sort(([a], [b]) => a.localeCompare(b))
       .map(([provider, models]) => ({ provider, models: models.sort((a, b) => a.name.localeCompare(b.name)) }));
-  }, [openCodeModels]);
+  };
+
+  const openCodeGroups = useMemo(() => buildGroups(openCodeModels, 'OpenCode'), [openCodeModels]);
+  const piMonoGroups = useMemo(() => buildGroups(piMonoModels, 'Pi'), [piMonoModels]);
 
   const handleSave = async () => {
     if (isSaving) return;
     setIsSaving(true);
     try {
+      const isPiMono = piMonoModels.some((m) => m.id === model);
       const isOpenCode = openCodeModels.some((m) => m.id === model);
-      const defaultProvider = isOpenCode ? ('opencode' as const) : ('claude' as const);
+      const defaultProvider = isPiMono ? ('pi-mono' as const) : isOpenCode ? ('opencode' as const) : ('claude' as const);
       await saveSettings({ ...settings, tasks: { defaultProvider, defaultModel: model } });
       toast.success('Task defaults saved');
     } catch {
@@ -82,6 +87,16 @@ export const TaskDefaults = () => {
                 ))}
               </SelectGroup>
             ))}
+            {piMonoGroups.map(({ provider, models }) => (
+              <SelectGroup key={`pi-${provider}`}>
+                <SelectLabel>{provider} (Pi)</SelectLabel>
+                {models.map((m) => (
+                  <SelectItem key={`pi:${provider}:${m.id}`} value={m.id}>
+                    {m.name}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            ))}
           </SelectContent>
         </Select>
       </Label>

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

@@ -14,9 +14,10 @@ export const AIHarnessesSection = () => {
   const client = useClient();
   const queryClient = useQueryClient();
   const { aiHarnesses, saveSettings } = useServerSettings();
-  const [installing, setInstalling] = useState<{ claudeCode: boolean; opencode: boolean }>({
+  const [installing, setInstalling] = useState<{ claudeCode: boolean; opencode: boolean; piMono: boolean }>({
     claudeCode: false,
     opencode: false,
+    piMono: false,
   });
   const [copied, setCopied] = useState<string | null>(null);
 
@@ -40,6 +41,16 @@ export const AIHarnessesSection = () => {
     },
   });
 
+  const { data: piMonoVersion, isLoading: piMonoLoading } = useQuery({
+    queryKey: ['PI_MONO_VERSION'],
+    queryFn: () => client.get<VersionInfo>('/server-settings/pi-mono/version'),
+    enabled: !!aiHarnesses?.piMono,
+    refetchInterval: (query) => {
+      const data = query.state.data;
+      return data?.version && !data?.globalPath ? 1000 : false;
+    },
+  });
+
   const { data: opencodeAuth } = useQuery({
     queryKey: ['OPENCODE_AUTH'],
     queryFn: () => client.get<OpencodeAuthInfo>('/server-settings/opencode/auth'),
@@ -54,7 +65,7 @@ export const AIHarnessesSection = () => {
     refetchInterval: (query) => (!query.state.data?.authenticated ? 2000 : false),
   });
 
-  const toggleHarness = (key: 'claudeCode' | 'opencode', checked: boolean) => {
+  const toggleHarness = (key: 'claudeCode' | 'opencode' | 'piMono', checked: boolean) => {
     const updated = { ...aiHarnesses, [key]: checked };
     saveSettings({ aiHarnesses: updated });
   };
@@ -79,6 +90,16 @@ export const AIHarnessesSection = () => {
     }
   };
 
+  const installPiMono = async () => {
+    setInstalling((prev) => ({ ...prev, piMono: true }));
+    try {
+      const result = await client.post<VersionInfo>('/server-settings/pi-mono/install');
+      queryClient.setQueryData(['PI_MONO_VERSION'], result);
+    } finally {
+      setInstalling((prev) => ({ ...prev, piMono: false }));
+    }
+  };
+
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text);
     setCopied(text);
@@ -210,6 +231,40 @@ export const AIHarnessesSection = () => {
           </div>
         )}
       </div>
+
+      <div>
+        <label className="flex items-center gap-3 cursor-pointer">
+          <Checkbox
+            checked={!!aiHarnesses?.piMono}
+            onCheckedChange={(checked) => toggleHarness('piMono', !!checked)}
+          />
+          <span className="text-sm font-medium text-duck-dark">Pi</span>
+        </label>
+        {aiHarnesses?.piMono && (
+          <div className="ml-7 mt-2 text-xs text-duck-dark/50">
+            {piMonoLoading ? (
+              'Checking version...'
+            ) : piMonoVersion?.version ? (
+              <>
+                <div>{piMonoVersion.version}</div>
+                <div>{piMonoVersion.path}</div>
+                {!piMonoVersion.globalPath && piMonoVersion.path && (
+                  <CopyCommand command={`sudo ln -s ${piMonoVersion.path} /usr/local/bin/pi`} />
+                )}
+              </>
+            ) : (
+              <Button
+                size="sm"
+                className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90"
+                onClick={installPiMono}
+                disabled={installing.piMono}
+              >
+                {installing.piMono ? 'Installing...' : 'Install'}
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
     </div>
   );
 };

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

@@ -1,46 +0,0 @@
-import { useMemo } from 'react';
-import { Terminal, Server } from 'lucide-react';
-import type { LayoutNode, PanelComponents } from '@/components/Workspace';
-import { WorkspaceLayout } from '@/components/Workspace';
-import { appRegistry } from '../../Workspaces/app-registry';
-import { createSettingsPanelComponents, type SettingsSection } from '../SettingsPanel';
-import { AIHarnessesSection } from './AIHarnessesSection';
-
-const GLOBAL_KEY = 'SERVER_SETTINGS_SELECTED';
-
-const sections: SettingsSection[] = [
-  { key: 'ai-harnesses', icon: Terminal, title: 'AI Harnesses', description: 'AI coding tools setup', content: <AIHarnessesSection /> },
-];
-
-const { Sidebar, Content } = createSettingsPanelComponents({
-  globalKey: GLOBAL_KEY,
-  sidebarIcon: Server,
-  sidebarLabel: 'Server',
-  sections,
-});
-
-const layout: LayoutNode = {
-  type: 'group',
-  id: 'server-root',
-  direction: 'horizontal',
-  children: [
-    { node: { type: 'panel', id: 'server-left', appType: null }, size: 20 },
-    { node: { type: 'panel', id: 'server-right', appType: null }, size: 80 },
-  ],
-};
-
-export const ServerSettings = () => {
-  const panelComponents: PanelComponents = useMemo(
-    () => ({
-      'server-left': Sidebar,
-      'server-right': Content,
-    }),
-    [],
-  );
-
-  return (
-    <div className="h-full w-full pt-2">
-      <WorkspaceLayout layout={layout} onLayoutChange={() => {}} registry={appRegistry} components={panelComponents} />
-    </div>
-  );
-};

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

@@ -12,21 +12,52 @@ export type SettingsSection = {
   content: ReactNode;
 };
 
+export type SettingsSectionGroup = {
+  label: string;
+  icon: LucideIcon;
+  sections: SettingsSection[];
+};
+
 type SettingsSidebarProps = {
   globalKey: string;
   icon: LucideIcon;
   label: string;
   sections: SettingsSection[];
+  groups?: SettingsSectionGroup[];
 };
 
-export const SettingsSidebar = ({ globalKey, icon: Icon, label, sections }: SettingsSidebarProps) => {
-  const [selectedKey, setSelectedKey] = useGlobal<string | null>(globalKey, sections[0]?.key ?? null);
+const SectionButton = ({
+  section,
+  isActive,
+  onClick,
+}: {
+  section: SettingsSection;
+  isActive: boolean;
+  onClick: () => void;
+}) => (
+  <button
+    key={section.key}
+    onClick={onClick}
+    className={`flex items-start gap-2.5 py-2 px-3 rounded-lg text-left cursor-pointer transition-colors ${
+      isActive ? 'bg-duck-teal/10 text-duck-dark dark:text-foreground' : 'text-duck-dark/70 dark:text-foreground/70 hover:bg-duck-dark/5 dark:hover:bg-foreground/5 hover:text-duck-dark dark:hover:text-foreground'
+    }`}
+  >
+    <section.icon className={`h-3.5 w-3.5 shrink-0 mt-0.5 ${isActive ? 'text-duck-teal' : 'text-duck-dark/40 dark:text-foreground/40'}`} />
+    <div className="min-w-0 flex-1">
+      <div className="text-sm font-medium truncate">{section.title}</div>
+      <div className="text-xs text-duck-dark/40 dark:text-foreground/40 truncate">{section.description}</div>
+    </div>
+  </button>
+);
+
+export const SettingsSidebar = ({ globalKey, icon: Icon, label, sections, groups }: SettingsSidebarProps) => {
+  const allSections = groups ? groups.flatMap((g) => g.sections) : sections;
+  const [selectedKey, setSelectedKey] = useGlobal<string | null>(globalKey, allSections[0]?.key ?? null);
   const [search, setSearch] = useState('');
 
   const query = search.toLowerCase();
-  const filtered = sections.filter(
-    (s) => s.title.toLowerCase().includes(query) || s.description.toLowerCase().includes(query),
-  );
+  const matchesSearch = (s: SettingsSection) =>
+    s.title.toLowerCase().includes(query) || s.description.toLowerCase().includes(query);
 
   return (
     <div className="flex flex-col h-full overflow-y-auto">
@@ -40,24 +71,37 @@ export const SettingsSidebar = ({ globalKey, icon: Icon, label, sections }: Sett
         <Input placeholder="Search..." value={search} onChange={(ev) => setSearch(ev.target.value)} className="h-8 text-xs" />
       </div>
       <div className="flex flex-col gap-0.5 px-3 overflow-y-auto flex-1">
-        {filtered.map((s) => {
-          const isActive = selectedKey === s.key;
-          return (
-            <button
-              key={s.key}
-              onClick={() => setSelectedKey(s.key)}
-              className={`flex items-start gap-2.5 py-2 px-3 rounded-lg text-left cursor-pointer transition-colors ${
-                isActive ? 'bg-duck-teal/10 text-duck-dark dark:text-foreground' : 'text-duck-dark/70 dark:text-foreground/70 hover:bg-duck-dark/5 dark:hover:bg-foreground/5 hover:text-duck-dark dark:hover:text-foreground'
-              }`}
-            >
-              <s.icon className={`h-3.5 w-3.5 shrink-0 mt-0.5 ${isActive ? 'text-duck-teal' : 'text-duck-dark/40 dark:text-foreground/40'}`} />
-              <div className="min-w-0 flex-1">
-                <div className="text-sm font-medium truncate">{s.title}</div>
-                <div className="text-xs text-duck-dark/40 dark:text-foreground/40 truncate">{s.description}</div>
-              </div>
-            </button>
-          );
-        })}
+        {groups
+          ? groups.map((group) => {
+              const filtered = group.sections.filter(matchesSearch);
+              if (filtered.length === 0) return null;
+              return (
+                <div key={group.label}>
+                  <div className="flex items-center gap-2 px-3 pt-3 pb-1">
+                    <group.icon className="h-3 w-3 text-duck-dark/30 dark:text-foreground/30" />
+                    <span className="text-[11px] font-semibold uppercase tracking-wider text-duck-dark/30 dark:text-foreground/30">
+                      {group.label}
+                    </span>
+                  </div>
+                  {filtered.map((s) => (
+                    <SectionButton
+                      key={s.key}
+                      section={s}
+                      isActive={selectedKey === s.key}
+                      onClick={() => setSelectedKey(s.key)}
+                    />
+                  ))}
+                </div>
+              );
+            })
+          : sections.filter(matchesSearch).map((s) => (
+              <SectionButton
+                key={s.key}
+                section={s}
+                isActive={selectedKey === s.key}
+                onClick={() => setSelectedKey(s.key)}
+              />
+            ))}
       </div>
     </div>
   );
@@ -96,13 +140,15 @@ type CreateSettingsPanelParams = {
   globalKey: string;
   sidebarIcon: LucideIcon;
   sidebarLabel: string;
-  sections: SettingsSection[];
+  sections?: SettingsSection[];
+  groups?: SettingsSectionGroup[];
 };
 
-export const createSettingsPanelComponents = ({ globalKey, sidebarIcon, sidebarLabel, sections }: CreateSettingsPanelParams) => {
+export const createSettingsPanelComponents = ({ globalKey, sidebarIcon, sidebarLabel, sections = [], groups }: CreateSettingsPanelParams) => {
+  const allSections = groups ? groups.flatMap((g) => g.sections) : sections;
   const Sidebar: ComponentType = () => (
-    <SettingsSidebar globalKey={globalKey} icon={sidebarIcon} label={sidebarLabel} sections={sections} />
+    <SettingsSidebar globalKey={globalKey} icon={sidebarIcon} label={sidebarLabel} sections={allSections} groups={groups} />
   );
-  const Content: ComponentType = () => <SettingsContent globalKey={globalKey} sections={sections} />;
+  const Content: ComponentType = () => <SettingsContent globalKey={globalKey} sections={allSections} />;
   return { Sidebar, Content };
 };

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

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from 'react';
 import { toast } from 'sonner';
-import { Terminal, Eye, Trash2, Bot } from 'lucide-react';
+import { Terminal, Eye, Trash2, Bot, Server, Puzzle, Settings } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
@@ -13,46 +13,62 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import type { LayoutNode, PanelComponents } from '@/components/Workspace';
 import { WorkspaceLayout } from '@/components/Workspace';
 import { appRegistry } from '../Workspaces/app-registry';
-import { createSettingsPanelComponents, type SettingsSection } from './SettingsPanel';
+import { createSettingsPanelComponents, type SettingsSectionGroup } from './SettingsPanel';
 import { useSettings } from '@/state/useSettings';
 import { useUserState } from '@/state/useUserState';
 import {
   useClaudeModels,
   useOpenCodeModels,
+  usePiMonoModels,
   useVisibleClaudeModels,
   useVisibleOpenCodeModels,
+  useVisiblePiMonoModels,
 } from '@/state/useModels';
 import type { UserSettings } from '@/state/types/user-settings';
+import { AIHarnessesSection } from './ServerSettings/AIHarnessesSection';
+import { PluginsSection } from './ServerSettings/PluginsSection';
 
-const GLOBAL_KEY = 'AI_SETTINGS_SELECTED';
-
-const sections: SettingsSection[] = [
-  { key: 'chat-defaults', icon: Terminal, title: 'Chat Defaults', description: 'Model, prompt, and temperature', content: <ChatDefaultsSection /> },
-  { key: 'model-visibility', icon: Eye, title: 'Model Visibility', description: 'Enable or disable models', content: <ModelVisibilitySection /> },
+const groups: SettingsSectionGroup[] = [
+  {
+    label: 'Server',
+    icon: Server,
+    sections: [
+      { key: 'ai-harnesses', icon: Terminal, title: 'AI Harnesses', description: 'AI coding tools setup', content: <AIHarnessesSection /> },
+      { key: 'plugins', icon: Puzzle, title: 'Plugins', description: 'Enable or disable plugins', content: <PluginsSection /> },
+    ],
+  },
+  {
+    label: 'AI',
+    icon: Bot,
+    sections: [
+      { key: 'chat-defaults', icon: Terminal, title: 'Chat Defaults', description: 'Model, prompt, and temperature', content: <ChatDefaultsSection /> },
+      { key: 'model-visibility', icon: Eye, title: 'Model Visibility', description: 'Enable or disable models', content: <ModelVisibilitySection /> },
+    ],
+  },
 ];
 
 const { Sidebar, Content } = createSettingsPanelComponents({
-  globalKey: GLOBAL_KEY,
-  sidebarIcon: Bot,
-  sidebarLabel: 'AI',
-  sections,
+  globalKey: 'SYSTEM_SETTINGS_SELECTED',
+  sidebarIcon: Settings,
+  sidebarLabel: 'System',
+  groups,
 });
 
 const layout: LayoutNode = {
   type: 'group',
-  id: 'ai-root',
+  id: 'system-root',
   direction: 'horizontal',
   children: [
-    { node: { type: 'panel', id: 'ai-left', appType: null }, size: 20 },
-    { node: { type: 'panel', id: 'ai-right', appType: null }, size: 80 },
+    { node: { type: 'panel', id: 'system-left', appType: null }, size: 20 },
+    { node: { type: 'panel', id: 'system-right', appType: null }, size: 80 },
   ],
 };
 
-export const AISettings = () => {
+export const SystemSettings = () => {
   const panelComponents: PanelComponents = useMemo(
     () => ({
-      'ai-left': Sidebar,
-      'ai-right': Content,
+      'system-left': Sidebar,
+      'system-right': Content,
     }),
     [],
   );
@@ -64,10 +80,13 @@ export const AISettings = () => {
   );
 };
 
+// --- AI sections ---
+
 function ChatDefaultsSection() {
   const { settings, saveSettings } = useSettings();
   const claudeModels = useVisibleClaudeModels();
   const openCodeModels = useVisibleOpenCodeModels();
+  const piMonoModels = useVisiblePiMonoModels();
   const [isSaving, setIsSaving] = useState(false);
 
   const [model, setModel] = useState<string | null>(settings.chat.defaultModel);
@@ -86,16 +105,18 @@ function ChatDefaultsSection() {
     () => [
       ...claudeModels.map((m) => ({ ...m, provider: 'Claude' })),
       ...openCodeModels.map((m) => ({ ...m, provider: m.provider ?? 'OpenCode' })),
+      ...piMonoModels.map((m) => ({ ...m, provider: m.provider ?? 'Pi' })),
     ],
-    [claudeModels, openCodeModels],
+    [claudeModels, openCodeModels, piMonoModels],
   );
 
   const handleSave = async () => {
     if (isSaving) return;
     setIsSaving(true);
     try {
+      const isPiMono = piMonoModels.some((m) => m.id === model);
       const isOpenCode = openCodeModels.some((m) => m.id === model);
-      const defaultProvider = isOpenCode ? ('opencode' as const) : ('claude' as const);
+      const defaultProvider = isPiMono ? ('pi-mono' as const) : isOpenCode ? ('opencode' as const) : ('claude' as const);
       const updated: UserSettings = {
         ...settings,
         chat: { defaultProvider, defaultModel: model, systemPrompt, temperature, defaultPwd },
@@ -172,7 +193,8 @@ function ModelVisibilitySection() {
   const { settings, saveSettings } = useSettings();
   const claudeModels = useClaudeModels();
   const openCodeModels = useOpenCodeModels();
-  const [subTab, setSubTab] = useUserState('ai-settings-visibility-tab', 'opencode');
+  const piMonoModels = usePiMonoModels();
+  const [subTab, setSubTab] = useUserState('ai-settings-visibility-tab', 'claude');
 
   const enabledModels = settings.ai?.enabledModels ?? [];
   const enabledProviders = settings.ai?.enabledProviders ?? [];
@@ -183,9 +205,9 @@ function ModelVisibilitySection() {
     await saveSettings({ ...settings, ai: { ...settings.ai, enabledModels: newEnabled } });
   };
 
-  const ocGroups = useMemo(() => {
+  const buildProviderGroups = (models: { id: string; name: string; provider?: string }[]) => {
     const groups: Record<string, { id: string; name: string }[]> = {};
-    for (const m of openCodeModels) {
+    for (const m of models) {
       const provider = m.provider ?? 'Other';
       if (!groups[provider]) groups[provider] = [];
       groups[provider].push({ id: m.id, name: m.name });
@@ -193,11 +215,16 @@ function ModelVisibilitySection() {
     return Object.entries(groups)
       .sort(([a], [b]) => a.localeCompare(b))
       .map(([provider, models]) => ({ provider, models: models.sort((a, b) => a.name.localeCompare(b.name)) }));
-  }, [openCodeModels]);
+  };
+
+  const ocGroups = useMemo(() => buildProviderGroups(openCodeModels), [openCodeModels]);
+  const piGroups = useMemo(() => buildProviderGroups(piMonoModels), [piMonoModels]);
 
   const [addingProvider, setAddingProvider] = useState(false);
   const [selectedNewProvider, setSelectedNewProvider] = useState<string>('');
-  const disabledProviders = ocGroups.filter((g) => !enabledProviders.includes(g.provider));
+
+  const currentGroups = subTab === 'opencode' ? ocGroups : piGroups;
+  const disabledProviders = currentGroups.filter((g) => !enabledProviders.includes(g.provider));
 
   const handleEnableProvider = async () => {
     if (!selectedNewProvider) return;
@@ -219,11 +246,14 @@ function ModelVisibilitySection() {
   return (
     <Tabs value={subTab} onValueChange={setSubTab}>
       <TabsList className="w-full mb-4">
+        <TabsTrigger value="claude" className="flex-1 cursor-pointer">
+          Claude
+        </TabsTrigger>
         <TabsTrigger value="opencode" className="flex-1 cursor-pointer">
           OpenCode
         </TabsTrigger>
-        <TabsTrigger value="claude" className="flex-1 cursor-pointer">
-          Claude
+        <TabsTrigger value="pi-mono" className="flex-1 cursor-pointer">
+          Pi
         </TabsTrigger>
       </TabsList>
 
@@ -242,63 +272,129 @@ function ModelVisibilitySection() {
       </TabsContent>
 
       <TabsContent value="opencode">
-        <div className="flex justify-end items-center gap-2 mb-3">
-          {addingProvider ? (
-            <>
-              <Select value={selectedNewProvider} onValueChange={setSelectedNewProvider}>
-                <SelectTrigger className="h-9 flex-1 bg-background/60 border-duck-dark/20 text-duck-dark text-sm">
-                  <SelectValue placeholder="Select provider..." />
-                </SelectTrigger>
-                <SelectContent className="z-[600]">
-                  {disabledProviders.map((g) => (
-                    <SelectItem key={g.provider} value={g.provider}>
-                      {g.provider}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <Button
-                type="button"
-                size="sm"
-                disabled={!selectedNewProvider}
-                onClick={handleEnableProvider}
-                className="cursor-pointer bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold disabled:opacity-50"
-              >
-                Enable
-              </Button>
-            </>
-          ) : (
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="cursor-pointer"
-              onClick={() => setAddingProvider(true)}
-              disabled={disabledProviders.length === 0}
-            >
-              Add Provider
-            </Button>
-          )}
-        </div>
-        {ocGroups.length === 0 ? (
-          <p className="text-sm text-duck-dark/40">No OpenCode models available.</p>
-        ) : (
-          <OpenCodeProviderList
-            groups={ocGroups}
-            enabledProviders={enabledProviders}
-            enabledModels={enabledModels}
-            onToggleModel={toggleModel}
-            onRemoveProvider={handleRemoveProvider}
-          />
-        )}
+        <ProviderGroupTab
+          groups={ocGroups}
+          enabledProviders={enabledProviders}
+          enabledModels={enabledModels}
+          disabledProviders={disabledProviders}
+          addingProvider={addingProvider}
+          selectedNewProvider={selectedNewProvider}
+          emptyLabel="No OpenCode models available."
+          onSetAddingProvider={setAddingProvider}
+          onSetSelectedNewProvider={setSelectedNewProvider}
+          onEnableProvider={handleEnableProvider}
+          onToggleModel={toggleModel}
+          onRemoveProvider={handleRemoveProvider}
+        />
+      </TabsContent>
+
+      <TabsContent value="pi-mono">
+        <ProviderGroupTab
+          groups={piGroups}
+          enabledProviders={enabledProviders}
+          enabledModels={enabledModels}
+          disabledProviders={subTab === 'pi-mono' ? piGroups.filter((g) => !enabledProviders.includes(g.provider)) : disabledProviders}
+          addingProvider={addingProvider}
+          selectedNewProvider={selectedNewProvider}
+          emptyLabel="No Pi models available."
+          onSetAddingProvider={setAddingProvider}
+          onSetSelectedNewProvider={setSelectedNewProvider}
+          onEnableProvider={handleEnableProvider}
+          onToggleModel={toggleModel}
+          onRemoveProvider={handleRemoveProvider}
+        />
       </TabsContent>
     </Tabs>
   );
 }
 
+// --- Shared components ---
+
 type ProviderGroup = { provider: string; models: { id: string; name: string }[] };
 
-type OpenCodeProviderListProps = {
+type ProviderGroupTabProps = {
+  groups: ProviderGroup[];
+  enabledProviders: string[];
+  enabledModels: string[];
+  disabledProviders: ProviderGroup[];
+  addingProvider: boolean;
+  selectedNewProvider: string;
+  emptyLabel: string;
+  onSetAddingProvider: (v: boolean) => void;
+  onSetSelectedNewProvider: (v: string) => void;
+  onEnableProvider: () => void;
+  onToggleModel: (key: string) => void;
+  onRemoveProvider: (provider: string) => void;
+};
+
+const ProviderGroupTab = ({
+  groups,
+  enabledProviders,
+  enabledModels,
+  disabledProviders,
+  addingProvider,
+  selectedNewProvider,
+  emptyLabel,
+  onSetAddingProvider,
+  onSetSelectedNewProvider,
+  onEnableProvider,
+  onToggleModel,
+  onRemoveProvider,
+}: ProviderGroupTabProps) => (
+  <>
+    <div className="flex justify-end items-center gap-2 mb-3">
+      {addingProvider ? (
+        <>
+          <Select value={selectedNewProvider} onValueChange={onSetSelectedNewProvider}>
+            <SelectTrigger className="h-9 flex-1 bg-background/60 border-duck-dark/20 text-duck-dark text-sm">
+              <SelectValue placeholder="Select provider..." />
+            </SelectTrigger>
+            <SelectContent className="z-[600]">
+              {disabledProviders.map((g) => (
+                <SelectItem key={g.provider} value={g.provider}>
+                  {g.provider}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Button
+            type="button"
+            size="sm"
+            disabled={!selectedNewProvider}
+            onClick={onEnableProvider}
+            className="cursor-pointer bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold disabled:opacity-50"
+          >
+            Enable
+          </Button>
+        </>
+      ) : (
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="cursor-pointer"
+          onClick={() => onSetAddingProvider(true)}
+          disabled={disabledProviders.length === 0}
+        >
+          Add Provider
+        </Button>
+      )}
+    </div>
+    {groups.length === 0 ? (
+      <p className="text-sm text-duck-dark/40">{emptyLabel}</p>
+    ) : (
+      <ProviderList
+        groups={groups}
+        enabledProviders={enabledProviders}
+        enabledModels={enabledModels}
+        onToggleModel={onToggleModel}
+        onRemoveProvider={onRemoveProvider}
+      />
+    )}
+  </>
+);
+
+type ProviderListProps = {
   groups: ProviderGroup[];
   enabledProviders: string[];
   enabledModels: string[];
@@ -306,14 +402,14 @@ type OpenCodeProviderListProps = {
   onRemoveProvider: (provider: string) => void;
 };
 
-const OpenCodeProviderList = ({
+const ProviderList = ({
   groups,
   enabledProviders,
   enabledModels,
   onToggleModel,
   onRemoveProvider,
-}: OpenCodeProviderListProps) => {
-  const [openProvider, setOpenProvider] = useUserState<string>('ai-settings-oc-accordion', '');
+}: ProviderListProps) => {
+  const [openProvider, setOpenProvider] = useUserState<string>('ai-settings-provider-accordion', '');
   const enabled = groups.filter((g) => enabledProviders.includes(g.provider));
 
   if (enabled.length === 0) {

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

@@ -1,4 +1,3 @@
 export * from './ProfileSettings';
-export * from './AISettings';
-export * from './ServerSettings';
+export * from './SystemSettings';
 export * from './ResourceSettings';

src/apps/officer-web/Screens/Dashboard/Workspaces/app-registry.tsx

@@ -8,8 +8,9 @@ import { TerminalView } from 'apps/Terminal';
 import { useWorkspacesState } from '@/state/useWorkspacesState';
 import { useClaude } from '../Chat/useClaude';
 import { useOpenCode } from '../Chat/useOpenCode';
+import { usePiMono } from '../Chat/usePiMono';
 import { ChatPanel } from '../Chat/ChatPanel';
-import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
+import { useVisibleClaudeModels, useVisibleOpenCodeModels, useVisiblePiMonoModels } from '@/state/useModels';
 import { ChatHistoryApp as ChatHistory } from '../ChatHistory';
 import { Files } from '../Files';
 import { Catalog } from 'sounds';
@@ -19,26 +20,34 @@ import { widgetRegistry } from 'widgets/widget-registry';
 import { WidgetPanel } from 'widgets/WidgetPanel';
 
 const ChatWidget = () => {
-  const [provider, setProvider] = useState<'claude' | 'opencode'>('claude');
-  return provider === 'claude' ? (
-    <ClaudeChatWidget key="claude" onProviderChange={setProvider} />
-  ) : (
-    <OpenCodeChatWidget key="opencode" onProviderChange={setProvider} />
-  );
+  const [provider, setProvider] = useState<'claude' | 'opencode' | 'pi-mono'>('claude');
+  if (provider === 'claude') {
+    return <ClaudeChatWidget key="claude" onProviderChange={setProvider} />;
+  }
+  if (provider === 'opencode') {
+    return <OpenCodeChatWidget key="opencode" onProviderChange={setProvider} />;
+  }
+  return <PiMonoChatWidget key="pi-mono" onProviderChange={setProvider} />;
 };
 
-const ClaudeChatWidget = ({ onProviderChange }: { onProviderChange: (p: 'claude' | 'opencode') => void }) => {
+const ClaudeChatWidget = ({ onProviderChange }: { onProviderChange: (p: 'claude' | 'opencode' | 'pi-mono') => void }) => {
   const claude = useClaude();
   const models = useVisibleClaudeModels();
   return <ChatPanel chat={claude} provider="claude" availableModels={models} onProviderChange={onProviderChange} />;
 };
 
-const OpenCodeChatWidget = ({ onProviderChange }: { onProviderChange: (p: 'claude' | 'opencode') => void }) => {
+const OpenCodeChatWidget = ({ onProviderChange }: { onProviderChange: (p: 'claude' | 'opencode' | 'pi-mono') => void }) => {
   const opencode = useOpenCode();
   const models = useVisibleOpenCodeModels();
   return <ChatPanel chat={opencode} provider="opencode" availableModels={models} onProviderChange={onProviderChange} />;
 };
 
+const PiMonoChatWidget = ({ onProviderChange }: { onProviderChange: (p: 'claude' | 'opencode' | 'pi-mono') => void }) => {
+  const piMono = usePiMono();
+  const models = useVisiblePiMonoModels();
+  return <ChatPanel chat={piMono} provider="pi-mono" availableModels={models} onProviderChange={onProviderChange} />;
+};
+
 const CodeEditorWrapper = () => <CodeEditorView className="h-full w-full" />;
 
 const TerminalWrapper = ({ panelId }: { panelId: string }) => {

src/apps/officer-web/locales/en.json

@@ -51,8 +51,7 @@
   "header": {
     "userMenu": {
       "profile": "Profile",
-      "aiSettings": "AI Settings",
-      "serverSettings": "Server Settings",
+      "systemSettings": "System Settings",
       "resources": "Resources",
       "signOut": "Sign Out"
     }

src/apps/officer-web/locales/pt.json

@@ -51,8 +51,7 @@
   "header": {
     "userMenu": {
       "profile": "Perfil",
-      "aiSettings": "Definições de IA",
-      "serverSettings": "Definições do Servidor",
+      "systemSettings": "Definições do Sistema",
       "resources": "Recursos",
       "signOut": "Terminar Sessão"
     }

src/apps/officer-web/state/types/user-settings.ts

@@ -1,6 +1,6 @@
 export type UserSettings = {
   chat: {
-    defaultProvider: 'claude' | 'opencode';
+    defaultProvider: 'claude' | 'opencode' | 'pi-mono';
     defaultModel: string | null;
     systemPrompt: string;
     temperature: number;
@@ -11,7 +11,7 @@ export type UserSettings = {
     enabledProviders: string[];
   };
   tasks: {
-    defaultProvider: 'claude' | 'opencode';
+    defaultProvider: 'claude' | 'opencode' | 'pi-mono';
     defaultModel: string | null;
   };
   appearance: {

src/apps/officer-web/state/useChatSessions.ts

@@ -15,14 +15,14 @@ export const useChatSessions = () => {
     queryFn: () => client.get<SessionEntry[]>('/sessions'),
   });
 
-  const getMessages = (provider: 'claude' | 'opencode', sessionId: string) =>
+  const getMessages = (provider: 'claude' | 'opencode' | 'pi-mono', sessionId: string) =>
     client.get<ChatMessage[]>(`/sessions/${provider}/${sessionId}/messages`);
 
-  const saveMessages = (provider: 'claude' | 'opencode', sessionId: string, messages: ChatMessage[]) =>
+  const saveMessages = (provider: 'claude' | 'opencode' | 'pi-mono', sessionId: string, messages: ChatMessage[]) =>
     client.put(`/sessions/${provider}/${sessionId}/messages`, messages);
 
   const renameSession = async (
-    provider: 'claude' | 'opencode',
+    provider: 'claude' | 'opencode' | 'pi-mono',
     sessionId: string | null,
     args: string,
   ): Promise<SlashCommandResult> => {
@@ -42,12 +42,12 @@ export const useChatSessions = () => {
     }
   };
 
-  const archiveSession = async (provider: 'claude' | 'opencode', sessionId: string) => {
+  const archiveSession = async (provider: 'claude' | 'opencode' | 'pi-mono', sessionId: string) => {
     await client.post(`/sessions/${provider}/${sessionId}/archive`);
     queryClient.setQueryData<SessionEntry[]>(['SESSIONS'], (prev) => prev?.filter((s) => s.id !== sessionId) ?? []);
   };
 
-  const deleteSession = async (provider: 'claude' | 'opencode', sessionId: string) => {
+  const deleteSession = async (provider: 'claude' | 'opencode' | 'pi-mono', sessionId: string) => {
     await client.delete(`/sessions/${provider}/${sessionId}`);
     queryClient.setQueryData<SessionEntry[]>(['SESSIONS'], (prev) => prev?.filter((s) => s.id !== sessionId) ?? []);
   };

src/apps/officer-web/state/useModels.ts

@@ -66,3 +66,24 @@ export const useVisibleOpenCodeModels = () => {
     [models, providers, enabled],
   );
 };
+
+export const usePiMonoModels = () => {
+  const client = useClient();
+  const { isAuthenticated } = useAuth();
+
+  const { data: models = [] } = useQuery<ModelOption[]>({
+    queryKey: ['PI_MONO_MODELS'],
+    enabled: isAuthenticated,
+    queryFn: () => client.get<ModelOption[]>('/pi-mono/models'),
+    staleTime: 5 * 60 * 1000,
+  });
+
+  return models;
+};
+
+export const useVisiblePiMonoModels = () => {
+  const models = usePiMonoModels();
+  const { settings } = useSettings();
+  const enabled = settings.ai?.enabledModels ?? [];
+  return useMemo(() => models.filter((m) => enabled.includes(modelKey(m))), [models, enabled]);
+};

src/apps/officer-web/state/useServerSettings.ts

@@ -5,6 +5,7 @@ import { useClient } from 'hooks/useClient';
 type AIHarnesses = {
   claudeCode: boolean;
   opencode: boolean;
+  piMono: boolean;
 };
 
 type ServerSettings = {