fix(frontend): harden the streaming ui and extract copy and constants

frontend/src/composables/useChatStream.ts

@@ -1,4 +1,13 @@
 import { computed, onUnmounted, ref } from 'vue'
+import {
+  EVENT_LOG_MAX_ENTRIES,
+  HISTORY_CONTENT_MAX_LENGTH,
+  HISTORY_MAX_TURNS,
+  PLAYLIST_NAME_MAX_LENGTH,
+  PRIOR_RECOMMENDATIONS_MAX_TRACKS,
+  QUERY_MAX_LENGTH,
+} from '../lib/constants'
+import { formatMessage, messages } from '../lib/messages'
 import type { AssistantTurn, ChatTurn, EventLogEntry, TransportFailure } from '../lib/models'
 import { EMPTY_PLAYLIST_STATE } from '../lib/models'
 import {
@@ -9,24 +18,25 @@ import {
 import type {
   HistoryTurn,
   PlaylistCreateRequest,
-  PlaylistCreateResponse,
   PriorRecommendation,
   RecommendationRequest,
   StreamEvent,
 } from '../lib/types'
 
-const HISTORY_LIMIT = 12
-const PRIOR_RECOMMENDATION_LIMIT = 50
-const EVENT_LOG_LIMIT = 100
+type PlaylistCreator = (request: PlaylistCreateRequest) => Promise<{ url: string | null }>
 
-type PlaylistCreator = (request: PlaylistCreateRequest) => Promise<PlaylistCreateResponse>
+interface ActiveRequest {
+  controller: AbortController
+  turnId: string
+  terminalReceived: boolean
+}
 
 function assistantContent(turn: AssistantTurn): string {
   const trackLines = turn.tracks.map(
     (event) => `${event.rank}. ${event.track.title} by ${event.track.artists.join(', ')}`,
   )
   const content = [turn.intentSummary, ...trackLines].filter(Boolean).join('\n')
-  return content.slice(0, 2000)
+  return content.slice(0, HISTORY_CONTENT_MAX_LENGTH)
 }
 
 function buildHistory(turns: ChatTurn[]): HistoryTurn[] {
@@ -37,15 +47,21 @@ function buildHistory(turns: ChatTurn[]): HistoryTurn[] {
       return content ? { role: 'assistant', content } : null
     })
     .filter((turn): turn is HistoryTurn => turn !== null)
-    .slice(-HISTORY_LIMIT)
+    .slice(-HISTORY_MAX_TURNS)
+}
+
+function findLatestCompletedAssistant(turns: ChatTurn[]): AssistantTurn | undefined {
+  for (let index = turns.length - 1; index >= 0; index -= 1) {
+    const turn = turns[index]
+    if (turn?.role === 'assistant' && turn.status === 'done') return turn
+  }
+  return undefined
 }
 
 function buildPriorRecommendations(turns: ChatTurn[]): PriorRecommendation[] {
-  const latest = [...turns]
-    .reverse()
-    .find((turn): turn is AssistantTurn => turn.role === 'assistant' && turn.status === 'done')
+  const latest = findLatestCompletedAssistant(turns)
   if (!latest) return []
-  return latest.tracks.slice(0, PRIOR_RECOMMENDATION_LIMIT).map((event) => ({
+  return latest.tracks.slice(0, PRIOR_RECOMMENDATIONS_MAX_TRACKS).map((event) => ({
     rank: event.rank,
     track_id: event.track.id,
     title: event.track.title,
@@ -76,7 +92,7 @@ function reduceEvent(turn: AssistantTurn, event: StreamEvent): AssistantTurn {
           completion: event,
           transportFailure: {
             kind: 'protocol',
-            message: 'The final track count did not match the streamed results.',
+            message: messages.useChatStreamTrackCountMismatch,
           },
         }
       }
@@ -85,64 +101,69 @@ function reduceEvent(turn: AssistantTurn, event: StreamEvent): AssistantTurn {
 }
 
 function playlistName(query: string): string {
-  return `[discovery-by-llm] ${query}`.slice(0, 100).trim()
+  return formatMessage('useChatStreamPlaylistName', { query })
+    .slice(0, PLAYLIST_NAME_MAX_LENGTH)
+    .trim()
 }
 
 function createTurnId(): string {
-  return typeof crypto.randomUUID === 'function'
-    ? crypto.randomUUID()
-    : `${Date.now()}-${Math.random().toString(36).slice(2)}`
+  if (typeof crypto.randomUUID === 'function') return crypto.randomUUID()
+  return `${Date.now()}-${Math.random().toString(36).slice(2)}`
+}
+
+function findLatestAssistant(turns: ChatTurn[]): AssistantTurn | undefined {
+  for (let index = turns.length - 1; index >= 0; index -= 1) {
+    const turn = turns[index]
+    if (turn?.role === 'assistant') return turn
+  }
+  return undefined
 }
 
 /** Reduce recommendation streams into conversation view state. */
 export function useChatStream(createPlaylist: PlaylistCreator) {
   const turns = ref<ChatTurn[]>([])
   const eventLog = ref<EventLogEntry[]>([])
-  let activeController: AbortController | null = null
-  let activeTurnId: string | null = null
+  let activeRequest: ActiveRequest | null = null
 
   const isStreaming = computed(() =>
     turns.value.some((turn) => turn.role === 'assistant' && turn.status === 'streaming'),
   )
   const turnCount = computed(() => turns.value.filter((turn) => turn.role === 'user').length)
-  const isEmpty = computed(() => turns.value.length === 0)
-  const latestAssistant = computed(() =>
-    [...turns.value].reverse().find((turn): turn is AssistantTurn => turn.role === 'assistant'),
-  )
+  const latestAssistant = computed(() => findLatestAssistant(turns.value))
 
   function updateAssistant(id: string, update: (turn: AssistantTurn) => AssistantTurn): void {
-    turns.value = turns.value.map((turn) =>
-      turn.role === 'assistant' && turn.id === id ? update(turn) : turn,
-    )
+    turns.value = turns.value.map((turn) => {
+      if (turn.role === 'assistant' && turn.id === id) return update(turn)
+      return turn
+    })
   }
 
   function addLog(type: string, detail: string): void {
     eventLog.value = [
       ...eventLog.value,
       { timestamp: new Date().toLocaleTimeString(), type, detail },
-    ].slice(-EVENT_LOG_LIMIT)
+    ].slice(-EVENT_LOG_MAX_ENTRIES)
   }
 
   function cancelActive(shouldMarkTurn: boolean): void {
-    if (!activeController) return
-    activeController.abort()
-    if (shouldMarkTurn && activeTurnId) {
+    const request = activeRequest
+    if (!request) return
+    request.controller.abort()
+    if (shouldMarkTurn && !request.terminalReceived) {
       const failure: TransportFailure = {
         kind: 'cancelled',
-        message: 'This request was replaced by a newer request.',
+        message: messages.useChatStreamRequestReplaced,
       }
-      updateAssistant(activeTurnId, (turn) => ({
-        ...turn,
-        status: 'error',
-        transportFailure: failure,
-      }))
+      updateAssistant(request.turnId, (turn) => {
+        if (turn.status !== 'streaming') return turn
+        return { ...turn, status: 'error', transportFailure: failure }
+      })
     }
-    activeController = null
-    activeTurnId = null
+    activeRequest = null
   }
 
   async function send(query: string): Promise<void> {
-    const text = query.trim()
+    const text = query.trim().slice(0, QUERY_MAX_LENGTH)
     if (!text) return
     cancelActive(true)
 
@@ -171,30 +192,40 @@ export function useChatStream(createPlaylist: PlaylistCreator) {
     turns.value = [...turns.value, userTurn, assistantTurn]
 
     const controller = new AbortController()
-    activeController = controller
-    activeTurnId = assistantTurn.id
+    const requestState: ActiveRequest = {
+      controller,
+      turnId: assistantTurn.id,
+      terminalReceived: false,
+    }
+    activeRequest = requestState
 
     try {
       await streamRecommendations(request, controller.signal, (event) => {
+        if (activeRequest !== requestState || requestState.terminalReceived) return
+        if (event.type === 'done' || event.type === 'error') {
+          requestState.terminalReceived = true
+        }
         updateAssistant(assistantTurn.id, (turn) => reduceEvent(turn, event))
         addLog(event.type, JSON.stringify(event))
       })
     } catch (error) {
+      if (activeRequest !== requestState || requestState.terminalReceived) return
       if (isAbortError(error, controller.signal)) return
-      const failure: TransportFailure =
-        error instanceof StreamTransportError
-          ? { kind: error.kind, message: error.message }
-          : { kind: 'network', message: 'The recommendation request failed unexpectedly.' }
+      let failure: TransportFailure
+      if (error instanceof StreamTransportError) {
+        failure = { kind: error.kind, message: error.message }
+      } else {
+        failure = { kind: 'network', message: messages.useChatStreamUnexpectedFailure }
+      }
       updateAssistant(assistantTurn.id, (turn) => ({
         ...turn,
         status: 'error',
         transportFailure: failure,
       }))
-      addLog('transport', `${failure.kind}: ${failure.message}`)
+      addLog(messages.useChatStreamTransportEvent, `${failure.kind}: ${failure.message}`)
     } finally {
-      if (activeController === controller) {
-        activeController = null
-        activeTurnId = null
+      if (activeRequest === requestState) {
+        activeRequest = null
       }
     }
   }
@@ -237,7 +268,7 @@ export function useChatStream(createPlaylist: PlaylistCreator) {
           status: 'error',
           name,
           url: null,
-          message: 'Spotify could not create the playlist. Nothing was retried.',
+          message: messages.useChatStreamPlaylistFailure,
         },
       }))
     }
@@ -256,7 +287,6 @@ export function useChatStream(createPlaylist: PlaylistCreator) {
     eventLog,
     isStreaming,
     turnCount,
-    isEmpty,
     latestAssistant,
     send,
     savePlaylist,