@sarjallab09/figma-intelligence 1.0.0

package/figma-intelligence-layer/tests/design-system-context.test.ts

@@ -0,0 +1,152 @@
+import { DesignSystemContextStore } from "../src/shared/design-system-context";
+import { FigmaBridgeEvent, FigmaBridgeEventType } from "../src/shared/types";
+
+class FakeBridge {
+  private listeners = new Map<FigmaBridgeEventType | "*", Set<(event: FigmaBridgeEvent) => void>>();
+
+  getStatus = jest.fn(async () => ({
+    fileName: "Design System",
+    currentPage: { id: "10:1", name: "Components" },
+  }));
+
+  getAllPages = jest.fn(async () => [
+    { id: "10:1", name: "Components" },
+    { id: "10:2", name: "Patterns" },
+  ]);
+
+  getComponentSets = jest.fn(async () => [
+    {
+      id: "set-button",
+      name: "Button/Primary",
+      description: "Primary CTA button",
+      variantGroupProperties: {
+        Size: { values: ["Sm", "Md", "Lg"] },
+        State: { values: ["Default", "Hover"] },
+      },
+      children: [
+        { id: "cmp-btn-sm", name: "Size=Sm, State=Default", type: "COMPONENT" },
+        { id: "cmp-btn-md", name: "Size=Md, State=Hover", type: "COMPONENT" },
+      ],
+    },
+    {
+      id: "set-input",
+      name: "Form/Input Field",
+      description: "Text input",
+      variantGroupProperties: {},
+      children: [
+        { id: "cmp-input", name: "State=Default", type: "COMPONENT" },
+      ],
+    },
+  ]);
+
+  getTokens = jest.fn(async () => [
+    {
+      id: "tok-bg",
+      name: "Color/Background/Default",
+      type: "COLOR",
+      value: "#fff",
+      collectionId: "col-1",
+    },
+    {
+      id: "tok-space",
+      name: "Space/16",
+      type: "FLOAT",
+      value: 16,
+      collectionId: "col-1",
+    },
+  ]);
+
+  getStyles = jest.fn(async () => ({
+    text: [{ id: "style-heading", name: "Heading/L" }],
+    paint: [{ id: "style-surface", name: "Surface/Default" }],
+  }));
+
+  getAllInstances = jest.fn(async () => [
+    { id: "inst-1", mainComponentId: "cmp-btn-sm", name: "Button", pageId: "10:2" },
+    { id: "inst-2", mainComponentId: "cmp-btn-sm", name: "Button", pageId: "10:2" },
+    { id: "inst-3", mainComponentId: "cmp-input", name: "Input", pageId: "10:2" },
+  ]);
+
+  onEvent(eventType: FigmaBridgeEventType | "*", listener: (event: FigmaBridgeEvent) => void) {
+    const listeners = this.listeners.get(eventType) ?? new Set();
+    listeners.add(listener);
+    this.listeners.set(eventType, listeners);
+    return () => listeners.delete(listener);
+  }
+
+  emit(eventType: FigmaBridgeEventType, payload: unknown, timestamp = Date.now()) {
+    const event: FigmaBridgeEvent = {
+      type: "bridge-event",
+      eventType,
+      payload,
+      timestamp,
+    };
+
+    for (const listener of this.listeners.get(eventType) ?? []) {
+      listener(event);
+    }
+    for (const listener of this.listeners.get("*") ?? []) {
+      listener(event);
+    }
+  }
+}
+
+describe("DesignSystemContextStore", () => {
+  test("builds indexes and intelligence from bridge data", async () => {
+    const bridge = new FakeBridge();
+    const store = new DesignSystemContextStore(bridge as never);
+
+    const snapshot = await store.hydrate();
+
+    expect(snapshot.inventory.componentSets).toHaveLength(2);
+    expect(snapshot.indexes.componentById.get("cmp-btn-sm")).toMatchObject({
+      setId: "set-button",
+      normalizedName: "size sm state default",
+    });
+    expect(snapshot.intelligence.variantSchemas["set-button"]).toEqual({
+      properties: {
+        size: ["lg", "md", "sm"],
+        state: ["default", "hover"],
+      },
+    });
+    expect(snapshot.intelligence.semanticTokenGroups["color.background"]).toEqual(["tok-bg"]);
+    expect(snapshot.intelligence.preferredComponentsByIntent["primary-action"][0]).toBe("set-button");
+  });
+
+  test("refreshes page-scoped inventories on bridge page changes", async () => {
+    const bridge = new FakeBridge();
+    const store = new DesignSystemContextStore(bridge as never);
+
+    await store.hydrate();
+    bridge.emit("currentpagechange", { currentPage: { id: "10:2", name: "Patterns" } });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(bridge.getComponentSets).toHaveBeenCalledTimes(2);
+    expect(bridge.getAllInstances).toHaveBeenCalledTimes(2);
+  });
+
+  test("debounces document changes into one refresh", async () => {
+    jest.useFakeTimers();
+    const bridge = new FakeBridge();
+    const store = new DesignSystemContextStore(bridge as never);
+
+    await store.hydrate();
+    bridge.getComponentSets.mockClear();
+    bridge.getAllInstances.mockClear();
+
+    bridge.emit("documentchange", {
+      documentChanges: [{ type: "PROPERTY_CHANGE", nodeType: "COMPONENT_SET", nodeId: "set-button" }],
+    });
+    bridge.emit("documentchange", {
+      documentChanges: [{ type: "PROPERTY_CHANGE", nodeType: "INSTANCE", nodeId: "inst-1" }],
+    });
+
+    jest.advanceTimersByTime(60);
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(bridge.getComponentSets).toHaveBeenCalledTimes(1);
+    expect(bridge.getAllInstances).toHaveBeenCalledTimes(1);
+    jest.useRealTimers();
+  });
+});

