llv 0.1.0

data/lib/llv/parser.rb

@@ -0,0 +1,211 @@
+# frozen_string_literal: true
+
+module Llv
+  # Turns a raw log line into a structured Event. Stateful per-stream so that
+  # untagged HTTP lines (when the host app hasn't configured
+  # `config.log_tags = [:request_id]`) can still be grouped via Started/Completed
+  # bracketing.
+  class Parser
+    Event = Struct.new(
+      :group_id,    # e.g. "http:<uuid>", "job:<uuid>", "http_synth:1", "untagged"
+      :group_kind,  # :http | :job | :untagged
+      :group_title, # presentational, may be nil until a "Started"/"Performing"
+      :type,        # :request_started | :processing | :parameters | :sql | :sql_source |
+                    # :render | :cache | :request_completed | :job_enqueued |
+                    # :job_performing | :job_performed | :job_retry_stopped | :other
+      :payload,     # Hash of captured fields per type
+      :raw,         # original line content (after stripping leading tags), SGR intact
+      :plain,       # ANSI-stripped version of raw, for matching/measurement
+      keyword_init: true
+    )
+
+    # Rails::TaggedLogging emits "[tag] " (single space) for each tag, so we
+    # only consume one space after each bracket — anything more is the
+    # message's own indentation and is meaningful for classification.
+    TAG_RE = /\A(\[[^\]]*\] )+/
+    UUID_RE = /\A[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\z/
+
+    CLASSIFIERS = [
+      [
+        :request_started,
+        # The optional bracketed segment matches `[WebSocket]` for ActionCable
+        # upgrade lines and similar transport markers Rails sometimes emits.
+        /\AStarted\s+(?<method>[A-Z]+)\s+"(?<path>[^"]+)"(?:\s+\[[^\]]+\])?\s+for\s+(?<ip>\S+)\s+at\s+(?<at>.+)\z/
+      ],
+      [
+        :processing,
+        /\AProcessing by\s+(?<controller>\S+)\s+as\s+(?<format>\S+)\z/
+      ],
+      [
+        :parameters,
+        /\A\s*Parameters:\s*(?<params>.+)\z/
+      ],
+      [
+        :sql_source,
+        /\A\s*↳\s+(?<source>.+)\z/
+      ],
+      [
+        :sql,
+        /\A\s+(?<label>[A-Z][A-Za-z0-9_:]*\s+(?:Load|Count|Exists\??|Pluck|Update|Insert|Create|Destroy|Delete|Maximum|Minimum|Sum|Average))\s+\((?<duration>[\d.]+)(?<unit>ms|s)\)\s+(?<query>.+)\z/
+      ],
+      [
+        :sql,
+        /\A\s+(?<label>SQL|TRANSACTION|SCHEMA|CACHE)\s+\((?<duration>[\d.]+)(?<unit>ms|s)\)\s+(?<query>.+)\z/
+      ],
+      [
+        :render,
+        /\A\s*Rendered\s+(?<template>.+)\z/
+      ],
+      [
+        :cache,
+        /\ACACHE\s+(?<result>HIT|MISS)\s+(?<key>.+)\z/
+      ],
+      [
+        :request_completed,
+        /\ACompleted\s+(?<status>\d+)\s+(?<status_text>[A-Za-z ]+?)\s+in\s+(?<duration_ms>[\d.]+)ms(?:\s+\((?<details>[^)]+)\))?/
+      ],
+      [
+        :job_enqueued,
+        /\AEnqueued\s+(?<job>\S+)\s+\(Job ID:\s+(?<job_id>[\w-]+)\)\s+to\s+(?<adapter>[^(]+)\((?<queue>[^)]+)\)/
+      ],
+      [
+        :job_performing,
+        /\APerforming\s+(?<job>\S+)\s+\(Job ID:\s+(?<job_id>[\w-]+)\)\s+from\s+(?<adapter>[^(]+)\((?<queue>[^)]+)\)/
+      ],
+      [
+        :job_performed,
+        /\APerformed\s+(?<job>\S+)\s+\(Job ID:\s+(?<job_id>[\w-]+)\)\s+from\s+(?<adapter>[^(]+)\((?<queue>[^)]+)\)\s+in\s+(?<duration_ms>[\d.]+)ms/
+      ],
+      [
+        :job_retry_stopped,
+        /\AStopped retrying\s+(?<job>\S+)\s+\(Job ID:\s+(?<job_id>[\w-]+)\)/
+      ]
+    ].freeze
+
+    def initialize
+      @untagged_seq = 0
+      @open_untagged_http = nil
+    end
+
+    def parse(raw_line)
+      raw = raw_line.chomp
+      plain = Ansi.strip(raw)
+      tag_match = plain.match(TAG_RE)
+      tag_prefix_len = tag_match ? tag_match[0].length : 0
+      tags = tag_match ? tag_match[0].scan(/\[([^\]]*)\]/).flatten : []
+
+      raw_body = raw[tag_prefix_len..] || ""
+      plain_body = plain[tag_prefix_len..] || ""
+
+      group_id, group_kind, title = identify_group(tags)
+      type, payload = classify(plain_body)
+
+      group_id, group_kind, title = adjust_for_untagged(group_id, group_kind, title, type, payload)
+
+      title ||= derive_title(type, payload)
+
+      # An HTTP request to /cable is ActionCable. Treat it as its own kind so
+      # the UI can filter it out — these connections are long-lived and noisy.
+      if group_kind == :http && cable_path?(title, payload)
+        group_kind = :cable
+      end
+
+      Event.new(
+        group_id: group_id,
+        group_kind: group_kind,
+        group_title: title,
+        type: type,
+        payload: payload,
+        raw: raw_body,
+        plain: plain_body
+      )
+    end
+
+    private
+
+    def identify_group(tags)
+      return [nil, :untagged, nil] if tags.empty?
+
+      if tags.first == "ActiveJob" && tags.length >= 3
+        job_class = tags[1]
+        job_uuid = tags[2]
+        return ["job:#{job_uuid}", :job, job_class]
+      end
+
+      if tags.length == 1 && tags.first.match?(UUID_RE)
+        return ["http:#{tags.first}", :http, nil]
+      end
+
+      [nil, :untagged, nil]
+    end
+
+    def classify(body)
+      CLASSIFIERS.each do |type, regex|
+        m = body.match(regex)
+        next unless m
+
+        payload = m.named_captures.transform_keys(&:to_sym)
+        payload = normalise_payload(type, payload)
+        return [type, payload]
+      end
+
+      [:other, {}]
+    end
+
+    def normalise_payload(type, payload)
+      case type
+      when :sql
+        if payload[:unit] == "s" && payload[:duration]
+          payload[:duration_ms] = (payload[:duration].to_f * 1000).round(2)
+        elsif payload[:duration]
+          payload[:duration_ms] = payload[:duration].to_f
+        end
+        payload.delete(:unit)
+        payload.delete(:duration)
+      when :request_completed, :job_performed
+        payload[:duration_ms] = payload[:duration_ms].to_f if payload[:duration_ms]
+        payload[:status] = payload[:status].to_i if payload[:status]
+      end
+      payload
+    end
+
+    def adjust_for_untagged(group_id, group_kind, title, type, payload)
+      return [group_id, group_kind, title] unless group_kind == :untagged
+
+      case type
+      when :request_started
+        @untagged_seq += 1
+        @open_untagged_http = "http_synth:#{@untagged_seq}"
+        ["#{@open_untagged_http}", :http, "#{payload[:method]} #{payload[:path]}"]
+      when :request_completed
+        if @open_untagged_http
+          finishing = @open_untagged_http
+          @open_untagged_http = nil
+          [finishing, :http, nil]
+        else
+          ["untagged", :untagged, nil]
+        end
+      else
+        if @open_untagged_http
+          [@open_untagged_http, :http, nil]
+        else
+          ["untagged", :untagged, nil]
+        end
+      end
+    end
+
+    def derive_title(type, payload)
+      case type
+      when :request_started
+        "#{payload[:method]} #{payload[:path]}" if payload[:method]
+      when :job_performing, :job_performed, :job_enqueued, :job_retry_stopped
+        payload[:job]
+      end
+    end
+
+    def cable_path?(title, payload)
+      path = payload[:path] || title&.split(" ", 2)&.last
+      path&.start_with?("/cable")
+    end
+  end
+end

