| 1020 | ...(ctx?.contextWindow ? [["Context", `${ctx.percent !== null ? `${ctx.percent.toFixed(1)}%` : "?"} / ${formatCompact(ctx.contextWindow)}`]] : []), |
| 1021 | ]; |
| 1022 | const section = ( |
| 1023 | title: string, |
| 1024 | sectionRows: string[][], |
| 1025 | valueAlign: "left" | "right" = "left", |
| 1026 | compact = false, |
| 1027 | ) => ( |
| 1028 | <div style={{ minWidth: 0 }}> |
| 1029 | <div style={{ fontSize: 11, fontWeight: 700, color: "var(--text)", marginBottom: 6 }}>{title}</div> |
| 1030 | <div style={{ |
| 1031 | display: "grid", |
| 1032 | gridTemplateColumns: compact ? "max-content max-content" : "auto minmax(0, 1fr)", |
| 1033 | columnGap: compact ? 14 : 12, |
| 1034 | rowGap: 4, |
| 1035 | justifyContent: compact ? "start" : undefined, |
| 1036 | }}> |
| 1037 | {sectionRows.map(([label, value]) => ( |
| 1038 | <div key={`${title}:${label}`} style={{ display: "contents" }}> |
| 1039 | <div style={{ color: "var(--text-dim)", whiteSpace: "nowrap" }}>{label}</div> |
| 1040 | <div style={{ |
| 1041 | color: "var(--text-muted)", |
| 1042 | minWidth: 0, |
| 1043 | overflowWrap: compact ? "normal" : "anywhere", |
| 1044 | textAlign: valueAlign, |
| 1045 | whiteSpace: valueAlign === "right" ? "nowrap" : "normal", |
| 1046 | }}>{value}</div> |
| 1047 | </div> |
| 1048 | ))} |
| 1049 | </div> |
| 1050 | </div> |
| 1051 | ); |
| 1052 | const copyButton = (field: SessionCopyField, value: string) => { |
| 1053 | const copied = copiedSessionField === field; |
| 1054 | return ( |