@interactive-inc/claude-funnel 0.4.1 → 0.8.0

package/lib/tui/components/ui/hascii/select.tsx

@@ -0,0 +1,131 @@
+import type { SelectOption } from "@opentui/core"
+import { useKeyboard } from "@opentui/react"
+import { useState } from "react"
+import type { HasciiTheme } from "@/tui/utils/hascii/theme"
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+import { usePressable } from "@/tui/hooks/hascii/use-pressable"
+
+export type Props = {
+  options?: SelectOption[]
+  width?: number
+  height?: number
+  defaultIndex?: number
+  focusedIndex?: number
+  isFocused?: boolean
+  onChange?: (index: number, option: SelectOption | null) => void
+  onSelect?: (index: number, option: SelectOption | null) => void
+}
+
+const pickItemBg = (
+  isActive: boolean,
+  hovered: boolean,
+  pressed: boolean,
+  theme: HasciiTheme,
+): string | undefined => {
+  if (pressed) return theme.color.secondaryActive
+  if (hovered && isActive) return theme.color.hoverActive
+  if (hovered) return theme.color.secondaryHover
+  if (isActive) return theme.color.secondaryActive
+  return undefined
+}
+
+type ItemProps = {
+  option: SelectOption
+  isActive: boolean
+  onPress: () => void
+}
+
+/** Internal row used by HasciiSelect. Tracks hover/press state and renders the active left bar. */
+function HasciiSelectItem(props: ItemProps) {
+  const theme = useHasciiTheme()
+  const press = usePressable({ onPress: props.onPress })
+
+  const bg = pickItemBg(props.isActive, press.isHovered, press.isPressed, theme)
+
+  const nameColor =
+    props.isActive || press.isHovered ? theme.color.foreground : theme.color.mutedForeground
+  const descColor = theme.color.mutedForeground
+
+  const rowHeight = props.option.description ? 4 : 3
+
+  return (
+    <box flexDirection="row" backgroundColor={bg} {...press.bind}>
+      {props.isActive ? (
+        <box position="absolute" left={0} top={0} bottom={0} flexDirection="column">
+          {Array.from({ length: rowHeight }, (_, index) => (
+            <text key={index} fg={theme.color.primary}>
+              ▏
+            </text>
+          ))}
+        </box>
+      ) : null}
+      <box
+        flexGrow={1}
+        flexDirection="column"
+        paddingTop={1}
+        paddingBottom={1}
+        paddingLeft={2}
+        paddingRight={2}
+        gap={0}
+      >
+        <text fg={nameColor}>{props.option.name}</text>
+        {props.option.description ? <text fg={descColor}>{props.option.description}</text> : null}
+      </box>
+    </box>
+  )
+}
+
+/** Vertical option list with a muted background, a flush left bar on the active row, and vertical scrolling when items overflow. */
+export function HasciiSelect(props: Props) {
+  const width = props.width ?? 36
+  const height = props.height ?? 16
+  const isFocused = props.isFocused ?? true
+  const options = props.options ?? []
+
+  const theme = useHasciiTheme()
+
+  const internalState = useState(props.defaultIndex ?? 0)
+  const internal = internalState[0]
+  const setInternal = internalState[1]
+
+  const current = props.focusedIndex ?? internal
+
+  const moveTo = (next: number) => {
+    if (options.length === 0) return
+
+    const clamped = Math.max(0, Math.min(options.length - 1, next))
+    if (props.focusedIndex === undefined) setInternal(clamped)
+    props.onChange?.(clamped, options[clamped] ?? null)
+  }
+
+  useKeyboard((key) => {
+    if (!isFocused || options.length === 0) return
+
+    if (key.name === "up") moveTo(current - 1)
+    if (key.name === "down") moveTo(current + 1)
+    if (key.name === "return" || key.name === "space") {
+      props.onSelect?.(current, options[current] ?? null)
+    }
+  })
+
+  return (
+    <box flexDirection="column" width={width} height={height} backgroundColor={theme.color.muted}>
+      <scrollbox
+        flexGrow={1}
+        focused={isFocused}
+        scrollY
+        stickyScroll={false}
+        contentOptions={{ flexDirection: "column", gap: 0 }}
+      >
+        {options.map((option, index) => (
+          <HasciiSelectItem
+            key={`${option.value}-${index}`}
+            option={option}
+            isActive={index === current}
+            onPress={() => moveTo(index)}
+          />
+        ))}
+      </scrollbox>
+    </box>
+  )
+}

