hanh.tonguyen/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add worktree UI branding

Browse Source
This commit is contained in:
Dotta
2026-03-13 11:12:43 -05:00
parent 3b0d9a93f4
commit cce9941464
10 changed files with 566 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
server/src/__tests__/ui-branding.test.ts
View File

@@ -1,8 +1,16 @@
import { describe, expect, it } from "vitest";
import { applyUiBranding, isWorktreeUiBrandingEnabled, renderFaviconLinks } from "../ui-branding.js";
import {
applyUiBranding,
getWorktreeUiBranding,
isWorktreeUiBrandingEnabled,
renderFaviconLinks,
renderRuntimeBrandingMeta,
} from "../ui-branding.js";
const TEMPLATE = `<!doctype html>
<head>
<!-- PAPERCLIP_RUNTIME_BRANDING_START -->
<!-- PAPERCLIP_RUNTIME_BRANDING_END -->
<!-- PAPERCLIP_FAVICON_START -->
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
@@ -18,21 +26,57 @@ describe("ui branding", () => {
expect(isWorktreeUiBrandingEnabled({ PAPERCLIP_IN_WORKTREE: "false" })).toBe(false);
});
it("renders the worktree favicon asset set when enabled", () => {
const links = renderFaviconLinks(true);
expect(links).toContain("/worktree-favicon.ico");
expect(links).toContain("/worktree-favicon.svg");
expect(links).toContain("/worktree-favicon-32x32.png");
expect(links).toContain("/worktree-favicon-16x16.png");
it("resolves name, color, and text color for worktree branding", () => {
const branding = getWorktreeUiBranding({
PAPERCLIP_IN_WORKTREE: "true",
PAPERCLIP_WORKTREE_NAME: "paperclip-pr-432",
PAPERCLIP_WORKTREE_COLOR: "#4f86f7",
});
expect(branding.enabled).toBe(true);
expect(branding.name).toBe("paperclip-pr-432");
expect(branding.color).toBe("#4f86f7");
expect(branding.textColor).toMatch(/^#[0-9a-f]{6}$/);
expect(branding.faviconHref).toContain("data:image/svg+xml,");
});
it("rewrites the favicon block for worktree instances only", () => {
const branded = applyUiBranding(TEMPLATE, { PAPERCLIP_IN_WORKTREE: "true" });
expect(branded).toContain("/worktree-favicon.svg");
it("renders a dynamic worktree favicon when enabled", () => {
const links = renderFaviconLinks(
getWorktreeUiBranding({
PAPERCLIP_IN_WORKTREE: "true",
PAPERCLIP_WORKTREE_NAME: "paperclip-pr-432",
PAPERCLIP_WORKTREE_COLOR: "#4f86f7",
}),
);
expect(links).toContain("data:image/svg+xml,");
expect(links).toContain('rel="shortcut icon"');
});
it("renders runtime branding metadata for the ui", () => {
const meta = renderRuntimeBrandingMeta(
getWorktreeUiBranding({
PAPERCLIP_IN_WORKTREE: "true",
PAPERCLIP_WORKTREE_NAME: "paperclip-pr-432",
PAPERCLIP_WORKTREE_COLOR: "#4f86f7",
}),
);
expect(meta).toContain('name="paperclip-worktree-name"');
expect(meta).toContain('content="paperclip-pr-432"');
expect(meta).toContain('name="paperclip-worktree-color"');
});
it("rewrites the favicon and runtime branding blocks for worktree instances only", () => {
const branded = applyUiBranding(TEMPLATE, {
PAPERCLIP_IN_WORKTREE: "true",
PAPERCLIP_WORKTREE_NAME: "paperclip-pr-432",
PAPERCLIP_WORKTREE_COLOR: "#4f86f7",
});
expect(branded).toContain("data:image/svg+xml,");
expect(branded).toContain('name="paperclip-worktree-name"');
expect(branded).not.toContain('href="/favicon.svg"');
const defaultHtml = applyUiBranding(TEMPLATE, {});
expect(defaultHtml).toContain('href="/favicon.svg"');
expect(defaultHtml).not.toContain("/worktree-favicon.svg");
expect(defaultHtml).not.toContain('name="paperclip-worktree-name"');
});
});