sootsim 0.1.82 → 0.1.84

package/src/skills/builtin/perf-profile.ts

@@ -0,0 +1,84 @@
+// built-in skill: performance profiling
+
+import type { SootSimSkill } from '../types'
+
+interface OverlayProfile {
+  syncCount?: number
+  avgSyncMs?: number
+  [key: string]: unknown
+}
+
+export const skill: SootSimSkill = {
+  name: 'perf-profile',
+  description: 'Profile render performance of the app',
+  type: 'performance',
+  version: '1.0.0',
+  triggers: ['performance', 'profile', 'render time', 'benchmark', 'perf'],
+  tools: [
+    {
+      name: 'profile_render',
+      description: 'Profile render performance of the current screen',
+      parameters: {
+        duration: {
+          type: 'number',
+          description: 'Profile duration in seconds (default: 5)',
+        },
+        interactions: {
+          type: 'boolean',
+          description: 'Include user interactions in profiling',
+        },
+      },
+      async execute(params, context) {
+        const { chromium } = await import('playwright')
+        const path = await import('path')
+        const fs = await import('fs')
+
+        const browser = await chromium.launch({ headless: true })
+        const page = await browser.newPage({ viewport: { width: 500, height: 900 } })
+
+        try {
+          await page.goto(context.url, { waitUntil: 'networkidle' })
+          await page.waitForFunction('window.__sootsimTest && window.__sootsimA11y', {
+            timeout: 10000,
+          })
+          await page.waitForTimeout(1000)
+
+          // reset profiler
+          await page.evaluate('window.__sootsimA11y.resetProfile()')
+
+          // wait for profile duration
+          const duration = (params.duration || 5) * 1000
+          await page.waitForTimeout(duration)
+
+          // collect results
+          const profile = (await page.evaluate(
+            'window.__sootsimA11y.profile()',
+          )) as OverlayProfile
+          const nodeCount = await page.evaluate('window.__sootsimTest.getNodeCount()')
+          const syncCount = profile.syncCount ?? 0
+
+          const report = {
+            timestamp: new Date().toISOString(),
+            duration: params.duration || 5,
+            nodeCount,
+            ...profile,
+            fps: syncCount > 0 ? (syncCount / (duration / 1000)).toFixed(1) : '0',
+          }
+
+          const reportPath = path.join(context.outputDir, 'perf-report.json')
+          fs.mkdirSync(path.dirname(reportPath), { recursive: true })
+          fs.writeFileSync(reportPath, JSON.stringify(report, null, 2))
+
+          return {
+            success: true,
+            message: `${report.fps} fps, ${profile.avgSyncMs?.toFixed(1)}ms avg sync, ${nodeCount} nodes`,
+            artifacts: [{ type: 'report', name: 'perf-report', path: reportPath }],
+            data: report,
+          }
+        } finally {
+          await browser.close()
+        }
+      },
+    },
+  ],
+}

package/src/skills/builtin/screenshot-all.ts

@@ -0,0 +1,46 @@
+// built-in skill: capture all screens in light/dark mode
+
+import type { SootSimSkill } from '../types'
+
+export const skill: SootSimSkill = {
+  name: 'screenshot-all',
+  description: 'Capture screenshots of all screens in the app',
+  type: 'screenshot',
+  version: '1.0.0',
+  triggers: ['screenshot', 'capture screens', 'capture all', 'take screenshots'],
+  tools: [
+    {
+      name: 'capture_screenshot',
+      description: 'Capture a screenshot of the current screen',
+      parameters: {
+        name: { type: 'string', description: 'Screenshot name', required: true },
+        theme: { type: 'string', description: 'Color scheme: light or dark' },
+      },
+      async execute(params, context) {
+        const { chromium } = await import('playwright')
+        const path = await import('path')
+        const fs = await import('fs')
+
+        const browser = await chromium.launch({ headless: true })
+        const page = await browser.newPage({ viewport: { width: 500, height: 900 } })
+
+        try {
+          await page.goto(context.url, { waitUntil: 'networkidle' })
+          await page.waitForTimeout(2000)
+
+          const outputPath = path.join(context.outputDir, `${params.name}.png`)
+          fs.mkdirSync(path.dirname(outputPath), { recursive: true })
+          await page.screenshot({ path: outputPath })
+
+          return {
+            success: true,
+            message: `Screenshot saved: ${params.name}`,
+            artifacts: [{ type: 'screenshot', name: params.name, path: outputPath }],
+          }
+        } finally {
+          await browser.close()
+        }
+      },
+    },
+  ],
+}

