+ {lines.map((line, i) => {
+ if (!line) return
;
+ if (!re) {
+ return (
+
handleMouseUp(i, line)}
+ style={{ color: "#94a3b8", padding: "1px 0" }}>
+ {line}
+
+ );
+ }
+ const m = re.exec(line);
+ if (!m) {
+ return (
+
handleMouseUp(i, line)}
+ style={{ color: "#374151", borderLeft: "2px solid rgba(255,255,255,0.04)", paddingLeft: 8, padding: "1px 0 1px 8px" }}>
+ {line}
+
+ );
+ }
+ // Render matched line with TIME/ENTRY segments highlighted
+ const groups = m.groups || {};
+ const TIME = groups.TIME !== undefined ? groups.TIME : null;
+ const ENTRY = groups.ENTRY !== undefined ? groups.ENTRY : null;
+ const timeIdx = TIME != null ? line.indexOf(TIME) : -1;
+ const entryIdx = ENTRY != null ? line.indexOf(ENTRY, timeIdx >= 0 ? timeIdx + TIME.length : 0) : -1;
+
+ const parts = [];
+ let cur = 0;
+ const addPart = (end, color, label) => {
+ if (cur < end) {
+ parts.push({ text: line.slice(cur, end), color, label });
+ cur = end;
+ }
+ };
+ // Build parts in order
+ const segs = [];
+ if (TIME != null && timeIdx >= 0) segs.push({ start: timeIdx, end: timeIdx + TIME.length, color: "#f59e0b", label: "TIME" });
+ if (ENTRY != null && entryIdx >= 0) segs.push({ start: entryIdx, end: entryIdx + ENTRY.length, color: "#86efac", label: "ENTRY" });
+ segs.sort((a, b) => a.start - b.start);
+ for (const seg of segs) {
+ if (seg.start > cur) parts.push({ text: line.slice(cur, seg.start), color: "#4b5563", label: null });
+ parts.push({ text: line.slice(seg.start, seg.end), color: seg.color, label: seg.label });
+ cur = seg.end;
+ }
+ if (cur < line.length) parts.push({ text: line.slice(cur), color: "#4b5563", label: null });
+
+ return (
+
handleMouseUp(i, line)}
+ style={{ display: "flex", flexWrap: "wrap", gap: 0, alignItems: "baseline", padding: "1px 0" }}>
+ {parts.map((p, pi) => (
+ {p.text}
+ ))}
+
+ );
+ })}
+
+ {/* ββ Header ββ */}
+
setExpanded(v => !v)}
+ style={{
+ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px",
+ cursor: "pointer", background: expanded ? "rgba(129,140,248,0.04)" : "transparent",
+ borderBottom: expanded ? "1px solid rgba(255,255,255,0.07)" : "none",
+ }}
+ >
+ {/* index pill */}
+ {String(index + 1).padStart(2, "0")}
+
+ {/* log name */}
+
+ {entry.log_name || unnamed entry }
+
+
+ {/* badges */}
+ {entry.log_type}
+ {outputs.collect && collect β }
+ {outputs.activate && activate β }
+ {outputs.deactivate && deactivate β }
+ {entry.data_extraction_regex && !reErr && matchCount && (
+ 0 ? "green" : "red"}>
+ {matchCount.matched}/{matchCount.total} lines
+
+ )}
+
+ { e.stopPropagation(); onDuplicate(); }} title="Duplicate"
+ style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted)", fontSize: 13, padding: "2px 6px" }}>β
+ { e.stopPropagation(); onRemove(); }} title="Remove"
+ style={{ background: "none", border: "none", cursor: "pointer", color: "#f87171", fontSize: 15, padding: "2px 6px" }}>Γ
+ {expanded ? "β²" : "βΌ"}
+
+
+ {expanded && (
+
+
+ {/* ββ Row 1: Log Name / Type / Data Unit ββ */}
+
+
+
Log Name *
+
set("log_name", e.target.value)}
+ placeholder="e.g. syslog, cpu_usage" style={inputStyle} />
+
+
+
Type
+
+ {["text", "chart"].map(t => (
+ set("log_type", t)} style={{
+ padding: "9px 14px", borderRadius: 7, cursor: "pointer", border: "1px solid",
+ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600,
+ background: entry.log_type === t ? (t === "text" ? "rgba(34,211,238,0.14)" : "rgba(167,139,250,0.14)") : "rgba(255,255,255,0.03)",
+ color: entry.log_type === t ? (t === "text" ? "#22d3ee" : "#a78bfa") : "var(--muted)",
+ borderColor: entry.log_type === t ? (t === "text" ? "rgba(34,211,238,0.4)" : "rgba(167,139,250,0.4)") : "var(--border)",
+ transition: "all 0.12s",
+ }}>{t === "text" ? "π text" : "π chart"}
+ ))}
+
+
+ {entry.log_type === "chart" && (
+
+
Unit
+
set("data_unit", e.target.value)}
+ placeholder="%, Β°C, msβ¦" style={{ ...inputStyle, width: 90 }} />
+
+ )}
+
+
+ {/* ββ Description ββ */}
+