Mike/paperclip-plugins
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0

Browse Source
This commit is contained in:
Michael Freno
2026-03-15 20:08:10 -04:00
parent 33768b748c
commit 55a8c9432e
26 changed files with 3449 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
plugin-log-viewer/src/manifest.ts Normal file
View File

@@ -0,0 +1,53 @@
import type { PaperclipPluginManifestV1 } from "@paperclipai/plugin-sdk";
const manifest: PaperclipPluginManifestV1 = {
id: "paperclipai.plugin-log-viewer",
apiVersion: 1,
version: "0.1.0",
displayName: "Log Viewer",
description: "Monitor and view agent run logs and activity in real-time",
author: "FrenoCorp",
categories: ["automation", "ui"],
capabilities: [
"events.subscribe",
"plugin.state.read",
"plugin.state.write",
"activity.read"
],
entrypoints: {
worker: "./dist/worker.js",
ui: "./dist/ui"
},
ui: {
slots: [
{
type: "dashboardWidget",
id: "log-viewer-widget",
displayName: "Log Activity",
exportName: "DashboardWidget"
},
{
type: "page",
id: "logs",
displayName: "Log Viewer",
exportName: "LogsPage"
}
],
launchers: [
{
id: "open-logs",
displayName: "View Logs",
placementZone: "globalToolbarButton",
action: {
type: "navigate",
target: "/plugins/log-viewer"
},
render: {
environment: "hostRoute"
}
}
]
}
};
export default manifest;

187
plugin-log-viewer/src/ui/index.tsx Normal file
View File

