@jlcpcb/cli 0.1.0

package/src/app/screens/InfoScreen.tsx

@@ -0,0 +1,203 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { createComponentService, createLibraryService, type InstalledComponent } from '@jlcpcb/core';
+import open from 'open';
+import { useNavigation, useCurrentScreen } from '../navigation/NavigationContext.js';
+import type { InfoParams, ComponentInfo } from '../navigation/types.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+import { DetailView, type DetailViewComponent } from '../components/DetailView.js';
+
+const componentService = createComponentService();
+const libraryService = createLibraryService();
+
+export function InfoScreen() {
+  const { push } = useNavigation();
+  const { params } = useCurrentScreen() as { screen: 'info'; params: InfoParams };
+  const { columns: terminalWidth } = useTerminalSize();
+
+  const [component, setComponent] = useState<ComponentInfo | null>(
+    params.component || null
+  );
+  const [installedInfo, setInstalledInfo] = useState<InstalledComponent | null>(null);
+  const [libraryStatus, setLibraryStatus] = useState<Awaited<ReturnType<typeof libraryService.getStatus>> | null>(null);
+  const [isLoading, setIsLoading] = useState(!params.component);
+  const [error, setError] = useState<string | null>(null);
+  const [isCheckingLibrary, setIsCheckingLibrary] = useState(false);
+  const checkingRef = useRef(false);
+
+  // Check if component is installed and fetch full details
+  useEffect(() => {
+    const componentId = params.componentId;
+    if (!componentId) return;
+
+    const fetchData = async () => {
+      setIsLoading(true);
+      try {
+        // Fetch library status (for paths)
+        const status = await libraryService.getStatus();
+        setLibraryStatus(status);
+
+        // Check if already installed
+        const installed = await libraryService.listInstalled({});
+        const found = installed.find(c => c.lcscId === componentId);
+        if (found) {
+          setInstalledInfo(found);
+        }
+
+        // Fetch full details from API (always, to get price/stock/attributes)
+        const searchResults = await componentService.search(componentId, { limit: 1 });
+        if (searchResults.length > 0) {
+          setComponent(searchResults[0]);
+        } else if (!params.component) {
+          // Fallback to getDetails if search didn't work
+          const details = await componentService.getDetails(componentId);
+          if (details) {
+            setComponent(details);
+          } else {
+            setError('Component not found');
+          }
+        }
+      } catch (err) {
+        if (!params.component) {
+          setError(err instanceof Error ? err.message : 'Failed to fetch component');
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [params.componentId, params.component]);
+
+  // Get datasheet URL (different field names in different types)
+  const datasheetUrl = component && ('datasheetPdf' in component ? component.datasheetPdf : 'datasheet' in component ? component.datasheet : undefined);
+
+  const [isRegenerating, setIsRegenerating] = useState(false);
+  const [regenerateMessage, setRegenerateMessage] = useState<string | null>(null);
+
+  useInput((input, key) => {
+    if (isLoading || !component || isCheckingLibrary || isRegenerating) return;
+
+    const lowerInput = input.toLowerCase();
+
+    // S - Open Symbol in KiCad
+    if (lowerInput === 's' && installedInfo && libraryStatus) {
+      const symbolPath = `${libraryStatus.paths.symbolsDir}/JLC-MCP-${installedInfo.category}.kicad_sym`;
+      open(symbolPath);
+      return;
+    }
+
+    // F - Open Footprint in KiCad
+    if (lowerInput === 'f' && installedInfo && libraryStatus) {
+      if (installedInfo.footprintRef?.startsWith('JLC-MCP:')) {
+        const fpName = installedInfo.footprintRef.split(':')[1];
+        const footprintPath = `${libraryStatus.paths.footprintsDir}/JLC-MCP.pretty/${fpName}.kicad_mod`;
+        open(footprintPath);
+      }
+      // Standard KiCad footprints can't be opened directly
+      return;
+    }
+
+    // M - Open 3D Model
+    if (lowerInput === 'm' && installedInfo && libraryStatus && installedInfo.has3dModel) {
+      const modelPath = `${libraryStatus.paths.models3dDir}/${installedInfo.name}.step`;
+      open(modelPath);
+      return;
+    }
+
+    // R - Regenerate symbol and footprint
+    if (lowerInput === 'r' && installedInfo) {
+      setIsRegenerating(true);
+      setRegenerateMessage('Regenerating symbol and footprint...');
+
+      libraryService.install(component.lcscId, { force: true })
+        .then((result) => {
+          setRegenerateMessage(`✓ Regenerated: ${result.symbolAction}`);
+          // Clear message after 2 seconds
+          setTimeout(() => setRegenerateMessage(null), 2000);
+        })
+        .catch((err) => {
+          setRegenerateMessage(`✗ Failed: ${err instanceof Error ? err.message : 'Unknown error'}`);
+          setTimeout(() => setRegenerateMessage(null), 3000);
+        })
+        .finally(() => setIsRegenerating(false));
+      return;
+    }
+
+    // D - Open Datasheet
+    if (lowerInput === 'd' && datasheetUrl) {
+      open(datasheetUrl);
+      return;
+    }
+
+    // Enter - Install (only when not installed)
+    if (key.return && !installedInfo) {
+      if (checkingRef.current) return;
+      checkingRef.current = true;
+      setIsCheckingLibrary(true);
+
+      if (libraryStatus && (!libraryStatus.installed || !libraryStatus.linked)) {
+        // Libraries not set up - show setup screen
+        push('library-setup', {
+          componentId: component.lcscId,
+          component,
+        });
+        setIsCheckingLibrary(false);
+        checkingRef.current = false;
+      } else {
+        // Libraries ready - proceed to install
+        push('install', {
+          componentId: component.lcscId,
+          component,
+        });
+        setIsCheckingLibrary(false);
+        checkingRef.current = false;
+      }
+    }
+  });
+
+  if (isLoading) {
+    return (
+      <Box flexDirection="column">
+        <Text color="yellow">⏳ Loading component {params.componentId}...</Text>
+      </Box>
+    );
+  }
+
+  if (isCheckingLibrary) {
+    return (
+      <Box flexDirection="column">
+        <Text color="yellow">Checking library status...</Text>
+      </Box>
+    );
+  }
+
+  if (error || !component) {
+    return (
+      <Box flexDirection="column">
+        <Text color="red">✗ {error || 'Component not found'}</Text>
+        <Text dimColor>Press Esc to go back</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text bold>
+          Component: <Text color="cyan">{component.lcscId}</Text>
+          {' '}
+          <Text dimColor>({component.name})</Text>
+          {installedInfo && <Text color="green"> ✓ Installed</Text>}
+        </Text>
+      </Box>
+      <DetailView
+        component={component}
+        terminalWidth={terminalWidth}
+        isInstalled={!!installedInfo}
+        installedInfo={installedInfo}
+        statusMessage={regenerateMessage}
+      />
+    </Box>
+  );
+}

package/src/app/screens/InstallScreen.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+import { createLibraryService, type InstallResult } from '@jlcpcb/core';
+import { useNavigation, useCurrentScreen } from '../navigation/NavigationContext.js';
+import type { InstallParams } from '../navigation/types.js';
+
+const libraryService = createLibraryService();
+
+export function InstallScreen() {
+  const { replace } = useNavigation();
+  const { params } = useCurrentScreen() as { screen: 'install'; params: InstallParams };
+
+  const [status, setStatus] = useState<'installing' | 'done'>('installing');
+
+  useEffect(() => {
+    let mounted = true;
+
+    async function install() {
+      try {
+        const result: InstallResult = await libraryService.install(params.componentId, {});
+        if (mounted) {
+          replace('installed', {
+            componentId: params.componentId,
+            component: params.component,
+            result,
+          });
+        }
+      } catch (err) {
+        if (mounted) {
+          replace('installed', {
+            componentId: params.componentId,
+            component: params.component,
+            error: err instanceof Error ? err.message : 'Unknown error',
+          });
+        }
+      }
+    }
+
+    install();
+
+    return () => {
+      mounted = false;
+    };
+  }, [params.componentId, params.component, replace]);
+
+  return (
+    <Box flexDirection="column">
+      <Text color="yellow">⏳ Installing {params.componentId}...</Text>
+      <Box marginTop={1}>
+        <Text dimColor>Fetching from EasyEDA and converting to KiCad format...</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/app/screens/InstalledScreen.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useNavigation, useCurrentScreen } from '../navigation/NavigationContext.js';
+import type { InstalledParams } from '../navigation/types.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+import { InstalledView } from '../components/InstalledView.js';
+
+export function InstalledScreen() {
+  const { pop } = useNavigation();
+  const { params } = useCurrentScreen() as { screen: 'installed'; params: InstalledParams };
+  const { columns: terminalWidth } = useTerminalSize();
+
+  useInput(() => {
+    pop();
+  });
+
+  const result = params.result
+    ? {
+        symbolRef: params.result.symbolRef || `JLC:${params.component.name}`,
+        footprintRef: params.result.footprintRef || `JLC:${params.component.name}`,
+      }
+    : null;
+
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text bold>
+          Install: <Text color="cyan">{params.componentId}</Text>
+        </Text>
+      </Box>
+      <InstalledView
+        component={params.component}
+        result={result}
+        error={params.error || null}
+        terminalWidth={terminalWidth}
+      />
+    </Box>
+  );
+}

package/src/app/screens/LibraryScreen.tsx

@@ -0,0 +1,259 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { createLibraryService, createComponentService, type InstalledComponent, type LibraryStatus } from '@jlcpcb/core';
+import { useNavigation, useCurrentScreen } from '../navigation/NavigationContext.js';
+import type { LibraryParams } from '../navigation/types.js';
+import { useAppState } from '../state/AppStateContext.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+import { Divider } from '../components/Divider.js';
+
+const libraryService = createLibraryService();
+const componentService = createComponentService();
+
+function truncate(str: string, len: number): string {
+  if (!str) return '';
+  return str.length > len ? str.slice(0, len - 1) + '…' : str;
+}
+
+function StatusBadge({ installed, linked }: { installed: boolean; linked: boolean }) {
+  if (installed && linked) {
+    return <Text color="green">Installed & Linked</Text>;
+  } else if (installed && !linked) {
+    return <Text color="yellow">Installed (not linked)</Text>;
+  } else {
+    return <Text color="red">Not Installed</Text>;
+  }
+}
+
+export function LibraryScreen() {
+  const { push } = useNavigation();
+  const { params } = useCurrentScreen() as { screen: 'library'; params: LibraryParams };
+  const { selectedIndex, setSelectedIndex } = useAppState();
+  const { columns: terminalWidth } = useTerminalSize();
+
+  const [status, setStatus] = useState<LibraryStatus | null>(params.status || null);
+  const [installed, setInstalled] = useState<InstalledComponent[]>(params.installed || []);
+  const [descriptions, setDescriptions] = useState<Record<string, string>>({});
+  const [isLoading, setIsLoading] = useState(!params.status);
+  const [isSettingUp, setIsSettingUp] = useState(false);
+
+  useEffect(() => {
+    if (!params.status) {
+      setIsLoading(true);
+      Promise.all([libraryService.getStatus(), libraryService.listInstalled({})])
+        .then(([statusResult, installedResult]) => {
+          setStatus(statusResult);
+          setInstalled(installedResult);
+        })
+        .catch(() => {
+          setStatus(null);
+          setInstalled([]);
+        })
+        .finally(() => setIsLoading(false));
+    }
+  }, [params.status, params.installed]);
+
+  // Fetch descriptions for installed components
+  useEffect(() => {
+    if (installed.length === 0) return;
+
+    const fetchDescriptions = async () => {
+      const newDescriptions: Record<string, string> = {};
+
+      // Fetch in batches of 5 to avoid overwhelming the API
+      for (let i = 0; i < installed.length; i += 5) {
+        const batch = installed.slice(i, i + 5);
+        const results = await Promise.allSettled(
+          batch.map(async (item) => {
+            const details = await componentService.search(item.lcscId, { limit: 1 });
+            return { id: item.lcscId, description: details[0]?.description || '' };
+          })
+        );
+
+        for (const result of results) {
+          if (result.status === 'fulfilled' && result.value.description) {
+            newDescriptions[result.value.id] = result.value.description;
+          }
+        }
+
+        // Update state incrementally
+        setDescriptions(prev => ({ ...prev, ...newDescriptions }));
+      }
+    };
+
+    fetchDescriptions();
+  }, [installed]);
+
+  useInput((input, key) => {
+    if (isLoading || isSettingUp) return;
+
+    // If not installed, Enter triggers setup
+    if (status && (!status.installed || !status.linked)) {
+      if (key.return) {
+        setIsSettingUp(true);
+        libraryService
+          .ensureGlobalTables()
+          .then(() => libraryService.getStatus())
+          .then((newStatus) => {
+            setStatus(newStatus);
+            setIsSettingUp(false);
+          })
+          .catch(() => setIsSettingUp(false));
+      }
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex(Math.max(0, selectedIndex - 1));
+    } else if (key.downArrow) {
+      setSelectedIndex(Math.min(installed.length - 1, selectedIndex + 1));
+    } else if (key.return && installed[selectedIndex]) {
+      push('info', {
+        componentId: installed[selectedIndex].lcscId,
+      });
+    }
+  });
+
+  if (isLoading) {
+    return (
+      <Box flexDirection="column">
+        <Text color="yellow">Loading library status...</Text>
+      </Box>
+    );
+  }
+
+  if (isSettingUp) {
+    return (
+      <Box flexDirection="column">
+        <Text color="yellow">Setting up JLC-MCP libraries...</Text>
+        <Box marginTop={1}>
+          <Text dimColor>Creating directories and registering with KiCad...</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Not installed state
+  if (!status || !status.installed || !status.linked) {
+    return (
+      <Box flexDirection="column">
+        <Box marginBottom={1}>
+          <Text bold>JLC-MCP Libraries</Text>
+        </Box>
+        <Box marginBottom={1}>
+          <Text>Status: </Text>
+          <StatusBadge installed={status?.installed ?? false} linked={status?.linked ?? false} />
+          {status && <Text dimColor> (KiCad {status.version})</Text>}
+        </Box>
+        <Box marginTop={1} flexDirection="column">
+          <Text dimColor>The JLC-MCP libraries have not been set up yet.</Text>
+          <Text dimColor>This is required to install components.</Text>
+        </Box>
+        <Box marginTop={1} flexDirection="column">
+          <Divider width={terminalWidth} />
+          <Text>Press <Text color="cyan">Enter</Text> to set up libraries now</Text>
+          <Text dimColor>Esc Exit</Text>
+          <Divider width={terminalWidth} />
+        </Box>
+      </Box>
+    );
+  }
+
+  // Installed but empty state
+  if (installed.length === 0) {
+    return (
+      <Box flexDirection="column">
+        <Box marginBottom={1}>
+          <Text bold>JLC-MCP Libraries</Text>
+        </Box>
+        <Box>
+          <Text>Status: </Text>
+          <StatusBadge installed={status.installed} linked={status.linked} />
+          <Text dimColor> (KiCad {status.version})</Text>
+        </Box>
+        <Box>
+          <Text dimColor>Installed: 0 Components</Text>
+        </Box>
+        <Box marginBottom={1}>
+          <Text dimColor>Location: {status.paths.symbolsDir.replace(process.env.HOME || '', '~')}</Text>
+        </Box>
+        <Divider width={terminalWidth} />
+        <Box marginTop={1}>
+          <Text dimColor>No components installed yet. Use 'jlc search' to find and install components.</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Divider width={terminalWidth} />
+          <Text dimColor>Esc Exit</Text>
+          <Divider width={terminalWidth} />
+        </Box>
+      </Box>
+    );
+  }
+
+  // Components table - full width responsive layout
+  // Fixed columns: selector(2) + name + category + status columns(15)
+  // Description takes remaining space
+  const nameWidth = 20;
+  const categoryWidth = 12;
+  const statusWidth = 15; // Sym(5) + FP(5) + 3D(5)
+  const descWidth = Math.max(terminalWidth - 2 - nameWidth - categoryWidth - statusWidth, 15);
+
+  return (
+    <Box flexDirection="column" width="100%">
+      <Box marginBottom={1}>
+        <Text bold>JLC-MCP Libraries</Text>
+      </Box>
+      <Box>
+        <Text>Status: </Text>
+        <StatusBadge installed={status.installed} linked={status.linked} />
+        <Text dimColor> (KiCad {status.version})</Text>
+      </Box>
+      <Box>
+        <Text dimColor>Installed: {installed.length} Component{installed.length !== 1 ? 's' : ''}</Text>
+      </Box>
+      <Box marginBottom={1}>
+        <Text dimColor>Location: {status.paths.symbolsDir.replace(process.env.HOME || '', '~')}</Text>
+      </Box>
+      <Divider width={terminalWidth} />
+      <Box marginBottom={1} marginTop={1}>
+        <Text bold dimColor>
+          {'  '}
+          {'Name'.padEnd(nameWidth)}
+          {'Category'.padEnd(categoryWidth)}
+          {'Description'.padEnd(descWidth)}
+          {'Sym'.padEnd(5)}
+          {'FP'.padEnd(5)}
+          {'3D'}
+        </Text>
+      </Box>
+      {installed.map((item, i) => {
+        const isSelected = i === selectedIndex;
+        const desc = descriptions[item.lcscId] || '';
+        // Check if footprint is standard KiCad (not JLC-MCP custom)
+        const isStandardFp = item.footprintRef && !item.footprintRef.startsWith('JLC-MCP:');
+        const fpLabel = !item.footprintRef ? 'N' : isStandardFp ? 'S' : 'Y';
+        const fpColor = !item.footprintRef ? 'red' : isStandardFp ? 'cyan' : 'green';
+        return (
+          <Box key={`${item.lcscId}-${i}`}>
+            <Text color={isSelected ? 'cyan' : undefined}>
+              {isSelected ? '> ' : '  '}
+            </Text>
+            <Text inverse={isSelected}>
+              <Text color="cyan">{truncate(item.name, nameWidth - 1).padEnd(nameWidth)}</Text>
+              {truncate(item.category, categoryWidth - 1).padEnd(categoryWidth)}
+              <Text dimColor>{truncate(desc, descWidth - 1).padEnd(descWidth)}</Text>
+              <Text color="green">{'Y'.padEnd(5)}</Text>
+              <Text color={fpColor}>{fpLabel.padEnd(5)}</Text>
+              <Text color={item.has3dModel ? 'green' : 'red'}>{item.has3dModel ? 'Y' : 'N'}</Text>
+            </Text>
+          </Box>
+        );
+      })}
+      <Box marginTop={1} flexDirection="column">
+        <Divider width={terminalWidth} />
+        <Text dimColor>↑/↓ Navigate • Enter View Details • Esc Exit</Text>
+        <Divider width={terminalWidth} />
+      </Box>
+    </Box>
+  );
+}

package/src/app/screens/LibrarySetupScreen.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { createLibraryService } from '@jlcpcb/core';
+import { useNavigation, useCurrentScreen } from '../navigation/NavigationContext.js';
+import type { LibrarySetupParams } from '../navigation/types.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+import { Divider } from '../components/Divider.js';
+
+const libraryService = createLibraryService();
+
+export function LibrarySetupScreen() {
+  const { push, pop } = useNavigation();
+  const { params } = useCurrentScreen() as { screen: 'library-setup'; params: LibrarySetupParams };
+  const { columns: terminalWidth } = useTerminalSize();
+
+  const [selectedOption, setSelectedOption] = useState<'install' | 'cancel'>('install');
+  const [isInstalling, setIsInstalling] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useInput((input, key) => {
+    if (isInstalling) return;
+
+    if (key.leftArrow || key.rightArrow || input === 'h' || input === 'l') {
+      setSelectedOption(selectedOption === 'install' ? 'cancel' : 'install');
+    } else if (key.return) {
+      if (selectedOption === 'cancel') {
+        pop();
+      } else {
+        setIsInstalling(true);
+        setError(null);
+        libraryService
+          .ensureGlobalTables()
+          .then(() => {
+            // Success - continue to install the component
+            push('install', {
+              componentId: params.componentId,
+              component: params.component,
+            });
+          })
+          .catch((err) => {
+            setError(err instanceof Error ? err.message : 'Unknown error');
+            setIsInstalling(false);
+          });
+      }
+    } else if (key.escape) {
+      pop();
+    }
+  });
+
+  if (isInstalling) {
+    return (
+      <Box flexDirection="column">
+        <Box marginBottom={1}>
+          <Text bold color="yellow">Setting Up Libraries</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color="yellow">Creating library directories...</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text dimColor>Registering with KiCad symbol and footprint tables...</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text bold color="yellow">Library Setup Required</Text>
+      </Box>
+
+      <Box marginBottom={1}>
+        <Text>
+          JLC-MCP libraries need to be installed and linked to KiCad before you can install components.
+        </Text>
+      </Box>
+
+      <Box marginTop={1} flexDirection="column">
+        <Text dimColor>This will:</Text>
+        <Text dimColor>  • Create library directories in ~/Documents/KiCad/*/3rdparty/</Text>
+        <Text dimColor>  • Register libraries in KiCad's symbol and footprint tables</Text>
+      </Box>
+
+      {error && (
+        <Box marginTop={1}>
+          <Text color="red">Error: {error}</Text>
+        </Box>
+      )}
+
+      <Box marginTop={2}>
+        <Divider width={terminalWidth} />
+      </Box>
+
+      <Box marginTop={1} gap={2}>
+        <Text
+          inverse={selectedOption === 'install'}
+          color={selectedOption === 'install' ? 'green' : undefined}
+        >
+          {' Install Libraries '}
+        </Text>
+        <Text
+          inverse={selectedOption === 'cancel'}
+          color={selectedOption === 'cancel' ? 'red' : undefined}
+        >
+          {' Cancel '}
+        </Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Divider width={terminalWidth} />
+      </Box>
+      <Box>
+        <Text dimColor>←/→ Select • Enter Confirm • Esc Cancel</Text>
+      </Box>
+      <Box>
+        <Divider width={terminalWidth} />
+      </Box>
+    </Box>
+  );
+}