terminfo.dev 0.6.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminfo.dev",
-  "version": "0.6.0",
+  "version": "1.0.0",
   "description": "Test your terminal's feature support and contribute to terminfo.dev",
   "keywords": [
     "ansi",
@@ -32,6 +32,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "silvery": "^0.4.3"
+  },
   "engines": {
     "node": ">=23.6.0"
   }

package/src/index.ts

@@ -13,11 +13,37 @@
  * ```
  */
 
+import { readFileSync } from "node:fs"
+import { dirname, join } from "node:path"
+import { fileURLToPath } from "node:url"
 import { detectTerminal } from "./detect.ts"
 import { ALL_PROBES } from "./probes/index.ts"
 import { withRawMode } from "./tty.ts"
 import { submitResults } from "./submit.ts"
 
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+/** Load feature slugs from features.json for OSC 8 hyperlinks */
+function loadFeatureSlugs(): Record<string, string> {
+  // Try repo-local path first, then npm-installed path
+  const candidates = [
+    join(__dirname, "..", "..", "features.json"),       // repo: cli/src/ -> features.json
+    join(__dirname, "..", "..", "..", "features.json"),  // npm: node_modules/terminfo.dev/src/ -> features.json
+  ]
+  for (const path of candidates) {
+    try {
+      const raw = JSON.parse(readFileSync(path, "utf-8"))
+      delete raw.$comment
+      const slugs: Record<string, string> = {}
+      for (const [id, entry] of Object.entries(raw) as [string, any][]) {
+        slugs[id] = entry.slug ?? id.replaceAll(".", "-")
+      }
+      return slugs
+    } catch {}
+  }
+  return {} // fallback: featureSlug() will use id.replaceAll(".", "-")
+}
+
 interface ResultEntry {
   terminal: string
   terminalVersion: string
@@ -38,19 +64,6 @@ async function main() {
   // Detect terminal
   const terminal = detectTerminal()
 
-  if (!jsonMode) {
-    console.log(`\x1b[1mterminfo.dev\x1b[0m — can your terminal do that?\n`)
-    console.log(`  Terminal:  \x1b[1m${terminal.name}\x1b[0m${terminal.version ? ` ${terminal.version}` : ""}`)
-    console.log(`  Platform:  ${terminal.os}${terminal.osVersion ? ` ${terminal.osVersion}` : ""}`)
-    console.log(`  Probes:    ${ALL_PROBES.length} features across ${new Set(ALL_PROBES.map(p => p.id.split(".")[0])).size} categories`)
-    console.log(`  Website:   https://terminfo.dev`)
-    console.log(``)
-    console.log(`\x1b[2mResults are compared against ${ALL_PROBES.length} terminal features from the`)
-    console.log(`ECMA-48, VT100/VT510, xterm, and Kitty specifications.`)
-    console.log(`Run with --submit to contribute your results to the database.\x1b[0m\n`)
-    console.log(`Running probes...`)
-  }
-
   const results: Record<string, boolean> = {}
   const notes: Record<string, string> = {}
   const responses: Record<string, string> = {}
@@ -103,10 +116,8 @@ async function main() {
     return
   }
 
-  // Display results
-  console.log(`\n\x1b[1mResults: ${passed}/${total} (${pct}%)\x1b[0m\n`)
-
-  // Show categories
+  // Build category data for report
+  const slugs = loadFeatureSlugs()
   const categories = new Map<string, Array<{ id: string; name: string; pass: boolean; note?: string }>>()
   for (const probe of ALL_PROBES) {
     const cat = probe.id.split(".")[0]!
@@ -119,16 +130,22 @@ async function main() {
     })
   }
 
-  for (const [cat, probes] of categories) {
-    const catPassed = probes.filter((p) => p.pass).length
-    const color = catPassed === probes.length ? "\x1b[32m" : catPassed > 0 ? "\x1b[33m" : "\x1b[31m"
-    console.log(`${color}${cat}\x1b[0m (${catPassed}/${probes.length})`)
-    for (const p of probes) {
-      const icon = p.pass ? "\x1b[32m✓\x1b[0m" : "\x1b[31m✗\x1b[0m"
-      const note = p.note ? ` \x1b[2m— ${p.note}\x1b[0m` : ""
-      console.log(`  ${icon} ${p.name}${note}`)
-    }
-  }
+  // Render with silvery
+  const { renderReport } = await import("./report.tsx")
+  const output = await renderReport({
+    terminal: terminal.name,
+    terminalVersion: terminal.version,
+    os: terminal.os,
+    osVersion: terminal.osVersion,
+    probeCount: total,
+    categoryCount: new Set(ALL_PROBES.map(p => p.id.split(".")[0])).size,
+    passed,
+    total,
+    categories,
+    slugs,
+    submitMode,
+  })
+  console.log(output)
 
   if (submitMode) {
     console.log(`\nSubmitting results to terminfo.dev...`)
@@ -136,9 +153,6 @@ async function main() {
     if (url) {
       console.log(`\x1b[32m✓ Issue created:\x1b[0m ${url}`)
     }
-  } else {
-    console.log(`\n\x1b[2mSubmit results to terminfo.dev: npx terminfo --submit\x1b[0m`)
-    console.log(`\x1b[2mJSON output: npx terminfo --json\x1b[0m`)
   }
 }
 

package/src/report.tsx

@@ -0,0 +1,113 @@
+/**
+ * Silvery-rendered CLI report for terminfo probe results.
+ */
+import React from "react"
+import { Box, Text } from "silvery"
+import { renderString } from "silvery"
+
+interface ProbeResult {
+  id: string
+  name: string
+  pass: boolean
+  note?: string
+}
+
+interface ReportProps {
+  terminal: string
+  terminalVersion: string
+  os: string
+  osVersion: string
+  probeCount: number
+  categoryCount: number
+  passed: number
+  total: number
+  categories: Map<string, ProbeResult[]>
+}
+
+/** OSC 8 hyperlink wrapper */
+function osc8(url: string, text: string): string {
+  return `\x1b]8;;${url}\x07${text}\x1b]8;;\x07`
+}
+
+function featureUrl(id: string, slug: string): string {
+  const cat = id.split(".")[0]!
+  return `https://terminfo.dev/${cat}/${slug}`
+}
+
+function Header({ terminal, terminalVersion, os, osVersion, probeCount, categoryCount, passed, total }: ReportProps) {
+  const pct = Math.round((passed / total) * 100)
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text bold>{osc8("https://terminfo.dev", "terminfo.dev")}</Text>
+      <Text dimColor>Can your terminal do that?</Text>
+      <Text> </Text>
+      <Box flexDirection="row" gap={2}>
+        <Box flexDirection="column" width={12}>
+          <Text dimColor>Terminal</Text>
+          <Text dimColor>Platform</Text>
+          <Text dimColor>Probes</Text>
+          <Text dimColor>Score</Text>
+        </Box>
+        <Box flexDirection="column">
+          <Text bold>{terminal}{terminalVersion ? ` ${terminalVersion}` : ""}</Text>
+          <Text>{os} {osVersion}</Text>
+          <Text>{probeCount} features, {categoryCount} categories</Text>
+          <Text bold color={pct === 100 ? "green" : pct >= 90 ? "yellow" : "red"}>{passed}/{total} ({pct}%)</Text>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+function CategorySection({ name, probes, slugs }: { name: string; probes: ProbeResult[]; slugs: Record<string, string> }) {
+  const catPassed = probes.filter(p => p.pass).length
+  const allPassed = catPassed === probes.length
+  const catUrl = `https://terminfo.dev/${name}`
+
+  return (
+    <Box flexDirection="column">
+      <Text color={allPassed ? "green" : catPassed > 0 ? "yellow" : "red"}>
+        {osc8(catUrl, name)} ({catPassed}/{probes.length})
+      </Text>
+      {probes.map(p => {
+        const slug = slugs[p.id] ?? p.id.replaceAll(".", "-")
+        const url = featureUrl(p.id, slug)
+        const icon = p.pass ? "✓" : "✗"
+        return (
+          <Box key={p.id} flexDirection="row" paddingLeft={2}>
+            <Text color={p.pass ? "green" : "red"}>{icon} </Text>
+            <Text>{osc8(url, p.name)}</Text>
+            {p.note && <Text dimColor> — {p.note}</Text>}
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}
+
+function Footer({ submitMode }: { submitMode: boolean }) {
+  if (submitMode) return null
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text dimColor>Submit: npx terminfo.dev --submit</Text>
+      <Text dimColor>JSON:   npx terminfo.dev --json</Text>
+    </Box>
+  )
+}
+
+function Report(props: ReportProps & { slugs: Record<string, string>; submitMode: boolean }) {
+  return (
+    <Box flexDirection="column">
+      <Header {...props} />
+      {[...props.categories.entries()].map(([name, probes]) => (
+        <CategorySection key={name} name={name} probes={probes} slugs={props.slugs} />
+      ))}
+      <Footer submitMode={props.submitMode} />
+    </Box>
+  )
+}
+
+export async function renderReport(props: ReportProps & { slugs: Record<string, string>; submitMode: boolean }): Promise<string> {
+  const width = process.stdout.columns ?? 80
+  return renderString(<Report {...props} />, { width })
+}