Implement optimized inputs/outputs formatter (GH-4)

Author: ArtyomVancyan

langgraphics-web/package.json

@@ -13,7 +13,8 @@
     "@xyflow/react": "^12.10.0",
     "antd": "^6.3.0",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0"
   },
   "devDependencies": {
     "@types/node": "^24.10.1",

langgraphics-web/src/components/InspectPanel.tsx

@@ -1,5 +1,6 @@
 import Tree from "antd/es/tree";
 import type {TreeDataNode} from "antd";
+import ReactMarkdown from "react-markdown";
 import {useCallback, useEffect, useMemo, useState} from "react";
 import type {NodeEntry} from "../types";
 
@@ -14,6 +15,22 @@ export function InspectPanel({nodeEntries}: { nodeEntries: NodeEntry[] }) {
         return nodeEntries.find(({run_id}) => run_id === selectedKey);
     }, [nodeEntries, selectedKey]);
 
+    const system = useMemo(() => {
+        const inputs = JSON.parse(selectedEntry?.input ?? "[]");
+        const system = inputs[0] || {};
+        return system.role === "system" && inputs.length < 3 ? system : null;
+    }, [selectedEntry])
+
+    const input = useMemo(() => {
+        const input = JSON.parse(selectedEntry?.input ?? "[]");
+        return input[input.length - 1] || null;
+    }, [selectedEntry])
+
+    const output = useMemo(() => {
+        const output = JSON.parse(selectedEntry?.output ?? "[]");
+        return output[output.length - 1] || null;
+    }, [selectedEntry])
+
     const getChildren = useCallback((parent: NodeEntry) => {
         return nodeEntries.filter(({parent_run_id}) => parent_run_id === parent.run_id).map(child => {
             const children: TreeDataNode[] = getChildren(child);
@@ -23,16 +40,13 @@ export function InspectPanel({nodeEntries}: { nodeEntries: NodeEntry[] }) {
                 key: child.run_id,
                 isLeaf: children.length === 0,
                 title: (
-                    <span className="inspect-step-label">
-                        {child.node_kind
-                            ? <img
-                                alt={child.node_kind}
-                                className="inspect-step-icon"
-                                src={`/icons/${child.node_kind}.svg`}
-                            />
-                            : <span className={`inspect-step-status${child.status === "error" ? " error" : ""}`}/>
-                        }
-                        <span className="inspect-step-name">{child.node_id ?? "step"}</span>
+                    <span className={`inspect-step-label ${child.status ?? ""}`}>
+                        <img
+                            alt={child.node_kind ?? ""}
+                            className="inspect-step-icon"
+                            src={`/icons/${child.node_kind}.svg`}
+                        />
+                        {child.node_id ?? "step"}
                     </span>
                 ),
             }
@@ -44,7 +58,7 @@ export function InspectPanel({nodeEntries}: { nodeEntries: NodeEntry[] }) {
             key: entry.run_id,
             children: getChildren(entry),
             title: (
-                <span className="inspect-node-label">
+                <span className={`inspect-node-label ${entry.status ?? ""}`}>
                     {entry.node_kind && <img src={`/icons/${entry.node_kind}.svg`} alt={entry.node_kind}/>}
                     {entry.node_id}
                 </span>
@@ -78,16 +92,43 @@ export function InspectPanel({nodeEntries}: { nodeEntries: NodeEntry[] }) {
                 <div className="inspect-detail-pane">
                     {selectedEntry && (
                         <>
-                            {selectedEntry.input && (
+                            {system && (
                                 <div className="inspect-detail-section">
-                                    <span className="inspect-section-label">Input</span>
-                                    <div className="inspect-detail-text">{selectedEntry.input}</div>
+                                    <span className={`inspect-section-label ${system.role ?? ""}`}>
+                                        <span>System</span>
+                                        <span className="tag">{system.role ?? "unknown"}</span>
+                                    </span>
+                                    <div className="inspect-detail-text">
+                                        {system.role
+                                            ? <ReactMarkdown children={system.content.trim()}/>
+                                            : <pre>{JSON.stringify(system, null, 4)}</pre>}
+                                    </div>
                                 </div>
                             )}
-                            {selectedEntry.output && (
+                            {input && (
                                 <div className="inspect-detail-section">
-                                    <span className="inspect-section-label">Output</span>
-                                    <div className="inspect-detail-text">{selectedEntry.output}</div>
+                                    <span className={`inspect-section-label ${input.role ?? ""}`}>
+                                        <span>Input</span>
+                                        <span className="tag">{input.role ?? "unknown"}</span>
+                                    </span>
+                                    <div className="inspect-detail-text">
+                                        {input.role
+                                            ? <ReactMarkdown children={input.content.trim()}/>
+                                            : <pre>{JSON.stringify(input, null, 4)}</pre>}
+                                    </div>
+                                </div>
+                            )}
+                            {output && (
+                                <div className={`inspect-detail-section ${selectedEntry.node_kind ?? ""}`}>
+                                    <span className={`inspect-section-label ${output.role ?? ""}`}>
+                                        <span>Output</span>
+                                        <span className="tag">{output.role ?? "unknown"}</span>
+                                    </span>
+                                    <div className={`inspect-detail-text ${selectedEntry.status ?? ""}`}>
+                                        {output.role
+                                            ? <ReactMarkdown children={output.content.trim()}/>
+                                            : <pre>{JSON.stringify(output, null, 4)}</pre>}
+                                    </div>
                                 </div>
                             )}
                         </>

langgraphics-web/src/index.css

@@ -1,10 +1,10 @@
 * {
-    margin: 0;
-    padding: 0;
     box-sizing: border-box;
 }
 
 html, body, #root {
+    margin: 0;
+    padding: 0;
     width: 100%;
     height: 100%;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -15,6 +15,9 @@ html, body, #root {
     --xy-node-color-default: #3c3c3c;
     --xy-background-color-default: #ffffff;
     --xy-node-border-default: 1px solid #c8c8c8;
+    --xy-node-tag-background: #3c3c3c26;
+    --xy-node-border-color: #C8C8C880;
+    --xy-node-tag-color: #3c3c3ccc;
 }
 
 .react-flow .css-var-root {
@@ -27,6 +30,9 @@ html, body, #root {
 .react-flow.dark {
     --xy-node-color-default: #c8c8c8;
     --xy-node-border-default: 1px solid #3c3c3c;
+    --xy-node-tag-background: #c8c8c826;
+    --xy-node-border-color: #3C3C3C80;
+    --xy-node-tag-color: #c8c8c8cc;
 }
 
 .react-flow.dark .css-var-root {
@@ -274,36 +280,22 @@ html, body, #root {
 .inspect-step-label {
     gap: 5px;
     display: flex;
+    flex: 1 1 auto;
     font-size: 11px;
+    overflow: hidden;
     font-weight: 400;
     font-style: italic;
     align-items: center;
-}
-
-.inspect-step-status {
-    width: 6px;
-    height: 6px;
-    flex-shrink: 0;
-    border-radius: 50%;
-    background: #c8c8c8;
-}
-
-.inspect-step-status.error {
-    background: #ef4444;
-}
-
-.ant-tree-node-content-wrapper:not(.ant-tree-node-selected) .inspect-step-status:not(.error) {
-    background: #3b82f6;
-}
-
-.inspect-step-name {
-    min-width: 0;
-    flex: 1 1 auto;
-    overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
+.inspect-node-label.error,
+.inspect-step-label.error,
+.inspect-detail-text.error {
+    color: #ef4444;
+}
+
 .inspect-step-icon {
     width: 12px;
     height: 12px;
@@ -317,39 +309,72 @@ html, body, #root {
     border-radius: 6px;
     flex-direction: column;
     border: var(--xy-node-border-default);
+    border-color: var(--xy-node-border-color);
 }
 
 .inspect-section-label {
+    display: flex;
     font-size: 10px;
     font-weight: 700;
     padding: 5px 10px;
+    align-items: center;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     background: var(--xy-node-border-default);
     border-bottom: var(--xy-node-border-default);
+    border-color: var(--xy-node-border-color);
 }
 
 .inspect-detail-section > :not(.inspect-section-label) {
     padding: 8px 10px;
 }
 
-.inspect-detail-json {
-    margin: 0;
-    font-size: 11px;
-    overflow-y: auto;
-    white-space: pre-wrap;
-    word-break: break-all;
-    font-family: Consolas, monospace, Menlo, "SFMono-Regular", "Liberation Mono";
-}
-
 .inspect-detail-text {
-    gap: 3px;
     width: 100%;
-    display: flex;
     font-size: 12px;
-    line-height: 1.5;
     overflow-y: auto;
-    white-space: pre-wrap;
-    flex-direction: column;
-    word-break: break-word;
+}
+
+.inspect-detail-text > *:last-child,
+.inspect-detail-text > *:first-child {
+    margin: 0;
+}
+
+.inspect-section-label .tag {
+    border: 1px solid var(--xy-node-tag-color);
+    background: var(--xy-node-tag-background);
+    color: var(--xy-node-tag-color);
+    border-radius: 10px;
+    margin-left: 8px;
+    padding: 1px 5px;
+    font-size: 7px;
+}
+
+.inspect-detail-section.tool .inspect-detail-text:not(.error) {
+    color: #ea580ccc;
+}
+
+.inspect-detail-section.chain .inspect-detail-text:not(.error) {
+    color: #db2777cc;
+}
+
+.inspect-detail-section.prompt .inspect-detail-text:not(.error) {
+    color: #9332eacc;
+}
+
+.inspect-detail-section.parser .inspect-detail-text:not(.error) {
+    color: #6467f2cc;
+}
+
+.inspect-detail-section.embedding .inspect-detail-text:not(.error) {
+    color: #d67506cc;
+}
+
+.inspect-detail-section.retriever .inspect-detail-text:not(.error) {
+    color: #0d9488cc;
+}
+
+.inspect-detail-section.llm .inspect-detail-text:not(.error),
+.inspect-detail-section.chat_model .inspect-detail-text:not(.error) {
+    color: #4f46e5cc;
 }

langgraphics/formatter.py

@@ -0,0 +1,96 @@
+import json
+from typing import Any
+
+from langchain_core.messages import messages_to_dict
+from langchain_core.tracers.schemas import Run
+from langsmith.utils import (
+    get_message_generation_from_outputs,
+    get_llm_generation_from_outputs,
+    get_messages_from_inputs,
+    get_prompt_from_inputs,
+    _convert_message,
+)
+
+
+class Formatter:
+    @staticmethod
+    def serialise(func):
+        def wrapper(*args, **kwargs):
+            return json.dumps(
+                ensure_ascii=False,
+                obj=func(*args, **kwargs),
+                default=lambda x: x.__dict__,
+            )
+
+        return wrapper
+
+    @staticmethod
+    def norm(msg: dict[str, Any]) -> dict[str, Any]:
+        data: dict[str, Any] = msg.get("data", {})
+        if tool_calls := data.get("tool_calls", []):
+            fmt_tool = lambda tc: f"{tc.get('name', '?')}({tc.get('args', {})})"
+            return {
+                "role": msg.get("type", "unknown"),
+                "content": ", ".join(map(fmt_tool, tool_calls)),
+            }
+        role = msg.get("type", "unknown")
+        content = data.get("content", "")
+        if content and isinstance(content, list):
+            content = content[-1].get("text", "")
+        return {"role": role, "content": str(content)}
+
+    @classmethod
+    @serialise
+    def inputs(cls, run: Run) -> list[dict[str, Any]]:
+        data: dict[str, Any] = run.inputs or {}
+        if run.run_type == "chat_model":
+            try:
+                messages = messages_to_dict(data["messages"])
+            except AttributeError:
+                messages = data["messages"][0]
+            except KeyError:
+                return [data]
+            return list(map(cls.norm, get_messages_from_inputs({"messages": messages})))
+        elif run.run_type == "chain":
+            messages = messages_to_dict(data.get("messages", []))
+            return list(map(cls.norm, get_messages_from_inputs({"messages": messages})))
+        elif run.run_type == "tool":
+            return [{"role": "input", "content": str(data.get("input", ""))}]
+        elif run.run_type == "retriever":
+            return [{"role": "query", "content": str(data.get("query", ""))}]
+        elif run.run_type == "llm":
+            return [{"role": "prompt", "content": get_prompt_from_inputs(data)}]
+        return []
+
+    @classmethod
+    @serialise
+    def outputs(cls, run: Run) -> list[dict[str, Any]]:
+        if run.error:
+            return [{"role": "error", "content": str(run.error)}]
+        data: dict[str, Any] = run.outputs or {}
+        if run.run_type == "chat_model":
+            try:
+                message = run.outputs["generations"][0][0]["message"]
+                generation = _convert_message(message)
+            except IndexError:
+                generation = get_message_generation_from_outputs(data)
+            return [cls.norm(generation)]
+        elif run.run_type == "chain":
+            try:
+                messages = messages_to_dict(data["messages"].value)
+            except AttributeError:
+                messages = messages_to_dict(data["messages"])
+            except KeyError:
+                return [data]
+            return list(map(cls.norm, get_messages_from_inputs({"messages": messages})))
+        elif run.run_type == "llm":
+            return [{"role": "text", "content": get_llm_generation_from_outputs(data)}]
+        elif run.run_type == "tool":
+            out = data.get("output", "")
+            return [{"role": "output", "content": getattr(out, "content", str(out))}]
+        elif run.run_type == "retriever":
+            return [
+                {"role": "document", "content": getattr(d, "page_content", str(d))}
+                for d in data.get("documents", [])
+            ]
+        return []