feat: add message retry functionality and improve error handling

- Add pending retry state tracking and UI for interrupted messages
- Implement stream inactivity timeout detection (15s)
- Add retry button in status bar when messages fail
- Surface network/connection errors to user
- Add timestampNote field to messages for status indicators
- Improve error handling in SDK client and run operations
- Refactor shimmer-text component for better performance
- Update tests to include new timestampNote field

Author: brandonkachen

cli/src/chat.tsx

@@ -193,6 +193,10 @@ export const Chat = ({
 
   const { clipboardMessage } = useClipboard()
   const isConnected = useConnectionStatus()
+  const isConnectedRef = useRef(isConnected)
+  useEffect(() => {
+    isConnectedRef.current = isConnected
+  }, [isConnected])
   const mainAgentTimer = useElapsedTime()
   const timerStartTime = mainAgentTimer.startTime
 
@@ -393,10 +397,11 @@ export const Chat = ({
   // Timer events are currently tracked but not used for UI updates
   // Future: Could be used for analytics or debugging
 
-  const { sendMessage, clearMessages } = useSendMessage({
-    messages,
-    allToggleIds,
-    setMessages,
+  const { sendMessage, clearMessages, pendingRetryCount, retryPendingMessages } =
+    useSendMessage({
+      messages,
+      allToggleIds,
+      setMessages,
     setFocusedAgentId,
     setInputFocused,
     inputRef,
@@ -421,10 +426,11 @@ export const Chat = ({
     setHasReceivedPlanResponse,
     lastMessageMode,
     setLastMessageMode,
-    addSessionCredits,
-    isQueuePausedRef,
-    resumeQueue,
-  })
+      addSessionCredits,
+      isQueuePausedRef,
+      resumeQueue,
+      isConnectedRef,
+    })
 
   sendMessageRef.current = sendMessage
 
@@ -704,6 +710,8 @@ export const Chat = ({
             isConnected={isConnected}
             isAtBottom={isAtBottom}
             scrollToLatest={scrollToLatest}
+            pendingRetryCount={pendingRetryCount}
+            retryPendingMessages={retryPendingMessages}
           />
         )}
 

cli/src/components/__tests__/message-block.completion.test.tsx

@@ -28,6 +28,7 @@ const baseProps = {
   isAi: true,
   isLoading: false,
   timestamp: '12:00',
+  timestampNote: undefined,
   isComplete: false,
   completionTime: undefined,
   credits: undefined,

cli/src/components/__tests__/message-block.streaming.test.tsx

@@ -26,6 +26,7 @@ const baseProps = {
   isAi: true,
   isComplete: false,
   timestamp: '12:00',
+  timestampNote: undefined,
   completionTime: undefined,
   credits: undefined,
   textColor: theme.foreground,

cli/src/components/message-block.tsx

@@ -30,6 +30,7 @@ interface MessageBlockProps {
   isAi: boolean
   isLoading: boolean
   timestamp: string
+  timestampNote?: string
   isComplete?: boolean
   completionTime?: string
   credits?: number
@@ -55,6 +56,7 @@ export const MessageBlock = memo((props: MessageBlockProps): ReactNode => {
     isAi,
     isLoading,
     timestamp,
+    timestampNote,
     isComplete,
     completionTime,
     credits,
@@ -80,6 +82,9 @@ export const MessageBlock = memo((props: MessageBlockProps): ReactNode => {
 
   const theme = useTheme()
   const resolvedTextColor = textColor ?? theme.foreground
+  const timestampDisplay = timestampNote
+    ? `[${timestamp} · ${timestampNote}]`
+    : `[${timestamp}]`
 
   return (
     <>
@@ -94,7 +99,7 @@ export const MessageBlock = memo((props: MessageBlockProps): ReactNode => {
             alignSelf: 'flex-start',
           }}
         >
-          {`[${timestamp}]`}
+          {timestampDisplay}
         </text>
       )}
       {blocks ? (

cli/src/components/message-with-agents.tsx

@@ -192,6 +192,7 @@ export const MessageWithAgents = memo(
                   isAi={isAi}
                   isLoading={isLoading}
                   timestamp={message.timestamp}
+                  timestampNote={message.timestampNote}
                   isComplete={message.isComplete}
                   completionTime={message.completionTime}
                   credits={message.credits}
@@ -235,6 +236,7 @@ export const MessageWithAgents = memo(
                 isAi={isAi}
                 isLoading={isLoading}
                 timestamp={message.timestamp}
+                timestampNote={message.timestampNote}
                 isComplete={message.isComplete}
                 completionTime={message.completionTime}
                 credits={message.credits}

cli/src/components/scroll-to-bottom-button.tsx

@@ -21,13 +21,11 @@ export const ScrollToBottomButton = ({
       onMouseOver={() => setHovered(true)}
       onMouseOut={() => setHovered(false)}
     >
-      <text>
-        <span
-          fg={theme.info}
-          attributes={hovered ? TextAttributes.BOLD : TextAttributes.DIM}
-        >
-          {hovered ? '↓ Scroll to bottom ↓' : '↓'}
-        </span>
+      <text
+        fg={theme.info}
+        attributes={hovered ? TextAttributes.BOLD : TextAttributes.DIM}
+      >
+        {hovered ? '↓ Scroll to bottom ↓' : '↓'}
       </text>
     </Button>
   )

cli/src/components/shimmer-text.tsx

@@ -144,60 +144,63 @@ export const ShimmerText = ({
   const chars = text.split('')
   const numChars = chars.length
 
+  if (numChars === 0) {
+    return null
+  }
+
   useEffect(() => {
+    if (numChars === 0) {
+      return
+    }
     const pulseInterval = setInterval(() => {
       setPulse((prev) => (prev + 1) % numChars)
     }, interval)
 
     return () => clearInterval(pulseInterval)
   }, [interval, numChars])
 
-  const generateColors = (length: number, colorPalette: string[]): string[] => {
+  const generateColors = (length: number, palette: string[]): string[] => {
     if (length === 0) return []
-    if (colorPalette.length === 0) {
+    if (palette.length === 0) {
       return Array.from({ length }, () => theme.muted)
     }
-    if (colorPalette.length === 1) {
-      return Array.from({ length }, () => colorPalette[0])
+    if (palette.length === 1) {
+      return Array.from({ length }, () => palette[0])
     }
-    const generatedColors: string[] = []
+    const generated: string[] = []
     for (let i = 0; i < length; i++) {
       const ratio = length === 1 ? 0 : i / (length - 1)
       const colorIndex = Math.min(
-        colorPalette.length - 1,
-        Math.floor(ratio * (colorPalette.length - 1)),
+        palette.length - 1,
+        Math.floor(ratio * (palette.length - 1)),
       )
-      generatedColors.push(colorPalette[colorIndex])
+      generated.push(palette[colorIndex])
     }
-    return generatedColors
+    return generated
   }
 
   const palette = useMemo(() => {
     if (colors && colors.length > 0) {
       return colors
     }
-    if (primaryColor) {
-      const paletteSize = Math.max(8, Math.min(20, Math.ceil(numChars * 1.5)))
-      return generatePaletteFromPrimary(primaryColor, paletteSize, theme.muted)
-    }
-    // Use theme shimmer color as default
     const paletteSize = Math.max(8, Math.min(20, Math.ceil(numChars * 1.5)))
-    return generatePaletteFromPrimary(theme.info, paletteSize, theme.muted)
+    const seedColor = primaryColor ?? theme.info
+    return generatePaletteFromPrimary(seedColor, paletteSize, theme.muted)
   }, [colors, primaryColor, numChars, theme.info, theme.muted])
 
   const generateAttributes = (length: number): number[] => {
-    const attributes: number[] = []
+    const attrs: number[] = []
     for (let i = 0; i < length; i++) {
       const ratio = length <= 1 ? 0 : i / (length - 1)
       if (ratio < 0.23) {
-        attributes.push(TextAttributes.BOLD)
+        attrs.push(TextAttributes.BOLD)
       } else if (ratio < 0.69) {
-        attributes.push(TextAttributes.NONE)
+        attrs.push(TextAttributes.NONE)
       } else {
-        attributes.push(TextAttributes.DIM)
+        attrs.push(TextAttributes.DIM)
       }
     }
-    return attributes
+    return attrs
   }
 
   const generatedColors = useMemo(
@@ -207,39 +210,48 @@ export const ShimmerText = ({
   const attributes = useMemo(() => generateAttributes(numChars), [numChars])
 
   const parts: { text: string; color: string; attr: number }[] = []
-  let currentColor = generatedColors[0]
-  let currentAttr = attributes[0]
-  let currentText = ''
+  let currentColor: string | undefined
+  let currentAttr: number | undefined
+  let buffer = ''
 
   chars.forEach((char, index) => {
     const phase = (pulse - index + numChars) % numChars
-    const charColor = generatedColors[phase]
-    const charAttr = attributes[phase]
+    const charColor = generatedColors[phase] ?? theme.muted
+    const charAttr = attributes[phase] ?? TextAttributes.NONE
+
+    if (currentColor === undefined) {
+      currentColor = charColor
+      currentAttr = charAttr
+    }
 
     if (charColor === currentColor && charAttr === currentAttr) {
-      currentText += char
+      buffer += char
     } else {
-      if (currentText) {
+      if (buffer) {
         parts.push({
-          text: currentText,
-          color: currentColor,
-          attr: currentAttr,
+          text: buffer,
+          color: currentColor ?? theme.muted,
+          attr: currentAttr ?? TextAttributes.NONE,
         })
       }
-      currentText = char
+      buffer = char
       currentColor = charColor
       currentAttr = charAttr
     }
   })
 
-  if (currentText) {
-    parts.push({ text: currentText, color: currentColor, attr: currentAttr })
+  if (buffer) {
+    parts.push({
+      text: buffer,
+      color: currentColor ?? theme.muted,
+      attr: currentAttr ?? TextAttributes.NONE,
+    })
   }
 
   return (
     <>
       {parts.map((part, index) => (
-        <span key={index} fg={part.color} attributes={part.attr}>
+        <span key={`${part.color}-${index}`} fg={part.color} attributes={part.attr}>
           {part.text}
         </span>
       ))}