refactor(mcp): migrate frontend consumers to MCP Google Photos client

KBLLR · claude · KBLLR · commit 40fccdabf79b · 2026-01-03T13:02:56.000+01:00
- Create src/shared/lib/mcp/googlePhotos.js client wrapper - Migrate PlannerCanvas GooglePhotosNode to use MCP tools - Update Zustand store fetchGooglePhotosAlbums to use MCP - Mark api.googlePhotos.* in endpoints.js as deprecated - Delete insecure src/lib/photos-revise.js (exposed client secret) Frontend now uses POST /api/mcp/execute for all Google Photos operations instead of deprecated direct routes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
diff --git a/src/apps/planner/components/PlannerCanvas.jsx b/src/apps/planner/components/PlannerCanvas.jsx
@@ -22,6 +22,7 @@ import { getAppPath } from '@routes';
 import { useQuery } from '@shared/hooks/useQuery.js';
 import { useMutation } from '@shared/hooks/useMutation.js';
 import { api, queryKeys } from '@shared/lib/dataLayer/endpoints.js';
+import { getAlbumsForDisplay, getPhotosForDisplay } from '@shared/lib/mcp/googlePhotos.js';
 
 const nodeStyles = {
   module: { className: 'node-card node-module' },
@@ -1377,7 +1378,7 @@ const GooglePhotosNode = memo(function GooglePhotosNode({ data, id }) {
     if (!isConnected) return;
     setIsLoading(true);
     try {
-      const payload = await api.googlePhotos.albums();
+      const payload = await getAlbumsForDisplay();
       setAlbums(payload.albums || []);
       updateNode(id, { ...data, albums: payload.albums || [], lastUpdated: new Date().toISOString() });
     } catch (error) {
@@ -1395,8 +1396,8 @@ const GooglePhotosNode = memo(function GooglePhotosNode({ data, id }) {
     if (!isConnected) return;
     setIsLoading(true);
     try {
-      const payload = await api.googlePhotos.mediaItems(albumId);
-      const list = (payload.mediaItems || []).map(m => ({ id: m.id, url: `${m.baseUrl}=w400-h400`, title: m.filename }));
+      const payload = await getPhotosForDisplay(albumId);
+      const list = payload.photos || [];
       setPhotos(list);
       updateNode(id, { ...data, photos: list, selectedAlbum: albumId, lastUpdated: new Date().toISOString() });
     } catch (error) {
diff --git a/src/lib/photos-revise.js b/src/lib/photos-revise.js
diff --git a/src/shared/lib/dataLayer/endpoints.js b/src/shared/lib/dataLayer/endpoints.js
@@ -197,13 +197,16 @@ export const api = {
 
   /**
    * Google Photos endpoints
+   * @deprecated Use MCP client instead: import { listAlbums, listMediaItems } from '@shared/lib/mcp/googlePhotos.js'
    */
   googlePhotos: {
     /**
      * List albums
+     * @deprecated Use MCP: import { listAlbums } from '@shared/lib/mcp/googlePhotos.js'
      * @returns {Promise<Array<Object>>}
      */
     albums: async () => {
+      console.warn('[DEPRECATED] api.googlePhotos.albums() - Use MCP client: import { listAlbums } from "@shared/lib/mcp/googlePhotos.js"');
       const response = await fetch('/api/services/googlePhotos/albums', {
         credentials: 'include',
       });
@@ -212,10 +215,12 @@ export const api = {
 
     /**
      * List media items in album
+     * @deprecated Use MCP: import { listMediaItems } from '@shared/lib/mcp/googlePhotos.js'
      * @param {string} albumId - Album ID
      * @returns {Promise<Array<Object>>}
      */
     mediaItems: async (albumId) => {
+      console.warn('[DEPRECATED] api.googlePhotos.mediaItems() - Use MCP client: import { listMediaItems } from "@shared/lib/mcp/googlePhotos.js"');
       const params = new URLSearchParams({ albumId });
       const response = await fetch(
         `/api/services/googlePhotos/mediaItems?${params.toString()}`,
diff --git a/src/shared/lib/mcp/googlePhotos.js b/src/shared/lib/mcp/googlePhotos.js
@@ -0,0 +1,142 @@
+/**
+ * Google Photos MCP Client
+ *
+ * Frontend wrapper for Google Photos MCP tools.
+ * Replaces direct API calls to /api/services/googlePhotos/*
+ */
+
+const MCP_ENDPOINT = '/api/mcp/execute';
+
+/**
+ * Execute an MCP tool
+ * @private
+ */
+async function executeTool(toolName, parameters = {}) {
+  const response = await fetch(MCP_ENDPOINT, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify({
+      toolName,
+      parameters,
+      context: {
+        source: 'emergence-lab-frontend',
+        timestamp: new Date().toISOString()
+      }
+    })
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`MCP call failed: ${response.status} - ${errorText}`);
+  }
+
+  return response.json();
+}
+
+/**
+ * List all albums in user's Google Photos library
+ * @param {Object} options
+ * @param {number} [options.pageSize=50] - Number of albums per page (max 50)
+ * @param {string} [options.pageToken] - Pagination token from previous response
+ * @returns {Promise<{albums: Array, nextPageToken: string|null}>}
+ */
+export async function listAlbums({ pageSize = 50, pageToken } = {}) {
+  const result = await executeTool('photos_list_albums', { pageSize, pageToken });
+  return result;
+}
+
+/**
+ * List media items (photos/videos) in a specific album
+ * @param {string} albumId - Album ID
+ * @param {Object} options
+ * @param {number} [options.pageSize=50] - Number of items per page (max 100)
+ * @param {string} [options.pageToken] - Pagination token
+ * @returns {Promise<{mediaItems: Array, nextPageToken: string|null}>}
+ */
+export async function listMediaItems(albumId, { pageSize = 50, pageToken } = {}) {
+  if (!albumId) throw new Error('albumId is required');
+  const result = await executeTool('photos_list_media_items', { albumId, pageSize, pageToken });
+  return result;
+}
+
+/**
+ * Get details of a specific media item
+ * @param {string} mediaItemId - Media item ID
+ * @returns {Promise<{mediaItem: Object}>}
+ */
+export async function getMediaItem(mediaItemId) {
+  if (!mediaItemId) throw new Error('mediaItemId is required');
+  const result = await executeTool('photos_get_media_item', { mediaItemId });
+  return result;
+}
+
+/**
+ * Search photos by date range or content category
+ * @param {Object} options
+ * @param {Object} [options.dateRange] - { startDate: {year, month, day}, endDate: {year, month, day} }
+ * @param {Array<string>} [options.contentCategories] - e.g., ['LANDSCAPES', 'PEOPLE', 'FOOD']
+ * @param {number} [options.pageSize=50] - Number of results (max 100)
+ * @param {string} [options.pageToken] - Pagination token
+ * @returns {Promise<{mediaItems: Array, nextPageToken: string|null}>}
+ */
+export async function search({ dateRange, contentCategories, pageSize = 50, pageToken } = {}) {
+  const result = await executeTool('photos_search', { dateRange, contentCategories, pageSize, pageToken });
+  return result;
+}
+
+/**
+ * List albums shared with the user
+ * @param {Object} options
+ * @param {number} [options.pageSize=50] - Number of albums (max 50)
+ * @param {string} [options.pageToken] - Pagination token
+ * @returns {Promise<{sharedAlbums: Array, nextPageToken: string|null}>}
+ */
+export async function listSharedAlbums({ pageSize = 50, pageToken } = {}) {
+  const result = await executeTool('photos_get_shared_albums', { pageSize, pageToken });
+  return result;
+}
+
+/**
+ * Convenience: Get albums formatted for UI display
+ * Maps API response to simpler format with id, title, count, coverUrl
+ */
+export async function getAlbumsForDisplay(options = {}) {
+  const result = await listAlbums(options);
+  return {
+    albums: (result.albums || []).map(album => ({
+      id: album.id,
+      title: album.title,
+      count: album.mediaItemsCount || 0,
+      coverUrl: album.coverPhotoBaseUrl ? `${album.coverPhotoBaseUrl}=w200-h200` : null
+    })),
+    nextPageToken: result.nextPageToken
+  };
+}
+
+/**
+ * Convenience: Get photos from album formatted for UI display
+ * Maps API response to simpler format with id, url, title
+ */
+export async function getPhotosForDisplay(albumId, options = {}) {
+  const result = await listMediaItems(albumId, options);
+  return {
+    photos: (result.mediaItems || []).map(item => ({
+      id: item.id,
+      url: item.baseUrl ? `${item.baseUrl}=w400-h400` : null,
+      title: item.filename || '',
+      mimeType: item.mimeType
+    })),
+    nextPageToken: result.nextPageToken
+  };
+}
+
+export default {
+  listAlbums,
+  listMediaItems,
+  getMediaItem,
+  search,
+  listSharedAlbums,
+  getAlbumsForDisplay,
+  getPhotosForDisplay
+};
diff --git a/src/shared/lib/store.js b/src/shared/lib/store.js
@@ -28,6 +28,7 @@ import { getBindingForRoom } from '@shared/data/roomAppBindings.js'
 
 
 import { createAuthSlice } from '@shared/state/authSlice.js'
+import { listAlbums as mcpListAlbums } from '@shared/lib/mcp/googlePhotos.js'
 import { createServiceConnectionSlice, resolveImageProvider, syncImageProviderState } from '@shared/state/serviceConnectionSlice.js'
 import { createAppSwitchingSlice } from '@shared/state/appSwitchingSlice.js'
 import { createRiggingTasksSlice } from '@shared/state/riggingTasksSlice.js'
@@ -291,6 +292,12 @@ const storeImpl = (set, get) => ({
   outputImage: null,
   isGenerating: false,
   generationError: null,
+  imagePrompt: '', 
+
+  negativePrompt: '',
+  // Advanced Features
+  activeLoras: [], // Array of { name, weight }
+  activeControlNets: [], // Array of { model, weight, module, image? }
   // Phase 1: Local-first AI migration - DrawThings default
   imageProvider: 'drawthings',
   imageModel: DEFAULT_IMAGE_MODELS.drawthings,
@@ -562,7 +569,63 @@ const storeImpl = (set, get) => ({
   }),
 
   // Actions (grouped proxies to top-level functions)
+  // --- Orchestrator / Context Console ---
+    orchestrator: {
+    isOpen: false,
+    position: { x: 0, y: 0 },
+    activeMode: 'IDLE', // IDLE, LISTENING, PROCESSING, SPEAKING
+    activeContextApp: 'home', // Context for tools, NOT navigation
+    isListening: false,
+    consoleLogs: [],
+    toolContext: null // For active tools like ImageBooth or Kanban
+  },
+  
+  // Apps actions
   actions: {
+    // ...existing app actions...
+    
+    // Orchestrator Actions
+    openContextConsole: (pos) => set((state) => {
+        state.orchestrator.isOpen = true;
+        if (pos) state.orchestrator.position = pos;
+    }),
+    
+    closeContextConsole: () => set((state) => {
+        state.orchestrator.isOpen = false;
+        state.orchestrator.activeMode = 'IDLE';
+    }),
+
+    setOrchestratorMode: (mode) => set((state) => {
+        state.orchestrator.activeMode = mode;
+    }),
+
+    setOrchestratorContext: (appId) => set((state) => {
+        state.orchestrator.activeContextApp = appId;
+    }),
+
+    setOrchestratorListening: (isListening) => set((state) => {
+        state.orchestrator.isListening = isListening;
+    }),
+    
+    addConsoleLog: (log) => set((state) => {
+       state.orchestrator.consoleLogs.push({
+           id: Date.now(),
+           timestamp: new Date().toISOString(),
+           ...log
+       });
+       if (state.orchestrator.consoleLogs.length > 50) {
+           state.orchestrator.consoleLogs.shift();
+       }
+    }),
+
+    executeAgentCommand: async (text) => {
+        const { addConsoleLog } = get().actions;
+        addConsoleLog({ type: 'user', message: `> ${text}` });
+        
+        // Import dynamically to avoid circular dependencies if any
+        const { orchestratorAgent } = await import('./orchestrator/OrchestratorAgent.js');
+        await orchestratorAgent.processIntent(text);
+    },
     // Auth
     setUser: (...args) => get().setUser(...args),
     logout: (...args) => get().logout(...args),
@@ -737,9 +800,8 @@ const storeImpl = (set, get) => ({
     },
     fetchGooglePhotosAlbums: async () => {
       try {
-        const resp = await fetch('/api/services/googlePhotos/albums', { credentials: 'include' });
-        if (!resp.ok) return;
-        const data = await resp.json();
+        // Use MCP tool via backend instead of deprecated direct API route
+        const data = await mcpListAlbums();
         set((state) => {
           state.google = state.google || {};
           state.google.photos = state.google.photos || {};
