Files
PaperClipAI/server/src/services/dashboard.ts
T
b13eb5b2b5 Skill Studio: three-pane skill IDE with sandboxed test runs (#9241)
## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work.
> - The Skills Manager gives operators a reusable skill layer, but
iteration still required manual edits, ad hoc prompts, and indirect run
inspection.
> - Skill authors need a focused workflow for editing skill files,
saving representative test inputs, and running those inputs through an
agent without exposing harness tasks as normal company work.
> - The backend therefore needs durable test inputs, reusable run
templates, hidden harness issues, scoped run execution, retention
metadata, and read-containment rules around hidden work.
> - The frontend needs a three-pane Studio that keeps skill files, saved
inputs/templates, and run output/history visible together while
preserving the existing design system and token rules.
> - This pull request ships that Skill Studio surface end to end:
database migrations, shared contracts, server APIs/services, hidden
harness execution behavior, UI routes/components, and focused tests.
> - The benefit is faster and safer skill iteration, with inspectable
outputs and fewer ways for internal harness work to leak into normal
task lists, costs, or adjacent read APIs.

## Linked Issues or Issue Description

No public GitHub issue exists for this feature. Feature request summary:

- Problem: Skill authors need to edit and test company skills in one
place instead of switching between the skill detail page, task creation,
run output, and manual prompt history.
- Proposed solution: Add a Skill Studio workbench with saved inputs,
reusable templates, hidden sandboxed test runs, live run status, output
inspection, run history, rerun/delete controls, and frontmatter-aware
editing.
- Expected users: Paperclip operators and agent-company maintainers who
create, fork, import, and tune skills.
- Related public PRs: Supersedes #9205, which was replaced so the public
PR branch name follows contributor policy.
- Duplicate search: searched public GitHub issues and PRs for "Skill
Studio"; no other active public issue or PR directly covers this
feature.

## What Changed

- Added database migrations for Skill Studio test inputs, test runs,
test run retention, and reusable run templates.
- Added shared Skill Studio types, validators, route helpers,
frontmatter utilities, and status handling.
- Added server services and routes for saved inputs, test runs,
templates, reruns, terminal-run deletion, hidden harness issue
execution, and run-detail hydration.
- Strengthened hidden-issue read containment across issue-adjacent
routes and cost rollups used by skill test harness work.
- Added the Skill Studio UI with skill file editing, frontmatter
editing, saved inputs, templates, run creation/cancel/rerun/delete
flows, output rendering, history, route support, and responsive pane
behavior.
- Added focused backend, shared, and UI tests for the new APIs, routing
logic, editor/run behavior, hidden-issue containment, and migration
safety.
- Rebased onto current `master`, removed the generated lockfile diff
from the PR, and verified no workflow files are changed.

## Verification

- [x] `pnpm --filter @paperclipai/db check:migrations`
- [x] `pnpm check:token-gates`
- [x] `pnpm exec vitest run
server/src/__tests__/company-skills-service.test.ts
server/src/__tests__/company-skills-routes.test.ts
server/src/__tests__/company-skill-test-runs-service.test.ts
ui/src/lib/skill-studio.test.ts ui/src/pages/SkillStudio.test.tsx` — 5
files, 132 tests passed
- [x] Greptile review on the latest PR head
- [x] GitHub PR checks on the latest PR head

## Risks

- Medium risk because this is a broad feature touching database schema,
server orchestration, issue visibility, and a large UI surface.
- Hidden harness issue containment is security-sensitive; this PR
includes regression coverage for adjacent read paths and cost rollups.
- The new migrations are additive and use idempotent guards where
applicable, but deployed databases that previously tested draft
migration numbers should still be checked carefully.
- The UI depends on a new resizable panels package in `ui/package.json`;
the lockfile is intentionally left to repository automation.

> For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and
discuss it in `#dev` before opening the PR. Feature PRs that overlap
with planned core work may need to be redirected — check the roadmap
first. See `CONTRIBUTING.md`.

## Model Used

OpenAI Codex, GPT-5 coding agent with shell, git, and GitHub CLI tool
use. Earlier feature commits include assistance from other Paperclip
coding agents; this PR preparation, rebase, cleanup commit, and PR body
were completed by OpenAI Codex in a Paperclip worktree.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have searched GitHub for duplicate or related PRs and linked
them above
- [x] I have either (a) linked existing issues with `Fixes: #` / `Closes
#` / `Refs #` OR (b) described the issue in-PR following the relevant
issue template
- [x] I have not referenced internal/instance-local Paperclip issues or
links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip`
URLs)
- [x] My branch name describes the change (e.g. `docs/...`, `fix/...`)
and contains no internal Paperclip ticket id or instance-derived details
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] All Paperclip CI gates are green
- [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups
- [x] I will address all Greptile and reviewer comments before
requesting merge

---------

Co-authored-by: Paperclip <noreply@paperclip.ing>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-09 13:08:56 -05:00

208 lines
7.5 KiB
TypeScript

import { and, eq, gte, sql } from "drizzle-orm";
import type { Db } from "@paperclipai/db";
import { agents, approvals, companies, costEvents, heartbeatRuns, issues } from "@paperclipai/db";
import { notFound } from "../errors.js";
import { budgetService } from "./budgets.js";
import { visibleIssueCondition } from "./issue-visibility.js";
const DASHBOARD_RUN_ACTIVITY_DAYS = 14;
function formatUtcDateKey(date: Date): string {
return date.toISOString().slice(0, 10);
}
export function getUtcMonthStart(date: Date): Date {
return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));
}
function getRecentUtcDateKeys(now: Date, days: number): string[] {
const todayUtc = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
return Array.from({ length: days }, (_, index) => {
const dayOffset = index - (days - 1);
return formatUtcDateKey(new Date(todayUtc + dayOffset * 24 * 60 * 60 * 1000));
});
}
export function dashboardService(db: Db) {
const budgets = budgetService(db);
return {
summary: async (companyId: string) => {
const company = await db
.select()
.from(companies)
.where(eq(companies.id, companyId))
.then((rows) => rows[0] ?? null);
if (!company) throw notFound("Company not found");
const agentRows = await db
.select({ status: agents.status, count: sql<number>`count(*)` })
.from(agents)
.where(eq(agents.companyId, companyId))
.groupBy(agents.status);
const taskRows = await db
.select({ status: issues.status, count: sql<number>`count(*)` })
.from(issues)
.where(and(eq(issues.companyId, companyId), visibleIssueCondition()))
.groupBy(issues.status);
const pendingApprovals = await db
.select({ count: sql<number>`count(*)` })
.from(approvals)
.where(and(eq(approvals.companyId, companyId), eq(approvals.status, "pending")))
.then((rows) => Number(rows[0]?.count ?? 0));
const agentCounts: Record<string, number> = {
active: 0,
running: 0,
paused: 0,
error: 0,
};
for (const row of agentRows) {
const count = Number(row.count);
// "idle" agents are operational — count them as active
const bucket = row.status === "idle" ? "active" : row.status;
agentCounts[bucket] = (agentCounts[bucket] ?? 0) + count;
}
const taskCounts: Record<string, number> = {
open: 0,
inProgress: 0,
blocked: 0,
done: 0,
};
for (const row of taskRows) {
const count = Number(row.count);
if (row.status === "in_progress") taskCounts.inProgress += count;
if (row.status === "blocked") taskCounts.blocked += count;
if (row.status === "done") taskCounts.done += count;
if (row.status !== "done" && row.status !== "cancelled") taskCounts.open += count;
}
const now = new Date();
const monthStart = getUtcMonthStart(now);
const runActivityDays = getRecentUtcDateKeys(now, DASHBOARD_RUN_ACTIVITY_DAYS);
const runActivityStart = new Date(`${runActivityDays[0]}T00:00:00.000Z`);
const [{ monthSpend }] = await db
.select({
monthSpend: sql<number>`coalesce(sum(${costEvents.costCents}), 0)::double precision`,
})
.from(costEvents)
.where(
and(
eq(costEvents.companyId, companyId),
gte(costEvents.occurredAt, monthStart),
),
);
const monthSpendCents = Number(monthSpend);
// Per-day run breakdown. A run is "recovered" when its retry chain later
// succeeded (recovered_runs = all ancestors of a succeeded retry), so a
// restart-killed run whose retry succeeded is pulled out of the headline
// failed count. error_code is carried through so a failure spike can be
// attributed to an error class (e.g. process_lost, provider_quota).
const runActivityRows = (await db.execute(sql`
WITH RECURSIVE recovered_runs(id) AS (
SELECT parent.id
FROM ${heartbeatRuns} AS child
JOIN ${heartbeatRuns} AS parent ON parent.id = child.retry_of_run_id
WHERE child.company_id = ${companyId}
AND child.status = 'succeeded'
UNION
SELECT parent.id
FROM recovered_runs rr
JOIN ${heartbeatRuns} AS child ON child.id = rr.id
JOIN ${heartbeatRuns} AS parent ON parent.id = child.retry_of_run_id
)
SELECT
to_char(run.created_at AT TIME ZONE 'UTC', 'YYYY-MM-DD') AS date,
run.status AS status,
run.error_code AS error_code,
(run.id IN (SELECT id FROM recovered_runs)) AS recovered,
count(*)::double precision AS count
FROM ${heartbeatRuns} AS run
WHERE run.company_id = ${companyId}
AND run.created_at >= ${runActivityStart.toISOString()}::timestamptz
GROUP BY date, run.status, run.error_code, recovered
`)) as unknown as Iterable<{
date: string;
status: string;
error_code: string | null;
recovered: boolean | string;
count: number | string;
}>;
const runActivity = new Map(
runActivityDays.map((date) => [
date,
{
date,
succeeded: 0,
failed: 0,
recovered: 0,
other: 0,
total: 0,
failedByErrorCode: {} as Record<string, number>,
},
]),
);
for (const row of runActivityRows) {
const bucket = runActivity.get(String(row.date));
if (!bucket) continue;
const count = Number(row.count);
const status = String(row.status);
// Postgres booleans can arrive as JS boolean or "t"/"true" depending on driver.
const recovered = row.recovered === true || row.recovered === "t" || row.recovered === "true";
if (status === "succeeded") {
bucket.succeeded += count;
} else if (status === "failed" || status === "timed_out") {
if (recovered) {
bucket.recovered += count;
} else {
bucket.failed += count;
const code =
typeof row.error_code === "string" && row.error_code.length > 0
? row.error_code
: "unknown";
bucket.failedByErrorCode[code] = (bucket.failedByErrorCode[code] ?? 0) + count;
}
} else {
bucket.other += count;
}
bucket.total += count;
}
const utilization =
company.budgetMonthlyCents > 0
? (monthSpendCents / company.budgetMonthlyCents) * 100
: 0;
const budgetOverview = await budgets.overview(companyId);
return {
companyId,
agents: {
active: agentCounts.active,
running: agentCounts.running,
paused: agentCounts.paused,
error: agentCounts.error,
},
tasks: taskCounts,
costs: {
monthSpendCents,
monthBudgetCents: company.budgetMonthlyCents,
monthUtilizationPercent: Number(utilization.toFixed(2)),
},
pendingApprovals,
budgets: {
activeIncidents: budgetOverview.activeIncidents.length,
pendingApprovals: budgetOverview.pendingApprovalCount,
pausedAgents: budgetOverview.pausedAgentCount,
pausedProjects: budgetOverview.pausedProjectCount,
},
runActivity: Array.from(runActivity.values()),
};
},
};
}