@alumbwe/anvil 1.0.18 → 1.0.20

package/src/commands/router.ts

@@ -0,0 +1,487 @@
+import { AnalyticsEvent } from '@anvil/common/constants/analytics-events'
+import { runTerminalCommand } from '@anvil/sdk'
+
+
+import {
+  findCommand,
+  type RouterParams,
+  type CommandResult,
+} from './command-registry'
+import {
+  isSlashCommand,
+  parseCommandInput,
+} from './router-utils'
+import { buildInterviewPrompt, buildPlanPrompt, buildReviewPrompt } from './prompt-builders'
+import { getProjectRoot } from '../project-files'
+import { useChatStore } from '../state/chat-store'
+import { useAnvilSessionStore } from '../state/anvil-session-store'
+import { trackEvent } from '../utils/analytics'
+import {
+  buildBashHistoryMessages,
+  createRunTerminalToolResult,
+} from '../utils/bash-messages'
+import { showClipboardMessage } from '../utils/clipboard'
+import { IS_ANVIL } from '../utils/constants'
+import { getSystemProcessEnv } from '../utils/env'
+import { terminalCommandBroker } from '../utils/terminal-command-broker'
+import { getSystemMessage, getUserMessage } from '../utils/message-history'
+import {
+  capturePendingAttachments,
+  hasProcessingFiles,
+  hasProcessingImages,
+  validateAndAddImage,
+} from '../utils/pending-attachments'
+
+/**
+ * Run a bash command with automatic ghost/direct mode selection.
+ * Uses ghost mode when streaming or chain in progress, otherwise adds directly to chat history.
+ */
+export function runBashCommand(command: string) {
+  const {
+    streamingAgents,
+    isChainInProgress,
+    setMessages,
+    addPendingBashMessage,
+    updatePendingBashMessage,
+  } = useChatStore.getState()
+
+  const ghost = streamingAgents.size > 0 || isChainInProgress
+  const id = crypto.randomUUID()
+  const commandCwd = process.cwd()
+  const startTime = Date.now()
+
+  if (ghost) {
+    // Ghost mode: add to pending messages
+    addPendingBashMessage({
+      id,
+      command,
+      stdout: '',
+      stderr: '',
+      exitCode: 0,
+      isRunning: true,
+      startTime: Date.now(),
+      cwd: commandCwd,
+    })
+  } else {
+    // Direct mode: add to chat history with placeholder output (user + assistant)
+    const { assistantMessage } = buildBashHistoryMessages({
+      command,
+      cwd: commandCwd,
+      toolCallId: id,
+      output: '...',
+    })
+    setMessages((prev) => [...prev, assistantMessage])
+  }
+
+  runTerminalCommand({
+    command,
+    process_type: 'SYNC',
+    cwd: commandCwd,
+    timeout_seconds: -1,
+    env: getSystemProcessEnv(),
+    terminalCommandBroker,
+  })
+    .then(([{ value }]) => {
+      const stdout = 'stdout' in value ? value.stdout || '' : ''
+      const stderr = 'stderr' in value ? value.stderr || '' : ''
+      const exitCode = 'exitCode' in value ? value.exitCode ?? 0 : 0
+
+      // Track terminal command completion
+      const durationMs = Date.now() - startTime
+      trackEvent(AnalyticsEvent.TERMINAL_COMMAND_COMPLETED, {
+        command: command.split(' ')[0], // Just the command name, not args
+        exitCode,
+        success: exitCode === 0,
+        ghost,
+        durationMs,
+        hasStdout: stdout.length > 0,
+        hasStderr: stderr.length > 0,
+        stdoutLength: stdout.length,
+        stderrLength: stderr.length,
+      })
+
+      if (ghost) {
+        updatePendingBashMessage(id, {
+          stdout,
+          stderr,
+          exitCode,
+          isRunning: false,
+        })
+      } else {
+        const toolResultOutput = createRunTerminalToolResult({
+          command,
+          cwd: commandCwd,
+          stdout: stdout || null,
+          stderr: stderr || null,
+          exitCode,
+        })
+        const outputJson = JSON.stringify(toolResultOutput)
+
+        setMessages((prev) =>
+          prev.map((msg) => {
+            if (!msg.blocks) return msg
+            let didUpdate = false
+            const blocks = msg.blocks.map((block) => {
+              if ('toolCallId' in block && block.toolCallId === id) {
+                didUpdate = true
+                return { ...block, output: outputJson }
+              }
+              return block
+            })
+            return didUpdate ? { ...msg, blocks, isComplete: true } : msg
+          }),
+        )
+
+        // Also add to pending bash messages so the next user message includes this context for the LLM
+        // Mark as already added to history to avoid duplicate UI entries
+        addPendingBashMessage({
+          id,
+          command,
+          stdout,
+          stderr,
+          exitCode,
+          isRunning: false,
+          cwd: commandCwd,
+          addedToHistory: true,
+        })
+      }
+    })
+    .catch((error) => {
+      const errorMessage =
+        error instanceof Error ? error.message : String(error)
+
+      // Track terminal command completion with error
+      const durationMs = Date.now() - startTime
+      trackEvent(AnalyticsEvent.TERMINAL_COMMAND_COMPLETED, {
+        command: command.split(' ')[0], // Just the command name, not args
+        exitCode: 1,
+        success: false,
+        ghost,
+        durationMs,
+        hasStdout: false,
+        hasStderr: true,
+        stdoutLength: 0,
+        stderrLength: errorMessage.length,
+        isException: true,
+      })
+
+      if (ghost) {
+        updatePendingBashMessage(id, {
+          stdout: '',
+          stderr: errorMessage,
+          exitCode: 1,
+          isRunning: false,
+        })
+      } else {
+        const errorToolResultOutput = createRunTerminalToolResult({
+          command,
+          cwd: commandCwd,
+          stdout: null,
+          stderr: null,
+          exitCode: 1,
+          errorMessage,
+        })
+        const errorOutputJson = JSON.stringify(errorToolResultOutput)
+
+        setMessages((prev) =>
+          prev.map((msg) => {
+            if (!msg.blocks) return msg
+            let didUpdate = false
+            const blocks = msg.blocks.map((block) => {
+              if ('toolCallId' in block && block.toolCallId === id) {
+                didUpdate = true
+                return { ...block, output: errorOutputJson }
+              }
+              return block
+            })
+            return didUpdate ? { ...msg, blocks, isComplete: true } : msg
+          }),
+        )
+
+        // Also add to pending bash messages so the next user message includes this context for the LLM
+        // Mark as already added to history to avoid duplicate UI entries
+        addPendingBashMessage({
+          id,
+          command,
+          stdout: '',
+          stderr: errorMessage,
+          exitCode: 1,
+          isRunning: false,
+          cwd: commandCwd,
+          addedToHistory: true,
+        })
+      }
+    })
+}
+
+/**
+ * Add a completed bash command result to the chat message history.
+ * Note: This is UI-only; we no longer send these commands to the AI context.
+ */
+export function addBashMessageToHistory(params: {
+  command: string
+  stdout: string
+  stderr: string | null
+  exitCode: number
+  cwd: string
+  setMessages: RouterParams['setMessages']
+}) {
+  const { command, stdout, stderr, exitCode, cwd, setMessages } = params
+  const toolResultOutput = createRunTerminalToolResult({
+    command,
+    cwd,
+    stdout: stdout || null,
+    stderr: stderr ?? null,
+    exitCode,
+  })
+  const toolCallId = crypto.randomUUID()
+  const outputJson = JSON.stringify(toolResultOutput)
+  const { assistantMessage } = buildBashHistoryMessages({
+    command,
+    cwd,
+    toolCallId,
+    output: outputJson,
+    isComplete: true,
+  })
+
+  setMessages((prev) => [...prev, assistantMessage])
+}
+
+export async function routeUserPrompt(
+  params: RouterParams,
+): Promise<CommandResult> {
+  const {
+    agentMode,
+    inputRef,
+    inputValue,
+    isChainInProgressRef,
+    isStreaming,
+    streamMessageIdRef,
+    addToQueue,
+    saveToHistory,
+    scrollToLatest,
+    sendMessage,
+    setInputFocused,
+    setInputValue,
+    setMessages,
+  } = params
+
+  const inputMode = useChatStore.getState().inputMode
+  const setInputMode = useChatStore.getState().setInputMode
+  const pendingAttachments = useChatStore.getState().pendingAttachments
+  const pendingImages = pendingAttachments.filter((a) => a.kind === 'image')
+  const pendingTextAttachments = pendingAttachments.filter(
+    (a) => a.kind === 'text',
+  )
+
+  const trimmed = inputValue.trim()
+  // Allow empty messages if there are pending attachments (images or text)
+  const hasAttachments = pendingAttachments.length > 0
+  if (!trimmed && !hasAttachments) return
+
+  // Track user input complete
+  // Count @ mentions (simple pattern match - more accurate than nothing)
+  const mentionMatches = trimmed.match(/@\S+/g) || []
+  trackEvent(AnalyticsEvent.USER_INPUT_COMPLETE, {
+    inputLength: trimmed.length,
+    mode: agentMode,
+    inputMode,
+    hasImages: pendingImages.length > 0,
+    imageCount: pendingImages.length,
+    hasTextAttachments: pendingTextAttachments.length > 0,
+    textAttachmentCount: pendingTextAttachments.length,
+    isSlashCommand: isSlashCommand(trimmed),
+    isBashCommand: trimmed.startsWith('!'),
+    hasMentions: mentionMatches.length > 0,
+    mentionCount: mentionMatches.length,
+  })
+
+  // DAU signal: one un-sampled event per user-submitted prompt. The CLI's
+  // distinct id resolves to the canonical anvil user id (anonymous id is
+  // aliased to the real user id on login), matching the web and chat surfaces
+  // so combined DAU is a single unique-users query. Anvil-only: anvil
+  // CLI usage is intentionally excluded.
+  if (IS_ANVIL) {
+    const anvilSession = useAnvilSessionStore.getState().session
+    trackEvent(AnalyticsEvent.MESSAGE_SENT, {
+      surface: 'cli',
+      accessTier:
+        anvilSession && 'accessTier' in anvilSession
+          ? anvilSession.accessTier
+          : 'unknown',
+      mode: agentMode,
+      inputMode,
+      inputLength: trimmed.length,
+      isSlashCommand: isSlashCommand(trimmed),
+      isBashCommand: trimmed.startsWith('!'),
+      hasImages: pendingImages.length > 0,
+    })
+  }
+
+  // Handle bash mode commands
+  if (inputMode === 'bash') {
+    const commandWithBang = '!' + trimmed
+    saveToHistory(commandWithBang)
+    setInputValue({ text: '', cursorPosition: 0, lastEditDueToNav: false })
+    setInputMode('default')
+    setInputFocused(true)
+    inputRef.current?.focus()
+
+    runBashCommand(trimmed)
+    return
+  }
+
+  // Handle plan mode input
+  if (inputMode === 'plan') {
+    if (!trimmed) return
+    saveToHistory(trimmed)
+    setInputValue({ text: '', cursorPosition: 0, lastEditDueToNav: false })
+    setInputMode('default')
+    setInputFocused(true)
+    inputRef.current?.focus()
+
+    sendMessage({ content: buildPlanPrompt(trimmed), agentMode })
+    setTimeout(() => {
+      scrollToLatest()
+    }, 0)
+    return
+  }
+
+  // Handle interview mode input
+  if (inputMode === 'interview') {
+    if (!trimmed) return
+    saveToHistory(trimmed)
+    setInputValue({ text: '', cursorPosition: 0, lastEditDueToNav: false })
+    setInputMode('default')
+    setInputFocused(true)
+    inputRef.current?.focus()
+
+    sendMessage({ content: buildInterviewPrompt(trimmed), agentMode })
+    setTimeout(() => {
+      scrollToLatest()
+    }, 0)
+    return
+  }
+
+  // Handle review mode input
+  if (inputMode === 'review') {
+    if (!trimmed) return
+    saveToHistory(trimmed)
+    setInputValue({ text: '', cursorPosition: 0, lastEditDueToNav: false })
+    setInputMode('default')
+    setInputFocused(true)
+    inputRef.current?.focus()
+
+    sendMessage({ content: buildReviewPrompt('custom', trimmed), agentMode })
+    setTimeout(() => {
+      scrollToLatest()
+    }, 0)
+    return
+  }
+
+  // Handle bash commands from queue (starts with '!')
+  if (trimmed.startsWith('!') && trimmed.length > 1) {
+    const command = trimmed.slice(1)
+    saveToHistory(trimmed)
+    setInputValue({ text: '', cursorPosition: 0, lastEditDueToNav: false })
+    runBashCommand(command)
+    return
+  }
+
+  // Handle image mode input
+  if (inputMode === 'image') {
+    const imagePath = trimmed
+    const projectRoot = getProjectRoot()
+
+    // Validate and add the image (handles path resolution, format check, and processing)
+    const result = await validateAndAddImage(imagePath, projectRoot)
+    if (!result.success) {
+      setMessages((prev) => [
+        ...prev,
+        getUserMessage(trimmed),
+        getSystemMessage(`❌ ${result.error}`),
+      ])
+    }
+
+    // Note: No system message added here - the PendingImagesBanner shows attached images
+    saveToHistory(trimmed)
+    setInputValue({ text: '', cursorPosition: 0, lastEditDueToNav: false })
+    setInputMode('default')
+    return
+  }
+
+  // Handle slash commands or configured slashless exact commands.
+  const parsedCommand = parseCommandInput(trimmed)
+  if (parsedCommand) {
+    const commandDef = findCommand(parsedCommand.command)
+    if (commandDef) {
+      const argsLength = parsedCommand.args.length
+      const analyticsPayload = {
+        command: commandDef.name,
+        hasArgs: argsLength > 0,
+        argsLength,
+        agentMode,
+        ...(parsedCommand.implicitCommand ? { implicitCommand: true } : {}),
+      }
+
+      trackEvent(AnalyticsEvent.SLASH_COMMAND_USED, analyticsPayload)
+
+      // The command handler (via defineCommand/defineCommandWithArgs factories)
+      // is responsible for validating and handling args
+      return await commandDef.handler(params, parsedCommand.args)
+    }
+  }
+
+  // Regular message or unknown slash command - send to agent
+
+  // Block sending if attachments are still processing
+  if (hasProcessingImages() || hasProcessingFiles()) {
+    showClipboardMessage('processing attachments...', {
+      durationMs: 2000,
+    })
+    return
+  }
+
+  saveToHistory(trimmed)
+  setInputValue({ text: '', cursorPosition: 0, lastEditDueToNav: false })
+
+  if (
+    isStreaming ||
+    streamMessageIdRef.current ||
+    isChainInProgressRef.current
+  ) {
+    const pendingAttachmentsForQueue = capturePendingAttachments()
+    // Pass a copy of pending attachments to the queue
+    addToQueue(trimmed, pendingAttachmentsForQueue)
+
+    setInputFocused(true)
+    inputRef.current?.focus()
+    return
+  }
+
+  // Unknown slash command - show error
+  if (isSlashCommand(trimmed)) {
+    // Track invalid/unknown command (only log command name, not full input for privacy)
+    const attemptedCmd = trimmed.slice(1).split(/\s+/)[0]?.toLowerCase() || ''
+    trackEvent(AnalyticsEvent.INVALID_COMMAND, {
+      attemptedCommand: attemptedCmd,
+      inputLength: trimmed.length,
+      agentMode,
+    })
+
+    setMessages((prev) => [
+      ...prev,
+      getUserMessage(trimmed),
+      getSystemMessage(`Command not found: ${JSON.stringify(trimmed)}`),
+    ])
+    return
+  }
+
+  sendMessage({ content: trimmed, agentMode })
+
+  setTimeout(() => {
+    scrollToLatest()
+  }, 0)
+
+  return
+}

