Fix chat model selector: fetch all provider models instead of curated
All checks were successful
CI / lint-and-test (push) Successful in 40s
Deploy Production / deploy (push) Successful in 1m19s
CI / build (push) Successful in 2m12s

The dropdown was empty because it fetched from /api/models/curated
(small DB subset) filtered to enabled-only. Switch to /api/models
which queries all providers live and returns 300+ available models.
This commit is contained in:
Julia McGhee
2026-03-22 10:48:59 +00:00
parent bd17e442f7
commit 997205a6c8

View File

@@ -11,15 +11,14 @@ import {
} from "./harness-design-system";
import type { ChatMessage, ToolCallRecord, StreamEvent } from "@/lib/chat-types";
interface CuratedModel {
interface ModelInfo {
id: string;
name: string;
provider: string;
enabled: boolean;
}
export default function ChatTab({ mobile }: { mobile: boolean }) {
const [models, setModels] = useState<CuratedModel[]>([]);
const [models, setModels] = useState<ModelInfo[]>([]);
const [selectedModel, setSelectedModel] = useState("");
const [messages, setMessages] = useState<ChatMessage[]>([]);
const [input, setInput] = useState("");
@@ -32,13 +31,19 @@ export default function ChatTab({ mobile }: { mobile: boolean }) {
const messagesEndRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLTextAreaElement>(null);
// Fetch curated models
// Fetch all available models from providers
useEffect(() => {
fetch("/api/models/curated")
fetch("/api/models")
.then((r) => r.json())
.then((data) => {
const enabled = (data.models || []).filter((m: CuratedModel) => m.enabled);
setModels(enabled);
.then((data: ModelInfo[]) => {
// Sort: anthropic first, then alphabetically by provider, then by name
const sorted = (Array.isArray(data) ? data : []).sort((a, b) => {
if (a.provider === "anthropic" && b.provider !== "anthropic") return -1;
if (b.provider === "anthropic" && a.provider !== "anthropic") return 1;
const p = a.provider.localeCompare(b.provider);
return p !== 0 ? p : a.name.localeCompare(b.name);
});
setModels(sorted);
})
.catch(() => {});
}, []);