package/figma-intelligence-layer/tests/design-system-matcher.test.ts

@@ -0,0 +1,144 @@
+import { matchComponentInContext } from "../src/shared/design-system-matcher";
+import { DesignSystemContext } from "../src/shared/design-system-context";
+
+function makeContext(): DesignSystemContext {
+  const buttonSet = {
+    id: "set-button-primary",
+    name: "Button/Primary",
+    normalizedName: "button primary",
+    description: "Primary action button",
+    childComponentIds: ["cmp-button-primary"],
+    variantSchema: {
+      properties: {
+        size: ["sm", "md", "lg"],
+        state: ["default", "hover", "disabled"],
+      },
+    },
+    intents: ["button", "primary-action"],
+  };
+
+  const ctaSet = {
+    id: "set-cta",
+    name: "CTA Button",
+    normalizedName: "cta button",
+    description: "Marketing CTA",
+    childComponentIds: ["cmp-cta"],
+    variantSchema: {
+      properties: {
+        size: ["md"],
+      },
+    },
+    intents: ["button", "primary-action"],
+  };
+
+  return {
+    file: {
+      fileName: "DS",
+      pageId: "1:1",
+      pageName: "Components",
+      lastSyncedAt: Date.now(),
+      source: "live",
+    },
+    inventory: {
+      componentSets: [buttonSet, ctaSet],
+      components: [
+        {
+          id: "cmp-button-primary",
+          setId: "set-button-primary",
+          name: "Size=Md, State=Default",
+          normalizedName: "size md, state default",
+          variantProps: { size: "md", state: "default" },
+          intents: ["button", "primary-action"],
+        },
+        {
+          id: "cmp-cta",
+          setId: "set-cta",
+          name: "Default",
+          normalizedName: "default",
+          variantProps: { size: "md" },
+          intents: ["button", "primary-action"],
+        },
+      ],
+      variables: [],
+      styles: [],
+      pages: [{ id: "1:1", name: "Components" }],
+      instances: [
+        { id: "inst-1", name: "Button", mainComponentId: "cmp-button-primary", pageId: "1:1" },
+        { id: "inst-2", name: "Button", mainComponentId: "cmp-button-primary", pageId: "1:1" },
+        { id: "inst-3", name: "Button", mainComponentId: "cmp-button-primary", pageId: "1:1" },
+        { id: "inst-4", name: "CTA", mainComponentId: "cmp-cta", pageId: "1:1" },
+      ],
+    },
+    indexes: {
+      componentById: new Map(),
+      componentSetById: new Map([
+        ["set-button-primary", buttonSet],
+        ["set-cta", ctaSet],
+      ]),
+      tokenById: new Map(),
+      styleById: new Map(),
+      componentsByNormalizedName: new Map(),
+      tokensByNormalizedName: new Map(),
+      componentsByIntent: new Map(),
+    },
+    intelligence: {
+      aliases: {
+        "set-button-primary": ["button primary"],
+        "set-cta": ["cta button"],
+      },
+      variantSchemas: {
+        "set-button-primary": buttonSet.variantSchema!,
+        "set-cta": ctaSet.variantSchema!,
+      },
+      semanticTokenGroups: {},
+      preferredComponentsByIntent: {
+        "primary-action": ["set-button-primary", "set-cta"],
+        button: ["set-button-primary", "set-cta"],
+      },
+      namingRules: [],
+    },
+    freshness: {
+      componentSets: Date.now(),
+      variables: Date.now(),
+      styles: Date.now(),
+      pages: Date.now(),
+      instances: Date.now(),
+    },
+  };
+}
+
+describe("matchComponentInContext", () => {
+  test("matches slight name differences to the preferred DS component", () => {
+    const context = makeContext();
+
+    const result = matchComponentInContext(
+      {
+        componentType: "Primary button",
+        textContent: "Continue",
+        variants: { Size: "md", State: "default" },
+        interactiveElement: true,
+      },
+      context,
+      0.6
+    );
+
+    expect(result.component?.id).toBe("set-button-primary");
+    expect(result.confidence).toBeGreaterThan(0.7);
+  });
+
+  test("returns a fallback suggestion when confidence stays low", () => {
+    const context = makeContext();
+
+    const result = matchComponentInContext(
+      {
+        componentType: "Wizard timeline",
+        textContent: "Step 1",
+      },
+      context,
+      0.95
+    );
+
+    expect(result.component).toBeNull();
+    expect(result.fallbackSuggestion).toContain("Closest match");
+  });
+});