package/src/commands/usage.ts

@@ -0,0 +1,26 @@
+import { useChatStore } from '../state/chat-store'
+import { getAuthToken } from '../utils/auth'
+import { getSystemMessage } from '../utils/message-history'
+
+import type { PostUserMessageFn } from '../types/contracts/send-message'
+
+export async function handleUsageCommand(): Promise<{
+  postUserMessage: PostUserMessageFn
+}> {
+  const authToken = getAuthToken()
+
+  if (!authToken) {
+    const postUserMessage: PostUserMessageFn = (prev) => [
+      ...prev,
+      getSystemMessage('Please log in first to view your usage.'),
+    ]
+    return { postUserMessage }
+  }
+
+  // Show the usage banner - the useUsageQuery hook will automatically fetch
+  // the data when the banner becomes visible
+  useChatStore.getState().setInputMode('usage')
+
+  const postUserMessage: PostUserMessageFn = (prev) => prev
+  return { postUserMessage }
+}

package/src/components/__tests__/ad-banner.test.tsx

@@ -0,0 +1,83 @@
+import { describe, expect, test } from 'bun:test'
+
+import { getAdDisplayLabel, getInlineAdLayout } from '../ad-banner'
+
+describe('ad banner display label', () => {
+  test('uses the display domain when the ad has a URL', () => {
+    expect(
+      getAdDisplayLabel({
+        title: 'Example Sponsor',
+        url: 'https://www.example.com/path',
+      }),
+    ).toEqual({ text: 'example.com', variant: 'domain' })
+  })
+
+  test('uses the ad title when the ad has no URL', () => {
+    expect(
+      getAdDisplayLabel({
+        title: 'Example Sponsor',
+        url: '',
+      }),
+    ).toEqual({ text: 'Example Sponsor', variant: 'title' })
+  })
+})
+
+describe('inline ad layout', () => {
+  const ad = {
+    adText:
+      'Deploy frontends globally with zero config and preview every pull request.',
+    title: 'Vercel',
+    url: 'https://www.vercel.com/products',
+  }
+
+  test('fits the compact copy and sponsor within the card interior', () => {
+    const width = 60
+    const layout = getInlineAdLayout(ad, width)
+    const header = `${layout.title}  Ad`
+    const detail = `${layout.description}  ${layout.label} ↗`
+
+    expect(header.length).toBeLessThanOrEqual(width - 4)
+    expect(detail.length).toBeLessThanOrEqual(width - 4)
+    expect(layout.title).toBe('Vercel')
+    expect(layout.label).toBe('vercel.com')
+    expect(layout.description.endsWith('…')).toBe(true)
+  })
+
+  test('truncates long labels without starving narrow cards', () => {
+    const layout = getInlineAdLayout(
+      {
+        ...ad,
+        url: 'https://www.extraordinarily-long-sponsor-domain.example',
+      },
+      48,
+    )
+
+    expect(layout.label).toBe('extraordinari…')
+    expect(layout.description.length).toBeGreaterThan(0)
+    expect(`${layout.title}  Ad`.length).toBeLessThanOrEqual(44)
+  })
+
+  test('prioritizes copy over the destination on very narrow cards', () => {
+    const width = 47
+    const layout = getInlineAdLayout(ad, width)
+
+    expect(layout.label).toBe('')
+    expect(layout.description.length).toBe(width - 4)
+    expect(layout.description.endsWith('…')).toBe(true)
+  })
+
+  test('uses the full detail row when no destination domain is available', () => {
+    const layout = getInlineAdLayout(
+      {
+        adText: 'A Carbon ad whose tracked destination is intentionally hidden.',
+        title: 'Example Sponsor',
+        url: '',
+      },
+      40,
+    )
+
+    expect(layout.title).toBe('Example Sponsor')
+    expect(layout.label).toBe('')
+    expect(layout.description.length).toBe(36)
+  })
+})

