Add support for tron display (#17)

stevenconner · Steve Conner · web-flow · commit e320c2effaea · 2025-09-10T08:28:36.000-07:00
* feat(display): add support for tron displays

* add a command to run the node process to package.json

---------

Co-authored-by: Steve Conner &lt;steve-ir@Steves-MacBook-Pro.local&gt;
diff --git a/app/components/DetailPanel.tsx b/app/components/DetailPanel.tsx
@@ -1,4 +1,14 @@
-import { View, Text, ScrollView, type ViewStyle, type TextStyle } from "react-native"
+import {
+  View,
+  Text,
+  ScrollView,
+  type ViewStyle,
+  type TextStyle,
+  Image,
+  type ImageStyle,
+  Pressable,
+  Linking,
+} from "react-native"
 import { themed } from "../theme/theme"
 import { TimelineItem } from "../types"
 import { TreeView } from "./TreeView"
@@ -31,15 +41,38 @@ export function DetailPanel({ selectedItem, onClose }: DetailPanelProps) {
     )
   }
 
+  const getHeaderTitle = () => {
+    switch (selectedItem.type) {
+      case "log":
+        return "Log Details"
+      case "display":
+        return "Display Details"
+      default:
+        return "Network Details"
+    }
+  }
+
+  const renderDetailContent = () => {
+    switch (selectedItem.type) {
+      case "log":
+        return <LogDetailContent item={selectedItem} />
+      case "display":
+        return <DisplayDetailContent item={selectedItem} />
+      case "api.request":
+      case "api.response":
+        return <NetworkDetailContent item={selectedItem} />
+      default:
+        return null
+    }
+  }
+
   return (
     <View style={$container()}>
       <View style={$header()}>
         <View style={$flex}>
           <View style={$headerTitleRow}>
             <View style={$selectedIndicator()} />
-            <Text style={$headerTitle()}>
-              {selectedItem.type === "log" ? "Log Details" : "Network Details"}
-            </Text>
+            <Text style={$headerTitle()}>{getHeaderTitle()}</Text>
           </View>
           <View style={$headerInfo()}>
             <Text style={$headerInfoText()}>{formatTime(new Date(selectedItem.date))}</Text>
@@ -69,16 +102,79 @@ export function DetailPanel({ selectedItem, onClose }: DetailPanelProps) {
         contentContainerStyle={$scrollContent()}
       >
         {/* Render appropriate content based on timeline item type */}
-        {selectedItem.type === "log" ? (
-          <LogDetailContent item={selectedItem} />
-        ) : (
-          <NetworkDetailContent item={selectedItem} />
-        )}
+        {renderDetailContent()}
       </ScrollView>
     </View>
   )
 }
 
+function DisplayDetailContent({ item }: { item: TimelineItem & { type: "display" } }) {
+  const { payload } = item
+  const { name, image, preview, ...rest } = payload
+
+  const renderImage = () => {
+    if (image) {
+      let imgComponent = null
+      if (typeof image === "string") {
+        imgComponent = <Image source={{ uri: image }} style={$image()} />
+      } else {
+        imgComponent = <Image source={image} style={$image()} />
+      }
+      return (
+        <DetailSection title="Image">
+          <Pressable
+            onPress={() => {
+              Linking.openURL(typeof image === "string" ? image : image.uri)
+            }}
+          >
+            {imgComponent}
+          </Pressable>
+        </DetailSection>
+      )
+    }
+  }
+
+  return (
+    <View style={$detailContent()}>
+      {name ? (
+        <DetailSection title="Name">
+          {typeof name === "string" ? (
+            <Text style={$valueText()}>{name}</Text>
+          ) : (
+            <TreeView data={name} />
+          )}
+        </DetailSection>
+      ) : null}
+      {preview ? (
+        <DetailSection title="Preview">
+          {typeof preview === "string" ? (
+            <Text style={$valueText()}>{preview}</Text>
+          ) : (
+            <TreeView data={preview} />
+          )}
+        </DetailSection>
+      ) : null}
+      {renderImage()}
+      <DetailSection title="Full Payload">
+        <TreeView data={rest} />
+      </DetailSection>
+      <DetailSection title="Metadata">
+        <TreeView
+          data={{
+            id: item.id,
+            clientId: item.clientId,
+            connectionId: item.connectionId,
+            messageId: item.messageId,
+            important: item.important,
+            date: item.date,
+            deltaTime: item.deltaTime,
+          }}
+        />
+      </DetailSection>
+    </View>
+  )
+}
+
 /**
  * Renders detailed content for log timeline items including level, message, stack trace, and metadata.
  */