package/lib/tui/components/ui/hascii/separator.tsx

@@ -0,0 +1,35 @@
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+
+type Orientation = "horizontal" | "vertical"
+
+export type Props = {
+  orientation?: Orientation
+  color?: string
+  length?: number
+}
+
+/** Hairline divider drawn with box-drawing characters. Length is the run in the chosen orientation. */
+export function HasciiSeparator(props: Props) {
+  const orientation = props.orientation ?? "horizontal"
+  const length = props.length ?? (orientation === "horizontal" ? 32 : 8)
+
+  const theme = useHasciiTheme()
+  const color = props.color ?? theme.color.border
+
+  if (orientation === "vertical") {
+    const lines: string[] = []
+    for (let index = 0; index < length; index++) lines.push("│")
+
+    return (
+      <box width={1} height={length} flexShrink={0}>
+        <text fg={color}>{lines.join("\n")}</text>
+      </box>
+    )
+  }
+
+  return (
+    <box width={length} height={1} flexShrink={0}>
+      <text fg={color}>{"─".repeat(length)}</text>
+    </box>
+  )
+}

package/lib/tui/components/ui/hascii/sidebar-content.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react"
+
+export type Props = {
+  isFocused?: boolean
+  children?: ReactNode
+}
+
+/** Scrollable middle region of a HasciiSidebar. Wheel + arrow keys scroll vertically. */
+export function HasciiSidebarContent(props: Props) {
+  const isFocused = props.isFocused ?? true
+
+  return (
+    <scrollbox
+      flexGrow={1}
+      focused={isFocused}
+      scrollY
+      stickyScroll={false}
+      contentOptions={{ flexDirection: "column", gap: 0 }}
+    >
+      {props.children}
+    </scrollbox>
+  )
+}

package/lib/tui/components/ui/hascii/sidebar-header.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react"
+
+export type Props = {
+  children?: ReactNode
+}
+
+/** Top section of a HasciiSidebar. Renders children at the sidebar's text padding. */
+export function HasciiSidebarHeader(props: Props) {
+  return (
+    <box flexDirection="column" paddingLeft={2} paddingRight={2} paddingBottom={1} gap={0}>
+      {props.children}
+    </box>
+  )
+}

package/lib/tui/components/ui/hascii/sidebar-menu-item.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react"
+import type { HasciiTheme } from "@/tui/utils/hascii/theme"
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+import { usePressable } from "@/tui/hooks/hascii/use-pressable"
+
+export type Props = {
+  isActive?: boolean
+  isDisabled?: boolean
+  onPress?: () => void
+  children?: ReactNode
+}
+
+const pickBg = (
+  isDisabled: boolean,
+  isActive: boolean,
+  isHovered: boolean,
+  isPressed: boolean,
+  theme: HasciiTheme,
+): string | undefined => {
+  if (isDisabled) return undefined
+  if (isPressed) return theme.color.secondaryActive
+  if (isHovered && isActive) return theme.color.hoverActive
+  if (isHovered) return theme.color.secondaryHover
+  if (isActive) return theme.color.secondaryActive
+  return undefined
+}
+
+const ROW_HEIGHT = 3
+
+/** Single pressable row inside HasciiSidebarContent. Active items show a thin left rule using ▏ glyphs. */
+export function HasciiSidebarMenuItem(props: Props) {
+  const isActive = props.isActive ?? false
+  const isDisabled = props.isDisabled ?? false
+  const theme = useHasciiTheme()
+
+  const press = usePressable({ isDisabled, onPress: props.onPress })
+
+  const bg = pickBg(isDisabled, isActive, press.isHovered, press.isPressed, theme)
+
+  const fg = isDisabled
+    ? theme.color.mutedForeground
+    : isActive || press.isHovered
+      ? theme.color.foreground
+      : theme.color.mutedForeground
+
+  return (
+    <box
+      paddingTop={1}
+      paddingBottom={1}
+      paddingLeft={2}
+      paddingRight={2}
+      backgroundColor={bg}
+      {...press.bind}
+    >
+      {isActive ? (
+        <box position="absolute" left={0} top={0} bottom={0} flexDirection="column">
+          {Array.from({ length: ROW_HEIGHT }, (_, index) => (
+            <text key={index} fg={theme.color.primary}>
+              ▏
+            </text>
+          ))}
+        </box>
+      ) : null}
+      <text fg={fg}>{props.children}</text>
+    </box>
+  )
+}

