Complete frontend migration to unified Pi harness (Phase 7 + Phase 9)

- Delete legacy hooks: useClaude.ts, useOpenCode.ts, usePiMono.ts, App.backup.tsx
- Update all components to use usePi instead of legacy hooks
- Replace useVisiblePiMonoModels/useClaudeModels/useOpenCodeModels with useVisiblePiModels
- Migrate from LegacyChatMessage to ChatMessage type throughout
- Update SessionBar to remove provider and archive props
- Simplify ChatDetailPanel to Pi-only (remove Claude/OpenCode components)
- Fix useChatSessions calls (remove provider parameter)
- Update user-settings types: provider now only 'pi' instead of legacy values
- Update PI_HARNESS_REBUILD.md to mark phases complete

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

@@ -16,7 +16,7 @@ import { appRegistry } from '../Workspaces/app-registry';
 import { createSettingsPanelComponents, type SettingsSectionGroup } from './SettingsPanel';
 import { useSettings } from '@/state/useSettings';
 import { useUserState } from '@/state/useUserState';
-import { usePiMonoModels, useVisiblePiMonoModels } from '@/state/useModels';
+import { usePiModels, useVisiblePiModels, type ModelOption } from '@/state/useModels';
 import type { UserSettings } from '@/state/types/user-settings';
 import { AIHarnessesSection } from './ServerSettings/AIHarnessesSection';
 import { RUN_COMMAND_CHANNEL, type RunCommandState } from './ServerSettings/run-command-channel';
@@ -146,7 +146,7 @@ export const SystemSettings = () => {
 
 function ChatDefaultsSection() {
   const { settings, saveSettings } = useSettings();
-  const piMonoModels = useVisiblePiMonoModels();
+  const piModels = useVisiblePiModels();
   const [isSaving, setIsSaving] = useState(false);
 
   const [model, setModel] = useState<string | null>(settings.chat.defaultModel);
@@ -167,7 +167,7 @@ function ChatDefaultsSection() {
     try {
       const updated: UserSettings = {
         ...settings,
-        chat: { defaultProvider: 'pi-mono', defaultModel: model, systemPrompt, temperature, defaultPwd },
+        chat: { defaultProvider: 'pi', defaultModel: model, systemPrompt, temperature, defaultPwd },
       };
       await saveSettings(updated);
       toast.success('Chat defaults saved');
@@ -187,7 +187,7 @@ function ChatDefaultsSection() {
             <SelectValue placeholder="Default" />
           </SelectTrigger>
           <SelectContent className="z-[600]">
-            {piMonoModels.map((m) => (
+            {piModels.map((m: ModelOption) => (
               <SelectItem key={m.id} value={m.id}>
                 <span className="font-bold">{m.name}</span>
                 {m.provider && <span className="text-duck-dark/50 ml-1">({m.provider})</span>}
@@ -304,14 +304,14 @@ const DropZone = ({ label, children, onDrop }: DropZoneProps) => {
 
 function ModelVisibilitySection() {
   const { settings, saveSettings } = useSettings();
-  const piMonoModels = usePiMonoModels();
+  const piModels = usePiModels();
   const [activeProvider, setActiveProvider] = useUserState<string>('model-visibility-provider', '');
 
   const enabledModels = settings.ai?.enabledModels ?? [];
 
   const providerGroups = useMemo(() => {
     const groups: Record<string, { id: string; name: string }[]> = {};
-    for (const m of piMonoModels) {
+    for (const m of piModels) {
       const provider = m.provider ?? 'Other';
       if (!groups[provider]) groups[provider] = [];
       groups[provider].push({ id: m.id, name: m.name });
@@ -319,7 +319,7 @@ 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)) }));
-  }, [piMonoModels]);
+  }, [piModels]);
 
   const providers = useMemo(() => providerGroups.map((g) => g.provider), [providerGroups]);