@buoy-gg/console 4.0.2

package/src/devtools/ConsoleMessageRow.tsx

@@ -0,0 +1,345 @@
+/**
+ * ConsoleMessageRow — RN port of a single DevTools `.console-message-wrapper`.
+ *
+ * Anatomy (mirrors ConsoleViewMessage):
+ *   [nesting markers] [group triangle] [level icon] [timestamp] [content] [repeat badge]
+ * Error/warning rows get the surface background + text colors; non-error/warning
+ * rows get a hairline top divider. Group headers show a bold title with an
+ * expand triangle; error/warn/trace rows can expand a captured stack trace.
+ */
+
+import React, { useState } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { consoleTheme, levelStyles, monoFont } from "./theme";
+import { formatConsoleMessage } from "./consoleFormat";
+import { ConsoleValue } from "./ConsoleValue";
+import type { DisplayRow } from "./useConsoleMessages";
+
+function formatTimestamp(ts: number): string {
+  const d = new Date(ts);
+  const pad = (n: number, len = 2) => String(n).padStart(len, "0");
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(
+    d.getMilliseconds(),
+    3
+  )}`;
+}
+
+/** Small filled level glyph (warning triangle / error cross), DevTools-style. */
+function LevelIcon({ icon, color }: { icon: "warning" | "error"; color: string }) {
+  return <Text style={[styles.levelIcon, { color }]}>{icon === "warning" ? "⚠" : "⊘"}</Text>;
+}
+
+/** The repeat-count bubble (dt-small-bubble). */
+function RepeatBadge({ count, color }: { count: number; color: string }) {
+  return (
+    <View style={[styles.repeatBadge, { borderColor: color }]}>
+      <Text style={[styles.repeatBadgeText, { color }]}>{count}</Text>
+    </View>
+  );
+}
+
+interface ConsoleMessageRowProps {
+  row: DisplayRow;
+  showTimestamps: boolean;
+  onToggleGroup: (groupId: number, currentlyCollapsed: boolean) => void;
+  onToggleCluster: (key: string) => void;
+}
+
+export function ConsoleMessageRow({
+  row,
+  showTimestamps,
+  onToggleGroup,
+  onToggleCluster,
+}: ConsoleMessageRowProps) {
+  const { entry } = row;
+  const level = levelStyles[entry.level];
+  const isErrorOrWarn = entry.level === "error" || entry.level === "warning";
+  const textColor = level.text;
+  const [stackOpen, setStackOpen] = useState(entry.method === "trace");
+
+  // Collapsed/large cluster header (Grouped mode): tap to expand/collapse.
+  if (row.clusterHeader) {
+    const ch = row.clusterHeader;
+    return (
+      <TouchableOpacity
+        style={[styles.wrapper, styles.dividerTop]}
+        activeOpacity={0.7}
+        onPress={() => onToggleCluster(ch.key)}
+      >
+        <View style={styles.rowWrapper}>
+          <Text style={[styles.originGutter, { color: row.originColor }]}>
+            {ch.expanded ? "▼" : "▶"}
+          </Text>
+          <View style={styles.messageColumn}>
+            <View style={styles.messageLine}>
+              <Text style={[styles.text, styles.clusterTitle, { color: row.originColor }]}>
+                {row.originLabel}
+              </Text>
+              <Text style={styles.clusterCount}> · {ch.count} logs</Text>
+            </View>
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+
+  const tokens = formatConsoleMessage(entry.args);
+  const hasStack = Boolean(entry.stack) && (isErrorOrWarn || entry.method === "trace");
+
+  const content = (
+    <View style={styles.contentWrap}>
+      {tokens.map((token, i) =>
+        token.type === "string" ? (
+          <Text
+            key={i}
+            style={[
+              styles.text,
+              { color: textColor },
+              row.isGroupHeader && styles.groupTitle,
+              token.style,
+            ]}
+          >
+            {token.value}
+          </Text>
+        ) : (
+          <ConsoleValue key={i} value={token.value} generic={token.mode === "generic"} />
+        )
+      )}
+    </View>
+  );
+
+  const inner = (
+    <View style={styles.messageColumn}>
+      <View style={styles.messageLine}>
+        {/* Group expand triangle */}
+        {row.isGroupHeader ? (
+          <Text style={[styles.groupTriangle, { color: textColor }]}>
+            {row.groupCollapsed ? "▶" : "▼"}
+          </Text>
+        ) : null}
+
+        {/* Level icon */}
+        {level.icon ? <LevelIcon icon={level.icon} color={textColor} /> : null}
+
+        {/* Timestamp */}
+        {showTimestamps ? (
+          <Text style={styles.timestamp}>{formatTimestamp(entry.timestamp)}</Text>
+        ) : null}
+
+        {/* Stack expand toggle */}
+        {hasStack ? (
+          <Text style={[styles.stackTriangle, { color: textColor }]}>
+            {stackOpen ? "▼" : "▶"}
+          </Text>
+        ) : null}
+
+        {/* Message content */}
+        {content}
+
+        {/* Repeat badge */}
+        {row.repeatCount > 1 ? <RepeatBadge count={row.repeatCount} color={textColor} /> : null}
+
+        {/* Origin label (component / function / call site) */}
+        {row.originLabel ? (
+          <Text style={[styles.originLabel, { color: row.originColor }]} numberOfLines={1}>
+            {row.originLabel}
+          </Text>
+        ) : null}
+      </View>
+
+      {/* Stack trace */}
+      {hasStack && stackOpen ? (
+        <View style={styles.stackTrace}>
+          {(entry.stack ?? "")
+            .split("\n")
+            .filter((l) => l.trim())
+            .map((line, i) => (
+              <Text key={i} style={styles.stackFrame}>
+                {line.trim()}
+              </Text>
+            ))}
+        </View>
+      ) : null}
+    </View>
+  );
+
+  const rowStyle = [
+    styles.wrapper,
+    level.background ? { backgroundColor: level.background } : styles.dividerTop,
+  ];
+
+  // Nesting indentation markers.
+  const markers = Array.from({ length: row.depth }, (_, i) => (
+    <View key={i} style={styles.nestingMarker} />
+  ));
+
+  // Origin gutter: swimlane columns (multi-track) or a single bracket.
+  const gutter = row.lanes ? (
+    <View style={styles.laneGutter}>
+      {row.lanes.map((cell, i) => (
+        <Text key={i} style={[styles.laneCell, cell.color ? { color: cell.color } : null]}>
+          {cell.glyph}
+        </Text>
+      ))}
+    </View>
+  ) : row.bracketGlyph ? (
+    <Text style={[styles.originGutter, { color: row.originColor }]}>{row.bracketGlyph}</Text>
+  ) : null;
+
+  const body = (
+    <View style={styles.rowWrapper}>
+      {gutter}
+      {markers}
+      {inner}
+    </View>
+  );
+
+  // Group headers and stack-bearing rows are pressable.
+  if (row.isGroupHeader && row.groupId !== undefined) {
+    const gid = row.groupId;
+    return (
+      <TouchableOpacity
+        style={rowStyle}
+        activeOpacity={0.7}
+        onPress={() => onToggleGroup(gid, Boolean(row.groupCollapsed))}
+      >
+        {body}
+      </TouchableOpacity>
+    );
+  }
+  if (hasStack) {
+    return (
+      <TouchableOpacity style={rowStyle} activeOpacity={0.7} onPress={() => setStackOpen((o) => !o)}>
+        {body}
+      </TouchableOpacity>
+    );
+  }
+  return <View style={rowStyle}>{body}</View>;
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    paddingVertical: 2,
+    paddingRight: 8,
+    minHeight: 18,
+  },
+  dividerTop: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: consoleTheme.divider,
+  },
+  rowWrapper: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+  },
+  originGutter: {
+    width: 11,
+    fontFamily: monoFont,
+    fontSize: 13,
+    lineHeight: 18,
+    textAlign: "center",
+  },
+  laneGutter: {
+    flexDirection: "row",
+  },
+  laneCell: {
+    width: 9,
+    fontFamily: monoFont,
+    fontSize: 13,
+    lineHeight: 18,
+    textAlign: "center",
+  },
+  originLabel: {
+    fontFamily: monoFont,
+    fontSize: 10,
+    lineHeight: 16,
+    marginLeft: 8,
+    opacity: 0.9,
+  },
+  nestingMarker: {
+    width: 14,
+    alignSelf: "stretch",
+    borderRightWidth: StyleSheet.hairlineWidth,
+    borderRightColor: consoleTheme.divider,
+    marginLeft: 2,
+  },
+  messageColumn: {
+    flex: 1,
+    flexDirection: "column",
+    paddingLeft: 6,
+  },
+  messageLine: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "flex-start",
+  },
+  contentWrap: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "flex-start",
+    flexShrink: 1,
+  },
+  text: {
+    fontFamily: monoFont,
+    fontSize: 12,
+    lineHeight: 16,
+  },
+  groupTitle: {
+    fontWeight: "bold",
+  },
+  clusterTitle: {
+    fontWeight: "600",
+  },
+  clusterCount: {
+    color: consoleTheme.tokenSubtle,
+    fontFamily: monoFont,
+    fontSize: 12,
+    lineHeight: 16,
+  },
+  groupTriangle: {
+    fontSize: 9,
+    lineHeight: 16,
+    marginRight: 4,
+  },
+  stackTriangle: {
+    fontSize: 8,
+    lineHeight: 16,
+    marginRight: 4,
+  },
+  levelIcon: {
+    fontSize: 12,
+    lineHeight: 16,
+    marginRight: 5,
+  },
+  timestamp: {
+    color: consoleTheme.tokenSubtle,
+    fontFamily: monoFont,
+    fontSize: 11,
+    lineHeight: 16,
+    marginRight: 6,
+  },
+  repeatBadge: {
+    borderWidth: 1,
+    borderRadius: 9,
+    paddingHorizontal: 5,
+    minWidth: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: 6,
+    marginTop: 1,
+  },
+  repeatBadgeText: {
+    fontSize: 10,
+    fontWeight: "700",
+    lineHeight: 14,
+  },
+  stackTrace: {
+    marginTop: 2,
+    marginLeft: 12,
+  },
+  stackFrame: {
+    color: consoleTheme.tokenSubtle,
+    fontFamily: monoFont,
+    fontSize: 11,
+    lineHeight: 15,
+  },
+});

package/src/devtools/ConsoleValue.tsx

@@ -0,0 +1,265 @@
+/**
+ * ConsoleValue — RN approximation of DevTools' object/value rendering
+ * (ObjectPropertiesSection + RemoteObjectPreviewFormatter).
+ *
+ * Primitives render with the DevTools dark-theme `object-value-*` token colors.
+ * Objects/arrays render an italic one-line preview with an expand triangle;
+ * expanding reveals a property tree (lazy, recursive). Matches the console's
+ * collapsed-preview / click-to-expand behavior.
+ */
+
+import React, { useState } from "react";
+import { Text, View, TouchableOpacity, StyleSheet } from "react-native";
+import type { TextStyle } from "react-native";
+import { consoleTheme, monoFont } from "./theme";
+
+const MAX_PREVIEW_PROPERTIES = 5;
+const MAX_PREVIEW_ARRAY = 6;
+
+type ValueKind =
+  | "number"
+  | "bigint"
+  | "boolean"
+  | "string"
+  | "null"
+  | "undefined"
+  | "function"
+  | "symbol"
+  | "array"
+  | "object"
+  | "error";
+
+function kindOf(value: unknown): ValueKind {
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+  if (Array.isArray(value)) return "array";
+  if (value instanceof Error) return "error";
+  const t = typeof value;
+  if (t === "number") return "number";
+  if (t === "bigint") return "bigint";
+  if (t === "boolean") return "boolean";
+  if (t === "string") return "string";
+  if (t === "function") return "function";
+  if (t === "symbol") return "symbol";
+  return "object";
+}
+
+const KIND_COLOR: Partial<Record<ValueKind, string>> = {
+  number: consoleTheme.valueNumber,
+  bigint: consoleTheme.valueBigint,
+  boolean: consoleTheme.valueNumber,
+  string: consoleTheme.valueString,
+  null: consoleTheme.valueNullish,
+  undefined: consoleTheme.valueNullish,
+  symbol: consoleTheme.valueString,
+  function: consoleTheme.valueNode,
+};
+
+/** The constructor/type label DevTools shows before an object's preview. */
+function constructorName(value: object): string {
+  if (Array.isArray(value)) return "";
+  const proto = Object.getPrototypeOf(value);
+  if (!proto) return "Object";
+  const name = proto.constructor?.name;
+  return !name || name === "Object" ? "" : name;
+}
+
+/** One-line scalar text for a value (used inside previews). */
+function scalarText(value: unknown): string {
+  const kind = kindOf(value);
+  switch (kind) {
+    case "string":
+      return `'${value as string}'`;
+    case "function": {
+      const name = (value as { name?: string }).name;
+      return `ƒ ${name || ""}`.trimEnd();
+    }
+    case "symbol":
+      return (value as symbol).toString();
+    case "bigint":
+      return `${String(value)}n`;
+    case "array":
+      return `Array(${(value as unknown[]).length})`;
+    case "error":
+      return (value as Error).name;
+    case "object": {
+      const name = constructorName(value as object);
+      return name ? `${name} {…}` : "{…}";
+    }
+    default:
+      return String(value);
+  }
+}
+
+/** Build the collapsed italic preview string for an object/array. */
+function buildPreview(value: object): string {
+  if (Array.isArray(value)) {
+    const head = value
+      .slice(0, MAX_PREVIEW_ARRAY)
+      .map((v) => scalarText(v))
+      .join(", ");
+    const more = value.length > MAX_PREVIEW_ARRAY ? ", …" : "";
+    return `(${value.length}) [${head}${more}]`;
+  }
+  const entries = Object.entries(value);
+  const head = entries
+    .slice(0, MAX_PREVIEW_PROPERTIES)
+    .map(([k, v]) => `${k}: ${scalarText(v)}`)
+    .join(", ");
+  const more = entries.length > MAX_PREVIEW_PROPERTIES ? ", …" : "";
+  const ctor = constructorName(value);
+  const prefix = ctor ? `${ctor} ` : "";
+  return `${prefix}{${head}${more}}`;
+}
+
+function isExpandable(value: unknown): value is object {
+  const kind = kindOf(value);
+  if (kind === "array") return (value as unknown[]).length > 0;
+  if (kind === "object") return Object.keys(value as object).length > 0;
+  if (kind === "error") return true;
+  return false;
+}
+
+const Triangle = ({ open }: { open: boolean }) => (
+  <Text style={[styles.triangle, open && styles.triangleOpen]}>▶</Text>
+);
+
+interface ConsoleValueProps {
+  value: unknown;
+  /** Force the generic (non-preview) object tree, like %O. */
+  generic?: boolean;
+  /** Nesting depth guard. */
+  depth?: number;
+}
+
+/** Render a single console argument / property value. */
+export function ConsoleValue({ value, depth = 0 }: ConsoleValueProps) {
+  const [expanded, setExpanded] = useState(false);
+  const kind = kindOf(value);
+
+  // Errors: collapsed to a single "Name: message" line (like Chrome / the web
+  // dashboard), expandable to the full stack. Avoids dumping a 100-line stack
+  // inline on native, where the arg is a real Error (not a sanitized object).
+  if (kind === "error") {
+    const err = value as Error;
+    const head = `${err.name}: ${err.message}`.split("\n")[0];
+    const stack = err.stack && err.stack.trim() !== head.trim() ? err.stack : undefined;
+    if (!stack) {
+      return (
+        <Text style={[styles.mono, { color: consoleTheme.onErrorContainer }]} numberOfLines={1}>
+          {head}
+        </Text>
+      );
+    }
+    return (
+      <View style={styles.objectContainer}>
+        <TouchableOpacity
+          style={styles.objectHeader}
+          activeOpacity={0.6}
+          onPress={() => setExpanded((e) => !e)}
+        >
+          <Triangle open={expanded} />
+          <Text
+            style={[styles.mono, styles.errorHead]}
+            numberOfLines={expanded ? undefined : 1}
+          >
+            {head}
+          </Text>
+        </TouchableOpacity>
+        {expanded ? <Text style={[styles.mono, styles.errorStack]}>{stack}</Text> : null}
+      </View>
+    );
+  }
+
+  if (!isExpandable(value)) {
+    const color = KIND_COLOR[kind] ?? consoleTheme.onSurface;
+    return <Text style={[styles.mono, { color }]}>{scalarText(value)}</Text>;
+  }
+
+  const obj = value as object;
+  const entries = Array.isArray(obj)
+    ? obj.map((v, i) => [String(i), v] as [string, unknown])
+    : Object.entries(obj);
+
+  return (
+    <View style={styles.objectContainer}>
+      <TouchableOpacity
+        onPress={() => setExpanded((e) => !e)}
+        activeOpacity={0.6}
+        style={styles.objectHeader}
+      >
+        <Triangle open={expanded} />
+        <Text style={[styles.mono, styles.preview]} numberOfLines={expanded ? undefined : 1}>
+          {buildPreview(obj)}
+        </Text>
+      </TouchableOpacity>
+      {expanded && depth < 6 ? (
+        <View style={styles.children}>
+          {entries.map(([key, v]) => (
+            <View key={key} style={styles.propertyRow}>
+              <Text style={[styles.mono, styles.propertyKey]}>{key}:</Text>
+              <View style={styles.propertyValue}>
+                <ConsoleValue value={v} depth={depth + 1} />
+              </View>
+            </View>
+          ))}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const monoStyle: TextStyle = {
+  fontFamily: monoFont,
+  fontSize: 12,
+  lineHeight: 16,
+};
+
+const styles = StyleSheet.create({
+  mono: monoStyle,
+  objectContainer: {
+    flexDirection: "column",
+  },
+  objectHeader: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+  },
+  triangle: {
+    color: consoleTheme.tokenSubtle,
+    fontSize: 8,
+    lineHeight: 16,
+    width: 12,
+  },
+  triangleOpen: {
+    transform: [{ rotate: "90deg" }],
+  },
+  preview: {
+    color: consoleTheme.valuePreview,
+    fontStyle: "italic",
+    flexShrink: 1,
+  },
+  errorHead: {
+    color: consoleTheme.onErrorContainer,
+    flexShrink: 1,
+  },
+  errorStack: {
+    color: consoleTheme.tokenSubtle,
+    marginLeft: 14,
+    marginTop: 1,
+  },
+  children: {
+    marginLeft: 14,
+    flexDirection: "column",
+  },
+  propertyRow: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+  },
+  propertyKey: {
+    color: consoleTheme.valueNode,
+    marginRight: 6,
+  },
+  propertyValue: {
+    flexShrink: 1,
+  },
+});

package/src/devtools/ConsoleView.tsx

@@ -0,0 +1,41 @@
+/**
+ * ConsoleView — self-contained Console panel (header bar + body) for embedding
+ * outside a JsModal (the desktop dashboard inline tool, or any standalone use).
+ *
+ * Inside the mobile floating menu, ConsoleModal composes the same pieces but
+ * routes the header into JsModal's `customContent` instead.
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { macOSColors } from "@buoy-gg/shared-ui";
+import { consoleTheme } from "./theme";
+import { ConsoleHeader } from "./ConsoleHeader";
+import { ConsoleBody } from "./ConsoleBody";
+import { useConsoleController } from "./useConsoleController";
+
+export function ConsoleView() {
+  const c = useConsoleController();
+  return (
+    <View style={styles.container}>
+      <View style={styles.headerBar}>
+        <ConsoleHeader c={c} />
+      </View>
+      <ConsoleBody c={c} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: consoleTheme.baseContainer,
+  },
+  headerBar: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: consoleTheme.baseContainer,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: macOSColors.border.default,
+  },
+});