Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/vscode-extension/src/commands/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './new-wireframe';
export * from './register';
11 changes: 11 additions & 0 deletions packages/vscode-extension/src/commands/new-wireframe.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import * as vscode from 'vscode';

export const registerNewWireframeCommand = (
context: vscode.ExtensionContext
): void => {
context.subscriptions.push(
vscode.commands.registerCommand('quickmock.newWireframe', () => {
vscode.window.showInformationMessage('New wireframe coming soon'); // TODO: Implement the actual functionality for creating a new wireframe
})
);
};
10 changes: 10 additions & 0 deletions packages/vscode-extension/src/commands/register.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import * as vscode from 'vscode';
import { registerNewWireframeCommand } from './new-wireframe';

/**
* Registers all VS Code commands exposed by the extension.
* @param context The VS Code extension context.
*/
export const registerCommands = (context: vscode.ExtensionContext): void => {
registerNewWireframeCommand(context);
};
1 change: 1 addition & 0 deletions packages/vscode-extension/src/core/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ export * from './config';
export * from './document-registry';
export * from './logger';
export * from './paths';
export * from './workspace';
5 changes: 5 additions & 0 deletions packages/vscode-extension/src/core/workspace.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import * as vscode from 'vscode';

export const getPrimaryWorkspaceFolder = ():
| vscode.WorkspaceFolder
| undefined => vscode.workspace.workspaceFolders?.[0];
29 changes: 5 additions & 24 deletions packages/vscode-extension/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,34 +1,15 @@
import { logError, onAppUrlChange, syncAppUrlFile } from '#core';
import { registerCommands } from '#commands';
import { onAppUrlChange, syncAppUrlFile } from '#core';
import { QuickMockEditorProvider } from '#editor';
import {
registerMcpServer,
registerQuickMockMcpServerProvider,
RegistryServer,
} from '#mcp';
import { setupMcp } from '#mcp';
import * as vscode from 'vscode';

export const activate = (context: vscode.ExtensionContext) => {
syncAppUrlFile();
context.subscriptions.push(onAppUrlChange(syncAppUrlFile));

context.subscriptions.push(QuickMockEditorProvider.register(context));

const registryServer = new RegistryServer();
registryServer
.start(context)
.catch(err => logError('Failed to start MCP registry server:', err));

context.subscriptions.push(registerQuickMockMcpServerProvider(context));

registerMcpServer(context).catch(err =>
logError('Failed to register MCP server:', err)
);

context.subscriptions.push(
vscode.commands.registerCommand('quickmock.newWireframe', () => {
vscode.window.showInformationMessage('New wireframe coming soon');
})
);
setupMcp(context);
registerCommands(context);
};

export const deactivate = () => {};
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const TOKEN_BYTE_LENGTH = 32;
export const PORT_FILE_MODE = 0o600;
1 change: 1 addition & 0 deletions packages/vscode-extension/src/mcp/document-bridge/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './server';
93 changes: 93 additions & 0 deletions packages/vscode-extension/src/mcp/document-bridge/server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import { documentRegistry, getPrimaryWorkspaceFolder } from '#core';
import {
buildPortFilePath,
DOCUMENT_ROUTE,
encodePortFile,
LOOPBACK_HOST,
TOKEN_HEADER,
} from '@lemoncode/quickmock-registry-protocol';
import { randomBytes } from 'node:crypto';
import { unlinkSync, writeFileSync } from 'node:fs';
import {
createServer,
type IncomingMessage,
type ServerResponse,
} from 'node:http';
import * as vscode from 'vscode';
import { PORT_FILE_MODE, TOKEN_BYTE_LENGTH } from './constants';

