Dotta
4142559c37
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies through company-scoped issues, comments, approvals, and execution workspaces. > - Operators need the Inbox to show not only active work, but also blocked work that may need human or agent attention. > - The existing inbox experience did not have a dedicated blocked-work surface, so blocked tasks were harder to triage and resume deliberately. > - Backend consumers also needed a compact attention signal that distinguishes actionable blockers from covered or waiting blocker states. > - This pull request adds a Blocked Inbox tab backed by issue blocker-attention metadata, shared validators, and UI helpers. > - The benefit is a clearer triage path for stalled or blocked Paperclip work without exposing external wait internals in the operator-facing UI. ## What Changed - Added shared issue blocker-attention types, validators, and exports for the API/UI contract. - Added backend blocker-attention computation and issue route support for blocked inbox data. - Added the Blocked Inbox tab, blocked reason chips, filtering/search UI, responsive layouts, and Storybook stories. - Updated inbox helpers and page behavior so toolbar controls only appear where they apply. - Added coverage for shared validators, server blocker-attention behavior, blocked inbox UI helpers/components, and the Inbox page. - Added a screenshot helper script for the blocked inbox Storybook stories. - Addressed Greptile feedback by making urgency sorting deterministic for null stop times, avoiding full blocked-inbox list enrichment for counts, and hardening the screenshot helper. ## Verification - Rebased the branch cleanly onto `public-gh/master`. - Confirmed the diff does not include `pnpm-lock.yaml`. - Confirmed the diff does not include database migration files. - Ran `pnpm exec vitest run packages/shared/src/validators/issue.test.ts server/src/__tests__/issue-blocker-attention.test.ts ui/src/components/BlockedInboxView.test.tsx ui/src/components/BlockedReasonChip.test.tsx ui/src/lib/blockedInbox.test.ts ui/src/lib/inbox.test.ts ui/src/pages/Inbox.test.tsx`. - Ran `pnpm --filter @paperclipai/shared typecheck && pnpm --filter @paperclipai/server typecheck && pnpm --filter @paperclipai/ui typecheck`. - Checked `ROADMAP.md`; this is scoped inbox/operator triage work and does not duplicate a listed roadmap feature. - Greptile Review is green on the latest head and all four Greptile review threads are resolved. - GitHub PR checks are green on the latest head: policy, security/snyk, e2e, verify, Canary Dry Run, Greptile Review, and serialized server suites 1/4 through 4/4. ## Risks - Medium review surface because this touches the shared issue contract, server issue services, and the Inbox UI together. - Blocker-attention classification may need product tuning after operators use it on real blocked queues. - UI screenshots were not attached in this PR-opening pass; the branch includes `scripts/screenshot-blocked-inbox.mjs` and Storybook stories for visual capture. > 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-based coding agent with shell, git, GitHub CLI, GitHub connector, and Paperclip API tool use. Reasoning mode: medium. Context window: not exposed by the runtime. ## 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 run tests locally and they pass - [x] I have added or updated tests where applicable - [ ] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
96 lines
3.7 KiB
JavaScript
96 lines
3.7 KiB
JavaScript
#!/usr/bin/env node
|
|
// Capture screenshots of the Blocked Inbox storybook stories.
|
|
// Usage: node scripts/screenshot-blocked-inbox.mjs <storybook-static-dir> <output-dir>
|
|
|
|
import http from "node:http";
|
|
import path from "node:path";
|
|
import fs from "node:fs/promises";
|
|
import { chromium } from "@playwright/test";
|
|
|
|
async function main() {
|
|
const [, , staticDir, outDir] = process.argv;
|
|
if (!staticDir || !outDir) {
|
|
console.error("usage: node scripts/screenshot-blocked-inbox.mjs <storybook-static-dir> <output-dir>");
|
|
process.exit(1);
|
|
}
|
|
await fs.mkdir(outDir, { recursive: true });
|
|
const absStaticDir = path.resolve(staticDir);
|
|
|
|
const server = http.createServer(async (req, res) => {
|
|
try {
|
|
let urlPath = decodeURIComponent((req.url || "/").split("?")[0]);
|
|
if (urlPath.endsWith("/")) urlPath += "iframe.html";
|
|
const filePath = path.resolve(absStaticDir, `.${urlPath}`);
|
|
if (!filePath.startsWith(absStaticDir + path.sep) && filePath !== absStaticDir) {
|
|
res.writeHead(403);
|
|
res.end("Forbidden");
|
|
return;
|
|
}
|
|
const buf = await fs.readFile(filePath);
|
|
const ext = path.extname(filePath).toLowerCase();
|
|
const mime = {
|
|
".html": "text/html; charset=utf-8",
|
|
".js": "application/javascript",
|
|
".css": "text/css",
|
|
".json": "application/json",
|
|
".svg": "image/svg+xml",
|
|
".png": "image/png",
|
|
".woff": "font/woff",
|
|
".woff2": "font/woff2",
|
|
".map": "application/json",
|
|
}[ext] || "application/octet-stream";
|
|
res.writeHead(200, { "content-type": mime });
|
|
res.end(buf);
|
|
} catch (err) {
|
|
res.writeHead(404);
|
|
res.end(String(err));
|
|
}
|
|
});
|
|
|
|
await new Promise((resolve) => server.listen(0, "127.0.0.1", resolve));
|
|
const port = server.address().port;
|
|
const baseUrl = `http://127.0.0.1:${port}/iframe.html`;
|
|
|
|
const browser = await chromium.launch();
|
|
try {
|
|
const stories = [
|
|
{ id: "product-inbox-blocked-tab--desktop-loaded", file: "01-desktop-loaded.png", width: 1440, height: 1100, dark: false },
|
|
{ id: "product-inbox-blocked-tab--desktop-loaded", file: "02-desktop-loaded-dark.png", width: 1440, height: 1100, dark: true },
|
|
{ id: "product-inbox-blocked-tab--desktop-with-search", file: "03-desktop-with-search.png", width: 1440, height: 800, dark: false },
|
|
{ id: "product-inbox-blocked-tab--mobile-layout", file: "04-mobile-layout.png", width: 390, height: 1100, dark: false },
|
|
{ id: "product-inbox-blocked-tab--reason-chip-catalog", file: "05-reason-chip-catalog.png", width: 900, height: 600, dark: false },
|
|
{ id: "product-inbox-blocked-tab--empty-state", file: "06-empty-state.png", width: 900, height: 500, dark: false },
|
|
];
|
|
|
|
for (const story of stories) {
|
|
const ctx = await browser.newContext({
|
|
viewport: { width: story.width, height: story.height },
|
|
deviceScaleFactor: 2,
|
|
colorScheme: story.dark ? "dark" : "light",
|
|
});
|
|
const page = await ctx.newPage();
|
|
const url = `${baseUrl}?id=${story.id}&viewMode=story`;
|
|
await page.goto(url, { waitUntil: "networkidle" });
|
|
// Force light/dark class on <html> for tailwind dark mode tokens
|
|
await page.evaluate((dark) => {
|
|
const html = document.documentElement;
|
|
html.classList.toggle("dark", dark);
|
|
html.style.colorScheme = dark ? "dark" : "light";
|
|
}, story.dark);
|
|
await page.waitForTimeout(500);
|
|
const out = path.join(outDir, story.file);
|
|
await page.screenshot({ path: out, fullPage: true });
|
|
console.log("wrote", out);
|
|
await ctx.close();
|
|
}
|
|
} finally {
|
|
await browser.close();
|
|
server.close();
|
|
}
|
|
}
|
|
|
|
main().catch((err) => {
|
|
console.error(err);
|
|
process.exit(1);
|
|
});
|