Files
PaperClipAI/packages/plugins/plugin-triage/tests/screenshots/index.html
T
DottaandPaperclip 7ce084eca9 Add Paperclip Triage workbench UI
Phase 6 of PAP-9815. Builds the user-facing triage workbench on top of
the Phase 2-5 worker/data plumbing:

- Queue route sidebar with queue list, item counts, and queue-scoped
  section links (Items / Workflow / Guidance / Transition actions).
- Queue list home page with create, archive, and open actions.
- Per-queue overview that groups items by workflow state with linked
  work-issue badges.
- Two-column item workbench: slim assistant chat on the center/left
  pinned to the current item, item document/properties editor on the
  right. Direct edits and chat-sent messages both target the same item.
- Mobile-friendly tab switch between Chat and Document under 900px wide.
- Guidance side panel + reflection diff with accept / reject / revise.
- Folder-style guidance editor for guidance.md plus extra path-keyed
  docs (style.md, examples.md, rubric.md, ...).
- Default workflow view and constrained create_or_update_issue
  transition action editor with variable palette and template fields.
- Settings page keeps the managed resource reconcile surface.

Adds 9 render-level Vitest specs in jsdom that exercise the queue list,
queue overview, two-column workbench, transition editor, settings, and
the reflection diff. Also adds a Playwright+esbuild screenshot harness
under tests/screenshots that captures 9 desktop + 9 mobile shots into
packages/plugins/plugin-triage/screenshots.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-05-19 16:27:02 -05:00

53 lines
1.4 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Triage UI Harness</title>
<style>
:root {
--background: #ffffff;
--foreground: #18181b;
--card: #ffffff;
--primary: #18181b;
--primary-foreground: #ffffff;
--secondary: #f4f4f5;
--secondary-foreground: #18181b;
--muted: #f4f4f5;
--muted-foreground: #71717a;
--accent: #f4f4f5;
--accent-foreground: #18181b;
--border: oklch(0.86 0 0);
--destructive: oklch(0.637 0.237 25.331);
}
html, body, #root {
margin: 0;
padding: 0;
height: 100%;
background: var(--background);
color: var(--foreground);
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
}
/* Two-column layout shell to mimic the production page chrome. */
.triage-shell {
display: grid;
grid-template-columns: 240px 1fr;
height: 100%;
}
.triage-shell-sidebar {
border-right: 1px solid var(--border);
background: var(--background);
overflow: hidden;
}
.triage-shell-main {
overflow: auto;
background: var(--background);
}
</style>
</head>
<body>
<div id="root"></div>
<script type="module" src="/bundle.js"></script>
</body>
</html>