PaperClipAI/doc/ANNOUNCEMENTS.md

In-app announcements

Paperclip displays one optional announcement card in the board UI. Its feed is https://pages.paperclip.ing/announcements/v1/current.json. The instance fetches JSON on demand and renders it with native components.

Operator configuration

• PAPERCLIP_ANNOUNCEMENTS_ENABLED=false disables fetching and display.
• PAPERCLIP_ANNOUNCEMENTS_FEED_URL overrides the public HTTPS manifest URL. Credentials, query strings, private destinations and redirects are rejected.

Announcements are independent of telemetry. Feed/media requests originate from the instance without account IDs, company data, cookies or event tracking. The host sees ordinary server network request metadata. The browser requests only its own Paperclip API.

Authoring and publishing

The shared announcementManifestSchema defines the format:

{
  "schemaVersion": 1,
  "announcement": {
    "id": "2026-09-projects",
    "eyebrow": "New in Paperclip",
    "title": "Your next idea starts here",
    "description": "Bring your agents and work together in a project.",
    "secondaryLink": { "kind": "external", "label": "Learn more", "url": "https://paperclip.ing" },
    "primaryAction": { "kind": "route", "label": "Open projects", "path": "/projects" }
  }
}

Content is plain text. Every manifest object rejects unknown fields, including misspellings in actions and media. Optional fields: image: { path, alt }, animation: { path, alt }, expiresAt (ISO timestamp), and minimumPaperclipVersion (stable major.minor.patch). Internal actions accept stable pages in ANNOUNCEMENT_APP_ROUTES and use the selected company. External HTTPS links open a new tab. Actions only navigate.

Images are assets/<sha256>.png, .jpg or .webp, at most 2 MiB, relative to the manifest directory. Use an approximately 2.6:1 banner with important content near the center; mobile crops it shorter. The manifest is limited to 64 KiB. Run shasum -a 256 hero.png to get the image digest, copy the file to announcements/assets/<digest>.png, and use assets/<digest>.png in the manifest. An image correction changes this asset filename while retaining the announcement ID.

Edit announcements/current.json, put its image under announcements/assets/, then run:

node cli/node_modules/tsx/dist/cli.mjs scripts/publish-announcements.ts announcements --dry-run

Set PAPERCLIP_PAGE_BUCKET, optionally PAPERCLIP_PAGE_BASE_URL, and the page uploader's namespaced PAPERCLIP_PAGE_AWS_ACCESS_KEY_ID and PAPERCLIP_PAGE_AWS_SECRET_ACCESS_KEY (optional PAPERCLIP_PAGE_AWS_SESSION_TOKEN), or PAPERCLIP_PAGE_AWS_PROFILE. Ambient AWS credentials also work. For a host serving a subdirectory, PAPERCLIP_PAGE_DEFAULT_PREFIX prepends a validated path to both S3 keys and public URLs. Use lowercase letters, numbers and hyphens in each segment, without leading/trailing slashes.

node cli/node_modules/tsx/dist/cli.mjs scripts/publish-announcements.ts announcements --publish

The helper rejects symlinks, validates asset digests and animated HTML, uploads assets first and the manifest last, and verifies the public manifest and asset headers. It writes only the resolved announcement prefix; no remote objects are deleted or infrastructure changed. Allow up to six minutes for CDN propagation. Manifest caching is five minutes; immutable assets use one year. Before first publication verify the distribution's active cache policy has minimum TTL <= 300 and maximum TTL >= 300 for the manifest, and maximum TTL >= 31536000 for assets. Check the behavior matching each path, including any referenced cache policy. Public response headers alone cannot prove the effective cache lifetime or override a higher minimum. See AWS cache expiration.

Retain the ID when fixing copy/images/animations. Use a new ID to announce something new. ETags improve fetching but never determine redisplay.

Animated hero media

An announcement can show a self-contained HTML/CSS animation in its hero area. The headline, description, close button and actions remain native Paperclip controls. Add an animation alongside the required static image:

"image": { "path": "assets/<image-sha256>.png", "alt": "A team working together" },
"animation": { "path": "assets/<html-sha256>.html", "alt": "Agents plan, build and review work together." }

Replace the placeholders with the files' actual 64-character SHA-256 digests. HTML is UTF-8, limited to 128 KiB, and uses a responsive document with zero body margin. The hero is about 352 × 136 on desktop and shorter on phones. Use CSS keyframes, inline styles, system fonts, and visual HTML (div, span, p, br, strong, em, b, i) or inline SVG shapes/text (svg, g, path, circle, ellipse, rect, line, polyline, polygon, text, tspan, title, desc). No scripts, external libraries, links, forms, iframes, images, SVG SMIL/foreignObject, meta refresh or other embedded resources. CSS URL requests and imports are blocked by CSP; keep all styling self-contained. The publisher and server use the same strict DOMPurify allowlist and reject unsupported markup rather than publishing a silently changed animation.

