tracer: Add static analysis UI features powered by r2

- Support capturing backtraces, enabled on a per handler basis.
- Show event's caller (or backtrace, if available), and support
  disassembling each location.
- Support adding an instruction-level probe by clicking on an address in
  the disassembly view.
- Support jumping to the handler code by clicking on an address in the
  disassembly view.
- Improve styling.

apps/tracer/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^5.12.0",
+    "@frida/react-use-r2": "^1.0.2",
     "@monaco-editor/react": "^4.6.0",
     "monaco-editor": "^0.51.0",
     "react": "^18.3.1",
@@ -20,6 +21,7 @@
     "use-debounce": "^10.0.3"
   },
   "devDependencies": {
+    "@types/node": "^22.7.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",

apps/tracer/src/AddTargetsDialog.tsx

@@ -106,6 +106,8 @@ function labelForTraceSpecScope(scope: TraceSpecScope) {
             return "Function";
         case TraceSpecScope.RelativeFunction:
             return "Relative Function";
+        case TraceSpecScope.AbsoluteInstruction:
+            return "Instruction";
         case TraceSpecScope.Imports:
             return "All Module Imports";
         case TraceSpecScope.Module:
@@ -127,6 +129,8 @@ function placeholderForTraceTargetSpecScope(scope: TraceSpecScope) {
             return "[Module!]Function";
         case TraceSpecScope.RelativeFunction:
             return "Module!Offset";
+        case TraceSpecScope.AbsoluteInstruction:
+            return "0x1234";
         case TraceSpecScope.Imports:
         case TraceSpecScope.Module:
             return "Module";

apps/tracer/src/App.css

@@ -30,20 +30,61 @@
     padding: 5px;
 }
 
-.work-area {
+.editor-area {
     display: flex;
     flex: 1;
     flex-direction: column;
+    white-space: nowrap;
 }
 
-.work-area section {
+.editor-area section {
     flex: 1;
 }
 
+.editor-area .bp5-button:focus {
+    outline: 0;
+}
+
+.editor-area section.editor-toolbar {
+    display: flex;
+    justify-content: space-between;
+    flex: 0;
+    padding-right: 10px;
+}
+
+.editor-toolbar .bp5-switch {
+    padding-top: 10px;
+}
+
 .monaco-editor {
     position: absolute !important;
 }
 
+.bottom-tabs {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+.bottom-tabs .bp5-tab-list {
+    padding-left: 10px;
+}
+
+.bottom-tabs .bp5-tab:focus {
+    outline: 0;
+}
+
+.bottom-tab-panel {
+    display: flex;
+    margin-top: 0;
+    flex: 1;
+    overflow: hidden;
+}
+
 .event-view {
     flex: 1;
 }
+
+.disassembly-view {
+    flex: 1;
+}