@alumbwe/anvil 1.0.0

package/src/components/validation-error-popover.tsx

@@ -0,0 +1,192 @@
+import { pluralize } from '@anvil/common/util/string'
+import React, { useState } from 'react'
+
+import { Button } from './button'
+import { TerminalLink } from './terminal-link'
+import { useTheme } from '../hooks/use-theme'
+import { getLoadedAgentsData } from '../utils/local-agent-registry'
+import { openFileAtPath } from '../utils/open-file'
+import { formatValidationError } from '../utils/validation-error-formatting'
+import { NETWORK_ERROR_ID } from '../utils/validation-error-helpers'
+
+import type { LocalAgentInfo } from '../utils/local-agent-registry'
+import type { FeedbackCategory } from '@anvil/common/constants/feedback'
+
+
+interface ValidationErrorPopoverProps {
+  errors: Array<{ id: string; message: string }>
+  onOpenFeedback?: (options: {
+    category: FeedbackCategory
+    footerMessage: string
+    errors: Array<{ id: string; message: string }>
+  }) => void
+  onClose?: () => void
+}
+
+export const ValidationErrorPopover: React.FC<ValidationErrorPopoverProps> = ({
+  errors,
+  onOpenFeedback,
+  onClose,
+}) => {
+  const theme = useTheme()
+  const [isReportHovered, setIsReportHovered] = useState(false)
+  const [isCloseHovered, setIsCloseHovered] = useState(false)
+  const loadedAgentsData = getLoadedAgentsData()
+
+  const errorCount = errors.length
+
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        padding: 1,
+        border: true,
+        borderStyle: 'single',
+        borderColor: theme.warning,
+        backgroundColor: theme.surface,
+        width: '100%',
+      }}
+    >
+      <box style={{ flexDirection: 'column', gap: 0 }}>
+        <box
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <text style={{ fg: theme.warning, wrapMode: 'word' }}>
+            {pluralize(errorCount, 'Error')}
+          </text>
+          {onClose && (
+            <Button
+              style={{ paddingRight: 1 }}
+              onClick={onClose}
+              onMouseOver={() => setIsCloseHovered(true)}
+              onMouseOut={() => setIsCloseHovered(false)}
+            >
+              <text
+                style={{
+                  fg: isCloseHovered ? theme.foreground : theme.secondary,
+                  wrapMode: 'none',
+                }}
+              >
+                [x]
+              </text>
+            </Button>
+          )}
+        </box>
+
+        <box style={{ flexDirection: 'column', paddingTop: 1, gap: 0 }}>
+          {errors.slice(0, 3).map((error, index) => {
+            const errorId = error.id ?? ''
+            const agentId = errorId.replace(/_\d+$/, '')
+            const isNetworkError = errorId === NETWORK_ERROR_ID
+            const agentInfo = loadedAgentsData?.agents.find(
+              (a) => a.id === agentId,
+            ) as LocalAgentInfo | undefined
+
+            const { fieldName, message } = formatValidationError(error.message)
+            const errorMsg = fieldName ? `${fieldName}: ${message}` : message
+
+            // Special handling for network errors - show message only without ID
+            if (isNetworkError) {
+              return (
+                <box
+                  key={errorId || `error-${index}`}
+                  style={{ flexDirection: 'column', paddingTop: 0.5 }}
+                >
+                  <text style={{ fg: theme.muted, wrapMode: 'word' }}>
+                    {`• ${errorMsg}`}
+                  </text>
+                </box>
+              )
+            }
+
+            if (agentInfo?.filePath) {
+              return (
+                <box
+                  key={errorId || `error-${index}`}
+                  style={{ flexDirection: 'column', paddingTop: 0.5 }}
+                >
+                  <text style={{ fg: theme.muted, wrapMode: 'word' }}>
+                    {'• '}
+                    <TerminalLink
+                      text={agentId}
+                      color={theme.info}
+                      inline={true}
+                      onActivate={() => openFileAtPath(agentInfo.filePath)}
+                    />
+                  </text>
+                  <text
+                    style={{
+                      fg: theme.muted,
+                      wrapMode: 'word',
+                      paddingLeft: 2,
+                    }}
+                  >
+                    {errorMsg}
+                  </text>
+                </box>
+              )
+            }
+
+            return (
+              <box
+                key={errorId || `error-${index}`}
+                style={{ flexDirection: 'column', paddingTop: 0.5 }}
+              >
+                <text style={{ fg: theme.muted, wrapMode: 'word' }}>
+                  {`• ${agentId || 'Unknown'}`}
+                </text>
+                <text
+                  style={{
+                    fg: theme.muted,
+                    wrapMode: 'word',
+                    paddingLeft: 2,
+                  }}
+                >
+                  {errorMsg}
+                </text>
+              </box>
+            )
+          })}
+
+          {errorCount > 3 && (
+            <text
+              style={{ fg: theme.muted, wrapMode: 'word', paddingTop: 0.5 }}
+            >
+              {`+ ${errorCount - 3} more`}
+            </text>
+          )}
+        </box>
+
+        {onOpenFeedback && (
+          <box style={{ paddingTop: 1, justifyContent: 'flex-end' }}>
+            <Button
+              onClick={() =>
+                onOpenFeedback({
+                  category: 'app_bug',
+                  footerMessage: 'Validation errors are auto-attached',
+                  errors,
+                })
+              }
+              onMouseOver={() => setIsReportHovered(true)}
+              onMouseOut={() => setIsReportHovered(false)}
+            >
+              <text style={{ wrapMode: 'none' }}>
+                {isReportHovered ? (
+                  <u>
+                    <span fg={theme.info}>Report issue</span>
+                  </u>
+                ) : (
+                  <span fg={theme.info}>Report issue</span>
+                )}
+              </text>
+            </Button>
+          </box>
+        )}
+      </box>
+    </box>
+  )
+}

package/src/contexts/__tests__/chat-runtime-context.test.tsx

@@ -0,0 +1,149 @@
+import { describe, expect, test } from 'bun:test'
+import { createTestRenderer } from '@opentui/core/testing'
+import { createRoot, flushSync } from '@opentui/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import React, { useEffect, useState } from 'react'
+
+import {
+  ChatRuntimeProvider,
+  useChatRuntime,
+  type ChatRuntime,
+} from '../chat-runtime-context'
+import {
+  registerActiveRun,
+  stopActiveRun,
+  type ActiveRunStopReason,
+} from '../../utils/active-run'
+
+import type { StreamStatus } from '../../hooks/use-message-queue'
+
+describe('ChatRuntimeProvider navigation', () => {
+  for (const phase of ['waiting', 'streaming'] satisfies StreamStatus[]) {
+    test(`preserves ${phase} runtime while visiting chat history`, async () => {
+      let runtime: ChatRuntime | undefined
+      let setShowHistory: ((show: boolean) => void) | undefined
+      let chatUnmounts = 0
+
+      const RuntimeSnapshot = ({ screen }: { screen: 'chat' | 'history' }) => {
+        runtime = useChatRuntime()
+        return (
+          <text>{`${screen}:${runtime.streamStatus}:${runtime.queuedMessages.length}`}</text>
+        )
+      }
+
+      // These must remain distinct component types: production routing
+      // unmounts Chat and mounts ChatHistoryScreen rather than updating props
+      // on one shared view component.
+      const ChatView = () => {
+        useEffect(
+          () => () => {
+            chatUnmounts++
+          },
+          [],
+        )
+        return <RuntimeSnapshot screen="chat" />
+      }
+      const HistoryView = () => <RuntimeSnapshot screen="history" />
+
+      const HistoryRouter = () => {
+        const [showHistory, setHistory] = useState(false)
+        setShowHistory = setHistory
+        return showHistory ? <HistoryView /> : <ChatView />
+      }
+
+      const setup = await createTestRenderer({ width: 80, height: 3 })
+      const root = createRoot(setup.renderer)
+      const queryClient = new QueryClient({
+        defaultOptions: { queries: { retry: false } },
+      })
+      const inputRef = { current: null }
+      flushSync(() => {
+        root.render(
+          <QueryClientProvider client={queryClient}>
+            <ChatRuntimeProvider inputRef={inputRef} continueChat={false}>
+              <HistoryRouter />
+            </ChatRuntimeProvider>
+          </QueryClientProvider>,
+        )
+      })
+      await setup.renderOnce()
+
+      try {
+        expect(runtime).toBeDefined()
+        const stopReasons: ActiveRunStopReason[] = []
+        registerActiveRun('navigation-test', (reason) => {
+          stopReasons.push(reason)
+        })
+
+        flushSync(() => {
+          runtime!.isChainInProgressRef.current = true
+          runtime!.setStreamStatus(phase)
+          runtime!.mainAgentTimer.start()
+          runtime!.addToQueue('keep me queued')
+        })
+        await setup.renderOnce()
+
+        const timerStartTime = runtime!.timerStartTime
+        const sendMessage = runtime!.sendMessage
+        expect(timerStartTime).not.toBeNull()
+        expect(setup.captureCharFrame()).toContain(`chat:${phase}:1`)
+
+        flushSync(() => setShowHistory!(true))
+        await setup.renderOnce()
+
+        expect(setup.captureCharFrame()).toContain(`history:${phase}:1`)
+        expect(chatUnmounts).toBe(1)
+        expect(runtime!.timerStartTime).toBe(timerStartTime)
+        expect(runtime!.sendMessage).toBe(sendMessage)
+
+        flushSync(() => setShowHistory!(false))
+        await setup.renderOnce()
+
+        expect(setup.captureCharFrame()).toContain(`chat:${phase}:1`)
+        expect(runtime!.timerStartTime).toBe(timerStartTime)
+        expect(runtime!.sendMessage).toBe(sendMessage)
+        let stoppedRun = false
+        flushSync(() => {
+          stoppedRun = stopActiveRun('user-interrupt')
+        })
+        expect(stoppedRun).toBe(true)
+        expect(stopReasons).toEqual(['user-interrupt'])
+        await setup.renderOnce()
+        expect(runtime!.queuePaused).toBe(true)
+        expect(runtime!.queuedMessages).toHaveLength(1)
+
+        // A queue add and interrupt can occur before React renders again.
+        // The synchronous queue ref must still make the interrupt pause it.
+        flushSync(() => {
+          runtime!.clearQueue()
+          runtime!.resumeQueue()
+          registerActiveRun('same-tick-test', (reason) => {
+            stopReasons.push(reason)
+          })
+          runtime!.addToQueue('queued in the interrupt tick')
+          stoppedRun = stopActiveRun('user-interrupt')
+        })
+        expect(stoppedRun).toBe(true)
+        await setup.renderOnce()
+        expect(runtime!.queuePaused).toBe(true)
+        expect(runtime!.queuedMessages).toHaveLength(1)
+        expect(stopReasons).toEqual(['user-interrupt', 'user-interrupt'])
+
+        // Context changes still clean a paused queue after the run owner has
+        // already been released.
+        flushSync(() => {
+          stoppedRun = stopActiveRun('new-chat')
+        })
+        expect(stoppedRun).toBe(false)
+        await setup.renderOnce()
+        expect(runtime!.queuedMessages).toHaveLength(0)
+        expect(runtime!.queuePaused).toBe(false)
+      } finally {
+        stopActiveRun('process-exit')
+        flushSync(() => root.unmount())
+        queryClient.clear()
+        setup.renderer.destroy()
+      }
+    })
+  }
+})