Paperclip verifies the digest, validates the HTML, and renders the result in an opaque sandboxed iframe with no permissions. A Content Security Policy blocks scripts and network resources both inside the card and on direct API visits. The browser fetches HTML from its own authenticated instance; it never loads the publisher's page in an unsandboxed frame. The frame cannot receive pointer or keyboard focus; its accessible description is supplied by animation.alt. See iframe sandboxing.

The animation plays automatically without playback controls. The static image stays visible while loading and on failure. With reduced motion enabled, Paperclip does not request or play the animation. Also include a prefers-reduced-motion CSS rule in authored documents for standalone previews. Animations share the feed's constrained host, three-second server timeout, bounded cache, request deduplication and fifteen-minute failure cooldown. Dismissal and ID reuse rules are identical for animated and static cards. Older Paperclip builds that do not recognize animation treat that feed as unsupported and quietly show no card.

The complete authoring example is announcements/examples/animated/. Preview it with the same staging/test-drive workflow below:

cp -R announcements/examples/animated .paperclip/announcement-animation-preview
# Edit HTML; recompute its digest and rename it; update current.json.
node cli/node_modules/tsx/dist/cli.mjs scripts/publish-announcements.ts .paperclip/announcement-animation-preview --staging animated-preview --dry-run
node cli/node_modules/tsx/dist/cli.mjs scripts/publish-announcements.ts .paperclip/announcement-animation-preview --staging animated-preview --publish

Point the isolated instance at the printed URL and restart it. Verify movement, reduced motion, mobile sizing, and dismissal across reloads. Try a missing animation asset: the poster and native controls must remain usable. Storybook's Animated, AnimatedDark, AnimatedMobile and MissingAnimation stories, and the design guide, provide local examples without changing the remote feed.

Preview an announcement before publishing

Use a named staging feed. --staging <name> writes announcements/staging/<name>/v1/ instead of announcements/v1/, so a preview cannot overwrite the production manifest. With no source directory it uses announcements/examples/staging/, including a sample banner. Commands default to dry-run unless --publish is supplied.

For Paperclip's existing preview host, use the branch preview area that CloudFront already has permission to read:

aws sso login --profile paperclip-dev
export PAPERCLIP_PAGE_AWS_PROFILE=paperclip-dev
export PAPERCLIP_PAGE_BUCKET=paperclipai-runner-e2e-history-078455283791-us-east-1
export PAPERCLIP_PAGE_BASE_URL=https://d1p6rlowie26tp.cloudfront.net
export PAPERCLIP_PAGE_DEFAULT_PREFIX=storybook/branches/codex-announcements

# Copy the public fixture into an ignored directory and edit current.json there.
mkdir -p .paperclip
cp -R announcements/examples/staging .paperclip/announcement-preview
node cli/node_modules/tsx/dist/cli.mjs scripts/publish-announcements.ts .paperclip/announcement-preview --staging my-preview --dry-run
node cli/node_modules/tsx/dist/cli.mjs scripts/publish-announcements.ts .paperclip/announcement-preview --staging my-preview --publish

Choose a unique staging name for your test and use the printed manifest URL. The preview host currently uses CloudFront's Managed-CachingDisabled policy for this branch area: edge TTL is zero even though public responses preserve the five-minute manifest and one-year asset cache headers. This is useful for preview iteration; it does not verify a production distribution's effective cache lifetime. For another host, configure its bucket, base URL and optional prefix, then verify its matching cache behavior as described above.

Create a test-drive configuration in this worktree. Put the feed override in the selected instance's .env, not just the invoking shell: test-drive deliberately clears inherited PAPERCLIP_* variables.

mkdir -p .paperclip/announcement-test-drive/instances/default
# On a new test directory, create this file. On reuse, update these entries
# while preserving the file's existing keys.
cat > .paperclip/announcement-test-drive/instances/default/.env <<'EOF'
PAPERCLIP_ANNOUNCEMENTS_FEED_URL=https://d1p6rlowie26tp.cloudfront.net/storybook/branches/codex-announcements/announcements/staging/my-preview/v1/current.json
PAPERCLIP_ANNOUNCEMENTS_ENABLED=true
PAPERCLIP_DB_BACKUP_ENABLED=false
HEARTBEAT_SCHEDULER_ENABLED=false
EOF