package/figma-intelligence-layer/tests/figma-bridge.test.ts

@@ -0,0 +1,83 @@
+import { FigmaBridge } from "../src/shared/figma-bridge";
+
+describe("FigmaBridge live context", () => {
+  test("updates context and notifies listeners from bridge events", () => {
+    const bridge = new FigmaBridge();
+    const seen: string[] = [];
+
+    bridge.onEvent("*", (event) => {
+      seen.push(event.eventType);
+    });
+
+    bridge.handleIncomingMessage(JSON.stringify({
+      type: "bridge-event",
+      eventType: "bridge.ready",
+      payload: {
+        fileName: "Design System",
+        currentPage: { id: "10:1", name: "Components" },
+        pageCount: 3,
+        selection: [{ id: "20:1", name: "Button", type: "COMPONENT" }],
+      },
+      timestamp: 101,
+    }));
+
+    bridge.handleIncomingMessage(JSON.stringify({
+      type: "bridge-event",
+      eventType: "documentchange",
+      payload: {
+        documentChanges: [{ type: "PROPERTY_CHANGE", nodeId: "20:1", nodeType: "COMPONENT" }],
+      },
+      timestamp: 202,
+    }));
+
+    expect(seen).toEqual(["bridge.ready", "documentchange"]);
+    expect(bridge.getContextSnapshot()).toMatchObject({
+      status: "connected",
+      fileName: "Design System",
+      currentPage: { id: "10:1", name: "Components" },
+      pageCount: 3,
+      selection: [{ id: "20:1", name: "Button", type: "COMPONENT" }],
+      lastDocumentChange: {
+        documentChanges: [{ type: "PROPERTY_CHANGE", nodeId: "20:1", nodeType: "COMPONENT" }],
+      },
+      lastUpdatedAt: 202,
+    });
+  });
+
+  test("serves cached status and selection from live context", async () => {
+    const bridge = new FigmaBridge();
+
+    bridge.handleIncomingMessage(JSON.stringify({
+      type: "bridge-event",
+      eventType: "bridge.ready",
+      payload: {
+        fileName: "Marketing Site",
+        currentPage: { id: "1:2", name: "Homepage" },
+        pageCount: 5,
+        selection: [],
+      },
+      timestamp: 555,
+    }));
+
+    bridge.handleIncomingMessage(JSON.stringify({
+      type: "bridge-event",
+      eventType: "selectionchange",
+      payload: {
+        selection: [{ id: "5:9", name: "Hero", type: "FRAME" }],
+      },
+      timestamp: 777,
+    }));
+
+    await expect(bridge.getStatus()).resolves.toMatchObject({
+      status: "connected",
+      fileName: "Marketing Site",
+      currentPage: { id: "1:2", name: "Homepage" },
+      pageCount: 5,
+      timestamp: 777,
+    });
+
+    await expect(bridge.getSelection()).resolves.toEqual([
+      { id: "5:9", name: "Hero", type: "FRAME" },
+    ]);
+  });
+});