package/src/components/__tests__/anvil-landing-heading-row.test.tsx

@@ -0,0 +1,91 @@
+import { afterEach, beforeAll, describe, expect, test } from 'bun:test'
+import { createTestRenderer } from '@opentui/core/testing'
+import { createRoot, flushSync } from '@opentui/react'
+import React from 'react'
+
+import { LandingHeadingRow } from '../anvil-landing-screen'
+import { initializeThemeStore } from '../../hooks/use-theme'
+import { getAnvilStreakLine } from '../../utils/anvil-streak-line'
+
+let cleanupRenderer: (() => void) | undefined
+
+beforeAll(() => {
+  initializeThemeStore()
+})
+
+afterEach(() => {
+  cleanupRenderer?.()
+  cleanupRenderer = undefined
+})
+
+/**
+ * Mirrors the landing screen's containers around the heading row: a
+ * shrink-to-fit column inside a centered, maxWidth-capped column. That shape
+ * is what broke the row — with nothing wider on screen the column collapses
+ * to the row's own width, leaving space-between no space to hand out.
+ */
+const mountHeadingRow = async (streak: number, contentMaxWidth: number) => {
+  const setup = await createTestRenderer({ width: contentMaxWidth + 4, height: 6 })
+  const root = createRoot(setup.renderer)
+  cleanupRenderer = () => {
+    flushSync(() => root.unmount())
+    setup.renderer.destroy()
+  }
+  flushSync(() =>
+    root.render(
+      <box style={{ flexDirection: 'column', alignItems: 'center', maxWidth: contentMaxWidth }}>
+        <box style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 0 }}>
+          <LandingHeadingRow
+            streakLine={getAnvilStreakLine(streak)}
+            marginBottom={1}
+          />
+        </box>
+      </box>,
+    ),
+  )
+  await setup.renderOnce()
+  return setup
+}
+
+const renderHeadingRow = async (streak: number, contentMaxWidth: number) =>
+  (await mountHeadingRow(streak, contentMaxWidth)).captureCharFrame()
+
+describe('LandingHeadingRow', () => {
+  test('keeps the streak clear of the heading when nothing wider is on screen', async () => {
+    const frame = await renderHeadingRow(18, 60)
+    const line = frame
+      .split('\n')
+      .find((row) => row.includes('Start coding for free'))!
+
+    // The bug: "Start coding for free18 day streak".
+    expect(line).not.toContain('free18')
+    expect(line).toMatch(/Start coding for free {3,}18 day streak/)
+  })
+
+  test('draws the progress dots as filled/hollow circles', async () => {
+    const frame = await renderHeadingRow(18, 60)
+
+    expect(frame).toContain('●●●●●●●+')
+  })
+
+  test('leaves the row bare for a user with no streak yet', async () => {
+    const frame = await renderHeadingRow(0, 60)
+
+    expect(frame).toContain('Start coding for free')
+    expect(frame).not.toContain('day streak')
+  })
+
+  // The landing screen only hands over a streak that fits, but a resize lays
+  // the current tree out against the new width before React re-renders, so the
+  // row does get measured too narrow for a frame. As a space-between flex row
+  // that overflow segfaulted the native renderer — it has to survive as text.
+  test('survives being laid out narrower than its content', async () => {
+    const setup = await mountHeadingRow(18, 60)
+
+    for (const width of [34, 20, 12]) {
+      setup.resize(width, 6)
+      await setup.renderOnce()
+      expect(setup.captureCharFrame()).toContain('Start')
+    }
+  })
+})