@@ -340,3 +436,9 @@ const $errorText = themed<TextStyle>(({ colors, typography }) => ({
   fontSize: typography.body,
   fontFamily: typography.code.normal,
 }))
+
+const $image = themed<ImageStyle>(() => ({
+  width: 200,
+  height: 200,
+  resizeMode: "contain",
+}))
diff --git a/app/components/TimelineDisplayItem.tsx b/app/components/TimelineDisplayItem.tsx
@@ -0,0 +1,35 @@
+import { TimelineItemDisplay } from "../types"
+import { TimelineItem } from "./TimelineItem"
+
+type TimelineDisplayItemProps = {
+  item: TimelineItemDisplay
+  isSelected?: boolean
+  onSelect?: () => void
+}
+
+/**
+ * A single display item in the timeline.
+ */
+export function TimelineDisplayItem({
+  item,
+  isSelected = false,
+  onSelect,
+}: TimelineDisplayItemProps) {
+  const { payload, date, deltaTime, important } = item
+
+  // Type guard to ensure this is a display item
+  if (item.type !== "display") return null
+
+  return (
+    <TimelineItem
+      title={payload.name}
+      date={new Date(date)}
+      deltaTime={deltaTime}
+      preview={payload.preview ?? ""}
+      isImportant={important}
+      isTagged={important}
+      isSelected={isSelected}
+      onSelect={onSelect}
+    />
+  )
+}
diff --git a/app/components/TimelineToolbar.tsx b/app/components/TimelineToolbar.tsx
@@ -1,4 +1,4 @@
-export type FilterType = "all" | "log" | "api.request" | "api.response"
+export type FilterType = "all" | "log" | "display" | "api.request" | "api.response"
 // export type LogLevel = "all" | "debug" | "warn" | "error"
 // export type SortBy = "time-newest" | "time-oldest" | "type" | "level"
 
diff --git a/app/components/TreeView.tsx b/app/components/TreeView.tsx
@@ -112,29 +112,28 @@ export function TreeView({ data, path = [], level = 0, onNodePress }: TreeViewPr
     <>
       {/* Show this root node value */}
       <Pressable style={$nodeRow(level)} onPress={handlePress}>
-        {isExpandable && <Text style={$expandIcon()}>{isExpanded ? "▼" : "▶"}</Text>}
+        {isExpandable ? <Text style={$expandIcon()}>{isExpanded ? "▼" : "▶"}</Text> : null}
         <Text style={$nodeLabel()}>{label}</Text>
         {renderValue()}
       </Pressable>
 
       {/* If has children, loop TreeView */}
-      {isExpandable &&
-        isExpanded &&
-        level < MAX_LEVEL &&
-        getChildren().map(({ key, label: childLabel, value }) => (
-          <TreeView
-            key={key}
-            data={value}
-            path={[...path, childLabel]}
-            level={level + 1}
-            onNodePress={onNodePress}
-          />
-        ))}
-      {isExpandable && isExpanded && level >= MAX_LEVEL && (
+      {isExpandable && isExpanded && level < MAX_LEVEL
+        ? getChildren().map(({ key, label: childLabel, value }) => (
+            <TreeView
+              key={key}
+              data={value}
+              path={[...path, childLabel]}
+              level={level + 1}
+              onNodePress={onNodePress}
+            />
+          ))
+        : null}
+      {isExpandable && isExpanded && level >= MAX_LEVEL ? (
         <Text pointerEvents="none" style={$defaultValue()}>
           {JSON.stringify(data, null, 2)}
         </Text>
-      )}
+      ) : null}
     </>
   )
 }
