@ollie-shop/cli 1.5.0 → 1.7.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @ollie-shop/cli@1.5.0 build /home/runner/work/ollie-shop/ollie-shop/packages/cli
+> @ollie-shop/cli@1.7.0 build /home/runner/work/ollie-shop/ollie-shop/packages/cli
 > tsup
 
 CLI Building entry: src/index.tsx
@@ -9,5 +9,5 @@
 CLI Target: node22
 CLI Cleaning output folder
 ESM Build start
-ESM dist/index.js 105.76 KB
-ESM ⚡️ Build success in 353ms
+ESM dist/index.js 115.94 KB
+ESM ⚡️ Build success in 278ms

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @ollie-shop/cli
 
+## 1.7.0
+
+### Minor Changes
+
+- 3d5d259: Add a `component update` command so custom component props (and name, slot, active, version) can be changed after creation directly from the CLI. Previously the CLI could only `create` and `list` components, forcing prop edits through the Studio UI. Supports partial updates via flags (`--id`, `--name`, `--slot`, `--active`, `--props`, `--version-id`) or a full `--data` JSON payload, mirroring the existing `business-rule update` command.
+
+### Patch Changes
+
+- 616e0ea: Fix `deploy --function-id` looking for the function source under `components/`. The deploy bundler was hardcoded to `components/<name>` and always emitted a component-style `index.tsx` (`export { default }`), so function deploys failed with `Component "<name>" not found in components/` — or bundled the wrong entry point. It now resolves function sources from `functions/<name>` and emits a function-style `index.ts` (`export { handler }`) that the builder's `build_function` step expects.
+
+## 1.6.0
+
+### Minor Changes
+
+- df230be: Add a `--browser-logs` flag to `ollieshop start` that streams custom components' browser console logs and uncaught errors to the CLI terminal, attributed per component. Off by default — no console patching or overhead unless the flag is passed, and deploy bundles are unaffected.
+
 ## 1.5.0
 
 ### Minor Changes

package/dist/index.js

@@ -47,8 +47,8 @@ function HelpCommand() {
         /* @__PURE__ */ jsx(Text, { children: "Create or list versions" })
       ] }),
       /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx(Box, { width: 24, children: /* @__PURE__ */ jsx(Text, { color: "green", children: "component create|list" }) }),
-        /* @__PURE__ */ jsx(Text, { children: "Create or list components" })
+        /* @__PURE__ */ jsx(Box, { width: 24, children: /* @__PURE__ */ jsx(Text, { color: "green", children: "component create|update|list" }) }),
+        /* @__PURE__ */ jsx(Text, { children: "Create, update or list components" })
       ] }),
       /* @__PURE__ */ jsxs(Box, { children: [
         /* @__PURE__ */ jsx(Box, { width: 24, children: /* @__PURE__ */ jsx(Text, { color: "green", children: "function create|list" }) }),
@@ -115,6 +115,10 @@ function HelpCommand() {
       /* @__PURE__ */ jsxs(Box, { children: [
         /* @__PURE__ */ jsx(Box, { width: 24, children: /* @__PURE__ */ jsx(Text, { color: "yellow", children: "--no-open" }) }),
         /* @__PURE__ */ jsx(Text, { children: "start: don't auto-open Studio (also honored via CI env)" })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Box, { width: 24, children: /* @__PURE__ */ jsx(Text, { color: "yellow", children: "--browser-logs" }) }),
+        /* @__PURE__ */ jsx(Text, { children: "start: stream custom components' browser console to terminal" })
       ] })
     ] }),
     /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { bold: true, children: "Examples:" }) }),
