Function CompressionBars

dashboard/lcm/src/components.tsx:200–242

(props: { groups?: any[]; onPick?: (g: any) => void })

/** Per-group compression (kept vs saved), rendered as a small inline SVG. */
export function CompressionBars(props: { groups?: any[]; onPick?: (g: any) => void }): React.ReactElement {
  const groups = props.groups || [];
  const onPick = props.onPick;
  if (!groups.length) return <EmptyState className="hermes-lcm-empty">No compression data</EmptyState>;
  const maxSrc = groups.reduce((acc, g) => Math.max(acc, Number(g.source_token_count) || 0), 0) || 1;
  return (
    <div className="hermes-lcm-comp">
      {groups.map(function (g, idx) {
        const src = Number(g.source_token_count) || 0;
        const out = Number(g.token_count) || 0;
        const totalW = Math.max(0.5, (src / maxSrc) * 100);
        const keptW = src > 0 ? (out / src) * totalW : 0;
        const sid = g.session_id != null ? g.session_id : g.key;
        const label = (typeof sid === "string" && /^\d{8}_/.test(sid))
          ? sessionLabel(sid)
          : (g.depth != null ? `node #${g.key} (D${g.depth})` : String(g.key));
        const clickable = typeof onPick === "function";
        return (
          <div
            key={String(g.key) + idx}
            className={"hermes-lcm-comp-row" + (clickable ? " hermes-lcm-clk" : "")}
            onClick={clickable ? function () { onPick!(g); } : undefined}
          >
            <div className="hermes-lcm-comp-head">
              <span className="hermes-lcm-k">{label}</span>
              <span className="hermes-lcm-v">{`${g.ratio || 0}× · ${fmtInt(src)}→${fmtInt(out)}`}</span>
            </div>
            <svg
              viewBox="0 0 100 8"
              preserveAspectRatio="none"
              width="100%"
              height={8}
              className="hermes-lcm-svgbar"
            >
              <rect x={0} y={0} width={totalW} height={8} rx={1.5} className="hermes-lcm-svg-saved" />
              <rect x={0} y={0} width={keptW} height={8} rx={1.5} className="hermes-lcm-svg-kept" />
            </svg>
          </div>
        );
      })}
    </div>
  );
}

// --- tool-result rendering. Known tools get bespoke components; any other
// JSON falls back to a clean key/value view; non-JSON to markdown. -----------