@alumbwe/anvil 1.0.0 → 1.0.2

package/src/components/ad-banner.tsx

@@ -1,323 +0,0 @@
-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

@@ -1,350 +0,0 @@
-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>
-  )
-}