phughk/ottyl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Docs, ticks, working app

Browse Source
This commit is contained in:
Hugh Kaznowski
2026-09-05 15:05:39 +01:00
parent 41362aa3d8
commit 51e577f01e
41 changed files with 1039 additions and 683 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/components/LogPreview.tsx
+13 -13
View File
@@ -57,24 +57,24 @@ function ColumnPicker({
<button
type="button"
onClick={() => setOpen((v) => !v)}
className="rounded border border-neutral-700 px-2 py-1 text-xs text-neutral-300 hover:bg-neutral-800"
className="rounded border border-border-soft px-2 py-1 text-xs text-text-secondary hover:bg-surface-2"
>
Columns{visible.size > 0 ? ` (${visible.size})` : ''}
</button>
{open && (
<div className="absolute right-0 z-10 mt-1 w-56 rounded border border-neutral-700 bg-neutral-950 p-2 shadow-lg">
<div className="absolute right-0 z-10 mt-1 w-56 rounded border border-border-soft bg-surface-0 p-2 shadow-lg">
{paramNames.length === 0 ? (
<div className="px-1 py-1 text-xs text-neutral-500">No declared params yet.</div>
<div className="px-1 py-1 text-xs text-text-subtle">No declared params yet.</div>
) : (
<ul className="flex max-h-64 flex-col gap-1 overflow-auto">
{paramNames.map((name) => (
<li key={name}>
<label className="flex cursor-pointer items-center gap-2 rounded px-1 py-0.5 text-xs text-neutral-200 hover:bg-neutral-900">
<label className="flex cursor-pointer items-center gap-2 rounded px-1 py-0.5 text-xs text-text hover:bg-surface-1">
<input
type="checkbox"
checked={visible.has(name)}
onChange={() => onToggle(name)}
className="accent-neutral-400"
className="accent-text-muted"
/>
{name}
</label>
@@ -126,12 +126,12 @@ export function LogPreview({ logs }: { logs: LogEntry[] }) {
return (
<div className="flex flex-1 flex-col overflow-hidden">
<div className="flex justify-end border-b border-neutral-900 px-3 py-1">
<div className="flex justify-end border-b border-border-faint px-3 py-1">
<ColumnPicker paramNames={paramNames} visible={visible} onToggle={toggleColumn} />
</div>
<div className="flex-1 overflow-auto">
<table className="w-full border-collapse text-left text-xs">
<thead className="sticky top-0 bg-neutral-950 text-neutral-500">
<thead className="sticky top-0 bg-surface-0 text-text-subtle">
<tr>
<th className="w-16 px-3 py-1 font-normal">Seq</th>
<th className="w-40 px-3 py-1 font-normal">Timestamp</th>
@@ -145,25 +145,25 @@ export function LogPreview({ logs }: { logs: LogEntry[] }) {
</thead>
<tbody>
{logs.map((log) => (
<tr key={log.sequence} className="border-t border-neutral-900 hover:bg-neutral-900/60">
<td className="whitespace-nowrap px-3 py-1 text-neutral-500">{log.sequence}</td>
<td className="whitespace-nowrap px-3 py-1 text-neutral-500">
<tr key={log.sequence} className="border-t border-border-faint hover:bg-surface-1/60">
<td className="whitespace-nowrap px-3 py-1 text-text-subtle">{log.sequence}</td>
<td className="whitespace-nowrap px-3 py-1 text-text-subtle">
{new Date(log.timestamp_ms).toLocaleTimeString()}
</td>
{columns.map((name) => {
const value = log.params[name]
return (
<td key={name} className="whitespace-nowrap px-3 py-1 text-neutral-400">
<td key={name} className="whitespace-nowrap px-3 py-1 text-text-muted">
{value ? metricPrimitiveToDisplayString(value) : '—'}
</td>
)
})}
<td className="px-3 py-1 text-neutral-200">{log.text}</td>
<td className="px-3 py-1 text-text">{log.text}</td>
</tr>
))}
{logs.length === 0 && (
<tr>
<td colSpan={3 + columns.length} className="px-3 py-6 text-center text-neutral-600">
<td colSpan={3 + columns.length} className="px-3 py-6 text-center text-text-faint">
No logs yet — pipe something into ottyl.
</td>
</tr>