@open-pencil/cli 0.7.0 → 0.9.0

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@open-pencil/cli",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "license": "MIT",
   "type": "module",
   "bin": {
     "openpencil": "./src/index.ts"
   },
-  "files": ["src"],
+  "files": [
+    "src"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/open-pencil/open-pencil.git",
@@ -17,7 +19,7 @@
     "provenance": true
   },
   "dependencies": {
-    "@open-pencil/core": "workspace:*",
+    "@open-pencil/core": "^0.9.0",
     "agentfmt": "^0.1.3",
     "canvaskit-wasm": "^0.40.0",
     "citty": "^0.1.6"

package/src/app-client.ts

@@ -0,0 +1,56 @@
+import { AUTOMATION_HTTP_PORT } from '@open-pencil/core'
+
+const HEALTH_URL = `http://127.0.0.1:${AUTOMATION_HTTP_PORT}/health`
+const RPC_URL = `http://127.0.0.1:${AUTOMATION_HTTP_PORT}/rpc`
+
+let cachedToken: string | null = null
+
+export async function getAppToken(): Promise<string> {
+  if (cachedToken) return cachedToken
+  const res = await fetch(HEALTH_URL).catch(() => null)
+  if (!res || !res.ok) {
+    throw new Error(
+      `Could not connect to OpenPencil app on localhost:${AUTOMATION_HTTP_PORT}.\n` +
+      'Is the app running? Start it with: bun run tauri dev'
+    )
+  }
+  const data = (await res.json()) as { status: string; token?: string }
+  if (data.status !== 'ok' || !data.token) {
+    throw new Error(
+      'OpenPencil app is running but no document is open.\n' +
+      'Open a document in the app, or provide a .fig file path.'
+    )
+  }
+  cachedToken = data.token
+  return cachedToken
+}
+
+export async function rpc<T = unknown>(command: string, args: unknown = {}): Promise<T> {
+  const token = await getAppToken()
+  const res = await fetch(RPC_URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`
+    },
+    body: JSON.stringify({ command, args })
+  })
+
+  if (!res.ok) {
+    const body = (await res.json().catch(() => ({ error: `HTTP ${res.status}` }))) as { error?: string; ok?: boolean }
+    throw new Error(body.error ?? `RPC failed: HTTP ${res.status}`)
+  }
+
+  const body = (await res.json()) as { ok?: boolean; result?: T; error?: string }
+  if (body.ok === false) throw new Error(body.error ?? 'RPC failed')
+  return body.result as T
+}
+
+export function isAppMode(file?: string): boolean {
+  return !file
+}
+
+export function requireFile(file?: string): string {
+  if (!file) throw new Error('File path is required for headless mode')
+  return file
+}

package/src/commands/analyze/clusters.ts

@@ -1,43 +1,15 @@
 import { defineCommand } from 'citty'
 
 import { loadDocument } from '../../headless'
+import { isAppMode, requireFile, rpc } from '../../app-client'
 import { bold, fmtList, fmtSummary } from '../../format'
-import type { SceneNode, SceneGraph } from '@open-pencil/core'
-
-interface ClusterNode {
-  id: string
-  name: string
-  type: string
-  width: number
-  height: number
-  childCount: number
-}
-
-interface Cluster {
-  signature: string
-  nodes: ClusterNode[]
-}
+import { executeRpcCommand } from '@open-pencil/core'
 
-function buildSignature(graph: SceneGraph, node: SceneNode): string {
-  const childTypes = new Map<string, number>()
-  for (const childId of node.childIds) {
-    const child = graph.getNode(childId)
-    if (!child) continue
-    childTypes.set(child.type, (childTypes.get(child.type) ?? 0) + 1)
-  }
-  const childPart = [...childTypes.entries()]
-    .sort((a, b) => a[0].localeCompare(b[0]))
-    .map(([t, c]) => `${t}:${c}`)
-    .join(',')
-
-  const w = Math.round(node.width / 10) * 10
-  const h = Math.round(node.height / 10) * 10
-  return `${node.type}:${w}x${h}|${childPart}`
-}
+import type { AnalyzeClustersResult } from '@open-pencil/core'
 
-function calcConfidence(nodes: ClusterNode[]): number {
+function calcConfidence(nodes: Array<{ width: number; height: number; childCount: number }>): number {
   if (nodes.length < 2) return 100
-  const base = nodes[0]!
+  const base = nodes[0]
   let score = 0
   for (const node of nodes.slice(1)) {
     const sizeDiff = Math.abs(node.width - base.width) + Math.abs(node.height - base.height)
@@ -52,7 +24,7 @@ function calcConfidence(nodes: ClusterNode[]): number {
 
 function formatSignature(sig: string): string {
   const [typeSize, children] = sig.split('|')
-  const type = typeSize?.split(':')[0]
+  const type = typeSize.split(':')[0]
   if (!type) return sig
   const typeName = type.charAt(0) + type.slice(1).toLowerCase()
   if (!children) return typeName
@@ -67,63 +39,31 @@ function formatSignature(sig: string): string {
   return `${typeName} > [${childParts.join(', ')}]`
 }
 
-function findClusters(
-  graph: SceneGraph,
-  minSize: number,
-  minCount: number
-): { clusters: Cluster[]; totalNodes: number } {
-  const sigMap = new Map<string, ClusterNode[]>()
-  let totalNodes = 0
-
-  for (const node of graph.getAllNodes()) {
-    if (node.type === 'CANVAS') continue
-    totalNodes++
-    if (node.width < minSize || node.height < minSize) continue
-    if (node.childIds.length === 0) continue
-
-    const sig = buildSignature(graph, node)
-    const arr = sigMap.get(sig) ?? []
-    arr.push({
-      id: node.id,
-      name: node.name,
-      type: node.type,
-      width: Math.round(node.width),
-      height: Math.round(node.height),
-      childCount: node.childIds.length
-    })
-    sigMap.set(sig, arr)
-  }
-
-  const clusters = [...sigMap.entries()]
-    .filter(([, nodes]) => nodes.length >= minCount)
-    .map(([signature, nodes]) => ({ signature, nodes }))
-    .sort((a, b) => b.nodes.length - a.nodes.length)
-
-  return { clusters, totalNodes }
+async function getData(file: string | undefined, args: { limit?: string; 'min-size'?: string; 'min-count'?: string }): Promise<AnalyzeClustersResult> {
+  const rpcArgs = { limit: Number(args.limit ?? 20), minSize: Number(args['min-size'] ?? 30), minCount: Number(args['min-count'] ?? 2) }
+  if (isAppMode(file)) return rpc<AnalyzeClustersResult>('analyze_clusters', rpcArgs)
+  const graph = await loadDocument(requireFile(file))
+  return executeRpcCommand(graph, 'analyze_clusters', rpcArgs) as AnalyzeClustersResult
 }
 
 export default defineCommand({
   meta: { description: 'Find repeated design patterns (potential components)' },
   args: {
-    file: { type: 'positional', description: '.fig file path', required: true },
+    file: { type: 'positional', description: '.fig file path (omit to connect to running app)', required: false },
     limit: { type: 'string', description: 'Max clusters to show', default: '20' },
     'min-size': { type: 'string', description: 'Min node size in px', default: '30' },
     'min-count': { type: 'string', description: 'Min instances to form cluster', default: '2' },
     json: { type: 'boolean', description: 'Output as JSON' }
   },
   async run({ args }) {
-    const graph = await loadDocument(args.file)
-    const limit = Number(args.limit)
-    const minSize = Number(args['min-size'])
-    const minCount = Number(args['min-count'])
-    const { clusters, totalNodes } = findClusters(graph, minSize, minCount)
+    const data = await getData(args.file, args)
 
     if (args.json) {
-      console.log(JSON.stringify({ clusters: clusters.slice(0, limit), totalNodes }, null, 2))
+      console.log(JSON.stringify(data, null, 2))
       return
     }
 
-    if (clusters.length === 0) {
+    if (data.clusters.length === 0) {
       console.log('No repeated patterns found.')
       return
     }
@@ -132,8 +72,8 @@ export default defineCommand({
     console.log(bold('  Repeated patterns'))
     console.log('')
 
-    const items = clusters.slice(0, limit).map((c) => {
-      const first = c.nodes[0]!
+    const items = data.clusters.map((c) => {
+      const first = c.nodes[0]
       const confidence = calcConfidence(c.nodes)
 
       const widths = c.nodes.map((n) => n.width)
@@ -160,12 +100,13 @@ export default defineCommand({
 
     console.log(fmtList(items, { numbered: true }))
 
-    const clusteredNodes = clusters.reduce((sum, c) => sum + c.nodes.length, 0)
+    const clusteredNodes = data.clusters.reduce((sum, c) => sum + c.nodes.length, 0)
     console.log('')
-    console.log(
-      fmtSummary({ clusters: clusters.length }) +
-        ` from ${totalNodes} nodes (${clusteredNodes} clustered)`
-    )
+    console.log(fmtSummary({
+      clusters: data.clusters.length,
+      'total nodes': data.totalNodes,
+      clustered: clusteredNodes
+    }))
     console.log('')
   }
 })

package/src/commands/analyze/colors.ts

@@ -1,164 +1,43 @@
 import { defineCommand } from 'citty'
 
 import { loadDocument } from '../../headless'
+import { isAppMode, requireFile, rpc } from '../../app-client'
 import { bold, fmtHistogram, fmtList, fmtSummary } from '../../format'
-import type { SceneGraph } from '@open-pencil/core'
+import { executeRpcCommand } from '@open-pencil/core'
 
-interface ColorInfo {
-  hex: string
-  count: number
-  variableName: string | null
-}
-
-function toHex(r: number, g: number, b: number): string {
-  return (
-    '#' +
-    [r, g, b]
-      .map((c) =>
-        Math.round(c * 255)
-          .toString(16)
-          .padStart(2, '0')
-      )
-      .join('')
-  )
-}
-
-function hexToRgb(hex: string): [number, number, number] {
-  const clean = hex.replace('#', '')
-  return [
-    parseInt(clean.slice(0, 2), 16),
-    parseInt(clean.slice(2, 4), 16),
-    parseInt(clean.slice(4, 6), 16)
-  ]
-}
-
-function colorDistance(hex1: string, hex2: string): number {
-  const [r1, g1, b1] = hexToRgb(hex1)
-  const [r2, g2, b2] = hexToRgb(hex2)
-  return Math.sqrt((r1 - r2) ** 2 + (g1 - g2) ** 2 + (b1 - b2) ** 2)
-}
-
-interface Cluster {
-  colors: ColorInfo[]
-  suggestedHex: string
-  totalCount: number
-}
-
-function clusterColors(colors: ColorInfo[], threshold: number): Cluster[] {
-  const clusters: Cluster[] = []
-  const used = new Set<string>()
-  const sorted = [...colors].sort((a, b) => b.count - a.count)
-
-  for (const color of sorted) {
-    if (used.has(color.hex)) continue
-
-    const cluster: Cluster = {
-      colors: [color],
-      suggestedHex: color.hex,
-      totalCount: color.count
-    }
-    used.add(color.hex)
-
-    for (const other of sorted) {
-      if (used.has(other.hex)) continue
-      if (colorDistance(color.hex, other.hex) <= threshold) {
-        cluster.colors.push(other)
-        cluster.totalCount += other.count
-        used.add(other.hex)
-      }
-    }
-
-    if (cluster.colors.length > 1) clusters.push(cluster)
-  }
+import type { AnalyzeColorsResult } from '@open-pencil/core'
 
-  return clusters.sort((a, b) => b.colors.length - a.colors.length)
-}
-
-function collectColors(graph: SceneGraph): { colors: ColorInfo[]; totalNodes: number } {
-  const colorMap = new Map<string, ColorInfo>()
-  let totalNodes = 0
-
-  const addColor = (hex: string, variableName: string | null) => {
-    const existing = colorMap.get(hex)
-    if (existing) {
-      existing.count++
-      if (variableName && !existing.variableName) existing.variableName = variableName
-    } else {
-      colorMap.set(hex, { hex, count: 1, variableName })
-    }
-  }
-
-  for (const node of graph.getAllNodes()) {
-    if (node.type === 'CANVAS') continue
-    totalNodes++
-
-    for (const fill of node.fills) {
-      if (!fill.visible || fill.type !== 'SOLID') continue
-      const hex = toHex(fill.color.r, fill.color.g, fill.color.b)
-      addColor(hex, null)
-    }
-
-    for (const stroke of node.strokes) {
-      if (!stroke.visible) continue
-      const hex = toHex(stroke.color.r, stroke.color.g, stroke.color.b)
-      addColor(hex, null)
-    }
-
-    for (const effect of node.effects) {
-      if (!effect.visible) continue
-      const hex = toHex(effect.color.r, effect.color.g, effect.color.b)
-      addColor(hex, null)
-    }
-
-    for (const [field, varId] of Object.entries(node.boundVariables)) {
-      if (!field.includes('fill') && !field.includes('stroke') && !field.includes('color'))
-        continue
-      const variable = graph.variables.get(varId)
-      if (variable) {
-        const resolvedColor = graph.resolveColorVariable(varId)
-        if (resolvedColor) {
-          const hex = toHex(resolvedColor.r, resolvedColor.g, resolvedColor.b)
-          const existing = colorMap.get(hex)
-          if (existing) existing.variableName = variable.name
-        }
-      }
-    }
-  }
-
-  return { colors: [...colorMap.values()], totalNodes }
+async function getData(file: string | undefined, args: { threshold?: string; similar?: boolean }): Promise<AnalyzeColorsResult> {
+  const rpcArgs = { threshold: Number(args.threshold ?? 15), similar: args.similar }
+  if (isAppMode(file)) return rpc<AnalyzeColorsResult>('analyze_colors', rpcArgs)
+  const graph = await loadDocument(requireFile(file))
+  return executeRpcCommand(graph, 'analyze_colors', rpcArgs) as AnalyzeColorsResult
 }
 
 export default defineCommand({
   meta: { description: 'Analyze color palette usage' },
   args: {
-    file: { type: 'positional', description: '.fig file path', required: true },
+    file: { type: 'positional', description: '.fig file path (omit to connect to running app)', required: false },
     limit: { type: 'string', description: 'Max colors to show', default: '30' },
-    threshold: {
-      type: 'string',
-      description: 'Distance threshold for clustering similar colors (0–50)',
-      default: '15'
-    },
+    threshold: { type: 'string', description: 'Distance threshold for clustering similar colors (0–50)', default: '15' },
     similar: { type: 'boolean', description: 'Show similar color clusters' },
     json: { type: 'boolean', description: 'Output as JSON' }
   },
   async run({ args }) {
-    const graph = await loadDocument(args.file)
+    const data = await getData(args.file, args)
     const limit = Number(args.limit)
-    const threshold = Number(args.threshold)
-    const { colors, totalNodes } = collectColors(graph)
 
     if (args.json) {
-      const clusters = args.similar ? clusterColors(colors, threshold) : []
-      console.log(JSON.stringify({ colors, totalNodes, clusters }, null, 2))
+      console.log(JSON.stringify(data, null, 2))
       return
     }
 
-    if (colors.length === 0) {
+    if (data.colors.length === 0) {
       console.log('No colors found.')
       return
     }
 
-    const sorted = colors.sort((a, b) => b.count - a.count).slice(0, limit)
+    const sorted = data.colors.slice(0, limit)
 
     console.log('')
     console.log(bold('  Colors by usage'))
@@ -173,29 +52,26 @@ export default defineCommand({
       )
     )
 
-    const hardcoded = colors.filter((c) => !c.variableName)
-    const fromVars = colors.filter((c) => c.variableName)
+    const hardcoded = data.colors.filter((c) => !c.variableName)
+    const fromVars = data.colors.filter((c) => c.variableName)
 
     console.log('')
     console.log(
-      fmtSummary({ 'unique colors': colors.length, 'from variables': fromVars.length, hardcoded: hardcoded.length })
+      fmtSummary({ 'unique colors': data.colors.length, 'from variables': fromVars.length, hardcoded: hardcoded.length })
     )
 
-    if (args.similar) {
-      const clusters = clusterColors(hardcoded, threshold)
-      if (clusters.length > 0) {
-        console.log('')
-        console.log(bold('  Similar colors (consider merging)'))
-        console.log('')
-        console.log(
-          fmtList(
-            clusters.slice(0, 10).map((cluster) => ({
-              header: cluster.colors.map((c) => c.hex).join(', '),
-              details: { suggest: cluster.suggestedHex, total: `${cluster.totalCount}×` }
-            }))
-          )
+    if (args.similar && data.clusters.length > 0) {
+      console.log('')
+      console.log(bold('  Similar colors (consider merging)'))
+      console.log('')
+      console.log(
+        fmtList(
+          data.clusters.slice(0, 10).map((cluster) => ({
+            header: cluster.colors.map((c) => c.hex).join(', '),
+            details: { suggest: cluster.suggestedHex, total: `${cluster.totalCount}×` }
+          }))
         )
-      }
+      )
     }
 
     console.log('')

package/src/commands/analyze/spacing.ts

@@ -1,73 +1,42 @@
 import { defineCommand } from 'citty'
 
 import { loadDocument } from '../../headless'
+import { isAppMode, requireFile, rpc } from '../../app-client'
 import { bold, kv, fmtHistogram, fmtSummary } from '../../format'
-import type { SceneGraph } from '@open-pencil/core'
+import { executeRpcCommand } from '@open-pencil/core'
 
-interface SpacingValue {
-  value: number
-  count: number
-}
-
-function collectSpacing(graph: SceneGraph): {
-  gaps: SpacingValue[]
-  paddings: SpacingValue[]
-  totalNodes: number
-} {
-  const gapMap = new Map<number, number>()
-  const paddingMap = new Map<number, number>()
-  let totalNodes = 0
-
-  for (const node of graph.getAllNodes()) {
-    if (node.type === 'CANVAS') continue
-    if (node.layoutMode === 'NONE') continue
-    totalNodes++
-
-    if (node.itemSpacing > 0) {
-      gapMap.set(node.itemSpacing, (gapMap.get(node.itemSpacing) ?? 0) + 1)
-    }
-    if (node.counterAxisSpacing > 0) {
-      gapMap.set(node.counterAxisSpacing, (gapMap.get(node.counterAxisSpacing) ?? 0) + 1)
-    }
-
-    for (const pad of [node.paddingTop, node.paddingRight, node.paddingBottom, node.paddingLeft]) {
-      if (pad > 0) paddingMap.set(pad, (paddingMap.get(pad) ?? 0) + 1)
-    }
-  }
-
-  const toValues = (map: Map<number, number>) =>
-    [...map.entries()]
-      .map(([value, count]) => ({ value, count }))
-      .sort((a, b) => b.count - a.count)
+import type { AnalyzeSpacingResult } from '@open-pencil/core'
 
-  return { gaps: toValues(gapMap), paddings: toValues(paddingMap), totalNodes }
+async function getData(file?: string): Promise<AnalyzeSpacingResult> {
+  if (isAppMode(file)) return rpc<AnalyzeSpacingResult>('analyze_spacing')
+  const graph = await loadDocument(requireFile(file))
+  return executeRpcCommand(graph, 'analyze_spacing', undefined) as AnalyzeSpacingResult
 }
 
 export default defineCommand({
   meta: { description: 'Analyze spacing values (gap, padding)' },
   args: {
-    file: { type: 'positional', description: '.fig file path', required: true },
+    file: { type: 'positional', description: '.fig file path (omit to connect to running app)', required: false },
     grid: { type: 'string', description: 'Base grid size to check against', default: '8' },
     json: { type: 'boolean', description: 'Output as JSON' }
   },
   async run({ args }) {
-    const graph = await loadDocument(args.file)
+    const data = await getData(args.file)
     const gridSize = Number(args.grid)
-    const { gaps, paddings, totalNodes } = collectSpacing(graph)
 
     if (args.json) {
-      console.log(JSON.stringify({ gaps, paddings, totalNodes }, null, 2))
+      console.log(JSON.stringify(data, null, 2))
       return
     }
 
     console.log('')
 
-    if (gaps.length > 0) {
+    if (data.gaps.length > 0) {
       console.log(bold('  Gap values'))
       console.log('')
       console.log(
         fmtHistogram(
-          gaps.slice(0, 15).map((g) => ({
+          data.gaps.slice(0, 15).map((g) => ({
             label: `${String(g.value).padStart(4)}px`,
             value: g.count,
             suffix: g.value % gridSize !== 0 ? '⚠' : undefined
@@ -77,12 +46,12 @@ export default defineCommand({
       console.log('')
     }
 
-    if (paddings.length > 0) {
+    if (data.paddings.length > 0) {
       console.log(bold('  Padding values'))
       console.log('')
       console.log(
         fmtHistogram(
-          paddings.slice(0, 15).map((p) => ({
+          data.paddings.slice(0, 15).map((p) => ({
             label: `${String(p.value).padStart(4)}px`,
             value: p.count,
             suffix: p.value % gridSize !== 0 ? '⚠' : undefined
@@ -92,16 +61,16 @@ export default defineCommand({
       console.log('')
     }
 
-    if (gaps.length === 0 && paddings.length === 0) {
+    if (data.gaps.length === 0 && data.paddings.length === 0) {
       console.log('No auto-layout nodes with spacing found.')
       console.log('')
       return
     }
 
-    console.log(fmtSummary({ 'gap values': gaps.length, 'padding values': paddings.length }))
+    console.log(fmtSummary({ 'gap values': data.gaps.length, 'padding values': data.paddings.length }))
 
-    const offGridGaps = gaps.filter((g) => g.value % gridSize !== 0)
-    const offGridPaddings = paddings.filter((p) => p.value % gridSize !== 0)
+    const offGridGaps = data.gaps.filter((g) => g.value % gridSize !== 0)
+    const offGridPaddings = data.paddings.filter((p) => p.value % gridSize !== 0)
 
     if (offGridGaps.length > 0 || offGridPaddings.length > 0) {
       console.log('')