@sellable/mcp 0.1.262 → 0.1.263

package/dist/server.js

@@ -9,7 +9,7 @@ import { getCampaignTableSchema, queueCampaignCells, reviseMessageTemplateAndRer
 import { createCampaign, duplicateCampaign, getCampaign, getCampaignMessagesPreview, getCampaigns, pauseCampaign, startCampaign, updateCampaign, updateCampaignBrief, } from "./tools/campaigns.js";
 import { queueCells, updateCell } from "./tools/cells.js";
 import { handleStartCliLogin, handleWaitForCliLogin, } from "./tools/cli-login.js";
-import { capturePostIdeaTool, getPostDraftTool, getPostIdeaTool, getPublishedPostTool, listPostDraftIterationsTool, listPostDraftsTool, listPostIdeasTool, listPublishedPostsTool, markPostPublishedTool, saveHookResearchTool, savePostDraftTool, updatePostDraftTool, updatePublishedPostMetricsTool, } from "./tools/content-posts.js";
+import { capturePostIdeaTool, getPostDraftTool, getPostIdeaTool, getPublishedPostTool, listPostDraftIterationsTool, listPostDraftsTool, listPostIdeasTool, listPublishedPostsTool, markPostPublishedTool, renderLinkedInPostPreviewTool, saveHookResearchTool, savePostDraftTool, updatePostDraftTool, updatePublishedPostMetricsTool, } from "./tools/content-posts.js";
 import { getCampaignContext, hydrateCampaignContextFromCampaign, markCampaignContextDirty, } from "./tools/context.js";
 import { addToCommentCampaign, addToConnectionCampaign, addToInmailCampaign, getEngagedPosts, getOrCreateDirectCampaignTable, pauseDirectCampaign, startDirectCampaign, } from "./tools/direct-campaigns.js";
 import { bootstrapEngage, bootstrapEngageMulti, } from "./tools/engage-bootstrap.js";
@@ -244,6 +244,9 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
             case "save_post_draft":
                 result = savePostDraftTool(args);
                 break;
+            case "render_linkedin_post_preview":
+                result = renderLinkedInPostPreviewTool(args);
+                break;
             case "update_post_draft":
                 result = updatePostDraftTool(args);
                 break;

package/dist/tools/content-posts.d.ts

@@ -1,4 +1,4 @@
-type ContentKind = "idea" | "hook_research" | "draft" | "published_post";
+type ContentKind = "idea" | "hook_research" | "draft" | "published_post" | "linkedin_preview";
 type ArtifactMetadata = {
     id: string;
     type: ContentKind;
@@ -94,6 +94,12 @@ export declare const contentPostToolDefinitions: ({
             body?: undefined;
             validationReceipt?: undefined;
             status?: undefined;
+            postText?: undefined;
+            renderId?: undefined;
+            sourceLabel?: undefined;
+            renderScreenshots?: undefined;
+            requireScreenshots?: undefined;
+            reviewClampLines?: undefined;
             updatedAt?: undefined;
             publishUrl?: undefined;
             activityId?: undefined;
@@ -193,6 +199,12 @@ export declare const contentPostToolDefinitions: ({
             body?: undefined;
             validationReceipt?: undefined;
             status?: undefined;
+            postText?: undefined;
+            renderId?: undefined;
+            sourceLabel?: undefined;
+            renderScreenshots?: undefined;
+            requireScreenshots?: undefined;
+            reviewClampLines?: undefined;
             updatedAt?: undefined;
             publishUrl?: undefined;
             activityId?: undefined;
@@ -215,6 +227,7 @@ export declare const contentPostToolDefinitions: ({
         properties: {
             draftId: {
                 type: string;
+                description?: undefined;
             };
             ideaId: {
                 type: string;
@@ -259,6 +272,12 @@ export declare const contentPostToolDefinitions: ({
             selectedPatterns?: undefined;
             previewBudget?: undefined;
             notes?: undefined;
+            postText?: undefined;
+            renderId?: undefined;
+            sourceLabel?: undefined;
+            renderScreenshots?: undefined;
+            requireScreenshots?: undefined;
+            reviewClampLines?: undefined;
             updatedAt?: undefined;
             publishUrl?: undefined;
             activityId?: undefined;
@@ -279,8 +298,79 @@ export declare const contentPostToolDefinitions: ({
     inputSchema: {
         type: string;
         properties: {
+            postText: {
+                type: string;
+                description: string;
+            };
             draftId: {
                 type: string;
+                description: string;
+            };
+            renderId: {
+                type: string;
+                description: string;
+            };
+            sourceLabel: {
+                type: string;
+            };
+            createdAt: {
+                type: string;
+            };
+            renderScreenshots: {
+                type: string;
+                description: string;
+            };
+            requireScreenshots: {
+                type: string;
+                description: string;
+            };
+            reviewClampLines: {
+                type: string;
+                description: string;
+            };
+            rawSource?: undefined;
+            title?: undefined;
+            distilledBrief?: undefined;
+            ideaId?: undefined;
+            sourceType?: undefined;
+            sourceUrl?: undefined;
+            capturedAt?: undefined;
+            researchId?: undefined;
+            topic?: undefined;
+            keywords?: undefined;
+            sourcePosts?: undefined;
+            selectedPatterns?: undefined;
+            previewBudget?: undefined;
+            notes?: undefined;
+            hookResearchId?: undefined;
+            priorDraftId?: undefined;
+            iteration?: undefined;
+            body?: undefined;
+            validationReceipt?: undefined;
+            status?: undefined;
+            updatedAt?: undefined;
+            publishUrl?: undefined;
+            activityId?: undefined;
+            publishedAt?: undefined;
+            finalText?: undefined;
+            updateDraftStatus?: undefined;
+            publishedPostId?: undefined;
+            year?: undefined;
+            metrics?: undefined;
+            note?: undefined;
+        };
+        required: never[];
+        additionalProperties: boolean;
+    };
+} | {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {
+            draftId: {
+                type: string;
+                description?: undefined;
             };
             hookResearchId: {
                 type: string;
@@ -323,6 +413,12 @@ export declare const contentPostToolDefinitions: ({
             previewBudget?: undefined;
             notes?: undefined;
             createdAt?: undefined;
+            postText?: undefined;
+            renderId?: undefined;
+            sourceLabel?: undefined;
+            renderScreenshots?: undefined;
+            requireScreenshots?: undefined;
+            reviewClampLines?: undefined;
             publishUrl?: undefined;
             activityId?: undefined;
             publishedAt?: undefined;
@@ -344,6 +440,7 @@ export declare const contentPostToolDefinitions: ({
         properties: {
             draftId: {
                 type: string;
+                description?: undefined;
             };
             publishUrl: {
                 type: string;
@@ -384,6 +481,12 @@ export declare const contentPostToolDefinitions: ({
             body?: undefined;
             validationReceipt?: undefined;
             status?: undefined;
+            postText?: undefined;
+            renderId?: undefined;
+            sourceLabel?: undefined;
+            renderScreenshots?: undefined;
+            requireScreenshots?: undefined;
+            reviewClampLines?: undefined;
             updatedAt?: undefined;
             publishedPostId?: undefined;
             year?: undefined;
@@ -436,6 +539,12 @@ export declare const contentPostToolDefinitions: ({
             body?: undefined;
             validationReceipt?: undefined;
             status?: undefined;
+            postText?: undefined;
+            renderId?: undefined;
+            sourceLabel?: undefined;
+            renderScreenshots?: undefined;
+            requireScreenshots?: undefined;
+            reviewClampLines?: undefined;
             updatedAt?: undefined;
             publishUrl?: undefined;
             activityId?: undefined;
@@ -455,6 +564,7 @@ export declare function ensureContentLayout(root?: string): {
         hookResearch: "linkedin/research/hooks";
         drafts: "linkedin/drafts";
         published: "linkedin/published";
+        previews: "linkedin/previews";
         commentLibrary: "linkedin/comments/library";
     };
 };
@@ -529,6 +639,117 @@ export declare function savePostDraftTool(input: {
     updatedAt: string;
     preview: string;
 };
+export declare function renderLinkedInPostPreviewTool(input: {
+    postText?: string;
+    draftId?: string;
+    renderId?: string;
+    sourceLabel?: string;
+    createdAt?: string;
+    renderScreenshots?: boolean;
+    requireScreenshots?: boolean;
+    reviewClampLines?: number;
+}): {
+    id: string;
+    path: string;
+    artifactDir: string;
+    absoluteArtifactDir: string;
+    combinedHtmlPath: string;
+    absoluteCombinedHtmlPath: string;
+    mobile: {
+        absoluteHtmlPath: string;
+        absoluteScreenshotPath: string | undefined;
+        textWidthPx: number;
+        viewportWidthPx: number;
+        fontSizePx: number;
+        lineHeightPx: number;
+        reviewClampLines: number;
+        estimatedVisibleTextBlock: string;
+        estimatedRenderedLines: string[];
+        estimatedLineCountBeforeClamp: number;
+        estimatedBlankLinesBeforeClamp: number;
+        htmlPath: string;
+        screenshotPath: string | undefined;
+    };
+    desktop: {
+        absoluteHtmlPath: string;
+        absoluteScreenshotPath: string | undefined;
+        textWidthPx: number;
+        viewportWidthPx: number;
+        fontSizePx: number;
+        lineHeightPx: number;
+        reviewClampLines: number;
+        estimatedVisibleTextBlock: string;
+        estimatedRenderedLines: string[];
+        estimatedLineCountBeforeClamp: number;
+        estimatedBlankLinesBeforeClamp: number;
+        htmlPath: string;
+        screenshotPath: string | undefined;
+    };
+    screenshotStatus: {
+        status: "rendered";
+        chromePath: string;
+    } | {
+        status: "skipped";
+        reason: string;
+    } | {
+        status: "failed";
+        reason: string;
+        chromePath?: string;
+    };
+    renderedPreview: {
+        basis: string;
+        cssContractVersion: string;
+        generatedAt: string;
+        sourceLabel: string;
+        mobile: {
+            textWidthPx: number;
+            viewportWidthPx: number;
+            fontSizePx: number;
+            lineHeightPx: number;
+            reviewClampLines: number;
+            estimatedVisibleTextBlock: string;
+            estimatedRenderedLines: string[];
+            estimatedLineCountBeforeClamp: number;
+            estimatedBlankLinesBeforeClamp: number;
+            htmlPath: string;
+            screenshotPath: string | undefined;
+        };
+        desktop: {
+            textWidthPx: number;
+            viewportWidthPx: number;
+            fontSizePx: number;
+            lineHeightPx: number;
+            reviewClampLines: number;
+            estimatedVisibleTextBlock: string;
+            estimatedRenderedLines: string[];
+            estimatedLineCountBeforeClamp: number;
+            estimatedBlankLinesBeforeClamp: number;
+            htmlPath: string;
+            screenshotPath: string | undefined;
+        };
+        diagnostics: {
+            charCount: number;
+            charCountIncludingNewlines: number;
+            firstLineChars: number;
+            firstTwoPhysicalLinesChars: number;
+            physicalLineCount: number;
+            contentLineCount: number;
+            longestNonblankLineChars: number;
+            blankLineCount: number;
+        };
+        screenshotStatus: {
+            status: "rendered";
+            chromePath: string;
+        } | {
+            status: "skipped";
+            reason: string;
+        } | {
+            status: "failed";
+            reason: string;
+            chromePath?: string;
+        };
+    };
+};
 export declare function updatePostDraftTool(input: {
     draftId: string;
     hookResearchId?: string;

package/dist/tools/content-posts.js

@@ -1,6 +1,8 @@
 import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
+import { execFileSync } from "node:child_process";
+import { pathToFileURL } from "node:url";
 const CONTENT_ROOT_ENV = "SELLABLE_CONTENT_DIR";
 const DEFAULT_PREVIEW_CHARS = 220;
 const RELATIVE_DIRS = {
@@ -8,6 +10,7 @@ const RELATIVE_DIRS = {
     hookResearch: "linkedin/research/hooks",
     drafts: "linkedin/drafts",
     published: "linkedin/published",
+    previews: "linkedin/previews",
     commentLibrary: "linkedin/comments/library",
 };
 export const contentPostToolDefinitions = [
@@ -104,6 +107,43 @@ export const contentPostToolDefinitions = [
             additionalProperties: false,
         },
     },
+    {
+        name: "render_linkedin_post_preview",
+        description: "Render any LinkedIn post text through the Sellable LinkedIn preview CSS contract for mobile and desktop. Writes HTML artifacts and, when local Chrome is available, browser screenshots under ~/.sellable/content/linkedin/previews.",
+        inputSchema: {
+            type: "object",
+            properties: {
+                postText: {
+                    type: "string",
+                    description: "Full post text to render. Provide either postText or draftId.",
+                },
+                draftId: {
+                    type: "string",
+                    description: "Optional saved draft ID. When postText is omitted, the tool renders this draft's Draft Body.",
+                },
+                renderId: {
+                    type: "string",
+                    description: "Optional stable render ID. Must be a safe filename without slashes.",
+                },
+                sourceLabel: { type: "string" },
+                createdAt: { type: "string" },
+                renderScreenshots: {
+                    type: "boolean",
+                    description: "Defaults to true. When true, tries to use local Chrome headless to write PNG screenshots.",
+                },
+                requireScreenshots: {
+                    type: "boolean",
+                    description: "Defaults to false. When true, fail if local Chrome cannot produce PNG screenshots.",
+                },
+                reviewClampLines: {
+                    type: "number",
+                    description: "Visible review lines before see-more. Defaults to 3.",
+                },
+            },
+            required: [],
+            additionalProperties: false,
+        },
+    },
     {
         name: "update_post_draft",
         description: "Update an existing LinkedIn post draft in place while preserving omitted fields. Useful for adding iteration receipts, status changes, or final copy edits without rewriting the whole artifact.",
@@ -389,6 +429,109 @@ export function savePostDraftTool(input) {
         preview: sanitizedPreview(input.body),
     };
 }
+export function renderLinkedInPostPreviewTool(input) {
+    const now = normalizeDate(input.createdAt);
+    const draftId = input.draftId
+        ? normalizeArtifactId(input.draftId, "draftId")
+        : undefined;
+    const draftBody = draftId
+        ? extractMarkdownSection(getArtifact(RELATIVE_DIRS.drafts, draftId, "draftId").markdown, "Draft Body")
+        : undefined;
+    const postText = input.postText ?? draftBody;
+    requireString(postText, "postText");
+    const reviewClampLines = typeof input.reviewClampLines === "number" &&
+        Number.isFinite(input.reviewClampLines)
+        ? Math.max(1, Math.min(Math.floor(input.reviewClampLines), 8))
+        : 3;
+    const id = input.renderId ??
+        `preview_${dateStamp(now)}_${slugify(input.sourceLabel || draftId || postText)}`;
+    const safeId = normalizeArtifactId(id, "renderId");
+    const baseDir = `${RELATIVE_DIRS.previews}/${safeId}`;
+    const title = input.sourceLabel || draftId || safeId;
+    const renderScreenshots = input.renderScreenshots !== false;
+    const mobile = buildPreviewSurface({
+        label: "mobile",
+        text: postText,
+        baseDir,
+        textWidthPx: 308,
+        viewportWidthPx: 390,
+        viewportHeightPx: 760,
+        reviewClampLines,
+    });
+    const desktop = buildPreviewSurface({
+        label: "desktop",
+        text: postText,
+        baseDir,
+        textWidthPx: 582,
+        viewportWidthPx: 744,
+        viewportHeightPx: 760,
+        reviewClampLines,
+    });
+    const combinedHtmlRelativePath = `${baseDir}/preview.html`;
+    const combinedHtml = buildCombinedPreviewHtml({
+        title,
+        postText,
+        mobile,
+        desktop,
+    });
+    writeContentFile(combinedHtmlRelativePath, combinedHtml);
+    const screenshotResult = renderScreenshots
+        ? renderPreviewScreenshots([mobile, desktop], input.requireScreenshots)
+        : { status: "skipped", reason: "renderScreenshots=false" };
+    const metadata = {
+        id: safeId,
+        type: "linkedin_preview",
+        status: screenshotResult.status === "rendered" ? "rendered" : "html_rendered",
+        title,
+        draftId,
+        createdAt: now,
+        updatedAt: now,
+    };
+    const renderedPreview = {
+        basis: screenshotResult.status === "rendered"
+            ? "local_chrome_headless_screenshot"
+            : "linkedin_css_contract_html",
+        cssContractVersion: "linkedin-preview-rendering/v1",
+        generatedAt: now,
+        sourceLabel: title,
+        mobile: surfaceRecord(mobile),
+        desktop: surfaceRecord(desktop),
+        diagnostics: previewDiagnostics(postText),
+        screenshotStatus: screenshotResult,
+    };
+    const recordRelativePath = `${baseDir}/render.md`;
+    const metadataJsonRelativePath = `${baseDir}/metadata.json`;
+    writeContentFile(metadataJsonRelativePath, `${JSON.stringify(renderedPreview, null, 2)}\n`);
+    writeArtifact(recordRelativePath, buildMarkdown(metadata, [
+        ["Rendered Preview Record", jsonBlock(renderedPreview)],
+        [
+            "Artifacts",
+            [
+                `- combinedHtml: ${combinedHtmlRelativePath}`,
+                `- mobileHtml: ${mobile.htmlPath}`,
+                mobile.screenshotPath
+                    ? `- mobileScreenshot: ${mobile.screenshotPath}`
+                    : "- mobileScreenshot: none",
+                `- desktopHtml: ${desktop.htmlPath}`,
+                desktop.screenshotPath
+                    ? `- desktopScreenshot: ${desktop.screenshotPath}`
+                    : "- desktopScreenshot: none",
+            ].join("\n"),
+        ],
+    ]));
+    return {
+        id: safeId,
+        path: recordRelativePath,
+        artifactDir: baseDir,
+        absoluteArtifactDir: safePath(resolveContentRoot(), baseDir),
+        combinedHtmlPath: combinedHtmlRelativePath,
+        absoluteCombinedHtmlPath: safePath(resolveContentRoot(), combinedHtmlRelativePath),
+        mobile: surfaceReturnRecord(mobile),
+        desktop: surfaceReturnRecord(desktop),
+        screenshotStatus: screenshotResult,
+        renderedPreview,
+    };
+}
 export function updatePostDraftTool(input) {
     const safeDraftId = normalizeArtifactId(input.draftId, "draftId");
     const relativePath = `${RELATIVE_DIRS.drafts}/${safeDraftId}.md`;
@@ -617,6 +760,362 @@ export function listPublishedPostsTool(input) {
     }
     return summarizeArtifacts(artifacts, input?.limit);
 }
+function buildPreviewSurface(input) {
+    const estimatedLines = estimateRenderedLines(input.text, input.textWidthPx);
+    const htmlPath = `${input.baseDir}/${input.label}.html`;
+    const surface = {
+        label: input.label,
+        textWidthPx: input.textWidthPx,
+        viewportWidthPx: input.viewportWidthPx,
+        viewportHeightPx: input.viewportHeightPx,
+        fontSizePx: 14,
+        lineHeightPx: 21,
+        reviewClampLines: input.reviewClampLines,
+        estimatedLines,
+        estimatedVisibleTextBlock: estimatedLines
+            .slice(0, input.reviewClampLines)
+            .join("\n"),
+        estimatedLineCountBeforeClamp: estimatedLines.length,
+        estimatedBlankLinesBeforeClamp: estimatedLines
+            .slice(0, input.reviewClampLines)
+            .filter((line) => line.trim().length === 0).length,
+        htmlPath,
+        absoluteHtmlPath: safePath(resolveContentRoot(), htmlPath),
+    };
+    writeContentFile(htmlPath, buildSinglePreviewHtml({
+        title: `${input.label} LinkedIn preview`,
+        postText: input.text,
+        surface,
+    }));
+    return surface;
+}
+function buildSinglePreviewHtml(input) {
+    return htmlDocument({
+        title: input.title,
+        bodyClass: input.surface.label,
+        body: linkedInCardHtml(input.postText, input.surface),
+    });
+}
+function buildCombinedPreviewHtml(input) {
+    return htmlDocument({
+        title: `LinkedIn preview: ${input.title}`,
+        bodyClass: "combined",
+        body: [
+            `<main class="combined-grid">`,
+            `<section><h1>Mobile preview</h1>${linkedInCardHtml(input.postText, input.mobile)}</section>`,
+            `<section><h1>Desktop preview</h1>${linkedInCardHtml(input.postText, input.desktop)}</section>`,
+            `</main>`,
+        ].join("\n"),
+    });
+}
+function htmlDocument(input) {
+    return [
+        "<!doctype html>",
+        '<html lang="en">',
+        "<head>",
+        '<meta charset="utf-8">',
+        '<meta name="viewport" content="width=device-width, initial-scale=1">',
+        `<title>${escapeHtml(input.title)}</title>`,
+        "<style>",
+        linkedinPreviewCss(),
+        "</style>",
+        "</head>",
+        `<body class="${escapeHtml(input.bodyClass)}">`,
+        input.body,
+        "</body>",
+        "</html>",
+        "",
+    ].join("\n");
+}
+function linkedInCardHtml(postText, surface) {
+    const escapedText = escapeHtml(postText);
+    const cardWidth = surface.textWidthPx + 32;
+    return [
+        `<article class="linkedin-card" data-surface="${surface.label}" style="width:${cardWidth}px">`,
+        '<header class="post-header" aria-hidden="true">',
+        '<div class="avatar"></div>',
+        '<div class="byline"><div class="name">Preview Author</div><div class="meta">LinkedIn preview contract</div></div>',
+        "</header>",
+        `<div class="post-text" style="width:${surface.textWidthPx}px;-webkit-line-clamp:${surface.reviewClampLines}">${escapedText}</div>`,
+        surface.estimatedLineCountBeforeClamp > surface.reviewClampLines
+            ? '<div class="see-more">...see more</div>'
+            : "",
+        '<div class="post-actions" aria-hidden="true"><span>Like</span><span>Comment</span><span>Repost</span></div>',
+        "</article>",
+    ].join("\n");
+}
+function linkedinPreviewCss() {
+    return `
+:root {
+  color-scheme: light;
+  --linkedin-text: rgba(0, 0, 0, 0.9);
+  --linkedin-muted: rgba(0, 0, 0, 0.6);
+  --linkedin-border: #e0dfdc;
+  --linkedin-bg: #f3f2ef;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--linkedin-bg);
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue",
+    "Fira Sans", Ubuntu, "Oxygen Sans", Cantarell, "Droid Sans",
+    "Lucida Grande", Helvetica, Arial, sans-serif;
+}
+body.mobile, body.desktop {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 20px;
+}
+.combined-grid {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  gap: 28px;
+  align-items: start;
+  padding: 20px;
+}
+h1 {
+  margin: 0 0 10px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  color: var(--linkedin-muted);
+}
+.linkedin-card {
+  background: #fff;
+  border: 1px solid var(--linkedin-border);
+  border-radius: 8px;
+  padding: 12px 16px 10px;
+  color: var(--linkedin-text);
+}
+.post-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #d7dce0, #eef0f2);
+}
+.byline { min-width: 0; }
+.name {
+  height: 16px;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 600;
+}
+.meta {
+  font-size: 12px;
+  line-height: 14px;
+  color: var(--linkedin-muted);
+}
+.post-text {
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 400;
+  letter-spacing: normal;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  color: var(--linkedin-text);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.see-more {
+  margin-top: 2px;
+  font-size: 14px;
+  line-height: 21px;
+  color: var(--linkedin-muted);
+}
+.post-actions {
+  display: flex;
+  gap: 18px;
+  border-top: 1px solid var(--linkedin-border);
+  margin-top: 10px;
+  padding-top: 8px;
+  color: var(--linkedin-muted);
+  font-size: 13px;
+  line-height: 18px;
+}
+`;
+}
+function renderPreviewScreenshots(surfaces, requireScreenshots) {
+    const chromePath = findChromeExecutable();
+    if (!chromePath) {
+        if (requireScreenshots) {
+            throw new Error("Chrome executable not found. Set CHROME_PATH or install Google Chrome to render LinkedIn preview screenshots.");
+        }
+        return { status: "skipped", reason: "chrome_not_found" };
+    }
+    try {
+        for (const surface of surfaces) {
+            const screenshotPath = surface.htmlPath.replace(/\.html$/, ".png");
+            const absoluteScreenshotPath = safePath(resolveContentRoot(), screenshotPath);
+            execFileSync(chromePath, [
+                "--headless=new",
+                "--disable-gpu",
+                "--no-sandbox",
+                "--disable-dev-shm-usage",
+                "--hide-scrollbars",
+                `--screenshot=${absoluteScreenshotPath}`,
+                `--window-size=${surface.viewportWidthPx},${surface.viewportHeightPx}`,
+                pathToFileURL(surface.absoluteHtmlPath).href,
+            ], { stdio: "ignore", timeout: 20000 });
+            surface.screenshotPath = screenshotPath;
+            surface.absoluteScreenshotPath = absoluteScreenshotPath;
+        }
+        return { status: "rendered", chromePath };
+    }
+    catch (error) {
+        const reason = error instanceof Error ? error.message : String(error);
+        if (requireScreenshots) {
+            throw new Error(`Chrome screenshot render failed: ${reason}`);
+        }
+        return { status: "failed", reason, chromePath };
+    }
+}
+function findChromeExecutable() {
+    const candidates = [
+        process.env.CHROME_PATH,
+        process.env.GOOGLE_CHROME_BIN,
+        "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+        "/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary",
+        "/Applications/Chromium.app/Contents/MacOS/Chromium",
+        "/usr/bin/google-chrome",
+        "/usr/bin/google-chrome-stable",
+        "/usr/bin/chromium",
+        "/usr/bin/chromium-browser",
+        "/snap/bin/chromium",
+    ].filter(Boolean);
+    return candidates.find((candidate) => fs.existsSync(candidate)) ?? null;
+}
+function surfaceRecord(surface) {
+    return {
+        textWidthPx: surface.textWidthPx,
+        viewportWidthPx: surface.viewportWidthPx,
+        fontSizePx: surface.fontSizePx,
+        lineHeightPx: surface.lineHeightPx,
+        reviewClampLines: surface.reviewClampLines,
+        estimatedVisibleTextBlock: surface.estimatedVisibleTextBlock,
+        estimatedRenderedLines: surface.estimatedLines.slice(0, surface.reviewClampLines),
+        estimatedLineCountBeforeClamp: surface.estimatedLineCountBeforeClamp,
+        estimatedBlankLinesBeforeClamp: surface.estimatedBlankLinesBeforeClamp,
+        htmlPath: surface.htmlPath,
+        screenshotPath: surface.screenshotPath,
+    };
+}
+function surfaceReturnRecord(surface) {
+    return {
+        ...surfaceRecord(surface),
+        absoluteHtmlPath: surface.absoluteHtmlPath,
+        absoluteScreenshotPath: surface.absoluteScreenshotPath,
+    };
+}
+function previewDiagnostics(text) {
+    const physicalLines = text.split("\n");
+    const nonblankLines = physicalLines.filter((line) => line.trim().length > 0);
+    return {
+        charCount: text.replace(/\s/g, "").length,
+        charCountIncludingNewlines: text.length,
+        firstLineChars: physicalLines[0]?.length ?? 0,
+        firstTwoPhysicalLinesChars: physicalLines.slice(0, 2).join("\n").length,
+        physicalLineCount: physicalLines.length,
+        contentLineCount: nonblankLines.length,
+        longestNonblankLineChars: nonblankLines.reduce((max, line) => Math.max(max, line.length), 0),
+        blankLineCount: physicalLines.length - nonblankLines.length,
+    };
+}
+function estimateRenderedLines(text, textWidthPx) {
+    const physicalLines = text.split("\n");
+    const rendered = [];
+    for (const physicalLine of physicalLines) {
+        if (physicalLine.length === 0) {
+            rendered.push("");
+            continue;
+        }
+        rendered.push(...wrapPhysicalLine(physicalLine, textWidthPx));
+    }
+    return rendered;
+}
+function wrapPhysicalLine(line, textWidthPx) {
+    const tokens = line.match(/\S+\s*/g) ?? [line];
+    const wrapped = [];
+    let current = "";
+    for (const token of tokens) {
+        const candidate = `${current}${token}`;
+        if (!current || measureTextPx(candidate) <= textWidthPx) {
+            current = candidate;
+            continue;
+        }
+        wrapped.push(current.trimEnd());
+        if (measureTextPx(token) <= textWidthPx) {
+            current = token;
+        }
+        else {
+            const broken = breakLongToken(token.trimEnd(), textWidthPx);
+            wrapped.push(...broken.slice(0, -1));
+            current = broken.at(-1) ?? "";
+            if (token.endsWith(" "))
+                current += " ";
+        }
+    }
+    if (current.length > 0)
+        wrapped.push(current.trimEnd());
+    return wrapped.length > 0 ? wrapped : [""];
+}
+function breakLongToken(token, textWidthPx) {
+    const parts = [];
+    let current = "";
+    for (const char of [...token]) {
+        const candidate = `${current}${char}`;
+        if (!current || measureTextPx(candidate) <= textWidthPx) {
+            current = candidate;
+        }
+        else {
+            parts.push(current);
+            current = char;
+        }
+    }
+    if (current)
+        parts.push(current);
+    return parts;
+}
+function measureTextPx(value) {
+    let width = 0;
+    for (const char of [...value]) {
+        width += estimateCharWidthPx(char);
+    }
+    return width;
+}
+function estimateCharWidthPx(char) {
+    if (char === " ")
+        return 3.6;
+    if (/[ilI|.,:;!'`]/.test(char))
+        return 3.8;
+    if (/[fjrt()[\]{}]/.test(char))
+        return 5.2;
+    if (/[mwMW@#%&]/.test(char))
+        return 10.2;
+    if (/[A-Z]/.test(char))
+        return 8.2;
+    if (/[0-9]/.test(char))
+        return 7.3;
+    if (/[^\x00-\x7F]/.test(char))
+        return 8.4;
+    return 7.0;
+}
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
 function getArtifact(relativeDir, id, label) {
     const safeId = normalizeArtifactId(id, label);
     const relativePath = `${relativeDir}/${safeId}.md`;
@@ -810,6 +1309,11 @@ function writeArtifact(relativePath, markdown) {
     const filePath = safeWritablePath(root, relativePath);
     fs.writeFileSync(filePath, markdown);
 }
+function writeContentFile(relativePath, contents) {
+    const root = resolveContentRoot();
+    const filePath = safeWritablePath(root, relativePath);
+    fs.writeFileSync(filePath, contents);
+}
 function safePath(root, relativePath) {
     validateRelativePath(relativePath);
     const fullPath = path.resolve(root, ...relativePath.split("/"));

package/dist/tools/registry.d.ts

@@ -1260,6 +1260,12 @@ export declare const allTools: ({
             body?: undefined;
             validationReceipt?: undefined;
             status?: undefined;
+            postText?: undefined;
+            renderId?: undefined;
+            sourceLabel?: undefined;
+            renderScreenshots?: undefined;
+            requireScreenshots?: undefined;
+            reviewClampLines?: undefined;
             updatedAt?: undefined;
             publishUrl?: undefined;
             activityId?: undefined;
@@ -1295,6 +1301,7 @@ export declare const allTools: ({
         properties: {
             draftId: {
                 type: string;
+                description?: undefined;
             };
             ideaId: {
                 type: string;
@@ -1339,6 +1346,12 @@ export declare const allTools: ({
             selectedPatterns?: undefined;
             previewBudget?: undefined;
             notes?: undefined;
+            postText?: undefined;
+            renderId?: undefined;
+            sourceLabel?: undefined;
+            renderScreenshots?: undefined;
+            requireScreenshots?: undefined;
+            reviewClampLines?: undefined;
             updatedAt?: undefined;
             publishUrl?: undefined;
             activityId?: undefined;
@@ -1361,6 +1374,7 @@ export declare const allTools: ({
         properties: {
             draftId: {
                 type: string;
+                description?: undefined;
             };
             hookResearchId: {
                 type: string;
@@ -1403,6 +1417,12 @@ export declare const allTools: ({
             previewBudget?: undefined;
             notes?: undefined;
             createdAt?: undefined;
+            postText?: undefined;
+            renderId?: undefined;
+            sourceLabel?: undefined;
+            renderScreenshots?: undefined;
+            requireScreenshots?: undefined;
+            reviewClampLines?: undefined;
             publishUrl?: undefined;
             activityId?: undefined;
             publishedAt?: undefined;
@@ -1424,6 +1444,7 @@ export declare const allTools: ({
         properties: {
             draftId: {
                 type: string;
+                description?: undefined;
             };
             publishUrl: {
                 type: string;
@@ -1464,6 +1485,12 @@ export declare const allTools: ({
             body?: undefined;
             validationReceipt?: undefined;
             status?: undefined;
+            postText?: undefined;
+            renderId?: undefined;
+            sourceLabel?: undefined;
+            renderScreenshots?: undefined;
+            requireScreenshots?: undefined;
+            reviewClampLines?: undefined;
             updatedAt?: undefined;
             publishedPostId?: undefined;
             year?: undefined;
@@ -1516,6 +1543,12 @@ export declare const allTools: ({
             body?: undefined;
             validationReceipt?: undefined;
             status?: undefined;
+            postText?: undefined;
+            renderId?: undefined;
+            sourceLabel?: undefined;
+            renderScreenshots?: undefined;
+            requireScreenshots?: undefined;
+            reviewClampLines?: undefined;
             updatedAt?: undefined;
             publishUrl?: undefined;
             activityId?: undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sellable/mcp",
-  "version": "0.1.262",
+  "version": "0.1.263",
   "type": "module",
   "description": "Sellable MCP server for Claude Code and Codex campaign workflows",
   "main": "dist/index.js",

package/skills/create-post/SKILL.md

@@ -108,6 +108,7 @@ Use these MCP tools when available:
 - `mcp__sellable__get_post_idea`
 - `mcp__sellable__list_post_ideas`
 - `mcp__sellable__save_hook_research`
+- `mcp__sellable__render_linkedin_post_preview`
 - `mcp__sellable__save_post_draft`
 - `mcp__sellable__update_post_draft`
 - `mcp__sellable__list_post_draft_iterations`
@@ -342,7 +343,8 @@ Visible Flow Trace
 
 4. Hook Autopsies
 - source hook:
-- rendered/mobile preview or preview-basis:
+- rendered/mobile preview artifact from `render_linkedin_post_preview` or
+  authenticated LinkedIn screenshot:
 - see-more tension:
 - curiosity debt:
 - body promise:
@@ -402,7 +404,7 @@ Visible Flow Trace
 
 11. Hook Lab
 - at least 12 hooks:
-- rendered preview record or explicit preview-basis:
+- rendered preview artifact from `render_linkedin_post_preview`:
 - hook-to-body promise:
 - score:
 - selected hook:
@@ -829,17 +831,34 @@ Each hook must include:
 
 Do not copy source wording. Copy only the structure.
 
-Use this conservative mobile-first LinkedIn preview gate. LinkedIn does not
-publish exact "see more" cutoff rules, and rendering varies by device, app
-version, font, media, and line break. These are v1 safety budgets, not claims
-about an official LinkedIn limit:
-
-- `pass`: hook is <= 110 chars including newlines, every nonblank line is <= 45 chars, and the hook's core point lands before likely truncation.
-- `warn`: hook is 111-140 chars including newlines, any nonblank line is 46-55 chars, or blank lines create visual-line risk. Blank lines are allowed, but they count as physical lines.
-- `fail`: hook is > 140 chars including newlines, any nonblank line is > 55 chars, or the hook's point depends on text after likely truncation.
+Use the rendered-preview contract from
+`references/linkedin-preview-rendering.md`. LinkedIn does not publish exact
+"see more" cutoff rules, and rendering varies by device, app version, font,
+media, and line break. Treat character counts as diagnostics only, not as proof
+that the hook will render before "see more."
+
+The selected hook and top candidates must include literal mobile and desktop
+visible blocks. Current third-party preview tools and 2026 creator references
+generally cluster around mobile showing about 2-3 text lines and desktop showing
+about 3-4 text lines before "see more," with media attachments sometimes showing
+less. Blank lines and `--` separators consume visible preview lines.
+
+Use:
+
+- `pass`: rendered mobile preview shows the pain, proof, or curiosity by the end
+  of the first 3 rendered lines, and either the core point is visible or a
+  specific intentional open loop is visible with immediate body payoff planned
+- `warn`: rendered mobile preview creates useful curiosity but wrapping,
+  blank-line rhythm, media risk, or one missing context word weakens it; include
+  a compact fallback
+- `fail`: the hook's real point appears after the rendered mobile review clamp,
+  the visible open loop is vague, blank lines consume the preview before the
+  point, or desktop fit is the only reason it looks good
 
 Desktop preview usually has more room. Still record `desktopPreviewFit`, but
-never let desktop fit compensate for a mobile `fail`.
+never let desktop fit compensate for a mobile `fail`. Do not tell the user "we
+know" how LinkedIn will render unless there is an authenticated LinkedIn
+screenshot; say it passes the renderer and show the visible blocks.
 
 If a hook's point depends on text after the likely preview, rewrite it before
 selecting it. A selected hook may carry a `warn` only when the warning is about

package/skills/create-post/references/hook-research-playbook.md

@@ -256,19 +256,33 @@ Measure the visible opening for every shortlisted source post before extracting
 the hook pattern. This makes the study useful for LinkedIn, not just generally
 "good writing."
 
-LinkedIn does not publish exact "see more" cutoff rules. Treat these as
-conservative v1 planning budgets:
-
-- `pass`: opening hook is <= 110 chars including newlines, every nonblank line
-  is <= 45 chars, and the hook's core point lands before likely truncation.
-- `warn`: opening hook is 111-140 chars including newlines, any nonblank line is
-  46-55 chars, or blank lines create visual-line risk. Blank lines are allowed,
-  but they count as physical lines.
-- `fail`: opening hook is > 140 chars including newlines, any nonblank line is
-  > 55 chars, or the hook's core point depends on text after likely truncation.
+LinkedIn does not publish exact "see more" cutoff rules. Treat preview fit as a
+rendered-line problem first, not a fixed character-count rule. Current
+third-party preview tools and 2026 creator references generally cluster around:
+
+- mobile feed: about 2-3 visible text lines, often around 140 characters when
+  there is no media
+- desktop feed: about 3-4 visible text lines, often around 210 characters when
+  there is no media
+- media posts can show fewer text lines before truncation
+- blank lines and `--` style separators consume visible preview lines
+
+Use `references/linkedin-preview-rendering.md` as the required gate. Character
+budgets are diagnostics only:
+
+- `pass`: rendered mobile preview shows the pain, proof, or curiosity by the end
+  of the first 3 rendered lines, and the hook creates a specific click reason
+- `warn`: rendered mobile preview creates useful curiosity but loses one useful
+  context word, wraps awkwardly, or spends a visible line on blank space or a
+  separator; include a compact fallback
+- `fail`: the hook's real point appears after the rendered mobile review clamp,
+  the visible open loop is vague, blank lines consume the preview before the
+  point, or desktop fit is the only reason it looks good
 
 Desktop preview has more room, so record it separately, but never let desktop
-fit compensate for a mobile `fail`.
+fit compensate for a mobile `fail`. Never say "we know" how LinkedIn will render
+the hook unless there is an authenticated LinkedIn screenshot. Say the hook
+`passes the renderer` and show the mobile/desktop visible blocks.
 
 For each source, record:
 
@@ -282,6 +296,8 @@ For each source, record:
 - `firstTwoContentLinesChars`
 - `longestNonblankLineChars`
 - `blankLineCountBeforeFold`
+- `renderedPreview`: literal mobile and desktop visible blocks from
+  `references/linkedin-preview-rendering.md`
 - `mobilePreviewBudget`: `pass`, `warn`, or `fail`
 - `desktopPreviewBudget`: `pass`, `warn`, or `fail`
 - `blankLineVisualRisk`

package/skills/create-post/references/linkedin-preview-rendering.md

@@ -5,8 +5,14 @@ research, hook candidate generation, gold-standard decomposition, and draft
 validation.
 
 Character budgets are only diagnostics. They are not the preview gate. A hook is
-not studied, selected, or ready until it has been rendered through this contract
-or through a stricter authenticated LinkedIn screenshot.
+not studied, selected, or ready until it has been rendered through
+`mcp__sellable__render_linkedin_post_preview` or through a stricter
+authenticated LinkedIn screenshot.
+
+Do not let the LLM imagine wrapping. Character counts and hand-written line
+blocks are only fallback diagnostics. The normal path is tool-rendered mobile
+and desktop artifacts: HTML always, and PNG screenshots whenever local Chrome is
+available.
 
 ## Rendering Basis
 
@@ -14,6 +20,38 @@ LinkedIn does not publish exact feed truncation rules, and rendering can vary by
 surface, app version, device, media attachment, and account state. Use this
 deterministic renderer as the MCP review gate for unpublished drafts.
 
+Call:
+
+```json
+mcp__sellable__render_linkedin_post_preview({
+  "postText": "<full post text or candidate hook block>",
+  "sourceLabel": "<draft id, hook id, or source label>",
+  "renderScreenshots": true
+})
+```
+
+When screenshots are produced, the PNG files are the review artifact. When
+screenshots cannot be produced, the HTML artifact is still deterministic and
+must be opened or explicitly marked as lower confidence.
+
+Treat "see more" as a rendered-line problem first and a character-count problem
+second. Current third-party preview tools and 2026 creator references generally
+cluster around these working assumptions:
+
+- mobile feed: about 2-3 visible text lines, often around 140 characters when
+  there is no media
+- desktop feed: about 3-4 visible text lines, often around 210 characters when
+  there is no media
+- posts with media may show fewer text lines before truncation, sometimes only
+  1-2 lines
+- blank lines and intentional separators consume visible preview lines
+- device width, font scaling, app version, browser, and profile/page context can
+  move the cutoff
+
+Because of that variation, never say a hook is guaranteed to render before
+"see more." Say `pass`, `warn`, or `fail` under the rendered-preview contract,
+and show the visible mobile and desktop blocks.
+
 When an authenticated LinkedIn feed/composer/browser screenshot is available,
 that screenshot is the strongest evidence. Still record the fields below so
 future agents can compare candidates without redoing the visual inspection.
@@ -48,13 +86,13 @@ selected hook must include a `renderedPreview` record:
 
 ```text
 renderedPreview:
-  basis: linkedin_css_contract | authenticated_linkedin_screenshot | manual_user_source
+  basis: local_chrome_headless_screenshot | linkedin_css_contract_html | authenticated_linkedin_screenshot | manual_user_source
   cssContractVersion: linkedin-preview-rendering/v1
   mobile:
     textWidthPx: 308
     fontSizePx: 14
     lineHeightPx: 21
-    visibleTextBlock: <literal first rendered review-clamp block>
+    visibleTextBlock: <literal first rendered review-clamp block or tool estimated block when screenshot is the authority>
     renderedLines:
       - <line 1 exactly as wrapped>
       - <line 2 exactly as wrapped>
@@ -68,7 +106,8 @@ renderedPreview:
     payoffPlannedImmediatelyAfterClamp: true | false
     seeMoreClickReason: <why a reader would click see more>
     seeMoreRisk: pass | warn | fail
-    screenshotPath: <optional local path>
+    htmlPath: <local path>
+    screenshotPath: <local path when Chrome rendered PNG>
   desktop:
     textWidthPx: 582
     fontSizePx: 14
@@ -83,7 +122,8 @@ renderedPreview:
     corePainProofOrCuriosityVisible: true | false
     corePointVisible: true | false
     seeMoreRisk: pass | warn | fail
-    screenshotPath: <optional local path>
+    htmlPath: <local path>
+    screenshotPath: <local path when Chrome rendered PNG>
   diagnostics:
     charCount: <number>
     charCountIncludingNewlines: <number>
@@ -96,10 +136,11 @@ renderedPreview:
     rewriteIfTruncated: <short fallback>
 ```
 
-If a host cannot produce screenshots, it must still produce the literal wrapped
-line blocks using the CSS contract. If it cannot produce either screenshots or
-literal line wraps, return `blocked` or `needs_revision`; do not claim the hook
-passed preview validation from character counts alone.
+If a host cannot produce screenshots, it must still produce and preserve the
+HTML artifacts from `render_linkedin_post_preview`. If it cannot produce
+screenshots, HTML artifacts, or literal wrapped line blocks, return `blocked` or
+`needs_revision`; do not claim the hook passed preview validation from character
+counts alone.
 
 ## Study Rules
 

package/skills/create-post/references/post-validation.md

@@ -320,22 +320,38 @@ proof from another creator, save as `needs_revision`.
 
 ## LinkedIn Preview Audit
 
-Audit the selected hook and top candidates against conservative LinkedIn
-preview budgets. LinkedIn does not publish exact "see more" cutoff rules, and
-rendering varies by device, app version, font, media, and line break. This audit
-is a mobile-first safety gate, not a claim about an official LinkedIn limit.
+Audit the selected hook and top candidates against the rendered-preview
+contract. LinkedIn does not publish exact "see more" cutoff rules, and rendering
+varies by device, app version, font, media, line break, and whether the post has
+media attached. This audit is a mobile-first safety gate, not a claim about an
+official LinkedIn limit.
+
+Treat character counts as diagnostics only. The gate is the literal rendered
+mobile and desktop visible block from `references/linkedin-preview-rendering.md`
+or an authenticated LinkedIn screenshot.
 
 Use:
 
-- `pass`: hook is <= 110 chars including newlines, every nonblank line is <= 45 chars, and the hook's core point lands before likely truncation.
-- `warn`: hook is 111-140 chars including newlines, any nonblank line is 46-55 chars, or blank lines create visual-line risk. Blank lines are allowed, but they count as physical lines.
-- `fail`: hook is > 140 chars including newlines, any nonblank line is > 55 chars, or the hook's point depends on text after likely truncation.
+- `pass`: the rendered mobile preview shows the pain, proof, or curiosity by the
+  end of the first 3 rendered lines, and either the core point is visible or a
+  specific intentional open loop is visible with immediate body payoff planned
+- `warn`: the rendered mobile preview creates useful curiosity but wrapping,
+  blank-line rhythm, media risk, or one missing context word weakens it; include
+  a compact fallback
+- `fail`: the hook's real point appears after the rendered mobile review clamp,
+  the visible open loop is vague, blank lines consume the preview before the
+  point, or desktop fit is the only reason it looks good
 
 Desktop preview usually has more room. Still record desktop fit, but never let
 desktop fit compensate for a mobile `fail`.
 
 Record:
 
+- `renderedPreview`
+- `renderedPreviewBasis`: `linkedin_css_contract` |
+  `authenticated_linkedin_screenshot` | `manual_user_source`
+- literal mobile visible block
+- literal desktop visible block
 - `charCount`
 - `charCountIncludingNewlines`
 - `firstLineChars`
@@ -355,9 +371,11 @@ Record:
 - `compactFallback` when `previewBudgetStatus` is `warn`
 
 If the hook only works after likely truncation, rewrite it. A draft cannot be
-`ready` with `previewBudgetStatus: fail`. A draft may be `ready` with
+`ready` with `previewBudgetStatus: fail`, with no rendered preview block, or
+with only a character-count claim. A draft may be `ready` with
 `previewBudgetStatus: warn` only when the warning is explicit, usually because
-the user prefers blank-line rhythm, and the receipt includes a compact fallback.
+the user prefers blank-line rhythm, separators, or a deliberate open loop, and
+the receipt includes a compact fallback.
 
 ## Simplifier / Concrete-Language Audit