package/lib/tui/components/ui/hascii/sidebar.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react"
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+
+export type Props = {
+  width?: number
+  children?: ReactNode
+}
+
+/** Fixed-width vertical sidebar. Compose with HasciiSidebarHeader, HasciiSidebarContent, HasciiSidebarMenuItem. */
+export function HasciiSidebar(props: Props) {
+  const theme = useHasciiTheme()
+
+  return (
+    <box
+      flexDirection="column"
+      width={props.width ?? 24}
+      backgroundColor={theme.color.muted}
+      paddingTop={1}
+      gap={0}
+    >
+      {props.children}
+    </box>
+  )
+}

package/lib/tui/components/ui/hascii/skeleton.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react"
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+
+export type Props = {
+  width?: number
+  height?: number
+  intervalMs?: number
+  cycleMs?: number
+}
+
+const lerpChannel = (a: number, b: number, t: number): number => Math.round(a + (b - a) * t)
+
+const parseHex = (hex: string): [number, number, number] => {
+  const clean = hex.startsWith("#") ? hex.slice(1) : hex
+  const r = parseInt(clean.slice(0, 2), 16)
+  const g = parseInt(clean.slice(2, 4), 16)
+  const b = parseInt(clean.slice(4, 6), 16)
+  return [r, g, b]
+}
+
+const toHex = (channel: number): string => channel.toString(16).padStart(2, "0")
+
+const lerpHex = (a: string, b: string, t: number): string => {
+  const colorA = parseHex(a)
+  const colorB = parseHex(b)
+  const r = lerpChannel(colorA[0], colorB[0], t)
+  const g = lerpChannel(colorA[1], colorB[1], t)
+  const blue = lerpChannel(colorA[2], colorB[2], t)
+  return `#${toHex(r)}${toHex(g)}${toHex(blue)}`
+}
+
+/** Placeholder block that pulses smoothly between two muted shades using cosine easing. */
+export function HasciiSkeleton(props: Props) {
+  const intervalMs = props.intervalMs ?? 60
+  const cycleMs = props.cycleMs ?? 1800
+  const theme = useHasciiTheme()
+
+  const startState = useState<number>(performance.now())
+  const start = startState[0]
+
+  const elapsedState = useState(0)
+  const elapsed = elapsedState[0]
+  const setElapsed = elapsedState[1]
+
+  // useEffect drives the pulse — necessary for time-based color interpolation.
+  useEffect(() => {
+    const id = setInterval(() => {
+      setElapsed(performance.now() - start)
+    }, intervalMs)
+
+    return () => clearInterval(id)
+  }, [intervalMs, start, setElapsed])
+
+  const phase = ((elapsed % cycleMs) / cycleMs) * 2 * Math.PI
+  const t = (1 - Math.cos(phase)) / 2
+
+  const bg = lerpHex(theme.color.muted, theme.color.secondaryActive, t)
+
+  return <box width={props.width} height={props.height ?? 1} backgroundColor={bg} flexShrink={0} />
+}

package/lib/tui/components/ui/hascii/slider.tsx

