mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-16 10:50:38 +09:00
Merge upstream/master into add-gpt-5-4-xhigh-effort
This commit is contained in:
Kevin Mok
commit
432d7e72fa
227 changed files with 31564 additions and 2543 deletions
|
|
@ -21,9 +21,13 @@ interface FeedItem {
|
|||
agentName: string;
|
||||
text: string;
|
||||
tone: FeedTone;
|
||||
dedupeKey: string;
|
||||
streamingKind?: "assistant" | "thinking";
|
||||
}
|
||||
|
||||
const MAX_FEED_ITEMS = 40;
|
||||
const MAX_FEED_TEXT_LENGTH = 220;
|
||||
const MAX_STREAMING_TEXT_LENGTH = 4000;
|
||||
const MIN_DASHBOARD_RUNS = 4;
|
||||
|
||||
function readString(value: unknown): string | null {
|
||||
|
|
@ -70,17 +74,25 @@ function createFeedItem(
|
|||
text: string,
|
||||
tone: FeedTone,
|
||||
nextId: number,
|
||||
options?: {
|
||||
streamingKind?: "assistant" | "thinking";
|
||||
preserveWhitespace?: boolean;
|
||||
},
|
||||
): FeedItem | null {
|
||||
const trimmed = text.trim();
|
||||
if (!trimmed) return null;
|
||||
if (!text.trim()) return null;
|
||||
const base = options?.preserveWhitespace ? text : text.trim();
|
||||
const maxLength = options?.streamingKind ? MAX_STREAMING_TEXT_LENGTH : MAX_FEED_TEXT_LENGTH;
|
||||
const normalized = base.length > maxLength ? base.slice(-maxLength) : base;
|
||||
return {
|
||||
id: `${run.id}:${nextId}`,
|
||||
ts,
|
||||
runId: run.id,
|
||||
agentId: run.agentId,
|
||||
agentName: run.agentName,
|
||||
text: trimmed.slice(0, 220),
|
||||
text: normalized,
|
||||
tone,
|
||||
dedupeKey: `feed:${run.id}:${ts}:${tone}:${normalized}`,
|
||||
streamingKind: options?.streamingKind,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -97,16 +109,28 @@ function parseStdoutChunk(
|
|||
pendingByRun.set(pendingKey, split.pop() ?? "");
|
||||
const adapter = getUIAdapter(run.adapterType);
|
||||
|
||||
const summarized: Array<{ text: string; tone: FeedTone; thinkingDelta?: boolean }> = [];
|
||||
const summarized: Array<{ text: string; tone: FeedTone; streamingKind?: "assistant" | "thinking" }> = [];
|
||||
const appendSummary = (entry: TranscriptEntry) => {
|
||||
if (entry.kind === "assistant" && entry.delta) {
|
||||
const text = entry.text;
|
||||
if (!text.trim()) return;
|
||||
const last = summarized[summarized.length - 1];
|
||||
if (last && last.streamingKind === "assistant") {
|
||||
last.text += text;
|
||||
} else {
|
||||
summarized.push({ text, tone: "assistant", streamingKind: "assistant" });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (entry.kind === "thinking" && entry.delta) {
|
||||
const text = entry.text;
|
||||
if (!text.trim()) return;
|
||||
const last = summarized[summarized.length - 1];
|
||||
if (last && last.thinkingDelta) {
|
||||
if (last && last.streamingKind === "thinking") {
|
||||
last.text += text;
|
||||
} else {
|
||||
summarized.push({ text: `[thinking] ${text}`, tone: "info", thinkingDelta: true });
|
||||
summarized.push({ text: `[thinking] ${text}`, tone: "info", streamingKind: "thinking" });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
|
@ -132,7 +156,10 @@ function parseStdoutChunk(
|
|||
}
|
||||
|
||||
for (const summary of summarized) {
|
||||
const item = createFeedItem(run, ts, summary.text, summary.tone, nextIdRef.current++);
|
||||
const item = createFeedItem(run, ts, summary.text, summary.tone, nextIdRef.current++, {
|
||||
streamingKind: summary.streamingKind,
|
||||
preserveWhitespace: !!summary.streamingKind,
|
||||
});
|
||||
if (item) items.push(item);
|
||||
}
|
||||
|
||||
|
|
@ -222,8 +249,38 @@ export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
|
|||
if (items.length === 0) return;
|
||||
setFeedByRun((prev) => {
|
||||
const next = new Map(prev);
|
||||
const existing = next.get(runId) ?? [];
|
||||
next.set(runId, [...existing, ...items].slice(-MAX_FEED_ITEMS));
|
||||
const existing = [...(next.get(runId) ?? [])];
|
||||
for (const item of items) {
|
||||
if (seenKeysRef.current.has(item.dedupeKey)) continue;
|
||||
seenKeysRef.current.add(item.dedupeKey);
|
||||
|
||||
const last = existing[existing.length - 1];
|
||||
if (
|
||||
item.streamingKind &&
|
||||
last &&
|
||||
last.runId === item.runId &&
|
||||
last.streamingKind === item.streamingKind
|
||||
) {
|
||||
const mergedText = `${last.text}${item.text}`;
|
||||
const nextText =
|
||||
mergedText.length > MAX_STREAMING_TEXT_LENGTH
|
||||
? mergedText.slice(-MAX_STREAMING_TEXT_LENGTH)
|
||||
: mergedText;
|
||||
existing[existing.length - 1] = {
|
||||
...last,
|
||||
ts: item.ts,
|
||||
text: nextText,
|
||||
dedupeKey: last.dedupeKey,
|
||||
};
|
||||
continue;
|
||||
}
|
||||
|
||||
existing.push(item);
|
||||
}
|
||||
if (seenKeysRef.current.size > 6000) {
|
||||
seenKeysRef.current.clear();
|
||||
}
|
||||
next.set(runId, existing.slice(-MAX_FEED_ITEMS));
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
|
@ -265,7 +322,7 @@ export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
|
|||
const dedupeKey = `${runId}:event:${seq ?? `${eventType}:${messageText}:${event.createdAt}`}`;
|
||||
if (seenKeysRef.current.has(dedupeKey)) return;
|
||||
seenKeysRef.current.add(dedupeKey);
|
||||
if (seenKeysRef.current.size > 2000) seenKeysRef.current.clear();
|
||||
if (seenKeysRef.current.size > 6000) seenKeysRef.current.clear();
|
||||
const tone = eventType === "error" ? "error" : eventType === "lifecycle" ? "warn" : "info";
|
||||
const item = createFeedItem(run, event.createdAt, messageText, tone, nextIdRef.current++);
|
||||
if (item) appendItems(run.id, [item]);
|
||||
|
|
@ -277,7 +334,7 @@ export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
|
|||
const dedupeKey = `${runId}:status:${status}:${readString(payload["finishedAt"]) ?? ""}`;
|
||||
if (seenKeysRef.current.has(dedupeKey)) return;
|
||||
seenKeysRef.current.add(dedupeKey);
|
||||
if (seenKeysRef.current.size > 2000) seenKeysRef.current.clear();
|
||||
if (seenKeysRef.current.size > 6000) seenKeysRef.current.clear();
|
||||
const tone = status === "failed" || status === "timed_out" ? "error" : "warn";
|
||||
const item = createFeedItem(run, event.createdAt, `run ${status}`, tone, nextIdRef.current++);
|
||||
if (item) appendItems(run.id, [item]);
|
||||
|
|
@ -404,7 +461,7 @@ function AgentRunCard({
|
|||
<Link
|
||||
to={`/issues/${issue?.identifier ?? run.issueId}`}
|
||||
className={cn(
|
||||
"hover:underline min-w-0 truncate",
|
||||
"hover:underline min-w-0 line-clamp-2 min-h-[2rem]",
|
||||
isActive ? "text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300" : "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
title={issue?.title ? `${issue?.identifier ?? run.issueId.slice(0, 8)} - ${issue.title}` : issue?.identifier ?? run.issueId.slice(0, 8)}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ import {
|
|||
DEFAULT_CODEX_LOCAL_MODEL,
|
||||
} from "@paperclipai/adapter-codex-local";
|
||||
import { DEFAULT_CURSOR_LOCAL_MODEL } from "@paperclipai/adapter-cursor-local";
|
||||
import { DEFAULT_OPENCODE_LOCAL_MODEL } from "@paperclipai/adapter-opencode-local";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
|
|
@ -25,6 +24,7 @@ import {
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { FolderOpen, Heart, ChevronDown, X } from "lucide-react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { extractModelName, extractProviderId } from "../lib/model-utils";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
import { useCompany } from "../context/CompanyContext";
|
||||
import {
|
||||
|
|
@ -42,6 +42,7 @@ import { getUIAdapter } from "../adapters";
|
|||
import { ClaudeLocalAdvancedFields } from "../adapters/claude-local/config-fields";
|
||||
import { MarkdownEditor } from "./MarkdownEditor";
|
||||
import { ChoosePathButton } from "./PathInstructionsModal";
|
||||
import { OpenCodeLogoIcon } from "./OpenCodeLogoIcon";
|
||||
|
||||
/* ---- Create mode values ---- */
|
||||
|
||||
|
|
@ -133,7 +134,7 @@ const codexThinkingEffortOptions = [
|
|||
{ id: "xhigh", label: "X-High" },
|
||||
] as const;
|
||||
|
||||
const opencodeVariantOptions = [
|
||||
const openCodeThinkingEffortOptions = [
|
||||
{ id: "", label: "Auto" },
|
||||
{ id: "minimal", label: "Minimal" },
|
||||
{ id: "low", label: "Low" },
|
||||
|
|
@ -281,9 +282,15 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
|
|||
const uiAdapter = useMemo(() => getUIAdapter(adapterType), [adapterType]);
|
||||
|
||||
// Fetch adapter models for the effective adapter type
|
||||
const { data: fetchedModels } = useQuery({
|
||||
queryKey: ["adapter-models", adapterType],
|
||||
queryFn: () => agentsApi.adapterModels(adapterType),
|
||||
const {
|
||||
data: fetchedModels,
|
||||
error: fetchedModelsError,
|
||||
} = useQuery({
|
||||
queryKey: selectedCompanyId
|
||||
? queryKeys.agents.adapterModels(selectedCompanyId, adapterType)
|
||||
: ["agents", "none", "adapter-models", adapterType],
|
||||
queryFn: () => agentsApi.adapterModels(selectedCompanyId!, adapterType),
|
||||
enabled: Boolean(selectedCompanyId),
|
||||
});
|
||||
const models = fetchedModels ?? externalModels ?? [];
|
||||
|
||||
|
|
@ -341,17 +348,17 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
|
|||
? "modelReasoningEffort"
|
||||
: adapterType === "cursor"
|
||||
? "mode"
|
||||
: adapterType === "opencode_local"
|
||||
? "variant"
|
||||
: "effort";
|
||||
: adapterType === "opencode_local"
|
||||
? "variant"
|
||||
: "effort";
|
||||
const thinkingEffortOptions =
|
||||
adapterType === "codex_local"
|
||||
? codexThinkingEffortOptions
|
||||
: adapterType === "cursor"
|
||||
? cursorModeOptions
|
||||
: adapterType === "opencode_local"
|
||||
? opencodeVariantOptions
|
||||
: claudeThinkingEffortOptions;
|
||||
: adapterType === "opencode_local"
|
||||
? openCodeThinkingEffortOptions
|
||||
: claudeThinkingEffortOptions;
|
||||
const currentThinkingEffort = isCreate
|
||||
? val!.thinkingEffort
|
||||
: adapterType === "codex_local"
|
||||
|
|
@ -362,8 +369,8 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
|
|||
)
|
||||
: adapterType === "cursor"
|
||||
? eff("adapterConfig", "mode", String(config.mode ?? ""))
|
||||
: adapterType === "opencode_local"
|
||||
? eff("adapterConfig", "variant", String(config.variant ?? ""))
|
||||
: adapterType === "opencode_local"
|
||||
? eff("adapterConfig", "variant", String(config.variant ?? ""))
|
||||
: eff("adapterConfig", "effort", String(config.effort ?? ""));
|
||||
const codexSearchEnabled = adapterType === "codex_local"
|
||||
? (isCreate ? Boolean(val!.search) : eff("adapterConfig", "search", Boolean(config.search)))
|
||||
|
|
@ -436,7 +443,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
|
|||
"promptTemplate",
|
||||
String(config.promptTemplate ?? ""),
|
||||
)}
|
||||
onChange={(v) => mark("adapterConfig", "promptTemplate", v || undefined)}
|
||||
onChange={(v) => mark("adapterConfig", "promptTemplate", v ?? "")}
|
||||
placeholder="You are agent {{ agent.name }}. Your role is {{ agent.role }}..."
|
||||
contentClassName="min-h-[88px] text-sm font-mono"
|
||||
imageUploadHandler={async (file) => {
|
||||
|
|
@ -485,7 +492,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
|
|||
} else if (t === "cursor") {
|
||||
nextValues.model = DEFAULT_CURSOR_LOCAL_MODEL;
|
||||
} else if (t === "opencode_local") {
|
||||
nextValues.model = DEFAULT_OPENCODE_LOCAL_MODEL;
|
||||
nextValues.model = "";
|
||||
}
|
||||
set!(nextValues);
|
||||
} else {
|
||||
|
|
@ -500,9 +507,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
|
|||
? DEFAULT_CODEX_LOCAL_MODEL
|
||||
: t === "cursor"
|
||||
? DEFAULT_CURSOR_LOCAL_MODEL
|
||||
: t === "opencode_local"
|
||||
? DEFAULT_OPENCODE_LOCAL_MODEL
|
||||
: "",
|
||||
: "",
|
||||
effort: "",
|
||||
modelReasoningEffort: "",
|
||||
variant: "",
|
||||
|
|
@ -607,9 +612,9 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
|
|||
? "codex"
|
||||
: adapterType === "cursor"
|
||||
? "agent"
|
||||
: adapterType === "opencode_local"
|
||||
? "opencode"
|
||||
: "claude"
|
||||
: adapterType === "opencode_local"
|
||||
? "opencode"
|
||||
: "claude"
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
|
|
@ -624,7 +629,17 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
|
|||
}
|
||||
open={modelOpen}
|
||||
onOpenChange={setModelOpen}
|
||||
allowDefault={adapterType !== "opencode_local"}
|
||||
required={adapterType === "opencode_local"}
|
||||
groupByProvider={adapterType === "opencode_local"}
|
||||
/>
|
||||
{fetchedModelsError && (
|
||||
<p className="text-xs text-destructive">
|
||||
{fetchedModelsError instanceof Error
|
||||
? fetchedModelsError.message
|
||||
: "Failed to load adapter models."}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<ThinkingEffortDropdown
|
||||
value={currentThinkingEffort}
|
||||
|
|
@ -900,7 +915,10 @@ function AdapterTypeDropdown({
|
|||
<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>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
{value === "opencode_local" ? <OpenCodeLogoIcon className="h-3.5 w-3.5" /> : null}
|
||||
<span>{adapterLabels[value] ?? value}</span>
|
||||
</span>
|
||||
<ChevronDown className="h-3 w-3 text-muted-foreground" />
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
|
|
@ -920,7 +938,10 @@ function AdapterTypeDropdown({
|
|||
if (!item.comingSoon) onChange(item.value);
|
||||
}}
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
{item.value === "opencode_local" ? <OpenCodeLogoIcon className="h-3.5 w-3.5" /> : null}
|
||||
<span>{item.label}</span>
|
||||
</span>
|
||||
{item.comingSoon && (
|
||||
<span className="text-[10px] text-muted-foreground">Coming soon</span>
|
||||
)}
|
||||
|
|
@ -1186,20 +1207,56 @@ function ModelDropdown({
|
|||
onChange,
|
||||
open,
|
||||
onOpenChange,
|
||||
allowDefault,
|
||||
required,
|
||||
groupByProvider,
|
||||
}: {
|
||||
models: AdapterModel[];
|
||||
value: string;
|
||||
onChange: (id: string) => void;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
allowDefault: boolean;
|
||||
required: boolean;
|
||||
groupByProvider: boolean;
|
||||
}) {
|
||||
const [modelSearch, setModelSearch] = useState("");
|
||||
const selected = models.find((m) => m.id === value);
|
||||
const filteredModels = models.filter((m) => {
|
||||
if (!modelSearch.trim()) return true;
|
||||
const q = modelSearch.toLowerCase();
|
||||
return m.id.toLowerCase().includes(q) || m.label.toLowerCase().includes(q);
|
||||
});
|
||||
const filteredModels = useMemo(() => {
|
||||
return models.filter((m) => {
|
||||
if (!modelSearch.trim()) return true;
|
||||
const q = modelSearch.toLowerCase();
|
||||
const provider = extractProviderId(m.id) ?? "";
|
||||
return (
|
||||
m.id.toLowerCase().includes(q) ||
|
||||
m.label.toLowerCase().includes(q) ||
|
||||
provider.toLowerCase().includes(q)
|
||||
);
|
||||
});
|
||||
}, [models, modelSearch]);
|
||||
const groupedModels = useMemo(() => {
|
||||
if (!groupByProvider) {
|
||||
return [
|
||||
{
|
||||
provider: "models",
|
||||
entries: [...filteredModels].sort((a, b) => a.id.localeCompare(b.id)),
|
||||
},
|
||||
];
|
||||
}
|
||||
const map = new Map<string, AdapterModel[]>();
|
||||
for (const model of filteredModels) {
|
||||
const provider = extractProviderId(model.id) ?? "other";
|
||||
const group = map.get(provider) ?? [];
|
||||
group.push(model);
|
||||
map.set(provider, group);
|
||||
}
|
||||
return Array.from(map.entries())
|
||||
.sort(([a], [b]) => a.localeCompare(b))
|
||||
.map(([provider, entries]) => ({
|
||||
provider,
|
||||
entries: [...entries].sort((a, b) => a.id.localeCompare(b.id)),
|
||||
}));
|
||||
}, [filteredModels, groupByProvider]);
|
||||
|
||||
return (
|
||||
<Field label="Model" hint={help.model}>
|
||||
|
|
@ -1213,7 +1270,9 @@ function ModelDropdown({
|
|||
<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"}
|
||||
{selected
|
||||
? selected.label
|
||||
: value || (allowDefault ? "Default" : required ? "Select model (required)" : "Select model")}
|
||||
</span>
|
||||
<ChevronDown className="h-3 w-3 text-muted-foreground" />
|
||||
</button>
|
||||
|
|
@ -1227,33 +1286,45 @@ function ModelDropdown({
|
|||
autoFocus
|
||||
/>
|
||||
<div className="max-h-[240px] overflow-y-auto">
|
||||
<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>
|
||||
{filteredModels.map((m) => (
|
||||
{allowDefault && (
|
||||
<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",
|
||||
"flex items-center gap-2 w-full px-2 py-1.5 text-sm rounded hover:bg-accent/50",
|
||||
!value && "bg-accent",
|
||||
)}
|
||||
onClick={() => {
|
||||
onChange(m.id);
|
||||
onChange("");
|
||||
onOpenChange(false);
|
||||
}}
|
||||
>
|
||||
<span>{m.label}</span>
|
||||
<span className="text-xs text-muted-foreground font-mono">{m.id}</span>
|
||||
Default
|
||||
</button>
|
||||
)}
|
||||
{groupedModels.map((group) => (
|
||||
<div key={group.provider} className="mb-1 last:mb-0">
|
||||
{groupByProvider && (
|
||||
<div className="px-2 py-1 text-[10px] uppercase tracking-wide text-muted-foreground">
|
||||
{group.provider} ({group.entries.length})
|
||||
</div>
|
||||
)}
|
||||
{group.entries.map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
className={cn(
|
||||
"flex items-center 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 className="block w-full text-left truncate" title={m.id}>
|
||||
{groupByProvider ? extractModelName(m.id) : m.label}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
{filteredModels.length === 0 && (
|
||||
<p className="px-2 py-1.5 text-xs text-muted-foreground">No models found.</p>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Link } from "@/lib/router";
|
||||
import type { Agent, AgentRuntimeState } from "@paperclipai/shared";
|
||||
import { AGENT_ROLE_LABELS, type Agent, type AgentRuntimeState } from "@paperclipai/shared";
|
||||
import { agentsApi } from "../api/agents";
|
||||
import { useCompany } from "../context/CompanyContext";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
|
|
@ -18,12 +18,14 @@ const adapterLabels: Record<string, string> = {
|
|||
claude_local: "Claude (local)",
|
||||
codex_local: "Codex (local)",
|
||||
opencode_local: "OpenCode (local)",
|
||||
openclaw: "OpenClaw",
|
||||
openclaw_gateway: "OpenClaw Gateway",
|
||||
cursor: "Cursor (local)",
|
||||
process: "Process",
|
||||
http: "HTTP",
|
||||
};
|
||||
|
||||
const roleLabels = AGENT_ROLE_LABELS as Record<string, string>;
|
||||
|
||||
function PropertyRow({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 py-1.5">
|
||||
|
|
@ -51,7 +53,7 @@ export function AgentProperties({ agent, runtimeState }: AgentPropertiesProps) {
|
|||
<StatusBadge status={agent.status} />
|
||||
</PropertyRow>
|
||||
<PropertyRow label="Role">
|
||||
<span className="text-sm">{agent.role}</span>
|
||||
<span className="text-sm">{roleLabels[agent.role] ?? agent.role}</span>
|
||||
</PropertyRow>
|
||||
{agent.title && (
|
||||
<PropertyRow label="Title">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { useNavigate } from "@/lib/router";
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useCompany } from "../context/CompanyContext";
|
||||
import { useDialog } from "../context/DialogContext";
|
||||
import { useSidebar } from "../context/SidebarContext";
|
||||
import { issuesApi } from "../api/issues";
|
||||
import { agentsApi } from "../api/agents";
|
||||
import { projectsApi } from "../api/projects";
|
||||
|
|
@ -37,6 +38,7 @@ export function CommandPalette() {
|
|||
const navigate = useNavigate();
|
||||
const { selectedCompanyId } = useCompany();
|
||||
const { openNewIssue, openNewAgent } = useDialog();
|
||||
const { isMobile, setSidebarOpen } = useSidebar();
|
||||
const searchQuery = query.trim();
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -44,11 +46,12 @@ export function CommandPalette() {
|
|||
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault();
|
||||
setOpen(true);
|
||||
if (isMobile) setSidebarOpen(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
}, []);
|
||||
}, [isMobile, setSidebarOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) setQuery("");
|
||||
|
|
@ -94,7 +97,10 @@ export function CommandPalette() {
|
|||
);
|
||||
|
||||
return (
|
||||
<CommandDialog open={open} onOpenChange={setOpen}>
|
||||
<CommandDialog open={open} onOpenChange={(v) => {
|
||||
setOpen(v);
|
||||
if (v && isMobile) setSidebarOpen(false);
|
||||
}}>
|
||||
<CommandInput
|
||||
placeholder="Search issues, agents, projects..."
|
||||
value={query}
|
||||
|
|
@ -187,7 +193,7 @@ export function CommandPalette() {
|
|||
<span className="flex-1 truncate">{issue.title}</span>
|
||||
{issue.assigneeAgentId && (() => {
|
||||
const name = agentName(issue.assigneeAgentId);
|
||||
return name ? <Identity name={name} size="sm" className="ml-2" /> : null;
|
||||
return name ? <Identity name={name} size="sm" className="ml-2 hidden sm:inline-flex" /> : null;
|
||||
})()}
|
||||
</CommandItem>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,13 @@ import { memo, useEffect, useMemo, useRef, useState, type ChangeEvent } from "re
|
|||
import { Link, useLocation } from "react-router-dom";
|
||||
import type { IssueComment, Agent } from "@paperclipai/shared";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Paperclip } from "lucide-react";
|
||||
import { Check, Copy, Paperclip } from "lucide-react";
|
||||
import { Identity } from "./Identity";
|
||||
import { InlineEntitySelector, type InlineEntityOption } from "./InlineEntitySelector";
|
||||
import { MarkdownBody } from "./MarkdownBody";
|
||||
import { MarkdownEditor, type MarkdownEditorRef, type MentionOption } from "./MarkdownEditor";
|
||||
import { StatusBadge } from "./StatusBadge";
|
||||
import { AgentIcon } from "./AgentIconPicker";
|
||||
import { formatDateTime } from "../lib/utils";
|
||||
|
||||
interface CommentWithRunMeta extends IssueComment {
|
||||
|
|
@ -91,6 +92,25 @@ function parseReassignment(target: string): CommentReassignment | null {
|
|||
return null;
|
||||
}
|
||||
|
||||
function CopyMarkdownButton({ text }: { text: string }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||
title="Copy as markdown"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
});
|
||||
}}
|
||||
>
|
||||
{copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
type TimelineItem =
|
||||
| { kind: "comment"; id: string; createdAtMs: number; comment: CommentWithRunMeta }
|
||||
| { kind: "run"; id: string; createdAtMs: number; run: LinkedRunItem };
|
||||
|
|
@ -159,12 +179,15 @@ const TimelineList = memo(function TimelineList({
|
|||
) : (
|
||||
<Identity name="You" size="sm" />
|
||||
)}
|
||||
<a
|
||||
href={`#comment-${comment.id}`}
|
||||
className="text-xs text-muted-foreground hover:text-foreground hover:underline transition-colors"
|
||||
>
|
||||
{formatDateTime(comment.createdAt)}
|
||||
</a>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<a
|
||||
href={`#comment-${comment.id}`}
|
||||
className="text-xs text-muted-foreground hover:text-foreground hover:underline transition-colors"
|
||||
>
|
||||
{formatDateTime(comment.createdAt)}
|
||||
</a>
|
||||
<CopyMarkdownButton text={comment.body} />
|
||||
</span>
|
||||
</div>
|
||||
<MarkdownBody className="text-sm">{comment.body}</MarkdownBody>
|
||||
{comment.runId && (
|
||||
|
|
@ -385,6 +408,32 @@ export function CommentThread({
|
|||
emptyMessage="No assignees found."
|
||||
onChange={setReassignTarget}
|
||||
className="text-xs h-8"
|
||||
renderTriggerValue={(option) => {
|
||||
if (!option) return <span className="text-muted-foreground">Assignee</span>;
|
||||
const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
|
||||
const agent = agentId ? agentMap?.get(agentId) : null;
|
||||
return (
|
||||
<>
|
||||
{agent ? (
|
||||
<AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
) : null}
|
||||
<span className="truncate">{option.label}</span>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
renderOption={(option) => {
|
||||
if (!option.id) return <span className="truncate">{option.label}</span>;
|
||||
const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
|
||||
const agent = agentId ? agentMap?.get(agentId) : null;
|
||||
return (
|
||||
<>
|
||||
{agent ? (
|
||||
<AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
) : null}
|
||||
<span className="truncate">{option.label}</span>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Button size="sm" disabled={!canSubmit} onClick={handleSubmit}>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ interface InlineEntitySelectorProps {
|
|||
className?: string;
|
||||
renderTriggerValue?: (option: InlineEntityOption | null) => ReactNode;
|
||||
renderOption?: (option: InlineEntityOption, isSelected: boolean) => ReactNode;
|
||||
/** Skip the Portal so the popover stays in the DOM tree (fixes scroll inside Dialogs). */
|
||||
disablePortal?: boolean;
|
||||
}
|
||||
|
||||
export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySelectorProps>(
|
||||
|
|
@ -37,6 +39,7 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
|
|||
className,
|
||||
renderTriggerValue,
|
||||
renderOption,
|
||||
disablePortal,
|
||||
},
|
||||
ref,
|
||||
) {
|
||||
|
|
@ -45,6 +48,7 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
|
|||
const [highlightedIndex, setHighlightedIndex] = useState(0);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const shouldPreventCloseAutoFocusRef = useRef(false);
|
||||
const isPointerDownRef = useRef(false);
|
||||
|
||||
const allOptions = useMemo<InlineEntityOption[]>(
|
||||
() => [{ id: "", label: noneLabel, searchText: noneLabel }, ...options],
|
||||
|
|
@ -97,7 +101,11 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
|
|||
"inline-flex min-w-0 items-center gap-1 rounded-md border border-border bg-muted/40 px-2 py-1 text-sm font-medium text-foreground transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
||||
className,
|
||||
)}
|
||||
onFocus={() => setOpen(true)}
|
||||
onPointerDown={() => { isPointerDownRef.current = true; }}
|
||||
onFocus={() => {
|
||||
if (!isPointerDownRef.current) setOpen(true);
|
||||
isPointerDownRef.current = false;
|
||||
}}
|
||||
>
|
||||
{renderTriggerValue
|
||||
? renderTriggerValue(currentOption)
|
||||
|
|
@ -106,11 +114,19 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
|
|||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
align="start"
|
||||
side="bottom"
|
||||
collisionPadding={16}
|
||||
className="w-[min(20rem,calc(100vw-2rem))] p-1"
|
||||
disablePortal={disablePortal}
|
||||
onOpenAutoFocus={(event) => {
|
||||
event.preventDefault();
|
||||
inputRef.current?.focus();
|
||||
// On touch devices, don't auto-focus the search input to avoid
|
||||
// opening the virtual keyboard which reshapes the viewport and
|
||||
// pushes the popover off-screen.
|
||||
const isTouch = window.matchMedia("(pointer: coarse)").matches;
|
||||
if (!isTouch) {
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
}}
|
||||
onCloseAutoFocus={(event) => {
|
||||
if (!shouldPreventCloseAutoFocusRef.current) return;
|
||||
|
|
@ -158,10 +174,7 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
|
|||
}
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="max-h-56 overflow-y-auto overscroll-contain py-1 touch-pan-y"
|
||||
style={{ WebkitOverflowScrolling: "touch" }}
|
||||
>
|
||||
<div className="max-h-56 overflow-y-auto overscroll-contain py-1 touch-pan-y">
|
||||
{filteredOptions.length === 0 ? (
|
||||
<p className="px-2 py-2 text-xs text-muted-foreground">{emptyMessage}</p>
|
||||
) : (
|
||||
|
|
@ -173,7 +186,7 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
|
|||
key={option.id || "__none__"}
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm touch-pan-y",
|
||||
"flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm touch-manipulation",
|
||||
isHighlighted && "bg-accent",
|
||||
)}
|
||||
onMouseEnter={() => setHighlightedIndex(index)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useState } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Link } from "@/lib/router";
|
||||
import type { Issue } from "@paperclipai/shared";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
|
|
@ -9,6 +9,7 @@ import { projectsApi } from "../api/projects";
|
|||
import { useCompany } from "../context/CompanyContext";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
import { useProjectOrder } from "../hooks/useProjectOrder";
|
||||
import { getRecentAssigneeIds, sortAgentsByRecency, trackRecentAssignee } from "../lib/recent-assignees";
|
||||
import { StatusIcon } from "./StatusIcon";
|
||||
import { PriorityIcon } from "./PriorityIcon";
|
||||
import { Identity } from "./Identity";
|
||||
|
|
@ -181,6 +182,12 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp
|
|||
return project ? projectUrl(project) : `/projects/${id}`;
|
||||
};
|
||||
|
||||
const recentAssigneeIds = useMemo(() => getRecentAssigneeIds(), [assigneeOpen]);
|
||||
const sortedAgents = useMemo(
|
||||
() => sortAgentsByRecency((agents ?? []).filter((a) => a.status !== "terminated"), recentAssigneeIds),
|
||||
[agents, recentAssigneeIds],
|
||||
);
|
||||
|
||||
const assignee = issue.assigneeAgentId
|
||||
? agents?.find((a) => a.id === issue.assigneeAgentId)
|
||||
: null;
|
||||
|
|
@ -342,8 +349,7 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp
|
|||
{creatorUserLabel ? `Assign to ${creatorUserLabel === "Me" ? "me" : creatorUserLabel}` : "Assign to requester"}
|
||||
</button>
|
||||
)}
|
||||
{(agents ?? [])
|
||||
.filter((a) => a.status !== "terminated")
|
||||
{sortedAgents
|
||||
.filter((a) => {
|
||||
if (!assigneeSearch.trim()) return true;
|
||||
const q = assigneeSearch.toLowerCase();
|
||||
|
|
@ -356,7 +362,7 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp
|
|||
"flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
|
||||
a.id === issue.assigneeAgentId && "bg-accent"
|
||||
)}
|
||||
onClick={() => { onUpdate({ assigneeAgentId: a.id, assigneeUserId: null }); setAssigneeOpen(false); }}
|
||||
onClick={() => { trackRecentAssignee(a.id); onUpdate({ assigneeAgentId: a.id, assigneeUserId: null }); setAssigneeOpen(false); }}
|
||||
>
|
||||
<AgentIcon icon={a.icon} className="shrink-0 h-3 w-3 text-muted-foreground" />
|
||||
{a.name}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, useDeferredValue, useMemo, useState, useCallback, useRef } from "react";
|
||||
import { useEffect, useMemo, useState, useCallback, useRef } from "react";
|
||||
import { Link } from "@/lib/router";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useDialog } from "../context/DialogContext";
|
||||
|
|
@ -17,7 +17,7 @@ import { Input } from "@/components/ui/input";
|
|||
import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";
|
||||
import { CircleDot, Plus, Filter, ArrowUpDown, Layers, Check, X, ChevronRight, List, Columns3, User, Search } from "lucide-react";
|
||||
import { CircleDot, Plus, Filter, ArrowUpDown, Layers, Check, X, ChevronRight, List, Columns3, User, Search, ArrowDown } from "lucide-react";
|
||||
import { KanbanBoard } from "./KanbanBoard";
|
||||
import type { Issue } from "@paperclipai/shared";
|
||||
|
||||
|
|
@ -142,6 +142,8 @@ interface IssuesListProps {
|
|||
projectId?: string;
|
||||
viewStateKey: string;
|
||||
initialAssignees?: string[];
|
||||
initialSearch?: string;
|
||||
onSearchChange?: (search: string) => void;
|
||||
onUpdateIssue: (id: string, data: Record<string, unknown>) => void;
|
||||
}
|
||||
|
||||
|
|
@ -154,6 +156,8 @@ export function IssuesList({
|
|||
projectId,
|
||||
viewStateKey,
|
||||
initialAssignees,
|
||||
initialSearch,
|
||||
onSearchChange,
|
||||
onUpdateIssue,
|
||||
}: IssuesListProps) {
|
||||
const { selectedCompanyId } = useCompany();
|
||||
|
|
@ -170,9 +174,20 @@ export function IssuesList({
|
|||
});
|
||||
const [assigneePickerIssueId, setAssigneePickerIssueId] = useState<string | null>(null);
|
||||
const [assigneeSearch, setAssigneeSearch] = useState("");
|
||||
const [issueSearch, setIssueSearch] = useState("");
|
||||
const deferredIssueSearch = useDeferredValue(issueSearch);
|
||||
const normalizedIssueSearch = deferredIssueSearch.trim();
|
||||
const [issueSearch, setIssueSearch] = useState(initialSearch ?? "");
|
||||
const [debouncedIssueSearch, setDebouncedIssueSearch] = useState(issueSearch);
|
||||
const normalizedIssueSearch = debouncedIssueSearch.trim();
|
||||
|
||||
useEffect(() => {
|
||||
setIssueSearch(initialSearch ?? "");
|
||||
}, [initialSearch]);
|
||||
|
||||
useEffect(() => {
|
||||
const timeoutId = window.setTimeout(() => {
|
||||
setDebouncedIssueSearch(issueSearch);
|
||||
}, 300);
|
||||
return () => window.clearTimeout(timeoutId);
|
||||
}, [issueSearch]);
|
||||
|
||||
// Reload view state from localStorage when company changes (scopedKey changes).
|
||||
const prevScopedKey = useRef(scopedKey);
|
||||
|
|
@ -218,6 +233,24 @@ export function IssuesList({
|
|||
|
||||
const activeFilterCount = countActiveFilters(viewState);
|
||||
|
||||
const [showScrollBottom, setShowScrollBottom] = useState(false);
|
||||
useEffect(() => {
|
||||
const el = document.getElementById("main-content");
|
||||
if (!el) return;
|
||||
const check = () => {
|
||||
const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
|
||||
setShowScrollBottom(distanceFromBottom > 300);
|
||||
};
|
||||
check();
|
||||
el.addEventListener("scroll", check, { passive: true });
|
||||
return () => el.removeEventListener("scroll", check);
|
||||
}, [filtered.length]);
|
||||
|
||||
const scrollToBottom = useCallback(() => {
|
||||
const el = document.getElementById("main-content");
|
||||
if (el) el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
|
||||
}, []);
|
||||
|
||||
const groupedContent = useMemo(() => {
|
||||
if (viewState.groupBy === "none") {
|
||||
return [{ key: "__all", label: null as string | null, items: filtered }];
|
||||
|
|
@ -273,7 +306,10 @@ export function IssuesList({
|
|||
<Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
value={issueSearch}
|
||||
onChange={(e) => setIssueSearch(e.target.value)}
|
||||
onChange={(e) => {
|
||||
setIssueSearch(e.target.value);
|
||||
onSearchChange?.(e.target.value);
|
||||
}}
|
||||
placeholder="Search issues..."
|
||||
className="pl-7 text-xs sm:text-sm"
|
||||
aria-label="Search issues"
|
||||
|
|
@ -706,6 +742,15 @@ export function IssuesList({
|
|||
</Collapsible>
|
||||
))
|
||||
)}
|
||||
{showScrollBottom && (
|
||||
<button
|
||||
onClick={scrollToBottom}
|
||||
className="fixed bottom-6 right-6 z-40 flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background shadow-md hover:bg-accent transition-colors"
|
||||
aria-label="Scroll to bottom"
|
||||
>
|
||||
<ArrowDown className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,9 +26,13 @@ interface FeedItem {
|
|||
agentName: string;
|
||||
text: string;
|
||||
tone: FeedTone;
|
||||
dedupeKey: string;
|
||||
streamingKind?: "assistant" | "thinking";
|
||||
}
|
||||
|
||||
const MAX_FEED_ITEMS = 80;
|
||||
const MAX_FEED_TEXT_LENGTH = 220;
|
||||
const MAX_STREAMING_TEXT_LENGTH = 4000;
|
||||
const LOG_POLL_INTERVAL_MS = 2000;
|
||||
const LOG_READ_LIMIT_BYTES = 256_000;
|
||||
|
||||
|
|
@ -81,17 +85,25 @@ function createFeedItem(
|
|||
text: string,
|
||||
tone: FeedTone,
|
||||
nextId: number,
|
||||
options?: {
|
||||
streamingKind?: "assistant" | "thinking";
|
||||
preserveWhitespace?: boolean;
|
||||
},
|
||||
): FeedItem | null {
|
||||
const trimmed = text.trim();
|
||||
if (!trimmed) return null;
|
||||
if (!text.trim()) return null;
|
||||
const base = options?.preserveWhitespace ? text : text.trim();
|
||||
const maxLength = options?.streamingKind ? MAX_STREAMING_TEXT_LENGTH : MAX_FEED_TEXT_LENGTH;
|
||||
const normalized = base.length > maxLength ? base.slice(-maxLength) : base;
|
||||
return {
|
||||
id: `${run.id}:${nextId}`,
|
||||
ts,
|
||||
runId: run.id,
|
||||
agentId: run.agentId,
|
||||
agentName: run.agentName,
|
||||
text: trimmed.slice(0, 220),
|
||||
text: normalized,
|
||||
tone,
|
||||
dedupeKey: `feed:${run.id}:${ts}:${tone}:${normalized}`,
|
||||
streamingKind: options?.streamingKind,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -108,16 +120,28 @@ function parseStdoutChunk(
|
|||
pendingByRun.set(pendingKey, split.pop() ?? "");
|
||||
const adapter = getUIAdapter(run.adapterType);
|
||||
|
||||
const summarized: Array<{ text: string; tone: FeedTone; thinkingDelta?: boolean }> = [];
|
||||
const summarized: Array<{ text: string; tone: FeedTone; streamingKind?: "assistant" | "thinking" }> = [];
|
||||
const appendSummary = (entry: TranscriptEntry) => {
|
||||
if (entry.kind === "assistant" && entry.delta) {
|
||||
const text = entry.text;
|
||||
if (!text.trim()) return;
|
||||
const last = summarized[summarized.length - 1];
|
||||
if (last && last.streamingKind === "assistant") {
|
||||
last.text += text;
|
||||
} else {
|
||||
summarized.push({ text, tone: "assistant", streamingKind: "assistant" });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (entry.kind === "thinking" && entry.delta) {
|
||||
const text = entry.text;
|
||||
if (!text.trim()) return;
|
||||
const last = summarized[summarized.length - 1];
|
||||
if (last && last.thinkingDelta) {
|
||||
if (last && last.streamingKind === "thinking") {
|
||||
last.text += text;
|
||||
} else {
|
||||
summarized.push({ text: `[thinking] ${text}`, tone: "info", thinkingDelta: true });
|
||||
summarized.push({ text: `[thinking] ${text}`, tone: "info", streamingKind: "thinking" });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
|
@ -133,6 +157,9 @@ function parseStdoutChunk(
|
|||
if (!trimmed) continue;
|
||||
const parsed = adapter.parseStdoutLine(trimmed, ts);
|
||||
if (parsed.length === 0) {
|
||||
if (run.adapterType === "openclaw_gateway") {
|
||||
continue;
|
||||
}
|
||||
const fallback = createFeedItem(run, ts, trimmed, "info", nextIdRef.current++);
|
||||
if (fallback) items.push(fallback);
|
||||
continue;
|
||||
|
|
@ -143,7 +170,10 @@ function parseStdoutChunk(
|
|||
}
|
||||
|
||||
for (const summary of summarized) {
|
||||
const item = createFeedItem(run, ts, summary.text, summary.tone, nextIdRef.current++);
|
||||
const item = createFeedItem(run, ts, summary.text, summary.tone, nextIdRef.current++, {
|
||||
streamingKind: summary.streamingKind,
|
||||
preserveWhitespace: !!summary.streamingKind,
|
||||
});
|
||||
if (item) items.push(item);
|
||||
}
|
||||
|
||||
|
|
@ -276,18 +306,39 @@ export function LiveRunWidget({ issueId, companyId }: LiveRunWidgetProps) {
|
|||
const appendItems = (items: FeedItem[]) => {
|
||||
if (items.length === 0) return;
|
||||
setFeed((prev) => {
|
||||
const deduped: FeedItem[] = [];
|
||||
const next = [...prev];
|
||||
for (const item of items) {
|
||||
const key = `feed:${item.runId}:${item.ts}:${item.tone}:${item.text}`;
|
||||
if (seenKeysRef.current.has(key)) continue;
|
||||
seenKeysRef.current.add(key);
|
||||
deduped.push(item);
|
||||
if (seenKeysRef.current.has(item.dedupeKey)) continue;
|
||||
seenKeysRef.current.add(item.dedupeKey);
|
||||
|
||||
const last = next[next.length - 1];
|
||||
if (
|
||||
item.streamingKind &&
|
||||
last &&
|
||||
last.runId === item.runId &&
|
||||
last.streamingKind === item.streamingKind
|
||||
) {
|
||||
const mergedText = `${last.text}${item.text}`;
|
||||
const nextText =
|
||||
mergedText.length > MAX_STREAMING_TEXT_LENGTH
|
||||
? mergedText.slice(-MAX_STREAMING_TEXT_LENGTH)
|
||||
: mergedText;
|
||||
next[next.length - 1] = {
|
||||
...last,
|
||||
ts: item.ts,
|
||||
text: nextText,
|
||||
dedupeKey: last.dedupeKey,
|
||||
};
|
||||
continue;
|
||||
}
|
||||
|
||||
next.push(item);
|
||||
}
|
||||
if (deduped.length === 0) return prev;
|
||||
if (seenKeysRef.current.size > 6000) {
|
||||
seenKeysRef.current.clear();
|
||||
}
|
||||
return [...prev, ...deduped].slice(-MAX_FEED_ITEMS);
|
||||
if (next.length === prev.length) return prev;
|
||||
return next.slice(-MAX_FEED_ITEMS);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import type { CSSProperties } from "react";
|
||||
import { isValidElement, useEffect, useId, useState, type CSSProperties, type ReactNode } from "react";
|
||||
import Markdown from "react-markdown";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import { parseProjectMentionHref } from "@paperclipai/shared";
|
||||
|
|
@ -10,6 +10,30 @@ interface MarkdownBodyProps {
|
|||
className?: string;
|
||||
}
|
||||
|
||||
let mermaidLoaderPromise: Promise<typeof import("mermaid").default> | null = null;
|
||||
|
||||
function loadMermaid() {
|
||||
if (!mermaidLoaderPromise) {
|
||||
mermaidLoaderPromise = import("mermaid").then((module) => module.default);
|
||||
}
|
||||
return mermaidLoaderPromise;
|
||||
}
|
||||
|
||||
function flattenText(value: ReactNode): string {
|
||||
if (value == null) return "";
|
||||
if (typeof value === "string" || typeof value === "number") return String(value);
|
||||
if (Array.isArray(value)) return value.map((item) => flattenText(item)).join("");
|
||||
return "";
|
||||
}
|
||||
|
||||
function extractMermaidSource(children: ReactNode): string | null {
|
||||
if (!isValidElement(children)) return null;
|
||||
const childProps = children.props as { className?: unknown; children?: ReactNode };
|
||||
if (typeof childProps.className !== "string") return null;
|
||||
if (!/\blanguage-mermaid\b/i.test(childProps.className)) return null;
|
||||
return flattenText(childProps.children).replace(/\n$/, "");
|
||||
}
|
||||
|
||||
function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
|
||||
const match = /^#([0-9a-f]{6})$/i.exec(hex.trim());
|
||||
if (!match) return null;
|
||||
|
|
@ -33,6 +57,61 @@ function mentionChipStyle(color: string | null): CSSProperties | undefined {
|
|||
};
|
||||
}
|
||||
|
||||
function MermaidDiagramBlock({ source, darkMode }: { source: string; darkMode: boolean }) {
|
||||
const renderId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
|
||||
const [svg, setSvg] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
setSvg(null);
|
||||
setError(null);
|
||||
|
||||
loadMermaid()
|
||||
.then(async (mermaid) => {
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
securityLevel: "strict",
|
||||
theme: darkMode ? "dark" : "default",
|
||||
fontFamily: "inherit",
|
||||
suppressErrorRendering: true,
|
||||
});
|
||||
const rendered = await mermaid.render(`paperclip-mermaid-${renderId}`, source);
|
||||
if (!active) return;
|
||||
setSvg(rendered.svg);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (!active) return;
|
||||
const message =
|
||||
err instanceof Error && err.message
|
||||
? err.message
|
||||
: "Failed to render Mermaid diagram.";
|
||||
setError(message);
|
||||
});
|
||||
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [darkMode, renderId, source]);
|
||||
|
||||
return (
|
||||
<div className="paperclip-mermaid">
|
||||
{svg ? (
|
||||
<div dangerouslySetInnerHTML={{ __html: svg }} />
|
||||
) : (
|
||||
<>
|
||||
<p className={cn("paperclip-mermaid-status", error && "paperclip-mermaid-status-error")}>
|
||||
{error ? `Unable to render Mermaid diagram: ${error}` : "Rendering Mermaid diagram..."}
|
||||
</p>
|
||||
<pre className="paperclip-mermaid-source">
|
||||
<code className="language-mermaid">{source}</code>
|
||||
</pre>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function MarkdownBody({ children, className }: MarkdownBodyProps) {
|
||||
const { theme } = useTheme();
|
||||
return (
|
||||
|
|
@ -46,6 +125,13 @@ export function MarkdownBody({ children, className }: MarkdownBodyProps) {
|
|||
<Markdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
pre: ({ node: _node, children: preChildren, ...preProps }) => {
|
||||
const mermaidSource = extractMermaidSource(preChildren);
|
||||
if (mermaidSource) {
|
||||
return <MermaidDiagramBlock source={mermaidSource} darkMode={theme === "dark"} />;
|
||||
}
|
||||
return <pre {...preProps}>{preChildren}</pre>;
|
||||
},
|
||||
a: ({ href, children: linkChildren }) => {
|
||||
const parsed = href ? parseProjectMentionHref(href) : null;
|
||||
if (parsed) {
|
||||
|
|
|
|||
|
|
@ -1,53 +1,86 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useState, type ComponentType } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useNavigate } from "@/lib/router";
|
||||
import { useDialog } from "../context/DialogContext";
|
||||
import { useCompany } from "../context/CompanyContext";
|
||||
import { agentsApi } from "../api/agents";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
import { AGENT_ROLES } from "@paperclipai/shared";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
Minimize2,
|
||||
Maximize2,
|
||||
Shield,
|
||||
User,
|
||||
ArrowLeft,
|
||||
Bot,
|
||||
Code,
|
||||
MousePointer2,
|
||||
Sparkles,
|
||||
Terminal,
|
||||
} from "lucide-react";
|
||||
import { cn, agentUrl } from "../lib/utils";
|
||||
import { roleLabels } from "./agent-config-primitives";
|
||||
import { AgentConfigForm, type CreateConfigValues } from "./AgentConfigForm";
|
||||
import { defaultCreateValues } from "./agent-config-defaults";
|
||||
import { getUIAdapter } from "../adapters";
|
||||
import { AgentIcon } from "./AgentIconPicker";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { OpenCodeLogoIcon } from "./OpenCodeLogoIcon";
|
||||
|
||||
type AdvancedAdapterType =
|
||||
| "claude_local"
|
||||
| "codex_local"
|
||||
| "opencode_local"
|
||||
| "pi_local"
|
||||
| "cursor"
|
||||
| "openclaw_gateway";
|
||||
|
||||
const ADVANCED_ADAPTER_OPTIONS: Array<{
|
||||
value: AdvancedAdapterType;
|
||||
label: string;
|
||||
desc: string;
|
||||
icon: ComponentType<{ className?: string }>;
|
||||
recommended?: boolean;
|
||||
}> = [
|
||||
{
|
||||
value: "claude_local",
|
||||
label: "Claude Code",
|
||||
icon: Sparkles,
|
||||
desc: "Local Claude agent",
|
||||
recommended: true,
|
||||
},
|
||||
{
|
||||
value: "codex_local",
|
||||
label: "Codex",
|
||||
icon: Code,
|
||||
desc: "Local Codex agent",
|
||||
recommended: true,
|
||||
},
|
||||
{
|
||||
value: "opencode_local",
|
||||
label: "OpenCode",
|
||||
icon: OpenCodeLogoIcon,
|
||||
desc: "Local multi-provider agent",
|
||||
},
|
||||
{
|
||||
value: "pi_local",
|
||||
label: "Pi",
|
||||
icon: Terminal,
|
||||
desc: "Local Pi agent",
|
||||
},
|
||||
{
|
||||
value: "cursor",
|
||||
label: "Cursor",
|
||||
icon: MousePointer2,
|
||||
desc: "Local Cursor agent",
|
||||
},
|
||||
{
|
||||
value: "openclaw_gateway",
|
||||
label: "OpenClaw Gateway",
|
||||
icon: Bot,
|
||||
desc: "Invoke OpenClaw via gateway protocol",
|
||||
},
|
||||
];
|
||||
|
||||
export function NewAgentDialog() {
|
||||
const { newAgentOpen, closeNewAgent } = useDialog();
|
||||
const { selectedCompanyId, selectedCompany } = useCompany();
|
||||
const queryClient = useQueryClient();
|
||||
const { newAgentOpen, closeNewAgent, openNewIssue } = useDialog();
|
||||
const { selectedCompanyId } = useCompany();
|
||||
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("");
|
||||
|
||||
// Config values (managed by AgentConfigForm)
|
||||
const [configValues, setConfigValues] = useState<CreateConfigValues>(defaultCreateValues);
|
||||
|
||||
// Popover states
|
||||
const [roleOpen, setRoleOpen] = useState(false);
|
||||
const [reportsToOpen, setReportsToOpen] = useState(false);
|
||||
const [showAdvancedCards, setShowAdvancedCards] = useState(false);
|
||||
|
||||
const { data: agents } = useQuery({
|
||||
queryKey: queryKeys.agents.list(selectedCompanyId!),
|
||||
|
|
@ -55,240 +88,127 @@ export function NewAgentDialog() {
|
|||
enabled: !!selectedCompanyId && newAgentOpen,
|
||||
});
|
||||
|
||||
const { data: adapterModels } = useQuery({
|
||||
queryKey: ["adapter-models", configValues.adapterType],
|
||||
queryFn: () => agentsApi.adapterModels(configValues.adapterType),
|
||||
enabled: newAgentOpen,
|
||||
});
|
||||
const ceoAgent = (agents ?? []).find((a) => a.role === "ceo");
|
||||
|
||||
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.hire(selectedCompanyId!, data),
|
||||
onSuccess: (result) => {
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(selectedCompanyId!) });
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.approvals.list(selectedCompanyId!) });
|
||||
reset();
|
||||
closeNewAgent();
|
||||
navigate(agentUrl(result.agent));
|
||||
},
|
||||
});
|
||||
|
||||
function reset() {
|
||||
setName("");
|
||||
setTitle("");
|
||||
setRole("general");
|
||||
setReportsTo("");
|
||||
setConfigValues(defaultCreateValues);
|
||||
setExpanded(true);
|
||||
}
|
||||
|
||||
function buildAdapterConfig() {
|
||||
const adapter = getUIAdapter(configValues.adapterType);
|
||||
return adapter.buildAdapterConfig(configValues);
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
if (!selectedCompanyId || !name.trim()) return;
|
||||
createAgent.mutate({
|
||||
name: name.trim(),
|
||||
role: effectiveRole,
|
||||
...(title.trim() ? { title: title.trim() } : {}),
|
||||
...(reportsTo ? { reportsTo } : {}),
|
||||
adapterType: configValues.adapterType,
|
||||
adapterConfig: buildAdapterConfig(),
|
||||
runtimeConfig: {
|
||||
heartbeat: {
|
||||
enabled: configValues.heartbeatEnabled,
|
||||
intervalSec: configValues.intervalSec,
|
||||
wakeOnDemand: true,
|
||||
cooldownSec: 10,
|
||||
maxConcurrentRuns: 1,
|
||||
},
|
||||
},
|
||||
budgetMonthlyCents: 0,
|
||||
function handleAskCeo() {
|
||||
closeNewAgent();
|
||||
openNewIssue({
|
||||
assigneeAgentId: ceoAgent?.id,
|
||||
title: "Create a new agent",
|
||||
description: "(type in what kind of agent you want here)",
|
||||
});
|
||||
}
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent) {
|
||||
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
}
|
||||
function handleAdvancedConfig() {
|
||||
setShowAdvancedCards(true);
|
||||
}
|
||||
|
||||
const currentReportsTo = (agents ?? []).find((a) => a.id === reportsTo);
|
||||
function handleAdvancedAdapterPick(adapterType: AdvancedAdapterType) {
|
||||
closeNewAgent();
|
||||
setShowAdvancedCards(false);
|
||||
navigate(`/agents/new?adapterType=${encodeURIComponent(adapterType)}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={newAgentOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) { reset(); closeNewAgent(); }
|
||||
if (!open) {
|
||||
setShowAdvancedCards(false);
|
||||
closeNewAgent();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
className={cn("p-0 gap-0 overflow-hidden", expanded ? "sm:max-w-2xl" : "sm:max-w-lg")}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="sm:max-w-md p-0 gap-0 overflow-hidden"
|
||||
>
|
||||
{/* 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-4 pb-2 shrink-0">
|
||||
<input
|
||||
className="w-full text-lg font-semibold 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}
|
||||
>
|
||||
{currentReportsTo ? (
|
||||
<>
|
||||
<AgentIcon icon={currentReportsTo.icon} className="h-3 w-3 text-muted-foreground" />
|
||||
{`Reports to ${currentReportsTo.name}`}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<User className="h-3 w-3 text-muted-foreground" />
|
||||
{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); }}
|
||||
>
|
||||
<AgentIcon icon={a.icon} className="shrink-0 h-3 w-3 text-muted-foreground" />
|
||||
{a.name}
|
||||
<span className="text-muted-foreground ml-auto">{roleLabels[a.role] ?? a.role}</span>
|
||||
</button>
|
||||
))}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* Shared config form (adapter + heartbeat) */}
|
||||
<AgentConfigForm
|
||||
mode="create"
|
||||
values={configValues}
|
||||
onChange={(patch) => setConfigValues((prev) => ({ ...prev, ...patch }))}
|
||||
adapterModels={adapterModels}
|
||||
/>
|
||||
</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>
|
||||
<span className="text-sm text-muted-foreground">Add a new agent</span>
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={!name.trim() || createAgent.isPending}
|
||||
onClick={handleSubmit}
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
className="text-muted-foreground"
|
||||
onClick={() => {
|
||||
setShowAdvancedCards(false);
|
||||
closeNewAgent();
|
||||
}}
|
||||
>
|
||||
{createAgent.isPending ? "Creating…" : "Create agent"}
|
||||
<span className="text-lg leading-none">×</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-6">
|
||||
{!showAdvancedCards ? (
|
||||
<>
|
||||
{/* Recommendation */}
|
||||
<div className="text-center space-y-3">
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-accent">
|
||||
<Sparkles className="h-6 w-6 text-foreground" />
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
We recommend letting your CEO handle agent setup — they know the
|
||||
org structure and can configure reporting, permissions, and
|
||||
adapters.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button className="w-full" size="lg" onClick={handleAskCeo}>
|
||||
<Bot className="h-4 w-4 mr-2" />
|
||||
Ask the CEO to create a new agent
|
||||
</Button>
|
||||
|
||||
{/* Advanced link */}
|
||||
<div className="text-center">
|
||||
<button
|
||||
className="text-xs text-muted-foreground hover:text-foreground underline underline-offset-2 transition-colors"
|
||||
onClick={handleAdvancedConfig}
|
||||
>
|
||||
I want advanced configuration myself
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<button
|
||||
className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
onClick={() => setShowAdvancedCards(false)}
|
||||
>
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
Back
|
||||
</button>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Choose your adapter type for advanced setup.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{ADVANCED_ADAPTER_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
className={cn(
|
||||
"flex flex-col items-center gap-1.5 rounded-md border border-border p-3 text-xs transition-colors hover:bg-accent/50 relative"
|
||||
)}
|
||||
onClick={() => handleAdvancedAdapterPick(opt.value)}
|
||||
>
|
||||
{opt.recommended && (
|
||||
<span className="absolute -top-1.5 right-1.5 bg-green-500 text-white text-[9px] font-semibold px-1.5 py-0.5 rounded-full leading-none">
|
||||
Recommended
|
||||
</span>
|
||||
)}
|
||||
<opt.icon className="h-4 w-4" />
|
||||
<span className="font-medium">{opt.label}</span>
|
||||
<span className="text-muted-foreground text-[10px]">
|
||||
{opt.desc}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { useState, useEffect, useRef, useCallback, useMemo, type ChangeEvent } f
|
|||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useDialog } from "../context/DialogContext";
|
||||
import { useCompany } from "../context/CompanyContext";
|
||||
import { useToast } from "../context/ToastContext";
|
||||
import { issuesApi } from "../api/issues";
|
||||
import { projectsApi } from "../api/projects";
|
||||
import { agentsApi } from "../api/agents";
|
||||
|
|
@ -10,6 +9,7 @@ import { authApi } from "../api/auth";
|
|||
import { assetsApi } from "../api/assets";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
import { useProjectOrder } from "../hooks/useProjectOrder";
|
||||
import { getRecentAssigneeIds, sortAgentsByRecency, trackRecentAssignee } from "../lib/recent-assignees";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
|
|
@ -36,6 +36,7 @@ import {
|
|||
Paperclip,
|
||||
} from "lucide-react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { extractProviderIdWithFallback } from "../lib/model-utils";
|
||||
import { issueStatusText, issueStatusTextDefault, priorityColor, priorityColorDefault } from "../lib/status-colors";
|
||||
import { MarkdownEditor, type MarkdownEditorRef, type MentionOption } from "./MarkdownEditor";
|
||||
import { AgentIcon } from "./AgentIconPicker";
|
||||
|
|
@ -116,6 +117,8 @@ function buildAssigneeAdapterOverrides(input: {
|
|||
adapterConfig.variant = input.thinkingEffortOverride;
|
||||
} else if (adapterType === "claude_local") {
|
||||
adapterConfig.effort = input.thinkingEffortOverride;
|
||||
} else if (adapterType === "opencode_local") {
|
||||
adapterConfig.variant = input.thinkingEffortOverride;
|
||||
}
|
||||
}
|
||||
if (adapterType === "claude_local" && input.chrome) {
|
||||
|
|
@ -168,7 +171,6 @@ const priorities = [
|
|||
export function NewIssueDialog() {
|
||||
const { newIssueOpen, newIssueDefaults, closeNewIssue } = useDialog();
|
||||
const { companies, selectedCompanyId, selectedCompany } = useCompany();
|
||||
const { pushToast } = useToast();
|
||||
const queryClient = useQueryClient();
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
|
|
@ -249,27 +251,23 @@ export function NewIssueDialog() {
|
|||
}, [agents, orderedProjects]);
|
||||
|
||||
const { data: assigneeAdapterModels } = useQuery({
|
||||
queryKey: ["adapter-models", assigneeAdapterType],
|
||||
queryFn: () => agentsApi.adapterModels(assigneeAdapterType!),
|
||||
enabled: !!effectiveCompanyId && newIssueOpen && supportsAssigneeOverrides,
|
||||
queryKey:
|
||||
effectiveCompanyId && assigneeAdapterType
|
||||
? queryKeys.agents.adapterModels(effectiveCompanyId, assigneeAdapterType)
|
||||
: ["agents", "none", "adapter-models", assigneeAdapterType ?? "none"],
|
||||
queryFn: () => agentsApi.adapterModels(effectiveCompanyId!, assigneeAdapterType!),
|
||||
enabled: Boolean(effectiveCompanyId) && newIssueOpen && supportsAssigneeOverrides,
|
||||
});
|
||||
|
||||
const createIssue = useMutation({
|
||||
mutationFn: ({ companyId, ...data }: { companyId: string } & Record<string, unknown>) =>
|
||||
issuesApi.create(companyId, data),
|
||||
onSuccess: (issue) => {
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(effectiveCompanyId!) });
|
||||
if (draftTimer.current) clearTimeout(draftTimer.current);
|
||||
clearDraft();
|
||||
reset();
|
||||
closeNewIssue();
|
||||
pushToast({
|
||||
dedupeKey: `activity:issue.created:${issue.id}`,
|
||||
title: `${issue.identifier ?? "Issue"} created`,
|
||||
body: issue.title,
|
||||
tone: "success",
|
||||
action: { label: `View ${issue.identifier ?? "issue"}`, href: `/issues/${issue.identifier ?? issue.id}` },
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -327,7 +325,18 @@ export function NewIssueDialog() {
|
|||
setDialogCompanyId(selectedCompanyId);
|
||||
|
||||
const draft = loadDraft();
|
||||
if (draft && draft.title.trim()) {
|
||||
if (newIssueDefaults.title) {
|
||||
setTitle(newIssueDefaults.title);
|
||||
setDescription(newIssueDefaults.description ?? "");
|
||||
setStatus(newIssueDefaults.status ?? "todo");
|
||||
setPriority(newIssueDefaults.priority ?? "");
|
||||
setProjectId(newIssueDefaults.projectId ?? "");
|
||||
setAssigneeId(newIssueDefaults.assigneeAgentId ?? "");
|
||||
setAssigneeModelOverride("");
|
||||
setAssigneeThinkingEffort("");
|
||||
setAssigneeChrome(false);
|
||||
setAssigneeUseProjectWorkspace(true);
|
||||
} else if (draft && draft.title.trim()) {
|
||||
setTitle(draft.title);
|
||||
setDescription(draft.description);
|
||||
setStatus(draft.status || "todo");
|
||||
|
|
@ -365,7 +374,7 @@ export function NewIssueDialog() {
|
|||
? ISSUE_THINKING_EFFORT_OPTIONS.codex_local
|
||||
: assigneeAdapterType === "opencode_local"
|
||||
? ISSUE_THINKING_EFFORT_OPTIONS.opencode_local
|
||||
: ISSUE_THINKING_EFFORT_OPTIONS.claude_local;
|
||||
: ISSUE_THINKING_EFFORT_OPTIONS.claude_local;
|
||||
if (!validThinkingValues.some((option) => option.value === assigneeThinkingEffort)) {
|
||||
setAssigneeThinkingEffort("");
|
||||
}
|
||||
|
|
@ -474,16 +483,18 @@ export function NewIssueDialog() {
|
|||
: assigneeAdapterType === "opencode_local"
|
||||
? ISSUE_THINKING_EFFORT_OPTIONS.opencode_local
|
||||
: ISSUE_THINKING_EFFORT_OPTIONS.claude_local;
|
||||
const recentAssigneeIds = useMemo(() => getRecentAssigneeIds(), [newIssueOpen]);
|
||||
const assigneeOptions = useMemo<InlineEntityOption[]>(
|
||||
() =>
|
||||
(agents ?? [])
|
||||
.filter((agent) => agent.status !== "terminated")
|
||||
.map((agent) => ({
|
||||
id: agent.id,
|
||||
label: agent.name,
|
||||
searchText: `${agent.name} ${agent.role} ${agent.title ?? ""}`,
|
||||
})),
|
||||
[agents],
|
||||
sortAgentsByRecency(
|
||||
(agents ?? []).filter((agent) => agent.status !== "terminated"),
|
||||
recentAssigneeIds,
|
||||
).map((agent) => ({
|
||||
id: agent.id,
|
||||
label: agent.name,
|
||||
searchText: `${agent.name} ${agent.role} ${agent.title ?? ""}`,
|
||||
})),
|
||||
[agents, recentAssigneeIds],
|
||||
);
|
||||
const projectOptions = useMemo<InlineEntityOption[]>(
|
||||
() =>
|
||||
|
|
@ -495,12 +506,21 @@ export function NewIssueDialog() {
|
|||
[orderedProjects],
|
||||
);
|
||||
const modelOverrideOptions = useMemo<InlineEntityOption[]>(
|
||||
() =>
|
||||
(assigneeAdapterModels ?? []).map((model) => ({
|
||||
id: model.id,
|
||||
label: model.label,
|
||||
searchText: model.id,
|
||||
})),
|
||||
() => {
|
||||
return [...(assigneeAdapterModels ?? [])]
|
||||
.sort((a, b) => {
|
||||
const providerA = extractProviderIdWithFallback(a.id);
|
||||
const providerB = extractProviderIdWithFallback(b.id);
|
||||
const byProvider = providerA.localeCompare(providerB);
|
||||
if (byProvider !== 0) return byProvider;
|
||||
return a.id.localeCompare(b.id);
|
||||
})
|
||||
.map((model) => ({
|
||||
id: model.id,
|
||||
label: model.label,
|
||||
searchText: `${model.id} ${extractProviderIdWithFallback(model.id)}`,
|
||||
}));
|
||||
},
|
||||
[assigneeAdapterModels],
|
||||
);
|
||||
|
||||
|
|
@ -521,6 +541,18 @@ export function NewIssueDialog() {
|
|||
: "sm:max-w-lg"
|
||||
)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onPointerDownOutside={(event) => {
|
||||
// Radix Dialog's modal DismissableLayer calls preventDefault() on
|
||||
// pointerdown events that originate outside the Dialog DOM tree.
|
||||
// Popover portals render at the body level (outside the Dialog), so
|
||||
// touch events on popover content get their default prevented — which
|
||||
// kills scroll gesture recognition on mobile. Telling Radix "this
|
||||
// event is handled" skips that preventDefault, restoring touch scroll.
|
||||
const target = event.detail.originalEvent.target as HTMLElement | null;
|
||||
if (target?.closest("[data-radix-popper-content-wrapper]")) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* Header bar */}
|
||||
<div className="flex items-center justify-between px-4 py-2.5 border-b border-border shrink-0">
|
||||
|
|
@ -628,18 +660,19 @@ export function NewIssueDialog() {
|
|||
</div>
|
||||
|
||||
<div className="px-4 pb-2 shrink-0">
|
||||
<div className="overflow-x-auto">
|
||||
<div className="inline-flex min-w-max items-center gap-2 text-sm text-muted-foreground">
|
||||
<div className="overflow-x-auto overscroll-x-contain">
|
||||
<div className="inline-flex items-center gap-2 text-sm text-muted-foreground flex-wrap sm:flex-nowrap sm:min-w-max">
|
||||
<span>For</span>
|
||||
<InlineEntitySelector
|
||||
ref={assigneeSelectorRef}
|
||||
value={assigneeId}
|
||||
options={assigneeOptions}
|
||||
placeholder="Assignee"
|
||||
disablePortal
|
||||
noneLabel="No assignee"
|
||||
searchPlaceholder="Search assignees..."
|
||||
emptyMessage="No assignees found."
|
||||
onChange={setAssigneeId}
|
||||
onChange={(id) => { if (id) trackRecentAssignee(id); setAssigneeId(id); }}
|
||||
onConfirm={() => {
|
||||
projectSelectorRef.current?.focus();
|
||||
}}
|
||||
|
|
@ -670,6 +703,7 @@ export function NewIssueDialog() {
|
|||
value={projectId}
|
||||
options={projectOptions}
|
||||
placeholder="Project"
|
||||
disablePortal
|
||||
noneLabel="No project"
|
||||
searchPlaceholder="Search projects..."
|
||||
emptyMessage="No projects found."
|
||||
|
|
@ -725,6 +759,7 @@ export function NewIssueDialog() {
|
|||
value={assigneeModelOverride}
|
||||
options={modelOverrideOptions}
|
||||
placeholder="Default model"
|
||||
disablePortal
|
||||
noneLabel="Default model"
|
||||
searchPlaceholder="Search models..."
|
||||
emptyMessage="No models found."
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, useState, useRef, useCallback } from "react";
|
||||
import { useEffect, useState, useRef, useCallback, useMemo } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import type { AdapterEnvironmentTestResult } from "@paperclipai/shared";
|
||||
|
|
@ -17,6 +17,7 @@ import {
|
|||
} from "@/components/ui/popover";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "../lib/utils";
|
||||
import { extractModelName, extractProviderIdWithFallback } from "../lib/model-utils";
|
||||
import { getUIAdapter } from "../adapters";
|
||||
import { defaultCreateValues } from "./agent-config-defaults";
|
||||
import {
|
||||
|
|
@ -24,10 +25,10 @@ import {
|
|||
DEFAULT_CODEX_LOCAL_MODEL
|
||||
} from "@paperclipai/adapter-codex-local";
|
||||
import { DEFAULT_CURSOR_LOCAL_MODEL } from "@paperclipai/adapter-cursor-local";
|
||||
import { DEFAULT_OPENCODE_LOCAL_MODEL } from "@paperclipai/adapter-opencode-local";
|
||||
import { AsciiArtAnimation } from "./AsciiArtAnimation";
|
||||
import { ChoosePathButton } from "./PathInstructionsModal";
|
||||
import { HintIcon } from "./agent-config-primitives";
|
||||
import { OpenCodeLogoIcon } from "./OpenCodeLogoIcon";
|
||||
import {
|
||||
Building2,
|
||||
Bot,
|
||||
|
|
@ -37,7 +38,6 @@ import {
|
|||
ArrowLeft,
|
||||
ArrowRight,
|
||||
Terminal,
|
||||
Globe,
|
||||
Sparkles,
|
||||
MousePointer2,
|
||||
Check,
|
||||
|
|
@ -52,10 +52,11 @@ type AdapterType =
|
|||
| "claude_local"
|
||||
| "codex_local"
|
||||
| "opencode_local"
|
||||
| "pi_local"
|
||||
| "cursor"
|
||||
| "process"
|
||||
| "http"
|
||||
| "openclaw";
|
||||
| "openclaw_gateway";
|
||||
|
||||
const DEFAULT_TASK_DESCRIPTION = `Setup yourself as the CEO. Use the ceo persona found here: [https://github.com/paperclipai/companies/blob/main/default/ceo/AGENTS.md](https://github.com/paperclipai/companies/blob/main/default/ceo/AGENTS.md)
|
||||
|
||||
|
|
@ -76,6 +77,7 @@ export function OnboardingWizard() {
|
|||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [modelOpen, setModelOpen] = useState(false);
|
||||
const [modelSearch, setModelSearch] = useState("");
|
||||
|
||||
// Step 1
|
||||
const [companyName, setCompanyName] = useState("");
|
||||
|
|
@ -149,10 +151,18 @@ export function OnboardingWizard() {
|
|||
if (step === 3) autoResizeTextarea();
|
||||
}, [step, taskDescription, autoResizeTextarea]);
|
||||
|
||||
const { data: adapterModels } = useQuery({
|
||||
queryKey: ["adapter-models", adapterType],
|
||||
queryFn: () => agentsApi.adapterModels(adapterType),
|
||||
enabled: onboardingOpen && step === 2
|
||||
const {
|
||||
data: adapterModels,
|
||||
error: adapterModelsError,
|
||||
isLoading: adapterModelsLoading,
|
||||
isFetching: adapterModelsFetching,
|
||||
} = useQuery({
|
||||
queryKey:
|
||||
createdCompanyId
|
||||
? queryKeys.agents.adapterModels(createdCompanyId, adapterType)
|
||||
: ["agents", "none", "adapter-models", adapterType],
|
||||
queryFn: () => agentsApi.adapterModels(createdCompanyId!, adapterType),
|
||||
enabled: Boolean(createdCompanyId) && onboardingOpen && step === 2
|
||||
});
|
||||
const isLocalAdapter =
|
||||
adapterType === "claude_local" || adapterType === "codex_local" || adapterType === "opencode_local" || adapterType === "cursor";
|
||||
|
|
@ -162,9 +172,9 @@ export function OnboardingWizard() {
|
|||
? "codex"
|
||||
: adapterType === "cursor"
|
||||
? "agent"
|
||||
: adapterType === "opencode_local"
|
||||
? "opencode"
|
||||
: "claude");
|
||||
: adapterType === "opencode_local"
|
||||
? "opencode"
|
||||
: "claude");
|
||||
|
||||
useEffect(() => {
|
||||
if (step !== 2) return;
|
||||
|
|
@ -182,6 +192,41 @@ export function OnboardingWizard() {
|
|||
adapterType === "claude_local" &&
|
||||
adapterEnvResult?.status === "fail" &&
|
||||
hasAnthropicApiKeyOverrideCheck;
|
||||
const filteredModels = useMemo(() => {
|
||||
const query = modelSearch.trim().toLowerCase();
|
||||
return (adapterModels ?? []).filter((entry) => {
|
||||
if (!query) return true;
|
||||
const provider = extractProviderIdWithFallback(entry.id, "");
|
||||
return (
|
||||
entry.id.toLowerCase().includes(query) ||
|
||||
entry.label.toLowerCase().includes(query) ||
|
||||
provider.toLowerCase().includes(query)
|
||||
);
|
||||
});
|
||||
}, [adapterModels, modelSearch]);
|
||||
const groupedModels = useMemo(() => {
|
||||
if (adapterType !== "opencode_local") {
|
||||
return [
|
||||
{
|
||||
provider: "models",
|
||||
entries: [...filteredModels].sort((a, b) => a.id.localeCompare(b.id)),
|
||||
},
|
||||
];
|
||||
}
|
||||
const groups = new Map<string, Array<{ id: string; label: string }>>();
|
||||
for (const entry of filteredModels) {
|
||||
const provider = extractProviderIdWithFallback(entry.id);
|
||||
const bucket = groups.get(provider) ?? [];
|
||||
bucket.push(entry);
|
||||
groups.set(provider, bucket);
|
||||
}
|
||||
return Array.from(groups.entries())
|
||||
.sort(([a], [b]) => a.localeCompare(b))
|
||||
.map(([provider, entries]) => ({
|
||||
provider,
|
||||
entries: [...entries].sort((a, b) => a.id.localeCompare(b.id)),
|
||||
}));
|
||||
}, [filteredModels, adapterType]);
|
||||
|
||||
function reset() {
|
||||
setStep(1);
|
||||
|
|
@ -225,8 +270,6 @@ export function OnboardingWizard() {
|
|||
? model || DEFAULT_CODEX_LOCAL_MODEL
|
||||
: adapterType === "cursor"
|
||||
? model || DEFAULT_CURSOR_LOCAL_MODEL
|
||||
: adapterType === "opencode_local"
|
||||
? model || DEFAULT_OPENCODE_LOCAL_MODEL
|
||||
: model,
|
||||
command,
|
||||
args,
|
||||
|
|
@ -315,6 +358,35 @@ export function OnboardingWizard() {
|
|||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
if (adapterType === "opencode_local") {
|
||||
const selectedModelId = model.trim();
|
||||
if (!selectedModelId) {
|
||||
setError("OpenCode requires an explicit model in provider/model format.");
|
||||
return;
|
||||
}
|
||||
if (adapterModelsError) {
|
||||
setError(
|
||||
adapterModelsError instanceof Error
|
||||
? adapterModelsError.message
|
||||
: "Failed to load OpenCode models.",
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (adapterModelsLoading || adapterModelsFetching) {
|
||||
setError("OpenCode models are still loading. Please wait and try again.");
|
||||
return;
|
||||
}
|
||||
const discoveredModels = adapterModels ?? [];
|
||||
if (!discoveredModels.some((entry) => entry.id === selectedModelId)) {
|
||||
setError(
|
||||
discoveredModels.length === 0
|
||||
? "No OpenCode models discovered. Run `opencode models` and authenticate providers."
|
||||
: `Configured OpenCode model is unavailable: ${selectedModelId}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (isLocalAdapter) {
|
||||
const result = adapterEnvResult ?? (await runAdapterEnvironmentTest());
|
||||
if (!result) return;
|
||||
|
|
@ -590,35 +662,28 @@ export function OnboardingWizard() {
|
|||
{
|
||||
value: "opencode_local" as const,
|
||||
label: "OpenCode",
|
||||
icon: Code,
|
||||
desc: "Local OpenCode agent"
|
||||
icon: OpenCodeLogoIcon,
|
||||
desc: "Local multi-provider agent"
|
||||
},
|
||||
{
|
||||
value: "openclaw" as const,
|
||||
label: "OpenClaw",
|
||||
value: "pi_local" as const,
|
||||
label: "Pi",
|
||||
icon: Terminal,
|
||||
desc: "Local Pi agent"
|
||||
},
|
||||
{
|
||||
value: "openclaw_gateway" as const,
|
||||
label: "OpenClaw Gateway",
|
||||
icon: Bot,
|
||||
desc: "Notify OpenClaw webhook",
|
||||
comingSoon: true
|
||||
desc: "Invoke OpenClaw via gateway protocol",
|
||||
comingSoon: true,
|
||||
disabledLabel: "Configure OpenClaw within the App"
|
||||
},
|
||||
{
|
||||
value: "cursor" as const,
|
||||
label: "Cursor",
|
||||
icon: MousePointer2,
|
||||
desc: "Local Cursor agent"
|
||||
},
|
||||
{
|
||||
value: "process" as const,
|
||||
label: "Shell Command",
|
||||
icon: Terminal,
|
||||
desc: "Run a process",
|
||||
comingSoon: true
|
||||
},
|
||||
{
|
||||
value: "http" as const,
|
||||
label: "HTTP Webhook",
|
||||
icon: Globe,
|
||||
desc: "Call an endpoint",
|
||||
comingSoon: true
|
||||
}
|
||||
].map((opt) => (
|
||||
<button
|
||||
|
|
@ -640,20 +705,28 @@ export function OnboardingWizard() {
|
|||
setModel(DEFAULT_CODEX_LOCAL_MODEL);
|
||||
} else if (nextType === "cursor" && !model) {
|
||||
setModel(DEFAULT_CURSOR_LOCAL_MODEL);
|
||||
} else if (nextType === "opencode_local" && !model) {
|
||||
setModel(DEFAULT_OPENCODE_LOCAL_MODEL);
|
||||
}
|
||||
if (nextType === "opencode_local") {
|
||||
if (!model.includes("/")) {
|
||||
setModel("");
|
||||
}
|
||||
return;
|
||||
}
|
||||
setModel("");
|
||||
}}
|
||||
>
|
||||
{opt.recommended && (
|
||||
<span className="absolute -top-1.5 -right-1.5 bg-green-500 text-white text-[9px] font-semibold px-1.5 py-0.5 rounded-full leading-none">
|
||||
<span className="absolute -top-1.5 right-1.5 bg-green-500 text-white text-[9px] font-semibold px-1.5 py-0.5 rounded-full leading-none">
|
||||
Recommended
|
||||
</span>
|
||||
)}
|
||||
<opt.icon className="h-4 w-4" />
|
||||
<span className="font-medium">{opt.label}</span>
|
||||
<span className="text-muted-foreground text-[10px]">
|
||||
{opt.comingSoon ? "Coming soon" : opt.desc}
|
||||
{opt.comingSoon
|
||||
? (opt as { disabledLabel?: string }).disabledLabel ??
|
||||
"Coming soon"
|
||||
: opt.desc}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
|
|
@ -664,6 +737,7 @@ export function OnboardingWizard() {
|
|||
{(adapterType === "claude_local" ||
|
||||
adapterType === "codex_local" ||
|
||||
adapterType === "opencode_local" ||
|
||||
adapterType === "pi_local" ||
|
||||
adapterType === "cursor") && (
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
|
|
@ -688,7 +762,13 @@ export function OnboardingWizard() {
|
|||
<label className="text-xs text-muted-foreground mb-1 block">
|
||||
Model
|
||||
</label>
|
||||
<Popover open={modelOpen} onOpenChange={setModelOpen}>
|
||||
<Popover
|
||||
open={modelOpen}
|
||||
onOpenChange={(next) => {
|
||||
setModelOpen(next);
|
||||
if (!next) setModelSearch("");
|
||||
}}
|
||||
>
|
||||
<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
|
||||
|
|
@ -698,7 +778,10 @@ export function OnboardingWizard() {
|
|||
>
|
||||
{selectedModel
|
||||
? selectedModel.label
|
||||
: model || "Default"}
|
||||
: model ||
|
||||
(adapterType === "opencode_local"
|
||||
? "Select model (required)"
|
||||
: "Default")}
|
||||
</span>
|
||||
<ChevronDown className="h-3 w-3 text-muted-foreground" />
|
||||
</button>
|
||||
|
|
@ -707,36 +790,60 @@ export function OnboardingWizard() {
|
|||
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) => (
|
||||
<input
|
||||
className="w-full px-2 py-1.5 text-xs bg-transparent outline-none border-b border-border mb-1 placeholder:text-muted-foreground/50"
|
||||
placeholder="Search models..."
|
||||
value={modelSearch}
|
||||
onChange={(e) => setModelSearch(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
{adapterType !== "opencode_local" && (
|
||||
<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"
|
||||
"flex items-center gap-2 w-full px-2 py-1.5 text-sm rounded hover:bg-accent/50",
|
||||
!model && "bg-accent"
|
||||
)}
|
||||
onClick={() => {
|
||||
setModel(m.id);
|
||||
setModel("");
|
||||
setModelOpen(false);
|
||||
}}
|
||||
>
|
||||
<span>{m.label}</span>
|
||||
<span className="text-xs text-muted-foreground font-mono">
|
||||
{m.id}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
Default
|
||||
</button>
|
||||
)}
|
||||
<div className="max-h-[240px] overflow-y-auto">
|
||||
{groupedModels.map((group) => (
|
||||
<div key={group.provider} className="mb-1 last:mb-0">
|
||||
{adapterType === "opencode_local" && (
|
||||
<div className="px-2 py-1 text-[10px] uppercase tracking-wide text-muted-foreground">
|
||||
{group.provider} ({group.entries.length})
|
||||
</div>
|
||||
)}
|
||||
{group.entries.map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
className={cn(
|
||||
"flex items-center 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 className="block w-full text-left truncate" title={m.id}>
|
||||
{adapterType === "opencode_local" ? extractModelName(m.id) : m.label}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{filteredModels.length === 0 && (
|
||||
<p className="px-2 py-1.5 text-xs text-muted-foreground">
|
||||
No models discovered.
|
||||
</p>
|
||||
)}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
|
@ -802,7 +909,7 @@ export function OnboardingWizard() {
|
|||
: adapterType === "codex_local"
|
||||
? `${effectiveAdapterCommand} exec --json -`
|
||||
: adapterType === "opencode_local"
|
||||
? `${effectiveAdapterCommand} run --format json \"Respond with hello.\"`
|
||||
? `${effectiveAdapterCommand} run --format json "Respond with hello."`
|
||||
: `${effectiveAdapterCommand} --print - --output-format stream-json --verbose`}
|
||||
</p>
|
||||
<p className="text-muted-foreground">
|
||||
|
|
@ -863,14 +970,14 @@ export function OnboardingWizard() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{(adapterType === "http" || adapterType === "openclaw") && (
|
||||
{(adapterType === "http" || adapterType === "openclaw_gateway") && (
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground mb-1 block">
|
||||
Webhook URL
|
||||
{adapterType === "openclaw_gateway" ? "Gateway URL" : "Webhook URL"}
|
||||
</label>
|
||||
<input
|
||||
className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm font-mono outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50"
|
||||
placeholder="https://..."
|
||||
placeholder={adapterType === "openclaw_gateway" ? "ws://127.0.0.1:18789" : "https://..."}
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
/>
|
||||
|
|
|
|||
22
ui/src/components/OpenCodeLogoIcon.tsx
Normal file
22
ui/src/components/OpenCodeLogoIcon.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { cn } from "../lib/utils";
|
||||
|
||||
interface OpenCodeLogoIconProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function OpenCodeLogoIcon({ className }: OpenCodeLogoIconProps) {
|
||||
return (
|
||||
<>
|
||||
<img
|
||||
src="/brands/opencode-logo-light-square.svg"
|
||||
alt="OpenCode"
|
||||
className={cn("dark:hidden", className)}
|
||||
/>
|
||||
<img
|
||||
src="/brands/opencode-logo-dark-square.svg"
|
||||
alt="OpenCode"
|
||||
className={cn("hidden dark:block", className)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,11 +3,12 @@ import { Link } from "@/lib/router";
|
|||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import type { Project } from "@paperclipai/shared";
|
||||
import { StatusBadge } from "./StatusBadge";
|
||||
import { formatDate } from "../lib/utils";
|
||||
import { cn, formatDate } from "../lib/utils";
|
||||
import { goalsApi } from "../api/goals";
|
||||
import { projectsApi } from "../api/projects";
|
||||
import { useCompany } from "../context/CompanyContext";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
import { statusBadge, statusBadgeDefault } from "../lib/status-colors";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
|
|
@ -15,6 +16,14 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
|
|||
import { ExternalLink, Github, Plus, Trash2, X } from "lucide-react";
|
||||
import { ChoosePathButton } from "./PathInstructionsModal";
|
||||
|
||||
const PROJECT_STATUSES = [
|
||||
{ value: "backlog", label: "Backlog" },
|
||||
{ value: "planned", label: "Planned" },
|
||||
{ value: "in_progress", label: "In Progress" },
|
||||
{ value: "completed", label: "Completed" },
|
||||
{ value: "cancelled", label: "Cancelled" },
|
||||
];
|
||||
|
||||
interface ProjectPropertiesProps {
|
||||
project: Project;
|
||||
onUpdate?: (data: Record<string, unknown>) => void;
|
||||
|
|
@ -31,6 +40,42 @@ function PropertyRow({ label, children }: { label: string; children: React.React
|
|||
);
|
||||
}
|
||||
|
||||
function ProjectStatusPicker({ status, onChange }: { status: string; onChange: (status: string) => void }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const colorClass = statusBadge[status] ?? statusBadgeDefault;
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
className={cn(
|
||||
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium whitespace-nowrap shrink-0 cursor-pointer hover:opacity-80 transition-opacity",
|
||||
colorClass,
|
||||
)}
|
||||
>
|
||||
{status.replace("_", " ")}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-40 p-1" align="start">
|
||||
{PROJECT_STATUSES.map((s) => (
|
||||
<Button
|
||||
key={s.value}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={cn("w-full justify-start gap-2 text-xs", s.value === status && "bg-accent")}
|
||||
onClick={() => {
|
||||
onChange(s.value);
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{s.label}
|
||||
</Button>
|
||||
))}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps) {
|
||||
const { selectedCompanyId } = useCompany();
|
||||
const queryClient = useQueryClient();
|
||||
|
|
@ -212,7 +257,14 @@ export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps)
|
|||
<div className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<PropertyRow label="Status">
|
||||
<StatusBadge status={project.status} />
|
||||
{onUpdate ? (
|
||||
<ProjectStatusPicker
|
||||
status={project.status}
|
||||
onChange={(status) => onUpdate({ status })}
|
||||
/>
|
||||
) : (
|
||||
<StatusBadge status={project.status} />
|
||||
)}
|
||||
</PropertyRow>
|
||||
{project.leadAgentId && (
|
||||
<PropertyRow label="Lead">
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ export function Sidebar() {
|
|||
</Button>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 min-h-0 overflow-y-auto scrollbar-none flex flex-col gap-4 px-3 py-2">
|
||||
<nav className="flex-1 min-h-0 overflow-y-auto scrollbar-auto-hide flex flex-col gap-4 px-3 py-2">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
{/* New Issue button aligned with nav items */}
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { useMemo, useState } from "react";
|
||||
import { NavLink, useLocation } from "@/lib/router";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { ChevronRight, Plus } from "lucide-react";
|
||||
import { useCompany } from "../context/CompanyContext";
|
||||
import { useDialog } from "../context/DialogContext";
|
||||
import { useSidebar } from "../context/SidebarContext";
|
||||
import { agentsApi } from "../api/agents";
|
||||
import { heartbeatsApi } from "../api/heartbeats";
|
||||
|
|
@ -40,6 +41,7 @@ function sortByHierarchy(agents: Agent[]): Agent[] {
|
|||
export function SidebarAgents() {
|
||||
const [open, setOpen] = useState(true);
|
||||
const { selectedCompanyId } = useCompany();
|
||||
const { openNewAgent } = useDialog();
|
||||
const { isMobile, setSidebarOpen } = useSidebar();
|
||||
const location = useLocation();
|
||||
|
||||
|
|
@ -89,6 +91,16 @@ export function SidebarAgents() {
|
|||
Agents
|
||||
</span>
|
||||
</CollapsibleTrigger>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openNewAgent();
|
||||
}}
|
||||
className="flex items-center justify-center h-4 w-4 rounded text-muted-foreground/60 hover:text-foreground hover:bg-accent/50 transition-colors"
|
||||
aria-label="New agent"
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import {
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { HelpCircle, ChevronDown, ChevronRight } from "lucide-react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { AGENT_ROLE_LABELS } from "@paperclipai/shared";
|
||||
|
||||
/* ---- Help text for (?) tooltips ---- */
|
||||
export const help: Record<string, string> = {
|
||||
|
|
@ -23,7 +24,7 @@ export const help: Record<string, string> = {
|
|||
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), OpenClaw webhook, spawned process, or generic HTTP webhook.",
|
||||
adapterType: "How this agent runs: local CLI (Claude/Codex/OpenCode), OpenClaw Gateway, spawned process, or generic HTTP webhook.",
|
||||
cwd: "Default working directory fallback for local adapters. Use an absolute path on the machine running Paperclip.",
|
||||
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.",
|
||||
|
|
@ -34,7 +35,7 @@ export const help: Record<string, string> = {
|
|||
search: "Enable Codex web search capability during runs.",
|
||||
maxTurnsPerRun: "Maximum number of agentic turns (tool calls) per heartbeat run.",
|
||||
command: "The command to execute (e.g. node, python).",
|
||||
localCommand: "Override the path to the CLI command you want the adapter to call (e.g. /usr/local/bin/claude, codex).",
|
||||
localCommand: "Override the path to the CLI command you want the adapter to call (e.g. /usr/local/bin/claude, codex, opencode).",
|
||||
args: "Command-line arguments, comma-separated.",
|
||||
extraArgs: "Extra CLI arguments for local adapters, comma-separated.",
|
||||
envVars: "Environment variables injected into the adapter process. Use plain values or secret references.",
|
||||
|
|
@ -53,17 +54,13 @@ export const adapterLabels: Record<string, string> = {
|
|||
claude_local: "Claude (local)",
|
||||
codex_local: "Codex (local)",
|
||||
opencode_local: "OpenCode (local)",
|
||||
openclaw: "OpenClaw",
|
||||
openclaw_gateway: "OpenClaw Gateway",
|
||||
cursor: "Cursor (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",
|
||||
};
|
||||
export const roleLabels = AGENT_ROLE_LABELS as Record<string, string>;
|
||||
|
||||
/* ---- Primitive components ---- */
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
|
||||
import * as React from "react"
|
||||
import { Command as CommandPrimitive } from "cmdk"
|
||||
import { SearchIcon } from "lucide-react"
|
||||
import { SearchIcon, XIcon } from "lucide-react"
|
||||
import { Dialog as DialogPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
|
|
@ -50,11 +51,20 @@ function CommandDialog({
|
|||
</DialogHeader>
|
||||
<DialogContent
|
||||
className={cn("overflow-hidden p-0", className)}
|
||||
showCloseButton={showCloseButton}
|
||||
showCloseButton={false}
|
||||
>
|
||||
<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
|
||||
{children}
|
||||
</Command>
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close
|
||||
data-slot="dialog-close"
|
||||
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-0 right-2 flex h-12 items-center rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||
>
|
||||
<XIcon />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -19,22 +19,23 @@ function PopoverContent({
|
|||
className,
|
||||
align = "center",
|
||||
sideOffset = 4,
|
||||
disablePortal = false,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
||||
return (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
data-slot="popover-content"
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Content> & { disablePortal?: boolean }) {
|
||||
const content = (
|
||||
<PopoverPrimitive.Content
|
||||
data-slot="popover-content"
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
if (disablePortal) return content
|
||||
return <PopoverPrimitive.Portal>{content}</PopoverPrimitive.Portal>
|
||||
}
|
||||
|
||||
function PopoverAnchor({
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue