feat: improve status indicator and completion time display

- Show 'working...' shimmer text with elapsed time in status indicator
- Swap credits and elapsed time order in message completion (credits first)
- Document ShimmerText reconciliation issues with <box> in knowledge.md

Author: brandonkachen

cli/knowledge.md

@@ -360,6 +360,55 @@ The cleanest solution is to use a direct ternary with separate `<text>` elements
 
 **Note:** Helper components like `ConditionalText` are not recommended as they add unnecessary abstraction without providing meaningful benefits. The direct ternary pattern is clearer and easier to maintain.
 
+### Combining ShimmerText with Other Inline Elements
+
+**Problem**: When you need to display multiple inline elements alongside a dynamically updating component like `ShimmerText` (e.g., showing elapsed time + shimmer text), using `<box>` causes reconciliation errors.
+
+**Why `<box>` fails:**
+
+```tsx
+// ❌ PROBLEMATIC: ShimmerText in a <box> with other elements causes reconciliation errors
+<box style={{ gap: 1 }}>
+  <text fg={theme.secondary}>{elapsedSeconds}s</text>
+  <text wrap={false}>
+    <ShimmerText text="working..." />
+  </text>
+</box>
+```
+
+The issue occurs because:
+1. ShimmerText constantly updates its internal state (pulse animation)
+2. Each update re-renders with different `<span>` structures
+3. OpenTUI's reconciler struggles to match up the changing children inside the `<box>`
+4. Results in "Component of type 'span' must be created inside of a text node" error
+
+**✅ Solution: Use a Fragment with inline spans**
+
+Instead of using `<box>`, return a Fragment containing all inline elements:
+
+```tsx
+// Component returns Fragment with inline elements
+if (elapsedSeconds > 0) {
+  return (
+    <>
+      <span fg={theme.secondary}>{elapsedSeconds}s </span>
+      <ShimmerText text="working..." />
+    </>
+  )
+}
+
+// Parent wraps in <text>
+<text style={{ wrapMode: 'none' }}>{statusIndicatorNode}</text>
+```
+
+**Key principles:**
+- Avoid wrapping dynamically updating components (like ShimmerText) in `<box>` elements
+- Use Fragments to group inline elements that will be wrapped in `<text>` by the parent
+- Include spacing as part of the text content (e.g., `"{elapsedSeconds}s "` with trailing space)
+- Let the parent component provide the `<text>` wrapper for proper rendering
+
+This pattern works because all elements remain inline within a single stable `<text>` container, avoiding the reconciliation issues that occur when ShimmerText updates inside a `<box>`.
+
 ### The "Text Must Be Created Inside of a Text Node" Error
 
 **Error message:**

cli/src/components/status-indicator.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react'
 
-import { ElapsedTimer } from './elapsed-timer'
 import { ShimmerText } from './shimmer-text'
 import { useTheme } from '../hooks/use-theme'
 import { getCodebuffClient } from '../utils/codebuff-client'
 
+import type { ElapsedTimeTracker } from '../hooks/use-elapsed-time'
+
 const useConnectionStatus = () => {
   const [isConnected, setIsConnected] = useState(true)
 
@@ -37,18 +38,17 @@ const useConnectionStatus = () => {
 export const StatusIndicator = ({
   clipboardMessage,
   isActive = false,
-  isWaitingForResponse = false,
-  timerStartTime,
+  timer,
   nextCtrlCWillExit,
 }: {
   clipboardMessage?: string | null
   isActive?: boolean
-  isWaitingForResponse?: boolean
-  timerStartTime: number | null
+  timer: ElapsedTimeTracker
   nextCtrlCWillExit: boolean
 }) => {
   const theme = useTheme()
   const isConnected = useConnectionStatus()
+  const elapsedSeconds = timer.elapsedSeconds
 
   if (nextCtrlCWillExit) {
     return <span fg={theme.secondary}>Press Ctrl-C again to exit</span>
@@ -69,16 +69,29 @@ export const StatusIndicator = ({
   }
 
   if (isActive) {
-    if (isWaitingForResponse) {
+    // If we have elapsed time > 0, show it with "working..."
+    if (elapsedSeconds > 0) {
       return (
-        <ShimmerText
-          text="thinking..."
-          interval={160}
-          primaryColor={theme.secondary}
-        />
+        <>
+          <ShimmerText
+            text="working..."
+            interval={160}
+            primaryColor={theme.secondary}
+          />
+          <span fg={theme.muted}> </span>
+          <span fg={theme.secondary}>{elapsedSeconds}s</span>
+        </>
       )
     }
-    return <ElapsedTimer startTime={timerStartTime} />
+
+    // Otherwise show thinking...
+    return (
+      <ShimmerText
+        text="thinking..."
+        interval={160}
+        primaryColor={theme.secondary}
+      />
+    )
   }
 
   return null
@@ -87,18 +100,17 @@ export const StatusIndicator = ({
 export const useHasStatus = (params: {
   isActive: boolean
   clipboardMessage?: string | null
-  timerStartTime?: number | null
+  timer?: ElapsedTimeTracker
   nextCtrlCWillExit: boolean
 }): boolean => {
-  const { isActive, clipboardMessage, timerStartTime, nextCtrlCWillExit } =
-    params
+  const { isActive, clipboardMessage, timer, nextCtrlCWillExit } = params
 
   const isConnected = useConnectionStatus()
   return (
     isConnected === false ||
     isActive ||
     Boolean(clipboardMessage) ||
-    Boolean(timerStartTime) ||
+    Boolean(timer?.startTime) ||
     nextCtrlCWillExit
   )
 }