moadim 1.2.0

Loop engine for AI agents — routines over REST, MCP, and a built-in web UI
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

import { useEffect, useRef, useState } from "react";
import { filterLines, highlightSegments, matchCount } from "./logSearch";

export interface LogViewerProps {
  /** Raw log text; `undefined` while loading. */
  content: string | undefined;
  loading: boolean;
  err: string | undefined;
}

function HighlightedLine({ text, query }: { text: string; query: string }) {
  return (
    <>
      {highlightSegments(text, query).map(([isMatch, slice], i) =>
        isMatch ? (
          <mark key={i} className="log-hl">
            {slice}
          </mark>
        ) : (
          <span key={i}>{slice}</span>
        ),
      )}
    </>
  );
}

/** Scrollable log body with a live search box (filter + count + highlight) and auto-tail. */
export function LogViewer({ content, loading, err }: LogViewerProps) {
  const [query, setQuery] = useState("");
  const wrapRef = useRef<HTMLDivElement>(null);

  // Auto-tail: scroll to the bottom whenever the content changes, so newest lines stay visible.
  useEffect(() => {
    const el = wrapRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [content?.length]);

  let body: React.ReactNode = null;
  if (loading) {
    body = (
      <div className="empty">
        <div className="spinner" />
      </div>
    );
  } else if (err !== undefined) {
    body = <div className="logs-error">Error: {err}</div>;
  } else if (content !== undefined) {
    if (content === "") {
      body = <div className="logs-empty">— no logs yet —</div>;
    } else {
      const lines = filterLines(content, query);
      const [hits, total] = matchCount(content, query);
      const countLabel = query.trim() === "" ? `${total} lines` : `${hits} / ${total} matches`;
      body = (
        <>
          <div className="log-search">
            <input
              type="search"
              className="log-search-input"
              placeholder="Search logs…"
              aria-label="Search log lines"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
            />
            {query !== "" && (
              <button
                type="button"
                className="btn btn-ghost btn-sm"
                title="Clear search"
                aria-label="Clear search"
                onClick={() => setQuery("")}
              >
                ✕
              </button>
            )}
            <span className="log-match-count">{countLabel}</span>
          </div>
          <div className="log-lines">
            {lines.map(([ln, text]) => (
              <div className="log-line" key={ln}>
                <span className="log-ln">{ln}</span>
                <span className="log-lc">
                  <HighlightedLine text={text} query={query} />
                </span>
              </div>
            ))}
          </div>
        </>
      );
    }
  }

  return (
    <div className="logs-wrap" ref={wrapRef}>
      {body}
    </div>
  );
}