package/src/contexts/chat-runtime-context.tsx

@@ -0,0 +1,240 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+} from 'react'
+
+import { useAgentValidation } from '../hooks/use-agent-validation'
+import { useElapsedTime } from '../hooks/use-elapsed-time'
+import { holdsLiveFreebuffSlot } from '../utils/freebuff-session-api'
+import {
+  useMessageQueue,
+  type QueuedMessage,
+  type StreamStatus,
+} from '../hooks/use-message-queue'
+import { useSendMessage } from '../hooks/use-send-message'
+import {
+  useSubscriptionQuery,
+  type SubscriptionResponse,
+} from '../hooks/use-subscription-query'
+import { useChatStore } from '../state/chat-store'
+import { useFreebuffSessionStore } from '../state/freebuff-session-store'
+import { IS_FREEBUFF } from '../utils/constants'
+import { logger } from '../utils/logger'
+import {
+  applyActiveRunQueuePolicy,
+  registerActiveRunStopHandler,
+  type ActiveRunQueueControls,
+} from '../utils/active-run'
+
+import type { MultilineInputHandle } from '../components/multiline-input'
+import type { ElapsedTimeTracker } from '../hooks/use-elapsed-time'
+import type { SendMessageFn } from '../types/contracts/send-message'
+import type { PendingAttachment } from '../types/store'
+import type { MutableRefObject, ReactNode } from 'react'
+
+export interface ChatRuntime {
+  mainAgentTimer: ElapsedTimeTracker
+  timerStartTime: number | null
+  streamStatus: StreamStatus
+  isWaitingForResponse: boolean
+  isStreaming: boolean
+  setStreamStatus: (status: StreamStatus) => void
+  queuedMessages: QueuedMessage[]
+  queuePaused: boolean
+  streamMessageIdRef: MutableRefObject<string | null>
+  addToQueue: (message: string, attachments?: PendingAttachment[]) => void
+  addToQueueFront: (message: Omit<QueuedMessage, 'id'>) => void
+  editQueuedMessage: (id: string, content: string) => boolean
+  removeQueuedMessage: (id: string) => boolean
+  moveQueuedMessage: (id: string, toIndex: number) => boolean
+  setCanProcessQueue: (value: boolean | ((prev: boolean) => boolean)) => void
+  resumeQueue: () => void
+  clearQueue: () => QueuedMessage[]
+  isQueuePausedRef: MutableRefObject<boolean>
+  isProcessingQueueRef: MutableRefObject<boolean>
+  activeAgentStreamsRef: MutableRefObject<number>
+  isChainInProgressRef: MutableRefObject<boolean>
+  activeSubagentsRef: MutableRefObject<Set<string>>
+  registerScrollToLatest: (callback: () => void) => () => void
+  sendMessage: SendMessageFn
+  clearMessages: () => void
+  subscriptionData: SubscriptionResponse | null | undefined
+}
+
+const ChatRuntimeContext = createContext<ChatRuntime | null>(null)
+
+/**
+ * Owns everything tied to the active chat run. It remains mounted while
+ * history and Freebuff session-gate views replace the Chat surface.
+ */
+export const ChatRuntimeProvider = ({
+  agentId,
+  inputRef,
+  continueChat,
+  continueChatId,
+  children,
+}: {
+  agentId?: string
+  inputRef: MutableRefObject<MultilineInputHandle | null>
+  continueChat: boolean
+  continueChatId?: string
+  children: ReactNode
+}) => {
+  const agentMode = useChatStore((state) => state.agentMode)
+  const askUserState = useChatStore((state) => state.askUserState)
+  const isChainInProgress = useChatStore((state) => state.isChainInProgress)
+  const activeSubagents = useChatStore((state) => state.activeSubagents)
+
+  const activeAgentStreamsRef = useRef(0)
+  const isChainInProgressRef = useRef(isChainInProgress)
+  const activeSubagentsRef = useRef(activeSubagents)
+  const sendMessageRef = useRef<SendMessageFn | undefined>(undefined)
+  const scrollToLatestRef = useRef<() => void>(() => {})
+
+  useEffect(() => {
+    isChainInProgressRef.current = isChainInProgress
+  }, [isChainInProgress])
+
+  useEffect(() => {
+    activeSubagentsRef.current = activeSubagents
+  }, [activeSubagents])
+
+  const mainAgentTimer = useElapsedTime()
+
+  useEffect(() => {
+    if (askUserState !== null) {
+      mainAgentTimer.pause()
+    } else if (mainAgentTimer.isPaused) {
+      mainAgentTimer.resume()
+    }
+  }, [askUserState, mainAgentTimer])
+
+  const freebuffSession = useFreebuffSessionStore((state) => state.session)
+  const sendBlocked = IS_FREEBUFF && !holdsLiveFreebuffSlot(freebuffSession)
+
+  useEffect(() => {
+    if (sendBlocked) {
+      logger.info(
+        {},
+        '[chat-runtime] Freebuff session over; holding queued messages until rejoin',
+      )
+    }
+  }, [sendBlocked])
+
+  const queue = useMessageQueue(
+    (message) =>
+      sendMessageRef.current?.({
+        content: message.content,
+        agentMode,
+        attachments: message.attachments,
+      }) ?? Promise.resolve(),
+    isChainInProgressRef,
+    activeAgentStreamsRef,
+    { sendBlocked },
+  )
+
+  // The module-level stop entry point keeps this callback for the runtime's
+  // lifetime. Read controls through a ref so cancellation always uses the
+  // latest queue rather than the render that installed the handler.
+  const queueControls: ActiveRunQueueControls = {
+    pauseQueueIfPending: queue.pauseQueueIfPending,
+    discardQueue: queue.discardQueue,
+    setCanProcessQueue: queue.setCanProcessQueue,
+  }
+  const queueControlRef = useRef(queueControls)
+  queueControlRef.current = queueControls
+
+  useLayoutEffect(
+    () =>
+      registerActiveRunStopHandler((reason) => {
+        applyActiveRunQueuePolicy(reason, queueControlRef.current)
+      }),
+    [],
+  )
+
+  const scrollToLatest = useCallback(() => {
+    scrollToLatestRef.current()
+  }, [])
+
+  const registerScrollToLatest = useCallback((callback: () => void) => {
+    scrollToLatestRef.current = callback
+    return () => {
+      if (scrollToLatestRef.current === callback) {
+        scrollToLatestRef.current = () => {}
+      }
+    }
+  }, [])
+
+  const { validate: validateAgents } = useAgentValidation()
+  const { data: subscriptionData } = useSubscriptionQuery({
+    refetchInterval: 60 * 1000,
+  })
+  const { sendMessage, clearMessages } = useSendMessage({
+    inputRef,
+    activeSubagentsRef,
+    isChainInProgressRef,
+    setStreamStatus: queue.setStreamStatus,
+    setCanProcessQueue: queue.setCanProcessQueue,
+    agentId,
+    onBeforeMessageSend: validateAgents,
+    mainAgentTimer,
+    scrollToLatest,
+    onTimerEvent: () => {},
+    isQueuePausedRef: queue.isQueuePausedRef,
+    isProcessingQueueRef: queue.isProcessingQueueRef,
+    resumeQueue: queue.resumeQueue,
+    requeueMessageAtFront: queue.addToQueueFront,
+    continueChat,
+    continueChatId,
+    subscriptionData,
+  })
+
+  sendMessageRef.current = sendMessage
+
+  const value: ChatRuntime = {
+    mainAgentTimer,
+    timerStartTime: mainAgentTimer.startTime,
+    streamStatus: queue.streamStatus,
+    isWaitingForResponse: queue.streamStatus === 'waiting',
+    isStreaming: queue.streamStatus !== 'idle',
+    setStreamStatus: queue.setStreamStatus,
+    queuedMessages: queue.queuedMessages,
+    queuePaused: queue.queuePaused,
+    streamMessageIdRef: queue.streamMessageIdRef,
+    addToQueue: queue.addToQueue,
+    addToQueueFront: queue.addToQueueFront,
+    editQueuedMessage: queue.editQueuedMessage,
+    removeQueuedMessage: queue.removeQueuedMessage,
+    moveQueuedMessage: queue.moveQueuedMessage,
+    setCanProcessQueue: queue.setCanProcessQueue,
+    resumeQueue: queue.resumeQueue,
+    clearQueue: queue.clearQueue,
+    isQueuePausedRef: queue.isQueuePausedRef,
+    isProcessingQueueRef: queue.isProcessingQueueRef,
+    activeAgentStreamsRef,
+    isChainInProgressRef,
+    activeSubagentsRef,
+    registerScrollToLatest,
+    sendMessage,
+    clearMessages,
+    subscriptionData,
+  }
+
+  return (
+    <ChatRuntimeContext.Provider value={value}>
+      {children}
+    </ChatRuntimeContext.Provider>
+  )
+}
+
+export const useChatRuntime = (): ChatRuntime => {
+  const runtime = useContext(ChatRuntimeContext)
+  if (!runtime) {
+    throw new Error('useChatRuntime must be used inside ChatRuntimeProvider')
+  }
+  return runtime
+}

package/src/data/slash-commands.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, test } from 'bun:test'
+
+import { getSlashCommandsWithSkills } from './slash-commands'
+
+describe('getSlashCommandsWithSkills', () => {
+  test('keeps user-only skills in the composer for additional context', () => {
+    const commands = getSlashCommandsWithSkills({
+      interview: {
+        name: 'interview',
+        description: 'Ask questions before implementing',
+        content: 'Interview instructions',
+        disableModelInvocation: true,
+        filePath: '/skills/interview/SKILL.md',
+      },
+    })
+
+    expect(
+      commands.find((command) => command.id === 'skill:interview'),
+    ).toMatchObject({
+      label: 'skill:interview',
+      insertText: '/skill:interview ',
+    })
+  })
+})