# A fresh test-drive needs a provider key for its initial CEO. Use your usual
# provider environment variable; never put a real key into a manifest or commit.
# Reusing an initialized data directory does not require a bootstrap key.
node cli/node_modules/tsx/dist/cli.mjs cli/src/index.ts test-drive --data-dir .paperclip/announcement-test-drive --no-browser

See test-drive setup for harness/key options. Open the printed local URL. The app chooses a free port starting at 3100 and keeps its database under the supplied directory. It creates no tasks or initial agent run. After onboarding/company selection, allow three seconds for the card.

Before promoting content, verify:

• The image, copy and both actions fit desktop/mobile and both themes.
• A dialog or bottom-left toast temporarily hides the card, then restores it.
• Close or follow a link; reload, switch companies and open another tab/browser. The same account should keep that ID dismissed.
• Edit copy with the same ID: it stays dismissed. Publish a new ID: it appears on the next eligible visit. Clearing browser storage alone does not reset database dismissals; use a new ID or a fresh isolated data directory.
• Try the empty fixture and a URL that returns 404. The dashboard remains usable with no announcement and no announcement error popup.

Stop and restart test-drive after changing its feed URL or republishing content when you need immediate results. This clears the server's one-hour feed cache while retaining dismissal records in the same data directory. Reload or return to the app after restart; an uninterrupted active tab does not discover cards. For promotion, validate the reviewed content again, configure the production host/prefix, and publish without --staging. Production's checked-in manifest remains empty until a real announcement is ready.

No announcement and withdrawal

The explicit none value is JSON null, not the string "none":

{
  "schemaVersion": 1,
  "announcement": null
}

Publish this manifest to withdraw an announcement while retaining every user's dismissed IDs. Restoring an old announcement cannot resurrect it for people who dismissed it. The ready-to-publish empty fixture is announcements/examples/none/current.json:

node cli/node_modules/tsx/dist/cli.mjs scripts/publish-announcements.ts announcements/examples/none --staging my-empty-preview --publish

A remote 404 is also a normal empty feed: the board API returns HTTP 200 with null, clears previous content/ETag, and waits fifteen minutes before checking upstream again. It produces no announcement warning in server logs or popup in the UI. Other unavailable or invalid feeds likewise produce no card or UI error popup; unexpected upstream failures can be logged for operators. Withdrawal follows the cache/return timing below. Explicit expiration also removes a visible card when its deadline arrives.

Timing and persistence

Show after three seconds when opening or returning to Paperclip, after company selection and onboarding. Dialogs and toasts take priority. Phones show it above bottom navigation. No automatic timeout, outside-click dismissal or carousel. Tab visibility controls the return check: moving focus to the address bar or an adjacent app pane leaves the card visible and does not restart its settling period. A hidden tab clears the card; becoming visible fetches fresh dismissal state before showing anything, even if that lookup takes longer than three seconds.

The instance caches the feed for an hour, deduplicates concurrent fetches, and uses conditional requests. Failed requests have a fifteen-minute cooldown; no card appears for unavailable/invalid/incompatible content. Each request has a three-second deadline. Active tabs do not poll for announcements. Publication and withdrawal are discovered on a return after cache expiry (normally within about 65 minutes for returning users).

Closing or following either link saves a unique (userId, announcementId) record in the instance DB, shared across browsers and companies. Its first write and audit entry commit together; the active company is audit context. Viewers can dismiss their own card. No-login instances share local-board. Separate installations do not share state.

The browser hides immediately, stores pending writes per account, and retries on reconnect/return. Failed saves explain that cross-device sync has not completed. If browser storage is unavailable, state lasts for this visit. Other tabs close through BroadcastChannel/storage events; another browser refreshes state on return. Logout clears displayed state and aborts account-bound work. A failed state lookup never shows a card.

Board-only APIs: GET /api/announcements/current, GET /api/announcements/:id/image, GET /api/announcements/:id/animation, and POST /api/announcements/:id/dismiss with { "companyId": "..." }. Responses use private, no-store. Repeated POSTs return 204 without duplicate audits. Pending dismissals remain valid after the feed moves to another ID. The instance retains only the IDs of validated announcements in a publication registry, so offline retries survive withdrawal and restarts. A caller-invented ID returns 404 without creating dismissal or audit rows. This registry is not an archive and records no interaction events.

Production ships with an empty manifest. Design guide / Storybook fixtures are never used as a production fallback.