pi-mono

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>
-  );
-};