@hienlh/ppm 0.23.12 → 0.23.14

package/src/web/components/logs/logs-state.ts

@@ -0,0 +1,93 @@
+/**
+ * What the Logs shell hands its panes: the filter and the records it read, the selection, and
+ * the actions that cross panes (Show in Logs, switching sub-tab). The selection is held by row
+ * key — the first record's id, which stays put when a live copy folds into the row — and it is
+ * dropped whenever the filter changes, as a selection in a list that just changed would point
+ * at lines the person can no longer see.
+ */
+import type { MutableRefObject } from "react";
+import { keySpan } from "@/lib/logs/logs-view-model";
+import type { LogRow } from "@/lib/logs/logs-view-model";
+import type { LogEntry, LogFilter, LogRange } from "../../../shared/logs-model";
+import type { LogsFeed } from "./use-logs-feed";
+import type { LogsIssues } from "./use-logs-issues";
+import type { LogsView } from "./open-logs";
+
+export interface LogsSelection {
+  keys: ReadonlySet<string>;
+  /** Where Shift-click and a phone's second tap extend from. */
+  anchor: string | null;
+  /** The keyboard's row. */
+  cursor: string | null;
+}
+
+export const NO_SELECTION: LogsSelection = { keys: new Set(), anchor: null, cursor: null };
+
+/** A request to scroll a row into view; `seq` makes asking for the same row twice count. */
+export interface RevealRequest {
+  key: string;
+  seq: number;
+}
+
+export interface LogsPaneProps {
+  feed: LogsFeed;
+  rows: LogRow[];
+  filter: LogFilter;
+  /** Merges into the filter and drops the selection. */
+  setFilter(patch: Partial<LogFilter>): void;
+  /** Back to the default levels, tags, search, chat and range; the source stays. */
+  clearFilters(): void;
+  range: LogRange;
+  setRange(range: LogRange): void;
+  paused: boolean;
+  setPaused(paused: boolean): void;
+  follow: boolean;
+  setFollow(follow: boolean): void;
+  sel: LogsSelection;
+  setSel(sel: LogsSelection): void;
+  utc: boolean;
+  wrap: boolean;
+  reveal: RevealRequest | null;
+  /** Where the list was left, so it opens there again after Issues or Report. */
+  listTop: MutableRefObject<string | null>;
+  goTo(view: LogsView): void;
+  togglePrefs(): void;
+}
+
+export interface CrossPaneProps {
+  utc: boolean;
+  phone: boolean;
+  issues: LogsIssues;
+  goTo(view: LogsView): void;
+  showInLogs(entries: readonly LogEntry[]): void;
+}
+
+/** Selects `key` alone. */
+export function selectOne(key: string): LogsSelection {
+  return { keys: new Set([key]), anchor: key, cursor: key };
+}
+
+/** The rows from the anchor to `key`, added to what is selected when `add` is set. */
+export function selectTo(sel: LogsSelection, rowKeys: readonly string[], key: string, add = false): LogsSelection {
+  const anchor = sel.anchor ?? key;
+  const span = keySpan(rowKeys, anchor, key);
+  return { keys: new Set(add ? [...sel.keys, ...span] : span), anchor, cursor: key };
+}
+
+export function toggleOne(sel: LogsSelection, key: string): LogsSelection {
+  const keys = new Set(sel.keys);
+  if (keys.has(key)) keys.delete(key);
+  else keys.add(key);
+  return { keys, anchor: key, cursor: key };
+}
+
+/** The selected rows in list order. */
+export function selectedRows(rows: readonly LogRow[], sel: LogsSelection): LogRow[] {
+  return sel.keys.size ? rows.filter((r) => sel.keys.has(r.key)) : [];
+}
+
+/** Whether the filter is anything but what Logs opens with (the source aside). */
+export function filterChanged(filter: LogFilter, range: LogRange): boolean {
+  const l = filter.levels;
+  return !l.error || !l.warn || !l.info || l.debug || !!filter.chat || !!filter.q || filter.tagsOff.length > 0 || range !== "1h";
+}

package/src/web/components/logs/logs-tab.tsx

@@ -0,0 +1,4 @@
+/** Logs as a tab: the phone route, since the window layer does not render below `md`. */
+import { LogsApp } from "./logs-app";
+
+export const LogsTab = () => <LogsApp mode="phone" />;

package/src/web/components/logs/logs-ui.tsx