package/src/skills/builtin/test-flow.ts

@@ -0,0 +1,118 @@
+// built-in skill: run test flows against the app
+
+import type { SootSimSkill } from '../types'
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+export const skill: SootSimSkill = {
+  name: 'test-flow',
+  description: 'Run YAML test flows against the app',
+  type: 'testing',
+  version: '1.0.0',
+  triggers: ['run test', 'test flow', 'run flow', 'test the app'],
+  tools: [
+    {
+      name: 'run_flow',
+      description: 'Run a YAML flow against the app',
+      parameters: {
+        flowPath: {
+          type: 'string',
+          description: 'Path to the YAML flow file',
+          required: true,
+        },
+        record: { type: 'boolean', description: 'Record video of the flow' },
+      },
+      async execute(params, context) {
+        const fs = await import('fs')
+        const path = await import('path')
+        const yaml = await import('yaml')
+        const { DEFAULT_SOOTSIM_BRIDGE_PORT } = await import('../../bridge-constants')
+        const { SootSimBridgeHost } = await import('../../host/bridge-host')
+        const { createBridge } = await import('../../../cli/ws-bridge')
+        const { SootSimBridgeFlowRunner } =
+          await import('../../../cli/bridge-flow-runner')
+
+        const host = new SootSimBridgeHost({ port: DEFAULT_SOOTSIM_BRIDGE_PORT })
+        host.start({ silent: true })
+
+        try {
+          const flowContent = fs.readFileSync(params.flowPath, 'utf8')
+          const fmMatch = flowContent.match(/^---\n([\s\S]*?)\n---\n?/)
+          const stepsBody = fmMatch ? flowContent.slice(fmMatch[0].length) : flowContent
+          const steps = yaml.parse(stepsBody)
+          const beforeIds = new Set(host.listSims().map((sim) => sim.id))
+
+          await host.openUrl(context.url)
+
+          let simId: string | null = null
+          for (let i = 0; i < 60; i++) {
+            const sims = host.listSims()
+            const opened =
+              sims.find((sim) => !beforeIds.has(sim.id) && sim.readyState === 'open') ||
+              sims.find((sim) => sim.readyState === 'open')
+            if (opened) {
+              simId = opened.id
+              break
+            }
+            await sleep(500)
+          }
+
+          if (!simId) {
+            throw new Error('no sim connected to the bridge host')
+          }
+
+          const bridge = createBridge(DEFAULT_SOOTSIM_BRIDGE_PORT, {
+            simId,
+            commandTimeoutMs: 15000,
+          })
+          const driver = new SootSimBridgeFlowRunner(bridge, {
+            screenshotDir: context.outputDir,
+            flowDir: path.dirname(path.resolve(params.flowPath)),
+            simId,
+            recordingOutputDir: params.record ? context.outputDir : undefined,
+          })
+
+          let videoPath: string | null = null
+
+          try {
+            await driver.waitForTree(120000)
+            if (params.record) {
+              await driver.startRecording()
+            }
+            await driver.runFlow(steps)
+            if (params.record) {
+              videoPath = await driver.stopRecording()
+            }
+
+            return {
+              success: true,
+              message: `Flow completed: ${steps.length} steps passed`,
+              data: {
+                steps: steps.length,
+                simId,
+                videoPath: videoPath || undefined,
+              },
+              artifacts: videoPath
+                ? [{ type: 'video', name: path.basename(videoPath), path: videoPath }]
+                : undefined,
+            }
+          } finally {
+            try {
+              await bridge.closeSim(simId)
+            } catch {}
+            bridge.close()
+          }
+        } catch (err: any) {
+          return {
+            success: false,
+            message: `Flow failed: ${err.message}`,
+          }
+        } finally {
+          await host.close().catch(() => {})
+        }
+      },
+    },
+  ],
+}