@@ -122,6 +126,7 @@ function HelpCommand() {
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "$ ollieshop login" }),
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "$ ollieshop start --stage dev" }),
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "$ ollieshop start --no-open" }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "$ ollieshop start --browser-logs" }),
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "$ ollieshop whoami -o json" }),
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "$ ollieshop schema store.create" }),
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: '$ ollieshop store create --name "My Store" --platform vtex --platform-store-id mystore' }),
@@ -515,12 +520,19 @@ import path3 from "path";
 import { PassThrough } from "stream";
 import archiver from "archiver";
 async function createComponentBundle(options) {
-  const { cwd = process.cwd(), componentName } = options;
-  const componentDir = path3.join(cwd, "components", componentName);
+  const {
+    cwd = process.cwd(),
+    componentName,
+    resourceType = "component"
+  } = options;
+  const sourceDir = resourceType === "function" ? "functions" : "components";
+  const componentDir = path3.join(cwd, sourceDir, componentName);
   try {
     await fs3.access(componentDir);
   } catch {
-    throw new Error(`Component "${componentName}" not found in components/`);
+    throw new Error(
+      `${resourceType === "function" ? "Function" : "Component"} "${componentName}" not found in ${sourceDir}/`
+    );
   }
   const packageJsonPath = path3.join(cwd, "package.json");
   try {
@@ -536,9 +548,15 @@ async function createComponentBundle(options) {
   archive.on("error", (err) => {
     output.destroy(err);
   });
-  const entryPoint = `export { default } from './components/${componentName}';
+  if (resourceType === "function") {
+    const entryPoint = `export { handler } from './functions/${componentName}';
+`;
+    archive.append(entryPoint, { name: "index.ts" });
+  } else {
+    const entryPoint = `export { default } from './components/${componentName}';
 `;
-  archive.append(entryPoint, { name: "index.tsx" });
+    archive.append(entryPoint, { name: "index.tsx" });
+  }
   archive.file(packageJsonPath, { name: "package.json" });
   const entries = await fs3.readdir(cwd, { withFileTypes: true });
   for (const entry of entries) {
@@ -730,8 +748,106 @@ async function discoverComponents(options = {}) {
   }
   return components;
 }
+function browserLogBridge(endpoint) {
+  const target = JSON.stringify(endpoint);
+  return `(() => {
+  if (typeof window === "undefined" || window.__ollieLogBridge) return;
+  window.__ollieLogBridge = true;
+
+  const endpoint = ${target};
+  const SLOT_FRAME = /ollie-slot\\/([^.\\s:]+)\\.js/;
+  const LEVELS = ["log", "info", "warn", "error", "debug"];
+  const MAX_MESSAGE = 2000;
+  const MAX_BATCH = 20;
+  const FLUSH_MS = 200;
+
+  let queue = [];
+  let flushTimer = null;
+
+  function format(value) {
+    if (typeof value === "string") return value;
+    try {
+      return JSON.stringify(value);
+    } catch (_) {
+      return String(value);
+    }
+  }
+
+  function slotName(stack) {
+    const match = (stack || "").match(SLOT_FRAME);
+    return match ? match[1] : null;
+  }
+
+  function flush() {
+    if (flushTimer) {
+      clearTimeout(flushTimer);
+      flushTimer = null;
+    }
+    if (queue.length === 0) return;
+    const batch = queue;
+    queue = [];
+    try {
+      fetch(endpoint, {
+        method: "POST",
+        mode: "cors",
+        keepalive: true,
+        headers: { "Content-Type": "text/plain" },
+        body: JSON.stringify({ batch: batch }),
+      }).catch(function () {});
+    } catch (_) {}
+  }
+
+  function forward(level, component, args) {
+    try {
+      let message = args.map(format).join(" ");
+      if (message.length > MAX_MESSAGE) {
+        message = message.slice(0, MAX_MESSAGE) + " \u2026(truncated)";
+      }
+      queue.push({ level: level, component: component, message: message });
+      if (queue.length >= MAX_BATCH) {
+        flush();
+      } else if (!flushTimer) {
+        flushTimer = setTimeout(flush, FLUSH_MS);
+      }
+    } catch (_) {}
+  }
+
+  for (const level of LEVELS) {
+    const original = console[level]
+      ? console[level].bind(console)
+      : function () {};
+    console[level] = function () {
+      const args = Array.prototype.slice.call(arguments);
+      original.apply(null, args);
+      const component = slotName(new Error().stack);
+      if (component) forward(level, component, args);
+    };
+  }
+
+  window.addEventListener("error", function (event) {
+    const component = slotName(event.error && event.error.stack);
+    if (component) forward("error", component, [event.message]);
+  });
+
+  window.addEventListener("unhandledrejection", function (event) {
+    const reason = event.reason;
+    const component = slotName(reason && reason.stack);
+    if (component) {
+      const message = reason && reason.message ? reason.message : String(reason);
+      forward("error", component, [message]);
+    }
+  });
+
+  window.addEventListener("pagehide", flush);
+})();`;
+}
 async function createBuildContext(components, options = {}) {
-  const { cwd = process.cwd(), stage, onBuildEnd } = options;
+  const {
+    cwd = process.cwd(),
+    stage,
+    onBuildEnd,
+    browserLogsEndpoint
+  } = options;
   const outdir = path4.join(cwd, "node_modules/.ollie", "build");
   await fs4.mkdir(outdir, { recursive: true });
   const entryPoints = {};
@@ -789,7 +905,8 @@ async function createBuildContext(components, options = {}) {
     logLevel: "silent",
     // We handle logging ourselves
     jsx: "automatic",
-    plugins: [manifestPlugin]
+    plugins: [manifestPlugin],
+    ...browserLogsEndpoint ? { banner: { js: browserLogBridge(browserLogsEndpoint) } } : {}
   });
   return ctx;
 }
@@ -800,11 +917,13 @@ async function startDevServer(options = {}) {
     cwd = process.cwd(),
     stage,
     onRequest,
-    onBuildEnd
+    onBuildEnd,
+    onBrowserLogs
   } = options;
   const servedir = path4.join(cwd, "node_modules/.ollie", "build");
   const componentsDir = path4.join(cwd, "components");
   const internalPort = port + 1;
+  const browserLogsEndpoint = onBrowserLogs ? `http://${host}:${port}/__log` : void 0;
   let activeStage = stage ?? "prod";
   let ctx = null;
   let entryNames = /* @__PURE__ */ new Set();
@@ -813,7 +932,8 @@ async function startDevServer(options = {}) {
     ctx = await createBuildContext(components, {
       cwd,
       stage: activeStage,
-      onBuildEnd
+      onBuildEnd,
+      browserLogsEndpoint
     });
     await ctx.rebuild();
     await ctx.watch();
@@ -1118,6 +1238,45 @@ data: ${payload}
       });
       return;
     }
+    if (url.pathname === "/__log" && req.method === "POST") {
+      if (!onBrowserLogs) {
+        res.statusCode = 404;
+        res.end();
+        return;
+      }
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
+      res.setHeader("Access-Control-Allow-Private-Network", "true");
+      const MAX_LOG_BODY = 64 * 1024;
+      let body = "";
+      let aborted = false;
+      req.on("data", (chunk) => {
+        if (aborted) return;
+        body += chunk.toString();
+        if (body.length > MAX_LOG_BODY) {
+          aborted = true;
+          res.statusCode = 413;
+          res.end();
+          req.destroy();
+        }
+      });
+      req.on("end", () => {
+        if (aborted) return;
+        try {
+          const parsed2 = JSON.parse(body);
+          const batch = parsed2.batch;
+          const candidates = Array.isArray(batch) ? batch : [parsed2];
+          const entries = candidates.filter(
+            (entry) => typeof entry?.message === "string"
+          );
+          if (entries.length > 0) onBrowserLogs(entries);
+        } catch {
+        }
+        res.statusCode = 204;
+        res.end();
+      });
+      return;
+    }
     if (req.method === "OPTIONS") {
       res.setHeader("Access-Control-Allow-Origin", "*");
       res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
@@ -1222,13 +1381,16 @@ function StartCommand({ args }) {
   const [state, setState] = useState2({ status: "initializing" });
   const [components, setComponents] = useState2([]);
   const [logs, setLogs] = useState2([]);
+  const [browserLogs, setBrowserLogs] = useState2([]);
   const [buildCount, setBuildCount] = useState2(0);
   const [lastBuildTime, setLastBuildTime] = useState2(null);
   const logIdRef = useRef(0);
+  const browserLogIdRef = useRef(0);
   const rebuildRef = useRef(null);
   const stopRef = useRef(null);
   const stage = resolveStage(parseArg(args, "--stage", "-s"));
   const noOpen = args.includes("--no-open") || Boolean(process.env.CI);
+  const browserLogsEnabled = args.includes("--browser-logs");
   const isInteractive = Boolean(process.stdin.isTTY);
   const addLog = useCallback((log) => {
     setLogs((prev) => {
@@ -1251,6 +1413,18 @@ function StartCommand({ args }) {
     },
     [addLog]
   );
+  const addBrowserLogs = useCallback((entries) => {
+    if (entries.length === 0) return;
+    setBrowserLogs((prev) => {
+      const mapped = entries.map((entry) => ({
+        ...entry,
+        message: sanitizeLogMessage(entry.message),
+        id: ++browserLogIdRef.current,
+        timestamp: /* @__PURE__ */ new Date()
+      }));
+      return [...prev, ...mapped].slice(-MAX_LOGS);
+    });
+  }, []);
   useEffect2(() => {
     let mounted = true;
     async function init() {
@@ -1281,6 +1455,7 @@ function StartCommand({ args }) {
           port: PORT,
           stage,
           onRequest: handleRequest,
+          onBrowserLogs: browserLogsEnabled ? addBrowserLogs : void 0,
           onBuildEnd: (updatedComponents) => {
             setComponents(updatedComponents);
             setBuildCount((c) => c + 1);
@@ -1321,7 +1496,7 @@ function StartCommand({ args }) {
       mounted = false;
       stopRef.current?.();
     };
-  }, [stage, handleRequest, noOpen]);
+  }, [stage, handleRequest, addBrowserLogs, browserLogsEnabled, noOpen]);
   useInput(
     (input, key) => {
       if (input === "q" || input === "c" && key.ctrl) {
@@ -1378,6 +1553,7 @@ function StartCommand({ args }) {
       /* @__PURE__ */ jsx3(ComponentList, { components }),
       /* @__PURE__ */ jsx3(BuildInfo, { buildCount, lastBuildTime }),
       /* @__PURE__ */ jsx3(RequestLogs, { logs }),
+      browserLogsEnabled && /* @__PURE__ */ jsx3(BrowserLogs, { logs: browserLogs }),
       /* @__PURE__ */ jsx3(Footer, { interactive: isInteractive })
     ] })
   ] });
@@ -1506,6 +1682,38 @@ function RequestLogs({ logs }) {
     ] }, log.id)) })
   ] });
 }
