@ompo-design/mcp-server 0.1.5 → 0.1.7

package/dist/apply-plan.js

@@ -1,7 +1,8 @@
 const OMPO_GLOSSARY = {
     gap: `Ompo "Gap" is the space between children inside a flex or grid container. Apply \`gap\` on the parent layout element (not on children). The parent needs \`display: flex\` or \`display: grid\`. Example: gap "16px" → CSS \`gap: 16px\` or Tailwind \`gap-4\`.`,
     fill: `Ompo "Fill" means an element should expand to consume free space inside its parent. Fill is NOT a CSS property — read \`widthMode: fill\` / \`heightMode: fill\` together with \`ensureParentFlex\`, \`flexGrow\`, \`flexShrink\`, \`flexBasis\`, and \`alignSelf\` on the same selector. Parent must be \`display: flex\`. Main axis (direction of flex): use \`flex: 1 1 0\` (grow/shrink/basis). Cross axis: use \`align-self: stretch\` and remove fixed width/height on that axis. If \`ensureParentFlex\` is present, make the parent a flex container with that direction first.`,
-    fit: `Ompo "Fit" means size to content. Map \`widthMode: fit\` → \`width: fit-content\`, \`heightMode: fit\` → \`height: fit-content\` (or the project's equivalent).`
+    fit: `Ompo "Fit" means size to content. Map \`widthMode: fit\` → \`width: fit-content\`, \`heightMode: fit\` → \`height: fit-content\` (or the project's equivalent).`,
+    imageFill: `Ompo image background fill: copy the source file from \`backgroundImageSource\` into the project (e.g. public/images/), then set \`background-image\` to a project-relative url(), with \`background-size: cover\`, \`background-position: center\`, and \`background-repeat: no-repeat\`. Do not commit file:// URLs to source.`
 };
 function formatChangedValue(property, value) {
     const text = String(value);
@@ -103,6 +104,35 @@ function styleSuggestionForProperty(property, value, changed) {
                 strategy: 'css-rule',
                 notes: 'Supporting constraint for Ompo Fill sizing. max-width/max-height: none allows the element to grow.'
             };
+        case 'backgroundImageSource':
+            return {
+                property,
+                value: formatChangedValue(property, value),
+                strategy: 'component-markup',
+                notes: `${OMPO_GLOSSARY.imageFill} Read this file from the user's machine (${String(value)}), copy it into the repo, and reference the copied asset in CSS.`
+            };
+        case 'backgroundImage':
+            if (changed.backgroundImageSource) {
+                return {
+                    property,
+                    value: formatChangedValue(property, value),
+                    strategy: 'css-rule',
+                    notes: `${OMPO_GLOSSARY.imageFill} Apply after copying the file from backgroundImageSource.`
+                };
+            }
+            break;
+        case 'backgroundSize':
+        case 'backgroundPosition':
+        case 'backgroundRepeat':
+            if (changed.backgroundImageSource) {
+                return {
+                    property,
+                    value: formatChangedValue(property, value),
+                    strategy: 'css-rule',
+                    notes: `Part of Ompo image background fill (${OMPO_GLOSSARY.imageFill}).`
+                };
+            }
+            break;
     }
     return {
         property,

package/dist/index.js

@@ -6,9 +6,10 @@ import { buildApplyPlan, explainEdit } from './apply-plan.js';
 import { runCli } from './cli.js';
 import { editsStoreReady, listEdits, readEditBundle, recordEditApplied, recordEditPull } from './edit-store.js';
 import { getOmpoEditsStorePath } from './edits-path.js';
+import { consumeMcpToken, McpTokenError } from './tokens.js';
 const server = new McpServer({
     name: 'ompo-mcp-server',
-    version: '0.1.5'
+    version: '0.1.7'
 });
 function requireEditsStore() {
     const storePath = getOmpoEditsStorePath();
@@ -17,47 +18,86 @@ function requireEditsStore() {
     }
     return storePath;
 }
-server.tool('list_edits', 'List Ompo edit bundles saved on this machine', {}, async () => {
-    const storePath = requireEditsStore();
-    const edits = listEdits();
+async function withMcpTokenUse(toolName, handler) {
+    const tokensRemaining = await consumeMcpToken(toolName);
+    return handler(tokensRemaining);
+}
+function tokenErrorResult(error) {
+    const message = error instanceof McpTokenError
+        ? error.message
+        : 'Could not verify MCP token balance. Check your connection and try again.';
     return {
         content: [
             {
                 type: 'text',
-                text: JSON.stringify({ storePath, edits }, null, 2)
+                text: message
             }
-        ]
+        ],
+        isError: true
     };
+}
+server.tool('list_edits', 'List Ompo edit bundles saved on this machine', {}, async () => {
+    try {
+        return await withMcpTokenUse('list_edits', async (tokensRemaining) => {
+            const storePath = requireEditsStore();
+            const edits = listEdits();
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: JSON.stringify({ storePath, edits, tokensRemaining }, null, 2)
+                    }
+                ]
+            };
+        });
+    }
+    catch (error) {
+        return tokenErrorResult(error);
+    }
 });
 server.tool('get_edit', 'Load a specific Ompo edit bundle by id', {
     id: z.string().describe('Edit id, e.g. ed_8K42P')
 }, async ({ id }) => {
-    requireEditsStore();
-    const bundle = readEditBundle(id);
-    recordEditPull(id);
-    return {
-        content: [
-            {
-                type: 'text',
-                text: JSON.stringify(bundle, null, 2)
-            }
-        ]
-    };
+    try {
+        return await withMcpTokenUse('get_edit', async (tokensRemaining) => {
+            requireEditsStore();
+            const bundle = readEditBundle(id);
+            recordEditPull(id);
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: `${JSON.stringify(bundle, null, 2)}\n\nTokens remaining: ${tokensRemaining}`
+                    }
+                ]
+            };
+        });
+    }
+    catch (error) {
+        return tokenErrorResult(error);
+    }
 });
 server.tool('explain_edit', 'Summarize what an Ompo edit changes', {
     id: z.string().describe('Edit id, e.g. ed_8K42P')
 }, async ({ id }) => {
-    requireEditsStore();
-    const bundle = readEditBundle(id);
-    recordEditPull(id);
-    return {
-        content: [
-            {
-                type: 'text',
-                text: explainEdit(bundle)
-            }
-        ]
-    };
+    try {
+        return await withMcpTokenUse('explain_edit', async (tokensRemaining) => {
+            requireEditsStore();
+            const bundle = readEditBundle(id);
+            recordEditPull(id);
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: `${explainEdit(bundle)}\n\nTokens remaining: ${tokensRemaining}`
+                    }
+                ]
+            };
+        });
+    }
+    catch (error) {
+        return tokenErrorResult(error);
+    }
 });
 server.tool('apply_edit', 'Build an apply plan for an Ompo edit. The agent should execute the plan against source files in the open codebase and only change listed properties.', {
     id: z.string().describe('Edit id, e.g. ed_8K42P'),
@@ -66,21 +106,28 @@ server.tool('apply_edit', 'Build an apply plan for an Ompo edit. The agent shoul
         .optional()
         .describe('Set true after the agent successfully applies the edit')
 }, async ({ id, markApplied }) => {
-    requireEditsStore();
-    const bundle = readEditBundle(id);
-    recordEditPull(id);
-    const plan = buildApplyPlan(bundle);
-    if (markApplied) {
-        recordEditApplied(id);
-    }
-    return {
-        content: [
-            {
-                type: 'text',
-                text: JSON.stringify(plan, null, 2)
+    try {
+        return await withMcpTokenUse('apply_edit', async (tokensRemaining) => {
+            requireEditsStore();
+            const bundle = readEditBundle(id);
+            recordEditPull(id);
+            const plan = buildApplyPlan(bundle);
+            if (markApplied) {
+                recordEditApplied(id);
             }
-        ]
-    };
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: JSON.stringify({ ...plan, tokensRemaining }, null, 2)
+                    }
+                ]
+            };
+        });
+    }
+    catch (error) {
+        return tokenErrorResult(error);
+    }
 });
 async function main() {
     if (runCli(process.argv.slice(2)))

package/dist/session.d.ts

@@ -0,0 +1,9 @@
+export type OmpoMcpSession = {
+    userId: string;
+    accessToken: string;
+    supabaseUrl: string;
+    supabaseAnonKey: string;
+    updatedAt: string;
+};
+export declare function getOmpoMcpSessionPath(): string;
+export declare function readOmpoMcpSession(): OmpoMcpSession | null;

package/dist/session.js

@@ -0,0 +1,30 @@
+import { existsSync, readFileSync } from 'fs';
+import { homedir } from 'os';
+import { join } from 'path';
+export function getOmpoMcpSessionPath() {
+    return join(homedir(), '.ompo', 'session.json');
+}
+export function readOmpoMcpSession() {
+    const sessionPath = getOmpoMcpSessionPath();
+    if (!existsSync(sessionPath))
+        return null;
+    try {
+        const parsed = JSON.parse(readFileSync(sessionPath, 'utf8'));
+        if (typeof parsed.userId !== 'string' ||
+            typeof parsed.accessToken !== 'string' ||
+            typeof parsed.supabaseUrl !== 'string' ||
+            typeof parsed.supabaseAnonKey !== 'string') {
+            return null;
+        }
+        return {
+            userId: parsed.userId,
+            accessToken: parsed.accessToken,
+            supabaseUrl: parsed.supabaseUrl,
+            supabaseAnonKey: parsed.supabaseAnonKey,
+            updatedAt: typeof parsed.updatedAt === 'string' ? parsed.updatedAt : new Date(0).toISOString()
+        };
+    }
+    catch {
+        return null;
+    }
+}

package/dist/tokens.d.ts

@@ -0,0 +1,5 @@
+export declare class McpTokenError extends Error {
+    code: 'NOT_SIGNED_IN' | 'INSUFFICIENT_TOKENS' | 'TOKEN_SERVICE_UNAVAILABLE';
+    constructor(code: McpTokenError['code'], message: string);
+}
+export declare function consumeMcpToken(toolName: string): Promise<number>;

package/dist/tokens.js

@@ -0,0 +1,49 @@
+import { createClient } from '@supabase/supabase-js';
+import { readOmpoMcpSession } from './session.js';
+export class McpTokenError extends Error {
+    code;
+    constructor(code, message) {
+        super(message);
+        this.name = 'McpTokenError';
+        this.code = code;
+    }
+}
+function mapRpcError(message) {
+    const normalized = message.toUpperCase();
+    if (normalized.includes('NOT_AUTHENTICATED') || normalized.includes('JWT')) {
+        return new McpTokenError('NOT_SIGNED_IN', 'Sign in to Ompo and keep the app open so your MCP session stays active.');
+    }
+    if (normalized.includes('INSUFFICIENT_TOKENS')) {
+        return new McpTokenError('INSUFFICIENT_TOKENS', 'You are out of MCP tokens. Add more tokens to your account before using Ompo MCP tools.');
+    }
+    return new McpTokenError('TOKEN_SERVICE_UNAVAILABLE', 'Could not verify MCP token balance. Check your connection and try again.');
+}
+export async function consumeMcpToken(toolName) {
+    const session = readOmpoMcpSession();
+    if (!session) {
+        throw new McpTokenError('NOT_SIGNED_IN', 'Sign in to Ompo and keep the app open so your MCP session stays active.');
+    }
+    const supabase = createClient(session.supabaseUrl, session.supabaseAnonKey, {
+        auth: {
+            persistSession: false,
+            autoRefreshToken: false,
+            detectSessionInUrl: false
+        },
+        global: {
+            headers: {
+                Authorization: `Bearer ${session.accessToken}`
+            }
+        }
+    });
+    const { data, error } = await supabase.rpc('consume_mcp_token', {
+        p_tool_name: toolName
+    });
+    if (error) {
+        throw mapRpcError(error.message);
+    }
+    const tokensRemaining = data?.tokens_remaining;
+    if (typeof tokensRemaining !== 'number') {
+        throw new McpTokenError('TOKEN_SERVICE_UNAVAILABLE', 'Could not verify MCP token balance. Check your connection and try again.');
+    }
+    return tokensRemaining;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ompo-design/mcp-server",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "MCP server for applying Ompo visual edits to a codebase",
   "type": "module",
   "license": "MIT",
@@ -12,7 +12,7 @@
     "claude-code"
   ],
   "bin": {
-    "ompo-mcp": "./dist/index.js"
+    "ompo-mcp": "dist/index.js"
   },
   "main": "./dist/index.js",
   "files": [
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.12.0",
+    "@supabase/supabase-js": "^2.49.8",
     "zod": "^3.24.2"
   },
   "devDependencies": {