@@ -0,0 +1,91 @@
+import { RGBA, SliderRenderable } from "@opentui/core"
+import { extend } from "@opentui/react"
+import { useState } from "react"
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+
+declare module "@opentui/react" {
+  interface OpenTUIComponents {
+    slider: typeof SliderRenderable
+  }
+}
+
+extend({ slider: SliderRenderable })
+
+export type Props = {
+  value?: number
+  defaultValue?: number
+  min?: number
+  max?: number
+  width?: number
+  thumbSize?: number
+  onChange?: (next: number) => void
+}
+
+const TRANSPARENT = RGBA.fromValues(0, 0, 0, 0)
+
+const viewPortSizeFor = (thumbCells: number, range: number, width: number): number => {
+  const virtualThumb = thumbCells * 2
+  const denominator = width * 2 - virtualThumb
+
+  if (denominator <= 0) return range
+
+  return Math.max(1, Math.round((virtualThumb * range) / denominator))
+}
+
+/** Horizontal slider backed by OpenTUI's SliderRenderable. A ─ track sits behind a thumbSize-cell thumb that supports native click + drag. */
+export function HasciiSlider(props: Props) {
+  const min = props.min ?? 0
+  const max = props.max ?? 100
+  const width = props.width ?? 32
+  const thumbSize = props.thumbSize ?? 3
+
+  const theme = useHasciiTheme()
+
+  const internalState = useState(props.defaultValue ?? min)
+  const internal = internalState[0]
+  const setInternal = internalState[1]
+
+  const value = props.value ?? internal
+
+  const onChange = (next: number) => {
+    if (props.value === undefined) setInternal(next)
+    props.onChange?.(next)
+  }
+
+  const hoveredState = useState(false)
+  const isHovered = hoveredState[0]
+  const setHovered = hoveredState[1]
+
+  const range = Math.max(1, max - min)
+  const viewPortSize = viewPortSizeFor(thumbSize, range, width)
+
+  const thumbFg = isHovered ? theme.color.primaryHover : theme.color.primary
+
+  return (
+    <box
+      width={width}
+      height={1}
+      onMouseOver={() => setHovered(true)}
+      onMouseOut={() => setHovered(false)}
+    >
+      <box position="absolute" left={0} top={0}>
+        <text fg={theme.color.border}>{"─".repeat(width)}</text>
+      </box>
+      <slider
+        position="absolute"
+        left={0}
+        top={0}
+        orientation="horizontal"
+        width={width}
+        height={1}
+        min={min}
+        max={max}
+        value={value}
+        viewPortSize={viewPortSize}
+        foregroundColor={thumbFg}
+        backgroundColor={TRANSPARENT}
+        onChange={onChange}
+      />
+    </box>
+  )
+}

package/lib/tui/components/ui/hascii/snackbar.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react"
+import type { ReactNode } from "react"
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+
+type Variant = "default" | "secondary" | "destructive"
+
+export type Props = {
+  variant?: Variant
+  width?: number
+  slideMs?: number
+  isOpen?: boolean
+  children?: ReactNode
+}
+
+/** Toast-like overlay that slides in from the right edge. Render inside an end-aligned column to anchor bottom-right. */
+export function HasciiSnackbar(props: Props) {
+  const variant = props.variant ?? "default"
+  const width = props.width ?? 28
+  const slideMs = props.slideMs ?? 90
+  const isOpen = props.isOpen ?? true
+
+  const theme = useHasciiTheme()
+
+  const offsetState = useState(width)
+  const offset = offsetState[0]
+  const setOffset = offsetState[1]
+
+  // useEffect drives the slide animation by stepping marginRight from `width` to 0 (or back).
+  useEffect(() => {
+    const target = isOpen ? 0 : width
+    if (offset === target) return
+
+    const start = performance.now()
+    const from = offset
+    let frame = 0
+
+    const tick = () => {
+      const progress = Math.min(1, (performance.now() - start) / slideMs)
+      const next = Math.round(from + (target - from) * progress)
+      setOffset(next)
+
+      if (progress < 1) {
+        frame = setTimeout(tick, 16) as unknown as number
+      }
+    }
+
+    tick()
+
+    return () => clearTimeout(frame)
+  }, [isOpen, width, slideMs, offset, setOffset])
+
+  const palette = {
+    default: { bg: theme.color.primary, fg: theme.color.primaryForeground },
+    secondary: { bg: theme.color.secondary, fg: theme.color.secondaryForeground },
+    destructive: {
+      bg: theme.color.destructive,
+      fg: theme.color.destructiveForeground,
+    },
+  }[variant]
+
+  return (
+    <box
+      flexDirection="row"
+      width={width}
+      paddingTop={1}
+      paddingBottom={1}
+      paddingLeft={2}
+      paddingRight={2}
+      marginRight={-offset}
+      backgroundColor={palette.bg}
+    >
+      <text fg={palette.fg}>{props.children}</text>
+    </box>
+  )
+}

package/lib/tui/components/ui/hascii/sparkline.tsx