@@ -0,0 +1,187 @@
import { usePluginData, usePluginAction, type PluginWidgetProps, type PluginPageProps } from "@paperclipai/plugin-sdk/ui";
interface LogEntry {
id: string;
eventType: string;
entityId: string;
entityType: string;
timestamp: string;
data?: Record<string, unknown>;
}
interface HealthData {
status: "ok" | "degraded" | "error";
checkedAt: string;
logCount: number;
}
export function DashboardWidget(_props: PluginWidgetProps) {
const { data, loading, error, refresh } = usePluginData<HealthData>("health");
const { data: logs } = usePluginData<LogEntry[]>("logs");
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
const recentLogs = logs?.slice(0, 3) ?? [];
return (
<div style={{ display: "grid", gap: "0.5rem", padding: "0.5rem" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<strong>Log Activity</strong>
<span style={{ fontSize: "0.75rem", color: "#666" }}>
{data?.logCount ?? 0} events
</span>
</div>
{recentLogs.length === 0 ? (
<div style={{ fontSize: "0.875rem", color: "#888" }}>No recent activity</div>
) : (
<div style={{ display: "grid", gap: "0.25rem" }}>
{recentLogs.map((log) => (
<div
key={log.id}
style={{
fontSize: "0.75rem",
padding: "0.25rem",
backgroundColor: "#f5f5f5",
borderRadius: "4px",
display: "grid",
gridTemplateColumns: "1fr auto",
gap: "0.5rem"
}}
>
<span style={{ fontWeight: 500 }}>{formatEventType(log.eventType)}</span>
<span style={{ color: "#888" }}>{formatTime(log.timestamp)}</span>
</div>
))}
</div>
)}
<button
onClick={() => void refresh()}
style={{
fontSize: "0.75rem",
padding: "0.25rem 0.5rem",
marginTop: "0.25rem"
}}
>
Refresh
</button>
</div>
);
}
export function LogsPage(_props: PluginPageProps) {
const { data: logs, loading, error, refresh } = usePluginData<LogEntry[]>("logs");
const clearLogs = usePluginAction("clear-logs");
const handleClear = async () => {
await clearLogs();
void refresh();
};
if (loading) return <div>Loading logs...</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<div style={{ padding: "1rem", maxWidth: "800px", margin: "0 auto" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1rem" }}>
<h1 style={{ fontSize: "1.5rem", fontWeight: 600 }}>Log Viewer</h1>
<div style={{ display: "flex", gap: "0.5rem" }}>
<button
onClick={() => void refresh()}
style={{
padding: "0.5rem 1rem",
backgroundColor: "#f5f5f5",
border: "1px solid #ddd",
borderRadius: "4px",
cursor: "pointer"
}}
>
Refresh
</button>
<button
onClick={() => void handleClear()}
style={{
padding: "0.5rem 1rem",
backgroundColor: "#fee",
border: "1px solid #fcc",
borderRadius: "4px",
cursor: "pointer",
color: "#c00"
}}
>
Clear Logs
</button>
</div>
</div>
<div style={{ display: "grid", gap: "0.5rem" }}>
{!logs || logs.length === 0 ? (
<div style={{ padding: "2rem", textAlign: "center", color: "#888" }}>
No log entries yet. Activity will appear here as events occur.
</div>
) : (
logs.map((log) => (
<div
key={log.id}
style={{
padding: "0.75rem",
backgroundColor: "#fff",
border: "1px solid #eee",
borderRadius: "6px",
display: "grid",
gridTemplateColumns: "auto 1fr auto",
gap: "1rem",
alignItems: "center"
}}
>
<span
style={{
padding: "0.25rem 0.5rem",
borderRadius: "4px",
fontSize: "0.75rem",
fontWeight: 500,
backgroundColor: getEventColor(log.eventType),
color: "#fff"
}}
>
{formatEventType(log.eventType)}
</span>
<div style={{ display: "grid", gap: "0.25rem" }}>
<div style={{ fontSize: "0.875rem", fontWeight: 500 }}>
{log.entityType}: {log.entityId.slice(0, 8)}...
</div>
{log.data?.companyId ? (
<div style={{ fontSize: "0.75rem", color: "#888" }}>
Company: {String(log.data.companyId as string).slice(0, 8)}...
</div>
) : null}
</div>
<span style={{ fontSize: "0.75rem", color: "#888" }}>
{formatTime(log.timestamp)}
</span>
</div>
))
)}
</div>
</div>
);
}
function formatEventType(eventType: string): string {
const parts = eventType.split(".");
return parts[parts.length - 1] ?? eventType;
}
function formatTime(timestamp: string): string {
const date = new Date(timestamp);
return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
}
function getEventColor(eventType: string): string {
if (eventType.includes("failed")) return "#c00";
if (eventType.includes("finished")) return "#4a4";
if (eventType.includes("started")) return "#48a";
if (eventType.includes("created")) return "#4a8";
if (eventType.includes("updated")) return "#888";
return "#666";
}

130
plugin-log-viewer/src/worker.ts Normal file
View File

@@ -0,0 +1,130 @@
import { definePlugin, runWorker } from "@paperclipai/plugin-sdk";
interface LogEntry {
id: string;
eventType: string;
entityId: string;
entityType: string;
timestamp: string;
data?: Record<string, unknown>;
}
const MAX_LOG_ENTRIES = 100;
const plugin = definePlugin({
async setup(ctx) {
const recentLogs: LogEntry[] = [];
async function addLogEntry(eventType: string, entityId: string, entityType: string, data?: Record<string, unknown>) {
const entry: LogEntry = {
id: `log_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
eventType,
entityId,
entityType,
timestamp: new Date().toISOString(),
data
};
recentLogs.unshift(entry);
if (recentLogs.length > MAX_LOG_ENTRIES) {
recentLogs.pop();
}
await ctx.state.set(
{ scopeKind: "instance", stateKey: "recent_logs" },
recentLogs
);
}
ctx.events.on("agent.run.started", async (event) => {
const runId = event.entityId ?? "unknown";
await addLogEntry("agent.run.started", runId, "run", {
companyId: event.companyId
});
ctx.logger.info("Agent run started", { runId });
});
ctx.events.on("agent.run.finished", async (event) => {
const runId = event.entityId ?? "unknown";
await addLogEntry("agent.run.finished", runId, "run", {
companyId: event.companyId
});
ctx.logger.info("Agent run finished", { runId });
});
ctx.events.on("agent.run.failed", async (event) => {
const runId = event.entityId ?? "unknown";
await addLogEntry("agent.run.failed", runId, "run", {
companyId: event.companyId
});
ctx.logger.info("Agent run failed", { runId });
});
ctx.events.on("issue.created", async (event) => {
const issueId = event.entityId ?? "unknown";
await addLogEntry("issue.created", issueId, "issue", {
companyId: event.companyId
});
ctx.logger.info("Issue created", { issueId });
});
ctx.events.on("issue.updated", async (event) => {
const issueId = event.entityId ?? "unknown";
await addLogEntry("issue.updated", issueId, "issue", {
companyId: event.companyId
});
ctx.logger.info("Issue updated", { issueId });
});
ctx.events.on("goal.created", async (event) => {
const goalId = event.entityId ?? "unknown";
await addLogEntry("goal.created", goalId, "goal", {
companyId: event.companyId
});
ctx.logger.info("Goal created", { goalId });
});
ctx.events.on("agent.created", async (event) => {
const agentId = event.entityId ?? "unknown";
await addLogEntry("agent.created", agentId, "agent", {
companyId: event.companyId
});
ctx.logger.info("Agent created", { agentId });
});
ctx.data.register("logs", async () => {
const stored = await ctx.state.get(
{ scopeKind: "instance", stateKey: "recent_logs" }
);
return (stored as LogEntry[] | null) ?? recentLogs;
});
ctx.data.register("health", async () => {
return {
status: "ok",
checkedAt: new Date().toISOString(),
logCount: recentLogs.length
};
});
ctx.actions.register("clear-logs", async () => {
recentLogs.length = 0;
await ctx.state.set(
{ scopeKind: "instance", stateKey: "recent_logs" },
[]
);
ctx.logger.info("Logs cleared");
return { success: true };
});
ctx.actions.register("ping", async () => {
ctx.logger.info("Ping action invoked");
return { pong: true, at: new Date().toISOString() };
});
},
async onHealth() {
return { status: "ok", message: "Plugin worker is running" };
}
});
export default plugin;
runWorker(plugin, import.meta.url);