/**
* Starts the MCP document bridge server, which serves the content of documents open in the editor to the MCP server.
* @param context The VS Code extension context.
* @returns A promise that resolves when the server has started.
*/
export const startDocumentBridge = async (
context: vscode.ExtensionContext
): Promise<void> => {
const workspaceRoot = getPrimaryWorkspaceFolder()?.uri.fsPath;
if (!workspaceRoot) return;

const portFile = buildPortFilePath(workspaceRoot);
const token = randomBytes(TOKEN_BYTE_LENGTH).toString('hex');

const handleRequest = (req: IncomingMessage, res: ServerResponse): void => {
if (req.headers[TOKEN_HEADER] !== token) {
res.writeHead(401);
res.end();
return;
}

const url = new URL(req.url ?? '/', 'http://localhost');

if (url.pathname !== DOCUMENT_ROUTE) {
res.writeHead(404);
res.end();
return;
}

const path = url.searchParams.get('path');
if (!path) {
res.writeHead(400);
res.end('Missing path parameter');
return;
}

const content = documentRegistry.get(path);
if (content === undefined) {
res.writeHead(404);
res.end('Document not open in editor');
return;
}

res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
res.end(content);
};

const server = createServer(handleRequest);

await new Promise<void>((resolve, reject) => {
server.on('error', reject);
// Get the assigned port and write it to the port file
server.listen(0, LOOPBACK_HOST, () => {
const { port } = server.address() as { port: number };
try {
writeFileSync(portFile, encodePortFile(port, token), {
mode: PORT_FILE_MODE,
});
} catch (err) {
reject(err);
return;
}
resolve();
});
});

context.subscriptions.push({
dispose: () => {
server.close();
try {
unlinkSync(portFile);
} catch {}
},
});
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { homedir } from 'node:os';
import { join } from 'node:path';
import type { ExternalMcpClient } from '../model';

export const claudeCode: ExternalMcpClient = {
label: 'Claude Code',
getConfigPath: () => join(homedir(), '.claude.json'),
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import type { ExternalMcpClient } from '../model';
import { claudeCode } from './claude-code';

export const externalClients: ExternalMcpClient[] = [claudeCode];
2 changes: 2 additions & 0 deletions packages/vscode-extension/src/mcp/external-clients/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './model';
export * from './register';
15 changes: 15 additions & 0 deletions packages/vscode-extension/src/mcp/external-clients/model.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export interface ExternalMcpClient {
label: string;
getConfigPath: () => string;
}

export interface McpFileConfig {
mcpServers?: Record<string, unknown>;
[key: string]: unknown;
}

export interface McpServerEntry {
type: 'stdio';
command: string;
args: string[];
}
65 changes: 65 additions & 0 deletions packages/vscode-extension/src/mcp/external-clients/register.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { logError, logInfo } from '#core/logger';
import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
import { dirname } from 'node:path';
import * as vscode from 'vscode';
import {
getMcpInvocation,
MCP_SERVER_ID,
type McpInvocation,
} from '../invocation';
import { externalClients } from './clients';
import type { ExternalMcpClient, McpFileConfig, McpServerEntry } from './model';

const readConfigFile = (path: string): McpFileConfig => {
try {
return JSON.parse(readFileSync(path, 'utf-8')) as McpFileConfig;
} catch {
return {};
}
};

const writeConfigFile = (path: string, data: McpFileConfig): void => {
const dir = dirname(path);
if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
writeFileSync(path, JSON.stringify(data, null, 2), 'utf-8');
};

const buildMcpServerEntry = ({
command,
args,
}: McpInvocation): McpServerEntry => ({
type: 'stdio',
command,
args,
});

const registerInClient = (
client: ExternalMcpClient,
entry: McpServerEntry
): void => {
const path = client.getConfigPath();
if (!existsSync(path) && !existsSync(dirname(path))) return;

try {
const config = readConfigFile(path);
if (!config.mcpServers) config.mcpServers = {};
config.mcpServers[MCP_SERVER_ID] = entry;
writeConfigFile(path, config);
logInfo(`MCP registered — ${client.label}`);
} catch (err) {
logError(`MCP registration failed — ${client.label}: ${String(err)}`);
}
};

/**
* Registers the MCP server configuration in external clients, such as ai assistants or tools that support MCP integration.
* @param context The VS Code extension context.
*/
export const registerExternalMcpClients = (
context: vscode.ExtensionContext
): void => {
const entry = buildMcpServerEntry(getMcpInvocation(context));
for (const client of externalClients) {
registerInClient(client, entry);
}
};
10 changes: 4 additions & 6 deletions packages/vscode-extension/src/mcp/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
export * from './mcp-client-targets';
export * from './mcp-config-file';
export * from './mcp-invocation';
export * from './mcp-registration';
export * from './registry-server';
export * from './server-definition-provider';
export * from './document-bridge';
export * from './external-clients';
export * from './setup';
export * from './vscode-provider';
2 changes: 2 additions & 0 deletions packages/vscode-extension/src/mcp/invocation/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const MCP_SERVER_ID = 'quickmock';
export const MCP_PKG = '@lemoncode/quickmock-mcp';
3 changes: 3 additions & 0 deletions packages/vscode-extension/src/mcp/invocation/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export * from './constants';
export * from './invocation';
export * from './model';
Original file line number Diff line number Diff line change
@@ -1,18 +1,15 @@
import { createRequire } from 'node:module';
import { dirname, join } from 'node:path';
import * as vscode from 'vscode';
import { MCP_PKG } from './constants';
import type { McpInvocation } from './model';

export const MCP_SERVER_ID = 'quickmock';

const MCP_PKG = '@lemoncode/quickmock-mcp';

export interface McpInvocation {
command: string;
args: string[];
}

// Production: spawn the MCP from the published npm package via npx.
// Development: spawn the local workspace build so changes are picked up on rebuild.
/**
* Resolves how the MCP child process should be spawned for the current extension mode.
* In production it points to the published npm package via `npx`; in development it points to the local workspace build so changes are picked up on rebuild.
* @param context The VS Code extension context.
* @returns The command and arguments to spawn the MCP process.
*/
export const getMcpInvocation = (
context: vscode.ExtensionContext
): McpInvocation =>
Expand Down
4 changes: 4 additions & 0 deletions packages/vscode-extension/src/mcp/invocation/model.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export interface McpInvocation {
command: string;
args: string[];
}
62 changes: 0 additions & 62 deletions packages/vscode-extension/src/mcp/mcp-client-targets.ts

This file was deleted.

Loading
Loading