@alumbwe/anvil 1.0.0

package/src/components/ad-banner.tsx

@@ -0,0 +1,323 @@
+import { TextAttributes } from '@opentui/core'
+import { safeOpen } from '../utils/open-url'
+import React, { useState, useMemo, useEffect } from 'react'
+
+import { Button } from './button'
+import { useTerminalDimensions } from '../hooks/use-terminal-dimensions'
+import { useTheme } from '../hooks/use-theme'
+import { BORDER_CHARS, INVERTED_CTA_FG } from '../utils/ui-constants'
+
+import type { AdResponse } from '../hooks/use-gravity-ad'
+
+interface ChoiceAdBannerProps {
+  ads: AdResponse[]
+  onClick?: (ad: AdResponse) => void
+  onImpression?: (ad: AdResponse) => void
+}
+
+export const AD_CARD_HEIGHT = 5 // border-top + 2 lines description + spacer + cta row + border-bottom
+export const INLINE_AD_CARD_HEIGHT = 4 // border-top + header row + detail row + border-bottom
+const MAX_DESC_LINES = 2
+const MIN_CARD_WIDTH = 60 // Minimum width per ad card to remain readable
+const MIN_INLINE_WIDTH_WITH_DESTINATION = 48
+const INLINE_AD_DISCLOSURE = 'Ad'
+const INLINE_AD_GAP = 2
+const INLINE_AD_LINK_SUFFIX = ' ↗'
+
+function truncateToLines(text: string, lineWidth: number, maxLines: number): string {
+  if (lineWidth <= 0) return text
+  const maxChars = lineWidth * maxLines
+  if (text.length <= maxChars) return text
+  return text.slice(0, maxChars - 1) + '…'
+}
+
+function truncateToWidth(text: string, width: number): string {
+  if (width <= 0) return ''
+  if (text.length <= width) return text
+  return text.slice(0, width - 1) + '…'
+}
+
+export const extractDomain = (url: string): string => {
+  try {
+    const parsed = new URL(url)
+    return parsed.hostname.replace(/^www\./, '')
+  } catch {
+    return url
+  }
+}
+
+export function getAdDisplayLabel(
+  ad: Pick<AdResponse, 'title' | 'url'>,
+): { text: string; variant: 'domain' | 'title' } {
+  const url = ad.url.trim()
+  if (url) {
+    return { text: extractDomain(url), variant: 'domain' }
+  }
+
+  return { text: ad.title.trim() || 'Sponsored', variant: 'title' }
+}
+
+export function getInlineAdLayout(
+  ad: Pick<AdResponse, 'adText' | 'title' | 'url'>,
+  width: number,
+): { title: string; description: string; label: string } {
+  const contentWidth = Math.max(0, width - 4) // border + horizontal padding
+  const displayLabel = getAdDisplayLabel(ad)
+  const headerTrailingWidth =
+    INLINE_AD_GAP + INLINE_AD_DISCLOSURE.length
+  const titleWidth = Math.max(0, contentWidth - headerTrailingWidth)
+  const destinationLabel =
+    width >= MIN_INLINE_WIDTH_WITH_DESTINATION &&
+    displayLabel.variant === 'domain'
+      ? displayLabel.text
+      : ''
+  const maxLabelWidth = Math.max(0, Math.min(24, Math.floor(contentWidth / 3)))
+  const label = truncateToWidth(destinationLabel, maxLabelWidth)
+  const trailingWidth = label
+    ? INLINE_AD_GAP + label.length + INLINE_AD_LINK_SUFFIX.length
+    : 0
+  const descriptionWidth = Math.max(0, contentWidth - trailingWidth)
+
+  return {
+    title: truncateToWidth(ad.title.trim() || displayLabel.text, titleWidth),
+    description: truncateToWidth(ad.adText.trim(), descriptionWidth),
+    label,
+  }
+}
+
+/**
+ * Calculate evenly distributed column widths that sum exactly to availableWidth.
+ * Distributes remainder pixels across the first N columns so there's no gap.
+ */
+function columnWidths(count: number, availableWidth: number): number[] {
+  const base = Math.floor(availableWidth / count)
+  const remainder = availableWidth - base * count
+  return Array.from({ length: count }, (_, i) => base + (i < remainder ? 1 : 0))
+}
+
+/**
+ * A single ad card: full-width above the input ({@link SingleAdBanner}),
+ * content-width when interspersed inside an assistant response
+ * (BlocksRenderer), and in a row of columns on the landing screen
+ * ({@link ChoiceAdBanner}). Manages its own hover state and
+ * fires its impression on mount and on ad rotation (deduped per impUrl in the
+ * ads hook, so remounts and scroll churn don't double-count).
+ */
+export const AdCard: React.FC<{
+  ad: AdResponse
+  width: number
+  variant?: 'card' | 'inline'
+  onClick?: (ad: AdResponse) => void
+  onImpression?: (ad: AdResponse) => void
+}> = ({ ad, width, variant = 'card', onClick, onImpression }) => {
+  const theme = useTheme()
+  const [isHovered, setIsHovered] = useState(false)
+
+  useEffect(() => {
+    onImpression?.(ad)
+  }, [ad, onImpression])
+
+  const buttonProps = {
+    onClick: () => {
+      if (!ad.clickUrl) return
+      onClick?.(ad)
+      safeOpen(ad.clickUrl)
+    },
+    onMouseOver: () => setIsHovered(true),
+    onMouseOut: () => setIsHovered(false),
+  }
+
+  if (variant === 'inline') {
+    const inlineLayout = getInlineAdLayout(ad, width)
+    const accentColor = isHovered ? theme.primary : theme.muted
+    return (
+      <Button
+        {...buttonProps}
+        style={{
+          width,
+          height: INLINE_AD_CARD_HEIGHT,
+          borderStyle: 'single',
+          borderColor: accentColor,
+          customBorderChars: BORDER_CHARS,
+          paddingLeft: 1,
+          paddingRight: 1,
+          flexDirection: 'column',
+          overflow: 'hidden',
+        }}
+      >
+        <box
+          style={{
+            width: '100%',
+            height: 1,
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            overflow: 'hidden',
+          }}
+        >
+          <text
+            style={{
+              fg: isHovered ? theme.primary : theme.foreground,
+              flexShrink: 1,
+              wrapMode: 'none',
+            }}
+            attributes={TextAttributes.BOLD}
+          >
+            {inlineLayout.title}
+          </text>
+          <text style={{ fg: theme.muted, flexShrink: 0, wrapMode: 'none' }}>
+            {INLINE_AD_DISCLOSURE}
+          </text>
+        </box>
+        <box
+          style={{
+            width: '100%',
+            height: 1,
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            columnGap: INLINE_AD_GAP,
+            overflow: 'hidden',
+          }}
+        >
+          <text style={{ fg: theme.muted, flexShrink: 1, wrapMode: 'none' }}>
+            {inlineLayout.description}
+          </text>
+          {inlineLayout.label && (
+            <text
+              style={{
+                fg: accentColor,
+                flexShrink: 0,
+                wrapMode: 'none',
+              }}
+              attributes={TextAttributes.UNDERLINE}
+            >
+              {inlineLayout.label + INLINE_AD_LINK_SUFFIX}
+            </text>
+          )}
+        </box>
+      </Button>
+    )
+  }
+
+  const label = getAdDisplayLabel(ad)
+  const ctaText = ad.cta || ad.title || 'Learn more'
+  const labelMaxWidth = Math.max(0, width - ctaText.length - 5)
+  const labelText = truncateToWidth(label.text, labelMaxWidth)
+
+  return (
+    <Button
+      {...buttonProps}
+      style={{
+        width,
+        height: AD_CARD_HEIGHT,
+        borderStyle: 'single',
+        borderColor: isHovered ? theme.primary : theme.muted,
+        customBorderChars: BORDER_CHARS,
+        paddingLeft: 1,
+        paddingRight: 1,
+        flexDirection: 'column',
+      }}
+    >
+      <box style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', height: MAX_DESC_LINES, overflow: 'hidden' }}>
+        <text style={{ fg: theme.muted, flexShrink: 1 }}>
+          {truncateToLines(ad.adText, width - 8, MAX_DESC_LINES)}
+        </text>
+        <text style={{ fg: theme.muted, flexShrink: 0 }}>{'  Ad'}</text>
+      </box>
+      <box style={{ flexGrow: 1 }} />
+      {/* Bottom: CTA + domain */}
+      <box style={{ flexDirection: 'row', columnGap: 1, alignItems: 'center', height: 1, overflow: 'hidden' }}>
+        <text
+          style={{
+            fg: INVERTED_CTA_FG,
+            bg: isHovered ? theme.primary : theme.muted,
+            attributes: TextAttributes.BOLD,
+          }}
+        >
+          {` ${ctaText} `}
+        </text>
+        <text
+          style={{
+            fg: theme.muted,
+            wrapMode: 'none',
+            attributes:
+              label.variant === 'domain'
+                ? TextAttributes.UNDERLINE
+                : TextAttributes.BOLD,
+          }}
+        >
+          {labelText}
+        </text>
+      </box>
+    </Button>
+  )
+}
+
+/**
+ * The rotating ad pinned above the chat input box. Rerenders (and fires a new
+ * impression) each time the hook rotates `ads[0]`.
+ */
+export const SingleAdBanner: React.FC<{
+  ad: AdResponse
+  onClick?: (ad: AdResponse) => void
+  onImpression?: (ad: AdResponse) => void
+}> = ({ ad, onClick, onImpression }) => {
+  const { terminalWidth } = useTerminalDimensions()
+
+  return (
+    <box style={{ marginLeft: 1, marginRight: 1 }}>
+      <AdCard ad={ad} width={terminalWidth - 2} onClick={onClick} onImpression={onImpression} />
+    </box>
+  )
+}
+
+/**
+ * Up to four ads shown in a row. Still used by the freebuff landing screen,
+ * which intentionally fills the space with multiple ads.
+ */
+export const ChoiceAdBanner: React.FC<ChoiceAdBannerProps> = ({
+  ads,
+  onClick,
+  onImpression,
+}) => {
+  const { terminalWidth } = useTerminalDimensions()
+
+  // Available width for cards (terminal minus left/right margin of 1 each)
+  const colAvail = terminalWidth - 2
+
+  // Only show as many ads as fit with a healthy minimum width; hide the rest
+  const maxVisible = Math.max(1, Math.floor(colAvail / MIN_CARD_WIDTH))
+  const visibleAds = useMemo(
+    () => (ads.length > maxVisible ? ads.slice(0, maxVisible) : ads),
+    [ads, maxVisible],
+  )
+
+  const widths = useMemo(() => columnWidths(visibleAds.length, colAvail), [visibleAds.length, colAvail])
+
+  return (
+    <box
+      style={{
+        width: '100%',
+        flexDirection: 'column',
+      }}
+    >
+      {/* Card columns */}
+      <box
+        style={{
+          marginLeft: 1,
+          marginRight: 1,
+          flexDirection: 'row',
+        }}
+      >
+        {visibleAds.map((ad, i) => (
+          <AdCard
+            key={ad.impUrl}
+            ad={ad}
+            width={widths[i]}
+            onClick={onClick}
+            onImpression={onImpression}
+          />
+        ))}
+      </box>
+    </box>
+  )
+}