data/lib/llv/public/app.js

@@ -0,0 +1,198 @@
+(() => {
+  const listEl = document.getElementById("list");
+  const detailEl = document.getElementById("detail");
+  const filterEl = document.getElementById("filter");
+  const statusEl = document.getElementById("status");
+  const rowTpl = document.getElementById("row-template");
+  const kindButtons = document.querySelectorAll(".kind-toggle button");
+
+  const state = {
+    groups: new Map(),  // id -> summary
+    order: [],          // newest-first
+    selectedId: null,
+    // Kinds the user has toggled on. Items with a kind not in this set are
+    // hidden. "untagged" has no toggle and is always shown.
+    enabledKinds: new Set(["http", "job", "cable"]),
+    filter: ""
+  };
+
+  function statusClass(status, kind) {
+    if (status === "stopped") return "err";
+    if (typeof status === "number") {
+      if (status >= 500) return "err";
+      if (status >= 400) return "warn";
+      if (status >= 200) return "ok";
+    }
+    if (status === "ok") return "ok";
+    return "";
+  }
+
+  function fmtDuration(ms) {
+    if (ms == null) return "";
+    if (ms < 1) return `${ms.toFixed(2)}ms`;
+    if (ms < 1000) return `${ms.toFixed(1)}ms`;
+    return `${(ms / 1000).toFixed(2)}s`;
+  }
+
+  function rowMatches(summary) {
+    // Untagged items have no toggle button and are always shown.
+    if (summary.kind !== "untagged" && !state.enabledKinds.has(summary.kind)) return false;
+    if (state.filter && !(summary.title || "").toLowerCase().includes(state.filter)) return false;
+    return true;
+  }
+
+  function renderList() {
+    listEl.innerHTML = "";
+    for (const id of state.order) {
+      const summary = state.groups.get(id);
+      if (!summary) continue;
+      if (!rowMatches(summary)) continue;
+
+      const frag = rowTpl.content.cloneNode(true);
+      const row = frag.querySelector(".row");
+      row.dataset.id = id;
+      row.dataset.kind = summary.kind;
+      row.dataset.statusClass = statusClass(summary.status, summary.kind);
+      if (id === state.selectedId) row.classList.add("active");
+
+      row.querySelector(".glyph").textContent =
+        summary.kind === "job" ? "⚙" :
+        summary.kind === "cable" ? "≋" : "▶";
+      row.querySelector(".title").textContent = summary.title || id;
+      row.querySelector(".status-pill").textContent = summary.status ?? (summary.finished_at ? "" : "…");
+      row.querySelector(".duration").textContent = fmtDuration(summary.duration_ms);
+      row.querySelector(".count").textContent = `${summary.line_count} lines`;
+      row.addEventListener("click", () => selectGroup(id));
+      listEl.appendChild(row);
+    }
+  }
+
+  function updateRow(summary) {
+    const row = listEl.querySelector(`.row[data-id="${CSS.escape(summary.id)}"]`);
+    if (!row) return;
+    row.dataset.statusClass = statusClass(summary.status, summary.kind);
+    row.querySelector(".title").textContent = summary.title || summary.id;
+    row.querySelector(".status-pill").textContent = summary.status ?? (summary.finished_at ? "" : "…");
+    row.querySelector(".duration").textContent = fmtDuration(summary.duration_ms);
+    row.querySelector(".count").textContent = `${summary.line_count} lines`;
+  }
+
+  function selectGroup(id) {
+    state.selectedId = id;
+    for (const row of listEl.querySelectorAll(".row")) {
+      row.classList.toggle("active", row.dataset.id === id);
+    }
+    fetch(`/groups/${encodeURIComponent(id)}`).then(r => r.json()).then(({ group }) => {
+      if (!group || state.selectedId !== id) return;
+      renderDetail(group);
+    });
+  }
+
+  function renderDetail(group) {
+    const head = document.createElement("div");
+    head.innerHTML = `<h2></h2><div class="subhead"></div>`;
+    head.querySelector("h2").textContent = group.title || group.id;
+    head.querySelector(".subhead").textContent =
+      `${group.kind} · ${group.line_count} lines · ${fmtDuration(group.duration_ms)} · ${group.status ?? "(in flight)"} · ${group.id}`;
+
+    const lines = document.createElement("div");
+    lines.className = "lines";
+
+    for (const line of group.lines) {
+      const lineEl = document.createElement("div");
+      lineEl.className = "line";
+      lineEl.dataset.type = line.type;
+      const badge = document.createElement("span");
+      badge.className = "badge";
+      badge.textContent = line.type;
+      const body = document.createElement("span");
+      body.className = "body";
+      body.innerHTML = line.html;
+      lineEl.appendChild(badge);
+      lineEl.appendChild(body);
+
+      if (line.type === "sql") {
+        lineEl.addEventListener("click", () => lineEl.classList.toggle("open"));
+      }
+      lines.appendChild(lineEl);
+    }
+
+    detailEl.innerHTML = "";
+    detailEl.appendChild(head);
+    detailEl.appendChild(lines);
+  }
+
+  function applySummary(summary, { prepend = false } = {}) {
+    const existing = state.groups.has(summary.id);
+    state.groups.set(summary.id, summary);
+    if (!existing) {
+      if (prepend) state.order.unshift(summary.id);
+      else state.order.push(summary.id);
+    }
+    if (existing) {
+      updateRow(summary);
+    } else {
+      renderList();
+    }
+    if (state.selectedId === summary.id) {
+      fetch(`/groups/${encodeURIComponent(summary.id)}`).then(r => r.json()).then(({ group }) => {
+        if (group && state.selectedId === summary.id) renderDetail(group);
+      });
+    }
+  }
+
+  function loadInitial() {
+    fetch("/groups?limit=500").then(r => r.json()).then(({ groups }) => {
+      state.order = groups.map(g => g.id);
+      state.groups = new Map(groups.map(g => [g.id, g]));
+      renderList();
+    });
+  }
+
+  function connectStream() {
+    const es = new EventSource("/events");
+    es.addEventListener("open", () => {
+      statusEl.textContent = "live";
+      statusEl.className = "status connected";
+    });
+    es.addEventListener("error", () => {
+      statusEl.textContent = "disconnected";
+      statusEl.className = "status error";
+    });
+    const onUpdate = (e) => {
+      const summary = JSON.parse(e.data);
+      applySummary(summary, { prepend: e.type === "group_created" });
+    };
+    es.addEventListener("group_created", onUpdate);
+    es.addEventListener("group_updated", onUpdate);
+    es.addEventListener("group_completed", onUpdate);
+    es.addEventListener("group_evicted", (e) => {
+      const { id } = JSON.parse(e.data);
+      state.groups.delete(id);
+      state.order = state.order.filter(x => x !== id);
+      renderList();
+    });
+  }
+
+  filterEl.addEventListener("input", () => {
+    state.filter = filterEl.value.trim().toLowerCase();
+    renderList();
+  });
+
+  kindButtons.forEach(btn => {
+    btn.addEventListener("click", () => {
+      const kind = btn.dataset.kind;
+      if (state.enabledKinds.has(kind)) {
+        state.enabledKinds.delete(kind);
+      } else {
+        state.enabledKinds.add(kind);
+      }
+      btn.classList.toggle("active", state.enabledKinds.has(kind));
+      btn.setAttribute("aria-pressed", state.enabledKinds.has(kind).toString());
+      renderList();
+    });
+  });
+
+  loadInitial();
+  connectStream();
+})();

