approve & commit flow + adaptive polling in Agent mode
- Wire Approve & commit button: shows commit message input, calls POST /api/.../sessions/[id]/approve which asks agent runner to git commit + push, then marks session as approved in DB - Adaptive polling: 500ms while session running, 5s when idle — output feels near-real-time without hammering the API - Auto-refresh session list when a session completes - Open in Theia links to theia.vibnai.com (escape hatch for manual edits) Made-with: Cursor
This commit is contained in:
@@ -274,6 +274,10 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
const [activeSession, setActiveSession] = useState<AgentSession | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [loadingSessions, setLoadingSessions] = useState(true);
|
||||
const [approving, setApproving] = useState(false);
|
||||
const [approveMsg, setApproveMsg] = useState("");
|
||||
const [showApproveInput, setShowApproveInput] = useState(false);
|
||||
const [approveResult, setApproveResult] = useState<string | null>(null);
|
||||
const outputRef = useCallback((el: HTMLDivElement | null) => {
|
||||
if (el) el.scrollTop = el.scrollHeight;
|
||||
}, []);
|
||||
@@ -288,20 +292,32 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
.catch(() => setLoadingSessions(false));
|
||||
}, [projectId, appName]);
|
||||
|
||||
// Poll active session
|
||||
// Adaptive polling — 500ms while running, 5s when idle
|
||||
useEffect(() => {
|
||||
if (!activeSessionId) return;
|
||||
let cancelled = false;
|
||||
const poll = async () => {
|
||||
const r = await fetch(`/api/projects/${projectId}/agent/sessions/${activeSessionId}`);
|
||||
const d = await r.json();
|
||||
if (d.session) setActiveSession(d.session);
|
||||
try {
|
||||
const r = await fetch(`/api/projects/${projectId}/agent/sessions/${activeSessionId}`);
|
||||
const d = await r.json();
|
||||
if (!cancelled && d.session) {
|
||||
setActiveSession(d.session);
|
||||
// Refresh session list so status dots update in sidebar
|
||||
if (!["running", "pending"].includes(d.session.status)) {
|
||||
fetch(`/api/projects/${projectId}/agent/sessions`)
|
||||
.then(r2 => r2.json())
|
||||
.then(d2 => { if (!cancelled) setSessions(d2.sessions ?? []); })
|
||||
.catch(() => {});
|
||||
}
|
||||
}
|
||||
} catch { /* network hiccup — ignore */ }
|
||||
};
|
||||
|
||||
poll();
|
||||
const id = setInterval(() => {
|
||||
const interval = setInterval(() => {
|
||||
poll();
|
||||
if (activeSession?.status && !["running", "pending"].includes(activeSession.status)) clearInterval(id);
|
||||
}, 2000);
|
||||
return () => clearInterval(id);
|
||||
}, ["running", "pending"].includes(activeSession?.status ?? "") ? 500 : 5000);
|
||||
return () => { cancelled = true; clearInterval(interval); };
|
||||
}, [activeSessionId, projectId, activeSession?.status]);
|
||||
|
||||
const handleRun = async () => {
|
||||
@@ -330,6 +346,36 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
setActiveSession(prev => prev ? { ...prev, status: "stopped" } : null);
|
||||
};
|
||||
|
||||
const handleApprove = async () => {
|
||||
if (!activeSessionId || !approveMsg.trim()) return;
|
||||
setApproving(true);
|
||||
setApproveResult(null);
|
||||
try {
|
||||
const r = await fetch(`/api/projects/${projectId}/agent/sessions/${activeSessionId}/approve`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ commitMessage: approveMsg.trim() }),
|
||||
});
|
||||
const d = await r.json() as { ok?: boolean; committed?: boolean; deployed?: boolean; message?: string; error?: string };
|
||||
if (d.ok) {
|
||||
setApproveResult(d.deployed
|
||||
? `✓ Committed & deployment triggered — ${d.message}`
|
||||
: `✓ Committed — ${d.message}`);
|
||||
setShowApproveInput(false);
|
||||
setApproveMsg("");
|
||||
// Refresh session
|
||||
const s = await fetch(`/api/projects/${projectId}/agent/sessions/${activeSessionId}`).then(r2 => r2.json());
|
||||
if (s.session) setActiveSession(s.session);
|
||||
} else {
|
||||
setApproveResult(`✗ ${d.error ?? "Failed to commit"}`);
|
||||
}
|
||||
} catch (e) {
|
||||
setApproveResult("✗ Network error — please try again");
|
||||
} finally {
|
||||
setApproving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!appName) {
|
||||
return (
|
||||
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 10, padding: 40, textAlign: "center" }}>
|
||||
@@ -426,13 +472,70 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
))}
|
||||
</div>
|
||||
{activeSession.status === "done" && (
|
||||
<div style={{ marginTop: 12, display: "flex", gap: 8 }}>
|
||||
<button style={{ padding: "7px 16px", background: "#1a1a1a", color: "#fff", border: "none", borderRadius: 7, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", fontFamily: "Outfit, sans-serif" }}>
|
||||
Approve & commit
|
||||
</button>
|
||||
<button style={{ padding: "7px 16px", background: "#f0ece4", color: "#1a1a1a", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", cursor: "pointer", fontFamily: "Outfit, sans-serif" }}>
|
||||
Open in Theia →
|
||||
</button>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
{approveResult && (
|
||||
<div style={{
|
||||
marginBottom: 10, padding: "8px 12px", borderRadius: 6, fontSize: "0.74rem",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
background: approveResult.startsWith("✓") ? "#f0fdf4" : "#fef2f2",
|
||||
color: approveResult.startsWith("✓") ? "#166534" : "#991b1b",
|
||||
border: `1px solid ${approveResult.startsWith("✓") ? "#bbf7d0" : "#fecaca"}`,
|
||||
}}>
|
||||
{approveResult}
|
||||
</div>
|
||||
)}
|
||||
{showApproveInput ? (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<input
|
||||
autoFocus
|
||||
value={approveMsg}
|
||||
onChange={e => setApproveMsg(e.target.value)}
|
||||
onKeyDown={e => { if (e.key === "Enter") handleApprove(); if (e.key === "Escape") setShowApproveInput(false); }}
|
||||
placeholder="Commit message…"
|
||||
style={{
|
||||
width: "100%", padding: "8px 11px", border: "1px solid #e8e4dc",
|
||||
borderRadius: 6, fontSize: "0.78rem", fontFamily: "Outfit, sans-serif",
|
||||
outline: "none", background: "#faf8f5", boxSizing: "border-box",
|
||||
}}
|
||||
/>
|
||||
<div style={{ display: "flex", gap: 6 }}>
|
||||
<button
|
||||
onClick={handleApprove}
|
||||
disabled={approving || !approveMsg.trim()}
|
||||
style={{
|
||||
padding: "7px 16px", background: approveMsg.trim() ? "#1a1a1a" : "#e8e4dc",
|
||||
color: approveMsg.trim() ? "#fff" : "#a09a90", border: "none", borderRadius: 7,
|
||||
fontSize: "0.75rem", fontWeight: 600, cursor: approveMsg.trim() ? "pointer" : "default",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
}}
|
||||
>
|
||||
{approving ? "Committing…" : "Commit & push"}
|
||||
</button>
|
||||
<button onClick={() => setShowApproveInput(false)} style={{ padding: "7px 12px", background: "transparent", color: "#a09a90", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", cursor: "pointer", fontFamily: "Outfit, sans-serif" }}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ fontSize: "0.65rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>
|
||||
Enter to commit · Esc to cancel · Coolify will auto-deploy after push
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
<button
|
||||
onClick={() => { setShowApproveInput(true); setApproveMsg(`agent: ${activeSession.task.slice(0, 60)}`); }}
|
||||
style={{ padding: "7px 16px", background: "#1a1a1a", color: "#fff", border: "none", borderRadius: 7, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", fontFamily: "Outfit, sans-serif" }}
|
||||
>
|
||||
Approve & commit
|
||||
</button>
|
||||
<a
|
||||
href="https://theia.vibnai.com"
|
||||
target="_blank" rel="noreferrer"
|
||||
style={{ padding: "7px 16px", background: "#f0ece4", color: "#1a1a1a", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", cursor: "pointer", fontFamily: "Outfit, sans-serif", textDecoration: "none", display: "inline-flex", alignItems: "center" }}
|
||||
>
|
||||
Open in Theia →
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user