mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-11-03 17:51:58 +01:00
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work. > - People use the new-task and thread composers to send text and files. > - Images currently enter the text editor or appear with other files. > - Large images interrupt text entry and make the two composers inconsistent. > - This pull request puts image previews above the text in both composers. > - People can check and remove images while they continue to edit the text. ## Linked Issues or Issue Description Refs: #13206. Related shared-composer work: #15091. **What existing behavior does this improve?** Image selection, paste, and drop in the new-task and thread composers. **Current behavior** Thread images enter the editor at the text cursor. New-task images can appear inline or with file attachments. Images do not have one preview size. **Proposed behavior** Show images above the text as 80 by 80 previews with rounded corners. Use the existing spacing and radius tokens. Keep file attachments in their current row. Add image references when the thread message is sent. **Reason and benefit** People can review images without moving or deleting message text. One shared image row keeps both composers consistent. **Breaking changes** New image uploads stay outside the editor until send. Old inline-image drafts remain readable. No server API or database changes are required. ## What Changed - Add `ComposerImageAttachments` for local previews, removal, upload status, and retry. - Let `TaskChatComposer` own the image row and all image input paths. Keep attachment IDs in the existing send flow. - Let `NewIssueDialog` stage images and upload retained files after task creation. Save file bytes in browser IndexedDB by account and company. Restore them after reload. Clear them after creation. Show storage errors. Merge saved file changes in one IndexedDB transaction. Delete only the files removed by that draft. This keeps files saved by other open tabs. - Keep rich editing for old image Markdown. Use the same MIME and filename checks for image previews in both composers. - Save optional MIME data with thread draft attachments. Existing draft records remain valid. - Add desktop and mobile Storybook examples. Update the task feature map and component tests. ## Verification - `pnpm exec playwright test --config tests/e2e/playwright.config.ts tests/e2e/board-attachment-receipts.spec.ts`: all 14 Chromium tests pass against the real local Board, API, storage, and disposable database. The suite proves image recovery in two open tabs after saves and task creation, new-task image recovery after reload, byte-for-byte upload content, cleanup after creation, rich editing of old image drafts, upload receipt recovery, and removal during pending uploads. - The first local browser attempt could not start because Chromium was absent. Chromium was installed. A later run passed 12 tests but the new legacy-draft fixture restored an empty body. That fixture wrote storage while an empty composer was mounted. It now seeds before React startup and uses a real uploaded image. The complete 13-test rerun passes. Early component runs also exposed the new restore timing. Submit and file controls now wait for restoration. The test helper now waits for React effects. - 316 focused tests pass across `TaskChatComposer`, `NewIssueDialog`, `MarkdownEditor`, `composer-draft`, and `useStagedIssueFiles`. The tests cover explicit file removal, file recovery, account and company changes, storage failures, MIME-empty images, upload retries, and removal. - The two-tab browser test failed on the previous commit: the second save erased the first image. The fix merges files in one read/write transaction and records explicit removals. The first fixed run reached the final create step but had no text request after the other tab cleared the shared text draft. The test now enters a fresh request before that step. The full 14-test rerun passes. - `pnpm check:token-gates`, `node scripts/check-maps.mjs`, `node scripts/storybook-catalog.mjs`, and `git diff --check` pass. - `pnpm --filter @paperclipai/ui typecheck` and `pnpm --filter @paperclipai/ui build` pass after building the local plugin SDK dependency. Repository typecheck and build stop because this workspace has no `cargo`. Full CI must pass before merge. The first CI run passed typecheck, build, and all unit-test shards. Its browser failure expected the old inline upload label. The assertion now uses the thumbnail upload status. - The prior browser review used the production components with simulated upload and submit calls. Desktop, mobile, and dark-theme captures were accepted before this PR. Browser checks confirmed equal-size rounded previews above the editor, no inline image nodes, no horizontal overflow, and removal that preserves text. These checks do not prove live backend persistence. - Earlier repository typecheck and build attempts also stopped without `cargo`. An earlier full test run was killed with a recorded out-of-memory event during a server integration shard. It had no full-suite verdict. One document-recovery test timed out during that concurrent run. Its isolated rerun and later complete focused runs passed; the initial timeout cause was not established. - An initial catalog command in this workspace ran before dependency installation finished. It could not load Storybook. The command passed after installation. The first UI typecheck could not find plugin SDK declarations while that package was still building. The UI typecheck passed after `pnpm --filter @paperclipai/plugin-sdk build`. To inspect the layout, open `composer-new-task--images`, `composer-new-task--mobile-images`, `composer-add-menu--images`, and `composer-add-menu--mobile-images` in Storybook. Select images with different aspect ratios. Check removal, mixed files, failed upload and retry, and draft restoration. - Greptile reports 5/5 for commit `9b9e93beeed80371f667ad2e1a9573e82332c05c`. There are no open review threads. [CI](https://github.com/paperclipai/paperclip/actions/runs/41544180330) passed on this commit. All 58 checks finished: 54 passed, one review is neutral, and three optional checks were skipped. The legacy Snyk status passed. Paperclip also reports 5/5. No review threads are open. ## Risks - Open tabs share the account and company draft. Atomic file writes keep changes from other tabs. A reload can restore those saved files. - Attachment state now controls when image references enter a thread message. Tests cover pending uploads, failures, retry, removed images, and retained upload IDs. - New-task images use the existing staged-file upload flow after task creation. A failed upload follows that flow's existing error behavior. Browser storage can be unavailable or full. The composer keeps the files in memory and shows a recovery message. - Legacy inline-image drafts retain their original text. No migration is required. ## Model Used OpenAI GPT-6 through Codex, with reasoning, tool use, and shell execution. The exact runtime snapshot ID and context-window size are not exposed in this session. The earlier implementation's model snapshot is not recorded in the handoff. ## 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 available in this session) - [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 references) - [x] My remote branch name describes the change and contains no internal Paperclip ticket ID - [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>
343 lines
13 KiB
TypeScript
343 lines
13 KiB
TypeScript
/**
|
|
* Per-task composer draft persistence, shared by the chat composers.
|
|
*
|
|
* Ordinary task drafts use localStorage; agent chat drafts use tab-scoped
|
|
* sessionStorage under the caller-provided key. All
|
|
* access is guarded so disabled or full storage never throws into React.
|
|
* Empty drafts remove the text key. Uploaded receipt metadata has a separate,
|
|
* versioned task-keyed record; legacy text drafts remain plain strings.
|
|
*/
|
|
|
|
/** Debounce before a keystroke lands in browser storage. */
|
|
export const DRAFT_DEBOUNCE_MS = 800;
|
|
|
|
// Chat drafts and uncertain submissions belong to this browser tab. Sharing a
|
|
// submission fence across tabs prevents intentional concurrent conversation turns.
|
|
function draftStorage(draftKey: string): Storage {
|
|
return draftKey.startsWith("paperclip:agent-chat-draft:") ? sessionStorage : localStorage;
|
|
}
|
|
|
|
export function loadDraft(draftKey: string): string {
|
|
return loadDraftIfAvailable(draftKey) ?? "";
|
|
}
|
|
|
|
/** Distinguish an empty stored draft from unavailable browser storage. */
|
|
export function loadDraftIfAvailable(draftKey: string): string | null {
|
|
try {
|
|
return draftStorage(draftKey).getItem(draftKey) ?? "";
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
/** A conflicting tab keeps its own recoverable buffer without replacing the
|
|
* shared draft or acquiring another tab's pending receipt. */
|
|
export function loadDraftRecoveryKey(draftKey: string): string | null {
|
|
const key = `paperclip:agent-chat-draft:recovered:${draftKey}`;
|
|
try {
|
|
return sessionStorage.getItem(`${key}:recovery:v1`) === draftKey ? key : null;
|
|
} catch { return null; }
|
|
}
|
|
|
|
export function preserveDraftInTab(draftKey: string, body: string, attachments: unknown): { key: string; persisted: boolean } {
|
|
const key = `paperclip:agent-chat-draft:recovered:${draftKey}`;
|
|
try {
|
|
sessionStorage.setItem(key, body);
|
|
sessionStorage.setItem(`${key}:attachments:v1`, JSON.stringify({ version: 1, draftKey: key, attachments: draftAttachments(attachments) }));
|
|
sessionStorage.setItem(`${key}:recovery:v1`, draftKey);
|
|
return { key, persisted: true };
|
|
} catch {
|
|
return { key, persisted: false };
|
|
}
|
|
}
|
|
|
|
function syncDraftRecoveryMarker(draftKey: string) {
|
|
const prefix = "paperclip:agent-chat-draft:recovered:";
|
|
if (!draftKey.startsWith(prefix)) return;
|
|
const marker = `${draftKey}:recovery:v1`;
|
|
if (loadDraft(draftKey).trim() || loadDraftAttachments(draftKey).length || loadDraftSubmission(draftKey)) {
|
|
sessionStorage.setItem(marker, draftKey.slice(prefix.length));
|
|
} else {
|
|
sessionStorage.removeItem(marker);
|
|
}
|
|
}
|
|
|
|
function mayWriteDraft(draftKey: string, attemptId?: string) {
|
|
const pending = loadDraftSubmission(draftKey);
|
|
return !pending || pending.attemptId === attemptId;
|
|
}
|
|
|
|
export function saveDraft(draftKey: string, value: string, attemptId?: string) {
|
|
try {
|
|
if (!mayWriteDraft(draftKey, attemptId)) return;
|
|
if (value.trim()) {
|
|
draftStorage(draftKey).setItem(draftKey, value);
|
|
} else {
|
|
draftStorage(draftKey).removeItem(draftKey);
|
|
}
|
|
syncDraftRecoveryMarker(draftKey);
|
|
} catch {
|
|
// Ignore browser storage failures.
|
|
}
|
|
}
|
|
|
|
export function clearDraft(draftKey: string, attemptId?: string) {
|
|
try {
|
|
if (!mayWriteDraft(draftKey, attemptId)) return;
|
|
draftStorage(draftKey).removeItem(draftKey);
|
|
draftStorage(draftKey).removeItem(`${draftKey}:attachments:v1`);
|
|
draftStorage(draftKey).removeItem(`${draftKey}:submission:v1`);
|
|
syncDraftRecoveryMarker(draftKey);
|
|
} catch {
|
|
// Ignore browser storage failures.
|
|
}
|
|
}
|
|
|
|
/**
|
|
* The exact comment request, kept so a send that failed transiently or lost
|
|
* its receipt can be resent with the same `attemptId`. The server dedupes by
|
|
* that ID and rejects it for different content, so the body must be the one
|
|
* originally sent, not the editor text.
|
|
*/
|
|
export interface ComposerSendRequest {
|
|
body: string;
|
|
reopen?: boolean;
|
|
reassignment?: { assigneeAgentId: string | null; assigneeUserId: string | null };
|
|
attachmentIds?: string[];
|
|
/** Composer run settings, passed back unchanged. */
|
|
runSettings?: Record<string, unknown>;
|
|
}
|
|
|
|
export interface ComposerDraftSubmission {
|
|
attemptId: string;
|
|
reviewed: boolean;
|
|
/** Start of text typed after the submitted body in a restored uncertain draft. */
|
|
nextDraftOffset?: number;
|
|
submittedAttachmentIds?: string[];
|
|
/** Present when the send can be replayed; older records have none. */
|
|
request?: ComposerSendRequest;
|
|
/** The account that made `request`; only that account may replay it (see `useDraftOwner`). */
|
|
requestOwner?: string;
|
|
}
|
|
|
|
/** The retained request, only for the account that made it: another account in this browser never replays it. */
|
|
export function replayableRequest(
|
|
submission: ComposerDraftSubmission | null | undefined,
|
|
owner: string | undefined,
|
|
): ComposerSendRequest | undefined {
|
|
const request = submission?.request;
|
|
if (owner === undefined || submission?.requestOwner !== owner || !request) return undefined;
|
|
if (request.reassignment !== undefined || request.runSettings !== undefined || request.reopen === true) return undefined;
|
|
return request;
|
|
}
|
|
|
|
function isNullableString(value: unknown): value is string | null {
|
|
return value === null || (typeof value === "string" && value.length <= 128);
|
|
}
|
|
|
|
export function isComposerSendRequest(value: unknown): value is ComposerSendRequest {
|
|
if (!value || typeof value !== "object" || Array.isArray(value)) return false;
|
|
const row = value as Record<string, unknown>;
|
|
if (!Object.keys(row).every((key) => ["body", "reopen", "reassignment", "attachmentIds", "runSettings"].includes(key))) return false;
|
|
if (typeof row.body !== "string") return false;
|
|
if (row.reopen !== undefined && typeof row.reopen !== "boolean") return false;
|
|
if (row.reassignment !== undefined) {
|
|
const reassignment = row.reassignment as Record<string, unknown> | null;
|
|
if (
|
|
!reassignment || typeof reassignment !== "object" || Array.isArray(reassignment) ||
|
|
!isNullableString(reassignment.assigneeAgentId) || !isNullableString(reassignment.assigneeUserId)
|
|
) return false;
|
|
}
|
|
if (
|
|
row.attachmentIds !== undefined &&
|
|
(!Array.isArray(row.attachmentIds) || row.attachmentIds.length > 256 ||
|
|
!row.attachmentIds.every((id) => typeof id === "string" && id.length <= 128))
|
|
) return false;
|
|
if (
|
|
row.runSettings !== undefined &&
|
|
(!row.runSettings || typeof row.runSettings !== "object" || Array.isArray(row.runSettings))
|
|
) return false;
|
|
return true;
|
|
}
|
|
|
|
/** Retained client request ID. It is not delivery proof until a matching
|
|
* server receipt is observed; use the same ID for submission and reconciliation. */
|
|
export function loadDraftSubmission(
|
|
draftKey: string,
|
|
): ComposerDraftSubmission | null {
|
|
try {
|
|
const raw = draftStorage(draftKey).getItem(`${draftKey}:submission:v1`);
|
|
if (!raw) return null;
|
|
const record = JSON.parse(raw);
|
|
return record?.version === 1 &&
|
|
record.draftKey === draftKey &&
|
|
Object.keys(record).every((key) => ["version", "draftKey", "attemptId", "reviewed", "nextDraftOffset", "submittedAttachmentIds", "request", "requestOwner"].includes(key)) &&
|
|
typeof record.attemptId === "string" &&
|
|
/^[0-9a-f]{8}-(?:[0-9a-f]{4}-){3}[0-9a-f]{12}$/i.test(record.attemptId) &&
|
|
typeof record.reviewed === "boolean" &&
|
|
(record.nextDraftOffset === undefined || (Number.isSafeInteger(record.nextDraftOffset) && record.nextDraftOffset >= 0)) &&
|
|
(record.submittedAttachmentIds === undefined || (Array.isArray(record.submittedAttachmentIds) && record.submittedAttachmentIds.length <= 256 && record.submittedAttachmentIds.every((id: unknown) => typeof id === "string" && id.length <= 128))) &&
|
|
(record.request === undefined || isComposerSendRequest(record.request)) &&
|
|
(record.requestOwner === undefined || (typeof record.requestOwner === "string" && record.requestOwner.length <= 256))
|
|
? { attemptId: record.attemptId, reviewed: record.reviewed,
|
|
...(record.nextDraftOffset !== undefined ? { nextDraftOffset: record.nextDraftOffset } : {}),
|
|
...(record.submittedAttachmentIds !== undefined ? { submittedAttachmentIds: record.submittedAttachmentIds } : {}),
|
|
...(record.request !== undefined ? { request: record.request } : {}),
|
|
...(record.requestOwner !== undefined ? { requestOwner: record.requestOwner } : {}),
|
|
}
|
|
: null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
export function saveDraftSubmission(
|
|
draftKey: string,
|
|
submission: ComposerDraftSubmission,
|
|
) {
|
|
try {
|
|
// An old completion/review must not replace a different retained intent.
|
|
// This is a local guard, not cross-tab atomicity or server idempotency.
|
|
if (!mayWriteDraft(draftKey, submission.attemptId)) return;
|
|
draftStorage(draftKey).setItem(
|
|
`${draftKey}:submission:v1`,
|
|
JSON.stringify({ version: 1, draftKey, ...submission }),
|
|
);
|
|
syncDraftRecoveryMarker(draftKey);
|
|
} catch {
|
|
/* The composer also retains the fence in memory. */
|
|
}
|
|
}
|
|
|
|
export function clearDraftSubmission(draftKey: string, attemptId: string) {
|
|
try {
|
|
if (loadDraftSubmission(draftKey)?.attemptId === attemptId) {
|
|
draftStorage(draftKey).removeItem(`${draftKey}:submission:v1`);
|
|
syncDraftRecoveryMarker(draftKey);
|
|
}
|
|
} catch {
|
|
/* Disabled browser storage is supported in memory. */
|
|
}
|
|
}
|
|
|
|
/** A late response can settle only its own retained intent, never a newer draft. */
|
|
export function settleDraftSubmission(draftKey: string, attemptId: string, nextDraft?: string): boolean {
|
|
const submission = loadDraftSubmission(draftKey);
|
|
if (submission?.attemptId !== attemptId) return false;
|
|
nextDraft ??= submission.nextDraftOffset === undefined
|
|
? "" : loadDraft(draftKey).slice(submission.nextDraftOffset);
|
|
const nextAttachments = submission.submittedAttachmentIds === undefined ? []
|
|
: loadDraftAttachments(draftKey).filter(item => !submission.submittedAttachmentIds!.includes(item.attachmentId));
|
|
clearDraft(draftKey, attemptId);
|
|
if (nextDraft) saveDraft(draftKey, nextDraft);
|
|
if (nextAttachments.length) saveDraftAttachments(draftKey, nextAttachments);
|
|
return true;
|
|
}
|
|
|
|
export interface ComposerDraftAttachment {
|
|
attachmentId: string;
|
|
name: string;
|
|
size?: number;
|
|
inline: boolean;
|
|
contentType?: string;
|
|
contentPath: string;
|
|
}
|
|
|
|
function draftAttachments(value: unknown): ComposerDraftAttachment[] {
|
|
if (!Array.isArray(value) || value.length > 20) return [];
|
|
const seen = new Set<string>();
|
|
const result: ComposerDraftAttachment[] = [];
|
|
for (const item of value) {
|
|
if (!item || typeof item !== "object" || Array.isArray(item)) continue;
|
|
const row = item as Record<string, unknown>;
|
|
if (row.status !== undefined && row.status !== "attached") continue;
|
|
if (
|
|
typeof row.attachmentId !== "string" ||
|
|
!/^[0-9a-f]{8}-(?:[0-9a-f]{4}-){3}[0-9a-f]{12}$/i.test(
|
|
row.attachmentId,
|
|
) ||
|
|
seen.has(row.attachmentId)
|
|
)
|
|
continue;
|
|
if (
|
|
typeof row.name !== "string" ||
|
|
row.name.length === 0 ||
|
|
row.name.length > 512 ||
|
|
typeof row.inline !== "boolean"
|
|
)
|
|
continue;
|
|
if (row.contentPath !== `/api/attachments/${row.attachmentId}/content`)
|
|
continue;
|
|
if (
|
|
row.size !== undefined &&
|
|
(typeof row.size !== "number" ||
|
|
!Number.isSafeInteger(row.size) ||
|
|
row.size < 0)
|
|
)
|
|
continue;
|
|
seen.add(row.attachmentId);
|
|
result.push({
|
|
attachmentId: row.attachmentId,
|
|
name: row.name,
|
|
inline: row.inline,
|
|
contentPath: row.contentPath,
|
|
...(typeof row.contentType === "string" ? { contentType: row.contentType } : {}),
|
|
...(row.size === undefined ? {} : { size: row.size as number }),
|
|
});
|
|
}
|
|
return result;
|
|
}
|
|
|
|
/** Selection hints only. The server still rechecks task/company ownership and
|
|
* atomically binds the receipt; stored text or metadata never grants access. */
|
|
export function loadDraftAttachments(
|
|
draftKey: string,
|
|
): ComposerDraftAttachment[] {
|
|
try {
|
|
const raw = draftStorage(draftKey).getItem(`${draftKey}:attachments:v1`);
|
|
if (!raw || raw.length > 32_768) return [];
|
|
const value: unknown = JSON.parse(raw);
|
|
if (!value || typeof value !== "object" || Array.isArray(value)) return [];
|
|
const record = value as Record<string, unknown>;
|
|
return record.version === 1 && record.draftKey === draftKey
|
|
? draftAttachments(record.attachments)
|
|
: [];
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
export function saveDraftAttachments(draftKey: string, attachments: unknown, attemptId?: string) {
|
|
try {
|
|
// Only the owning pending request may persist newly uploaded receipts.
|
|
// Generic effects and stale composer cleanups must not rewrite its snapshot.
|
|
if (!mayWriteDraft(draftKey, attemptId)) return;
|
|
const selected = draftAttachments(attachments);
|
|
if (selected.length)
|
|
draftStorage(draftKey).setItem(
|
|
`${draftKey}:attachments:v1`,
|
|
JSON.stringify({ version: 1, draftKey, attachments: selected }),
|
|
);
|
|
else draftStorage(draftKey).removeItem(`${draftKey}:attachments:v1`);
|
|
syncDraftRecoveryMarker(draftKey);
|
|
} catch {
|
|
/* Disabled/full browser storage must not break the composer. */
|
|
}
|
|
}
|
|
export function loadStructuredDraft<T>(draftKey: string, fallback: T): T {
|
|
try {
|
|
const value = draftStorage(draftKey).getItem(draftKey);
|
|
return value ? (JSON.parse(value) as T) : fallback;
|
|
} catch {
|
|
return fallback;
|
|
}
|
|
}
|
|
|
|
export function saveStructuredDraft(draftKey: string, value: unknown) {
|
|
try {
|
|
draftStorage(draftKey).setItem(draftKey, JSON.stringify(value));
|
|
} catch {
|
|
// Ignore browser storage failures.
|
|
}
|
|
}
|