package/figma-intelligence-layer/tests/generate-image-and-insert.test.ts

@@ -0,0 +1,56 @@
+import { execFileSync } from "child_process";
+import { resolve } from "path";
+
+const SERVER_PATH = resolve(__dirname, "../dist/index.js");
+
+function mcpCall(...messages: object[]): object[] {
+  const input = messages.map((m) => JSON.stringify(m)).join("\n") + "\n";
+  const raw = execFileSync("node", [SERVER_PATH], {
+    input,
+    timeout: 10_000,
+    encoding: "utf-8",
+    env: { ...process.env, NODE_NO_WARNINGS: "1" },
+  });
+  return raw
+    .split("\n")
+    .filter(Boolean)
+    .map((line) => JSON.parse(line));
+}
+
+const INIT_MSG = {
+  jsonrpc: "2.0",
+  id: 1,
+  method: "initialize",
+  params: {
+    protocolVersion: "2024-11-05",
+    capabilities: {},
+    clientInfo: { name: "tool-test", version: "0.1" },
+  },
+};
+
+const INITIALIZED_NOTIFICATION = {
+  jsonrpc: "2.0",
+  method: "notifications/initialized",
+};
+
+describe("figma_generate_image_and_insert tool metadata", () => {
+  test("appears in the MCP tool list with expected schema", () => {
+    const responses = mcpCall(
+      INIT_MSG,
+      INITIALIZED_NOTIFICATION,
+      {
+        jsonrpc: "2.0",
+        id: 2,
+        method: "tools/list",
+        params: {},
+      }
+    );
+
+    const toolList = responses.find((response: any) => response.id === 2) as any;
+    const tool = toolList.result.tools.find((entry: any) => entry.name === "figma_generate_image_and_insert");
+
+    expect(tool).toBeDefined();
+    expect(tool.inputSchema.required).toContain("prompt");
+    expect(tool.inputSchema.properties.provider.enum).toEqual(["gemini", "automatic1111", "comfyui"]);
+  });
+});

package/figma-intelligence-layer/tests/screen-cloner-regression.test.ts

