From cadf7e9a50a68507f0e867c14767c6f44f03bd87 Mon Sep 17 00:00:00 2001 From: Val Alexander Date: Sat, 21 Mar 2026 00:42:52 -0500 Subject: [PATCH] UI: fix and optimize overview log panels --- ...n-extension-import-boundary-inventory.json | 8 - ui/src/styles/components.css | 160 +++++++++++++++++- ui/src/ui/views/overview-event-log.ts | 2 +- ui/src/ui/views/overview-log-tail.ts | 2 +- ui/src/ui/views/overview.ts | 2 +- 5 files changed, 162 insertions(+), 12 deletions(-) diff --git a/test/fixtures/plugin-extension-import-boundary-inventory.json b/test/fixtures/plugin-extension-import-boundary-inventory.json index 0894fe0d5b5..ead171321f9 100644 --- a/test/fixtures/plugin-extension-import-boundary-inventory.json +++ b/test/fixtures/plugin-extension-import-boundary-inventory.json @@ -31,14 +31,6 @@ "resolvedPath": "extensions/imessage/runtime-api.js", "reason": "imports extension-owned file from src/plugins" }, - { - "file": "src/plugins/runtime/runtime-matrix.ts", - "line": 4, - "kind": "import", - "specifier": "../../../extensions/matrix/runtime-api.js", - "resolvedPath": "extensions/matrix/runtime-api.js", - "reason": "imports extension-owned file from src/plugins" - }, { "file": "src/plugins/runtime/runtime-slack-ops.runtime.ts", "line": 10, diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css index 4edba864cd3..3192eec831d 100644 --- a/ui/src/styles/components.css +++ b/ui/src/styles/components.css @@ -3840,15 +3840,173 @@ /* Bottom grid (event log + log tail) */ .ov-bottom-grid { display: grid; - gap: 20px; + gap: 16px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } +/* Expandable log panels */ +.ov-event-log, +.ov-log-tail { + padding: 0; + overflow: hidden; +} + +.ov-expandable-toggle { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 16px; + cursor: pointer; + font-size: 13px; + font-weight: 600; + color: var(--text-strong); + letter-spacing: -0.01em; + user-select: none; + list-style: none; + transition: background var(--duration-fast) var(--ease-out); +} + +.ov-expandable-toggle::-webkit-details-marker { + display: none; +} + +.ov-expandable-toggle::marker { + content: ""; +} + +.ov-expandable-toggle:hover { + background: var(--card-highlight); +} + +.ov-expandable-toggle .nav-item__icon { + color: var(--muted); + flex-shrink: 0; +} + +.ov-expandable-toggle::after { + content: ""; + width: 16px; + height: 16px; + margin-left: auto; + flex-shrink: 0; + background: currentColor; + opacity: 0.35; + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); + mask-size: contain; + mask-repeat: no-repeat; + transition: transform var(--duration-fast) var(--ease-out); +} + +details[open] > .ov-expandable-toggle::after { + transform: rotate(90deg); +} + +.ov-count-badge { + font-size: 11px; + font-weight: 500; + color: var(--muted); + background: var(--bg-muted); + padding: 1px 7px; + border-radius: var(--radius-full); + line-height: 1.5; +} + +/* Event log entries */ +.ov-event-log-list { + border-top: 1px solid var(--border); + max-height: 320px; + overflow-y: auto; +} + +.ov-event-log-entry { + display: flex; + align-items: baseline; + gap: 10px; + padding: 6px 16px; + font-size: 12px; + line-height: 1.5; + border-bottom: 1px solid var(--border); +} + +.ov-event-log-entry:last-child { + border-bottom: none; +} + +.ov-event-log-entry:hover { + background: var(--card-highlight); +} + +.ov-event-log-ts { + font-family: var(--mono); + font-size: 11px; + color: var(--muted); + flex-shrink: 0; + min-width: 72px; +} + +.ov-event-log-name { + font-family: var(--mono); + font-size: 11px; + font-weight: 500; + color: var(--text); + white-space: nowrap; +} + +.ov-event-log-payload { + font-family: var(--mono); + font-size: 11px; + color: var(--muted); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 0; +} + +/* Gateway log tail */ +.ov-log-tail-content { + margin: 0; + padding: 12px 16px; + border-top: 1px solid var(--border); + font-family: var(--mono); + font-size: 11px; + line-height: 1.6; + color: var(--text); + max-height: 320px; + overflow-y: auto; + overflow-x: auto; + white-space: pre; + word-break: break-all; +} + +.ov-log-refresh { + display: inline-flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + border-radius: var(--radius-sm); + color: var(--muted); + cursor: pointer; + transition: + color var(--duration-fast) var(--ease-out), + background var(--duration-fast) var(--ease-out); +} + +.ov-log-refresh:hover { + color: var(--text); + background: var(--bg-muted); +} + @media (max-width: 768px) { .ov-bottom-grid { grid-template-columns: 1fr; } + .ov-event-log-list, + .ov-log-tail-content { + max-height: 240px; + } + .ov-access-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } diff --git a/ui/src/ui/views/overview-event-log.ts b/ui/src/ui/views/overview-event-log.ts index 04079f5243a..ab6dcba5372 100644 --- a/ui/src/ui/views/overview-event-log.ts +++ b/ui/src/ui/views/overview-event-log.ts @@ -16,7 +16,7 @@ export function renderOverviewEventLog(props: OverviewEventLogProps) { const visible = props.events.slice(0, 20); return html` -
+
${icons.radio} ${t("overview.eventLog.title")} diff --git a/ui/src/ui/views/overview-log-tail.ts b/ui/src/ui/views/overview-log-tail.ts index 8be2aa9d5c5..f1ef51eaa67 100644 --- a/ui/src/ui/views/overview-log-tail.ts +++ b/ui/src/ui/views/overview-log-tail.ts @@ -24,7 +24,7 @@ export function renderOverviewLogTail(props: OverviewLogTailProps) { .join("\n"); return html` -
+
${icons.scrollText} ${t("overview.logTail.title")} diff --git a/ui/src/ui/views/overview.ts b/ui/src/ui/views/overview.ts index bb57874103e..feb91f0bdf7 100644 --- a/ui/src/ui/views/overview.ts +++ b/ui/src/ui/views/overview.ts @@ -395,7 +395,7 @@ export function renderOverview(props: OverviewProps) {
-
+
${renderOverviewEventLog({ events: props.eventLog, })}