+function sanitizeLogMessage(message) {
+  let out = "";
+  for (const ch of message) {
+    const code = ch.codePointAt(0) ?? 0;
+    out += code < 32 || code >= 127 && code <= 159 ? " " : ch;
+    if (out.length >= 2e3) break;
+  }
+  return out;
+}
+function browserLogColor(level) {
+  if (level === "error") return "red";
+  if (level === "warn") return "yellow";
+  if (level === "info") return "cyan";
+  return "gray";
+}
+function BrowserLogs({ logs }) {
+  return /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, flexDirection: "column", children: [
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "Browser Logs:" }),
+    /* @__PURE__ */ jsx3(Box3, { marginLeft: 2, flexDirection: "column", children: logs.length === 0 ? /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "No browser logs yet..." }) : logs.map((log) => /* @__PURE__ */ jsxs3(Box3, { children: [
+      /* @__PURE__ */ jsxs3(Text3, { color: browserLogColor(log.level), children: [
+        log.level.toUpperCase(),
+        " "
+      ] }),
+      log.component && /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+        "[",
+        log.component,
+        "] "
+      ] }),
+      /* @__PURE__ */ jsx3(Text3, { children: log.message })
+    ] }, log.id)) })
+  ] });
+}
 function Footer({ interactive = true }) {
   if (!interactive) {
     return /* @__PURE__ */ jsx3(Box3, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "Headless (no TTY) \u2014 Ctrl+C to stop" }) });
