@ollie-shop/cli 1.4.1 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollie-shop/cli",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "description": "Ollie Shop CLI - Development tools for custom checkouts",
   "type": "module",
   "main": "dist/index.js",

package/src/commands/help.tsx

@@ -91,6 +91,12 @@ export function HelpCommand() {
           </Box>
           <Text>Write store/version IDs to ollie.json</Text>
         </Box>
+        <Box>
+          <Box width={24}>
+            <Text color="green">setup</Text>
+          </Box>
+          <Text>Migrate legacy meta.json into the config components map</Text>
+        </Box>
         <Box>
           <Box width={24}>
             <Text color="green">help</Text>
@@ -145,6 +151,14 @@ export function HelpCommand() {
           </Box>
           <Text>start: don't auto-open Studio (also honored via CI env)</Text>
         </Box>
+        <Box>
+          <Box width={24}>
+            <Text color="yellow">--browser-logs</Text>
+          </Box>
+          <Text>
+            start: stream custom components' browser console to terminal
+          </Text>
+        </Box>
       </Box>
 
       <Box marginTop={1}>
@@ -154,6 +168,7 @@ export function HelpCommand() {
         <Text dimColor>$ ollieshop login</Text>
         <Text dimColor>$ ollieshop start --stage dev</Text>
         <Text dimColor>$ ollieshop start --no-open</Text>
+        <Text dimColor>$ ollieshop start --browser-logs</Text>
         <Text dimColor>$ ollieshop whoami -o json</Text>
         <Text dimColor>$ ollieshop schema store.create</Text>
         <Text dimColor>

package/src/commands/setup-cmd.ts

@@ -0,0 +1,142 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { glob } from "glob";
+import { upsertComponentEntry } from "../utils/config.js";
+import { detectOutputFormat, outputResult } from "../utils/output.js";
+import type { ParsedArgs } from "../utils/parse-args.js";
+
+const META_FILE_RE = /^meta(?:\.([^.]+))?\.json$/;
+
+function configFileForStage(stage?: string): string {
+  return !stage || stage === "prod" ? "ollie.json" : `ollie.${stage}.json`;
+}
+
+interface MigratedMeta {
+  component: string;
+  stage: string;
+  configFile: string;
+  metaFile: string;
+  id: string;
+  slot?: string;
+}
+
+/**
+ * Migrates legacy per-folder meta.json / meta.{stage}.json into the config
+ * `components` map (meta.json -> ollie.json, meta.{stage}.json -> ollie.{stage}.json)
+ * and removes the migrated meta files. Local-only metas (no id) are left in place.
+ */
+export async function setupCommand(parsed: ParsedArgs): Promise<void> {
+  const format = detectOutputFormat(parsed.global.output);
+  const cwd = process.cwd();
+  const dryRun = parsed.global.dryRun;
+
+  try {
+    const componentsDir = path.join(cwd, "components");
+    let folders: string[] = [];
+    try {
+      await fs.access(componentsDir);
+      const entries = await glob("*/index.tsx", { cwd: componentsDir });
+      folders = entries.map((entry) => path.dirname(entry));
+    } catch {
+      // No components directory
+    }
+
+    const migrated: MigratedMeta[] = [];
+    const skipped: Array<{
+      component: string;
+      metaFile: string;
+      reason: string;
+    }> = [];
+
+    for (const name of folders) {
+      const folderDir = path.join(componentsDir, name);
+      const metaFiles = await glob("meta*.json", { cwd: folderDir });
+
+      for (const metaFile of metaFiles) {
+        const match = metaFile.match(META_FILE_RE);
+        if (!match) continue;
+        const stage = match[1];
+
+        let meta: { id?: unknown; slot?: unknown };
+        try {
+          meta = JSON.parse(
+            await fs.readFile(path.join(folderDir, metaFile), "utf-8"),
+          );
+        } catch {
+          skipped.push({
+            component: name,
+            metaFile,
+            reason: "unreadable meta",
+          });
+          continue;
+        }
+
+        const id = typeof meta.id === "string" ? meta.id : undefined;
+        if (!id) {
+          skipped.push({
+            component: name,
+            metaFile,
+            reason: "no id (unlinked) - left as-is",
+          });
+          continue;
+        }
+        const slot = typeof meta.slot === "string" ? meta.slot : undefined;
+
+        if (!dryRun) {
+          await upsertComponentEntry(
+            id,
+            { defaultPath: `components/${name}`, slot },
+            { cwd, stage },
+          );
+          await fs.rm(path.join(folderDir, metaFile));
+        }
+
+        migrated.push({
+          component: name,
+          stage: stage ?? "prod",
+          configFile: configFileForStage(stage),
+          metaFile,
+          id,
+          slot,
+        });
+      }
+    }
+
+    if (format === "json") {
+      outputResult(
+        { data: { dryRun, migrated, skipped } },
+        format,
+        parsed.global.fields,
+      );
+      return;
+    }
+
+    const prefix = dryRun ? "\x1b[33m[dry-run]\x1b[0m " : "";
+    if (migrated.length === 0) {
+      console.log(`${prefix}No legacy meta files to migrate.`);
+    } else {
+      console.log(
+        `${prefix}\x1b[1mMigrated ${migrated.length} meta file(s) to config:\x1b[0m`,
+      );
+      for (const entry of migrated) {
+        const slotLabel = entry.slot ? `, slot ${entry.slot}` : "";
+        const removed = dryRun ? "" : `  [removed ${entry.metaFile}]`;
+        console.log(
+          `  ${entry.configFile.padEnd(16)} ${entry.component}  (id ${entry.id}${slotLabel})${removed}`,
+        );
+      }
+    }
+    if (skipped.length > 0) {
+      console.log("\n\x1b[2mSkipped:\x1b[0m");
+      for (const entry of skipped) {
+        console.log(`  ${entry.component}/${entry.metaFile}: ${entry.reason}`);
+      }
+    }
+  } catch (err) {
+    outputResult(
+      { error: { message: err instanceof Error ? err.message : String(err) } },
+      format,
+    );
+    process.exit(1);
+  }
+}

package/src/commands/start.tsx

@@ -4,6 +4,7 @@ import open from "open";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { loadConfig, resolveStage } from "../utils/config.js";
 import {
+  type BrowserLogEntry,
   type ComponentInfo,
   discoverComponents,
   startDevServer,
@@ -22,6 +23,14 @@ interface RequestLog {
   timestamp: Date;
 }
 
+interface BrowserLog {
+  id: number;
+  level: string;
+  component?: string;
+  message: string;
+  timestamp: Date;
+}
+
 type ServerState =
   | { status: "initializing" }
   | { status: "discovering" }
@@ -51,9 +60,11 @@ export function StartCommand({ args }: StartCommandProps) {
   const [state, setState] = useState<ServerState>({ status: "initializing" });
   const [components, setComponents] = useState<ComponentInfo[]>([]);
   const [logs, setLogs] = useState<RequestLog[]>([]);
+  const [browserLogs, setBrowserLogs] = useState<BrowserLog[]>([]);
   const [buildCount, setBuildCount] = useState(0);
   const [lastBuildTime, setLastBuildTime] = useState<Date | null>(null);
   const logIdRef = useRef(0);
+  const browserLogIdRef = useRef(0);
   const rebuildRef = useRef<(() => Promise<void>) | null>(null);
   const stopRef = useRef<(() => Promise<void>) | null>(null);
 
@@ -63,6 +74,7 @@ export function StartCommand({ args }: StartCommandProps) {
   // agent spawns the dev server and drives its own harness instead. Also honored
   // via the conventional CI env var.
   const noOpen = args.includes("--no-open") || Boolean(process.env.CI);
+  const browserLogsEnabled = args.includes("--browser-logs");
   // Keyboard shortcuts need raw mode, which Ink can only enable on a TTY stdin.
   // When spawned headless (agent/CI/backgrounded), stdin isn't a TTY — guard the
   // input handler so the server runs instead of crashing with "Raw mode is not
@@ -92,6 +104,19 @@ export function StartCommand({ args }: StartCommandProps) {
     [addLog],
   );
 
+  const addBrowserLogs = useCallback((entries: BrowserLogEntry[]) => {
+    if (entries.length === 0) return;
+    setBrowserLogs((prev) => {
+      const mapped = entries.map((entry) => ({
+        ...entry,
+        message: sanitizeLogMessage(entry.message),
+        id: ++browserLogIdRef.current,
+        timestamp: new Date(),
+      }));
+      return [...prev, ...mapped].slice(-MAX_LOGS);
+    });
+  }, []);
+
   // Initialize server
   useEffect(() => {
     let mounted = true;
@@ -134,6 +159,7 @@ export function StartCommand({ args }: StartCommandProps) {
           port: PORT,
           stage,
           onRequest: handleRequest,
+          onBrowserLogs: browserLogsEnabled ? addBrowserLogs : undefined,
           onBuildEnd: (updatedComponents) => {
             setComponents(updatedComponents);
             setBuildCount((c) => c + 1);
@@ -181,7 +207,7 @@ export function StartCommand({ args }: StartCommandProps) {
       mounted = false;
       stopRef.current?.();
     };
-  }, [stage, handleRequest, noOpen]);
+  }, [stage, handleRequest, addBrowserLogs, browserLogsEnabled, noOpen]);
 
   // Handle keyboard input (only when attached to a TTY — see isInteractive above)
   useInput(
@@ -255,6 +281,7 @@ export function StartCommand({ args }: StartCommandProps) {
           <ComponentList components={components} />
           <BuildInfo buildCount={buildCount} lastBuildTime={lastBuildTime} />
           <RequestLogs logs={logs} />
+          {browserLogsEnabled && <BrowserLogs logs={browserLogs} />}
           <Footer interactive={isInteractive} />
         </>
       )}
@@ -404,6 +431,46 @@ function RequestLogs({ logs }: { logs: RequestLog[] }) {
   );
 }
 
+function sanitizeLogMessage(message: string): string {
+  let out = "";
+  for (const ch of message) {
+    const code = ch.codePointAt(0) ?? 0;
+    out += code < 0x20 || (code >= 0x7f && code <= 0x9f) ? " " : ch;
+    if (out.length >= 2000) break;
+  }
+  return out;
+}
+
+function browserLogColor(level: string): string {
+  if (level === "error") return "red";
+  if (level === "warn") return "yellow";
+  if (level === "info") return "cyan";
+  return "gray";
+}
+
+function BrowserLogs({ logs }: { logs: BrowserLog[] }) {
+  return (
+    <Box marginTop={1} flexDirection="column">
+      <Text bold>Browser Logs:</Text>
+      <Box marginLeft={2} flexDirection="column">
+        {logs.length === 0 ? (
+          <Text dimColor>No browser logs yet...</Text>
+        ) : (
+          logs.map((log) => (
+            <Box key={log.id}>
+              <Text color={browserLogColor(log.level)}>
+                {log.level.toUpperCase()}{" "}
+              </Text>
+              {log.component && <Text dimColor>[{log.component}] </Text>}
+              <Text>{log.message}</Text>
+            </Box>
+          ))
+        )}
+      </Box>
+    </Box>
+  );
+}
+
 function Footer({ interactive = true }: { interactive?: boolean }) {
   if (!interactive) {
     return (

package/src/index.tsx

@@ -6,6 +6,7 @@ import { deployCommand } from "./commands/deploy-cmd.js";
 import { functionCommand } from "./commands/function-cmd.js";
 import { initCommand } from "./commands/init-cmd.js";
 import { schemaCommand } from "./commands/schema-cmd.js";
+import { setupCommand } from "./commands/setup-cmd.js";
 import { statusCommand } from "./commands/status-cmd.js";
 import { storeCommand } from "./commands/store-cmd.js";
 import { versionCommand } from "./commands/version-cmd.js";
@@ -27,6 +28,7 @@ const AGENT_COMMANDS: Record<
   init: initCommand,
   deploy: deployCommand,
   status: statusCommand,
+  setup: setupCommand,
 };
 
 const parsed = parseArgs(process.argv);

package/src/utils/config.ts

@@ -2,10 +2,18 @@ import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
 
+const ComponentEntrySchema = z.object({
+  path: z.string(),
+  slot: z.string().optional(),
+});
+
+export type ComponentEntry = z.infer<typeof ComponentEntrySchema>;
+
 const OllieConfigSchema = z
   .object({
     storeId: z.string().uuid(),
     versionId: z.string().uuid().optional(),
+    components: z.record(z.string(), ComponentEntrySchema).optional(),
   })
   .passthrough(); // Allow any other fields without validation
 
@@ -114,6 +122,74 @@ export async function saveConfig(
   await fs.writeFile(configPath, JSON.stringify(merged, null, 2));
 }
 
+/**
+ * Lists the stages available in a project by scanning its ollie config files.
+ * ollie.json is the "prod" stage; ollie.{stage}.json is the "{stage}" stage.
+ */
+export async function listStages(
+  cwd: string = process.cwd(),
+): Promise<Array<{ stage: string; versionId?: string }>> {
+  let files: string[];
+  try {
+    files = await fs.readdir(cwd);
+  } catch {
+    return [];
+  }
+
+  const seen = new Set<string>();
+  const stages: Array<{ stage: string; versionId?: string }> = [];
+  for (const file of files.sort()) {
+    const match = file.match(/^ollie(?:\.([^.]+))?\.json$/);
+    if (!match) continue;
+    const stage = match[1] ?? "prod";
+    if (seen.has(stage)) continue;
+    seen.add(stage);
+
+    let versionId: string | undefined;
+    try {
+      const config = await loadConfig({ cwd, stage: match[1] });
+      versionId = config?.versionId;
+    } catch {
+      // List the stage even if its config is invalid/incomplete
+    }
+    stages.push({ stage, versionId });
+  }
+
+  return stages;
+}
+
+/**
+ * Upserts a component entry into the stage's config file (ollie.json or
+ * ollie.{stage}.json). Preserves the existing path/slot when not provided.
+ */
+export async function upsertComponentEntry(
+  id: string,
+  values: { defaultPath: string; slot?: string },
+  options: SaveConfigOptions = {},
+): Promise<ComponentEntry> {
+  const { cwd = process.cwd(), stage } = options;
+  const configPath = path.join(cwd, getConfigFileName(stage));
+
+  const existing = (await loadConfigFile(configPath)) ?? {};
+  const components = {
+    ...((existing.components as Record<string, ComponentEntry>) ?? {}),
+  };
+  const prev = components[id];
+  const slot = values.slot ?? prev?.slot;
+  const entry: ComponentEntry = {
+    path: prev?.path ?? values.defaultPath,
+    ...(slot !== undefined ? { slot } : {}),
+  };
+  components[id] = entry;
+
+  await fs.writeFile(
+    configPath,
+    JSON.stringify({ ...existing, components }, null, 2),
+  );
+
+  return entry;
+}
+
 /**
  * Returns the resolved stage from CLI args or environment.
  * Priority: CLI arg > OLLIE_STAGE env > undefined (defaults to prod behavior)