package/src/skills/builtin/visual-diff.ts

@@ -0,0 +1,94 @@
+// built-in skill: visual diff against baselines
+
+import type { SootSimSkill } from '../types'
+
+export const skill: SootSimSkill = {
+  name: 'visual-diff',
+  description: 'Compare current rendering against baseline screenshots',
+  type: 'review',
+  version: '1.0.0',
+  triggers: ['visual diff', 'compare', 'visual regression', 'diff screenshots'],
+  tools: [
+    {
+      name: 'visual_diff',
+      description: 'Compare current screen against a baseline screenshot',
+      parameters: {
+        baseline: {
+          type: 'string',
+          description: 'Path to baseline screenshot',
+          required: true,
+        },
+        name: { type: 'string', description: 'Name for the diff output', required: true },
+        threshold: {
+          type: 'number',
+          description: 'Pixel match threshold (0-1, default 0.1)',
+        },
+      },
+      async execute(params, context) {
+        const { chromium } = await import('playwright')
+        const path = await import('path')
+        const fs = await import('fs')
+
+        const browser = await chromium.launch({ headless: true })
+        const page = await browser.newPage({ viewport: { width: 500, height: 900 } })
+
+        try {
+          await page.goto(context.url, { waitUntil: 'networkidle' })
+          await page.waitForTimeout(2000)
+
+          // capture current
+          const currentPath = path.join(context.outputDir, `${params.name}-current.png`)
+          fs.mkdirSync(path.dirname(currentPath), { recursive: true })
+          await page.screenshot({ path: currentPath })
+
+          // compare using pixelmatch if available
+          try {
+            const { PNG } = await import('pngjs')
+            const pixelmatch = (await import('pixelmatch')).default
+
+            const baseline = PNG.sync.read(fs.readFileSync(params.baseline))
+            const current = PNG.sync.read(fs.readFileSync(currentPath))
+
+            const { width, height } = baseline
+            const diff = new PNG({ width, height })
+
+            const numDiffPixels = pixelmatch(
+              baseline.data,
+              current.data,
+              diff.data,
+              width,
+              height,
+              { threshold: params.threshold || 0.1 },
+            )
+
+            const diffPath = path.join(context.outputDir, `${params.name}-diff.png`)
+            fs.writeFileSync(diffPath, PNG.sync.write(diff))
+
+            const totalPixels = width * height
+            const diffPercent = ((numDiffPixels / totalPixels) * 100).toFixed(2)
+
+            return {
+              success: numDiffPixels === 0,
+              message: `${diffPercent}% difference (${numDiffPixels} pixels)`,
+              artifacts: [
+                { type: 'screenshot', name: `${params.name}-current`, path: currentPath },
+                { type: 'screenshot', name: `${params.name}-diff`, path: diffPath },
+              ],
+              data: { diffPixels: numDiffPixels, totalPixels, diffPercent },
+            }
+          } catch {
+            return {
+              success: true,
+              message: 'Screenshot captured (pixelmatch not available for comparison)',
+              artifacts: [
+                { type: 'screenshot', name: `${params.name}-current`, path: currentPath },
+              ],
+            }
+          }
+        } finally {
+          await browser.close()
+        }
+      },
+    },
+  ],
+}

package/src/skills/registry.ts

