Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.
| Projects have Observability: their requests, logs, traces, metrics and errors, from apps on g1t.page with nothing to set up, and from software anywhere else over OpenTelemetry. | 1 | /** |
| 2 | * Log lines, as the Logs page, a request's page and a trace show them: | |
| 3 | * one row each (time, level, service, the line), opened for its | |
| 4 | * attributes and links to the request and trace it was written under. | |
| 5 | */ | |
| 6 | import { ChevronRight } from "lucide-react"; | |
| 7 | import { useState } from "react"; | |
| 8 | import { Link } from "react-router"; | |
| 9 | ||
| 10 | import type { TelemetryLog } from "@g1t/contracts"; | |
| 11 | ||
| 12 | import { cn } from "../lib/cn"; | |
| 13 | import { clock } from "../lib/observability"; | |
| 14 | import { LevelBadge } from "./observability"; | |
| 15 | ||
| 16 | export function LogLines({ logs, base, showRequest = true, fresh }: { logs: TelemetryLog[]; base: string; showRequest?: boolean; fresh?: Set<string> }) { | |
| 17 | return ( | |
| 18 | <ol className="divide-y divide-line font-mono text-xs" aria-label="Log lines"> | |
| 19 | {logs.map((log) => ( | |
| 20 | <LogLine key={log.id} log={log} base={base} showRequest={showRequest} fresh={fresh?.has(log.id) ?? false} /> | |
| 21 | ))} | |
| 22 | </ol> | |
| 23 | ); | |
| 24 | } | |
| 25 | ||
| 26 | function LogLine({ log, base, showRequest, fresh }: { log: TelemetryLog; base: string; showRequest: boolean; fresh: boolean }) { | |
| 27 | const [open, setOpen] = useState(false); | |
| 28 | const attributes = Object.entries(log.attributes); | |
| 29 | const multiline = log.body.includes("\n"); | |
| 30 | return ( | |
| 31 | <li className={cn("group", log.severity === "error" || log.severity === "fatal" ? "bg-danger/5" : log.severity === "warn" ? "bg-warn/5" : "", fresh && "animate-[g1t-fresh_1.2s_ease-out]")}> | |
| 32 | <button | |
| 33 | type="button" | |
| 34 | onClick={() => setOpen(!open)} | |
| 35 | aria-expanded={open} | |
| 36 | className="grid w-full grid-cols-[1rem_8.5rem_3.25rem_minmax(0,1fr)] items-start gap-2 px-3 py-1.5 text-left hover:bg-raised/60 sm:grid-cols-[1rem_10.5rem_3.25rem_7rem_minmax(0,1fr)]" | |
| 37 | > | |
| 38 | <ChevronRight size={12} className={cn("mt-0.5 text-faint transition-transform", open && "rotate-90")} /> | |
| 39 | <span className="text-faint tabular-nums">{clock(log.time_us, true).slice(6)}</span> | |
| 40 | <LevelBadge level={log.severity} /> | |
| 41 | <span className="hidden truncate text-muted sm:block">{log.service || "—"}</span> | |
| People wear their own avatars wherever g1t knows them only by name, and a workspace is never shown as a person. The activity feeds, recent changes, home's most active faces, issue and pull request authors, assignees, comments and the audit log drew a person from their username alone, so everyone got their letter avatar instead of the picture they uploaded. An avatar given no picture now draws the letter at once and lays the person's own picture over it once it loads, from /-/avatar/user/<username> (routes/avatar-user.ts): a redirect to the picture on the usercontent origin, or not found, read from identity's people only, so a workspace's icon can never stand in for someone. Kept five minutes, public like the profile. Agents, the product tour's people, "someone" and workspaces' square avatars are never looked up (image null), so an account with the same name never lends them its face. | 42 | <span className={cn("min-w-0 text-fg", open || !multiline ? "wrap-break-word whitespace-pre-wrap" : "truncate")}>{open ? log.body : log.body.split("\n")[0]}</span> |
| Projects have Observability: their requests, logs, traces, metrics and errors, from apps on g1t.page with nothing to set up, and from software anywhere else over OpenTelemetry. | 43 | </button> |
| 44 | {open && ( | |
| 45 | <div className="space-y-2 px-3 pt-1 pb-3 pl-9"> | |
| 46 | <dl className="grid grid-cols-[minmax(8rem,auto)_1fr] gap-x-4 gap-y-1"> | |
| 47 | <dt className="text-faint">time</dt> | |
| 48 | <dd className="tabular-nums">{clock(log.time_us, true)} UTC</dd> | |
| 49 | {log.environment && ( | |
| 50 | <> | |
| 51 | <dt className="text-faint">environment</dt> | |
| 52 | <dd>{log.environment}</dd> | |
| 53 | </> | |
| 54 | )} | |
| 55 | {log.deployment_id && ( | |
| 56 | <> | |
| 57 | <dt className="text-faint">deployment</dt> | |
| 58 | <dd> | |
| 59 | <Link to={`${base}/deployments/${log.deployment_id}`} className="text-accent hover:underline"> | |
| 60 | {log.deployment_id} | |
| 61 | </Link> | |
| 62 | </dd> | |
| 63 | </> | |
| 64 | )} | |
| 65 | {showRequest && log.request_id && ( | |
| 66 | <> | |
| 67 | <dt className="text-faint">request</dt> | |
| 68 | <dd> | |
| 69 | <Link to={`${base}/observability/requests/${log.request_id}`} className="text-accent hover:underline"> | |
| 70 | {log.request_id} | |
| 71 | </Link> | |
| 72 | </dd> | |
| 73 | </> | |
| 74 | )} | |
| 75 | {log.trace_id && ( | |
| 76 | <> | |
| 77 | <dt className="text-faint">trace</dt> | |
| 78 | <dd> | |
| 79 | <Link to={`${base}/observability/traces/${log.trace_id}`} className="text-accent hover:underline"> | |
| 80 | {log.trace_id} | |
| 81 | </Link> | |
| 82 | </dd> | |
| 83 | </> | |
| 84 | )} | |
| 85 | {attributes.map(([key, value]) => ( | |
| 86 | <div key={key} className="contents"> | |
| 87 | <dt className="truncate text-faint">{key}</dt> | |
| 88 | <dd className="break-all">{typeof value === "string" ? value : JSON.stringify(value)}</dd> | |
| 89 | </div> | |
| 90 | ))} | |
| 91 | </dl> | |
| 92 | </div> | |
| 93 | )} | |
| 94 | </li> | |
| 95 | ); | |
| 96 | } |
