fix(cli): CLI polish — info command dimensions, all templates, non-TTY ANSI codes

packages/cli/package.json

@@ -20,7 +20,7 @@
     "build:fonts": "cd ../producer && tsx scripts/generate-font-data.ts",
     "build:studio": "cd ../studio && bun run build",
     "build:runtime": "tsx scripts/build-runtime.ts",
-    "build:copy": "mkdir -p dist/studio dist/docs dist/templates dist/skills && cp -r ../studio/dist/* dist/studio/ && cp -r src/templates/blank src/templates/warm-grain src/templates/play-mode src/templates/swiss-grid src/templates/vignelli src/templates/_shared dist/templates/ && cp -r ../../skills/hyperframes-compose ../../skills/hyperframes-captions dist/skills/ && (cp src/docs/*.md dist/docs/ 2>/dev/null || true)",
+    "build:copy": "mkdir -p dist/studio dist/docs dist/templates dist/skills && cp -r ../studio/dist/* dist/studio/ && cp -r src/templates/blank src/templates/warm-grain src/templates/play-mode src/templates/swiss-grid src/templates/vignelli src/templates/decision-tree src/templates/kinetic-type src/templates/product-promo src/templates/nyt-graph src/templates/_shared dist/templates/ && cp -r ../../skills/hyperframes-compose ../../skills/hyperframes-captions dist/skills/ && (cp src/docs/*.md dist/docs/ 2>/dev/null || true)",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {

packages/cli/src/commands/info.ts

@@ -34,12 +34,20 @@ export default defineCommand({
     ensureDOMParser();
     const parsed = parseHtml(html);
 
+    // Read actual dimensions from root composition element via DOM query
+    // (same approach as compositions.ts — avoids regex matching wrong element)
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    const root = doc.querySelector("[data-composition-id]");
+    const width = parseInt(root?.getAttribute("data-width") ?? "1920", 10);
+    const height = parseInt(root?.getAttribute("data-height") ?? "1080", 10);
+    const resolution = width > height ? "landscape" : "portrait";
+
     const tracks = new Set(parsed.elements.map((el) => el.zIndex));
     const maxEnd = parsed.elements.reduce(
       (max, el) => Math.max(max, el.startTime + el.duration),
       0,
     );
-    const resolution = parsed.resolution === "portrait" ? "1080x1920" : "1920x1080";
     const size = totalSize(project.dir);
 
     const typeCounts: Record<string, number> = {};
@@ -55,9 +63,9 @@ export default defineCommand({
         JSON.stringify(
           withMeta({
             name: project.name,
-            resolution: parsed.resolution,
-            width: parsed.resolution === "portrait" ? 1080 : 1920,
-            height: parsed.resolution === "portrait" ? 1920 : 1080,
+            resolution: resolution as "landscape" | "portrait",
+            width,
+            height,
             duration: maxEnd,
             elements: parsed.elements.length,
             tracks: tracks.size,
@@ -72,7 +80,7 @@ export default defineCommand({
     }
 
     console.log(`${c.success("◇")}  ${c.accent(project.name)}`);
-    console.log(label("Resolution", resolution));
+    console.log(label("Resolution", `${width}x${height}`));
     console.log(label("Duration", `${maxEnd.toFixed(1)}s`));
     console.log(label("Elements", `${parsed.elements.length}${typeStr ? ` (${typeStr})` : ""}`));
     console.log(label("Tracks", `${tracks.size}`));

packages/cli/src/ui/progress.ts

@@ -2,15 +2,27 @@ import { c } from "./colors.js";
 
 const { stdout } = process;
 
+let lastPrintedThreshold = -1;
+
 export function renderProgress(percent: number, stage: string, row?: number): void {
+  // Non-TTY: write clean lines at 10% intervals, skip bar computation entirely
+  if (!stdout.isTTY) {
+    const rounded = Math.round(percent);
+    if ((rounded % 10 === 0 || rounded === 100) && rounded !== lastPrintedThreshold) {
+      lastPrintedThreshold = rounded;
+      stdout.write(`  ${rounded}%  ${stage}\n`);
+    }
+    return;
+  }
+
   const width = 25;
   const filled = Math.floor(percent / (100 / width));
   const empty = width - filled;
   const bar = c.progress("\u2588".repeat(filled)) + c.dim("\u2591".repeat(empty));
 
   const line = `  ${bar}  ${c.bold(String(Math.round(percent)) + "%")}  ${c.dim(stage)}`;
 
-  if (row !== undefined && stdout.isTTY) {
+  if (row !== undefined) {
     stdout.write(`\x1b[${row};1H\x1b[2K${line}`);
   } else {
     stdout.write(`\r\x1b[2K${line}`);