@rxtx4816/cockpit-plugin-base-react 1.0.5 → 1.0.7

package/eslint.config.base.js

@@ -39,6 +39,9 @@ const BASE_GLOBALS = {
   HTMLPreElement: "readonly",
   HTMLTableSectionElement: "readonly",
   requestAnimationFrame: "readonly",
+  Node: "readonly",
+  PointerEvent: "readonly",
+  MouseEvent: "readonly",
   cockpit: "readonly",
   CockpitProcess: "readonly",
   CockpitChannel: "readonly",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxtx4816/cockpit-plugin-base-react",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Shared infrastructure for Cockpit plugins: i18n, dark theme, test setup, config presets, CI/CD workflows, and QEMU VM harness",
   "type": "module",
   "author": "RXTX4816",
@@ -81,6 +81,7 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
+    "yalc": "yalc push",
     "docs": "typedoc",
     "docs:watch": "typedoc --watch"
   },

package/src/components/CollapsibleSearch.tsx

@@ -0,0 +1,95 @@
+import { type CSSProperties, useState, useRef, useEffect, useCallback } from "react";
+import { Button, SearchInput } from "@patternfly/react-core";
+import { SearchIcon } from "@patternfly/react-icons";
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+  onClear: () => void;
+  placeholder?: string;
+  "aria-label"?: string;
+  /** Width of the expanded input in pixels. Defaults to 220. */
+  expandedWidth?: number;
+}
+
+export function CollapsibleSearch({
+  value,
+  onChange,
+  onClear,
+  placeholder = "Search…",
+  "aria-label": ariaLabel = "Search",
+  expandedWidth = 220,
+}: Props) {
+  const [expanded, setExpanded] = useState(value.length > 0);
+  const inputRef = useRef<HTMLDivElement>(null);
+
+  // Stay expanded when there's an active search value
+  useEffect(() => {
+    if (value.length > 0) setExpanded(true);
+  }, [value]);
+
+  const collapse = useCallback(() => {
+    if (value.length === 0) setExpanded(false);
+  }, [value]);
+
+  // Collapse on outside click when empty
+  useEffect(() => {
+    if (!expanded) return;
+    function onPointerDown(e: PointerEvent) {
+      if (inputRef.current && !inputRef.current.contains(e.target as Node)) {
+        collapse();
+      }
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [expanded, collapse]);
+
+  function handleClear() {
+    onClear();
+    setExpanded(false);
+  }
+
+  function handleExpand() {
+    setExpanded(true);
+    // Focus the inner input after the animation frame
+    requestAnimationFrame(() => {
+      inputRef.current?.querySelector("input")?.focus();
+    });
+  }
+
+  const containerStyle: CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    overflow: "hidden",
+    transition: "width 200ms ease, opacity 200ms ease",
+    width: expanded ? expandedWidth : 32,
+    opacity: expanded ? 1 : 0.6,
+  };
+
+  if (!expanded) {
+    return (
+      <Button
+        variant="plain"
+        size="sm"
+        aria-label={ariaLabel}
+        title={ariaLabel}
+        onClick={handleExpand}
+      >
+        <SearchIcon />
+      </Button>
+    );
+  }
+
+  return (
+    <div ref={inputRef} style={containerStyle}>
+      <SearchInput
+        placeholder={placeholder}
+        value={value}
+        onChange={(_e, v) => onChange(v)}
+        onClear={handleClear}
+        style={{ width: expandedWidth }}
+        aria-label={ariaLabel}
+      />
+    </div>
+  );
+}

package/src/components/LayoutSelector.css

@@ -0,0 +1,34 @@
+.ls-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.ls-trigger.pf-v6-c-button {
+  padding: 0.25rem;
+  width: 1.875rem;
+  height: 1.875rem;
+  min-width: unset;
+  border-radius: var(--pf-t--global--border--radius--base, 4px);
+  color: var(--pf-t--global--text--color--subtle, #6a6e73);
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.ls-trigger.pf-v6-c-button:hover {
+  color: var(--pf-t--global--text--color--regular, #151515);
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.ls-trigger--active.pf-v6-c-button {
+  color: var(--pf-t--global--color--brand--default, #0066cc);
+  background: rgba(0, 102, 204, 0.08);
+}
+
+.ls-toggle {
+  animation: ls-expand 0.12s ease-out;
+}
+
+@keyframes ls-expand {
+  from { opacity: 0; transform: scale(0.92); }
+  to   { opacity: 1; transform: scale(1); }
+}

package/src/components/LayoutSelector.tsx

@@ -0,0 +1,70 @@
+import { useState, useRef, useEffect, type ReactNode } from "react";
+import { Button, Tooltip, ToggleGroup, ToggleGroupItem } from "@patternfly/react-core";
+import { SlidersHIcon } from "@patternfly/react-icons";
+import "./LayoutSelector.css";
+
+export interface LayoutOption<T extends string = string> {
+  key: T;
+  icon: ReactNode;
+  label: string;
+}
+
+interface Props<T extends string = string> {
+  layout: T;
+  onLayoutChange: (layout: T) => void;
+  layouts: LayoutOption<T>[];
+  ariaLabel?: string;
+}
+
+export function LayoutSelector<T extends string>({
+  layout,
+  onLayoutChange,
+  layouts,
+  ariaLabel = "Change layout",
+}: Props<T>) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as HTMLElement)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  const current = layouts.find(l => l.key === layout);
+
+  return (
+    <div ref={containerRef} className={`ls-wrap${open ? " ls-wrap--open" : ""}`}>
+      <Tooltip content={`Layout: ${current?.label ?? layout}`}>
+        <Button
+          variant="plain"
+          size="sm"
+          onClick={() => setOpen(o => !o)}
+          aria-label={ariaLabel}
+          className={`ls-trigger${open ? " ls-trigger--active" : ""}`}
+        >
+          {current?.icon ?? <SlidersHIcon />}
+        </Button>
+      </Tooltip>
+      {open && (
+        <ToggleGroup aria-label="Layout" isCompact className="ls-toggle">
+          {layouts.map(({ key, icon, label }) => (
+            <Tooltip key={key} content={label}>
+              <ToggleGroupItem
+                icon={icon}
+                isSelected={layout === key}
+                onChange={() => { onLayoutChange(key); setOpen(false); }}
+                aria-label={label}
+              />
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      )}
+    </div>
+  );
+}

package/src/components/LogViewer.tsx

@@ -1,6 +1,7 @@
-import { useState } from "react";
+import { useState, useEffect, useRef, useCallback, type CSSProperties, type ReactNode } from "react";
 import {
   Alert,
+  AlertActionCloseButton,
   Button,
   SearchInput,
   Spinner,
@@ -9,51 +10,188 @@ import {
   Toolbar,
   ToolbarContent,
   ToolbarItem,
+  ToolbarGroup,
 } from "@patternfly/react-core";
+import { highlightWithSearch } from "../lib/logParser";
 
 interface Props {
-  /** Log lines to display. Each string becomes one line in the pre block. */
+  /** Log lines to display. Each string becomes one highlighted line. */
   lines: string[];
-  /** When `true`, shows a spinner instead of the log content. */
+  /** When `true`, shows a spinner instead of log content on first load. */
   loading?: boolean;
-  /** If set, renders a danger alert at the top of the component. */
+  /** If set, renders a danger alert at the top. */
   error?: string | null;
-  /** When provided, adds a refresh button to the toolbar. */
+  /** When provided, adds a refresh button. */
   onRefresh?: () => void;
-  /** Placeholder text for the search input. Defaults to `"Search logs…"`. */
+  /** When `true`, log output is frozen (auto-scroll stops). */
+  paused?: boolean;
+  /** Called when the user clicks the Pause button. */
+  onPause?: () => void;
+  /** Called when the user clicks the Resume button. */
+  onResume?: () => void;
+  /**
+   * Suggested download file name (without extension). When provided a download
+   * button is shown. First tries the File System Access API; falls back to
+   * saving via cockpit to ~/Downloads/ (Firefox/Cockpit-iframe fallback).
+   */
+  downloadFileName?: string;
+  /** Pre-fills and drives the search box externally. */
+  filterValue?: string;
+  /** Called whenever the search input changes. */
+  onFilterChange?: (value: string) => void;
+  /** Placeholder text for the search input. */
   searchPlaceholder?: string;
-  /** Message shown when `lines` is empty. Defaults to `"No log entries."`. */
+  /** Message shown when `lines` is empty and not loading. */
   emptyMessage?: string;
-  /** Message shown when the search filter matches nothing. Defaults to `"No matching entries."`. */
+  /** Message shown when the filter matches nothing. */
   noMatchesMessage?: string;
-  /** Title of the danger alert when `error` is set. Defaults to `"Failed to load logs"`. */
+  /** Title of the danger alert when `error` is set. */
   errorTitle?: string;
-  /** `aria-label` for the refresh button. Defaults to `"Refresh"`. */
+  /** `aria-label` for the refresh button. */
   refreshAriaLabel?: string;
 }
 
-/**
- * A scrollable, searchable log viewer with a toolbar.
- *
- * Pass `lines` from `useAsyncStream` or any string array. The search
- * input filters lines client-side; `onRefresh` adds a refresh button.
- */
+const VIEWER_STYLE: CSSProperties = {
+  overflowY: "auto",
+  maxHeight: "60vh",
+  background: "#0d1117",
+  borderRadius: "var(--pf-v6-global--BorderRadius--sm, 4px)",
+  padding: "0.4rem 0",
+  fontFamily: "var(--pf-t--global--font--family--mono, monospace)",
+  fontSize: "0.78rem",
+  lineHeight: 1.6,
+};
+
+const LINE_BASE: CSSProperties = {
+  padding: "0.05rem 0.75rem",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-all",
+  color: "#e6edf3",
+};
+
+function levelBg(line: string): string {
+  if (/\b(FATAL|CRITICAL|ERROR|ERR)\b/i.test(line)) return "rgba(248,81,73,0.10)";
+  if (/\bWARN(ING)?\b/i.test(line)) return "rgba(227,179,65,0.08)";
+  return "";
+}
+
+function LogLine({ line, search, isRegex, index }: {
+  line: string; search: string; isRegex: boolean; index: number;
+}): ReactNode {
+  const bg = levelBg(line) || (index % 2 !== 0 ? "rgba(255,255,255,0.015)" : "transparent");
+  return (
+    <div style={{ ...LINE_BASE, background: bg }}>
+      {highlightWithSearch(line, search, isRegex)}
+    </div>
+  );
+}
+
 export function LogViewer({
   lines,
   loading = false,
   error,
   onRefresh,
+  paused = false,
+  onPause,
+  onResume,
+  downloadFileName,
+  filterValue,
+  onFilterChange,
   searchPlaceholder = "Search logs…",
   emptyMessage = "No log entries.",
   noMatchesMessage = "No matching entries.",
   errorTitle = "Failed to load logs",
   refreshAriaLabel = "Refresh",
 }: Props) {
-  const [search, setSearch] = useState("");
+  const [internalSearch, setInternalSearch] = useState(filterValue ?? "");
+  const [isRegex, setIsRegex] = useState(false);
+  const [downloadNote, setDownloadNote] = useState<string | null>(null);
+  const [downloadError, setDownloadError] = useState<string | null>(null);
+  const logRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setInternalSearch(filterValue ?? "");
+  }, [filterValue]);
+
+  const search = filterValue !== undefined ? filterValue : internalSearch;
+
+  const setSearch = useCallback((v: string) => {
+    if (onFilterChange) onFilterChange(v);
+    else setInternalSearch(v);
+  }, [onFilterChange]);
+
+  useEffect(() => {
+    if (!paused && logRef.current) {
+      logRef.current.scrollTop = logRef.current.scrollHeight;
+    }
+  }, [lines, paused]);
+
+  const scrollToTop = () => { if (logRef.current) logRef.current.scrollTop = 0; };
+  const scrollToBottom = () => { if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight; };
+
+  const filtered = lines.filter(l => {
+    if (!search) return true;
+    try {
+      return isRegex ? new RegExp(search, "i").test(l) : l.toLowerCase().includes(search.toLowerCase());
+    } catch { return true; }
+  });
 
-  const filtered = search
-    ? lines.filter(l => l.toLowerCase().includes(search.toLowerCase()))
-    : lines;
+  const handleDownload = useCallback(async () => {
+    if (!downloadFileName) return;
+    const text = filtered.join("\n");
+    if ("showSaveFilePicker" in window) {
+      try {
+        const handle = await (window as Window & {
+          showSaveFilePicker(o: object): Promise<{
+            createWritable(): Promise<{ write(s: string): Promise<void>; close(): Promise<void> }>;
+          }>;
+        }).showSaveFilePicker({
+          suggestedName: `${downloadFileName}.txt`,
+          types: [{ description: "Text files", accept: { "text/plain": [".txt"] } }],
+        });
+        const w = await handle.createWritable();
+        await w.write(text);
+        await w.close();
+        return;
+      } catch (e) {
+        if ((e as { name?: string }).name === "AbortError") return;
+        // SecurityError in Cockpit's iframe — fall through
+      }
+    }
+    try {
+      const user = await cockpit.user();
+      const ts = new Date().toISOString().replace(/[:.]/g, "-").slice(0, 19);
+      const savePath = `${user.home}/Downloads/${downloadFileName}-${ts}.txt`;
+      await cockpit.spawn(["mkdir", "-p", "--", `${user.home}/Downloads`], { err: "message" });
+      await cockpit.file(savePath).replace(text);
+      setDownloadNote(savePath);
+    } catch (err) {
+      setDownloadError((err as { message?: string })?.message ?? String(err));
+    }
+  }, [filtered, downloadFileName]);
+
+  const lineCount = filtered.length !== lines.length
+    ? `${filtered.length} / ${lines.length}`
+    : String(lines.length);
+
+  const hasPauseControl = onPause !== undefined || onResume !== undefined;
+
+  const regexBtnStyle: CSSProperties = {
+    height: "var(--pf-t--global--control--size--base, 36px)",
+    padding: "0 0.5rem",
+    fontFamily: "var(--pf-t--global--font--family--mono, monospace)",
+    fontSize: "0.8rem",
+    fontWeight: 600,
+    border: "1px solid var(--pf-t--global--border--color--default)",
+    borderRadius: "var(--pf-t--global--border--radius--100, 4px)",
+    cursor: "pointer",
+    transition: "background 120ms ease, color 120ms ease",
+    background: isRegex
+      ? "var(--pf-t--global--color--brand--default, #06c)"
+      : "var(--pf-t--global--background--color--primary--default)",
+    color: isRegex ? "#fff" : "var(--pf-t--global--text--color--subtle)",
+    borderColor: isRegex ? "var(--pf-t--global--color--brand--default, #06c)" : undefined,
+  };
 
   return (
     <Stack hasGutter>
@@ -62,31 +200,79 @@ export function LogViewer({
           <Alert
             variant="danger"
             title={errorTitle}
-            actionLinks={onRefresh && (
-              <Button variant="link" onClick={onRefresh}>Retry</Button>
-            )}
+            actionLinks={onRefresh && <Button variant="link" onClick={onRefresh}>Retry</Button>}
           >
             {error}
           </Alert>
         </StackItem>
       )}
+      {downloadNote && (
+        <StackItem>
+          <Alert variant="info" isInline title={`Saved to ${downloadNote}`}
+            actionClose={<AlertActionCloseButton onClose={() => setDownloadNote(null)} />}
+          />
+        </StackItem>
+      )}
+      {downloadError && (
+        <StackItem>
+          <Alert variant="danger" isInline title={downloadError}
+            actionClose={<AlertActionCloseButton onClose={() => setDownloadError(null)} />}
+          />
+        </StackItem>
+      )}
 
       <StackItem>
-        <Toolbar>
+        <Toolbar style={{ paddingInline: 0 }}>
           <ToolbarContent>
-            <ToolbarItem>
-              <SearchInput
-                placeholder={searchPlaceholder}
-                value={search}
-                onChange={(_e, v) => setSearch(v)}
-                onClear={() => setSearch("")}
-              />
-            </ToolbarItem>
-            {onRefresh && (
-              <ToolbarItem align={{ default: "alignEnd" }}>
-                <Button variant="plain" onClick={onRefresh} aria-label={refreshAriaLabel}>↺</Button>
+            <ToolbarGroup variant="filter-group">
+              <ToolbarItem>
+                <div style={{ display: "flex", alignItems: "center", gap: "0.25rem" }}>
+                  <SearchInput
+                    placeholder={searchPlaceholder}
+                    value={search}
+                    onChange={(_e, v) => setSearch(v)}
+                    onClear={() => setSearch("")}
+                    style={{ width: 220 }}
+                  />
+                  <button type="button" aria-label="Toggle regex" aria-pressed={isRegex}
+                    title="Toggle regex filter" onClick={() => setIsRegex(r => !r)}
+                    style={regexBtnStyle}
+                  >.*</button>
+                </div>
               </ToolbarItem>
-            )}
+              <ToolbarItem>
+                <span style={{ fontSize: "0.75rem", color: "var(--pf-v6-global--Color--200)" }}>
+                  {lineCount} lines
+                </span>
+              </ToolbarItem>
+            </ToolbarGroup>
+
+            <ToolbarGroup variant="action-group-plain" align={{ default: "alignEnd" }}>
+              <ToolbarItem>
+                <Button variant="plain" size="sm" onClick={scrollToTop} aria-label="Jump to top" title="Jump to top">⇑</Button>
+              </ToolbarItem>
+              <ToolbarItem>
+                <Button variant="plain" size="sm" onClick={scrollToBottom} aria-label="Jump to bottom" title="Jump to bottom">⇓</Button>
+              </ToolbarItem>
+              {hasPauseControl && (
+                <ToolbarItem>
+                  {paused
+                    ? <Button variant="primary" size="sm" onClick={onResume}>▶ Resume</Button>
+                    : <Button variant="secondary" size="sm" onClick={onPause}>⏸ Pause</Button>
+                  }
+                </ToolbarItem>
+              )}
+              {downloadFileName && filtered.length > 0 && (
+                <ToolbarItem>
+                  <Button variant="plain" size="sm" onClick={() => void handleDownload()} aria-label="Download logs" title="Download logs">⬇</Button>
+                </ToolbarItem>
+              )}
+              {onRefresh && (
+                <ToolbarItem>
+                  <Button variant="plain" size="sm" onClick={onRefresh} aria-label={refreshAriaLabel} title={refreshAriaLabel}>↺</Button>
+                </ToolbarItem>
+              )}
+            </ToolbarGroup>
           </ToolbarContent>
         </Toolbar>
       </StackItem>
@@ -99,23 +285,11 @@ export function LogViewer({
             {lines.length === 0 ? emptyMessage : noMatchesMessage}
           </p>
         ) : (
-          <pre
-            style={{
-              fontFamily: "monospace",
-              fontSize: "0.8rem",
-              overflowX: "auto",
-              maxHeight: "60vh",
-              overflowY: "auto",
-              background: "var(--pf-v6-global--BackgroundColor--dark-100, #1b1d21)",
-              color: "var(--pf-v6-global--Color--light-100, #e8e8e8)",
-              padding: "1rem",
-              borderRadius: "var(--pf-v6-global--BorderRadius--sm, 4px)",
-              whiteSpace: "pre-wrap",
-              wordBreak: "break-all",
-            }}
-          >
-            {filtered.join("\n")}
-          </pre>
+          <div ref={logRef} style={VIEWER_STYLE}>
+            {filtered.map((line, i) => (
+              <LogLine key={i} line={line} search={search} isRegex={isRegex} index={i} />
+            ))}
+          </div>
         )}
       </StackItem>
     </Stack>

package/src/components/PluginFooter.tsx

@@ -0,0 +1,61 @@
+import { type ReactNode } from "react";
+import { PageSection, Label } from "@patternfly/react-core";
+
+interface FooterLink {
+  label: string;
+  href: string;
+}
+
+interface Props {
+  /** Plugin version string (e.g. from package.json). */
+  version?: string;
+  /** Links rendered in the bottom row. */
+  links?: FooterLink[];
+  /** Extra labels or badges rendered next to the version in the top row. */
+  children?: ReactNode;
+  className?: string;
+}
+
+export function PluginFooter({ version, links, children, className }: Props) {
+  return (
+    <PageSection
+      className={className}
+      style={{
+        position: "sticky",
+        bottom: 0,
+        zIndex: 1,
+        borderTop: "1px solid var(--pf-t--global--border--color--default)",
+        padding: "0.5rem 1.5rem",
+        fontSize: 13,
+        textAlign: "center",
+        backgroundColor: "var(--pf-t--global--background--color--primary--default)",
+      }}
+    >
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
+        {(version !== undefined || children) && (
+          <div style={{ display: "flex", flexWrap: "wrap", gap: 6, justifyContent: "center", alignItems: "center" }}>
+            {version !== undefined && (
+              <Label isCompact color="grey">v{version}</Label>
+            )}
+            {children}
+          </div>
+        )}
+        {links && links.length > 0 && (
+          <div style={{ display: "flex", flexDirection: "row", gap: 16, justifyContent: "center" }}>
+            {links.map(({ label, href }) => (
+              <a
+                key={href}
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ color: "var(--pf-t--global--color--brand--default, #06c)", textDecoration: "none" }}
+              >
+                {label}
+              </a>
+            ))}
+          </div>
+        )}
+      </div>
+    </PageSection>
+  );
+}

package/src/components/index.ts

@@ -6,3 +6,7 @@ export type { StatusBadgeConfig } from "./StatusBadge";
 export { ConfirmDialog } from "./ConfirmDialog";
 export { LogViewer } from "./LogViewer";
 export { HelpPopover } from "./HelpPopover";
+export { PluginFooter } from "./PluginFooter";
+export { CollapsibleSearch } from "./CollapsibleSearch";
+export { LayoutSelector } from "./LayoutSelector";
+export type { LayoutOption } from "./LayoutSelector";

package/src/hooks/useLayout.ts

@@ -0,0 +1,22 @@
+import { useState, useCallback } from "react";
+
+export function useLayout<T extends string>(
+  storageKey: string,
+  defaultLayout: T,
+  validLayouts: T[],
+): [T, (layout: T) => void] {
+  const [layout, setLayoutState] = useState<T>(() => {
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored && (validLayouts as string[]).includes(stored)) return stored as T;
+    } catch { /* ignore */ }
+    return defaultLayout;
+  });
+
+  const setLayout = useCallback((next: T) => {
+    try { localStorage.setItem(storageKey, next); } catch { /* ignore */ }
+    setLayoutState(next);
+  }, [storageKey]);
+
+  return [layout, setLayout];
+}

package/src/index.ts

@@ -9,3 +9,4 @@ export { useConfirmAction } from "./hooks/useConfirmAction";
 export type { ConfirmStep, ConfirmActionState } from "./hooks/useConfirmAction";
 export { usePollingFetch } from "./hooks/usePollingFetch";
 export type { PollingFetchResult } from "./hooks/usePollingFetch";
+export { useLayout } from "./hooks/useLayout";

package/src/lib/logParser.tsx

@@ -0,0 +1,85 @@
+import { type ReactNode } from "react";
+
+// Token types in priority order; first match wins at each position.
+export const TOKEN_RE = new RegExp(
+  [
+    String.raw`\b(FATAL|CRITICAL|ERROR|ERR|WARN(?:ING)?|INFO|DEBUG|TRACE)\b`,
+    String.raw`\b5\d{2}\b`,
+    String.raw`\b4\d{2}\b`,
+    String.raw`\b[23]\d{2}\b`,
+    String.raw`"[^"]*"|'[^']*'`,
+    String.raw`(?:\/[\w.\-]+){2,}`,
+    String.raw`\b\d{1,3}(?:\.\d{1,3}){3}\b`,
+  ].join("|"),
+  "gi",
+);
+
+export function tokenColor(token: string): string {
+  const u = token.toUpperCase();
+  if (/^(FATAL|CRITICAL|ERROR|ERR)$/.test(u)) return "#f85149";
+  if (/^WARN/.test(u)) return "#e3b341";
+  if (u === "INFO") return "#79c0ff";
+  if (u === "DEBUG") return "#8b949e";
+  if (u === "TRACE") return "#6e7681";
+  if (/^5\d{2}$/.test(token)) return "#f85149";
+  if (/^4\d{2}$/.test(token)) return "#e3b341";
+  if (/^[23]\d{2}$/.test(token)) return "#56d364";
+  if (token.startsWith('"') || token.startsWith("'")) return "#a5d6ff";
+  if (token.startsWith("/")) return "#d2a8ff";
+  return "#ffa657";
+}
+
+export function tokenWeight(token: string): string | number {
+  const u = token.toUpperCase();
+  if (/^(FATAL|CRITICAL|ERROR|ERR|WARN)/.test(u)) return 700;
+  return "inherit";
+}
+
+/** Renders a log message string with syntax-highlighted tokens as React nodes. */
+export function highlightMessage(msg: string): ReactNode {
+  const parts: ReactNode[] = [];
+  let last = 0;
+  let k = 0;
+  TOKEN_RE.lastIndex = 0;
+  let m: RegExpExecArray | null;
+  while ((m = TOKEN_RE.exec(msg)) !== null) {
+    if (m.index > last) parts.push(<span key={k++}>{msg.slice(last, m.index)}</span>);
+    parts.push(
+      <span key={k++} style={{ color: tokenColor(m[0]), fontWeight: tokenWeight(m[0]) }}>
+        {m[0]}
+      </span>,
+    );
+    last = m.index + m[0].length;
+  }
+  if (last < msg.length) parts.push(<span key={k++}>{msg.slice(last)}</span>);
+  return parts.length ? <>{parts}</> : msg;
+}
+
+/** Renders a log message with search-term highlighting layered on top of syntax coloring. */
+export function highlightWithSearch(msg: string, term: string, isRegex: boolean): ReactNode {
+  if (!term) return highlightMessage(msg);
+  try {
+    const re = isRegex
+      ? new RegExp(term, "gi")
+      : new RegExp(term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
+    const parts: ReactNode[] = [];
+    let last = 0;
+    let m: RegExpExecArray | null;
+    while ((m = re.exec(msg)) !== null) {
+      if (m.index > last) {
+        parts.push(<span key={`pre-${last}`}>{highlightMessage(msg.slice(last, m.index))}</span>);
+      }
+      parts.push(
+        <mark key={`match-${m.index}`} style={{ background: "rgba(255,213,0,0.35)", color: "inherit", borderRadius: 2 }}>
+          {m[0]}
+        </mark>,
+      );
+      last = m.index + m[0].length;
+      if (m[0].length === 0) re.lastIndex++;
+    }
+    if (last < msg.length) parts.push(<span key={`tail-${last}`}>{highlightMessage(msg.slice(last))}</span>);
+    return parts.length > 0 ? parts : highlightMessage(msg);
+  } catch {
+    return highlightMessage(msg);
+  }
+}

package/src/systemd/ServiceControl.tsx

@@ -72,6 +72,8 @@ interface Props {
   statusBadge?: ReactNode;
   /** Override any user-visible string. See {@link ServiceControlLabels}. */
   labels?: ServiceControlLabels;
+  /** Extra content rendered at the far right of the button row (e.g. Backup / Restore buttons). */
+  extraActions?: ReactNode;
 }
 
 /**
@@ -82,7 +84,7 @@ interface Props {
  *
  * Pair with `useServiceStatus` for reactive status updates.
  */
-export function ServiceControl({ unit, status, loading = false, onRefresh, statusBadge, labels }: Props) {
+export function ServiceControl({ unit, status, loading = false, onRefresh, statusBadge, labels, extraActions }: Props) {
   const toast = useToast();
   const l = { ...DEFAULTS, ...labels };
   const [busy, setBusy] = useState(false);
@@ -194,6 +196,11 @@ export function ServiceControl({ unit, status, loading = false, onRefresh, statu
             {l.reload}
           </Button>
         </FlexItem>
+        {extraActions && (
+          <FlexItem align={{ default: "alignRight" }}>
+            {extraActions}
+          </FlexItem>
+        )}
       </Flex>
 
       <ConfirmDialog