refactor(usage): drop empty detail placeholder state (#52013)

* refactor(usage): drop empty detail placeholder state

* docs(changelog): add entry for usage detail cleanup

ui/src/i18n/locales/en.ts

@@ -314,12 +314,6 @@ export const en: TranslationMap = {
       limitReached: "Showing first 1,000 sessions. Narrow date range for complete results.",
     },
     details: {
-      emptyTitle: "Select a session",
-      emptySubtitle:
-        "Pick a session to inspect the timeline, conversation, and prompt context for a single run.",
-      emptyTimeline: "Turn-by-turn timeline",
-      emptyConversation: "Conversation logs",
-      emptyContext: "Prompt breakdown",
       noUsageData: "No usage data for this session.",
       duration: "Duration",
       modelMix: "Model Mix",

ui/src/styles/usage.css

@@ -11,7 +11,6 @@
 .usage-page .card,
 .usage-page .stat,
 .usage-page .usage-insight-card,
-.usage-page .session-detail-empty,
 .usage-page .context-details-panel,
 .usage-page .session-logs-compact,
 .usage-page .session-timeseries-compact {
@@ -54,8 +53,7 @@
 .usage-mosaic,
 .usage-left-card,
 .sessions-card,
-.session-detail-panel,
-.session-detail-empty {
+.session-detail-panel {
   position: relative;
   overflow: clip;
 }
@@ -471,7 +469,6 @@ details.usage-filter-select summary::-webkit-details-marker,
 .usage-query-chips,
 .usage-query-suggestions,
 .usage-badges,
-.session-detail-empty__features,
 .usage-empty-state__features {
   display: flex;
   flex-wrap: wrap;
@@ -481,7 +478,6 @@ details.usage-filter-select summary::-webkit-details-marker,
 .usage-query-chip,
 .usage-query-suggestion,
 .usage-badge,
-.session-detail-empty__feature,
 .usage-empty-state__feature {
   display: inline-flex;
   align-items: center;
@@ -532,22 +528,19 @@ details.usage-filter-select summary::-webkit-details-marker,
   color: var(--text);
 }
 
-.usage-empty-state,
-.session-detail-empty {
+.usage-empty-state {
   display: grid;
   gap: 12px;
   justify-items: start;
 }
 
-.usage-empty-state__title,
-.session-detail-empty__title {
+.usage-empty-state__title {
   font-size: 20px;
   font-weight: 700;
   color: var(--text-strong);
 }
 
-.usage-empty-state__subtitle,
-.session-detail-empty__subtitle {
+.usage-empty-state__subtitle {
   max-width: 640px;
 }
 
@@ -892,11 +885,16 @@ details.usage-filter-select summary::-webkit-details-marker,
 
 .usage-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
+  grid-template-columns: minmax(0, 1fr);
   gap: 16px;
   align-items: start;
 }
 
+/* Expand to two columns when the detail panel column is present */
+.usage-grid:has(.usage-grid-column:nth-child(2)) {
+  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
+}
+
 .usage-grid-column {
   display: grid;
   gap: 16px;

ui/src/ui/views/usage-render-details.ts

@@ -26,20 +26,6 @@ function pct(part: number, total: number): number {
   return (part / total) * 100;
 }
 
-function renderEmptyDetailState() {
-  return html`
-    <section class="card session-detail-empty">
-      <div class="session-detail-empty__title">${t("usage.details.emptyTitle")}</div>
-      <div class="card-sub session-detail-empty__subtitle">${t("usage.details.emptySubtitle")}</div>
-      <div class="session-detail-empty__features">
-        <span class="session-detail-empty__feature">${t("usage.details.emptyTimeline")}</span>
-        <span class="session-detail-empty__feature">${t("usage.details.emptyConversation")}</span>
-        <span class="session-detail-empty__feature">${t("usage.details.emptyContext")}</span>
-      </div>
-    </section>
-  `;
-}
-
 /** Normalize a log timestamp to milliseconds (handles seconds vs ms). */
 function normalizeLogTimestamp(ts: number): number {
   return ts < 1e12 ? ts * 1000 : ts;
@@ -1140,7 +1126,6 @@ function renderSessionLogsCompact(
 export {
   computeFilteredUsage,
   renderContextPanel,
-  renderEmptyDetailState,
   renderSessionDetailPanel,
   renderSessionLogsCompact,
   renderSessionSummary,

ui/src/ui/views/usage.ts

@@ -23,7 +23,7 @@ import {
   removeQueryToken,
   setQueryTokensForKey,
 } from "./usage-query.ts";
-import { renderEmptyDetailState, renderSessionDetailPanel } from "./usage-render-details.ts";
+import { renderSessionDetailPanel } from "./usage-render-details.ts";
 import {
   renderCostBreakdownCompact,
   renderDailyChartCompact,
@@ -815,10 +815,10 @@ export function renderUsage(props: UsageProps) {
                     filterActions.onClearSessions,
                   )}
                 </div>
-                <div class="usage-grid-column">
-                  ${
-                    primarySelectedEntry
-                      ? renderSessionDetailPanel(
+                ${
+                  primarySelectedEntry
+                    ? html`<div class="usage-grid-column">
+                        ${renderSessionDetailPanel(
                           primarySelectedEntry,
                           detail.timeSeries,
                           detail.timeSeriesLoading,
@@ -845,10 +845,10 @@ export function renderUsage(props: UsageProps) {
                           display.contextExpanded,
                           detailActions.onToggleContextExpanded,
                           filterActions.onClearSessions,
-                        )
-                      : renderEmptyDetailState()
-                  }
-                </div>
+                        )}
+                      </div>`
+                    : nothing
+                }
               </div>
             `
       }