Function NodeDetail

dashboard/lcm/src/components.tsx:684–762

(props: {
  data: any;
  onOpenNode: (id: any) => void;
  onOpenSession: (id: any, opts?: any) => void;
  onOpenMessage: (m: any) => void;
})

}

export function NodeDetail(props: {
  data: any;
  onOpenNode: (id: any) => void;
  onOpenSession: (id: any, opts?: any) => void;
  onOpenMessage: (m: any) => void;
}): React.ReactElement {
  const d = props.data || {};
  const node = d.node;
  const onOpenNode = props.onOpenNode;
  const onOpenSession = props.onOpenSession;
  const onOpenMessage = props.onOpenMessage;
  if (!node) return <EmptyState className="hermes-lcm-empty">Node not found</EmptyState>;
  const sources = d.sources || {};
  const tags = parseJsonArray(node.tags);
  const entities = parseJsonArray(node.entities);
  return (
    <div className="hermes-lcm-detail">
      <div className="hermes-lcm-detail-meta">
        <span className="hermes-lcm-tag">{`Depth ${node.depth}`}</span>
        {node.category ? <span className="hermes-lcm-tag">{node.category}</span> : null}
        <button
          type="button"
          className="hermes-lcm-btn"
          onClick={function () { onOpenSession(node.session_id); }}
        >{sessionLabel(node.session_id)}</button>
        <span className="hermes-lcm-dim">{`${fmtInt(node.source_token_count)}→${fmtInt(node.token_count)} tok`}</span>
        <TimeText className="hermes-lcm-dim" epoch={node.latest_at || node.created_at} />
      </div>
      <div className="hermes-lcm-detail-grid">
        <div className="hermes-lcm-detail-cell">
          <div className="hermes-lcm-detail-k">Node id</div>
          <div className="hermes-lcm-detail-v">{String(node.node_id)}</div>
        </div>
        <div className="hermes-lcm-detail-cell">
          <div className="hermes-lcm-detail-k">Source type</div>
          <div className="hermes-lcm-detail-v">{sources.type || node.source_type || "—"}</div>
        </div>
        <div className="hermes-lcm-detail-cell">
          <div className="hermes-lcm-detail-k">Tags</div>
          <div className="hermes-lcm-detail-v">{tags.length ? tags.join(", ") : "—"}</div>
        </div>
        <div className="hermes-lcm-detail-cell">
          <div className="hermes-lcm-detail-k">Entities</div>
          <div className="hermes-lcm-detail-v">{entities.length ? entities.join(", ") : "—"}</div>
        </div>
      </div>
      <h4>Summary</h4>
      <MarkdownText className="hermes-lcm-summary" text={node.summary} />
      {node.expand_hint ? (
        <div className="hermes-lcm-hint">
          <strong>Expand hint: </strong>{node.expand_hint}
        </div>
      ) : null}
      <h4>{`Source links (${sources.type || "?"}, ${(sources.ids || []).length})`}</h4>
      {(() => {
        const isNodes = sources.type === "nodes";
        const items = isNodes ? (sources.nodes || []) : (sources.messages || []);
        if (!items.length) {