@mndrk/agx 2.0.56 → 2.1.0

package/cloud-runtime/standalone/apps/local/components/setup/TeamsStep.tsx

@@ -1,18 +1,60 @@
 // components/setup/TeamsStep.tsx
 "use client";
 
-import { useState, useCallback } from "react";
-import { Check, ChevronDown, Users, X } from "lucide-react";
+import { useState, useCallback, useRef, useEffect } from "react";
+import { Check, ChevronDown, ChevronRight, Users, X } from "lucide-react";
 import { listTeamTemplates, getTemplateVariant, type TeamTemplate, type TeamTemplateVariant, type TeamTemplateId, type AgentPreset } from "@/lib/team-catalog";
+import { useProviders } from "@/hooks/useProviders";
 import { SetupLayout } from "./SetupLayout";
 
+export interface AgentOverride {
+  agentId: string;
+  provider?: string;
+  model?: string;
+}
+
 export interface SelectedTeam {
   templateId: TeamTemplateId;
   variantId?: string;
   name: string;
   agents: AgentPreset[];
+  provider?: string;
+  model?: string;
+  agentOverrides?: AgentOverride[];
 }
 
+/** Well-known models per provider for the combobox suggestions. */
+const MODEL_SUGGESTIONS: Record<string, string[]> = {
+  claude: [
+    "claude-opus-4-20250514",
+    "claude-sonnet-4-20250514",
+    "claude-haiku-4-20250514",
+  ],
+  codex: [
+    "o4-mini",
+    "o3",
+    "gpt-4.1",
+    "gpt-4.1-mini",
+    "gpt-4.1-nano",
+  ],
+  gemini: [
+    "gemini-2.5-pro",
+    "gemini-2.5-flash",
+    "gemini-2.0-flash",
+  ],
+  ollama: [
+    "qwen3:8b",
+    "devstral",
+    "qwen2.5-coder:14b",
+    "llama3.3:70b",
+    "deepseek-coder-v2:16b",
+  ],
+  zai: [
+    "claude-opus-4-20250514",
+    "claude-sonnet-4-20250514",
+  ],
+};
+
 interface TeamsStepProps {
   selectedTeams: SelectedTeam[];
   onChange: (teams: SelectedTeam[]) => void;
@@ -27,20 +69,195 @@ const STYLE_COLORS: Record<string, string> = {
   analytical: "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300",
 };
 
-function AgentPreview({ agent }: { agent: AgentPreset }) {
-  const styleClass = STYLE_COLORS[agent.style] ?? STYLE_COLORS.balanced;
+/** Searchable combobox: text input with dropdown suggestions, allows custom values. */
+function ModelCombobox({
+  value,
+  onChange,
+  suggestions,
+  placeholder = "Model name...",
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  suggestions: string[];
+  placeholder?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState("");
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const filtered = suggestions.filter((s) =>
+    s.toLowerCase().includes((filter || value).toLowerCase())
+  );
+
   return (
-    <div className="flex items-center gap-2 py-1.5">
-      <div className="w-7 h-7 rounded-full bg-[var(--secondary)] flex items-center justify-center text-[12px] font-semibold text-[var(--foreground)]">
-        {agent.name.charAt(0)}
+    <div ref={wrapperRef} className="relative flex-1">
+      <input
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => {
+          onChange(e.target.value);
+          setFilter(e.target.value);
+          setOpen(true);
+        }}
+        onFocus={() => setOpen(true)}
+        className="w-full h-8 px-2.5 text-[12px] rounded-md border border-[var(--card-border)] bg-[var(--background)] text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:outline-none focus:border-[var(--foreground)]/40 transition-colors"
+      />
+      {open && filtered.length > 0 && (
+        <div className="absolute z-50 top-full left-0 right-0 mt-1 max-h-[160px] overflow-y-auto rounded-md border border-[var(--card-border)] bg-[var(--background)] shadow-lg">
+          {filtered.map((s) => (
+            <button
+              key={s}
+              type="button"
+              onClick={() => {
+                onChange(s);
+                setFilter("");
+                setOpen(false);
+              }}
+              className={`w-full text-left px-2.5 py-1.5 text-[12px] transition-colors hover:bg-[var(--secondary)] ${
+                s === value ? "text-[var(--foreground)] font-medium" : "text-[var(--muted-foreground)]"
+              }`}
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Provider dropdown + model combobox, compact layout. */
+function ProviderModelSelector({
+  provider,
+  model,
+  onProviderChange,
+  onModelChange,
+  providers,
+  label,
+}: {
+  provider: string;
+  model: string;
+  onProviderChange: (v: string) => void;
+  onModelChange: (v: string) => void;
+  providers: { id: string; label: string }[];
+  label?: string;
+}) {
+  const suggestions = MODEL_SUGGESTIONS[provider] ?? [];
+
+  return (
+    <div className="space-y-1.5">
+      {label && (
+        <span className="text-[11px] font-medium text-[var(--muted-foreground)] uppercase tracking-wide">{label}</span>
+      )}
+      <div className="flex items-center gap-2">
+        <select
+          value={provider}
+          onChange={(e) => {
+            onProviderChange(e.target.value);
+            // Clear model when provider changes
+            onModelChange("");
+          }}
+          className="h-8 px-2 text-[12px] rounded-md border border-[var(--card-border)] bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:border-[var(--foreground)]/40 transition-colors appearance-none cursor-pointer pr-6"
+          style={{ backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\")", backgroundRepeat: "no-repeat", backgroundPosition: "right 6px center" }}
+        >
+          <option value="">Provider...</option>
+          {providers.map((p) => (
+            <option key={p.id} value={p.id}>{p.label}</option>
+          ))}
+        </select>
+        <ModelCombobox
+          value={model}
+          onChange={onModelChange}
+          suggestions={suggestions}
+          placeholder={provider ? "Select or type model..." : "Select a provider first"}
+        />
       </div>
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <span className="text-[13px] font-medium text-[var(--foreground)]">{agent.name}</span>
-          <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${styleClass}`}>{agent.style}</span>
+    </div>
+  );
+}
+
+function AgentPreview({
+  agent,
+  override,
+  teamProvider,
+  teamModel,
+  providers,
+  onOverrideChange,
+}: {
+  agent: AgentPreset;
+  override?: AgentOverride;
+  teamProvider?: string;
+  teamModel?: string;
+  providers: { id: string; label: string }[];
+  onOverrideChange: (agentId: string, override: AgentOverride | undefined) => void;
+}) {
+  const styleClass = STYLE_COLORS[agent.style] ?? STYLE_COLORS.balanced;
+  const hasOverride = override && (override.provider || override.model);
+  const [showOverride, setShowOverride] = useState(!!hasOverride);
+  const effectiveProvider = override?.provider || teamProvider || "";
+  const effectiveModel = override?.model || teamModel || "";
+
+  return (
+    <div className="py-1.5">
+      <div className="flex items-center gap-2">
+        <div className="w-7 h-7 rounded-full bg-[var(--secondary)] flex items-center justify-center text-[12px] font-semibold text-[var(--foreground)]">
+          {agent.name.charAt(0)}
         </div>
-        <p className="text-[11px] text-[var(--muted-foreground)] truncate">{agent.title}</p>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-[13px] font-medium text-[var(--foreground)]">{agent.name}</span>
+            <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${styleClass}`}>{agent.style}</span>
+            {hasOverride && (
+              <span className="text-[10px] px-1.5 py-0.5 rounded font-medium bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300">custom</span>
+            )}
+          </div>
+          <div className="flex items-center gap-1">
+            <p className="text-[11px] text-[var(--muted-foreground)] truncate">{agent.title}</p>
+            {(teamProvider || teamModel) && !hasOverride && effectiveModel && (
+              <span className="text-[10px] text-[var(--muted-foreground)] opacity-60 shrink-0">
+                ({effectiveModel})
+              </span>
+            )}
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={() => {
+            if (showOverride) {
+              onOverrideChange(agent.id, undefined);
+              setShowOverride(false);
+            } else {
+              setShowOverride(true);
+            }
+          }}
+          className="p-1 rounded hover:bg-[var(--background)] text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
+          title={showOverride ? "Remove override" : "Override provider/model"}
+        >
+          <ChevronRight className={`w-3 h-3 transition-transform ${showOverride ? "rotate-90" : ""}`} />
+        </button>
       </div>
+      {showOverride && (
+        <div className="mt-1.5 ml-9">
+          <ProviderModelSelector
+            provider={override?.provider || ""}
+            model={override?.model || ""}
+            onProviderChange={(p) => onOverrideChange(agent.id, { agentId: agent.id, provider: p || undefined, model: override?.model })}
+            onModelChange={(m) => onOverrideChange(agent.id, { agentId: agent.id, provider: override?.provider, model: m || undefined })}
+            providers={providers}
+          />
+        </div>
+      )}
     </div>
   );
 }
@@ -86,6 +303,7 @@ function TemplateCard({
 
 export function TeamsStep({ selectedTeams, onChange, onNext, onBack }: TeamsStepProps) {
   const templates = listTeamTemplates();
+  const { providers } = useProviders();
   const [expandedTemplate, setExpandedTemplate] = useState<TeamTemplateId | null>(null);
   const [selectedVariant, setSelectedVariant] = useState<Record<string, string>>({});
 
@@ -138,10 +356,42 @@ export function TeamsStep({ selectedTeams, onChange, onNext, onBack }: TeamsStep
     [selectedTeams, onChange]
   );
 
+  const handleTeamProviderChange = useCallback(
+    (templateId: TeamTemplateId, provider: string) => {
+      onChange(selectedTeams.map((t) =>
+        t.templateId === templateId ? { ...t, provider: provider || undefined } : t
+      ));
+    },
+    [selectedTeams, onChange]
+  );
+
+  const handleTeamModelChange = useCallback(
+    (templateId: TeamTemplateId, model: string) => {
+      onChange(selectedTeams.map((t) =>
+        t.templateId === templateId ? { ...t, model: model || undefined } : t
+      ));
+    },
+    [selectedTeams, onChange]
+  );
+
+  const handleAgentOverrideChange = useCallback(
+    (templateId: TeamTemplateId, agentId: string, override: AgentOverride | undefined) => {
+      onChange(selectedTeams.map((t) => {
+        if (t.templateId !== templateId) return t;
+        const overrides = (t.agentOverrides ?? []).filter((o) => o.agentId !== agentId);
+        if (override && (override.provider || override.model)) {
+          overrides.push(override);
+        }
+        return { ...t, agentOverrides: overrides.length > 0 ? overrides : undefined };
+      }));
+    },
+    [selectedTeams, onChange]
+  );
+
   return (
     <SetupLayout
-      currentStep={3}
-      totalSteps={3}
+      currentStep={4}
+      totalSteps={4}
       footer={
         <div className="flex items-center justify-between">
           <button type="button" onClick={onBack} className="text-[14px] text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors">
@@ -179,8 +429,31 @@ export function TeamsStep({ selectedTeams, onChange, onNext, onBack }: TeamsStep
                   <X className="w-3.5 h-3.5" />
                 </button>
               </div>
+
+              {/* Team-level provider/model selector */}
+              <div className="pl-6 mb-2">
+                <ProviderModelSelector
+                  provider={team.provider || ""}
+                  model={team.model || ""}
+                  onProviderChange={(p) => handleTeamProviderChange(team.templateId, p)}
+                  onModelChange={(m) => handleTeamModelChange(team.templateId, m)}
+                  providers={providers}
+                  label="Default provider & model"
+                />
+              </div>
+
               <div className="pl-6 space-y-0.5">
-                {team.agents.map((agent) => <AgentPreview key={agent.id} agent={agent} />)}
+                {team.agents.map((agent) => (
+                  <AgentPreview
+                    key={agent.id}
+                    agent={agent}
+                    override={team.agentOverrides?.find((o) => o.agentId === agent.id)}
+                    teamProvider={team.provider}
+                    teamModel={team.model}
+                    providers={providers}
+                    onOverrideChange={(agentId, override) => handleAgentOverrideChange(team.templateId, agentId, override)}
+                  />
+                ))}
               </div>
             </div>
           ))}

package/cloud-runtime/standalone/apps/local/components/terminal/ProjectTerminal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
+import { useParams } from "next/navigation";
 import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 import { useTerminalTabsStore } from "@/state/terminalTabs";
 import { useUrlSelection } from "@/hooks/useUrlSelection";
@@ -18,6 +19,8 @@ const GRID_MAX_ROW_SPAN = 4;
 const GRID_MIN_ROW_HEIGHT_PX = 320;
 const GRID_MAX_ROW_HEIGHT_PX = 520;
 
+const DEFAULT_PROJECT_KEY = "__global__";
+
 type EditingTerminal = {
   sessionId: string;
   terminalId: string;
@@ -38,8 +41,11 @@ type ResizeState = {
 type TerminalLayoutMode = "single" | "split" | "grid";
 
 export default function ProjectTerminal() {
+  const params = useParams<{ slug?: string }>();
+  const projectId = params?.slug ?? DEFAULT_PROJECT_KEY;
+
   const { isTouchLayout } = useInputCapabilities();
-  const sessions = useTerminalTabsStore((s) => s.sessions);
+  const sessions = useTerminalTabsStore((s) => s.getProjectSessions(projectId));
   const createSession = useTerminalTabsStore((s) => s.createSession);
   const closeSession = useTerminalTabsStore((s) => s.closeSession);
   const renameSession = useTerminalTabsStore((s) => s.renameSession);
@@ -78,10 +84,10 @@ export default function ProjectTerminal() {
   // Auto-create first session if none exist
   useEffect(() => {
     if (sessions.length === 0) {
-      const id = createSession();
+      const id = createSession(projectId);
       replaceSelection({ session: id });
     }
-  }, [sessions.length, createSession, replaceSelection]);
+  }, [sessions.length, createSession, replaceSelection, projectId]);
 
   // Auto-select first session if none selected but sessions exist
   useEffect(() => {
@@ -171,7 +177,7 @@ export default function ProjectTerminal() {
         ),
       );
 
-      updateTerminalLayout(resizeState.sessionId, resizeState.terminalId, {
+      updateTerminalLayout(projectId, resizeState.sessionId, resizeState.terminalId, {
         colSpan: nextColSpan,
         rowSpan: nextRowSpan,
       });
@@ -190,10 +196,10 @@ export default function ProjectTerminal() {
       window.removeEventListener("pointermove", onPointerMove);
       window.removeEventListener("pointerup", onPointerUp);
     };
-  }, [resizeState, updateTerminalLayout]);
+  }, [resizeState, updateTerminalLayout, projectId]);
 
   function handleCreate() {
-    const id = createSession();
+    const id = createSession(projectId);
     replaceSelection({ session: id });
     setTouchSessionListOpen(false);
   }
@@ -210,12 +216,12 @@ export default function ProjectTerminal() {
         // Best-effort cleanup. The session is still removed from the UI.
       });
     });
-    closeSession(id);
+    closeSession(projectId, id);
   }
 
   function handleAddTerminal() {
     if (!selectedSession) return;
-    addTerminal(selectedSession.id);
+    addTerminal(projectId, selectedSession.id);
   }
 
   function handleCloseTerminal(sessionId: string, terminalId: string) {
@@ -231,7 +237,7 @@ export default function ProjectTerminal() {
     ).catch(() => {
       // Best-effort cleanup. The terminal is still removed from the UI.
     });
-    closeTerminal(sessionId, terminalId);
+    closeTerminal(projectId, sessionId, terminalId);
   }
 
   function handleStartRenameTerminal(sessionId: string, terminal: TerminalInstance) {
@@ -243,7 +249,7 @@ export default function ProjectTerminal() {
     if (!editingTerminal) return;
     const nextTitle = editingTitle.trim();
     if (nextTitle) {
-      renameTerminal(editingTerminal.sessionId, editingTerminal.terminalId, nextTitle);
+      renameTerminal(projectId, editingTerminal.sessionId, editingTerminal.terminalId, nextTitle);
     }
     setEditingTerminal(null);
     setEditingTitle("");
@@ -254,6 +260,10 @@ export default function ProjectTerminal() {
     setTouchSessionListOpen(false);
   }
 
+  function handleRenameSession(id: string, title: string) {
+    renameSession(projectId, id, title);
+  }
+
   function terminalStatusDotClass(status: TerminalStatus): string {
     if (status === "active") return "bg-emerald-400";
     if (status === "connecting") return "bg-amber-400";
@@ -372,10 +382,10 @@ export default function ProjectTerminal() {
             key={terminal.id}
             tabId={terminal.id}
             onSessionReady={(backendSessionId) =>
-              setTerminalSessionId(sessionId, terminal.id, backendSessionId)
+              setTerminalSessionId(projectId, sessionId, terminal.id, backendSessionId)
             }
             onStatusChange={(status) =>
-              updateTerminalStatus(sessionId, terminal.id, status)
+              updateTerminalStatus(projectId, sessionId, terminal.id, status)
             }
           />
         </div>
@@ -413,7 +423,7 @@ export default function ProjectTerminal() {
                   onSelect={handleSelect}
                   onCreate={handleCreate}
                   onClose={handleClose}
-                  onRename={renameSession}
+                  onRename={handleRenameSession}
                 />
               </div>
             </>
@@ -513,7 +523,7 @@ export default function ProjectTerminal() {
               onSelect={handleSelect}
               onCreate={handleCreate}
               onClose={handleClose}
-              onRename={renameSession}
+              onRename={handleRenameSession}
             />
           </div>
 

package/cloud-runtime/standalone/apps/local/hooks/useSetupFlow.ts

@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation";
 import type { ProjectData } from "@/components/setup/ProjectStep";
 import type { SelectedTeam } from "@/components/setup/TeamsStep";
 
-export type SetupStep = 1 | 2 | 3;
+export type SetupStep = 1 | 2 | 3 | 4;
 
 export interface SetupFlowState {
   step: SetupStep;
@@ -31,7 +31,7 @@ export function useSetupFlow() {
   const [error, setError] = useState<string | null>(null);
 
   const goNext = useCallback(() => {
-    setStep((s) => Math.min(s + 1, 3) as SetupStep);
+    setStep((s) => Math.min(s + 1, 4) as SetupStep);
   }, []);
 
   const goBack = useCallback(() => {
@@ -60,6 +60,19 @@ export function useSetupFlow() {
       const projectId = createdProject.id;
 
       for (const team of teams) {
+        // Build agents array with per-agent provider/model (overrides inherit from team defaults)
+        const agents = team.agents.map((agent) => {
+          const override = team.agentOverrides?.find((o) => o.agentId === agent.id);
+          return {
+            roleId: agent.id,
+            provider: override?.provider || team.provider || undefined,
+            model: override?.model || team.model || undefined,
+          };
+        });
+
+        // Only include agents array if any have provider/model config
+        const hasConfig = agents.some((a) => a.provider || a.model);
+
         await fetch(`/api/projects/${projectId}/teams`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -67,6 +80,7 @@ export function useSetupFlow() {
             templateId: team.templateId,
             variantId: team.variantId,
             name: team.name,
+            ...(hasConfig ? { agents } : {}),
           }),
         });
       }