@@ -0,0 +1,107 @@
+// skill registry — load, discover, and match skills
+
+import * as fs from 'fs'
+import * as path from 'path'
+import { skill as a11yReviewSkill } from './builtin/a11y-review'
+import { skill as compatCheckSkill } from './builtin/compat-check'
+import { skill as perfProfileSkill } from './builtin/perf-profile'
+import { skill as screenshotAllSkill } from './builtin/screenshot-all'
+import { skill as testFlowSkill } from './builtin/test-flow'
+import { skill as visualDiffSkill } from './builtin/visual-diff'
+import type { SootSimSkill, SkillContext } from './types'
+
+const _skills: Map<string, SootSimSkill> = new Map()
+const BUILTIN_SKILLS = [
+  a11yReviewSkill,
+  compatCheckSkill,
+  perfProfileSkill,
+  screenshotAllSkill,
+  testFlowSkill,
+  visualDiffSkill,
+]
+
+export const skillRegistry = {
+  register(skill: SootSimSkill) {
+    _skills.set(skill.name, skill)
+  },
+
+  get(name: string): SootSimSkill | undefined {
+    return _skills.get(name)
+  },
+
+  listAll(): SootSimSkill[] {
+    return Array.from(_skills.values())
+  },
+
+  // match skills by natural language query against triggers
+  match(query: string): SootSimSkill[] {
+    const q = query.toLowerCase()
+    return this.listAll().filter((skill) =>
+      skill.triggers.some((trigger) => q.includes(trigger.toLowerCase())),
+    )
+  },
+
+  // load built-in skills
+  async loadBuiltins() {
+    for (const skill of BUILTIN_SKILLS) {
+      this.register(skill)
+    }
+  },
+
+  // load skills from a project manifest (sootsim-skills.json)
+  async loadFromManifest(projectDir: string) {
+    const manifestPath = path.join(projectDir, 'sootsim-skills.json')
+    if (!fs.existsSync(manifestPath)) return
+
+    try {
+      const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'))
+      if (Array.isArray(manifest.skills)) {
+        for (const entry of manifest.skills) {
+          if (typeof entry === 'string') {
+            // npm package name
+            try {
+              const mod = await import(entry)
+              if (mod.skill) this.register(mod.skill)
+            } catch {}
+          } else if (entry.file) {
+            // local file
+            try {
+              const mod = await import(path.resolve(projectDir, entry.file))
+              if (mod.skill) this.register(mod.skill)
+            } catch {}
+          }
+        }
+      }
+    } catch {}
+  },
+
+  // auto-discover skills based on project dependencies
+  suggestSkills(projectDir: string): string[] {
+    const suggestions: string[] = []
+    const pkgPath = path.join(projectDir, 'package.json')
+    if (!fs.existsSync(pkgPath)) return suggestions
+
+    try {
+      const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'))
+      const deps = { ...pkg.dependencies, ...pkg.devDependencies }
+
+      // suggest testing skill if detox or maestro is in deps
+      if (deps['detox'] || deps['maestro']) {
+        suggestions.push('test-flow')
+      }
+
+      // suggest a11y review if no a11y testing library
+      if (!deps['jest-axe'] && !deps['@testing-library/jest-dom']) {
+        suggestions.push('a11y-review')
+      }
+
+      // always suggest visual-diff and screenshot
+      suggestions.push('visual-diff', 'screenshot-all')
+
+      // suggest perf if app has many screens
+      suggestions.push('perf-profile')
+    } catch {}
+
+    return suggestions
+  },
+}

package/src/skills/types.ts