package/src/components/agent-checklist.tsx

@@ -0,0 +1,350 @@
+import { pluralize } from '@anvil/common/util/string'
+import { TextAttributes } from '@opentui/core'
+import React, { useMemo, useRef, useEffect, useState } from 'react'
+
+
+import { Button } from './button'
+import { useTheme } from '../hooks/use-theme'
+import { getSimpleAgentId } from '../utils/agent-id-utils'
+
+import type { LocalAgentInfo } from '../utils/local-agent-registry'
+import type { ScrollBoxRenderable } from '@opentui/core'
+
+const SYMBOLS = {
+  CHECKBOX_CHECKED: '☑',
+  CHECKBOX_UNCHECKED: '☐',
+} as const
+
+// Recursively count local dependencies for an agent
+function countDependencies(
+  agentId: string,
+  agentDefinitions: Map<string, { spawnableAgents?: string[] }>,
+  localAgentIds: Set<string>,
+  visited: Set<string>,
+): number {
+  if (visited.has(agentId)) return 0
+  visited.add(agentId)
+
+  const definition = agentDefinitions.get(agentId)
+  const spawnableAgents = definition?.spawnableAgents ?? []
+
+  let count = 0
+  for (const spawnableId of spawnableAgents) {
+    const simpleId = getSimpleAgentId(spawnableId)
+    if (localAgentIds.has(simpleId) && !visited.has(simpleId)) {
+      count += 1 + countDependencies(simpleId, agentDefinitions, localAgentIds, visited)
+    }
+  }
+
+  return count
+}
+
+// Build dependency tree for an agent
+interface DepTreeNode {
+  id: string
+  displayName: string
+  children: DepTreeNode[]
+}
+
+function buildDepTree(
+  agentId: string,
+  agents: LocalAgentInfo[],
+  agentDefinitions: Map<string, { spawnableAgents?: string[] }>,
+  localAgentIds: Set<string>,
+  ancestorIds: Set<string>,
+): DepTreeNode[] {
+  const definition = agentDefinitions.get(agentId)
+  const spawnableAgents = definition?.spawnableAgents ?? []
+
+  const newAncestorIds = new Set(ancestorIds)
+  newAncestorIds.add(agentId)
+
+  const children: DepTreeNode[] = []
+  for (const spawnableId of spawnableAgents) {
+    const simpleId = getSimpleAgentId(spawnableId)
+    if (localAgentIds.has(simpleId) && !newAncestorIds.has(simpleId)) {
+      const agent = agents.find((a) => a.id === simpleId)
+      if (agent) {
+        children.push({
+          id: agent.id,
+          displayName: agent.displayName,
+          children: buildDepTree(simpleId, agents, agentDefinitions, localAgentIds, newAncestorIds),
+        })
+      }
+    }
+  }
+
+  return children
+}
+
+// Render dependency tree recursively
+const DepTree: React.FC<{
+  nodes: DepTreeNode[]
+  depth: number
+  theme: ReturnType<typeof useTheme>
+}> = ({ nodes, depth, theme }) => {
+  return (
+    <>
+      {nodes.map((node, idx) => {
+        const isLast = idx === nodes.length - 1
+        const prefix = isLast ? '└─' : '├─'
+        const displayText =
+          node.displayName !== node.id
+            ? `${node.displayName} (${node.id})`
+            : node.displayName
+
+        return (
+          <React.Fragment key={node.id}>
+            <box style={{ flexDirection: 'row', gap: 1, paddingLeft: depth * 3 + 3 }}>
+              <text style={{ fg: theme.muted }}>{prefix}</text>
+              <text style={{ fg: theme.muted }}>{displayText}</text>
+            </box>
+            {node.children.length > 0 && (
+              <DepTree nodes={node.children} depth={depth + 1} theme={theme} />
+            )}
+          </React.Fragment>
+        )
+      })}
+    </>
+  )
+}
+
+interface AgentChecklistProps {
+  /** All agents (used for dependency tree calculations) */
+  allAgents: LocalAgentInfo[]
+  /** Agents filtered by search query (displayed in the list) */
+  filteredAgents: LocalAgentInfo[]
+  selectedIds: Set<string>
+  searchQuery: string
+  focusedIndex: number
+  onToggleAgent: (agentId: string) => void
+  onFocusChange: (index: number) => void
+  agentDefinitions: Map<string, { spawnableAgents?: string[] }>
+  maxHeight?: number
+}
+
+export const AgentChecklist: React.FC<AgentChecklistProps> = ({
+  allAgents,
+  filteredAgents,
+  selectedIds,
+  searchQuery,
+  focusedIndex,
+  onToggleAgent,
+  onFocusChange,
+  agentDefinitions,
+  maxHeight = 8,
+}) => {
+  const theme = useTheme()
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null)
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  const [expandedAgentIds, setExpandedAgentIds] = useState<Set<string>>(new Set())
+  const [hoveredSubagentLink, setHoveredSubagentLink] = useState<string | null>(null)
+
+  // Precompute local agent IDs for dependency calculations
+  const localAgentIds = useMemo(() => new Set(allAgents.map((a) => a.id)), [allAgents])
+
+  // Calculate dependency count for each agent
+  const dependencyCounts = useMemo(() => {
+    const counts = new Map<string, number>()
+    for (const agent of allAgents) {
+      const count = countDependencies(agent.id, agentDefinitions, localAgentIds, new Set())
+      counts.set(agent.id, count)
+    }
+    return counts
+  }, [allAgents, agentDefinitions, localAgentIds])
+
+  // Toggle expansion of an agent's dependencies
+  const toggleExpanded = (agentId: string) => {
+    setExpandedAgentIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(agentId)) {
+        next.delete(agentId)
+      } else {
+        next.add(agentId)
+      }
+      return next
+    })
+  }
+
+  // Scroll focused item into view when focus changes via keyboard
+  useEffect(() => {
+    const scrollbox = scrollRef.current
+    if (!scrollbox || filteredAgents.length === 0) return
+
+    // Calculate approximate position of focused item (1 line per item)
+    const itemHeight = 1
+    const focusedTop = focusedIndex * itemHeight
+    const focusedBottom = focusedTop + itemHeight
+
+    const viewportHeight = scrollbox.viewport.height
+    const currentScroll = scrollbox.scrollTop
+
+    // Scroll up if focused item is above viewport
+    if (focusedTop < currentScroll) {
+      scrollbox.scrollTop = focusedTop
+    }
+    // Scroll down if focused item is below viewport
+    else if (focusedBottom > currentScroll + viewportHeight) {
+      scrollbox.scrollTop = focusedBottom - viewportHeight
+    }
+  }, [focusedIndex, filteredAgents.length])
+
+  if (filteredAgents.length === 0) {
+    return (
+      <box style={{ paddingLeft: 1, paddingTop: 1 }}>
+        <text style={{ fg: theme.muted, attributes: TextAttributes.ITALIC }}>
+          {searchQuery ? 'No agents match your search' : 'No agents available'}
+        </text>
+      </box>
+    )
+  }
+
+  const needsScroll = filteredAgents.length > maxHeight
+
+  return (
+    <box style={{ flexDirection: 'column', gap: 0 }}>
+      <scrollbox
+        ref={scrollRef}
+        scrollX={false}
+        scrollbarOptions={{ visible: false }}
+        verticalScrollbarOptions={{
+          visible: needsScroll,
+          trackOptions: { width: 1 },
+        }}
+        style={{
+          height: maxHeight,
+          rootOptions: {
+            flexDirection: 'row',
+            backgroundColor: 'transparent',
+          },
+          wrapperOptions: {
+            border: false,
+            backgroundColor: 'transparent',
+            flexDirection: 'column',
+          },
+          contentOptions: {
+            flexDirection: 'column',
+            gap: 0,
+            backgroundColor: 'transparent',
+          },
+        }}
+      >
+        {filteredAgents.map((agent, idx) => {
+          const isSelected = selectedIds.has(agent.id)
+          const isFocused = idx === focusedIndex
+          const isHovered = idx === hoveredIndex
+          const isHighlighted = isFocused || isHovered
+          const depCount = dependencyCounts.get(agent.id) ?? 0
+          const isExpanded = expandedAgentIds.has(agent.id)
+          const isSubagentLinkHovered = hoveredSubagentLink === agent.id
+          const subagentLabel = `(${isExpanded ? '-' : '+'} ${pluralize(depCount, 'subagent')})`
+
+          const symbol = isSelected
+            ? SYMBOLS.CHECKBOX_CHECKED
+            : SYMBOLS.CHECKBOX_UNCHECKED
+
+          const displayText =
+            agent.displayName !== agent.id
+              ? `${agent.displayName} (${agent.id})`
+              : agent.displayName
+
+          return (
+            <React.Fragment key={agent.id}>
+              <box
+                style={{
+                  flexDirection: 'row',
+                  gap: 1,
+                  backgroundColor: isHighlighted ? theme.surface : undefined,
+                  paddingLeft: 1,
+                  paddingRight: 1,
+                  paddingTop: 0,
+                  paddingBottom: 0,
+                }}
+              >
+                {/* Checkbox and agent name - clickable to toggle selection */}
+                <Button
+                  onClick={() => {
+                    onFocusChange(idx)
+                    onToggleAgent(agent.id)
+                  }}
+                  onMouseOver={() => setHoveredIndex(idx)}
+                  onMouseOut={() => setHoveredIndex(null)}
+                  style={{
+                    flexDirection: 'row',
+                    gap: 1,
+                    backgroundColor: 'transparent',
+                    paddingLeft: 0,
+                    paddingRight: 0,
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                  }}
+                >
+                  <text
+                    style={{
+                      fg: isSelected
+                        ? theme.success
+                        : isHighlighted
+                          ? theme.foreground
+                          : theme.muted,
+                      attributes: isHighlighted ? TextAttributes.BOLD : undefined,
+                    }}
+                  >
+                    {symbol}
+                  </text>
+                  <text
+                    style={{
+                      fg: isSelected
+                        ? theme.success
+                        : isHighlighted
+                          ? theme.foreground
+                          : theme.muted,
+                      attributes: isHighlighted ? TextAttributes.BOLD : undefined,
+                    }}
+                  >
+                    {displayText}
+                  </text>
+                </Button>
+
+                {/* Subagent count - clickable to expand/collapse */}
+                {depCount > 0 && (
+                  <Button
+                    onClick={() => toggleExpanded(agent.id)}
+                    onMouseOver={() => setHoveredSubagentLink(agent.id)}
+                    onMouseOut={() => setHoveredSubagentLink(null)}
+                    style={{
+                      backgroundColor: 'transparent',
+                      paddingLeft: 0,
+                      paddingRight: 0,
+                      paddingTop: 0,
+                      paddingBottom: 0,
+                    }}
+                  >
+                    <text
+                      style={{
+                        fg: theme.secondary,
+                        attributes: isSubagentLinkHovered
+                          ? TextAttributes.UNDERLINE
+                          : undefined,
+                      }}
+                    >
+                      {subagentLabel}
+                    </text>
+                  </Button>
+                )}
+              </box>
+
+              {/* Expanded dependency tree */}
+              {isExpanded && depCount > 0 && (
+                <DepTree
+                  nodes={buildDepTree(agent.id, allAgents, agentDefinitions, localAgentIds, new Set())}
+                  depth={0}
+                  theme={theme}
+                />
+              )}
+            </React.Fragment>
+          )
+        })}
+      </scrollbox>
+    </box>
+  )
+}