Function MessageDetail

dashboard/lcm/src/components.tsx:583–682

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

// --- detail panels ---------------------------------------------------------

export function MessageDetail(props: {
  data: any;
  onOpenNode: (id: any) => void;
  onOpenSession: (id: any, opts?: any) => void;
}): React.ReactElement {
  const d = props.data || {};
  const message = d.message;
  const session = d.session;
  if (!message) return <EmptyState className="hermes-lcm-empty">Message not found</EmptyState>;
  const sessionNodes = (session && session.summary_nodes) || [];
  // Prefer the backend's exact message→summary linkage (summary_node_ids,
  // additive field) and fall back to same-session summaries when absent.
  const linkedIds = parseJsonArray(message.summary_node_ids).map(String);
  const linkedSet: Record<string, boolean> = {};
  linkedIds.forEach(function (id) { linkedSet[id] = true; });
  const linkedNodes = linkedIds.length
    ? sessionNodes.filter(function (node: any) { return linkedSet[String(node.node_id)]; })
    : [];
  const hasExactLinks = linkedIds.length > 0;
  const relatedNodes = hasExactLinks ? linkedNodes : sessionNodes;
  const unresolvedLinkIds = hasExactLinks
    ? linkedIds.filter(function (id) {
        return !relatedNodes.some(function (node: any) { return String(node.node_id) === id; });
      })
    : [];
  return (
    <div className="hermes-lcm-detail">
      <div className="hermes-lcm-detail-meta">
        <span className="hermes-lcm-tag">{message.role || "message"}</span>
        {message.source ? <span className="hermes-lcm-tag hermes-lcm-tag-src">{message.source}</span> : null}
        <span className="hermes-lcm-tag">{`#${message.store_id}`}</span>
        <TimeText className="hermes-lcm-dim" epoch={message.timestamp} />
        {message.token_estimate ? <span className="hermes-lcm-dim">{`${fmtInt(message.token_estimate)} tok`}</span> : null}
        <button
          type="button"
          className="hermes-lcm-btn"
          onClick={function () { props.onOpenSession(message.session_id, { activeMessageId: message.store_id }); }}
        >{sessionLabel(message.session_id)}</button>
      </div>
      <div className="hermes-lcm-msg-actions">
        <CopyButton text={message.content} label="Copy message" title="Copy full message content" />
      </div>
      <div className="hermes-lcm-detail-grid">
        <div className="hermes-lcm-detail-cell">
          <div className="hermes-lcm-detail-k">Session</div>
          <div className="hermes-lcm-detail-v">{short(message.session_id, 48)}</div>
        </div>
        <div className="hermes-lcm-detail-cell">
          <div className="hermes-lcm-detail-k">Absolute time</div>
          <div className="hermes-lcm-detail-v">{fmtAbsoluteTime(message.timestamp) || "—"}</div>
        </div>
        <div className="hermes-lcm-detail-cell">
          <div className="hermes-lcm-detail-k">Token estimate</div>
          <div className="hermes-lcm-detail-v">{fmtInt(message.token_estimate || 0)}</div>
        </div>
        <div className="hermes-lcm-detail-cell">
          <div className="hermes-lcm-detail-k">{hasExactLinks ? "Linked summaries" : "Related summaries"}</div>
          <div className="hermes-lcm-detail-v">