@swatcha/mcp-server 0.1.0 → 0.2.0

package/src/apps/image-picker.tsx

@@ -1,423 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import { useState, useCallback } from 'react';
-import { useApp, useHostStyles } from '@modelcontextprotocol/ext-apps/react';
-import type { CallToolResult } from '@modelcontextprotocol/ext-apps';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-interface ImageCandidate {
-  imageUrl: string;
-  thumbnailUrl: string;
-  title: string;
-  sourceDomain: string;
-  sourceUrl?: string;
-}
-
-interface ProductEntry {
-  productId: string;
-  productName: string;
-  supplier?: string;
-  candidates: ImageCandidate[];
-}
-
-interface PickerData {
-  products: ProductEntry[];
-  batchLabel?: string;
-}
-
-// ============================================================================
-// Styles
-// ============================================================================
-
-const styles = {
-  body: {
-    fontFamily: 'var(--font-sans, system-ui, sans-serif)',
-    background: 'var(--color-background-primary, #1a1a2e)',
-    color: 'var(--color-text-primary, #e2e8f0)',
-    padding: 16,
-  },
-  header: {
-    display: 'flex' as const,
-    justifyContent: 'space-between' as const,
-    alignItems: 'baseline' as const,
-    marginBottom: 16,
-  },
-  title: { fontSize: 16, fontWeight: 600 },
-  batchInfo: {
-    fontSize: 12,
-    color: 'var(--color-text-secondary, #94a3b8)',
-  },
-  productSection: (isLast: boolean) => ({
-    marginBottom: 20,
-    paddingBottom: 16,
-    borderBottom: isLast ? 'none' : '1px solid var(--color-border, #334155)',
-  }),
-  productHeader: {
-    display: 'flex' as const,
-    justifyContent: 'space-between' as const,
-    alignItems: 'baseline' as const,
-    marginBottom: 8,
-  },
-  productName: { fontSize: 14, fontWeight: 500 },
-  productSupplier: {
-    fontSize: 12,
-    color: 'var(--color-text-secondary, #94a3b8)',
-  },
-  statusBadge: (state: 'selected' | 'skipped') => ({
-    fontSize: 11,
-    padding: '2px 8px',
-    borderRadius: 10,
-    background:
-      state === 'selected'
-        ? 'rgba(124, 58, 237, 0.15)'
-        : 'rgba(148, 163, 184, 0.1)',
-    color: state === 'selected' ? '#7c3aed' : 'var(--color-text-secondary, #94a3b8)',
-  }),
-  imagesRow: {
-    display: 'flex' as const,
-    gap: 8,
-    overflowX: 'auto' as const,
-    padding: '6px 2px',
-  },
-  imageCard: (isSelected: boolean) => ({
-    flex: '0 0 auto',
-    width: 130,
-    border: `2px solid ${isSelected ? '#7c3aed' : 'transparent'}`,
-    borderRadius: 8,
-    overflow: 'hidden' as const,
-    cursor: 'pointer' as const,
-    background: 'var(--color-background-secondary, #2a2a4a)',
-    transition: 'border-color 0.15s, transform 0.15s, opacity 0.15s',
-    transform: isSelected ? 'scale(1.05)' : 'scale(1)',
-    opacity: isSelected ? 1 : 0.6,
-    position: 'relative' as const,
-  }),
-  checkmark: {
-    position: 'absolute' as const,
-    top: 4,
-    right: 4,
-    width: 22,
-    height: 22,
-    borderRadius: '50%',
-    background: '#7c3aed',
-    display: 'flex' as const,
-    alignItems: 'center' as const,
-    justifyContent: 'center' as const,
-    zIndex: 1,
-  },
-  img: {
-    width: '100%',
-    height: 90,
-    objectFit: 'cover' as const,
-    display: 'block' as const,
-  },
-  meta: {
-    padding: '4px 6px',
-    fontSize: 10,
-    whiteSpace: 'nowrap' as const,
-    overflow: 'hidden' as const,
-    textOverflow: 'ellipsis' as const,
-  },
-  metaLink: {
-    color: 'var(--color-text-secondary, #94a3b8)',
-    textDecoration: 'none' as const,
-  },
-  metaText: {
-    color: 'var(--color-text-secondary, #94a3b8)',
-  },
-  skipLink: {
-    display: 'inline-block' as const,
-    marginTop: 6,
-    fontSize: 11,
-    color: 'var(--color-text-secondary, #94a3b8)',
-    cursor: 'pointer' as const,
-    textDecoration: 'underline' as const,
-    textUnderlineOffset: 2,
-    background: 'none',
-    border: 'none',
-    padding: 0,
-    fontFamily: 'inherit',
-  },
-  footer: {
-    marginTop: 16,
-    display: 'flex' as const,
-    gap: 8,
-    alignItems: 'center' as const,
-  },
-  btnPrimary: {
-    padding: '8px 16px',
-    border: 'none' as const,
-    borderRadius: 6,
-    fontSize: 13,
-    fontWeight: 500,
-    cursor: 'pointer' as const,
-    background: '#7c3aed',
-    color: 'white',
-    fontFamily: 'inherit',
-  },
-  status: {
-    fontSize: 12,
-    color: 'var(--color-text-secondary, #94a3b8)',
-  },
-  error: {
-    fontSize: 12,
-    color: '#ef4444',
-    marginTop: 8,
-  },
-  imgError: {
-    width: '100%',
-    height: 90,
-    display: 'flex' as const,
-    alignItems: 'center' as const,
-    justifyContent: 'center' as const,
-    fontSize: 11,
-    color: 'var(--color-text-secondary, #94a3b8)',
-    background: 'var(--color-background-secondary, #2a2a4a)',
-  },
-} as const;
-
-// ============================================================================
-// Components
-// ============================================================================
-
-function CheckmarkIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round">
-      <polyline points="20 6 9 17 4 12" />
-    </svg>
-  );
-}
-
-function ImageCard({
-  candidate,
-  isSelected,
-  onClick,
-}: {
-  candidate: ImageCandidate;
-  isSelected: boolean;
-  onClick: () => void;
-}) {
-  const [imgError, setImgError] = useState(false);
-
-  return (
-    <div style={styles.imageCard(isSelected)} onClick={onClick}>
-      {isSelected && (
-        <div style={styles.checkmark}>
-          <CheckmarkIcon />
-        </div>
-      )}
-      {imgError ? (
-        <div style={styles.imgError}>Failed to load</div>
-      ) : (
-        <img
-          src={candidate.thumbnailUrl || candidate.imageUrl}
-          alt={candidate.title}
-          loading="lazy"
-          style={styles.img}
-          onError={() => setImgError(true)}
-        />
-      )}
-      <div style={styles.meta}>
-        {candidate.sourceUrl ? (
-          <a
-            href={candidate.sourceUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            onClick={(e) => e.stopPropagation()}
-            style={styles.metaLink}
-          >
-            {candidate.sourceDomain}
-          </a>
-        ) : (
-          <span style={styles.metaText}>{candidate.sourceDomain}</span>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function ProductSection({
-  product,
-  isLast,
-  selection,
-  onSelect,
-  onSkip,
-}: {
-  product: ProductEntry;
-  isLast: boolean;
-  selection: string | null;
-  onSelect: (imageUrl: string) => void;
-  onSkip: () => void;
-}) {
-  const isSkipped = selection === null;
-  const selectedIdx = product.candidates.findIndex((c) => c.imageUrl === selection);
-  const statusText =
-    product.candidates.length === 0
-      ? 'No candidates'
-      : isSkipped
-        ? 'Skipped'
-        : `Image ${selectedIdx + 1} selected`;
-  const statusState: 'selected' | 'skipped' =
-    product.candidates.length === 0 || isSkipped ? 'skipped' : 'selected';
-
-  return (
-    <div style={styles.productSection(isLast)}>
-      <div style={styles.productHeader}>
-        <div>
-          <span style={styles.productName}>{product.productName}</span>
-          {product.supplier && (
-            <span style={styles.productSupplier}> from {product.supplier}</span>
-          )}
-        </div>
-        <span style={styles.statusBadge(statusState)}>{statusText}</span>
-      </div>
-
-      {product.candidates.length > 0 && (
-        <>
-          <div style={styles.imagesRow}>
-            {product.candidates.map((candidate, idx) => (
-              <ImageCard
-                key={idx}
-                candidate={candidate}
-                isSelected={selection === candidate.imageUrl}
-                onClick={() => onSelect(candidate.imageUrl)}
-              />
-            ))}
-          </div>
-          <button style={styles.skipLink} onClick={onSkip}>
-            Skip this product
-          </button>
-        </>
-      )}
-    </div>
-  );
-}
-
-function ImagePickerApp() {
-  const [pickerData, setPickerData] = useState<PickerData | null>(null);
-  const [selections, setSelections] = useState<Record<string, string | null>>({});
-  const [submitted, setSubmitted] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const { app, isConnected, error: connError } = useApp({
-    appInfo: { name: 'ImagePicker', version: '0.1.0' },
-    capabilities: {},
-    onAppCreated: (createdApp) => {
-      createdApp.ontoolresult = (params: CallToolResult) => {
-        const data = params.structuredContent as PickerData | undefined;
-        if (!data?.products?.length) return;
-
-        setPickerData(data);
-
-        const initial: Record<string, string | null> = {};
-        data.products.forEach((p) => {
-          initial[p.productId] = p.candidates.length > 0 ? p.candidates[0].imageUrl : null;
-        });
-        setSelections(initial);
-      };
-      createdApp.onteardown = async () => ({});
-    },
-  });
-
-  useHostStyles(app);
-
-  const handleSelect = useCallback((productId: string, imageUrl: string) => {
-    setSelections((prev) => ({ ...prev, [productId]: imageUrl }));
-  }, []);
-
-  const handleSkip = useCallback((productId: string) => {
-    setSelections((prev) => ({ ...prev, [productId]: null }));
-  }, []);
-
-  const handleSave = useCallback(async () => {
-    if (!app || !pickerData) return;
-
-    const lines = pickerData.products.map((product) => {
-      const imageUrl = selections[product.productId];
-      return imageUrl
-        ? `- "${product.productName}" (${product.productId}): ${imageUrl}`
-        : `- "${product.productName}" (${product.productId}): SKIP`;
-    });
-
-    const message = `Image selections:\n${lines.join('\n')}\n\nPlease update each product with its selected image URL. Skip products marked SKIP.`;
-
-    try {
-      await app.sendMessage({
-        role: 'user',
-        content: [{ type: 'text', text: message }],
-      });
-      setSubmitted(true);
-    } catch (err) {
-      setError(`Failed to send: ${err instanceof Error ? err.message : String(err)}`);
-    }
-  }, [app, pickerData, selections]);
-
-  if (connError) {
-    return (
-      <div style={styles.body}>
-        <div style={styles.error}>Connection failed: {connError.message}</div>
-      </div>
-    );
-  }
-  if (!isConnected) {
-    return (
-      <div style={styles.body}>
-        <span style={styles.status}>Connecting...</span>
-      </div>
-    );
-  }
-  if (!pickerData) {
-    return (
-      <div style={styles.body}>
-        <span style={styles.status}>Waiting for image candidates...</span>
-      </div>
-    );
-  }
-
-  const selectedCount = Object.values(selections).filter((v) => v !== null).length;
-  const total = pickerData.products.length;
-
-  return (
-    <div style={styles.body}>
-      <div style={styles.header}>
-        <h2 style={styles.title}>Select Product Images</h2>
-        {pickerData.batchLabel && (
-          <span style={styles.batchInfo}>{pickerData.batchLabel}</span>
-        )}
-      </div>
-
-      {pickerData.products.map((product, idx) => (
-        <ProductSection
-          key={product.productId}
-          product={product}
-          isLast={idx === pickerData.products.length - 1}
-          selection={selections[product.productId]}
-          onSelect={(imageUrl) => handleSelect(product.productId, imageUrl)}
-          onSkip={() => handleSkip(product.productId)}
-        />
-      ))}
-
-      <div style={styles.footer}>
-        {!submitted ? (
-          <button style={styles.btnPrimary} onClick={handleSave}>
-            Save Selections ({selectedCount}/{total})
-          </button>
-        ) : (
-          <span style={styles.status}>
-            Selections sent — click send in the chat to confirm.
-          </span>
-        )}
-      </div>
-
-      {error && <div style={styles.error}>{error}</div>}
-    </div>
-  );
-}
-
-// ============================================================================
-// Mount
-// ============================================================================
-
-createRoot(document.getElementById('root')!).render(<ImagePickerApp />);

package/src/client.ts

@@ -1,187 +0,0 @@
-interface ApiResponse<T = unknown> {
-  data?: T;
-  error?: { code: string; message: string; details?: unknown };
-  pagination?: { cursor: string | null; hasMore: boolean };
-}
-
-export class SwatchaClient {
-  private baseUrl: string;
-  private apiKey: string;
-
-  constructor(baseUrl: string, apiKey: string) {
-    this.baseUrl = baseUrl.replace(/\/$/, '');
-    this.apiKey = apiKey;
-  }
-
-  private async request<T>(
-    method: string,
-    path: string,
-    body?: unknown
-  ): Promise<ApiResponse<T>> {
-    const url = `${this.baseUrl}/api/v1${path}`;
-    const headers: Record<string, string> = {
-      Authorization: `Bearer ${this.apiKey}`,
-      'Content-Type': 'application/json',
-    };
-
-    const response = await fetch(url, {
-      method,
-      headers,
-      body: body ? JSON.stringify(body) : undefined,
-    });
-
-    const json = (await response.json()) as ApiResponse<T>;
-
-    if (!response.ok) {
-      throw new Error(json.error?.message || `API error: ${response.status}`);
-    }
-
-    return json;
-  }
-
-  // Selections
-  async listSelections() {
-    return this.request('GET', '/selections');
-  }
-
-  async getSelection(id: string) {
-    return this.request('GET', `/selections/${id}`);
-  }
-
-  async createSelection(data: {
-    name: string;
-    clientId: string;
-    status?: string;
-    notes?: string;
-    siteAddress?: string;
-  }) {
-    return this.request('POST', '/selections', data);
-  }
-
-  async updateSelection(
-    id: string,
-    data: { name?: string; status?: string; notes?: string; siteAddress?: string }
-  ) {
-    return this.request('PATCH', `/selections/${id}`, data);
-  }
-
-  async deleteSelection(id: string) {
-    return this.request('DELETE', `/selections/${id}`);
-  }
-
-  // Selection Products
-  async listSelectionProducts(selectionId: string) {
-    return this.request('GET', `/selections/${selectionId}/products`);
-  }
-
-  async addProductToSelection(
-    selectionId: string,
-    data: {
-      productId: string;
-      quantity?: string;
-      location?: string;
-      locationId?: string;
-      notes?: string;
-    }
-  ) {
-    return this.request('POST', `/selections/${selectionId}/products`, data);
-  }
-
-  async updateSelectionProduct(
-    selectionId: string,
-    productId: string,
-    data: { quantity?: string; location?: string; locationId?: string; notes?: string }
-  ) {
-    return this.request(
-      'PATCH',
-      `/selections/${selectionId}/products/${productId}`,
-      data
-    );
-  }
-
-  async removeProductFromSelection(selectionId: string, productId: string) {
-    return this.request(
-      'DELETE',
-      `/selections/${selectionId}/products/${productId}`
-    );
-  }
-
-  // Products (Catalog)
-  async listProducts(query?: string) {
-    const qs = query ? `?q=${encodeURIComponent(query)}` : '';
-    return this.request('GET', `/products${qs}`);
-  }
-
-  async getProduct(id: string) {
-    return this.request('GET', `/products/${id}`);
-  }
-
-  async createProduct(data: {
-    name: string;
-    sku?: string;
-    price?: number;
-    supplierId?: string;
-    imageUrl?: string;
-    description?: string;
-  }) {
-    return this.request('POST', '/products', data);
-  }
-
-  async updateProduct(
-    id: string,
-    data: {
-      name?: string;
-      sku?: string;
-      price?: number;
-      supplierId?: string;
-      imageUrl?: string;
-    }
-  ) {
-    return this.request('PATCH', `/products/${id}`, data);
-  }
-
-  // Clients
-  async listClients() {
-    return this.request('GET', '/clients');
-  }
-
-  async createClient(data: { name: string }) {
-    return this.request('POST', '/clients', data);
-  }
-
-  // Suppliers
-  async listSuppliers() {
-    return this.request('GET', '/suppliers');
-  }
-
-  async createSupplier(data: { name: string; websiteUrl?: string }) {
-    return this.request('POST', '/suppliers', data);
-  }
-
-  // Locations
-  async listLocations() {
-    return this.request('GET', '/locations');
-  }
-
-  async createLocation(data: { name: string }) {
-    return this.request('POST', '/locations', data);
-  }
-
-  // Quota
-  async getQuota() {
-    return this.request('GET', '/quota');
-  }
-
-  // Image Search
-  async searchProductImages(productName: string, options?: {
-    supplier?: string;
-    supplierUrl?: string;
-    limit?: number;
-  }) {
-    const params = new URLSearchParams({ product: productName });
-    if (options?.supplier) params.append('supplier', options.supplier);
-    if (options?.supplierUrl) params.append('supplierUrl', options.supplierUrl);
-    if (options?.limit) params.append('limit', String(options.limit));
-    return this.request('GET', `/images/search?${params}`);
-  }
-}