data/lib/llv/public/index.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>llv — local log viewer</title>
+  <link rel="stylesheet" href="/styles.css" />
+</head>
+<body>
+  <header>
+    <h1>llv</h1>
+    <div class="filters">
+      <input type="search" id="filter" placeholder="filter title…" />
+      <div class="kind-toggle" role="group" aria-label="kind filters">
+        <button data-kind="http" class="active" aria-pressed="true">http</button>
+        <button data-kind="job" class="active" aria-pressed="true">jobs</button>
+        <button data-kind="cable" class="active" aria-pressed="true">cable</button>
+      </div>
+      <span class="status" id="status">connecting…</span>
+    </div>
+  </header>
+  <main>
+    <aside id="list" aria-label="requests"></aside>
+    <section id="detail">
+      <div class="empty">select an item on the left</div>
+    </section>
+  </main>
+  <template id="row-template">
+    <button class="row" type="button">
+      <span class="glyph"></span>
+      <span class="title"></span>
+      <span class="meta">
+        <span class="status-pill"></span>
+        <span class="duration"></span>
+        <span class="count"></span>
+      </span>
+    </button>
+  </template>
+  <script src="/app.js"></script>
+</body>
+</html>

data/lib/llv/public/styles.css

@@ -0,0 +1,239 @@
+:root {
+  color-scheme: dark;
+  --bg: #0f1115;
+  --panel: #161922;
+  --panel-2: #1d2230;
+  --border: #262b3a;
+  --text: #d7dae0;
+  --muted: #7b8190;
+  --accent: #6cbcff;
+  --ok: #6fcf97;
+  --warn: #f2c14e;
+  --err: #ef6c6c;
+  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font: 13px/1.5 var(--mono);
+}
+
+header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+
+header h1 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+
+.filters {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.filters input[type="search"] {
+  flex: 1;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 6px 10px;
+  border-radius: 6px;
+  font: inherit;
+}
+
+.kind-toggle {
+  display: inline-flex;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.kind-toggle button {
+  background: transparent;
+  border: 0;
+  color: var(--muted);
+  padding: 6px 10px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.kind-toggle button.active {
+  background: var(--panel-2);
+  color: var(--text);
+}
+
+.status { color: var(--muted); font-size: 12px; }
+.status.connected { color: var(--ok); }
+.status.error { color: var(--err); }
+
+main {
+  display: grid;
+  grid-template-columns: 360px 1fr;
+  height: calc(100vh - 49px);
+}
+
+#list {
+  border-right: 1px solid var(--border);
+  overflow-y: auto;
+  background: var(--panel);
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 18px 1fr auto;
+  gap: 6px 10px;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
+  padding: 8px 12px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.row:hover { background: var(--panel-2); }
+.row.active { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); }
+
+.row .glyph {
+  color: var(--accent);
+  text-align: center;
+}
+
+.row[data-kind="job"] .glyph { color: var(--warn); }
+.row[data-kind="cable"] .glyph { color: var(--muted); }
+.row[data-kind="cable"] { opacity: 0.85; }
+
+.row .title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.row .meta {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  color: var(--muted);
+  font-size: 11px;
+  grid-column: 2 / 4;
+  margin-top: 2px;
+}
+
+.status-pill {
+  padding: 1px 6px;
+  border-radius: 8px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+}
+
+.row[data-status-class="ok"] .status-pill { color: var(--ok); border-color: var(--ok); }
+.row[data-status-class="warn"] .status-pill { color: var(--warn); border-color: var(--warn); }
+.row[data-status-class="err"] .status-pill { color: var(--err); border-color: var(--err); }
+
+#detail {
+  overflow-y: auto;
+  padding: 14px 18px;
+}
+
+#detail .empty {
+  color: var(--muted);
+  text-align: center;
+  padding: 80px 0;
+}
+
+#detail h2 {
+  margin: 0 0 4px;
+  font-size: 14px;
+}
+
+#detail .subhead {
+  color: var(--muted);
+  font-size: 12px;
+  margin-bottom: 16px;
+}
+
+.lines {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.line {
+  display: grid;
+  grid-template-columns: 90px 1fr;
+  gap: 10px;
+  padding: 3px 6px;
+  border-radius: 3px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.line:hover { background: var(--panel); }
+
+.line .badge {
+  color: var(--muted);
+  font-size: 10px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  padding-top: 2px;
+}
+
+.line[data-type="sql"] .badge { color: var(--accent); }
+.line[data-type="sql_source"] .badge { color: var(--muted); }
+.line[data-type="render"] .badge { color: var(--ok); }
+.line[data-type="request_completed"] .badge,
+.line[data-type="job_performed"] .badge { color: var(--ok); }
+.line[data-type="job_retry_stopped"] .badge { color: var(--err); }
+
+.line[data-type="sql_source"] {
+  display: none;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.line[data-type="sql"].open + .line[data-type="sql_source"] { display: grid; }
+
+.line[data-type="sql"] { cursor: pointer; }
+.line[data-type="sql"] .body::before { content: "▸ "; color: var(--muted); }
+.line[data-type="sql"].open .body::before { content: "▾ "; }
+
+/* ANSI colour classes — reuse Rails' own SGR output */
+.ansi-bold { font-weight: 700; }
+.ansi-italic { font-style: italic; }
+.ansi-underline { text-decoration: underline; }
+.ansi-fg-black { color: #5c6370; }
+.ansi-fg-red { color: #ef6c6c; }
+.ansi-fg-green { color: #6fcf97; }
+.ansi-fg-yellow { color: #f2c14e; }
+.ansi-fg-blue { color: #6cbcff; }
+.ansi-fg-magenta { color: #c792ea; }
+.ansi-fg-cyan { color: #56b6c2; }
+.ansi-fg-white { color: #d7dae0; }
+.ansi-fg-bright-black { color: #7b8190; }
+.ansi-fg-bright-red { color: #ff8888; }
+.ansi-fg-bright-green { color: #98e6b1; }
+.ansi-fg-bright-yellow { color: #ffd87a; }
+.ansi-fg-bright-blue { color: #8fd0ff; }
+.ansi-fg-bright-magenta { color: #e0b6ff; }
+.ansi-fg-bright-cyan { color: #88d8e0; }
+.ansi-fg-bright-white { color: #ffffff; }