@buoy-gg/console 7.0.29 → 7.0.31

package/src/devtools/ConsoleMessageRow.tsx

@@ -1,388 +0,0 @@
-import { memo } from "react";
-/**
- * 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;
-}
-
-// Memo with a precise comparator, justified by profiling (tool-bench
-// 2026-07-06): ~30 windowed rows re-rendered on every commit (172 row
-// renders in a 5s dwell) because buildDisplayRows recreates row OBJECTS
-// each emission — so default shallow compare can never bail. Entries are
-// immutable; the comparator lists every display-affecting row field.
-export const ConsoleMessageRow = memo(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;
-  // One "open" state per row: shows the stack trace (when there is one) AND
-  // lifts the single-line clamp so long/structured messages stay reachable.
-  const [expanded, setExpanded] = 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, !expanded && styles.contentWrapClamped]}>
-      {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}>
-      {row.originLabel ? (
-        <Text
-          style={[styles.originLabel, { color: row.originColor }]}
-          numberOfLines={1}
-        >
-          {row.originLabel}
-        </Text>
-      ) : null}
-      <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 }]}>
-            {expanded ? "▼" : "▶"}
-          </Text>
-        ) : null}
-
-        {/* Message content */}
-        {content}
-
-        {/* Repeat badge */}
-        {row.repeatCount > 1 ? <RepeatBadge count={row.repeatCount} color={textColor} /> : null}
-      </View>
-
-      {/* Stack trace */}
-      {hasStack && expanded ? (
-        <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>
-  );
-
-  const rowTestID = `buoy-console-row-${entry.id}`;
-  const rowLabel = [row.originLabel, tokens.find((t) => t.type === "string")?.value]
-    .filter(Boolean)
-    .join(" — ")
-    .slice(0, 80);
-
-  // 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))}
-        testID={rowTestID}
-        accessibilityLabel={rowLabel || "Console group"}
-      >
-        {body}
-      </TouchableOpacity>
-    );
-  }
-  // Every other row toggles expanded on tap — the collapsed line is clamped
-  // to a single line, so the tap is the way to read a long/structured log.
-  return (
-    <TouchableOpacity
-      style={rowStyle}
-      activeOpacity={0.7}
-      onPress={() => setExpanded((o) => !o)}
-      testID={rowTestID}
-      accessibilityLabel={rowLabel || "Console message"}
-    >
-      {body}
-    </TouchableOpacity>
-  );
-},
-(prev: ConsoleMessageRowProps, next: ConsoleMessageRowProps) =>
-  prev.row.key === next.row.key &&
-  // Reference check: swimlane gutter cells are rebuilt per emission, so
-  // swimlane mode simply keeps its previous (correct) behavior.
-  prev.row.lanes === next.row.lanes &&
-  prev.row.repeatCount === next.row.repeatCount &&
-  prev.row.groupCollapsed === next.row.groupCollapsed &&
-  prev.row.depth === next.row.depth &&
-  prev.row.bracketGlyph === next.row.bracketGlyph &&
-  prev.row.originLabel === next.row.originLabel &&
-  prev.row.clusterHeader?.count === next.row.clusterHeader?.count &&
-  prev.row.clusterHeader?.expanded === next.row.clusterHeader?.expanded &&
-  prev.showTimestamps === next.showTimestamps &&
-  prev.onToggleGroup === next.onToggleGroup &&
-  prev.onToggleCluster === next.onToggleCluster);
-
-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,
-    marginBottom: 1,
-    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,
-  },
-  // Collapsed rows clamp to one line; tap the row to expand.
-  contentWrapClamped: {
-    flexWrap: "nowrap",
-    overflow: "hidden",
-    maxHeight: 16,
-  },
-  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

@@ -1,265 +0,0 @@
-/**
- * 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

@@ -1,43 +0,0 @@
-/**
- * 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 { 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,
-    // Transparent so the desktop workbench's hoisted sky (one field spanning
-    // sidebar + panel) shows through — the shell paints its base beneath it.
-    backgroundColor: "transparent",
-  },
-  headerBar: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    // Clear, like Bench — the host's hoisted sky shows through the header.
-    backgroundColor: "transparent",
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: macOSColors.border.default,
-  },
-});