Patchpass V1
This commit is contained in:
Space-Banane
@@ -0,0 +1,250 @@
|
||||
import { useState } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import { agents as agentsApi } from "../api/client";
|
||||
import type { Agent } from "../api/types";
|
||||
import { Modal } from "./Modal";
|
||||
import { Button, Input, Textarea } from "./ui";
|
||||
import { CodeBlock } from "./CodeBlock";
|
||||
|
||||
// ── Create / edit form ───────────────────────────────────────────────────────────
|
||||
|
||||
export function AgentFormModal({
|
||||
open,
|
||||
onClose,
|
||||
agent,
|
||||
onSaved,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
agent?: Agent | null;
|
||||
onSaved: (agent: Agent, created: boolean) => void;
|
||||
}) {
|
||||
const editing = !!agent;
|
||||
const [name, setName] = useState(agent?.name ?? "");
|
||||
const [description, setDescription] = useState(agent?.description ?? "");
|
||||
const [website, setWebsite] = useState(agent?.website ?? "");
|
||||
const [iconUrl, setIconUrl] = useState(agent?.icon_url ?? "");
|
||||
const [maxPending, setMaxPending] = useState(agent?.max_pending_requests ?? 5);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const submit = async () => {
|
||||
if (!name.trim()) return toast.error("Name is required");
|
||||
setLoading(true);
|
||||
try {
|
||||
const payload = {
|
||||
name: name.trim(),
|
||||
description: description.trim() || null,
|
||||
website: website.trim() || null,
|
||||
icon_url: iconUrl.trim() || null,
|
||||
max_pending_requests: maxPending,
|
||||
};
|
||||
const saved = editing
|
||||
? await agentsApi.update(agent!.id, payload)
|
||||
: await agentsApi.create(payload);
|
||||
toast.success(editing ? "Agent updated" : "Agent created");
|
||||
onSaved(saved, !editing);
|
||||
onClose();
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Failed");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
title={editing ? "Edit agent" : "New agent"}
|
||||
footer={
|
||||
<>
|
||||
<Button variant="ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={submit} loading={loading}>
|
||||
{editing ? "Save" : "Create agent"}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<Input label="Name" value={name} onChange={(e) => setName(e.target.value)} autoFocus />
|
||||
<Textarea
|
||||
label="Description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
rows={2}
|
||||
/>
|
||||
<Input
|
||||
label="Website (optional)"
|
||||
value={website}
|
||||
onChange={(e) => setWebsite(e.target.value)}
|
||||
placeholder="https://…"
|
||||
/>
|
||||
<Input
|
||||
label="Icon URL (optional)"
|
||||
value={iconUrl}
|
||||
onChange={(e) => setIconUrl(e.target.value)}
|
||||
placeholder="https://…/icon.png"
|
||||
hint="Verified on save. Must be a JPG, PNG, or GIF under 1 MB."
|
||||
/>
|
||||
<div>
|
||||
<div className="mb-1 flex items-center justify-between text-sm">
|
||||
<span className="text-muted">Max pending requests</span>
|
||||
<span className="font-medium text-text">{maxPending}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={10}
|
||||
value={maxPending}
|
||||
onChange={(e) => setMaxPending(Number(e.target.value))}
|
||||
className="w-full accent-[var(--color-primary)]"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-faint">
|
||||
How many requests this agent may have awaiting review at once (1–10).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Connect (config + key) ─────────────────────────────────────────────────────────
|
||||
|
||||
type Tab = "openclaw" | "mcp" | "rest";
|
||||
|
||||
export function ConnectModal({
|
||||
open,
|
||||
onClose,
|
||||
agent,
|
||||
revealedKey,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
agent: Agent;
|
||||
revealedKey?: string | null;
|
||||
}) {
|
||||
const [tab, setTab] = useState<Tab>("openclaw");
|
||||
const origin = window.location.origin;
|
||||
const key = revealedKey ?? "YOUR_API_KEY";
|
||||
const hasKey = !!revealedKey;
|
||||
|
||||
const openclawConfig = JSON.stringify(
|
||||
{
|
||||
mcp: {
|
||||
servers: {
|
||||
patchpass: {
|
||||
transport: "streamable-http",
|
||||
url: `${origin}/mcp`,
|
||||
headers: { "x-api-key": key },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
|
||||
const mcpConfig = JSON.stringify(
|
||||
{
|
||||
mcpServers: {
|
||||
patchpass: {
|
||||
type: "streamable-http",
|
||||
url: `${origin}/mcp`,
|
||||
headers: { "x-api-key": key },
|
||||
},
|
||||
},
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
|
||||
const restExample = `# Submit a change request
|
||||
curl -X POST ${origin}/v1/change-requests \\
|
||||
-H "x-api-key: ${key}" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{
|
||||
"title": "Update deployment",
|
||||
"changes": [
|
||||
{ "type": "config", "path": "timeout", "before": 30, "after": 60, "content_type": "integer" }
|
||||
]
|
||||
}'
|
||||
|
||||
# Poll for the decision
|
||||
curl ${origin}/v1/change-requests/{request_id} -H "x-api-key: ${key}"
|
||||
|
||||
# Consume the approval before proceeding
|
||||
curl -X POST ${origin}/v1/change-requests/{request_id}/consume -H "x-api-key: ${key}"`;
|
||||
|
||||
const tabs: { id: Tab; label: string }[] = [
|
||||
{ id: "openclaw", label: "OpenClaw" },
|
||||
{ id: "mcp", label: "MCP (generic)" },
|
||||
{ id: "rest", label: "REST API" },
|
||||
];
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose} title={`Connect "${agent.name}"`} wide footer={<Button onClick={onClose}>Done</Button>}>
|
||||
<div className="space-y-4">
|
||||
{hasKey ? (
|
||||
<div className="rounded-lg border border-pending/40 bg-pending/10 p-3">
|
||||
<p className="text-xs font-semibold text-pending">Save this API key now — it won't be shown again.</p>
|
||||
<div className="mt-2">
|
||||
<CodeBlock code={revealedKey!} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted">
|
||||
The API key is only shown once, at creation or after regeneration. Configs below use a
|
||||
placeholder — substitute your saved key.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex gap-1 border-b border-border">
|
||||
{tabs.map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => setTab(t.id)}
|
||||
className={`px-3 py-2 text-sm font-medium transition ${
|
||||
tab === t.id ? "border-b-2 border-primary text-text" : "text-muted hover:text-text"
|
||||
}`}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{tab === "openclaw" && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-muted">
|
||||
Add this to <code className="text-text">~/.openclaw/openclaw.json</code>, then tell your
|
||||
agent to request approval via PatchPass before taking action.
|
||||
</p>
|
||||
<CodeBlock code={openclawConfig} language="json" />
|
||||
</div>
|
||||
)}
|
||||
{tab === "mcp" && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-muted">
|
||||
Generic streamable-HTTP MCP client config (Claude Desktop, Cursor, etc.).
|
||||
</p>
|
||||
<CodeBlock code={mcpConfig} language="json" />
|
||||
</div>
|
||||
)}
|
||||
{tab === "rest" && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-muted">Or call the REST API directly with the agent key.</p>
|
||||
<CodeBlock code={restExample} language="bash" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="rounded-lg border border-border bg-surface-raised/40 p-3 text-xs text-muted">
|
||||
<p className="mb-1 font-semibold text-text">Recommended agent instruction</p>
|
||||
Before taking any consequential action (deploys, config changes, code edits), call
|
||||
<code className="mx-1 text-text">create_request</code>, wait for approval, then
|
||||
<code className="mx-1 text-text">consume_approval</code> before proceeding.
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user