0975907121
Add OnboardingWizard component for first-time company setup. Rework NewAgentDialog into a multi-step wizard with adapter selection and config. Add server route for agent connection string generation. Wire onboarding into Dashboard and Layout. Update DialogContext with onboarding state. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
813 lines
30 KiB
TypeScript
813 lines
30 KiB
TypeScript
import { useState, useRef, useEffect, useCallback } from "react";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useDialog } from "../context/DialogContext";
|
|
import { useCompany } from "../context/CompanyContext";
|
|
import { agentsApi } from "../api/agents";
|
|
import { queryKeys } from "../lib/queryKeys";
|
|
import { AGENT_ROLES, AGENT_ADAPTER_TYPES } from "@paperclip/shared";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover";
|
|
import {
|
|
Tooltip,
|
|
TooltipTrigger,
|
|
TooltipContent,
|
|
} from "@/components/ui/tooltip";
|
|
import {
|
|
Minimize2,
|
|
Maximize2,
|
|
Shield,
|
|
User,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
Heart,
|
|
HelpCircle,
|
|
FolderOpen,
|
|
} from "lucide-react";
|
|
import { cn } from "../lib/utils";
|
|
|
|
const roleLabels: Record<string, string> = {
|
|
ceo: "CEO", cto: "CTO", cmo: "CMO", cfo: "CFO",
|
|
engineer: "Engineer", designer: "Designer", pm: "PM",
|
|
qa: "QA", devops: "DevOps", researcher: "Researcher", general: "General",
|
|
};
|
|
|
|
const adapterLabels: Record<string, string> = {
|
|
claude_local: "Claude (local)",
|
|
codex_local: "Codex (local)",
|
|
process: "Process",
|
|
http: "HTTP",
|
|
};
|
|
|
|
/* ---- Help text for (?) tooltips ---- */
|
|
const help: Record<string, string> = {
|
|
name: "Display name for this agent.",
|
|
title: "Job title shown in the org chart.",
|
|
role: "Organizational role. Determines position and capabilities.",
|
|
reportsTo: "The agent this one reports to in the org hierarchy.",
|
|
adapterType: "How this agent runs: local CLI (Claude/Codex), spawned process, or HTTP webhook.",
|
|
cwd: "The working directory where the agent operates. Should be an absolute path on the server.",
|
|
promptTemplate: "The prompt sent to the agent on each heartbeat. Supports {{ agent.id }}, {{ agent.name }}, {{ agent.role }} variables.",
|
|
model: "Override the default model used by the adapter.",
|
|
dangerouslySkipPermissions: "Run Claude without permission prompts. Required for unattended operation.",
|
|
dangerouslyBypassSandbox: "Run Codex without sandbox restrictions. Required for filesystem/network access.",
|
|
search: "Enable Codex web search capability during runs.",
|
|
bootstrapPrompt: "Prompt used only on the first run (no existing session). Used for initial agent setup.",
|
|
maxTurnsPerRun: "Maximum number of agentic turns (tool calls) per heartbeat run.",
|
|
command: "The command to execute (e.g. node, python).",
|
|
args: "Command-line arguments, comma-separated.",
|
|
webhookUrl: "The URL that receives POST requests when the agent is invoked.",
|
|
heartbeatInterval: "Run this agent automatically on a timer. Useful for periodic tasks like checking for new work.",
|
|
intervalSec: "Seconds between automatic heartbeat invocations.",
|
|
};
|
|
|
|
export function NewAgentDialog() {
|
|
const { newAgentOpen, closeNewAgent } = useDialog();
|
|
const { selectedCompanyId, selectedCompany } = useCompany();
|
|
const queryClient = useQueryClient();
|
|
const navigate = useNavigate();
|
|
const [expanded, setExpanded] = useState(true);
|
|
|
|
// Identity
|
|
const [name, setName] = useState("");
|
|
const [title, setTitle] = useState("");
|
|
const [role, setRole] = useState("general");
|
|
const [reportsTo, setReportsTo] = useState("");
|
|
|
|
// Adapter
|
|
const [adapterType, setAdapterType] = useState<string>("claude_local");
|
|
const [cwd, setCwd] = useState("");
|
|
const [promptTemplate, setPromptTemplate] = useState("");
|
|
const [model, setModel] = useState("");
|
|
|
|
// claude_local specific
|
|
const [dangerouslySkipPermissions, setDangerouslySkipPermissions] = useState(false);
|
|
|
|
// codex_local specific
|
|
const [search, setSearch] = useState(false);
|
|
const [dangerouslyBypassSandbox, setDangerouslyBypassSandbox] = useState(false);
|
|
|
|
// process specific
|
|
const [command, setCommand] = useState("");
|
|
const [args, setArgs] = useState("");
|
|
|
|
// http specific
|
|
const [url, setUrl] = useState("");
|
|
|
|
// Advanced adapter fields
|
|
const [bootstrapPrompt, setBootstrapPrompt] = useState("");
|
|
const [maxTurnsPerRun, setMaxTurnsPerRun] = useState(80);
|
|
|
|
// Heartbeat
|
|
const [heartbeatEnabled, setHeartbeatEnabled] = useState(false);
|
|
const [intervalSec, setIntervalSec] = useState(300);
|
|
|
|
// Sections
|
|
const [adapterAdvancedOpen, setAdapterAdvancedOpen] = useState(false);
|
|
const [heartbeatOpen, setHeartbeatOpen] = useState(false);
|
|
|
|
// Popover states
|
|
const [roleOpen, setRoleOpen] = useState(false);
|
|
const [reportsToOpen, setReportsToOpen] = useState(false);
|
|
const [modelOpen, setModelOpen] = useState(false);
|
|
|
|
const { data: agents } = useQuery({
|
|
queryKey: queryKeys.agents.list(selectedCompanyId!),
|
|
queryFn: () => agentsApi.list(selectedCompanyId!),
|
|
enabled: !!selectedCompanyId && newAgentOpen,
|
|
});
|
|
|
|
const { data: adapterModels } = useQuery({
|
|
queryKey: ["adapter-models", adapterType],
|
|
queryFn: () => agentsApi.adapterModels(adapterType),
|
|
enabled: newAgentOpen,
|
|
});
|
|
|
|
const isFirstAgent = !agents || agents.length === 0;
|
|
const effectiveRole = isFirstAgent ? "ceo" : role;
|
|
|
|
// Auto-fill for CEO
|
|
useEffect(() => {
|
|
if (newAgentOpen && isFirstAgent) {
|
|
if (!name) setName("CEO");
|
|
if (!title) setTitle("CEO");
|
|
}
|
|
}, [newAgentOpen, isFirstAgent]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
const createAgent = useMutation({
|
|
mutationFn: (data: Record<string, unknown>) =>
|
|
agentsApi.create(selectedCompanyId!, data),
|
|
onSuccess: (agent) => {
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(selectedCompanyId!) });
|
|
reset();
|
|
closeNewAgent();
|
|
navigate(`/agents/${agent.id}`);
|
|
},
|
|
});
|
|
|
|
function reset() {
|
|
setName("");
|
|
setTitle("");
|
|
setRole("general");
|
|
setReportsTo("");
|
|
setAdapterType("claude_local");
|
|
setCwd("");
|
|
setPromptTemplate("");
|
|
setModel("");
|
|
setDangerouslySkipPermissions(false);
|
|
setSearch(false);
|
|
setDangerouslyBypassSandbox(false);
|
|
setCommand("");
|
|
setArgs("");
|
|
setUrl("");
|
|
setBootstrapPrompt("");
|
|
setMaxTurnsPerRun(80);
|
|
setHeartbeatEnabled(false);
|
|
setIntervalSec(300);
|
|
setExpanded(true);
|
|
setAdapterAdvancedOpen(false);
|
|
setHeartbeatOpen(false);
|
|
}
|
|
|
|
function buildAdapterConfig() {
|
|
const config: Record<string, unknown> = {};
|
|
if (cwd) config.cwd = cwd;
|
|
if (promptTemplate) config.promptTemplate = promptTemplate;
|
|
if (bootstrapPrompt) config.bootstrapPromptTemplate = bootstrapPrompt;
|
|
if (model) config.model = model;
|
|
config.timeoutSec = 0;
|
|
config.graceSec = 15;
|
|
|
|
if (adapterType === "claude_local") {
|
|
config.maxTurnsPerRun = maxTurnsPerRun;
|
|
config.dangerouslySkipPermissions = dangerouslySkipPermissions;
|
|
} else if (adapterType === "codex_local") {
|
|
config.search = search;
|
|
config.dangerouslyBypassApprovalsAndSandbox = dangerouslyBypassSandbox;
|
|
} else if (adapterType === "process") {
|
|
if (command) config.command = command;
|
|
if (args) config.args = args.split(",").map((a) => a.trim()).filter(Boolean);
|
|
} else if (adapterType === "http") {
|
|
if (url) config.url = url;
|
|
}
|
|
return config;
|
|
}
|
|
|
|
function handleSubmit() {
|
|
if (!selectedCompanyId || !name.trim()) return;
|
|
createAgent.mutate({
|
|
name: name.trim(),
|
|
role: effectiveRole,
|
|
...(title.trim() ? { title: title.trim() } : {}),
|
|
...(reportsTo ? { reportsTo } : {}),
|
|
adapterType,
|
|
adapterConfig: buildAdapterConfig(),
|
|
runtimeConfig: {
|
|
heartbeat: {
|
|
enabled: heartbeatEnabled,
|
|
intervalSec,
|
|
wakeOnAssignment: true,
|
|
wakeOnOnDemand: true,
|
|
wakeOnAutomation: true,
|
|
cooldownSec: 10,
|
|
},
|
|
},
|
|
contextMode: "thin",
|
|
budgetMonthlyCents: 0,
|
|
});
|
|
}
|
|
|
|
function handleKeyDown(e: React.KeyboardEvent) {
|
|
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
|
|
e.preventDefault();
|
|
handleSubmit();
|
|
}
|
|
}
|
|
|
|
const currentReportsTo = (agents ?? []).find((a) => a.id === reportsTo);
|
|
const selectedModel = (adapterModels ?? []).find((m) => m.id === model);
|
|
|
|
return (
|
|
<Dialog
|
|
open={newAgentOpen}
|
|
onOpenChange={(open) => {
|
|
if (!open) { reset(); closeNewAgent(); }
|
|
}}
|
|
>
|
|
<DialogContent
|
|
showCloseButton={false}
|
|
className={cn("p-0 gap-0 overflow-hidden", expanded ? "sm:max-w-2xl" : "sm:max-w-lg")}
|
|
onKeyDown={handleKeyDown}
|
|
>
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-4 py-2.5 border-b border-border">
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
{selectedCompany && (
|
|
<span className="bg-muted px-1.5 py-0.5 rounded text-xs font-medium">
|
|
{selectedCompany.name.slice(0, 3).toUpperCase()}
|
|
</span>
|
|
)}
|
|
<span className="text-muted-foreground/60">›</span>
|
|
<span>New agent</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Button variant="ghost" size="icon-xs" className="text-muted-foreground" onClick={() => setExpanded(!expanded)}>
|
|
{expanded ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
|
|
</Button>
|
|
<Button variant="ghost" size="icon-xs" className="text-muted-foreground" onClick={() => { reset(); closeNewAgent(); }}>
|
|
<span className="text-lg leading-none">×</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="overflow-y-auto max-h-[70vh]">
|
|
{/* Name */}
|
|
<div className="px-4 pt-3">
|
|
<input
|
|
className="w-full text-base font-medium bg-transparent outline-none placeholder:text-muted-foreground/50"
|
|
placeholder="Agent name"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<div className="px-4 pb-2">
|
|
<input
|
|
className="w-full bg-transparent outline-none text-sm text-muted-foreground placeholder:text-muted-foreground/40"
|
|
placeholder="Title (e.g. VP of Engineering)"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Property chips: Role + Reports To */}
|
|
<div className="flex items-center gap-1.5 px-4 py-2 border-t border-border flex-wrap">
|
|
{/* Role */}
|
|
<Popover open={roleOpen} onOpenChange={setRoleOpen}>
|
|
<PopoverTrigger asChild>
|
|
<button
|
|
className={cn(
|
|
"inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors",
|
|
isFirstAgent && "opacity-60 cursor-not-allowed"
|
|
)}
|
|
disabled={isFirstAgent}
|
|
>
|
|
<Shield className="h-3 w-3 text-muted-foreground" />
|
|
{roleLabels[effectiveRole] ?? effectiveRole}
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-36 p-1" align="start">
|
|
{AGENT_ROLES.map((r) => (
|
|
<button
|
|
key={r}
|
|
className={cn(
|
|
"flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
|
|
r === role && "bg-accent"
|
|
)}
|
|
onClick={() => { setRole(r); setRoleOpen(false); }}
|
|
>
|
|
{roleLabels[r] ?? r}
|
|
</button>
|
|
))}
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
{/* Reports To */}
|
|
<Popover open={reportsToOpen} onOpenChange={setReportsToOpen}>
|
|
<PopoverTrigger asChild>
|
|
<button
|
|
className={cn(
|
|
"inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors",
|
|
isFirstAgent && "opacity-60 cursor-not-allowed"
|
|
)}
|
|
disabled={isFirstAgent}
|
|
>
|
|
<User className="h-3 w-3 text-muted-foreground" />
|
|
{currentReportsTo
|
|
? `Reports to ${currentReportsTo.name}`
|
|
: isFirstAgent
|
|
? "Reports to: N/A (CEO)"
|
|
: "Reports to..."
|
|
}
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-48 p-1" align="start">
|
|
<button
|
|
className={cn(
|
|
"flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
|
|
!reportsTo && "bg-accent"
|
|
)}
|
|
onClick={() => { setReportsTo(""); setReportsToOpen(false); }}
|
|
>
|
|
No manager
|
|
</button>
|
|
{(agents ?? []).map((a) => (
|
|
<button
|
|
key={a.id}
|
|
className={cn(
|
|
"flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 truncate",
|
|
a.id === reportsTo && "bg-accent"
|
|
)}
|
|
onClick={() => { setReportsTo(a.id); setReportsToOpen(false); }}
|
|
>
|
|
{a.name}
|
|
<span className="text-muted-foreground ml-auto">{roleLabels[a.role] ?? a.role}</span>
|
|
</button>
|
|
))}
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
|
|
{/* Adapter type dropdown (above config section) */}
|
|
<div className="px-4 py-2.5 border-t border-border">
|
|
<Field label="Adapter" hint={help.adapterType}>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<button className="inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-sm hover:bg-accent/50 transition-colors w-full justify-between">
|
|
<span>{adapterLabels[adapterType] ?? adapterType}</span>
|
|
<ChevronDown className="h-3 w-3 text-muted-foreground" />
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[var(--radix-popover-trigger-width)] p-1" align="start">
|
|
{AGENT_ADAPTER_TYPES.map((t) => (
|
|
<button
|
|
key={t}
|
|
className={cn(
|
|
"flex items-center gap-2 w-full px-2 py-1.5 text-sm rounded hover:bg-accent/50",
|
|
t === adapterType && "bg-accent"
|
|
)}
|
|
onClick={() => setAdapterType(t)}
|
|
>
|
|
{adapterLabels[t] ?? t}
|
|
</button>
|
|
))}
|
|
</PopoverContent>
|
|
</Popover>
|
|
</Field>
|
|
</div>
|
|
|
|
{/* Adapter Configuration (always open) */}
|
|
<div className="border-t border-border">
|
|
<div className="px-4 py-2 text-xs font-medium text-muted-foreground">
|
|
Adapter Configuration
|
|
</div>
|
|
<div className="px-4 pb-3 space-y-3">
|
|
{/* Working directory — basic, shown for local adapters */}
|
|
{(adapterType === "claude_local" || adapterType === "codex_local") && (
|
|
<Field label="Working directory" hint={help.cwd}>
|
|
<div className="flex items-center gap-2 rounded-md border border-border px-2.5 py-1.5">
|
|
<FolderOpen className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
|
|
<input
|
|
className="w-full bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40"
|
|
placeholder="/path/to/project"
|
|
value={cwd}
|
|
onChange={(e) => setCwd(e.target.value)}
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="inline-flex items-center rounded-md border border-border px-2 py-0.5 text-xs text-muted-foreground hover:bg-accent/50 transition-colors shrink-0"
|
|
onClick={async () => {
|
|
try {
|
|
// @ts-expect-error -- showDirectoryPicker is not in all TS lib defs yet
|
|
const handle = await window.showDirectoryPicker({ mode: "read" });
|
|
setCwd(handle.name);
|
|
} catch {
|
|
// user cancelled or API unsupported
|
|
}
|
|
}}
|
|
>
|
|
Choose
|
|
</button>
|
|
</div>
|
|
</Field>
|
|
)}
|
|
|
|
{/* Prompt template — basic, auto-expanding */}
|
|
{(adapterType === "claude_local" || adapterType === "codex_local") && (
|
|
<Field label="Prompt template" hint={help.promptTemplate}>
|
|
<AutoExpandTextarea
|
|
placeholder="You are agent {{ agent.name }}. Your role is {{ agent.role }}..."
|
|
value={promptTemplate}
|
|
onChange={setPromptTemplate}
|
|
minRows={4}
|
|
/>
|
|
</Field>
|
|
)}
|
|
|
|
{/* Skip permissions — basic for claude */}
|
|
{adapterType === "claude_local" && (
|
|
<ToggleField
|
|
label="Skip permissions"
|
|
hint={help.dangerouslySkipPermissions}
|
|
checked={dangerouslySkipPermissions}
|
|
onChange={setDangerouslySkipPermissions}
|
|
/>
|
|
)}
|
|
|
|
{/* Bypass sandbox + search — basic for codex */}
|
|
{adapterType === "codex_local" && (
|
|
<>
|
|
<ToggleField
|
|
label="Bypass sandbox"
|
|
hint={help.dangerouslyBypassSandbox}
|
|
checked={dangerouslyBypassSandbox}
|
|
onChange={setDangerouslyBypassSandbox}
|
|
/>
|
|
<ToggleField
|
|
label="Enable search"
|
|
hint={help.search}
|
|
checked={search}
|
|
onChange={setSearch}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{/* Process-specific fields */}
|
|
{adapterType === "process" && (
|
|
<>
|
|
<Field label="Command" hint={help.command}>
|
|
<input
|
|
className="w-full rounded-md border border-border px-2.5 py-1.5 bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40"
|
|
placeholder="e.g. node, python"
|
|
value={command}
|
|
onChange={(e) => setCommand(e.target.value)}
|
|
/>
|
|
</Field>
|
|
<Field label="Args (comma-separated)" hint={help.args}>
|
|
<input
|
|
className="w-full rounded-md border border-border px-2.5 py-1.5 bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40"
|
|
placeholder="e.g. script.js, --flag"
|
|
value={args}
|
|
onChange={(e) => setArgs(e.target.value)}
|
|
/>
|
|
</Field>
|
|
</>
|
|
)}
|
|
|
|
{/* HTTP-specific fields */}
|
|
{adapterType === "http" && (
|
|
<Field label="Webhook URL" hint={help.webhookUrl}>
|
|
<input
|
|
className="w-full rounded-md border border-border px-2.5 py-1.5 bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40"
|
|
placeholder="https://..."
|
|
value={url}
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
/>
|
|
</Field>
|
|
)}
|
|
|
|
{/* Advanced section for local adapters */}
|
|
{(adapterType === "claude_local" || adapterType === "codex_local") && (
|
|
<CollapsibleSection
|
|
title="Advanced Adapter Configuration"
|
|
open={adapterAdvancedOpen}
|
|
onToggle={() => setAdapterAdvancedOpen(!adapterAdvancedOpen)}
|
|
>
|
|
<div className="space-y-3">
|
|
{/* Model dropdown */}
|
|
<Field label="Model" hint={help.model}>
|
|
<Popover open={modelOpen} onOpenChange={setModelOpen}>
|
|
<PopoverTrigger asChild>
|
|
<button className="inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-sm hover:bg-accent/50 transition-colors w-full justify-between">
|
|
<span className={cn(!model && "text-muted-foreground")}>
|
|
{selectedModel ? selectedModel.label : model || "Default"}
|
|
</span>
|
|
<ChevronDown className="h-3 w-3 text-muted-foreground" />
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[var(--radix-popover-trigger-width)] p-1" align="start">
|
|
<button
|
|
className={cn(
|
|
"flex items-center gap-2 w-full px-2 py-1.5 text-sm rounded hover:bg-accent/50",
|
|
!model && "bg-accent"
|
|
)}
|
|
onClick={() => { setModel(""); setModelOpen(false); }}
|
|
>
|
|
Default
|
|
</button>
|
|
{(adapterModels ?? []).map((m) => (
|
|
<button
|
|
key={m.id}
|
|
className={cn(
|
|
"flex items-center justify-between w-full px-2 py-1.5 text-sm rounded hover:bg-accent/50",
|
|
m.id === model && "bg-accent"
|
|
)}
|
|
onClick={() => { setModel(m.id); setModelOpen(false); }}
|
|
>
|
|
<span>{m.label}</span>
|
|
<span className="text-xs text-muted-foreground font-mono">{m.id}</span>
|
|
</button>
|
|
))}
|
|
</PopoverContent>
|
|
</Popover>
|
|
</Field>
|
|
|
|
{/* Bootstrap prompt */}
|
|
<Field label="Bootstrap prompt (first run)" hint={help.bootstrapPrompt}>
|
|
<AutoExpandTextarea
|
|
placeholder="Optional initial setup prompt for the first run"
|
|
value={bootstrapPrompt}
|
|
onChange={setBootstrapPrompt}
|
|
minRows={2}
|
|
/>
|
|
</Field>
|
|
|
|
{/* Max turns — claude only */}
|
|
{adapterType === "claude_local" && (
|
|
<Field label="Max turns per run" hint={help.maxTurnsPerRun}>
|
|
<input
|
|
type="number"
|
|
className="w-full rounded-md border border-border px-2.5 py-1.5 bg-transparent outline-none text-sm font-mono"
|
|
value={maxTurnsPerRun}
|
|
onChange={(e) => setMaxTurnsPerRun(Number(e.target.value))}
|
|
/>
|
|
</Field>
|
|
)}
|
|
</div>
|
|
</CollapsibleSection>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Heartbeat Policy */}
|
|
<CollapsibleSection
|
|
title="Heartbeat Policy"
|
|
icon={<Heart className="h-3 w-3" />}
|
|
open={heartbeatOpen}
|
|
onToggle={() => setHeartbeatOpen(!heartbeatOpen)}
|
|
bordered
|
|
>
|
|
<div className="space-y-3">
|
|
<ToggleWithNumber
|
|
label="Heartbeat on interval"
|
|
hint={help.heartbeatInterval}
|
|
checked={heartbeatEnabled}
|
|
onCheckedChange={setHeartbeatEnabled}
|
|
number={intervalSec}
|
|
onNumberChange={setIntervalSec}
|
|
numberLabel="sec"
|
|
numberHint={help.intervalSec}
|
|
showNumber={heartbeatEnabled}
|
|
/>
|
|
</div>
|
|
</CollapsibleSection>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="flex items-center justify-between px-4 py-2.5 border-t border-border">
|
|
<span className="text-xs text-muted-foreground">
|
|
{isFirstAgent ? "This will be the CEO" : ""}
|
|
</span>
|
|
<Button
|
|
size="sm"
|
|
disabled={!name.trim() || createAgent.isPending}
|
|
onClick={handleSubmit}
|
|
>
|
|
{createAgent.isPending ? "Creating..." : "Create agent"}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
/* ---- Reusable components ---- */
|
|
|
|
function HintIcon({ text }: { text: string }) {
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button type="button" className="inline-flex text-muted-foreground/50 hover:text-muted-foreground transition-colors">
|
|
<HelpCircle className="h-3 w-3" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top" className="max-w-xs">
|
|
{text}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
|
|
return (
|
|
<div>
|
|
<div className="flex items-center gap-1.5 mb-1">
|
|
<label className="text-xs text-muted-foreground">{label}</label>
|
|
{hint && <HintIcon text={hint} />}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ToggleField({
|
|
label,
|
|
hint,
|
|
checked,
|
|
onChange,
|
|
}: {
|
|
label: string;
|
|
hint?: string;
|
|
checked: boolean;
|
|
onChange: (v: boolean) => void;
|
|
}) {
|
|
return (
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xs text-muted-foreground">{label}</span>
|
|
{hint && <HintIcon text={hint} />}
|
|
</div>
|
|
<button
|
|
className={cn(
|
|
"relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
|
|
checked ? "bg-green-600" : "bg-muted"
|
|
)}
|
|
onClick={() => onChange(!checked)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
|
|
checked ? "translate-x-4.5" : "translate-x-0.5"
|
|
)}
|
|
/>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ToggleWithNumber({
|
|
label,
|
|
hint,
|
|
checked,
|
|
onCheckedChange,
|
|
number,
|
|
onNumberChange,
|
|
numberLabel,
|
|
numberHint,
|
|
showNumber,
|
|
}: {
|
|
label: string;
|
|
hint?: string;
|
|
checked: boolean;
|
|
onCheckedChange: (v: boolean) => void;
|
|
number: number;
|
|
onNumberChange: (v: number) => void;
|
|
numberLabel: string;
|
|
numberHint?: string;
|
|
showNumber: boolean;
|
|
}) {
|
|
return (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xs text-muted-foreground">{label}</span>
|
|
{hint && <HintIcon text={hint} />}
|
|
</div>
|
|
<button
|
|
className={cn(
|
|
"relative inline-flex h-5 w-9 items-center rounded-full transition-colors shrink-0",
|
|
checked ? "bg-green-600" : "bg-muted"
|
|
)}
|
|
onClick={() => onCheckedChange(!checked)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
|
|
checked ? "translate-x-4.5" : "translate-x-0.5"
|
|
)}
|
|
/>
|
|
</button>
|
|
</div>
|
|
{showNumber && (
|
|
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
|
<span>Run heartbeat every</span>
|
|
<input
|
|
type="number"
|
|
className="w-16 rounded-md border border-border px-2 py-0.5 bg-transparent outline-none text-xs font-mono text-center"
|
|
value={number}
|
|
onChange={(e) => onNumberChange(Number(e.target.value))}
|
|
/>
|
|
<span>{numberLabel}</span>
|
|
{numberHint && <HintIcon text={numberHint} />}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CollapsibleSection({
|
|
title,
|
|
icon,
|
|
open,
|
|
onToggle,
|
|
bordered,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
icon?: React.ReactNode;
|
|
open: boolean;
|
|
onToggle: () => void;
|
|
bordered?: boolean;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className={cn(bordered && "border-t border-border")}>
|
|
<button
|
|
className="flex items-center gap-2 w-full px-4 py-2 text-xs font-medium text-muted-foreground hover:bg-accent/30 transition-colors"
|
|
onClick={onToggle}
|
|
>
|
|
{open ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
|
|
{icon}
|
|
{title}
|
|
</button>
|
|
{open && <div className="px-4 pb-3">{children}</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AutoExpandTextarea({
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
minRows,
|
|
}: {
|
|
value: string;
|
|
onChange: (v: string) => void;
|
|
placeholder?: string;
|
|
minRows?: number;
|
|
}) {
|
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
const rows = minRows ?? 3;
|
|
const lineHeight = 20; // approx line height in px for text-sm mono
|
|
const minHeight = rows * lineHeight;
|
|
|
|
const adjustHeight = useCallback(() => {
|
|
const el = textareaRef.current;
|
|
if (!el) return;
|
|
el.style.height = "auto";
|
|
el.style.height = `${Math.max(minHeight, el.scrollHeight)}px`;
|
|
}, [minHeight]);
|
|
|
|
useEffect(() => { adjustHeight(); }, [value, adjustHeight]);
|
|
|
|
return (
|
|
<textarea
|
|
ref={textareaRef}
|
|
className="w-full rounded-md border border-border px-2.5 py-1.5 bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40 resize-none overflow-hidden"
|
|
placeholder={placeholder}
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
style={{ minHeight }}
|
|
/>
|
|
);
|
|
}
|