@@ -0,0 +1,69 @@
+import fs from "fs/promises";
+import os from "os";
+import path from "path";
+import sharp from "sharp";
+import { resolveLogPath } from "../src/shared/decision-log.js";
+import { resolveImage } from "../src/tools/phase1-vision/screen-cloner/index.js";
+
+describe("screen cloner regressions", () => {
+  const originalCodexHome = process.env.CODEX_HOME;
+  const originalDecisionLogPath = process.env.DECISION_LOG_PATH;
+  let tempDir: string;
+
+  beforeEach(async () => {
+    tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "figma-cloner-test-"));
+    delete process.env.DECISION_LOG_PATH;
+    process.env.CODEX_HOME = tempDir;
+  });
+
+  afterEach(async () => {
+    if (originalCodexHome === undefined) {
+      delete process.env.CODEX_HOME;
+    } else {
+      process.env.CODEX_HOME = originalCodexHome;
+    }
+
+    if (originalDecisionLogPath === undefined) {
+      delete process.env.DECISION_LOG_PATH;
+    } else {
+      process.env.DECISION_LOG_PATH = originalDecisionLogPath;
+    }
+
+    await fs.rm(tempDir, { recursive: true, force: true });
+    jest.restoreAllMocks();
+  });
+
+  test("resolveLogPath falls back to CODEX_HOME when cwd is not writable", async () => {
+    jest.spyOn(process, "cwd").mockReturnValue("/");
+
+    const resolved = await resolveLogPath();
+
+    expect(resolved).toBe(path.join(tempDir, "figma-intelligence-layer", ".decision-log.json"));
+  });
+
+  test("resolveImage converts local webp files into a real png data URI", async () => {
+    const webpPath = path.join(tempDir, "sample.webp");
+    await sharp({
+      create: {
+        width: 6,
+        height: 4,
+        channels: 4,
+        background: { r: 255, g: 0, b: 0, alpha: 1 },
+      },
+    })
+      .webp()
+      .toFile(webpPath);
+
+    const resolved = await resolveImage(webpPath);
+
+    expect(resolved.startsWith("data:image/png;base64,")).toBe(true);
+
+    const metadata = await sharp(
+      Buffer.from(resolved.replace(/^data:image\/png;base64,/, ""), "base64")
+    ).metadata();
+
+    expect(metadata.format).toBe("png");
+    expect(metadata.width).toBe(6);
+    expect(metadata.height).toBe(4);
+  });
+});

package/figma-intelligence-layer/tests/smoke.test.ts

