homeio

1"use client";
2
3import { useCallback, useEffect, useRef, useState } from "react";
4import { useQuery } from "@tanstack/react-query";
5import { SETTINGS_PANEL_INSET, SETTINGS_PANEL_SHELL } from "@/modules/settings/components/panel/surface";
6import { queryKeys } from "@/lib/shared/query-keys";
7import type { RawLogEntry, LogSource } from "@/lib/server/modules/logs/service";
8import { cn } from "@/lib/utils";
9
10type LogsApiResponse = {
11  data: {
12    entries: RawLogEntry[];
13    source: LogSource;
14    truncated: boolean;
15    error?: string;
16  };
17};
18
19async function fetchLogs(source: LogSource): Promise<LogsApiResponse["data"]> {
20  const res = await fetch(`/api/v1/logs?source=${source}`);
21  if (!res.ok) throw new Error(`Failed to load ${source} logs`);
22  const json = (await res.json()) as LogsApiResponse;
23  return json.data;
24}
25
26const TABS: { id: LogSource; label: string }[] = [
27  { id: "homeio", label: "Homeio" },
28  { id: "system", label: "System" },
29  { id: "docker", label: "Docker" },
30];
31
32function levelColor(level?: string) {
33  switch (level) {
34    case "error": return "text-status-red";
35    case "warn": return "text-status-amber";
36    case "debug": return "text-muted-foreground/60";
37    default: return "text-foreground/80";
38  }
39}
40
41function levelBadgeColor(level?: string) {
42  switch (level) {
43    case "error": return "bg-status-red/15 text-status-red";
44    case "warn": return "bg-status-amber/15 text-status-amber";
45    case "debug": return "bg-secondary text-muted-foreground";
46    default: return "bg-primary/10 text-primary";
47  }
48}
49
50function formatTimestamp(ts?: string) {
51  if (!ts) return null;
52  try {
53    return new Date(ts).toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
54  } catch {
55    return ts.slice(11, 19) || null;
56  }
57}
58
59function HomeioLogRow({ entry }: { entry: RawLogEntry }) {
60  const [expanded, setExpanded] = useState(false);
61  const ts = formatTimestamp(entry.timestamp);
62  const hasDetail = Boolean(entry.error || entry.message);
63
64  return (
65    <div
66      className={cn("border-b border-glass-border/40 px-3 py-1.5 transition-colors last:border-0", hasDetail && "cursor-pointer hover:bg-background/30")}
67      onClick={() => hasDetail && setExpanded((p) => !p)}
68    >
69      <div className="flex min-w-0 items-center gap-2">
70        {ts && <span className="w-16 shrink-0 font-mono text-2xs text-muted-foreground/60">{ts}</span>}
71        {entry.level && (
72          <span className={cn("shrink-0 rounded px-1.5 py-0.5 text-2xs font-bold uppercase tracking-widest", levelBadgeColor(entry.level))}>
73            {entry.level}
74          </span>
75        )}
76        {entry.layer && <span className="shrink-0 font-mono text-2xs text-muted-foreground/70">{entry.layer}</span>}
77        <span className={cn("truncate font-mono text-2xs", levelColor(entry.level))}>
78          {entry.action ?? entry.raw}
79        </span>
80        {entry.status && <span className="ml-auto shrink-0 text-2xs text-muted-foreground/50">{entry.status}</span>}
81      </div>
82      {expanded && hasDetail && (
83        <div className={cn("ml-18 mt-1.5 rounded-lg p-2", SETTINGS_PANEL_INSET)}>
84          {entry.message && <p className="break-all font-mono text-2xs text-foreground/80">{entry.message}</p>}
85          {entry.error && <p className="mt-0.5 break-all font-mono text-2xs text-status-red">{entry.error.message}</p>}
86        </div>
87      )}
88    </div>
89  );
90}
91
92function RawLogRow({ entry }: { entry: RawLogEntry }) {
93  const isError = /\b(error|failed|failure|crit|emerg|alert)\b/i.test(entry.raw);
94  const isWarn = /\b(warn|warning)\b/i.test(entry.raw);
95  return (
96    <div className="border-b border-glass-border/40 px-3 py-1 last:border-0">
97      <span className={cn("break-all font-mono text-2xs leading-relaxed", isError ? "text-status-red" : isWarn ? "text-status-amber" : "text-foreground/75")}>
98        {entry.raw}
99      </span>
100    </div>
101  );
102}
103
104const REFETCH_INTERVAL = 8_000;
105
106export function LogsSection() {
107  const [activeSource, setActiveSource] = useState<LogSource>("homeio");
108  const [autoScroll, setAutoScroll] = useState(true);
109  const scrollRef = useRef<HTMLDivElement>(null);
110
111  const { data, isFetching, refetch, dataUpdatedAt } = useQuery({
112    queryKey: queryKeys.logs(activeSource),
113    queryFn: () => fetchLogs(activeSource),
114    refetchInterval: REFETCH_INTERVAL,
115    staleTime: REFETCH_INTERVAL / 2,
116  });
117
118  useEffect(() => {
119    if (autoScroll && scrollRef.current) {
120      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
121    }
122  }, [dataUpdatedAt, autoScroll]);
123
124  const handleScroll = useCallback(() => {
125    const el = scrollRef.current;
126    if (!el) return;
127    setAutoScroll(el.scrollHeight - el.scrollTop - el.clientHeight < 40);
128  }, []);
129
130  function handleDownload() {
131    if (!data?.entries) return;
132    const text = data.entries.map((e) => e.raw).join("\n");
133    const blob = new Blob([text], { type: "text/plain" });
134    const url = URL.createObjectURL(blob);
135    const a = document.createElement("a");
136    a.href = url;
137    a.download = `homeio-${activeSource}-logs.txt`;
138    a.click();
139    URL.revokeObjectURL(url);
140  }
141
142  const lastUpdated = dataUpdatedAt
143    ? new Date(dataUpdatedAt).toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" })
144    : null;
145
146  const sourceLabel =
147    activeSource === "homeio" ? "Homeio Application Logs" :
148    activeSource === "system" ? "System Journal" :
149    "Docker Daemon Journal";
150
151  return (
152    <div className="flex flex-col gap-1.5">
153      {/* Tab bar */}
154      <div className={cn(SETTINGS_PANEL_INSET, "flex items-center gap-1 px-2 py-2")}>
155        {TABS.map((tab) => (
156          <button
157            key={tab.id}
158            onClick={() => setActiveSource(tab.id)}
159            className={cn(
160              "rounded-lg px-3 py-1.5 text-xs font-medium transition-colors",
161              activeSource === tab.id ? "bg-primary/15 text-primary" : "text-muted-foreground hover:bg-background/60 hover:text-foreground",
162            )}
163          >
164            {tab.label}
165          </button>
166        ))}
167        <div className="ml-auto flex items-center gap-2">
168          {lastUpdated && (
169            <span className="text-2xs text-muted-foreground/60">
170              {isFetching ? "Refreshing…" : `Updated ${lastUpdated}`}
171            </span>
172          )}
173          <button
174            onClick={() => void refetch()}
175            disabled={isFetching}
176            className="rounded-lg px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
177          >
178            Refresh
179          </button>
180          <button
181            onClick={handleDownload}
182            disabled={!data?.entries?.length}
183            className="rounded-lg px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
184          >
185            Download
186          </button>
187        </div>
188      </div>
189
190      {/* Log output */}
191      <div className={cn(SETTINGS_PANEL_SHELL, "flex flex-col overflow-hidden")} style={{ height: "360px" }}>
192        {/* Header */}
193        <div className="flex shrink-0 items-center justify-between border-b border-glass-border/50 px-3 py-1.5">
194          <span className="text-2xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">{sourceLabel}</span>
195          <div className="flex items-center gap-2">
196            {data?.truncated ? (
197              <span className="text-2xs text-status-amber">Showing last 500 lines</span>
198            ) : data?.entries?.length ? (
199              <span className="text-2xs text-muted-foreground/50">{data.entries.length} entries</span>
200            ) : null}
201            <button
202              onClick={() => setAutoScroll((p) => !p)}
203              className={cn(
204                "rounded px-1.5 py-0.5 text-2xs transition-colors",
205                autoScroll ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground",
206              )}
207            >
208              {autoScroll ? "Auto-scroll on" : "Auto-scroll off"}
209            </button>
210          </div>
211        </div>
212
213        {/* Scroll area */}
214        <div ref={scrollRef} onScroll={handleScroll} className="flex-1 overflow-y-auto">
215          {data?.error ? (
216            <div className="flex h-full items-center justify-center">
217              <span className="px-6 text-center text-xs text-status-amber">{data.error}</span>
218            </div>
219          ) : !data || data.entries.length === 0 ? (
220            <div className="flex h-full items-center justify-center">
221              <span className="text-xs text-muted-foreground">{isFetching ? "Loading logs…" : "No log entries found"}</span>
222            </div>
223          ) : activeSource === "homeio" ? (
224            data.entries.map((entry, i) => <HomeioLogRow key={i} entry={entry} />)
225          ) : (
226            data.entries.map((entry, i) => <RawLogRow key={i} entry={entry} />)
227          )}
228        </div>
229      </div>
230    </div>
231  );
232}
233