Extract AgentConfigForm and agent-config-primitives components
Shared primitives (Field, ToggleField, ToggleWithNumber, CollapsibleSection, DraftInput, DraftTextarea, DraftNumberInput, HintIcon, help text, adapterLabels, roleLabels) extracted into agent-config-primitives.tsx. AgentConfigForm is a dual-mode form supporting both create (controlled values) and edit (save-on-blur per field) modes, used by NewAgentDialog and AgentDetail. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
621
ui/src/components/AgentConfigForm.tsx
Normal file
621
ui/src/components/AgentConfigForm.tsx
Normal file
@@ -0,0 +1,621 @@
|
||||
import { useState } from "react";
|
||||
import { AGENT_ADAPTER_TYPES } from "@paperclip/shared";
|
||||
import type { Agent } from "@paperclip/shared";
|
||||
import type { AdapterModel } from "../api/agents";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { FolderOpen, Heart, ChevronDown } from "lucide-react";
|
||||
import { cn } from "../lib/utils";
|
||||
import {
|
||||
Field,
|
||||
ToggleField,
|
||||
ToggleWithNumber,
|
||||
CollapsibleSection,
|
||||
AutoExpandTextarea,
|
||||
DraftInput,
|
||||
DraftTextarea,
|
||||
DraftNumberInput,
|
||||
HintIcon,
|
||||
help,
|
||||
adapterLabels,
|
||||
} from "./agent-config-primitives";
|
||||
|
||||
/* ---- Create mode values ---- */
|
||||
|
||||
export interface CreateConfigValues {
|
||||
adapterType: string;
|
||||
cwd: string;
|
||||
promptTemplate: string;
|
||||
model: string;
|
||||
dangerouslySkipPermissions: boolean;
|
||||
search: boolean;
|
||||
dangerouslyBypassSandbox: boolean;
|
||||
command: string;
|
||||
args: string;
|
||||
url: string;
|
||||
bootstrapPrompt: string;
|
||||
maxTurnsPerRun: number;
|
||||
heartbeatEnabled: boolean;
|
||||
intervalSec: number;
|
||||
}
|
||||
|
||||
export const defaultCreateValues: CreateConfigValues = {
|
||||
adapterType: "claude_local",
|
||||
cwd: "",
|
||||
promptTemplate: "",
|
||||
model: "",
|
||||
dangerouslySkipPermissions: false,
|
||||
search: false,
|
||||
dangerouslyBypassSandbox: false,
|
||||
command: "",
|
||||
args: "",
|
||||
url: "",
|
||||
bootstrapPrompt: "",
|
||||
maxTurnsPerRun: 80,
|
||||
heartbeatEnabled: false,
|
||||
intervalSec: 300,
|
||||
};
|
||||
|
||||
/* ---- Props ---- */
|
||||
|
||||
type AgentConfigFormProps = {
|
||||
adapterModels?: AdapterModel[];
|
||||
} & (
|
||||
| {
|
||||
mode: "create";
|
||||
values: CreateConfigValues;
|
||||
onChange: (patch: Partial<CreateConfigValues>) => void;
|
||||
}
|
||||
| {
|
||||
mode: "edit";
|
||||
agent: Agent;
|
||||
onSave: (patch: Record<string, unknown>) => void;
|
||||
}
|
||||
);
|
||||
|
||||
/* ---- Shared input class ---- */
|
||||
const inputClass =
|
||||
"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";
|
||||
|
||||
/* ---- Form ---- */
|
||||
|
||||
export function AgentConfigForm(props: AgentConfigFormProps) {
|
||||
const { mode, adapterModels } = props;
|
||||
const isCreate = mode === "create";
|
||||
|
||||
// Resolve adapter type + config + heartbeat from props
|
||||
const adapterType = isCreate ? props.values.adapterType : props.agent.adapterType;
|
||||
const isLocal = adapterType === "claude_local" || adapterType === "codex_local";
|
||||
|
||||
// Edit mode: extract from agent
|
||||
const config = !isCreate ? ((props.agent.adapterConfig ?? {}) as Record<string, unknown>) : {};
|
||||
const runtimeConfig = !isCreate ? ((props.agent.runtimeConfig ?? {}) as Record<string, unknown>) : {};
|
||||
const heartbeat = !isCreate ? ((runtimeConfig.heartbeat ?? {}) as Record<string, unknown>) : {};
|
||||
|
||||
// Section toggle state
|
||||
const [adapterAdvancedOpen, setAdapterAdvancedOpen] = useState(!isCreate);
|
||||
const [heartbeatOpen, setHeartbeatOpen] = useState(!isCreate);
|
||||
|
||||
// Popover states
|
||||
const [modelOpen, setModelOpen] = useState(false);
|
||||
|
||||
// Create mode helpers
|
||||
const val = isCreate ? props.values : null;
|
||||
const set = isCreate
|
||||
? (patch: Partial<CreateConfigValues>) => props.onChange(patch)
|
||||
: null;
|
||||
|
||||
// Edit mode helpers
|
||||
const saveConfig = !isCreate
|
||||
? (field: string, value: unknown) =>
|
||||
props.onSave({ adapterConfig: { ...config, [field]: value } })
|
||||
: null;
|
||||
const saveHeartbeat = !isCreate
|
||||
? (field: string, value: unknown) =>
|
||||
props.onSave({
|
||||
runtimeConfig: { ...runtimeConfig, heartbeat: { ...heartbeat, [field]: value } },
|
||||
})
|
||||
: null;
|
||||
const saveIdentity = !isCreate
|
||||
? (field: string, value: unknown) => props.onSave({ [field]: value })
|
||||
: null;
|
||||
|
||||
// Current model for display
|
||||
const currentModelId = isCreate ? val!.model : String(config.model ?? "");
|
||||
const selectedModel = (adapterModels ?? []).find((m) => m.id === currentModelId);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* ---- Identity (edit only) ---- */}
|
||||
{!isCreate && (
|
||||
<div className="border-b border-border">
|
||||
<div className="px-4 py-2 text-xs font-medium text-muted-foreground">Identity</div>
|
||||
<div className="px-4 pb-3 space-y-3">
|
||||
<Field label="Name" hint={help.name}>
|
||||
<DraftInput
|
||||
value={props.agent.name}
|
||||
onCommit={(v) => saveIdentity!("name", v)}
|
||||
className={inputClass}
|
||||
placeholder="Agent name"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Title" hint={help.title}>
|
||||
<DraftInput
|
||||
value={props.agent.title ?? ""}
|
||||
onCommit={(v) => saveIdentity!("title", v || null)}
|
||||
className={inputClass}
|
||||
placeholder="e.g. VP of Engineering"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Capabilities" hint={help.capabilities}>
|
||||
<DraftTextarea
|
||||
value={props.agent.capabilities ?? ""}
|
||||
onCommit={(v) => saveIdentity!("capabilities", v || null)}
|
||||
placeholder="Describe what this agent can do..."
|
||||
minRows={2}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ---- Adapter type ---- */}
|
||||
<div className={cn("px-4 py-2.5", isCreate ? "border-t border-border" : "border-b border-border")}>
|
||||
<Field label="Adapter" hint={help.adapterType}>
|
||||
{isCreate ? (
|
||||
<AdapterTypeDropdown value={adapterType} onChange={(t) => set!({ adapterType: t })} />
|
||||
) : (
|
||||
<div className="text-sm font-mono px-2.5 py-1.5">{adapterLabels[adapterType] ?? adapterType}</div>
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
{/* ---- Adapter Configuration ---- */}
|
||||
<div className={cn(isCreate ? "border-t border-border" : "border-b 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 */}
|
||||
{isLocal && (
|
||||
<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" />
|
||||
<DraftInput
|
||||
value={isCreate ? val!.cwd : String(config.cwd ?? "")}
|
||||
onCommit={(v) =>
|
||||
isCreate ? set!({ cwd: v }) : saveConfig!("cwd", v || undefined)
|
||||
}
|
||||
immediate={isCreate}
|
||||
className="w-full bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40"
|
||||
placeholder="/path/to/project"
|
||||
/>
|
||||
<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" });
|
||||
if (isCreate) set!({ cwd: handle.name });
|
||||
else saveConfig!("cwd", handle.name);
|
||||
} catch {
|
||||
// user cancelled or API unsupported
|
||||
}
|
||||
}}
|
||||
>
|
||||
Choose
|
||||
</button>
|
||||
</div>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{/* Prompt template */}
|
||||
{isLocal && (
|
||||
<Field label="Prompt template" hint={help.promptTemplate}>
|
||||
{isCreate ? (
|
||||
<AutoExpandTextarea
|
||||
placeholder="You are agent {{ agent.name }}. Your role is {{ agent.role }}..."
|
||||
value={val!.promptTemplate}
|
||||
onChange={(v) => set!({ promptTemplate: v })}
|
||||
minRows={4}
|
||||
/>
|
||||
) : (
|
||||
<DraftTextarea
|
||||
value={String(config.promptTemplate ?? "")}
|
||||
onCommit={(v) => saveConfig!("promptTemplate", v || undefined)}
|
||||
placeholder="You are agent {{ agent.name }}. Your role is {{ agent.role }}..."
|
||||
minRows={4}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{/* Claude-specific: Skip permissions */}
|
||||
{adapterType === "claude_local" && (
|
||||
<ToggleField
|
||||
label="Skip permissions"
|
||||
hint={help.dangerouslySkipPermissions}
|
||||
checked={
|
||||
isCreate
|
||||
? val!.dangerouslySkipPermissions
|
||||
: config.dangerouslySkipPermissions !== false
|
||||
}
|
||||
onChange={(v) =>
|
||||
isCreate
|
||||
? set!({ dangerouslySkipPermissions: v })
|
||||
: saveConfig!("dangerouslySkipPermissions", v)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Codex-specific: Bypass sandbox + Search */}
|
||||
{adapterType === "codex_local" && (
|
||||
<>
|
||||
<ToggleField
|
||||
label="Bypass sandbox"
|
||||
hint={help.dangerouslyBypassSandbox}
|
||||
checked={
|
||||
isCreate
|
||||
? val!.dangerouslyBypassSandbox
|
||||
: config.dangerouslyBypassApprovalsAndSandbox !== false
|
||||
}
|
||||
onChange={(v) =>
|
||||
isCreate
|
||||
? set!({ dangerouslyBypassSandbox: v })
|
||||
: saveConfig!("dangerouslyBypassApprovalsAndSandbox", v)
|
||||
}
|
||||
/>
|
||||
<ToggleField
|
||||
label="Enable search"
|
||||
hint={help.search}
|
||||
checked={isCreate ? val!.search : !!config.search}
|
||||
onChange={(v) =>
|
||||
isCreate ? set!({ search: v }) : saveConfig!("search", v)
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Process-specific */}
|
||||
{adapterType === "process" && (
|
||||
<>
|
||||
<Field label="Command" hint={help.command}>
|
||||
<DraftInput
|
||||
value={isCreate ? val!.command : String(config.command ?? "")}
|
||||
onCommit={(v) =>
|
||||
isCreate ? set!({ command: v }) : saveConfig!("command", v || undefined)
|
||||
}
|
||||
immediate={isCreate}
|
||||
className={inputClass}
|
||||
placeholder="e.g. node, python"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Args (comma-separated)" hint={help.args}>
|
||||
<DraftInput
|
||||
value={isCreate ? val!.args : String(config.args ?? "")}
|
||||
onCommit={(v) =>
|
||||
isCreate
|
||||
? set!({ args: v })
|
||||
: saveConfig!(
|
||||
"args",
|
||||
v
|
||||
? v
|
||||
.split(",")
|
||||
.map((a) => a.trim())
|
||||
.filter(Boolean)
|
||||
: undefined,
|
||||
)
|
||||
}
|
||||
immediate={isCreate}
|
||||
className={inputClass}
|
||||
placeholder="e.g. script.js, --flag"
|
||||
/>
|
||||
</Field>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* HTTP-specific */}
|
||||
{adapterType === "http" && (
|
||||
<Field label="Webhook URL" hint={help.webhookUrl}>
|
||||
<DraftInput
|
||||
value={isCreate ? val!.url : String(config.url ?? "")}
|
||||
onCommit={(v) =>
|
||||
isCreate ? set!({ url: v }) : saveConfig!("url", v || undefined)
|
||||
}
|
||||
immediate={isCreate}
|
||||
className={inputClass}
|
||||
placeholder="https://..."
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{/* Advanced adapter section */}
|
||||
{isLocal && (
|
||||
<>
|
||||
{isCreate ? (
|
||||
<CollapsibleSection
|
||||
title="Advanced Adapter Configuration"
|
||||
open={adapterAdvancedOpen}
|
||||
onToggle={() => setAdapterAdvancedOpen(!adapterAdvancedOpen)}
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<ModelDropdown
|
||||
models={adapterModels ?? []}
|
||||
value={val!.model}
|
||||
onChange={(v) => set!({ model: v })}
|
||||
open={modelOpen}
|
||||
onOpenChange={setModelOpen}
|
||||
/>
|
||||
<Field label="Bootstrap prompt (first run)" hint={help.bootstrapPrompt}>
|
||||
<AutoExpandTextarea
|
||||
placeholder="Optional initial setup prompt for the first run"
|
||||
value={val!.bootstrapPrompt}
|
||||
onChange={(v) => set!({ bootstrapPrompt: v })}
|
||||
minRows={2}
|
||||
/>
|
||||
</Field>
|
||||
{adapterType === "claude_local" && (
|
||||
<Field label="Max turns per run" hint={help.maxTurnsPerRun}>
|
||||
<input
|
||||
type="number"
|
||||
className={inputClass}
|
||||
value={val!.maxTurnsPerRun}
|
||||
onChange={(e) => set!({ maxTurnsPerRun: Number(e.target.value) })}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
) : (
|
||||
/* Edit mode: show advanced fields inline (no collapse) */
|
||||
<div className="space-y-3 pt-2 border-t border-border/50">
|
||||
<div className="text-[10px] font-medium text-muted-foreground/60 uppercase tracking-wider">
|
||||
Advanced
|
||||
</div>
|
||||
<ModelDropdown
|
||||
models={adapterModels ?? []}
|
||||
value={String(config.model ?? "")}
|
||||
onChange={(v) => saveConfig!("model", v || undefined)}
|
||||
open={modelOpen}
|
||||
onOpenChange={setModelOpen}
|
||||
/>
|
||||
<Field label="Bootstrap prompt (first run)" hint={help.bootstrapPrompt}>
|
||||
<DraftTextarea
|
||||
value={String(config.bootstrapPromptTemplate ?? "")}
|
||||
onCommit={(v) => saveConfig!("bootstrapPromptTemplate", v || undefined)}
|
||||
placeholder="Optional initial setup prompt for the first run"
|
||||
minRows={2}
|
||||
/>
|
||||
</Field>
|
||||
{adapterType === "claude_local" && (
|
||||
<Field label="Max turns per run" hint={help.maxTurnsPerRun}>
|
||||
<DraftNumberInput
|
||||
value={Number(config.maxTurnsPerRun ?? 80)}
|
||||
onCommit={(v) => saveConfig!("maxTurnsPerRun", v || 80)}
|
||||
className={inputClass}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
<Field label="Timeout (sec)" hint={help.timeoutSec}>
|
||||
<DraftNumberInput
|
||||
value={Number(config.timeoutSec ?? 0)}
|
||||
onCommit={(v) => saveConfig!("timeoutSec", v)}
|
||||
className={inputClass}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Interrupt grace period (sec)" hint={help.graceSec}>
|
||||
<DraftNumberInput
|
||||
value={Number(config.graceSec ?? 15)}
|
||||
onCommit={(v) => saveConfig!("graceSec", v)}
|
||||
className={inputClass}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ---- Heartbeat Policy ---- */}
|
||||
{isCreate ? (
|
||||
<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={val!.heartbeatEnabled}
|
||||
onCheckedChange={(v) => set!({ heartbeatEnabled: v })}
|
||||
number={val!.intervalSec}
|
||||
onNumberChange={(v) => set!({ intervalSec: v })}
|
||||
numberLabel="sec"
|
||||
numberPrefix="Run heartbeat every"
|
||||
numberHint={help.intervalSec}
|
||||
showNumber={val!.heartbeatEnabled}
|
||||
/>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
) : (
|
||||
<div className="border-b border-border">
|
||||
<div className="px-4 py-2 text-xs font-medium text-muted-foreground flex items-center gap-2">
|
||||
<Heart className="h-3 w-3" />
|
||||
Heartbeat Policy
|
||||
</div>
|
||||
<div className="px-4 pb-3 space-y-3">
|
||||
<ToggleWithNumber
|
||||
label="Heartbeat on interval"
|
||||
hint={help.heartbeatInterval}
|
||||
checked={heartbeat.enabled !== false}
|
||||
onCheckedChange={(v) => saveHeartbeat!("enabled", v)}
|
||||
number={Number(heartbeat.intervalSec ?? 300)}
|
||||
onNumberChange={(v) => saveHeartbeat!("intervalSec", v)}
|
||||
numberLabel="sec"
|
||||
numberPrefix="Run heartbeat every"
|
||||
numberHint={help.intervalSec}
|
||||
showNumber={heartbeat.enabled !== false}
|
||||
/>
|
||||
|
||||
{/* Edit-only: wake-on-* and cooldown */}
|
||||
<div className="space-y-3 pt-2 border-t border-border/50">
|
||||
<div className="text-[10px] font-medium text-muted-foreground/60 uppercase tracking-wider">
|
||||
Advanced
|
||||
</div>
|
||||
<ToggleField
|
||||
label="Wake on assignment"
|
||||
hint={help.wakeOnAssignment}
|
||||
checked={heartbeat.wakeOnAssignment !== false}
|
||||
onChange={(v) => saveHeartbeat!("wakeOnAssignment", v)}
|
||||
/>
|
||||
<ToggleField
|
||||
label="Wake on on-demand"
|
||||
hint={help.wakeOnOnDemand}
|
||||
checked={heartbeat.wakeOnOnDemand !== false}
|
||||
onChange={(v) => saveHeartbeat!("wakeOnOnDemand", v)}
|
||||
/>
|
||||
<ToggleField
|
||||
label="Wake on automation"
|
||||
hint={help.wakeOnAutomation}
|
||||
checked={heartbeat.wakeOnAutomation !== false}
|
||||
onChange={(v) => saveHeartbeat!("wakeOnAutomation", v)}
|
||||
/>
|
||||
<Field label="Cooldown (sec)" hint={help.cooldownSec}>
|
||||
<DraftNumberInput
|
||||
value={Number(heartbeat.cooldownSec ?? 10)}
|
||||
onCommit={(v) => saveHeartbeat!("cooldownSec", v)}
|
||||
className={inputClass}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ---- Runtime (edit only) ---- */}
|
||||
{!isCreate && (
|
||||
<div className="border-b border-border">
|
||||
<div className="px-4 py-2 text-xs font-medium text-muted-foreground">Runtime</div>
|
||||
<div className="px-4 pb-3 space-y-3">
|
||||
<Field label="Context mode" hint={help.contextMode}>
|
||||
<div className="text-sm font-mono px-2.5 py-1.5">
|
||||
{props.agent.contextMode}
|
||||
</div>
|
||||
</Field>
|
||||
<Field label="Monthly budget (cents)" hint={help.budgetMonthlyCents}>
|
||||
<DraftNumberInput
|
||||
value={props.agent.budgetMonthlyCents}
|
||||
onCommit={(v) => saveIdentity!("budgetMonthlyCents", v)}
|
||||
className={inputClass}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---- Internal sub-components ---- */
|
||||
|
||||
function AdapterTypeDropdown({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (type: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<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[value] ?? value}</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 === value && "bg-accent",
|
||||
)}
|
||||
onClick={() => onChange(t)}
|
||||
>
|
||||
{adapterLabels[t] ?? t}
|
||||
</button>
|
||||
))}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
function ModelDropdown({
|
||||
models,
|
||||
value,
|
||||
onChange,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: {
|
||||
models: AdapterModel[];
|
||||
value: string;
|
||||
onChange: (id: string) => void;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}) {
|
||||
const selected = models.find((m) => m.id === value);
|
||||
|
||||
return (
|
||||
<Field label="Model" hint={help.model}>
|
||||
<Popover open={open} onOpenChange={onOpenChange}>
|
||||
<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(!value && "text-muted-foreground")}>
|
||||
{selected ? selected.label : value || "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",
|
||||
!value && "bg-accent",
|
||||
)}
|
||||
onClick={() => {
|
||||
onChange("");
|
||||
onOpenChange(false);
|
||||
}}
|
||||
>
|
||||
Default
|
||||
</button>
|
||||
{models.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 === value && "bg-accent",
|
||||
)}
|
||||
onClick={() => {
|
||||
onChange(m.id);
|
||||
onOpenChange(false);
|
||||
}}
|
||||
>
|
||||
<span>{m.label}</span>
|
||||
<span className="text-xs text-muted-foreground font-mono">{m.id}</span>
|
||||
</button>
|
||||
))}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</Field>
|
||||
);
|
||||
}
|
||||
370
ui/src/components/agent-config-primitives.tsx
Normal file
370
ui/src/components/agent-config-primitives.tsx
Normal file
@@ -0,0 +1,370 @@
|
||||
import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipTrigger,
|
||||
TooltipContent,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { HelpCircle, ChevronDown, ChevronRight } from "lucide-react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
/* ---- Help text for (?) tooltips ---- */
|
||||
export 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.",
|
||||
capabilities: "Describes what this agent can do. Shown in the org chart and used for task routing.",
|
||||
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.",
|
||||
timeoutSec: "Maximum seconds a run can take before being terminated. 0 means no timeout.",
|
||||
graceSec: "Seconds to wait after sending interrupt before force-killing the process.",
|
||||
wakeOnAssignment: "Automatically wake this agent when a new issue is assigned to it.",
|
||||
wakeOnOnDemand: "Allow this agent to be woken on demand via the API or UI.",
|
||||
wakeOnAutomation: "Allow automated systems to wake this agent.",
|
||||
cooldownSec: "Minimum seconds between consecutive heartbeat runs.",
|
||||
contextMode: "How context is managed between runs (thin = fresh context each run).",
|
||||
budgetMonthlyCents: "Monthly spending limit in cents. 0 means no limit.",
|
||||
};
|
||||
|
||||
export const adapterLabels: Record<string, string> = {
|
||||
claude_local: "Claude (local)",
|
||||
codex_local: "Codex (local)",
|
||||
process: "Process",
|
||||
http: "HTTP",
|
||||
};
|
||||
|
||||
export 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",
|
||||
};
|
||||
|
||||
/* ---- Primitive components ---- */
|
||||
|
||||
export 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>
|
||||
);
|
||||
}
|
||||
|
||||
export 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>
|
||||
);
|
||||
}
|
||||
|
||||
export 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>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToggleWithNumber({
|
||||
label,
|
||||
hint,
|
||||
checked,
|
||||
onCheckedChange,
|
||||
number,
|
||||
onNumberChange,
|
||||
numberLabel,
|
||||
numberHint,
|
||||
numberPrefix,
|
||||
showNumber,
|
||||
}: {
|
||||
label: string;
|
||||
hint?: string;
|
||||
checked: boolean;
|
||||
onCheckedChange: (v: boolean) => void;
|
||||
number: number;
|
||||
onNumberChange: (v: number) => void;
|
||||
numberLabel: string;
|
||||
numberHint?: string;
|
||||
numberPrefix?: 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">
|
||||
{numberPrefix && <span>{numberPrefix}</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>
|
||||
);
|
||||
}
|
||||
|
||||
export 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>
|
||||
);
|
||||
}
|
||||
|
||||
export function AutoExpandTextarea({
|
||||
value,
|
||||
onChange,
|
||||
onBlur,
|
||||
placeholder,
|
||||
minRows,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
onBlur?: () => void;
|
||||
placeholder?: string;
|
||||
minRows?: number;
|
||||
}) {
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const rows = minRows ?? 3;
|
||||
const lineHeight = 20;
|
||||
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)}
|
||||
onBlur={onBlur}
|
||||
style={{ minHeight }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Text input that manages internal draft state.
|
||||
* Calls `onCommit` on blur (and optionally on every change if `immediate` is set).
|
||||
*/
|
||||
export function DraftInput({
|
||||
value,
|
||||
onCommit,
|
||||
immediate,
|
||||
className,
|
||||
...props
|
||||
}: {
|
||||
value: string;
|
||||
onCommit: (v: string) => void;
|
||||
immediate?: boolean;
|
||||
className?: string;
|
||||
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "className">) {
|
||||
const [draft, setDraft] = useState(value);
|
||||
useEffect(() => setDraft(value), [value]);
|
||||
|
||||
return (
|
||||
<input
|
||||
className={className}
|
||||
value={draft}
|
||||
onChange={(e) => {
|
||||
setDraft(e.target.value);
|
||||
if (immediate) onCommit(e.target.value);
|
||||
}}
|
||||
onBlur={() => {
|
||||
if (draft !== value) onCommit(draft);
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Auto-expanding textarea with draft state and blur-commit.
|
||||
*/
|
||||
export function DraftTextarea({
|
||||
value,
|
||||
onCommit,
|
||||
immediate,
|
||||
placeholder,
|
||||
minRows,
|
||||
}: {
|
||||
value: string;
|
||||
onCommit: (v: string) => void;
|
||||
immediate?: boolean;
|
||||
placeholder?: string;
|
||||
minRows?: number;
|
||||
}) {
|
||||
const [draft, setDraft] = useState(value);
|
||||
useEffect(() => setDraft(value), [value]);
|
||||
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const rows = minRows ?? 3;
|
||||
const lineHeight = 20;
|
||||
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(); }, [draft, 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={draft}
|
||||
onChange={(e) => {
|
||||
setDraft(e.target.value);
|
||||
if (immediate) onCommit(e.target.value);
|
||||
}}
|
||||
onBlur={() => {
|
||||
if (draft !== value) onCommit(draft);
|
||||
}}
|
||||
style={{ minHeight }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Number input with draft state and blur-commit.
|
||||
*/
|
||||
export function DraftNumberInput({
|
||||
value,
|
||||
onCommit,
|
||||
immediate,
|
||||
className,
|
||||
...props
|
||||
}: {
|
||||
value: number;
|
||||
onCommit: (v: number) => void;
|
||||
immediate?: boolean;
|
||||
className?: string;
|
||||
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "className" | "type">) {
|
||||
const [draft, setDraft] = useState(String(value));
|
||||
useEffect(() => setDraft(String(value)), [value]);
|
||||
|
||||
return (
|
||||
<input
|
||||
type="number"
|
||||
className={className}
|
||||
value={draft}
|
||||
onChange={(e) => {
|
||||
setDraft(e.target.value);
|
||||
if (immediate) onCommit(Number(e.target.value) || 0);
|
||||
}}
|
||||
onBlur={() => {
|
||||
const num = Number(draft) || 0;
|
||||
if (num !== value) onCommit(num);
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user