@@ -0,0 +1,174 @@
+/**
+ * Smoke tests for figma-intelligence-layer MCP server.
+ * Validates: server startup, tool count, tool listing, and tool call dispatch.
+ *
+ * Run: npx jest tests/smoke.test.ts
+ */
+
+import { execFileSync } from "child_process";
+import { resolve } from "path";
+
+const SERVER_PATH = resolve(__dirname, "../dist/index.js");
+
+/** Send JSON-RPC messages via stdin and return parsed stdout lines */
+function mcpCall(...messages: object[]): object[] {
+  const input = messages.map((m) => JSON.stringify(m)).join("\n") + "\n";
+  const raw = execFileSync("node", [SERVER_PATH], {
+    input,
+    timeout: 10_000,
+    encoding: "utf-8",
+    env: { ...process.env, NODE_NO_WARNINGS: "1" },
+  });
+  return raw
+    .split("\n")
+    .filter(Boolean)
+    .map((line) => JSON.parse(line));
+}
+
+const INIT_MSG = {
+  jsonrpc: "2.0",
+  id: 1,
+  method: "initialize",
+  params: {
+    protocolVersion: "2024-11-05",
+    capabilities: {},
+    clientInfo: { name: "smoke-test", version: "0.1" },
+  },
+};
+
+const INITIALIZED_NOTIFICATION = {
+  jsonrpc: "2.0",
+  method: "notifications/initialized",
+};
+
+const LIST_TOOLS_MSG = {
+  jsonrpc: "2.0",
+  id: 2,
+  method: "tools/list",
+  params: {},
+};
+
+const EXPECTED_TOOL_NAMES = [
+  "figma_screen_cloner",
+  "figma_visual_audit",
+  "figma_a11y_audit",
+  "figma_sketch_to_design",
+  "figma_design_from_ref",
+  "figma_intent_translator",
+  "figma_layout_intelligence",
+  "figma_variant_expander",
+  "figma_theme_generator",
+  "figma_lint_rules",
+  "figma_component_audit",
+  "figma_component_archaeologist",
+  "figma_page_architect",
+  "figma_generate_image_and_insert",
+  "figma_unsplash_search",
+  "figma_url_to_frame",
+  "figma_system_drift",
+  "figma_prototype_map",
+  "figma_animation_specifier",
+  "figma_sync_from_code",
+  "figma_webhook_listener",
+  "figma_design_system_scaffolder",
+  "figma_design_system_primitives",
+  "figma_design_system_variables",
+  "figma_token_naming_convention",
+  "figma_token_migrate",
+  "figma_decision_log",
+  "figma_health_report",
+  "figma_generate_spec",
+  "figma_apg_doc",
+  "figma_execute",
+  "figma_get_status",
+  "figma_navigate",
+  "figma_get_selection",
+  "figma_take_screenshot",
+  "figma_get_node",
+  "figma_create_variable_collection",
+  "figma_create_variable",
+  "figma_update_variable",
+  "figma_delete_variable",
+  "figma_rename_variable",
+  "figma_delete_variable_collection",
+  "figma_add_mode",
+  "figma_rename_mode",
+  "figma_batch_create_variables",
+  "figma_batch_update_variables",
+  "figma_get_variables",
+  "figma_clone_node",
+  "figma_delete_node",
+  "figma_move_node",
+  "figma_resize_node",
+  "figma_rename_node",
+  "figma_set_fills",
+  "figma_set_strokes",
+  "figma_set_text",
+  "figma_search_components",
+  "figma_instantiate_component",
+  "figma_set_description",
+  "figma_get_styles",
+  "figma_create_child",
+  "figma_get_pages",
+  "figma_create_page",
+];
+
+describe("MCP Server Smoke Tests", () => {
+  test("server initializes and returns correct protocol version", () => {
+    const [initResp] = mcpCall(INIT_MSG);
+    expect(initResp).toMatchObject({
+      jsonrpc: "2.0",
+      id: 1,
+      result: {
+        protocolVersion: "2024-11-05",
+        serverInfo: {
+          name: "figma-intelligence-layer",
+          version: "1.0.0",
+        },
+        capabilities: { tools: {} },
+      },
+    });
+  });
+
+  test("lists the full current toolset", () => {
+    const responses = mcpCall(INIT_MSG, INITIALIZED_NOTIFICATION, LIST_TOOLS_MSG);
+    const toolsResp = responses.find((r: any) => r.id === 2) as any;
+    expect(toolsResp.result.tools).toHaveLength(EXPECTED_TOOL_NAMES.length);
+  });
+
+  test("all expected tool names are present", () => {
+    const responses = mcpCall(INIT_MSG, INITIALIZED_NOTIFICATION, LIST_TOOLS_MSG);
+    const toolsResp = responses.find((r: any) => r.id === 2) as any;
+    const names: string[] = toolsResp.result.tools.map((t: any) => t.name);
+
+    expect(names).toHaveLength(EXPECTED_TOOL_NAMES.length);
+
+    for (const tool of EXPECTED_TOOL_NAMES) {
+      expect(names).toContain(tool);
+    }
+  });
+
+  test("every tool has inputSchema with type=object", () => {
+    const responses = mcpCall(INIT_MSG, INITIALIZED_NOTIFICATION, LIST_TOOLS_MSG);
+    const toolsResp = responses.find((r: any) => r.id === 2) as any;
+
+    for (const tool of toolsResp.result.tools) {
+      expect(tool.inputSchema).toBeDefined();
+      expect(tool.inputSchema.type).toBe("object");
+      expect(tool.inputSchema.properties).toBeDefined();
+    }
+  });
+
+  test("calling an unknown tool returns an error", () => {
+    const callMsg = {
+      jsonrpc: "2.0",
+      id: 3,
+      method: "tools/call",
+      params: { name: "nonexistent_tool", arguments: {} },
+    };
+    const responses = mcpCall(INIT_MSG, INITIALIZED_NOTIFICATION, callMsg);
+    const callResp = responses.find((r: any) => r.id === 3) as any;
+    expect(callResp.result.isError).toBe(true);
+    expect(callResp.result.content[0].text).toContain("Unknown tool");
+  });
+});