@jlcpcb/cli 0.1.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jlcpcb/cli",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "private": false,
   "type": "module",
   "description": "CLI for JLC/EasyEDA component sourcing and KiCad library management",
@@ -18,7 +18,7 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "bun build ./src/index.ts --outdir ./dist --target node",
+    "build": "bun build ./src/index.ts --outdir ./dist --target node && mkdir -p ./dist/assets && cp ../core/dist/assets/search.html ./dist/assets/",
     "dev": "bun --watch ./src/index.ts",
     "typecheck": "tsc --noEmit",
     "test": "bun test",
@@ -44,6 +44,7 @@
     "ink-select-input": "6.2.0",
     "@jlcpcb/core": "workspace:*",
     "open": "11.0.0",
+    "react": "^19.0.0",
     "react-devtools-core": "7.0.1"
   },
   "devDependencies": {

package/src/app/App.tsx

@@ -8,6 +8,7 @@ import { InstallScreen } from './screens/InstallScreen.js';
 import { InstalledScreen } from './screens/InstalledScreen.js';
 import { LibraryScreen } from './screens/LibraryScreen.js';
 import { LibrarySetupScreen } from './screens/LibrarySetupScreen.js';
+import { EasyEDAInfoScreen } from './screens/EasyEDAInfoScreen.js';
 import type { ScreenName, ScreenParams } from './navigation/types.js';
 
 function ScreenRouter() {
@@ -26,6 +27,8 @@ function ScreenRouter() {
       return <LibraryScreen />;
     case 'library-setup':
       return <LibrarySetupScreen />;
+    case 'easyeda-info':
+      return <EasyEDAInfoScreen />;
     default:
       return null;
   }
@@ -77,9 +80,10 @@ export function App<T extends ScreenName>({ initialScreen, initialParams }: AppP
   );
 }
 
-export function renderApp<T extends ScreenName>(
+export async function renderApp<T extends ScreenName>(
   initialScreen: T,
   initialParams: ScreenParams[T]
-): void {
-  render(<App initialScreen={initialScreen} initialParams={initialParams} />);
+): Promise<void> {
+  const instance = render(<App initialScreen={initialScreen} initialParams={initialParams} />);
+  await instance.waitUntilExit();
 }

package/src/app/components/DetailView.tsx

@@ -142,8 +142,8 @@ export function DetailView({ component, terminalWidth, isInstalled, installedInf
 
   // Footer text based on installation status
   const footerText = isInstalled
-    ? 'S Symbol • F Footprint • M 3D Model • R Regenerate • D Datasheet • Esc Back'
-    : 'Enter Install • D Datasheet • Esc Back';
+    ? 'R Regenerate • D Delete • O Datasheet • Esc Back'
+    : 'Enter Install • O Datasheet • Esc Back';
 
   return (
     <Box flexDirection="column" width="100%">

package/src/app/components/EasyEDADetailView.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { EasyEDACommunityComponent } from '@jlcpcb/core';
+import { Divider } from './Divider.js';
+
+interface EasyEDADetailViewProps {
+  component: EasyEDACommunityComponent;
+  terminalWidth: number;
+  isInstalled?: boolean;
+  statusMessage?: string | null;
+}
+
+function truncate(str: string, len: number): string {
+  if (!str) return '';
+  return str.length > len ? str.slice(0, len - 1) + '…' : str;
+}
+
+function formatDate(timestamp: number): string {
+  if (!timestamp) return 'N/A';
+  const date = new Date(timestamp * 1000);
+  return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+export function EasyEDADetailView({ component, terminalWidth, isInstalled, statusMessage }: EasyEDADetailViewProps) {
+  const isWide = terminalWidth >= 80;
+  const labelWidth = 16;
+  const colWidth = isWide ? Math.floor((terminalWidth - 4) / 2) : terminalWidth - 2;
+  const valueWidth = colWidth - labelWidth - 1;
+
+  const description = (
+    <Box flexDirection="column" marginBottom={1} width={terminalWidth - 2}>
+      <Text dimColor>Description</Text>
+      <Text wrap="wrap">{component.description || 'No description'}</Text>
+    </Box>
+  );
+
+  const partInfo = (
+    <Box flexDirection="column" width={colWidth}>
+      <Text bold underline color="cyan">Component Info</Text>
+      <Box marginTop={1} flexDirection="column">
+        <Box>
+          <Text dimColor>{'Title'.padEnd(labelWidth)}</Text>
+          <Text bold>{truncate(component.title || 'N/A', valueWidth)}</Text>
+        </Box>
+        <Box>
+          <Text dimColor>{'UUID'.padEnd(labelWidth)}</Text>
+          <Text color="cyan">{truncate(component.uuid, valueWidth)}</Text>
+        </Box>
+        <Box>
+          <Text dimColor>{'Package'.padEnd(labelWidth)}</Text>
+          <Text>{truncate(component.footprint?.name || 'N/A', valueWidth)}</Text>
+        </Box>
+        <Box>
+          <Text dimColor>{'Pins'.padEnd(labelWidth)}</Text>
+          <Text>{component.symbol?.pins?.length || 0}</Text>
+        </Box>
+        <Box>
+          <Text dimColor>{'Pads'.padEnd(labelWidth)}</Text>
+          <Text>{component.footprint?.pads?.length || 0}</Text>
+        </Box>
+        <Box>
+          <Text dimColor>{'3D Model'.padEnd(labelWidth)}</Text>
+          <Text color={component.model3d ? 'green' : 'yellow'}>
+            {component.model3d ? 'Yes' : 'No'}
+          </Text>
+        </Box>
+        <Box>
+          <Text dimColor>{'Verified'.padEnd(labelWidth)}</Text>
+          <Text color={component.verify ? 'green' : 'yellow'}>
+            {component.verify ? 'Yes' : 'No'}
+          </Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+
+  const communityInfo = (
+    <Box flexDirection="column" marginLeft={isWide ? 2 : 0} marginTop={isWide ? 0 : 1} width={colWidth}>
+      <Text bold underline color="cyan">Community</Text>
+      <Box marginTop={1} flexDirection="column">
+        <Box>
+          <Text dimColor>{'Owner'.padEnd(labelWidth)}</Text>
+          <Text>{truncate(component.owner?.nickname || component.owner?.username || 'N/A', valueWidth)}</Text>
+        </Box>
+        {component.creator && component.creator.uuid !== component.owner?.uuid && (
+          <Box>
+            <Text dimColor>{'Creator'.padEnd(labelWidth)}</Text>
+            <Text>{truncate(component.creator.nickname || component.creator.username || 'N/A', valueWidth)}</Text>
+          </Box>
+        )}
+        <Box>
+          <Text dimColor>{'Updated'.padEnd(labelWidth)}</Text>
+          <Text>{formatDate(component.updateTime)}</Text>
+        </Box>
+        {component.tags && component.tags.length > 0 && (
+          <Box>
+            <Text dimColor>{'Tags'.padEnd(labelWidth)}</Text>
+            <Text>{truncate(component.tags.slice(0, 3).join(', '), valueWidth)}</Text>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+
+  const footerText = isInstalled
+    ? 'R Regenerate • Esc Back'
+    : 'Enter Install • Esc Back';
+
+  return (
+    <Box flexDirection="column" width="100%">
+      {description}
+      <Box flexDirection={isWide ? 'row' : 'column'} width="100%">
+        {partInfo}
+        {communityInfo}
+      </Box>
+      <Box marginTop={1} flexDirection="column" width="100%">
+        <Divider width={terminalWidth} />
+        {statusMessage && (
+          <Box paddingY={0}>
+            <Text color={statusMessage.startsWith('✓') ? 'green' : statusMessage.startsWith('✗') ? 'red' : 'yellow'}>
+              {statusMessage}
+            </Text>
+          </Box>
+        )}
+        <Box paddingY={0}>
+          <Text dimColor>{footerText}</Text>
+        </Box>
+        <Divider width={terminalWidth} />
+      </Box>
+    </Box>
+  );
+}

package/src/app/navigation/NavigationContext.tsx

@@ -83,5 +83,9 @@ export function useNavigation(): NavigationContextValue {
 
 export function useCurrentScreen(): HistoryEntry {
   const { history, currentIndex } = useNavigation();
-  return history[currentIndex];
+  const entry = history[currentIndex];
+  if (!entry) {
+    throw new Error(`Invalid navigation state: currentIndex=${currentIndex}, history.length=${history.length}`);
+  }
+  return entry;
 }

package/src/app/navigation/types.ts

@@ -1,6 +1,6 @@
-import type { ComponentSearchResult, ComponentDetails, InstallResult, InstalledComponent, LibraryStatus } from '@jlcpcb/core';
+import type { ComponentSearchResult, ComponentDetails, InstallResult, InstalledComponent, LibraryStatus, EasyEDACommunityComponent } from '@jlcpcb/core';
 
-export type ScreenName = 'search' | 'info' | 'install' | 'library' | 'library-setup' | 'installed';
+export type ScreenName = 'search' | 'info' | 'install' | 'library' | 'library-setup' | 'installed' | 'easyeda-info';
 
 // Common component type that works across screens
 export type ComponentInfo = ComponentSearchResult | ComponentDetails;
@@ -37,6 +37,11 @@ export interface InstalledParams {
   error?: string;
 }
 
+export interface EasyEDAInfoParams {
+  uuid: string;
+  component?: EasyEDACommunityComponent;
+}
+
 export interface ScreenParams {
   search: SearchParams;
   info: InfoParams;
@@ -44,6 +49,7 @@ export interface ScreenParams {
   library: LibraryParams;
   'library-setup': LibrarySetupParams;
   installed: InstalledParams;
+  'easyeda-info': EasyEDAInfoParams;
 }
 
 export interface HistoryEntry<T extends ScreenName = ScreenName> {

package/src/app/screens/EasyEDAInfoScreen.tsx

@@ -0,0 +1,150 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { createComponentService, createLibraryService, type EasyEDACommunityComponent } from '@jlcpcb/core';
+import { useNavigation, useCurrentScreen } from '../navigation/NavigationContext.js';
+import type { EasyEDAInfoParams } from '../navigation/types.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+import { EasyEDADetailView } from '../components/EasyEDADetailView.js';
+
+const componentService = createComponentService();
+const libraryService = createLibraryService();
+
+export function EasyEDAInfoScreen() {
+  const { replace } = useNavigation();
+  const { params } = useCurrentScreen() as { screen: 'easyeda-info'; params: EasyEDAInfoParams };
+  const { columns: terminalWidth } = useTerminalSize();
+
+  const [component, setComponent] = useState<EasyEDACommunityComponent | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isInstalling, setIsInstalling] = useState(false);
+  const [statusMessage, setStatusMessage] = useState<string | null>(null);
+  const [isInstalled, setIsInstalled] = useState(false);
+  const installingRef = useRef(false);
+
+  // Always fetch component to keep the process alive
+  useEffect(() => {
+    const init = async () => {
+      if (!params.uuid) {
+        setError('No UUID provided');
+        setIsLoading(false);
+        return;
+      }
+
+      try {
+        // Ensure global tables are set up
+        await libraryService.ensureGlobalTables();
+
+        // Fetch component
+        const fetched = await componentService.fetchCommunity(params.uuid);
+        if (fetched) {
+          setComponent(fetched);
+          // Check if already installed
+          const installed = await libraryService.isEasyEDAInstalled(fetched.title);
+          setIsInstalled(installed);
+        } else {
+          setError('Component not found');
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch component');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    init();
+  }, [params.uuid]);
+
+  useInput((input, key) => {
+    if (isLoading || !component || isInstalling) return;
+
+    const lowerInput = input.toLowerCase();
+
+    // R - Regenerate (force reinstall)
+    if (lowerInput === 'r') {
+      if (installingRef.current) return;
+      installingRef.current = true;
+      setIsInstalling(true);
+      setStatusMessage('Regenerating symbol and footprint...');
+
+      libraryService.install(params.uuid, { force: true })
+        .then((result) => {
+          setStatusMessage(`✓ Reinstalled: ${result.symbolRef}`);
+          setIsInstalled(true);
+          setTimeout(() => setStatusMessage(null), 3000);
+        })
+        .catch((err) => {
+          setStatusMessage(`✗ Failed: ${err instanceof Error ? err.message : 'Unknown error'}`);
+          setTimeout(() => setStatusMessage(null), 3000);
+        })
+        .finally(() => {
+          setIsInstalling(false);
+          installingRef.current = false;
+        });
+      return;
+    }
+
+    // Enter - Install
+    if (key.return) {
+      if (installingRef.current) return;
+      installingRef.current = true;
+      setIsInstalling(true);
+      setStatusMessage('Installing component...');
+
+      // Ensure libraries are set up
+      libraryService.ensureGlobalTables()
+        .then(() => libraryService.install(params.uuid, {}))
+        .then((result) => {
+          if (result.symbolAction === 'exists') {
+            setStatusMessage(`⚡ Already installed (use R to reinstall)`);
+          } else {
+            setStatusMessage(`✓ Installed: ${result.symbolRef}`);
+            setIsInstalled(true);
+          }
+          setTimeout(() => setStatusMessage(null), 3000);
+        })
+        .catch((err) => {
+          setStatusMessage(`✗ Failed: ${err instanceof Error ? err.message : 'Unknown error'}`);
+          setTimeout(() => setStatusMessage(null), 3000);
+        })
+        .finally(() => {
+          setIsInstalling(false);
+          installingRef.current = false;
+        });
+    }
+  });
+
+  if (isLoading) {
+    return (
+      <Box flexDirection="column">
+        <Text color="yellow">⏳ Loading component {params.uuid}...</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.title}</Text>
+          {isInstalled && <Text color="green"> ✓ Installed</Text>}
+        </Text>
+      </Box>
+      <EasyEDADetailView
+        component={component}
+        terminalWidth={terminalWidth}
+        isInstalled={isInstalled}
+        statusMessage={statusMessage}
+      />
+    </Box>
+  );
+}

package/src/app/screens/InfoScreen.tsx

@@ -73,38 +73,14 @@ export function InfoScreen() {
   const datasheetUrl = component && ('datasheetPdf' in component ? component.datasheetPdf : 'datasheet' in component ? component.datasheet : undefined);
 
   const [isRegenerating, setIsRegenerating] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
   const [regenerateMessage, setRegenerateMessage] = useState<string | null>(null);
 
   useInput((input, key) => {
-    if (isLoading || !component || isCheckingLibrary || isRegenerating) return;
+    if (isLoading || !component || isCheckingLibrary || isRegenerating || isDeleting) 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);
@@ -124,8 +100,27 @@ export function InfoScreen() {
       return;
     }
 
-    // D - Open Datasheet
-    if (lowerInput === 'd' && datasheetUrl) {
+    // D - Delete component
+    if (lowerInput === 'd' && installedInfo) {
+      setIsDeleting(true);
+      setRegenerateMessage('Deleting component...');
+
+      libraryService.remove(installedInfo.lcscId)
+        .then(() => {
+          setRegenerateMessage('✓ Component deleted');
+          setInstalledInfo(null);
+          setTimeout(() => setRegenerateMessage(null), 2000);
+        })
+        .catch((err) => {
+          setRegenerateMessage(`✗ Delete failed: ${err instanceof Error ? err.message : 'Unknown error'}`);
+          setTimeout(() => setRegenerateMessage(null), 3000);
+        })
+        .finally(() => setIsDeleting(false));
+      return;
+    }
+
+    // O - Open Datasheet
+    if (lowerInput === 'o' && datasheetUrl) {
       open(datasheetUrl);
       return;
     }

package/src/commands/easyeda.ts

@@ -0,0 +1,149 @@
+/**
+ * EasyEDA subcommands
+ * Browser-based component search and exploration
+ */
+
+import open from 'open'
+import * as p from '@clack/prompts'
+import chalk from 'chalk'
+import {
+  startHttpServer,
+  stopHttpServer,
+  createComponentService,
+  createLibraryService,
+  type SearchOptions,
+} from '@jlcpcb/core'
+import { renderApp } from '../app/App.js'
+
+const componentService = createComponentService()
+const libraryService = createLibraryService()
+
+interface EasyedaSearchOptions {
+  port?: number
+}
+
+/**
+ * Launch the EasyEDA component browser with an optional search query
+ */
+export async function easyedaSearchCommand(
+  query: string,
+  options: EasyedaSearchOptions
+): Promise<void> {
+  const port = options.port ?? 3847
+
+  console.log('Starting component browser...')
+
+  startHttpServer({
+    port,
+    onReady: async (url) => {
+      // Append query to URL if provided
+      const searchUrl = query ? `${url}?q=${encodeURIComponent(query)}` : url
+
+      console.log(`Browser opened at ${searchUrl}`)
+
+      // Open browser
+      await open(searchUrl)
+
+      console.log('Press Ctrl+C to stop the server and exit')
+    }
+  })
+
+  // Keep running until Ctrl+C
+  await new Promise<void>((resolve) => {
+    process.on('SIGINT', () => {
+      console.log('\nShutting down server...')
+      stopHttpServer()
+      resolve()
+      process.exit(0)
+    })
+  })
+}
+
+interface EasyedaInstallOptions {
+  projectPath?: string
+  include3d?: boolean
+  force?: boolean
+}
+
+/**
+ * Install an EasyEDA community component to KiCad libraries
+ */
+export async function easyedaInstallCommand(
+  uuid: string | undefined,
+  options: EasyedaInstallOptions
+): Promise<void> {
+  // If UUID provided with --force, do direct install (non-interactive)
+  if (uuid && options.force) {
+    const spinner = p.spinner()
+    spinner.start(`Installing EasyEDA component ${uuid}...`)
+
+    try {
+      // Ensure libraries are set up
+      await libraryService.ensureGlobalTables()
+
+      // Install the component
+      const result = await libraryService.install(uuid, {
+        projectPath: options.projectPath,
+        include3d: options.include3d,
+        force: true,
+      })
+
+      spinner.stop(chalk.green('✓ Component installed'))
+
+      // Display result
+      console.log()
+      console.log(chalk.cyan('Symbol:    '), result.symbolRef)
+      console.log(chalk.cyan('Footprint: '), result.footprintRef)
+      console.log(chalk.cyan('Action:    '), result.symbolAction)
+      if (result.files.model3d) {
+        console.log(chalk.cyan('3D Model:  '), result.files.model3d)
+      }
+      console.log()
+      console.log(chalk.dim(`Library: ${result.files.symbolLibrary}`))
+    } catch (error) {
+      spinner.stop(chalk.red('✗ Installation failed'))
+      p.log.error(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`)
+      process.exit(1)
+    }
+    return
+  }
+
+  // If UUID provided (without --force), launch TUI to fetch and display
+  if (uuid) {
+    // Launch TUI at EasyEDA info screen - let it fetch the component
+    await renderApp('easyeda-info', { uuid })
+    return
+  }
+
+  // No UUID provided - interactive search mode
+  const query = await p.text({
+    message: 'Search EasyEDA community library:',
+    placeholder: 'e.g., STM32F103, ESP32, Arduino Nano',
+    validate: (value) => {
+      if (!value) return 'Please enter a search term'
+      return undefined
+    },
+  })
+
+  if (p.isCancel(query)) {
+    p.cancel('Installation cancelled')
+    process.exit(0)
+  }
+
+  console.log(`Searching EasyEDA community for "${query}"...`)
+
+  const searchOptions: SearchOptions = {
+    limit: 20,
+    source: 'easyeda-community',
+  }
+  const results = await componentService.search(query as string, searchOptions)
+
+  if (results.length === 0) {
+    console.log('No components found. Try a different search term.')
+    return
+  }
+
+  // Clear the "Searching..." line and launch interactive UI
+  process.stdout.write('\x1b[1A\x1b[2K')
+  await renderApp('search', { query: query as string, results })
+}

package/src/commands/info.ts

@@ -33,5 +33,5 @@ export async function infoCommand(id: string, options: InfoOptions): Promise<voi
   }
 
   // Interactive mode - launch TUI
-  renderApp('info', { componentId: id });
+  await renderApp('info', { componentId: id });
 }