Function SearchResultCard

dashboard/lcm/src/components.tsx:449–501

(props: {
  key?: React.Key;
  item: any;
  kind: string;
  query: any;
  selected?: boolean;
  resultRef?: (el: HTMLElement | null) => void;
  onFocus: () => void;
  onOpen: () => void;
})

// --- list rows -------------------------------------------------------------

export function SearchResultCard(props: {
  key?: React.Key;
  item: any;
  kind: string;
  query: any;
  selected?: boolean;
  resultRef?: (el: HTMLElement | null) => void;
  onFocus: () => void;
  onOpen: () => void;
}): React.ReactElement {
  const item = props.item;
  const isMessage = props.kind === "message";
  const title = isMessage
    ? short(item.session_id || "", 42)
    : short(summaryTitle(item.summary || ""), 90);
  const preview = isMessage
    ? renderSearchSnippet(item.snippet || short(item.content, 240), props.query)
    : renderSearchSnippet(item.snippet || short(stripMd(item.summary), 240), props.query);
  const keyValue = props.kind + ":" + String(isMessage ? item.store_id : item.node_id);
  return (
    <button
      type="button"
      ref={props.resultRef as any}
      className={"hermes-lcm-result hermes-lcm-result-btn" + (props.selected ? " hermes-lcm-selected" : "")}
      onClick={props.onOpen}
      onFocus={props.onFocus}
      onMouseEnter={props.onFocus}
    >
      <div className="hermes-lcm-row-meta">
        <span className="hermes-lcm-pill hermes-lcm-pill-accent">
          {isMessage ? (item.role || "message") : ("D" + item.depth)}
        </span>
        {!isMessage && item.category ? <span className="hermes-lcm-pill">{item.category}</span> : null}
        {isMessage && item.source ? <span className="hermes-lcm-pill">{item.source}</span> : null}
        {isMessage && item.tool_name ? <span className="hermes-lcm-pill">{short(item.tool_name, 24)}</span> : null}
        <span className="hermes-lcm-dim">{keyValue}</span>
        {isMessage
          ? <TimeText className="hermes-lcm-dim" epoch={item.timestamp} />
          : <TimeText className="hermes-lcm-dim" epoch={item.latest_at || item.created_at} />}
      </div>
      <div className="hermes-lcm-row-title">{title}</div>
      <div className="hermes-lcm-msg-body">{preview}</div>
      <div className="hermes-lcm-result-foot">
        <span className="hermes-lcm-dim">
          {isMessage
            ? `${fmtInt(item.token_estimate)} tok · ${sessionLabel(item.session_id)}`
            : `${fmtInt(item.source_token_count)}→${fmtInt(item.token_count)} tok · ${sessionLabel(item.session_id)}`}
        </span>
        <span className="hermes-lcm-dim">{isMessage ? "Open full message" : "Open source links"}</span>
      </div>
    </button>
  );
}

export function MessageItem(props: {
  key?: React.Key;