@@ -0,0 +1,53 @@
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+
+export type Props = {
+  values: number[]
+  width?: number
+  color?: string
+}
+
+const BARS = ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"] as const
+
+/** Single-row Unicode bar chart. Maps each value to one of eight block heights. */
+export function HasciiSparkline(props: Props) {
+  const theme = useHasciiTheme()
+  const color = props.color ?? theme.color.primary
+
+  const samples = props.width !== undefined ? takeSamples(props.values, props.width) : props.values
+
+  if (samples.length === 0) {
+    return <text fg={color}> </text>
+  }
+
+  let min = Infinity
+  let max = -Infinity
+
+  for (const value of samples) {
+    if (value < min) min = value
+    if (value > max) max = value
+  }
+
+  const range = max - min || 1
+
+  const glyphs = samples.map((value) => {
+    const ratio = (value - min) / range
+    const index = Math.min(BARS.length - 1, Math.round(ratio * (BARS.length - 1)))
+    return BARS[index]
+  })
+
+  return <text fg={color}>{glyphs.join("")}</text>
+}
+
+const takeSamples = (values: number[], targetWidth: number): number[] => {
+  if (values.length <= targetWidth) return values
+
+  const samples: number[] = []
+  const stride = values.length / targetWidth
+
+  for (let index = 0; index < targetWidth; index++) {
+    const sourceIndex = Math.min(values.length - 1, Math.floor(index * stride))
+    samples.push(values[sourceIndex] ?? 0)
+  }
+
+  return samples
+}

package/lib/tui/components/ui/hascii/spinner.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react"
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+
+export const SPINNER_KINDS = {
+  braille: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"],
+  dots: ["⠁", "⠂", "⠄", "⡀", "⢀", "⠠", "⠐", "⠈"],
+  line: ["|", "/", "-", "\\"],
+  noise: ["▓", "▒", "░", "▒"],
+  pipe: ["┤", "┘", "┴", "└", "├", "┌", "┬", "┐"],
+  block: ["▌", "▀", "▐", "▄"],
+  growVert: ["▁", "▃", "▄", "▅", "▆", "▇", "█", "▇", "▆", "▅", "▄", "▃"],
+  toggle: ["▢", "▣", "▤", "▥", "▦", "▧", "▨", "▩"],
+} as const satisfies Record<string, readonly string[]>
+
+export type SpinnerKind = keyof typeof SPINNER_KINDS
+
+export type Props = {
+  variant?: SpinnerKind
+  intervalMs?: number
+  color?: string
+}
+
+/** Animated single-cell spinner. variant chooses the glyph cycle, intervalMs the cadence. */
+export function HasciiSpinner(props: Props) {
+  const variant: SpinnerKind = props.variant ?? "braille"
+  const intervalMs = props.intervalMs ?? 80
+
+  const theme = useHasciiTheme()
+  const color = props.color ?? theme.color.foreground
+
+  const frames = SPINNER_KINDS[variant]
+
+  const frameState = useState(0)
+  const frame = frameState[0]
+  const setFrame = frameState[1]
+
+  // useEffect is necessary for time-based frame advancement in a TUI loop.
+  useEffect(() => {
+    const id = setInterval(() => {
+      setFrame((current) => (current + 1) % frames.length)
+    }, intervalMs)
+
+    return () => clearInterval(id)
+  }, [frames, intervalMs, setFrame])
+
+  return <text fg={color}>{frames[frame]}</text>
+}

package/lib/tui/components/ui/hascii/stepper.tsx

@@ -0,0 +1,54 @@
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+
+export type StepperItem = {
+  label: string
+}
+
+export type Props = {
+  steps: StepperItem[]
+  current: number
+}
+
+/** Horizontal multi-step indicator. Past steps show ■, current shows ▣, future shows □. */
+export function HasciiStepper(props: Props) {
+  const theme = useHasciiTheme()
+
+  const items: import("react").ReactNode[] = []
+
+  for (let index = 0; index < props.steps.length; index++) {
+    const step = props.steps[index]
+    if (step === undefined) continue
+
+    const isPast = index < props.current
+    const isCurrent = index === props.current
+
+    const markerFg = isPast || isCurrent ? theme.color.primary : theme.color.mutedForeground
+    const labelFg = isCurrent ? theme.color.foreground : theme.color.mutedForeground
+    const marker = isPast ? "■" : isCurrent ? "▣" : "□"
+
+    items.push(
+      <box key={`step-${index}`} flexDirection="row" alignItems="center">
+        <text fg={markerFg}>{marker}</text>
+        <box paddingLeft={2}>
+          <text fg={labelFg}>{step.label}</text>
+        </box>
+      </box>,
+    )
+
+    if (index < props.steps.length - 1) {
+      const lineFg = isPast ? theme.color.primary : theme.color.mutedForeground
+
+      items.push(
+        <box key={`line-${index}`} paddingLeft={1} paddingRight={1}>
+          <text fg={lineFg}>──</text>
+        </box>,
+      )
+    }
+  }
+
+  return (
+    <box flexDirection="row" alignItems="center">
+      {items}
+    </box>
+  )
+}