@@ -0,0 +1,104 @@
+/**
+ * Small pieces every Logs pane draws the same way: a source's icon, a record's message with its
+ * chat chips and search hits, the compact one-line form used by an issue's evidence and a
+ * report's snippets, and the Live / Paused indicator.
+ */
+import { Fragment, type ElementType, type ReactNode } from "react";
+import {
+  Activity, Bot, CalendarClock, Cloud, Folder, Globe, Layers, Pause, Puzzle, Terminal, Wifi,
+} from "@/lib/icons";
+import { clockTime, messagePieces, splitHits, type LogRow } from "@/lib/logs/logs-view-model";
+import type { LogLevel, LogSourceId } from "../../../shared/logs-model";
+
+export const SOURCE_ICONS: Readonly<Record<LogSourceId | "all", ElementType>> = {
+  all: Layers,
+  ai: Bot,
+  shell: Terminal,
+  server: Activity,
+  ext: Puzzle,
+  files: Folder,
+  auto: CalendarClock,
+  tunnel: Cloud,
+  browser: Globe,
+};
+
+export const LEVEL_TEXT: Readonly<Record<LogLevel, string>> = {
+  debug: "DEBUG", info: "INFO", warn: "WARN", error: "ERROR", fatal: "FATAL",
+};
+
+/** `text` with every search hit marked. */
+export function Hits({ text, re }: { text: string; re: RegExp | null }) {
+  if (!re) return <>{text}</>;
+  return (
+    <>
+      {splitHits(text, re).map((p, i) => (p.hit ? <mark key={i} className="lg-hit">{p.text}</mark> : <Fragment key={i}>{p.text}</Fragment>))}
+    </>
+  );
+}
+
+/**
+ * A message as a row shows it: `session=<id>` becomes the chat's name, which filters to that
+ * chat when clicked; `key=` and quoted values are toned down.
+ */
+export function MessageText({ msg, re, titles, onChat }: {
+  msg: string;
+  re: RegExp | null;
+  titles: Readonly<Record<string, string>>;
+  onChat?: (sid: string) => void;
+}) {
+  return (
+    <>
+      {messagePieces(msg).map((p, i) => {
+        if (p.kind === "chat") {
+          const name = titles[p.sid] ?? p.sid.slice(0, 8);
+          return onChat ? (
+            <button key={i} type="button" className="lg-sess" title={`Show only this chat · ${p.sid}`} onClick={() => onChat(p.sid)}>
+              {name}
+            </button>
+          ) : <span key={i} className="lg-sess">{name}</span>;
+        }
+        if (p.kind === "quote") return <span key={i} className="q"><Hits text={p.text} re={re} /></span>;
+        if (p.kind === "key") return <span key={i} className="k"><Hits text={p.text} re={re} /></span>;
+        return <Hits key={i} text={p.text} re={re} />;
+      })}
+    </>
+  );
+}
+
+const UUID = /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/g;
+
+/** One record on one line, chat ids cut to eight characters: an issue's evidence, a snippet's lines. */
+export function CompactLine({ row, utc, ctx, trim }: { row: LogRow; utc: boolean; ctx?: boolean; trim?: boolean }) {
+  const e = row.entry;
+  const msg = e.msg.replace(UUID, (u) => u.slice(0, 8));
+  const text = trim && msg.length > 150 ? `${msg.slice(0, 149)}…` : msg;
+  return (
+    <div className={ctx ? "r ctx" : "r"}>
+      <span className="t">{clockTime(e.ts, utc)}</span>{"  "}
+      <span className={e.lv}>{LEVEL_TEXT[e.lv].padEnd(5, " ")}</span>{" "}
+      <span className="g">{e.tag}</span>{"  "}
+      {text}
+      {row.count > 1 && <span className="t">{` ×${row.count}`}</span>}
+      {!!e.more?.length && <span className="t">{` +${e.more.length} lines`}</span>}
+    </div>
+  );
+}
+
+export function LiveIndicator({ paused, pending }: { paused: boolean; pending: number }) {
+  return (
+    <span className="flex items-center gap-1.5 whitespace-nowrap text-[10px] text-text-subtle" data-testid="logs-live">
+      {paused ? <Pause className="size-3 text-warning" /> : <Wifi className="size-3 text-success" />}
+      <span>{paused ? `Paused${pending ? ` · ${pending.toLocaleString("en-US")} new` : ""}` : "Live"}</span>
+    </span>
+  );
+}
+
+/** A labelled group of chips, as the phone's filter sheet lays them out. */
+export function SheetSection({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <>
+      <div className="lg-sheet-sec">{title}</div>
+      <div className="lg-sheet-chips">{children}</div>
+    </>
+  );
+}

package/src/web/components/logs/logs-window-content.tsx

@@ -0,0 +1,13 @@
+/**
+ * Floating-window body for Logs. The open sub-tab rides on the window's payload, so a reload
+ * comes back to it; the payload is untrusted (it survives in localStorage), hence the parse.
+ */
+import { useWindowStore } from "@/components/floating-window/window-store";
+import type { WindowContentProps } from "@/components/floating-window/window-content-registry";
+import { LogsApp } from "./logs-app";
+import { parseLogsView } from "./open-logs";
+
+export default function LogsWindowContent({ id, payload }: WindowContentProps) {
+  const setPayload = useWindowStore((s) => s.setPayload);
+  return <LogsApp mode="window" initialView={parseLogsView(payload?.view)} onViewChange={(view) => setPayload(id, { view })} />;
+}