Console

import { Console } from '@hanzo/ui/agents'

export function Dock() {
  const [height, setHeight] = useState(240)
  const [lines, setLines] = useState<Line[]>([
    { id: 1, level: 'info', text: 'cloning hanzo/shop at main', source: 'run' },
    { id: 2, level: 'log', text: 'pnpm install — 412 packages', source: 'run' },
    { id: 3, level: 'warn', text: 'peer react@19 wanted by an old plugin', source: 'run' },
    { id: 4, level: 'error', text: 'Uncaught TypeError: cart is undefined', source: 'page' },
  ])
  return (
    <YStack width="100%" height={320} justify="flex-end" borderWidth={1} borderColor="$borderColor" rounded="$4" overflow="hidden">
      <Console
        lines={lines}
        height={height}
        onHeight={setHeight}
        onClear={() => setLines([])}
        onRun={(command) => setLines((l) => [...l, { id: l.length + 1, level: 'log', text: `$ ${command}`, source: 'you' }])}
        status={
          <SizableText size="$1" color="$soft">
            main
          </SizableText>
        }
      />
    </YStack>
  )
}

export function Shut() {
  const [height, setHeight] = useState(36)
  return (
    <YStack width="100%">
      <Console lines={[{ id: 1, level: 'error', text: 'build failed' }]} height={height} onHeight={setHeight} />
    </YStack>
  )
}

Types

export interface ConsoleTab {
  id: string
  label: string
  /** What the tab shows when chosen. */
  content: ReactNode
}

export interface ConsoleProps extends Col {
  /** The log. Newest last. */
  lines: readonly Line[]
  /** The dock's height, px. At or below `HEAD` only the header shows. */
  height: number
  onHeight: (height: number) => void
  /** Tabs after the log. */
  tabs?: readonly ConsoleTab[]
  /** The chosen tab: `'log'` or one of `tabs`. */
  tab?: string
  onTab?: (id: string) => void
  onClear?: () => void
  /** A command line under the log. Omit and there is none. */
  onRun?: (command: string) => void
  /** A command is running: the line is held. */
  busy?: boolean
  /** Right of the tabs: the branch, the run's state. */
  status?: ReactNode
  /** The log tab's name. */
  label?: string
}

Exports