perf(web): cache message date/time and sort key at parse time

Addresses review feedback on GoogleCloudPlatform#300.

- rebuildMessages sorted by re-parsing each timestamp into a Date on every
  comparison; it runs per streamed message, so that is hot. Derive an
  epoch-ms sortKey once at parse time and sort numerically. (Numeric key
  rather than a lexicographic string compare so ordering stays correct
  across the hub-store and Cloud-Logging sources even if their RFC3339
  offsets ever differ.)
- renderMessages created a Date and ran Intl date/time formatting for every
  message on every render; because composeText is @State, each keystroke
  re-rendered the whole list and re-formatted every row. Pre-format
  dateStr/timeStr once at parse time and just reference them in the loop.

deriveTimeFields centralises this parse-time derivation for both the hub
and Cloud-Logging parse paths.

No cast is added in shared/markdown.ts: marked's overload for { async: false }
already returns string (confirmed by tsc and typed lint), so `as string`
would be flagged as an unnecessary assertion here.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: 2 people

web/src/components/shared/agent-message-viewer.ts

@@ -64,10 +64,36 @@ interface ParsedMessage {
   urgent: boolean;
   broadcasted: boolean;
   timestamp: string;
+  /** Epoch ms of `timestamp`, derived once at parse time. Used for sorting so
+   *  `rebuildMessages` (called per streamed message) never re-parses dates. */
+  sortKey: number;
+  /** Pre-formatted date/time strings, derived once at parse time so the message
+   *  list does not re-run Intl formatting on every render (e.g. each keystroke
+   *  in the compose box, which re-renders the component). */
+  dateStr: string;
+  timeStr: string;
   insertId: string;
   raw: MessageLogEntry | null;
 }
 
+/**
+ * Derive the cached sort key and display strings from a message timestamp.
+ * Computed once per message at parse time rather than on every render/compare.
+ */
+function deriveTimeFields(timestamp: string): {
+  sortKey: number;
+  dateStr: string;
+  timeStr: string;
+} {
+  const d = new Date(timestamp);
+  const ms = d.getTime();
+  return {
+    sortKey: Number.isNaN(ms) ? 0 : ms,
+    dateStr: d.toLocaleDateString('en', { year: 'numeric', month: 'short', day: 'numeric' }),
+    timeStr: d.toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit' }),
+  };
+}
+
 const MAX_BUFFER = 500;
 
 /** Message types that are part of normal conversational flow; their type
@@ -637,6 +663,7 @@ export class ScionAgentMessageViewer extends LitElement {
       urgent: msg.urgent ?? false,
       broadcasted: msg.broadcasted ?? false,
       timestamp: msg.createdAt,
+      ...deriveTimeFields(msg.createdAt),
       insertId: `hub:${msg.id}`,
       raw: null,
     };
@@ -699,6 +726,7 @@ export class ScionAgentMessageViewer extends LitElement {
       urgent,
       broadcasted,
       timestamp: entry.timestamp,
+      ...deriveTimeFields(entry.timestamp),
       insertId: entry.insertId,
       raw: entry,
     };
@@ -717,9 +745,7 @@ export class ScionAgentMessageViewer extends LitElement {
 
   /** Sort buffered messages oldest-first and evict the oldest beyond MAX_BUFFER. */
   private rebuildMessages(): void {
-    const sorted = Array.from(this.entryMap.values()).sort(
-      (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
-    );
+    const sorted = Array.from(this.entryMap.values()).sort((a, b) => a.sortKey - b.sortKey);
 
     if (sorted.length > MAX_BUFFER) {
       // Drop the oldest (front) entries.
@@ -1074,23 +1100,15 @@ export class ScionAgentMessageViewer extends LitElement {
     let lastDate = '';
 
     for (const msg of this.messages) {
-      const d = new Date(msg.timestamp);
-      const dateStr = d.toLocaleDateString('en', {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      });
+      // dateStr/timeStr are pre-computed at parse time (see deriveTimeFields)
+      // so this loop stays allocation-free on re-render.
+      const { dateStr, timeStr } = msg;
 
       if (dateStr !== lastDate) {
         lastDate = dateStr;
         rows.push(html`<div class="date-divider">${dateStr}</div>`);
       }
 
-      const timeStr = d.toLocaleTimeString('en', {
-        hour12: false,
-        hour: '2-digit',
-        minute: '2-digit',
-      });
       const isExpanded = this.expandedIds.has(msg.insertId);
       const isProjectView = !this.agentId;
       const isUser = !isProjectView && msg.direction === 'received';

web/src/shared/markdown.ts

@@ -39,6 +39,8 @@ async function loadRenderer(): Promise<MarkdownRenderer> {
 
       return {
         render(markdown: string): string {
+          // marked's overload for { async: false } already returns string, so
+          // no cast is needed here (verified by tsc + typed lint).
           const rawHtml = marked.parse(markdown, { async: false });
           return purify.sanitize(rawHtml);
         },