feat: implement dynamic recommended model selection in the Eternity Workstation dashboard

src/app/api/models-status/route.ts

@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getSession } from "auth/server";
+
+const getBackendUrl = () => {
+  if (process.env.BACKEND_API_URL) return process.env.BACKEND_API_URL;
+  const spaceId = process.env.SPACE_ID || "";
+  if (spaceId.startsWith("shyota/")) {
+    return "https://shyota-claude-code-backend.hf.space";
+  }
+  return "https://augment17-claude-code-backend.hf.space";
+};
+
+export async function GET(req: NextRequest) {
+  const session = await getSession();
+  if (!session?.user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const backendUrl = getBackendUrl();
+  const apiKey = process.env.BACKEND_API_KEY || "";
+
+  try {
+    const res = await fetch(`${backendUrl}/api/models-status`, {
+      headers: {
+        "Authorization": `Bearer ${apiKey}`,
+      },
+      cache: "no-store",
+    });
+
+    if (!res.ok) {
+      const txt = await res.text();
+      return NextResponse.json({ error: txt }, { status: res.status });
+    }
+
+    const data = await res.json();
+    return NextResponse.json(data);
+  } catch (err: any) {
+    return NextResponse.json({ error: err.message }, { status: 500 });
+  }
+}

src/app/api/settings/route.ts

@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getSession } from "auth/server";
+
+const getBackendUrl = () => {
+  if (process.env.BACKEND_API_URL) return process.env.BACKEND_API_URL;
+  const spaceId = process.env.SPACE_ID || "";
+  if (spaceId.startsWith("shyota/")) {
+    return "https://shyota-claude-code-backend.hf.space";
+  }
+  return "https://augment17-claude-code-backend.hf.space";
+};
+
+export async function POST(req: NextRequest) {
+  const session = await getSession();
+  if (!session?.user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const backendUrl = getBackendUrl();
+  const apiKey = process.env.BACKEND_API_KEY || "";
+
+  try {
+    const body = await req.json();
+    const res = await fetch(`${backendUrl}/api/settings/model`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify(body),
+    });
+
+    if (!res.ok) {
+      const txt = await res.text();
+      return NextResponse.json({ error: txt }, { status: res.status });
+    }
+
+    const data = await res.json();
+    return NextResponse.json(data);
+  } catch (err: any) {
+    return NextResponse.json({ error: err.message }, { status: 400 });
+  }
+}

src/components/agent-monitor.tsx

@@ -44,6 +44,8 @@ export default function AgentMonitorPanel({ threadId }: { threadId: string }) {
   // Eternity states
   const [projects, setProjects] = useState<EternityProject[]>([]);
   const [isEternityLoading, setIsEternityLoading] = useState(false);
+  const [recommendedModel, setRecommendedModel] = useState<string>("");
+  const [availableModels, setAvailableModels] = useState<{ id: string; name: string }[]>([]);
 
   // Logs states
   const [logs, setLogs] = useState<string[]>([]);
@@ -77,7 +79,10 @@ export default function AgentMonitorPanel({ threadId }: { threadId: string }) {
     }, 3000);
 
     // Initial calls
-    if (activeTab === "eternity") fetchProjects();
+    if (activeTab === "eternity") {
+      fetchProjects();
+      fetchModels();
+    }
     if (activeTab === "logs") fetchLogs();
 
     return () => {
@@ -135,6 +140,38 @@ export default function AgentMonitorPanel({ threadId }: { threadId: string }) {
     }
   };
 
+  const fetchModels = async () => {
+    try {
+      const res = await fetch("/api/models-status");
+      if (!res.ok) throw new Error("Failed to load models");
+      const data = await res.json();
+      const list = data.map((m: any) => ({
+        id: m.id,
+        name: m.name + (m.status.includes("ONLINE") ? "" : " (Offline)"),
+      }));
+      setAvailableModels(list);
+      const rec = data.find((m: any) => m.is_recommended);
+      if (rec) setRecommendedModel(rec.id);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const handleSetRecommendedModel = async (modelId: string) => {
+    try {
+      const res = await fetch("/api/settings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ model: modelId }),
+      });
+      if (!res.ok) throw new Error(await res.text());
+      setRecommendedModel(modelId);
+      toast.success(`Active recommended model set to ${modelId}`);
+    } catch (err: any) {
+      toast.error(`Failed to update model: ${err.message}`);
+    }
+  };
+
   const fetchLogs = async () => {
     try {
       const res = await fetch("/api/logs");
@@ -338,6 +375,30 @@ export default function AgentMonitorPanel({ threadId }: { threadId: string }) {
             {activeTab === "eternity" && (
               <ScrollArea className="h-full w-full">
                 <div className="p-4 space-y-4">
+                  {/* Model Selector Section */}
+                  <div className="border border-border/60 rounded-xl p-3 bg-muted/10 space-y-2">
+                    <div className="text-[10px] uppercase font-bold text-muted-foreground/80 tracking-wider">
+                      Orchestration Agent Model
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <select
+                        value={recommendedModel}
+                        onChange={(e) => handleSetRecommendedModel(e.target.value)}
+                        className="flex-1 bg-background border border-input rounded p-1.5 text-xs text-foreground focus:outline-none cursor-pointer"
+                      >
+                        {availableModels.length === 0 ? (
+                          <option value="">Loading models...</option>
+                        ) : (
+                          availableModels.map((m) => (
+                            <option key={m.id} value={m.id}>
+                              {m.name}
+                            </option>
+                          ))
+                        )}
+                      </select>
+                    </div>
+                  </div>
+
                   <div className="text-[10px] uppercase font-bold text-muted-foreground/80 tracking-wider mb-1">
                     ACTIVE MULTI-AGENT PROJECTS
                   </div>