ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-15 02:20:38 +09:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1380 from DanielSousa/feature/change-reports-to

Browse source 
feat(ui): edit and hire with Reports to picker
This commit is contained in:
Dotta 2026-03-23 15:08:54 -05:00 • committed by GitHub
commit 3a79d94050
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 163 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

16
ui/src/components/AgentConfigForm.tsx
View file

@ -44,6 +44,7 @@ import { ClaudeLocalAdvancedFields } from "../adapters/claude-local/config-field
import { MarkdownEditor } from "./MarkdownEditor";
import { ChoosePathButton } from "./PathInstructionsModal";
import { OpenCodeLogoIcon } from "./OpenCodeLogoIcon";
import { ReportsToPicker } from "./ReportsToPicker";
import { shouldShowLegacyWorkingDirectoryField } from "../lib/legacy-agent-config";
/* ---- Create mode values ---- */
@ -315,6 +316,12 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
});
const models = fetchedModels ?? externalModels ?? [];
const { data: companyAgents = [] } = useQuery({
queryKey: selectedCompanyId ? queryKeys.agents.list(selectedCompanyId) : ["agents", "none", "list"],
queryFn: () => agentsApi.list(selectedCompanyId!),
enabled: Boolean(!isCreate && selectedCompanyId),
});
/** Props passed to adapter-specific config field components */
const adapterFieldProps = {
mode,
@ -462,6 +469,15 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
placeholder="e.g. VP of Engineering"
/>
</Field>
<Field label="Reports to" hint={help.reportsTo}>
<ReportsToPicker
agents={companyAgents}
value={eff("identity", "reportsTo", props.agent.reportsTo ?? null)}
onChange={(id) => mark("identity", "reportsTo", id)}
excludeAgentIds={[props.agent.id]}
chooseLabel="Choose manager…"
/>
</Field>
<Field label="Capabilities" hint={help.capabilities}>
<MarkdownEditor
value={eff("identity", "capabilities", props.agent.capabilities ?? "")}

126
ui/src/components/ReportsToPicker.tsx Normal file
View file

@ -0,0 +1,126 @@
import { useState } from "react";
import type { Agent } from "@paperclipai/shared";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { User } from "lucide-react";
import { cn } from "../lib/utils";
import { roleLabels } from "./agent-config-primitives";
import { AgentIcon } from "./AgentIconPicker";
export function ReportsToPicker({
agents,
value,
onChange,
disabled = false,
excludeAgentIds = [],
disabledEmptyLabel = "Reports to: N/A (CEO)",
chooseLabel = "Reports to...",
}: {
agents: Agent[];
value: string | null;
onChange: (id: string | null) => void;
disabled?: boolean;
excludeAgentIds?: string[];
disabledEmptyLabel?: string;
chooseLabel?: string;
}) {
const [open, setOpen] = useState(false);
const exclude = new Set(excludeAgentIds);
const rows = agents.filter(
(a) => a.status !== "terminated" && !exclude.has(a.id),
);
const current = value ? agents.find((a) => a.id === value) : null;
const terminatedManager = current?.status === "terminated";
const unknownManager = Boolean(value && !current);
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className={cn(
"inline-flex max-w-full min-w-0 items-center gap-1.5 overflow-hidden rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors",
terminatedManager && "border-amber-600/45 bg-amber-500/5",
disabled && "opacity-60 cursor-not-allowed",
)}
disabled={disabled}
>
{unknownManager ? (
<>
<User className="h-3 w-3 shrink-0 text-muted-foreground" />
<span className="min-w-0 truncate text-muted-foreground">Unknown manager (stale ID)</span>
</>
) : current ? (
<>
<AgentIcon icon={current.icon} className="h-3 w-3 shrink-0 text-muted-foreground" />
<span
className={cn(
"min-w-0 truncate",
terminatedManager && "text-amber-900 dark:text-amber-200",
)}
>
{`Reports to ${current.name}${terminatedManager ? " (terminated)" : ""}`}
</span>
</>
) : (
<>
<User className="h-3 w-3 shrink-0 text-muted-foreground" />
<span className="min-w-0 truncate">
{disabled ? disabledEmptyLabel : chooseLabel}
</span>
</>
)}
</button>
</PopoverTrigger>
<PopoverContent className="w-48 p-1" align="start">
<button
type="button"
className={cn(
"flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
value === null && "bg-accent",
)}
onClick={() => {
onChange(null);
setOpen(false);
}}
>
No manager
</button>
{terminatedManager && (
<div className="flex min-w-0 items-center gap-2 overflow-hidden px-2 py-1.5 text-xs text-muted-foreground border-b border-border mb-0.5">
<AgentIcon icon={current.icon} className="shrink-0 h-3 w-3" />
<span className="min-w-0 truncate">
Current: {current.name} (terminated)
</span>
</div>
)}
{unknownManager && (
<div className="px-2 py-1.5 text-xs text-muted-foreground border-b border-border mb-0.5">
Saved manager is missing from this company. Choose a new manager or clear.
</div>
)}
{rows.map((a) => (
<button
type="button"
key={a.id}
className={cn(
"flex items-center gap-2 w-full min-w-0 px-2 py-1.5 text-xs rounded hover:bg-accent/50 overflow-hidden",
a.id === value && "bg-accent",
)}
onClick={() => {
onChange(a.id);
setOpen(false);
}}
>
<AgentIcon icon={a.icon} className="shrink-0 h-3 w-3 text-muted-foreground" />
<span className="min-w-0 truncate">{a.name}</span>
<span className="text-muted-foreground ml-auto shrink-0">{roleLabels[a.role] ?? a.role}</span>
</button>
))}
</PopoverContent>
</Popover>
);
}