pi-mono

2026-02-19 18:05:50 +00:00
parent 9870fa7ae8
commit 6a83342013
38 changed files with 1459 additions and 267 deletions
@@ -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>
@@ -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>
  );
 };
@@ -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>
-  );
-};
@@ -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 };
 };
@@ -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) {
@@ -1,4 +1,3 @@
 export * from './ProfileSettings';
-export * from './AISettings';
-export * from './ServerSettings';
+export * from './SystemSettings';
 export * from './ResourceSettings';