@@ -0,0 +1,41 @@
+// skill type definitions — self-contained agent capabilities
+
+export type SkillType = 'testing' | 'screenshot' | 'review' | 'performance' | 'custom'
+
+export interface SkillTool {
+  name: string
+  description: string
+  parameters: Record<string, { type: string; description: string; required?: boolean }>
+  execute: (params: Record<string, any>, context: SkillContext) => Promise<SkillResult>
+}
+
+export interface SkillContext {
+  url: string // sootsim URL
+  projectDir: string // project root
+  outputDir: string // where to write artifacts
+  verbose: boolean
+}
+
+export interface SkillResult {
+  success: boolean
+  message: string
+  artifacts?: SkillArtifact[]
+  data?: Record<string, any>
+}
+
+export interface SkillArtifact {
+  type: 'screenshot' | 'video' | 'report' | 'flow' | 'json'
+  name: string
+  path: string
+}
+
+export interface SootSimSkill {
+  name: string
+  description: string
+  type: SkillType
+  version: string
+  triggers: string[] // natural language patterns that activate this skill
+  tools: SkillTool[]
+  setup?: (context: SkillContext) => Promise<void>
+  teardown?: (context: SkillContext) => Promise<void>
+}

package/src/vite-plugin-one.ts

@@ -0,0 +1,187 @@
+// sootsim plugin for One/Vite — serves pre-built sootsim at /__soot/
+// no runtime vite server — just static files from dist-plugin/
+//
+// usage in vite.config.ts:
+//   import { sootsimPlugin } from 'sootsim/vite'
+//   export default { plugins: [one(), sootsimPlugin()] }
+
+import fs from 'fs'
+import path from 'path'
+import type { Plugin } from 'vite'
+
+const sootsimRoot = path.resolve(path.dirname(new URL(import.meta.url).pathname), '..')
+const distDir = path.join(sootsimRoot, 'dist-plugin')
+const publicDir = path.join(sootsimRoot, 'public')
+
+export interface SootPluginOptions {
+  // custom bundle URL (default: auto-detect from One's metro)
+  bundleUrl?: string
+  // path prefix (default: '/__soot')
+  prefix?: string
+  // disable sootsim
+  enabled?: boolean
+}
+
+const MIME_TYPES: Record<string, string> = {
+  '.js': 'application/javascript',
+  '.mjs': 'application/javascript',
+  '.css': 'text/css',
+  '.html': 'text/html',
+  '.wasm': 'application/wasm',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.svg': 'image/svg+xml',
+  '.ttf': 'font/ttf',
+  '.otf': 'font/otf',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.mp3': 'audio/mpeg',
+  '.wav': 'audio/wav',
+  '.jpg': 'image/jpeg',
+  '.webp': 'image/webp',
+}
+
+export function sootsimPlugin(options: SootPluginOptions = {}): Plugin[] {
+  if (options.enabled === false) return []
+
+  const prefix = options.prefix || '/__soot'
+
+  return [
+    {
+      name: 'sootsim-one',
+
+      configureServer(server) {
+        const bundleUrl =
+          options.bundleUrl ||
+          '/node_modules/one/metro-entry.bundle?platform=ios&dev=true&minify=false'
+
+        // mirror Set-Cookie into a readable header for sootsim's fetch wrapper
+        server.middlewares.use((req, res, next) => {
+          const origWriteHead = res.writeHead.bind(res)
+          res.writeHead = function (statusCode: number, ...args: unknown[]) {
+            const setCookie = res.getHeader('set-cookie')
+            if (setCookie) {
+              const value = Array.isArray(setCookie)
+                ? setCookie.join(', ')
+                : String(setCookie)
+              res.setHeader('x-sootsim-set-cookie', value)
+              res.setHeader('access-control-expose-headers', 'x-sootsim-set-cookie')
+            }
+            return (origWriteHead as (...args: unknown[]) => typeof res)(
+              statusCode,
+              ...args,
+            )
+          } as typeof res.writeHead
+          next()
+        })
+
+        server.middlewares.use((req, res, next) => {
+          const url = req.url || ''
+
+          // serve the sootsim HTML shell — inject bundle URL
+          if (url === prefix || url === prefix + '/' || url.startsWith(prefix + '/?')) {
+            const htmlPath = path.join(distDir, 'index.html')
+            if (!fs.existsSync(htmlPath)) {
+              res.statusCode = 500
+              res.end('[sootsim] dist-plugin not built. run: bun scripts/build-plugin.ts')
+              return
+            }
+            let html = fs.readFileSync(htmlPath, 'utf8')
+            // inject bundle URL as a query param so main.tsx picks it up
+            html = html.replace(
+              '</head>',
+              `<script>history.replaceState(null,'','${prefix}/?bundle=${encodeURIComponent(bundleUrl)}')</script></head>`,
+            )
+            res.setHeader('content-type', 'text/html')
+            res.end(html)
+            return
+          }
+
+          // serve static files from dist-plugin/
+          if (url.startsWith(prefix + '/')) {
+            const filePath = url.slice(prefix.length).split('?')[0]
+            const fullPath = path.join(distDir, filePath)
+
+            if (fs.existsSync(fullPath) && fs.statSync(fullPath).isFile()) {
+              const ext = path.extname(fullPath)
+              res.setHeader('content-type', MIME_TYPES[ext] || 'application/octet-stream')
+              res.setHeader('cache-control', 'max-age=31536000,immutable')
+              fs.createReadStream(fullPath).pipe(res)
+              return
+            }
+
+            // try public/ for wasm, fonts, icons, sounds
+            const publicPath = path.join(publicDir, filePath)
+            if (fs.existsSync(publicPath) && fs.statSync(publicPath).isFile()) {
+              const ext = path.extname(publicPath)
+              res.setHeader('content-type', MIME_TYPES[ext] || 'application/octet-stream')
+              fs.createReadStream(publicPath).pipe(res)
+              return
+            }
+          }
+
+          // also serve canvaskit.wasm etc. from public/ at root (some code references /canvaskit.wasm)
+          const staticRoots = ['/canvaskit.wasm', '/fonts/', '/icons/', '/sounds/']
+          if (staticRoots.some((p) => url.startsWith(p))) {
+            const fullPath = path.join(publicDir, url.split('?')[0])
+            if (fs.existsSync(fullPath) && fs.statSync(fullPath).isFile()) {
+              const ext = path.extname(fullPath)
+              res.setHeader('content-type', MIME_TYPES[ext] || 'application/octet-stream')
+              fs.createReadStream(fullPath).pipe(res)
+              return
+            }
+          }
+
+          next()
+        })
+
+        // try to open sootsim electron app
+        const port = server.config.server.port || 8081
+        const sootsimUrl = `http://localhost:${port}${prefix}/`
+        console.log(`[sootsim] serving at ${sootsimUrl}`)
+
+        openElectronApp(sootsimUrl)
+      },
+    },
+  ]
+}
+
+// try to open the sootsim electron app via URL scheme or direct launch
+async function openElectronApp(sootsimUrl: string) {
+  if (process.platform !== 'darwin') return
+
+  const { execSync, exec } = await import('child_process')
+
+  // try sootsim:// scheme first (works if app registered the protocol)
+  const schemeUrl = `sootsim://dev?url=${encodeURIComponent(sootsimUrl)}`
+  try {
+    exec(`open "${schemeUrl}"`)
+    return
+  } catch {}
+
+  // fallback: find the app directly
+  const candidates = [
+    '/Applications/sootsim.app',
+    path.join(process.env.HOME || '', 'Applications/sootsim.app'),
+    path.join(sootsimRoot, 'release/mac-arm64/sootsim.app'),
+  ]
+
+  let appPath = candidates.find((p) => fs.existsSync(p))
+  if (!appPath) {
+    try {
+      const found = execSync(
+        'mdfind "kMDItemCFBundleIdentifier == dev.sootsim.simulator"',
+        { encoding: 'utf8', timeout: 3000 },
+      ).trim()
+      if (found) appPath = found.split('\n')[0]
+    } catch {}
+  }
+
+  if (appPath) {
+    try {
+      exec(`open -a "${appPath}" "${sootsimUrl}"`)
+    } catch {}
+  }
+}
+
+export default sootsimPlugin