@jlcpcb/cli 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jlcpcb/cli",
-  "version": "0.1.0",
+  "version": "0.2.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",

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;
   }

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/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/commands/easyeda.ts

@@ -0,0 +1,151 @@
+/**
+ * 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
+    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)
+  }
+
+  const spinner = p.spinner()
+  spinner.start(`Searching EasyEDA community for "${query}"...`)
+
+  const searchOptions: SearchOptions = {
+    limit: 20,
+    source: 'easyeda-community',
+  }
+  const results = await componentService.search(query as string, searchOptions)
+
+  spinner.stop(`Found ${results.length} results`)
+
+  if (results.length === 0) {
+    p.log.warn('No components found. Try a different search term.')
+    return
+  }
+
+  // Launch TUI for selection and install
+  renderApp('search', { query: query as string, results })
+}

package/src/commands/install.ts

@@ -11,6 +11,11 @@ import { renderApp } from '../app/App.js';
 const componentService = createComponentService();
 const libraryService = createLibraryService();
 
+// LCSC IDs match pattern: C followed by digits (e.g., C2040, C5446)
+function isLcscId(id: string): boolean {
+  return /^C\d+$/i.test(id);
+}
+
 interface InstallOptions {
   projectPath?: string;
   include3d?: boolean;
@@ -18,6 +23,13 @@ interface InstallOptions {
 }
 
 export async function installCommand(id: string | undefined, options: InstallOptions): Promise<void> {
+  // Check if ID looks like an EasyEDA UUID (not an LCSC ID)
+  if (id && !isLcscId(id)) {
+    p.log.error(`"${id}" is not an LCSC part number (e.g., C2040).`);
+    p.log.info(`For EasyEDA community components, use: ${chalk.cyan(`jlc easyeda install ${id}`)}`);
+    process.exit(1);
+  }
+
   // If ID provided with --force, do direct install (non-interactive)
   if (id && options.force) {
     const spinner = p.spinner();

package/src/index.ts

@@ -10,6 +10,7 @@ import { searchCommand } from './commands/search.js';
 import { infoCommand } from './commands/info.js';
 import { installCommand } from './commands/install.js';
 import { libraryCommand } from './commands/library.js';
+import { easyedaSearchCommand, easyedaInstallCommand } from './commands/easyeda.js';
 
 const program = new Command();
 
@@ -67,4 +68,34 @@ program
     });
   });
 
+// EasyEDA subcommand group
+const easyeda = program
+  .command('easyeda')
+  .description('EasyEDA community component browser');
+
+easyeda
+  .command('search <query...>')
+  .description('Open browser-based component search')
+  .option('-p, --port <number>', 'HTTP server port', '3847')
+  .action(async (queryParts: string[], options) => {
+    const query = queryParts.join(' ');
+    await easyedaSearchCommand(query, {
+      port: options.port ? parseInt(options.port, 10) : undefined,
+    });
+  });
+
+easyeda
+  .command('install [uuid]')
+  .description('Install EasyEDA community component to KiCad libraries')
+  .option('-p, --project <path>', 'Install to project-local library')
+  .option('--with-3d', 'Include 3D model')
+  .option('-f, --force', 'Force reinstall (regenerate symbol and footprint)')
+  .action(async (uuid, options) => {
+    await easyedaInstallCommand(uuid, {
+      projectPath: options.project,
+      include3d: options.with3d,
+      force: options.force,
+    });
+  });
+
 program.parse();