diff --git a/components/chat/messages/calls.tsx b/components/chat/messages/calls.tsx
index fcf39667..18d9fe46 100644
--- a/components/chat/messages/calls.tsx
+++ b/components/chat/messages/calls.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import StackTrace from './calls/stackTrace';
+import CallFrames from './calls/callFrames';
 import type { CallFrame } from '@gptscript-ai/gptscript';
 import { IoCloseSharp } from 'react-icons/io5';
 import { BsArrowsFullscreen } from 'react-icons/bs';
@@ -43,7 +43,7 @@ const Calls = ({ calls }: { calls: Record<string, CallFrame> }) => {
           <ModalHeader className="flex justify-between">
             <div>
               <div className="my-2">
-                <h1 className="text-2xl  inline mr-2">Stack Trace</h1>
+                <h1 className="text-2xl  inline mr-2">Call Frames</h1>
                 <SaveFile content={calls} />
               </div>
               <h2 className="text-base text-zinc-500">
@@ -77,7 +77,7 @@ const Calls = ({ calls }: { calls: Record<string, CallFrame> }) => {
             </div>
           </ModalHeader>
           <ModalBody className="mb-4 h-full overflow-y-scroll">
-            <StackTrace calls={calls} />
+            <CallFrames calls={calls} />
           </ModalBody>
         </ModalContent>
       </Modal>
diff --git a/components/chat/messages/calls/callFrames.tsx b/components/chat/messages/calls/callFrames.tsx
new file mode 100644
index 00000000..44ff2406
--- /dev/null
+++ b/components/chat/messages/calls/callFrames.tsx
@@ -0,0 +1,348 @@
+import React, { useState, useRef } from 'react';
+import { Button, Tooltip } from '@nextui-org/react';
+import type { CallFrame } from '@gptscript-ai/gptscript';
+import { FaChevronUp, FaChevronDown } from 'react-icons/fa';
+import { AiOutlineLoading3Quarters } from 'react-icons/ai';
+import { JSONTree } from 'react-json-tree';
+
+const CallFrames = ({ calls }: { calls: Record<string, CallFrame> | null }) => {
+  // TODO Move this to before the final return so that we aren't disobeying the rules of hooks
+  if (!calls) return null;
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const logsContainerRef = useRef<HTMLDivElement>(null);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [allOpen, setAllOpen] = useState(false);
+
+  const EmptyLogs = () => {
+    return (
+      <div className="">
+        <p>Waiting for the first event from GPTScript...</p>
+      </div>
+    );
+  };
+
+  // Build tree structure
+  const buildTree = (calls: Record<string, CallFrame>) => {
+    const tree: Record<string, any> = {};
+    const rootNodes: string[] = [];
+
+    // Sort calls by start timestamp
+    const sortedCalls = Object.entries(calls).sort(
+      (a, b) => new Date(a[1].start).getTime() - new Date(b[1].start).getTime()
+    );
+
+    sortedCalls.forEach(([id, call]) => {
+      // Skip "GPTScript Gateway Provider" calls
+      if (call.tool?.name === 'GPTScript Gateway Provider') {
+        return;
+      }
+
+      const parentId = call.parentID || '';
+      if (!parentId) {
+        rootNodes.push(id);
+      } else {
+        if (!tree[parentId]) {
+          tree[parentId] = [];
+        }
+        tree[parentId].push(id);
+      }
+    });
+
+    return { tree, rootNodes };
+  };
+
+  // Render input (JSON or text)
+  const renderInput = (input: any) => {
+    if (typeof input === 'string') {
+      try {
+        const jsonInput = JSON.parse(input);
+        return (
+          <JSONTree
+            data={jsonInput}
+            theme={{
+              base00: 'transparent', // Set the background to transparent
+            }}
+            invertTheme={false}
+            shouldExpandNodeInitially={() => !allOpen}
+          />
+        );
+      } catch (_) {
+        // If parsing fails, render as text
+        return <p className="ml-5 whitespace-pre-wrap">{input}</p>;
+      }
+    }
+    // If input is already an object, render as JSON
+    return (
+      <JSONTree
+        data={input}
+        theme={{
+          base00: 'transparent', // Set the background to transparent
+        }}
+        invertTheme={false}
+        shouldExpandNodeInitially={() => !allOpen}
+      />
+    );
+  };
+
+  // Helper function to truncate and stringify input
+  const truncateInput = (input: any): string => {
+    const stringified =
+      typeof input === 'string' ? input : JSON.stringify(input);
+    return stringified.length > 100
+      ? stringified.slice(0, 100) + '...'
+      : stringified;
+  };
+
+  // Render tree recursively
+  const renderTree = (nodeId: string, depth: number = 0) => {
+    const call = calls[nodeId];
+    const children = tree[nodeId] || [];
+
+    return (
+      <div key={nodeId} style={{ marginLeft: `${depth * 20}px` }}>
+        <details open={depth === 0 || allOpen}>
+          <Summary call={call} />
+          <div className="ml-5">
+            {call.tool?.source?.location &&
+              call.tool.source.location !== 'inline' && (
+                <div className="mb-2 text-xs text-gray-400">
+                  Source:{' '}
+                  <a
+                    href={call.tool.source.location}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline hover:text-gray-300"
+                  >
+                    {call.tool.source.location}
+                  </a>
+                </div>
+              )}
+            <details open={allOpen}>
+              <summary className="cursor-pointer">
+                Input Message: {truncateInput(call?.input)}
+              </summary>
+              <div className="ml-5">{renderInput(call?.input)}</div>
+            </details>
+            <details open={allOpen}>
+              <summary className="cursor-pointer">Output Messages</summary>
+              <ul className="ml-5 list-none">
+                {call.output && call.output.length > 0 ? (
+                  call.output.flatMap((output, key) => {
+                    if (output.content) {
+                      return [
+                        <li key={`content-${key}`} className="mb-2">
+                          <details open={allOpen}>
+                            <summary className="cursor-pointer">
+                              {truncateInput(output.content)}
+                            </summary>
+                            <p className="ml-5 whitespace-pre-wrap">
+                              {output.content}
+                            </p>
+                          </details>
+                        </li>,
+                      ];
+                    } else if (output.subCalls) {
+                      return Object.entries(output.subCalls).map(
+                        ([subCallKey, subCall]) => (
+                          <li
+                            key={`subcall-${key}-${subCallKey}`}
+                            className="mb-2"
+                          >
+                            <details open={allOpen}>
+                              <summary className="cursor-pointer">
+                                Tool call: {truncateInput(subCallKey)}
+                              </summary>
+                              <p className="ml-5 whitespace-pre-wrap">
+                                Tool Call ID: {subCallKey}
+                              </p>
+                              <p className="ml-5 whitespace-pre-wrap">
+                                Tool ID: {subCall.toolID}
+                              </p>
+                              <p className="ml-5 whitespace-pre-wrap">
+                                Input: {subCall.input}
+                              </p>
+                            </details>
+                          </li>
+                        )
+                      );
+                    }
+                    return [];
+                  })
+                ) : (
+                  <li>
+                    <p className="ml-5">No output available</p>
+                  </li>
+                )}
+              </ul>
+            </details>
+            {children.length > 0 && (
+              <details open={allOpen}>
+                <summary className="cursor-pointer">Subcalls</summary>
+                <div className="ml-5">
+                  {children.map((childId: string) =>
+                    renderTree(childId, depth + 1)
+                  )}
+                </div>
+              </details>
+            )}
+            {(call.llmRequest || call.llmResponse) && (
+              <details open={allOpen}>
+                <summary className="cursor-pointer">
+                  {call.llmRequest && 'messages' in call.llmRequest
+                    ? 'LLM Request & Response'
+                    : 'Tool Command and Output'}
+                </summary>
+                <div className="ml-5">
+                  {call.llmRequest && (
+                    <details open={allOpen}>
+                      <summary className="cursor-pointer">
+                        {call.llmRequest && 'messages' in call.llmRequest
+                          ? 'Request'
+                          : 'Command'}
+                      </summary>
+                      <div className="ml-5">{renderInput(call.llmRequest)}</div>
+                    </details>
+                  )}
+                  {call.llmResponse && (
+                    <details open={allOpen}>
+                      <summary className="cursor-pointer">
+                        {call.llmRequest && 'messages' in call.llmRequest
+                          ? 'Response'
+                          : 'Output'}
+                      </summary>
+                      <div className="ml-5">
+                        {renderInput(call.llmResponse)}
+                      </div>
+                    </details>
+                  )}
+                </div>
+              </details>
+            )}
+            {call.tool?.toolMapping && (
+              <details open={allOpen}>
+                <summary className="cursor-pointer">Tools</summary>
+                <div className="ml-5">
+                  {renderToolMapping(call.tool.toolMapping)}
+                </div>
+              </details>
+            )}
+            {call.tool?.export && (
+              <details open={allOpen}>
+                <summary className="cursor-pointer">Shared Tools</summary>
+                <div className="ml-5">{renderExports(call.tool.export)}</div>
+              </details>
+            )}
+          </div>
+        </details>
+      </div>
+    );
+  };
+
+  const renderToolMapping = (toolMapping: Record<string, any>) => {
+    return Object.entries(toolMapping).map(([key, value]) => (
+      <div key={key} className="mb-2">
+        {value.some((item: any) => item.toolID !== key) ? (
+          <>
+            {key}:
+            <ul className="list-none ml-5">
+              {value.map((item: any, index: number) => (
+                <li key={index} className="mb-2">
+                  <p className="ml-5 whitespace-pre-wrap">{item.reference}</p>
+                  <p className="ml-5 whitespace-pre-wrap">{item.toolID}</p>
+                </li>
+              ))}
+            </ul>
+          </>
+        ) : (
+          <p className="whitespace-pre-wrap">{key}</p>
+        )}
+      </div>
+    ));
+  };
+
+  const renderExports = (exports: string[]) => {
+    return (
+      <ul className="list-none ml-5">
+        {exports.map((item, index) => (
+          <li key={index} className="mb-2">
+            <p className="whitespace-pre-wrap">{item}</p>
+          </li>
+        ))}
+      </ul>
+    );
+  };
+
+  const { tree, rootNodes } = buildTree(calls);
+
+  return (
+    <div
+      className="h-full overflow-scroll p-4 rounded-2xl border-2 shadow-lg border-primary border-lg bg-black text-white"
+      ref={logsContainerRef}
+    >
+      <Tooltip content={allOpen ? 'Collapse all' : 'Expand all'} closeDelay={0}>
+        <Button
+          onPress={() => setAllOpen(!allOpen)}
+          className="absolute right-8"
+          isIconOnly
+          radius="full"
+          color="primary"
+        >
+          {allOpen ? <FaChevronUp /> : <FaChevronDown />}
+        </Button>
+      </Tooltip>
+      {rootNodes.length > 0 ? (
+        rootNodes.map((rootId) => renderTree(rootId))
+      ) : (
+        <EmptyLogs />
+      )}
+    </div>
+  );
+};
+
+const Summary = ({ call }: { call: CallFrame }) => {
+  const name =
+    call.tool?.name ||
+    call.tool?.source?.repo ||
+    call.tool?.source?.location ||
+    'main';
+  const category = call.toolCategory;
+
+  const startTime = new Date(call.start).toLocaleTimeString();
+  const endTime = call.end
+    ? new Date(call.end).toLocaleTimeString()
+    : 'In progress';
+  const duration = call.end
+    ? `${((new Date(call.end).getTime() - new Date(call.start).getTime()) / 1000).toFixed(2)}s`
+    : 'N/A';
+
+  const timeInfo = `[ID: ${call.id}] [${startTime} - ${endTime}, ${duration}]`;
+
+  let summaryContent;
+  if (call.tool?.chat) {
+    summaryContent =
+      call.type !== 'callFinish'
+        ? `Chat open with ${name}`
+        : `Chatted with ${name}`;
+  } else {
+    summaryContent =
+      call.type !== 'callFinish'
+        ? category
+          ? `Loading ${category} from ${name}` + '...'
+          : `Running ${name}`
+        : category
+          ? `Loaded ${category} from ${name}`
+          : `Ran ${name}`;
+  }
+
+  return (
+    <summary className="cursor-pointer">
+      {summaryContent} <span className="text-xs text-gray-400">{timeInfo}</span>
+      {call?.type !== 'callFinish' && (
+        <AiOutlineLoading3Quarters className="ml-2 animate-spin inline" />
+      )}
+    </summary>
+  );
+};
+
+export default CallFrames;
diff --git a/components/chat/messages/calls/stackTrace.tsx b/components/chat/messages/calls/stackTrace.tsx
deleted file mode 100644
index abcb6d61..00000000
--- a/components/chat/messages/calls/stackTrace.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { Button, Tooltip } from '@nextui-org/react';
-import type { CallFrame } from '@gptscript-ai/gptscript';
-import { GoArrowDown, GoArrowUp } from 'react-icons/go';
-import { AiOutlineLoading3Quarters } from 'react-icons/ai';
-
-const StackTrace = ({ calls }: { calls: Record<string, CallFrame> | null }) => {
-  if (!calls) return null;
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const logsContainerRef = useRef<HTMLDivElement>(null);
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [allOpen, setAllOpen] = useState(true);
-
-  const EmptyLogs = () => {
-    return (
-      <div className="">
-        <p>Waiting for the first event from GPTScript...</p>
-      </div>
-    );
-  };
-
-  const Summary = ({ call }: { call: CallFrame }) => {
-    const name =
-      call.tool?.name ||
-      call.tool?.source?.repo ||
-      call.tool?.source?.location ||
-      'main';
-    const category = call.toolCategory;
-    if (call.tool?.chat) {
-      return (
-        <summary>
-          {call.type !== 'callFinish'
-            ? `Chat open with ${name}`
-            : `Chatted with ${name}`}
-        </summary>
-      );
-    }
-
-    return (
-      <summary>
-        {call.type !== 'callFinish'
-          ? category
-            ? `Loading ${category} from ${name}` + '...'
-            : `Running ${name}`
-          : category
-            ? `Loaded ${category} from ${name}`
-            : `Ran ${name}`}
-        {call?.type !== 'callFinish' && (
-          <AiOutlineLoading3Quarters className="ml-2 animate-spin inline" />
-        )}
-      </summary>
-    );
-  };
-
-  const RenderLogs = () => {
-    const callMap = new Map<string, Map<string, CallFrame>>();
-
-    Object.keys(calls).forEach((key) => {
-      const parentId = calls[key].parentID || '';
-      const callFrame = callMap.get(parentId);
-      if (!callFrame) {
-        callMap.set(parentId, new Map<string, CallFrame>());
-      }
-      callMap.get(parentId)?.set(key, calls[key]);
-    });
-
-    const renderLogsRecursive = (parentId: string) => {
-      const logs = callMap.get(parentId);
-      if (!logs) return null;
-      return (
-        <div className={parentId ? 'pl-10' : ''}>
-          {Array.from(logs.entries()).map(([key, call]) => (
-            <div key={key}>
-              <details open={allOpen} className="cursor-pointer">
-                <Summary call={call} />
-                <div className="ml-10">
-                  <details open={allOpen} className="cursor-pointer">
-                    <summary>Input</summary>
-                    <p className="ml-10">{JSON.stringify(call?.input)}</p>
-                  </details>
-                  <details open={allOpen} className="cursor-pointer">
-                    <summary>Messages</summary>
-
-                    <div className="">
-                      <ul className="ml-10 list-disc">
-                        {call.output &&
-                          call.output.map(
-                            (output, key) =>
-                              output.content && (
-                                <li key={key}>
-                                  <p>{output.content && output.content}</p>
-                                </li>
-                              )
-                          )}
-                      </ul>
-                    </div>
-                  </details>
-                  {callMap.get(call.id) && (
-                    <details open={allOpen} className="cursor-pointer">
-                      <summary>Calls</summary>
-                      {renderLogsRecursive(call.id)}
-                    </details>
-                  )}
-                </div>
-              </details>
-            </div>
-          ))}
-        </div>
-      );
-    };
-
-    return renderLogsRecursive('');
-  };
-
-  return (
-    <div
-      className="h-full overflow-scroll p-4 rounded-2xl border-2 shadow-lg border-primary border-lg bg-black text-white"
-      ref={logsContainerRef}
-    >
-      <Tooltip content={allOpen ? 'Collapse all' : 'Expand all'} closeDelay={0}>
-        <Button
-          onPress={() => {
-            setAllOpen(!allOpen);
-          }}
-          className="absolute right-8"
-          isIconOnly
-          radius="full"
-          color="primary"
-        >
-          {allOpen ? <GoArrowUp /> : <GoArrowDown />}
-        </Button>
-      </Tooltip>
-      {calls ? <RenderLogs /> : <EmptyLogs />}
-    </div>
-  );
-};
-
-export default StackTrace;
diff --git a/components/saveFile.tsx b/components/saveFile.tsx
index e6fc97e9..aebd325b 100644
--- a/components/saveFile.tsx
+++ b/components/saveFile.tsx
@@ -13,7 +13,7 @@ const SaveFile: React.FC<SaveFileProps> = ({ content, className }) => {
   };
 
   return (
-    <Tooltip content={'Download Stack Trace'} closeDelay={0}>
+    <Tooltip content={'Download Call Frames'} closeDelay={0}>
       <Button
         size="sm"
         onPress={handleSave}
diff --git a/electron/main.mjs b/electron/main.mjs
index 92c2730a..cb87b35e 100644
--- a/electron/main.mjs
+++ b/electron/main.mjs
@@ -84,7 +84,7 @@ function createWindow(url) {
     console.log('Saving file...');
     try {
       const result = await dialog.showSaveDialog({
-        defaultPath: path.join(app.getPath('downloads'), 'stacktrace.json'),
+        defaultPath: path.join(app.getPath('downloads'), 'callframes.json'),
       });
       if (!result.canceled) {
         fs.writeFileSync(result.filePath, arg);
diff --git a/package-lock.json b/package-lock.json
index 8b92d8b5..7a375891 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,6 +51,7 @@
         "react-dom": "18.2.0",
         "react-hook-form": "^7.51.5",
         "react-icons": "^5.1.0",
+        "react-json-tree": "^0.19.0",
         "react-markdown": "^9.0.1",
         "react-svg": "^16.1.34",
         "rehype-external-links": "^3.0.0",
@@ -18750,6 +18751,12 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "license": "MIT"
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT"
+    },
     "node_modules/lodash.castarray": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
@@ -20868,6 +20875,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-base16-styling": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.10.0.tgz",
+      "integrity": "sha512-H1k2eFB6M45OaiRru3PBXkuCcn2qNmx+gzLb4a9IPMR7tMH8oBRXU5jGbPDYG1Hz+82d88ED0vjR8BmqU3pQdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "^4.17.0",
+        "color": "^4.2.3",
+        "csstype": "^3.1.3",
+        "lodash-es": "^4.17.21"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -20912,6 +20931,20 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-json-tree": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/react-json-tree/-/react-json-tree-0.19.0.tgz",
+      "integrity": "sha512-PqT1WRVcWP+RROsZPQfNEKIC1iM/ZMfY4g5jN6oDnXp5593PPRAYgoHcgYCDjflAHQMtxl8XGdlTwIBdEGUXvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "^4.17.0",
+        "react-base16-styling": "^0.10.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-markdown": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz",
diff --git a/package.json b/package.json
index 3bf5d3d3..04dea46f 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.51.5",
     "react-icons": "^5.1.0",
+    "react-json-tree": "^0.19.0",
     "react-markdown": "^9.0.1",
     "react-svg": "^16.1.34",
     "rehype-external-links": "^3.0.0",