diff --git a/app/screens/TimelineScreen.tsx b/app/screens/TimelineScreen.tsx
@@ -2,6 +2,7 @@ import { useGlobal } from "../state/useGlobal"
 import { TimelineItem } from "../types"
 import { TimelineLogItem } from "../components/TimelineLogItem"
 import { TimelineNetworkItem } from "../components/TimelineNetworkItem"
+import { TimelineDisplayItem } from "../components/TimelineDisplayItem"
 import { DetailPanel } from "../components/DetailPanel"
 import { ResizableDivider } from "../components/ResizableDivider"
 import { LegendList } from "@legendapp/list"
@@ -35,6 +36,9 @@ const TimelineItemRenderer = ({
   if (item.type === "log") {
     return <TimelineLogItem item={item} isSelected={isSelected} onSelect={handleSelectItem} />
   }
+  if (item.type === "display") {
+    return <TimelineDisplayItem item={item} isSelected={isSelected} onSelect={handleSelectItem} />
+  }
   if (item.type === "api.response") {
     return <TimelineNetworkItem item={item} isSelected={isSelected} onSelect={handleSelectItem} />
   }
@@ -44,7 +48,7 @@ const TimelineItemRenderer = ({
 
 export function TimelineScreen() {
   // TODO: Use a global state for the filters, set by the user in the TimelineToolbar
-  const timelineItems = useTimeline({ types: ["log", "api.request", "api.response"] })
+  const timelineItems = useTimeline({ types: ["log", "display", "api.request", "api.response"] })
   const [timelineWidth, setTimelineWidth] = useGlobal<number>("timelineWidth", 300, {
     persist: true,
   })
diff --git a/app/state/connectToServer.ts b/app/state/connectToServer.ts
@@ -82,7 +82,11 @@ export function connectToServer(props: { port: number } = { port: 9292 }): Unsub
     if (data.type === "command") {
       if (data.cmd.type === "clear") setTimelineItems([])
 
-      if (data.cmd.type === "log" || data.cmd.type === "api.response") {
+      if (
+        data.cmd.type === "log" ||
+        data.cmd.type === "api.response" ||
+        data.cmd.type === "display"
+      ) {
         // Add a unique ID to the timeline item
         data.cmd.id = `${data.cmd.clientId}-${data.cmd.messageId}`
 
diff --git a/app/types.ts b/app/types.ts
@@ -58,6 +58,13 @@ export type LogPayload =
     }
   | ErrorLogPayload
 
+export interface DisplayPayload {
+  name: string
+  value: any
+  preview: string
+  image: string | { uri: string }
+}
+
 export interface NetworkRequest {
   url: string
   method: string
@@ -101,4 +108,9 @@ export type TimelineItemNetwork = TimelineItemBase & {
   payload: NetworkPayload
 }
 
-export type TimelineItem = TimelineItemLog | TimelineItemNetwork
+export type TimelineItemDisplay = TimelineItemBase & {
+  type: "display"
+  payload: DisplayPayload
+}
+
+export type TimelineItem = TimelineItemLog | TimelineItemNetwork | TimelineItemDisplay
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "ci": "npm run lint",
     "start": "REACT_NATIVE_PATH=./node_modules/react-native-macos RCT_SCRIPT_RN_DIR=$REACT_NATIVE_PATH RCT_NEW_ARCH_ENABLED=1 ./node_modules/react-native-macos/scripts/packager.sh start",
     "test": "jest",
-    "postinstall": "ln -sf $(pwd)/node_modules/react-native-macos $(pwd)/node_modules/react-native && patch-package"
+    "postinstall": "ln -sf $(pwd)/node_modules/react-native-macos $(pwd)/node_modules/react-native && patch-package",
+    "node-process": "node -e \"require('./standalone-server').startReactotronServer({ port: 9292 })\""
   },
   "dependencies": {
     "@expo-google-fonts/space-grotesk": "^0.3.0",

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-export type FilterType = "all" \| "log" \| "api.request" \| "api.response"`
	`1`	`+export type FilterType = "all" \| "log" \| "display" \| "api.request" \| "api.response"`
`2`	`2`	`// export type LogLevel = "all" \| "debug" \| "warn" \| "error"`
`3`	`3`	`// export type SortBy = "time-newest" \| "time-oldest" \| "type" \| "level"`
`4`	`4`