[codex] UI and dev ops quality-of-life (#6384)

## Thinking Path

> - Paperclip operators spend most of their time scanning the board,
inbox, sidebar, and local dev status surfaces
> - Small UI and dev-ops frictions make repeated operator workflows feel
slower than they need to be
> - The working branch contained several independent quality-of-life
improvements mixed with larger cloud work
> - Grouping these smaller UI/dev-ops changes together keeps review
overhead reasonable without merging them into feature PRs
> - This pull request collects the operator-facing QoL polish into one
standalone branch
> - The benefit is a cleaner board navigation and local dev recovery
experience without depending on cloud upstream sync

## What Changed

- Relaxed forced 44px touch targets for small inline widgets.
- Fixed mobile mention menu scrolling and sidebar spacing on
touch/mobile layouts.
- Synced inbox hover state with j/k selection.
- Moved plugin sidebar entries into the Work section.
- Added manual dev-server restart action/banner behavior.
- Logged plugin bridge 502 causes for better diagnosis.

## Verification

- `pnpm install --frozen-lockfile --ignore-scripts`
- `pnpm --filter @paperclipai/plugin-sdk build`
- `pnpm exec vitest run ui/src/components/MarkdownEditor.test.tsx
ui/src/components/Sidebar.test.tsx
ui/src/components/SidebarProjects.test.tsx ui/src/pages/Inbox.test.tsx
ui/src/components/DevRestartBanner.test.tsx
server/src/__tests__/dev-server-status.test.ts
server/src/__tests__/health-dev-server-token.test.ts
server/src/__tests__/plugin-routes-authz.test.ts` initially failed only
because plugin SDK `dist` was not built in the fresh worktree.
- Rerun after build: `pnpm exec vitest run
server/src/__tests__/plugin-routes-authz.test.ts` passed.
- The remaining targeted UI/dev-server tests passed on the first
post-install run.

## Visual Evidence

- Sidebar layout and plugin Work section: ![Sidebar
desktop](https://raw.githubusercontent.com/paperclipai/paperclip/pap-9861-ui-dev-qol/docs/pr-screenshots/pr-6384/sidebar-desktop.png)
- Inbox/task row selection and hover-state surface: ![Inbox rows
desktop](https://raw.githubusercontent.com/paperclipai/paperclip/pap-9861-ui-dev-qol/docs/pr-screenshots/pr-6384/inbox-rows-desktop.png)
- Dev restart banner desktop: ![Dev restart banner
desktop](https://raw.githubusercontent.com/paperclipai/paperclip/pap-9861-ui-dev-qol/docs/pr-screenshots/pr-6384/dev-restart-banner-desktop.png)
- Dev restart banner mobile: ![Dev restart banner
mobile](https://raw.githubusercontent.com/paperclipai/paperclip/pap-9861-ui-dev-qol/docs/pr-screenshots/pr-6384/dev-restart-banner-mobile.png)

## Risks

- Mostly UI/dev ergonomics with low data risk.
- Sidebar and inbox changes touch frequently used navigation surfaces,
so visual review on desktop/mobile is still useful.

> 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 local shell/git/tool use.
Exact hosted model ID and context-window size are not exposed by the
local Paperclip adapter 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
- [x] 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>
This commit is contained in:
Dotta 2026-05-19 15:52:39 -05:00 committed by GitHub
parent 43c5bb81b6
commit f257530537
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
29 changed files with 870 additions and 45 deletions

View file

@ -1,8 +1,13 @@
import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
import { existsSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
import os from "node:os";
import path from "node:path";
import { afterEach, describe, expect, it } from "vitest";
import { readPersistedDevServerStatus, toDevServerHealthStatus } from "../dev-server-status.js";
import {
getDevServerRestartRequestFilePath,
readPersistedDevServerStatus,
toDevServerHealthStatus,
writeDevServerRestartRequest,
} from "../dev-server-status.js";
const tempDirs = [];
@ -73,4 +78,26 @@ describe("dev server status helpers", () => {
expect(readPersistedDevServerStatus({ PAPERCLIP_DEV_SERVER_STATUS_FILE: filePath })).toBeNull();
});
it("writes restart requests next to the persisted status file", () => {
const filePath = createTempStatusFile({
dirty: true,
changedPathsSample: ["server/src/app.ts"],
pendingMigrations: [],
});
const env = { PAPERCLIP_DEV_SERVER_STATUS_FILE: filePath };
expect(writeDevServerRestartRequest({
requestedAt: "2026-03-20T12:05:00.000Z",
reason: "manual_restart_now",
}, env)).toBe(true);
const requestPath = getDevServerRestartRequestFilePath(env);
expect(requestPath).toBe(path.join(path.dirname(filePath), "dev-server-restart-request.json"));
expect(requestPath && existsSync(requestPath)).toBe(true);
expect(JSON.parse(readFileSync(requestPath!, "utf8"))).toEqual({
requestedAt: "2026-03-20T12:05:00.000Z",
reason: "manual_restart_now",
});
});
});

View file

@ -1,4 +1,4 @@
import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
import { existsSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
import os from "node:os";
import path from "node:path";
import express from "express";
@ -126,3 +126,80 @@ describe("GET /health dev-server supervisor access", () => {
}
});
});
describe("POST /health/dev-server/restart", () => {
it("records a manual restart request for the dev runner", async () => {
const previousFile = process.env.PAPERCLIP_DEV_SERVER_STATUS_FILE;
process.env.PAPERCLIP_DEV_SERVER_STATUS_FILE = createDevServerStatusFile({
dirty: true,
lastChangedAt: "2026-03-20T12:00:00.000Z",
changedPathCount: 1,
changedPathsSample: ["server/src/routes/health.ts"],
pendingMigrations: [],
lastRestartAt: "2026-03-20T11:30:00.000Z",
});
try {
const app = express();
app.use("/health", healthRoutes(undefined));
const res = await request(app).post("/health/dev-server/restart");
expect(res.status).toBe(202);
expect(res.body).toEqual({ status: "restart_requested" });
const requestPath = path.join(
path.dirname(process.env.PAPERCLIP_DEV_SERVER_STATUS_FILE),
"dev-server-restart-request.json",
);
expect(existsSync(requestPath)).toBe(true);
expect(JSON.parse(readFileSync(requestPath, "utf8"))).toMatchObject({
reason: "manual_restart_now",
});
} finally {
if (previousFile === undefined) {
delete process.env.PAPERCLIP_DEV_SERVER_STATUS_FILE;
} else {
process.env.PAPERCLIP_DEV_SERVER_STATUS_FILE = previousFile;
}
}
});
it("rejects unauthenticated manual restarts in authenticated mode", async () => {
const previousFile = process.env.PAPERCLIP_DEV_SERVER_STATUS_FILE;
process.env.PAPERCLIP_DEV_SERVER_STATUS_FILE = createDevServerStatusFile({
dirty: true,
changedPathCount: 1,
changedPathsSample: ["server/src/routes/health.ts"],
pendingMigrations: [],
});
try {
const app = express();
app.use((req, _res, next) => {
(req as any).actor = { type: "none", source: "none" };
next();
});
app.use(
"/health",
healthRoutes(undefined, {
deploymentMode: "authenticated",
deploymentExposure: "private",
authReady: true,
companyDeletionEnabled: true,
}),
);
const res = await request(app).post("/health/dev-server/restart");
expect(res.status).toBe(403);
expect(res.body).toEqual({ error: "board_access_required" });
} finally {
if (previousFile === undefined) {
delete process.env.PAPERCLIP_DEV_SERVER_STATUS_FILE;
} else {
process.env.PAPERCLIP_DEV_SERVER_STATUS_FILE = previousFile;
}
}
});
});

View file

@ -42,6 +42,7 @@ async function createApp(
jobDeps?: unknown;
toolDeps?: unknown;
bridgeDeps?: unknown;
captureJsonContext?: (context: unknown, body: unknown) => void;
} = {},
) {
const [{ pluginRoutes }, { errorHandler }] = await Promise.all([
@ -56,6 +57,16 @@ async function createApp(
const app = express();
app.use(express.json());
if (routeOverrides.captureJsonContext) {
app.use((_req, res, next) => {
const originalJson = res.json.bind(res);
res.json = ((body: unknown) => {
routeOverrides.captureJsonContext?.((res as any).__errorContext, body);
return originalJson(body);
}) as typeof res.json;
next();
});
}
app.use((req, _res, next) => {
req.actor = actor as typeof req.actor;
next();
@ -627,6 +638,40 @@ describe.sequential("plugin tool and bridge authz", () => {
});
});
it("attaches worker bridge errors to the HTTP logger context", async () => {
readyPlugin();
const call = vi.fn().mockRejectedValue(new Error("missing source_objects column"));
const captured: Array<{ context: any; body: unknown }> = [];
const { app } = await createApp(boardActor(), {}, {
bridgeDeps: {
workerManager: { call },
},
captureJsonContext: (context, body) => {
captured.push({ context, body });
},
});
const res = await request(app)
.post(`/api/plugins/${pluginId}/data/source-objects`)
.send({ companyId: companyA });
expect(res.status).toBe(502);
expect(res.body).toMatchObject({
code: "UNKNOWN",
message: "missing source_objects column",
});
expect(captured.at(-1)?.context?.error).toMatchObject({
message: "missing source_objects column",
details: {
pluginId,
pluginKey: "paperclip.example",
bridgeMethod: "getData",
dataKey: "source-objects",
bridgeCode: "UNKNOWN",
},
});
});
it("rejects manual job triggers for non-admin board users", async () => {
const scheduler = { triggerJob: vi.fn() };
const jobStore = { getJobByIdForPlugin: vi.fn() };