@@ -1542,7 +1750,7 @@ function App({ command, args }) {
   }
 }
 function VersionCommand() {
-  const version = "1.5.0" ? "1.5.0" : "unknown";
+  const version = "1.7.0" ? "1.7.0" : "unknown";
   return /* @__PURE__ */ jsx4(Box4, { children: /* @__PURE__ */ jsxs4(Text4, { children: [
     "ollieshop v",
     version
@@ -2068,6 +2276,14 @@ var componentCreateSchema = z2.object({
   active: z2.boolean().default(true).describe("Whether component is active"),
   props: z2.record(z2.unknown()).nullable().default(null).describe("Default component props as JSON object")
 });
+var componentUpdateSchema = z2.object({
+  id: z2.string().uuid().describe("Component UUID to update"),
+  versionId: z2.string().uuid().optional().describe("Move component to a different version UUID"),
+  name: z2.string().min(1).optional().describe("Component name"),
+  slot: z2.string().min(1).optional().describe("Target slot"),
+  active: z2.boolean().optional().describe("Whether component is active"),
+  props: z2.record(z2.unknown()).nullable().optional().describe("Component props as JSON object (null clears them)")
+});
 var componentListSchema = z2.object({
   storeId: z2.string().uuid().describe("Store UUID"),
   versionId: z2.string().uuid().optional().describe("Optional version UUID to filter by")
@@ -2099,6 +2315,7 @@ var schemas = {
   },
   component: {
     create: componentCreateSchema,
+    update: componentUpdateSchema,
     list: componentListSchema
   },
   function: {
@@ -2155,6 +2372,32 @@ async function createComponent(client, input) {
   }
   return { data: { id: data.id } };
 }
+async function updateComponent(client, id, input) {
+  const parsed2 = componentUpdateSchema.safeParse({ id, ...input });
+  if (!parsed2.success) {
+    return {
+      error: { message: parsed2.error.issues.map((i) => i.message).join("; ") }
+    };
+  }
+  const updatePayload = {};
+  if (input.name !== void 0) updatePayload.name = input.name;
+  if (input.slot !== void 0) updatePayload.slot = input.slot;
+  if (input.active !== void 0) updatePayload.active = input.active;
+  if (input.versionId !== void 0) updatePayload.version_id = input.versionId;
+  if (input.props !== void 0) updatePayload.props = input.props;
+  if (Object.keys(updatePayload).length === 0) {
+    return {
+      error: {
+        message: "No fields to update. Provide at least one of: --name, --slot, --active, --props, --version-id."
+      }
+    };
+  }
+  const { data, error } = await client.from("components").update(updatePayload).eq("id", id).select("id").single();
+  if (error) {
+    return { error: { message: error.message } };
+  }
+  return { data: { id: data.id } };
+}
 async function listComponents(client, storeId, versionId) {
   let query = client.from("components").select(
     "id, name, slot, active, version_id, props, created_at, versions!inner(id, name)"
@@ -2173,9 +2416,10 @@ async function listComponents(client, storeId, versionId) {
 async function componentCommand(parsed2) {
   const sub = parsed2.subcommand;
   if (sub === "create") return componentCreateCommand(parsed2);
+  if (sub === "update") return componentUpdateCommand(parsed2);
   if (sub === "list" || sub === "ls") return componentListCommand(parsed2);
   console.error(
-    `Unknown component subcommand: ${sub}. Use: component create | component list`
+    `Unknown component subcommand: ${sub}. Use: component create | component update | component list`
   );
   process.exit(1);
 }
@@ -2226,6 +2470,66 @@ async function componentCreateCommand(parsed2) {
     process.exit(1);
   }
 }
+async function componentUpdateCommand(parsed2) {
+  const format = detectOutputFormat(parsed2.global.output);
+  try {
+    let id;
+    let input;
+    if (parsed2.global.data) {
+      const raw = JSON.parse(parsed2.global.data);
+      id = validateUuid(validateRequired(raw.id, "id"), "id");
+      input = {
+        versionId: raw.versionId !== void 0 ? validateUuid(raw.versionId, "versionId") : void 0,
+        name: raw.name,
+        slot: raw.slot,
+        active: typeof raw.active === "boolean" ? raw.active : void 0,
+        props: raw.props
+      };
+    } else {
+      id = validateUuid(
+        validateRequired(getFlag(parsed2.flags, "id"), "id"),
+        "id"
+      );
+      const versionId = getFlag(parsed2.flags, "version-id");
+      if (versionId) validateUuid(versionId, "version-id");
+      const activeRaw = parsed2.flags.active;
+      let active;
+      if (activeRaw === "true" || activeRaw === true) {
+        active = true;
+      } else if (activeRaw === "false") {
+        active = false;
+      }
+      const propsRaw = getFlag(parsed2.flags, "props");
+      input = {
+        versionId,
+        name: getFlag(parsed2.flags, "name", "n"),
+        slot: getFlag(parsed2.flags, "slot", "s"),
+        active,
+        props: propsRaw ? JSON.parse(propsRaw) : void 0
+      };
+    }
+    if (parsed2.global.dryRun) {
+      outputDryRun(
+        "component.update",
+        { id, ...input },
+        format
+      );
+      return;
+    }
+    const client = await getAuthenticatedClient();
+    const result = await updateComponent(client, id, input);
+    outputResult(result, format, parsed2.global.fields);
+    if (result.error) process.exit(1);
+  } catch (err) {
+    outputResult(
+      {
+        error: { message: err instanceof Error ? err.message : String(err) }
+      },
+      format
+    );
+    process.exit(1);
+  }
+}
 async function componentListCommand(parsed2) {
   const format = detectOutputFormat(parsed2.global.output);
   try {
@@ -2393,7 +2697,8 @@ async function deployCommand(parsed2) {
     }
     const stream = await createComponentBundle({
       componentName,
-      cwd: process.cwd()
+      cwd: process.cwd(),
+      resourceType
     });
     const chunks = [];
     for await (const chunk of stream) {

package/package.json

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

package/src/commands/component-cmd.ts

@@ -1,4 +1,8 @@
-import { createComponent, listComponents } from "../core/component.js";
+import {
+  createComponent,
+  listComponents,
+  updateComponent,
+} from "../core/component.js";
 import {
   detectOutputFormat,
   outputDryRun,
@@ -11,10 +15,11 @@ import { validateRequired, validateUuid } from "../utils/validate.js";
 export async function componentCommand(parsed: ParsedArgs): Promise<void> {
   const sub = parsed.subcommand;
   if (sub === "create") return componentCreateCommand(parsed);
+  if (sub === "update") return componentUpdateCommand(parsed);
   if (sub === "list" || sub === "ls") return componentListCommand(parsed);
 
   console.error(
-    `Unknown component subcommand: ${sub}. Use: component create | component list`,
+    `Unknown component subcommand: ${sub}. Use: component create | component update | component list`,
   );
   process.exit(1);
 }
@@ -79,6 +84,87 @@ async function componentCreateCommand(parsed: ParsedArgs): Promise<void> {
   }
 }
 
+async function componentUpdateCommand(parsed: ParsedArgs): Promise<void> {
+  const format = detectOutputFormat(parsed.global.output);
+
+  try {
+    let id: string;
+    let input: {
+      versionId?: string;
+      name?: string;
+      slot?: string;
+      active?: boolean;
+      props?: Record<string, unknown> | null;
+    };
+
+    if (parsed.global.data) {
+      const raw = JSON.parse(parsed.global.data);
+      id = validateUuid(validateRequired(raw.id, "id"), "id");
+      input = {
+        versionId:
+          raw.versionId !== undefined
+            ? validateUuid(raw.versionId, "versionId")
+            : undefined,
+        name: raw.name,
+        slot: raw.slot,
+        active: typeof raw.active === "boolean" ? raw.active : undefined,
+        props: raw.props,
+      };
+    } else {
+      id = validateUuid(
+        validateRequired(getFlag(parsed.flags, "id"), "id"),
+        "id",
+      );
+
+      const versionId = getFlag(parsed.flags, "version-id");
+      if (versionId) validateUuid(versionId, "version-id");
+
+      const activeRaw = parsed.flags.active;
+      let active: boolean | undefined;
+      if (activeRaw === "true" || activeRaw === true) {
+        active = true;
+      } else if (activeRaw === "false") {
+        active = false;
+      }
+
+      const propsRaw = getFlag(parsed.flags, "props");
+
+      input = {
+        versionId,
+        name: getFlag(parsed.flags, "name", "n"),
+        slot: getFlag(parsed.flags, "slot", "s"),
+        active,
+        props: propsRaw
+          ? (JSON.parse(propsRaw) as Record<string, unknown> | null)
+          : undefined,
+      };
+    }
+
+    if (parsed.global.dryRun) {
+      outputDryRun(
+        "component.update",
+        { id, ...input } as Record<string, unknown>,
+        format,
+      );
+      return;
+    }
+
+    const client = await getAuthenticatedClient();
+    const result = await updateComponent(client, id, input);
+
+    outputResult(result, format, parsed.global.fields);
+    if (result.error) process.exit(1);
+  } catch (err) {
+    outputResult(
+      {
+        error: { message: err instanceof Error ? err.message : String(err) },
+      },
+      format,
+    );
+    process.exit(1);
+  }
+}
+
 async function componentListCommand(parsed: ParsedArgs): Promise<void> {
   const format = detectOutputFormat(parsed.global.output);
 

package/src/commands/deploy-cmd.ts

@@ -61,10 +61,11 @@ export async function deployCommand(parsed: ParsedArgs): Promise<void> {
       timeout = Number(getFlag(parsed.flags, "timeout") ?? "300");
     }
 
-    // Bundle the component
+    // Bundle the resource
     const stream = await createComponentBundle({
       componentName,
       cwd: process.cwd(),
+      resourceType,
     });
 
     // Collect the zip buffer

package/src/commands/help.tsx

@@ -57,9 +57,9 @@ export function HelpCommand() {
         </Box>
         <Box>
           <Box width={24}>
-            <Text color="green">component create|list</Text>
+            <Text color="green">component create|update|list</Text>
           </Box>
-          <Text>Create or list components</Text>
+          <Text>Create, update or list components</Text>
         </Box>
         <Box>
           <Box width={24}>
@@ -151,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}>
@@ -160,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/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/core/component.ts

@@ -1,5 +1,5 @@
 import type { SupabaseClient } from "@supabase/supabase-js";
-import { componentCreateSchema } from "./schema.js";
+import { componentCreateSchema, componentUpdateSchema } from "./schema.js";
 
 export interface CreateComponentInput {
   versionId: string;
@@ -9,6 +9,14 @@ export interface CreateComponentInput {
   props?: Record<string, unknown> | null;
 }
 
+export interface UpdateComponentInput {
+  versionId?: string;
+  name?: string;
+  slot?: string;
+  active?: boolean;
+  props?: Record<string, unknown> | null;
+}
+
 export interface ComponentRecord {
   id: string;
   name: string;
@@ -50,6 +58,48 @@ export async function createComponent(
   return { data: { id: data.id } };
 }
 
+export async function updateComponent(
+  client: SupabaseClient,
+  id: string,
+  input: UpdateComponentInput,
+): Promise<{ data?: { id: string }; error?: { message: string } }> {
+  const parsed = componentUpdateSchema.safeParse({ id, ...input });
+  if (!parsed.success) {
+    return {
+      error: { message: parsed.error.issues.map((i) => i.message).join("; ") },
+    };
+  }
+
+  const updatePayload: Record<string, unknown> = {};
+  if (input.name !== undefined) updatePayload.name = input.name;
+  if (input.slot !== undefined) updatePayload.slot = input.slot;
+  if (input.active !== undefined) updatePayload.active = input.active;
+  if (input.versionId !== undefined) updatePayload.version_id = input.versionId;
+  if (input.props !== undefined) updatePayload.props = input.props;
+
+  if (Object.keys(updatePayload).length === 0) {
+    return {
+      error: {
+        message:
+          "No fields to update. Provide at least one of: --name, --slot, --active, --props, --version-id.",
+      },
+    };
+  }
+
+  const { data, error } = await client
+    .from("components")
+    .update(updatePayload)
+    .eq("id", id)
+    .select("id")
+    .single();
+
+  if (error) {
+    return { error: { message: error.message } };
+  }
+
+  return { data: { id: data.id } };
+}
+
 export async function listComponents(
   client: SupabaseClient,
   storeId: string,

package/src/core/schema.ts

@@ -52,6 +52,23 @@ export const componentCreateSchema = z.object({
     .describe("Default component props as JSON object"),
 });
 
+export const componentUpdateSchema = z.object({
+  id: z.string().uuid().describe("Component UUID to update"),
+  versionId: z
+    .string()
+    .uuid()
+    .optional()
+    .describe("Move component to a different version UUID"),
+  name: z.string().min(1).optional().describe("Component name"),
+  slot: z.string().min(1).optional().describe("Target slot"),
+  active: z.boolean().optional().describe("Whether component is active"),
+  props: z
+    .record(z.unknown())
+    .nullable()
+    .optional()
+    .describe("Component props as JSON object (null clears them)"),
+});
+
 export const componentListSchema = z.object({
   storeId: z.string().uuid().describe("Store UUID"),
   versionId: z
@@ -109,6 +126,7 @@ const schemas: Record<string, SchemaMap> = {
   },
   component: {
     create: componentCreateSchema,
+    update: componentUpdateSchema,
     list: componentListSchema,
   },
   function: {

package/src/utils/bundle.ts

@@ -5,11 +5,15 @@ import archiver from "archiver";
 
 // TODO: Implement .ollieignore file support for custom exclusions
 
+export type BundleResourceType = "component" | "function";
+
 export interface BundleOptions {
   /** Project root directory */
   cwd?: string;
   /** Component name (folder name in components/) */
   componentName: string;
+  /** Resource type — decides the source folder and entry point shape */
+  resourceType?: BundleResourceType;
 }
 
 export interface BundleResult {
@@ -33,14 +37,21 @@ export interface BundleResult {
 export async function createComponentBundle(
   options: BundleOptions,
 ): Promise<PassThrough> {
-  const { cwd = process.cwd(), componentName } = options;
+  const {
+    cwd = process.cwd(),
+    componentName,
+    resourceType = "component",
+  } = options;
+
+  const sourceDir = resourceType === "function" ? "functions" : "components";
 
-  // Verify component exists
-  const componentDir = path.join(cwd, "components", componentName);
+  const componentDir = path.join(cwd, sourceDir, componentName);
   try {
     await fs.access(componentDir);
   } catch {
-    throw new Error(`Component "${componentName}" not found in components/`);
+    throw new Error(
+      `${resourceType === "function" ? "Function" : "Component"} "${componentName}" not found in ${sourceDir}/`,
+    );
   }
 
   // Verify package.json exists
@@ -67,8 +78,13 @@ export async function createComponentBundle(
   });
 
   // Add synthetic entry point
-  const entryPoint = `export { default } from './components/${componentName}';\n`;
-  archive.append(entryPoint, { name: "index.tsx" });
+  if (resourceType === "function") {
+    const entryPoint = `export { handler } from './functions/${componentName}';\n`;
+    archive.append(entryPoint, { name: "index.ts" });
+  } else {
+    const entryPoint = `export { default } from './components/${componentName}';\n`;
+    archive.append(entryPoint, { name: "index.tsx" });
+  }
 
   // Add package.json
   archive.file(packageJsonPath, { name: "package.json" });

package/src/utils/esbuild.ts

@@ -213,10 +213,111 @@ export interface BuildResult {
   buildTime: number;
 }
 
+export interface BrowserLogEntry {
+  level: string;
+  component?: string;
+  message: string;
+}
+
+function browserLogBridge(endpoint: string): string {
+  const target = JSON.stringify(endpoint);
+  return `(() => {
+  if (typeof window === "undefined" || window.__ollieLogBridge) return;
+  window.__ollieLogBridge = true;
+
+  const endpoint = ${target};
+  const SLOT_FRAME = /ollie-slot\\/([^.\\s:]+)\\.js/;
+  const LEVELS = ["log", "info", "warn", "error", "debug"];
+  const MAX_MESSAGE = 2000;
+  const MAX_BATCH = 20;
+  const FLUSH_MS = 200;
+
+  let queue = [];
+  let flushTimer = null;
+
+  function format(value) {
+    if (typeof value === "string") return value;
+    try {
+      return JSON.stringify(value);
+    } catch (_) {
+      return String(value);
+    }
+  }
+
+  function slotName(stack) {
+    const match = (stack || "").match(SLOT_FRAME);
+    return match ? match[1] : null;
+  }
+
+  function flush() {
+    if (flushTimer) {
+      clearTimeout(flushTimer);
+      flushTimer = null;
+    }
+    if (queue.length === 0) return;
+    const batch = queue;
+    queue = [];
+    try {
+      fetch(endpoint, {
+        method: "POST",
+        mode: "cors",
+        keepalive: true,
+        headers: { "Content-Type": "text/plain" },
+        body: JSON.stringify({ batch: batch }),
+      }).catch(function () {});
+    } catch (_) {}
+  }
+
+  function forward(level, component, args) {
+    try {
+      let message = args.map(format).join(" ");
+      if (message.length > MAX_MESSAGE) {
+        message = message.slice(0, MAX_MESSAGE) + " …(truncated)";
+      }
+      queue.push({ level: level, component: component, message: message });
+      if (queue.length >= MAX_BATCH) {
+        flush();
+      } else if (!flushTimer) {
+        flushTimer = setTimeout(flush, FLUSH_MS);
+      }
+    } catch (_) {}
+  }
+
+  for (const level of LEVELS) {
+    const original = console[level]
+      ? console[level].bind(console)
+      : function () {};
+    console[level] = function () {
+      const args = Array.prototype.slice.call(arguments);
+      original.apply(null, args);
+      const component = slotName(new Error().stack);
+      if (component) forward(level, component, args);
+    };
+  }
+
+  window.addEventListener("error", function (event) {
+    const component = slotName(event.error && event.error.stack);
+    if (component) forward("error", component, [event.message]);
+  });
+
+  window.addEventListener("unhandledrejection", function (event) {
+    const reason = event.reason;
+    const component = slotName(reason && reason.stack);
+    if (component) {
+      const message = reason && reason.message ? reason.message : String(reason);
+      forward("error", component, [message]);
+    }
+  });
+
+  window.addEventListener("pagehide", flush);
+})();`;
+}
+
 export interface CreateBuildContextOptions {
   cwd?: string;
   stage?: string;
   onBuildEnd?: (components: ComponentInfo[], result: BuildResult) => void;
+  browserLogsEndpoint?: string;
 }
 
 /**
@@ -227,7 +328,12 @@ export async function createBuildContext(
   components: ComponentInfo[],
   options: CreateBuildContextOptions = {},
 ): Promise<esbuild.BuildContext> {
-  const { cwd = process.cwd(), stage, onBuildEnd } = options;
+  const {
+    cwd = process.cwd(),
+    stage,
+    onBuildEnd,
+    browserLogsEndpoint,
+  } = options;
   const outdir = path.join(cwd, "node_modules/.ollie", "build");
 
   // Ensure output directory exists
@@ -303,6 +409,9 @@ export async function createBuildContext(
     logLevel: "silent", // We handle logging ourselves
     jsx: "automatic",
     plugins: [manifestPlugin],
+    ...(browserLogsEndpoint
+      ? { banner: { js: browserLogBridge(browserLogsEndpoint) } }
+      : {}),
   });
 
   return ctx;
@@ -327,6 +436,7 @@ export async function startDevServer(
     stage?: string;
     onRequest?: (args: esbuild.ServeOnRequestArgs) => void;
     onBuildEnd?: (components: ComponentInfo[], result: BuildResult) => void;
+    onBrowserLogs?: (entries: BrowserLogEntry[]) => void;
   } = {},
 ): Promise<
   ServeResult & { rebuild: () => Promise<void>; stop: () => Promise<void> }
@@ -338,11 +448,15 @@ export async function startDevServer(
     stage,
     onRequest,
     onBuildEnd,
+    onBrowserLogs,
   } = options;
 
   const servedir = path.join(cwd, "node_modules/.ollie", "build");
   const componentsDir = path.join(cwd, "components");
   const internalPort = port + 1;
+  const browserLogsEndpoint = onBrowserLogs
+    ? `http://${host}:${port}/__log`
+    : undefined;
 
   // The active stage is mutable: the admin can switch it at runtime via POST /stage.
   let activeStage = stage ?? "prod";
@@ -356,6 +470,7 @@ export async function startDevServer(
       cwd,
       stage: activeStage,
       onBuildEnd,
+      browserLogsEndpoint,
     });
     await ctx.rebuild();
     await ctx.watch();
@@ -731,6 +846,50 @@ export async function startDevServer(
       return;
     }
 
+    if (url.pathname === "/__log" && req.method === "POST") {
+      if (!onBrowserLogs) {
+        res.statusCode = 404;
+        res.end();
+        return;
+      }
+
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
+      res.setHeader("Access-Control-Allow-Private-Network", "true");
+
+      const MAX_LOG_BODY = 64 * 1024;
+      let body = "";
+      let aborted = false;
+      req.on("data", (chunk) => {
+        if (aborted) return;
+        body += chunk.toString();
+        if (body.length > MAX_LOG_BODY) {
+          aborted = true;
+          res.statusCode = 413;
+          res.end();
+          req.destroy();
+        }
+      });
+      req.on("end", () => {
+        if (aborted) return;
+        try {
+          const parsed: unknown = JSON.parse(body);
+          const batch = (parsed as { batch?: unknown }).batch;
+          const candidates: unknown[] = Array.isArray(batch) ? batch : [parsed];
+          const entries = candidates.filter(
+            (entry): entry is BrowserLogEntry =>
+              typeof (entry as BrowserLogEntry)?.message === "string",
+          );
+          if (entries.length > 0) onBrowserLogs(entries);
+        } catch {
+          // Ignore malformed log payloads
+        }
+        res.statusCode = 204;
+        res.end();
+      });
+      return;
+    }
+
     // Handle CORS preflight
     if (req.method === "OPTIONS") {
       res.setHeader("Access-Control-Allow-Origin", "*");