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
This commit is contained in:
2026-02-20 21:42:26 +00:00
parent 92f4b2be8e
commit ba51ee0320
31 changed files with 225 additions and 1176 deletions
@@ -12,13 +12,11 @@ import {
SelectValue,
} from '@/components/ui/select';
import { useSettings } from '@/state/useSettings';
import { useVisibleClaudeModels, useVisibleOpenCodeModels, useVisiblePiMonoModels } from '@/state/useModels';
import { useVisiblePiModels, type ModelOption } from '@/state/useModels';
export const TaskDefaults = () => {
const { settings, saveSettings } = useSettings();
const claudeModels = useVisibleClaudeModels();
const openCodeModels = useVisibleOpenCodeModels();
const piMonoModels = useVisiblePiMonoModels();
const piModels = useVisiblePiModels();
const [isSaving, setIsSaving] = useState(false);
const [model, setModel] = useState<string | null>(settings.tasks.defaultModel);
@@ -27,7 +25,7 @@ export const TaskDefaults = () => {
setModel(settings.tasks.defaultModel);
}, [settings]);
const buildGroups = (models: { id: string; name: string; provider?: string }[], fallback: string) => {
const buildGroups = (models: ModelOption[], fallback: string) => {
const groups: Record<string, { id: string; name: string }[]> = {};
for (const m of models) {
const provider = m.provider ?? fallback;
@@ -39,17 +37,13 @@ export const TaskDefaults = () => {
.map(([provider, models]) => ({ provider, models: models.sort((a, b) => a.name.localeCompare(b.name)) }));
};
const openCodeGroups = useMemo(() => buildGroups(openCodeModels, 'OpenCode'), [openCodeModels]);
const piMonoGroups = useMemo(() => buildGroups(piMonoModels, 'Pi'), [piMonoModels]);
const piGroups = useMemo(() => buildGroups(piModels, 'Pi'), [piModels]);
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 = isPiMono ? ('pi-mono' as const) : isOpenCode ? ('opencode' as const) : ('claude' as const);
await saveSettings({ ...settings, tasks: { defaultProvider, defaultModel: model } });
await saveSettings({ ...settings, tasks: { defaultProvider: 'pi', defaultModel: model } });
toast.success('Task defaults saved');
} catch {
toast.error('Failed to save settings');
@@ -67,29 +61,9 @@ export const TaskDefaults = () => {
<SelectValue placeholder="Same as chat default" />
</SelectTrigger>
<SelectContent className="z-[600] max-h-[300px]">
{claudeModels.length > 0 && (
<SelectGroup>
<SelectLabel>Claude</SelectLabel>
{claudeModels.map((m) => (
<SelectItem key={m.id} value={m.id}>
{m.name}
</SelectItem>
))}
</SelectGroup>
)}
{openCodeGroups.map(({ provider, models }) => (
<SelectGroup key={provider}>
<SelectLabel>{provider} (OpenCode)</SelectLabel>
{models.map((m) => (
<SelectItem key={`${provider}:${m.id}`} value={m.id}>
{m.name}
</SelectItem>
))}
</SelectGroup>
))}
{piMonoGroups.map(({ provider, models }) => (
{piGroups.map(({ provider, models }) => (
<SelectGroup key={`pi-${provider}`}>
<SelectLabel>{provider} (Pi)</SelectLabel>
<SelectLabel>{provider}</SelectLabel>
{models.map((m) => (
<SelectItem key={`pi:${provider}:${m.id}`} value={m.id}>
{m.name}
@@ -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]);