@interactive-inc/claude-funnel 0.8.1 → 0.10.1

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

@@ -1,66 +0,0 @@
-import { useState } from "react"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-import { usePressable } from "@/tui/hooks/hascii/use-pressable"
-
-export type Props = {
-  isChecked?: boolean
-  defaultChecked?: boolean
-  isDisabled?: boolean
-  onChange?: (next: boolean) => void
-}
-
-/** Two-cell on/off switch. The thumb sits at the left or right edge of a 3-cell track. */
-export function HasciiSwitch(props: Props) {
-  const isDisabled = props.isDisabled ?? false
-  const theme = useHasciiTheme()
-
-  const internalState = useState(props.defaultChecked ?? false)
-  const internal = internalState[0]
-  const setInternal = internalState[1]
-
-  const isChecked = props.isChecked ?? internal
-
-  const toggle = () => {
-    const next = !isChecked
-
-    if (props.isChecked === undefined) setInternal(next)
-    props.onChange?.(next)
-  }
-
-  const press = usePressable({ isDisabled, onPress: toggle })
-
-  const trackBg = isDisabled
-    ? theme.color.muted
-    : isChecked
-      ? press.isPressed
-        ? theme.color.primaryActive
-        : press.isHovered
-          ? theme.color.primaryHover
-          : theme.color.primary
-      : press.isPressed
-        ? theme.color.secondaryActive
-        : press.isHovered
-          ? theme.color.secondaryActive
-          : theme.color.popover
-
-  const thumbFg = isDisabled
-    ? theme.color.mutedForeground
-    : isChecked
-      ? theme.color.primaryForeground
-      : theme.color.foreground
-
-  return (
-    <box
-      width={3}
-      height={1}
-      backgroundColor={trackBg}
-      flexDirection="row"
-      alignItems="center"
-      justifyContent={isChecked ? "flex-end" : "flex-start"}
-      paddingRight={isChecked ? 1 : 0}
-      {...press.bind}
-    >
-      <text fg={thumbFg}>▮</text>
-    </box>
-  )
-}

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

@@ -1,95 +0,0 @@
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-export type TableColumn = {
-  key: string
-  label: string
-  width?: number
-  align?: "left" | "right"
-}
-
-export type TableRow = Record<string, string | number>
-
-export type Props = {
-  columns: TableColumn[]
-  rows: TableRow[]
-  selectedIndex?: number
-  onSelect?: (index: number) => void
-}
-
-const padCell = (text: string, width: number, align: "left" | "right"): string => {
-  const truncated = text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text
-  const pad = " ".repeat(Math.max(0, width - truncated.length))
-  return align === "right" ? `${pad}${truncated}` : `${truncated}${pad}`
-}
-
-const resolveColumnWidth = (column: TableColumn, rows: TableRow[]): number => {
-  if (column.width !== undefined) return column.width
-
-  let width = column.label.length
-
-  for (const row of rows) {
-    const value = String(row[column.key] ?? "")
-    if (value.length > width) width = value.length
-  }
-
-  return width
-}
-
-/** Static row/column table. Cell text is padded to the column width; rows are clickable when onSelect is provided. */
-export function HasciiTable(props: Props) {
-  const theme = useHasciiTheme()
-
-  const widths = props.columns.map((column) => resolveColumnWidth(column, props.rows))
-
-  return (
-    <box flexDirection="column">
-      <box flexDirection="row" gap={2} paddingLeft={1} paddingRight={1} height={1}>
-        {props.columns.map((column, columnIndex) => (
-          <text key={column.key} fg={theme.color.mutedForeground}>
-            {padCell(
-              column.label,
-              widths[columnIndex] ?? column.label.length,
-              column.align ?? "left",
-            )}
-          </text>
-        ))}
-      </box>
-      <box flexDirection="row" paddingLeft={1} paddingRight={1} height={1}>
-        <text fg={theme.color.border}>
-          {"─".repeat(
-            widths.reduce((sum, width) => sum + width, 0) +
-              Math.max(0, props.columns.length - 1) * 2,
-          )}
-        </text>
-      </box>
-      {props.rows.map((row, rowIndex) => {
-        const isSelected = props.selectedIndex === rowIndex
-        const rowBg = isSelected ? theme.color.secondaryActive : undefined
-        const rowFg = isSelected ? theme.color.foreground : theme.color.foreground
-
-        return (
-          <box
-            key={`row-${rowIndex}`}
-            flexDirection="row"
-            gap={2}
-            paddingLeft={1}
-            paddingRight={1}
-            height={1}
-            backgroundColor={rowBg}
-            onMouseUp={props.onSelect !== undefined ? () => props.onSelect?.(rowIndex) : undefined}
-          >
-            {props.columns.map((column, columnIndex) => (
-              <text key={column.key} fg={rowFg}>
-                {padCell(
-                  String(row[column.key] ?? ""),
-                  widths[columnIndex] ?? 0,
-                  column.align ?? "left",
-                )}
-              </text>
-            ))}
-          </box>
-        )
-      })}
-    </box>
-  )
-}

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

@@ -1,59 +0,0 @@
-import { useState } from "react"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-export type TabItem = {
-  value: string
-  label: string
-}
-
-export type Props = {
-  items: TabItem[]
-  value?: string
-  defaultValue?: string
-  onChange?: (value: string) => void
-}
-
-/** Single-row segmented tabs. Uncontrolled by default; pass value + onChange to control externally. */
-export function HasciiTabs(props: Props) {
-  const theme = useHasciiTheme()
-
-  const initial = props.defaultValue ?? props.value ?? props.items[0]?.value ?? ""
-
-  const internalState = useState(initial)
-  const internal = internalState[0]
-  const setInternal = internalState[1]
-
-  const current = props.value ?? internal
-
-  const onSelect = (next: string) => {
-    if (props.value === undefined) setInternal(next)
-    props.onChange?.(next)
-  }
-
-  return (
-    <box flexDirection="row" gap={0} height={2}>
-      {props.items.map((item) => {
-        const isActive = item.value === current
-        const fg = isActive ? theme.color.foreground : theme.color.mutedForeground
-        const itemWidth = item.label.length + 4
-
-        return (
-          <box
-            key={item.value}
-            height={2}
-            paddingLeft={2}
-            paddingRight={2}
-            onMouseUp={() => onSelect(item.value)}
-          >
-            <text fg={fg}>{item.label}</text>
-            {isActive ? (
-              <box position="absolute" bottom={0} left={0} right={0}>
-                <text fg={theme.color.primary}>{"▁".repeat(itemWidth)}</text>
-              </box>
-            ) : null}
-          </box>
-        )
-      })}
-    </box>
-  )
-}

package/lib/tui/components/ui/hascii/toggle-group-item.tsx

@@ -1,45 +0,0 @@
-import type { ReactNode } from "react"
-import { useHasciiToggleGroup } from "@/tui/components/ui/hascii/toggle-group"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-import { usePressable } from "@/tui/hooks/hascii/use-pressable"
-
-export type Props = {
-  value: string
-  children?: ReactNode
-}
-
-/** Pressable cell inside HasciiToggleGroup. Pressed state is controlled by the surrounding group. */
-export function HasciiToggleGroupItem(props: Props) {
-  const theme = useHasciiTheme()
-  const ctx = useHasciiToggleGroup()
-
-  const isSelected = ctx?.isPressed(props.value) ?? false
-
-  const press = usePressable({
-    onPress: () => ctx?.toggle(props.value),
-  })
-
-  const bg = isSelected
-    ? press.isPressed
-      ? theme.color.primaryActive
-      : press.isHovered
-        ? theme.color.primaryHover
-        : theme.color.primary
-    : press.isPressed
-      ? theme.color.secondaryActive
-      : press.isHovered
-        ? theme.color.secondaryHover
-        : theme.color.popover
-
-  const fg = isSelected
-    ? theme.color.primaryForeground
-    : press.isHovered
-      ? theme.color.foreground
-      : theme.color.mutedForeground
-
-  return (
-    <box height={1} paddingLeft={2} paddingRight={2} backgroundColor={bg} {...press.bind}>
-      <text fg={fg}>{props.children}</text>
-    </box>
-  )
-}

package/lib/tui/components/ui/hascii/toggle-group.tsx

@@ -1,99 +0,0 @@
-import { createContext, useContext, useState } from "react"
-import type { ReactNode } from "react"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-type SelectionMode = "single" | "multiple"
-
-type SingleProps = {
-  type?: "single"
-  value?: string
-  defaultValue?: string
-  onChange?: (value: string) => void
-}
-
-type MultipleProps = {
-  type: "multiple"
-  value?: string[]
-  defaultValue?: string[]
-  onChange?: (value: string[]) => void
-}
-
-export type Props = (SingleProps | MultipleProps) & {
-  children?: ReactNode
-}
-
-type ContextValue = {
-  mode: SelectionMode
-  isPressed: (value: string) => boolean
-  toggle: (value: string) => void
-}
-
-const ToggleGroupContext = createContext<ContextValue | null>(null)
-
-/** Read the current ToggleGroup context. Returns null when called outside a HasciiToggleGroup. */
-export function useHasciiToggleGroup(): ContextValue | null {
-  return useContext(ToggleGroupContext)
-}
-
-const isSingle = (props: Props): props is SingleProps & { children?: ReactNode } =>
-  props.type !== "multiple"
-
-/** Segmented row of HasciiToggleGroupItem. type="single" is mutually exclusive; type="multiple" allows any subset. */
-export function HasciiToggleGroup(props: Props) {
-  const theme = useHasciiTheme()
-  const internalSingleState = useState<string>(isSingle(props) ? (props.defaultValue ?? "") : "")
-  const internalMultipleState = useState<string[]>(
-    !isSingle(props) ? (props.defaultValue ?? []) : [],
-  )
-
-  if (isSingle(props)) {
-    const internal = internalSingleState[0]
-    const setInternal = internalSingleState[1]
-    const current = props.value ?? internal
-
-    const toggle = (value: string) => {
-      if (props.value === undefined) setInternal(value)
-      props.onChange?.(value)
-    }
-
-    const ctx: ContextValue = {
-      mode: "single",
-      isPressed: (value) => value === current,
-      toggle,
-    }
-
-    return (
-      <ToggleGroupContext.Provider value={ctx}>
-        <box flexDirection="row" gap={0} height={1} backgroundColor={theme.color.popover}>
-          {props.children}
-        </box>
-      </ToggleGroupContext.Provider>
-    )
-  }
-
-  const internal = internalMultipleState[0]
-  const setInternal = internalMultipleState[1]
-  const current = props.value ?? internal
-
-  const toggle = (value: string) => {
-    const next = current.includes(value)
-      ? current.filter((entry) => entry !== value)
-      : [...current, value]
-    if (props.value === undefined) setInternal(next)
-    props.onChange?.(next)
-  }
-
-  const ctx: ContextValue = {
-    mode: "multiple",
-    isPressed: (value) => current.includes(value),
-    toggle,
-  }
-
-  return (
-    <ToggleGroupContext.Provider value={ctx}>
-      <box flexDirection="row" gap={0} height={1}>
-        {props.children}
-      </box>
-    </ToggleGroupContext.Provider>
-  )
-}

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

@@ -1,104 +0,0 @@
-import { useState } from "react"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-export type TreeNode = {
-  id: string
-  label: string
-  children?: TreeNode[]
-}
-
-export type Props = {
-  nodes: TreeNode[]
-  indent?: number
-}
-
-type Row = {
-  node: TreeNode
-  prefix: string
-}
-
-type RowProps = {
-  row: Row
-}
-
-/** Internal row used by HasciiTree. Hover-only background; no click handler. */
-function HasciiTreeRow(props: RowProps) {
-  const theme = useHasciiTheme()
-
-  const hoveredState = useState(false)
-  const isHovered = hoveredState[0]
-  const setHovered = hoveredState[1]
-
-  const bg = isHovered ? theme.color.secondaryHover : undefined
-
-  return (
-    <box
-      flexDirection="row"
-      alignItems="center"
-      paddingLeft={1}
-      paddingRight={1}
-      height={1}
-      backgroundColor={bg}
-      onMouseOver={() => setHovered(true)}
-      onMouseOut={() => setHovered(false)}
-    >
-      <text fg={theme.color.mutedForeground}>{props.row.prefix}</text>
-      <text fg={theme.color.foreground}>{props.row.node.label}</text>
-    </box>
-  )
-}
-
-const buildSegment = (
-  kind: "ancestor-bar" | "ancestor-blank" | "tee" | "elbow",
-  indent: number,
-): string => {
-  const head =
-    kind === "ancestor-bar" ? "│" : kind === "ancestor-blank" ? " " : kind === "tee" ? "├" : "└"
-  const tail =
-    kind === "tee" || kind === "elbow"
-      ? "─".repeat(Math.max(0, indent - 1))
-      : " ".repeat(Math.max(0, indent - 1))
-  return `${head}${tail}`
-}
-
-const flatten = (nodes: TreeNode[], ancestorsAreLast: boolean[], indent: number): Row[] => {
-  const rows: Row[] = []
-
-  for (let index = 0; index < nodes.length; index++) {
-    const node = nodes[index]
-    if (node === undefined) continue
-
-    const isLast = index === nodes.length - 1
-
-    let prefix = ""
-    for (const isAncestorLast of ancestorsAreLast) {
-      prefix += buildSegment(isAncestorLast ? "ancestor-blank" : "ancestor-bar", indent)
-    }
-    prefix += buildSegment(isLast ? "elbow" : "tee", indent)
-    prefix += " "
-
-    rows.push({ node, prefix })
-
-    if (node.children && node.children.length > 0) {
-      const childRows = flatten(node.children, [...ancestorsAreLast, isLast], indent)
-      for (const childRow of childRows) rows.push(childRow)
-    }
-  }
-
-  return rows
-}
-
-/** Static read-only file-tree drawn with ├/└/│ box-drawing characters. Hover highlights a row but rows are not clickable. */
-export function HasciiTree(props: Props) {
-  const indent = props.indent ?? 2
-
-  const rows = flatten(props.nodes, [], indent)
-
-  return (
-    <box flexDirection="column">
-      {rows.map((row) => (
-        <HasciiTreeRow key={row.node.id} row={row} />
-      ))}
-    </box>
-  )
-}

package/lib/tui/components/view-shell.tsx

@@ -1,44 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import type { ReactNode } from "react"
-import { verticalScrollbarOptions } from "@/tui/scrollbar-options"
-import { funnel } from "@/tui/theme"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-type Props = {
-  children: ReactNode
-}
-
-/**
- * Outer wrapper every view renders into.
- *
- * Renders a vertical `<scrollbox>` so content that overflows the visible
- * area scrolls instead of clipping the layout. Padding follows the
- * uniform `funnel.paddingX/Y` rule and lives on the inner content
- * container (via `contentOptions`); the outer scrollbox itself is
- * transparent so multi-block views (`events` events list + DetailBar
- * sibling) still stack cleanly.
- *
- * The vertical scrollbar's track and thumb pull from the theme so the
- * widget reads as part of the surface palette instead of OpenTUI's
- * default electric blue.
- */
-export function ViewShell(props: Props) {
-  const theme = useHasciiTheme()
-
-  return (
-    <scrollbox
-      style={{ flexGrow: 1 }}
-      contentOptions={{
-        flexDirection: "column",
-        paddingLeft: funnel.paddingX,
-        paddingRight: funnel.paddingX,
-        paddingTop: funnel.paddingY,
-        paddingBottom: funnel.paddingY,
-        gap: funnel.gap,
-      }}
-      verticalScrollbarOptions={verticalScrollbarOptions(theme)}
-    >
-      {props.children}
-    </scrollbox>
-  )
-}

package/lib/tui/filter-input.tsx

@@ -1,33 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { funnel } from "@/tui/theme"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-type Props = {
-  value: string
-  active: boolean
-}
-
-/** Inline filter overlay shown when the user presses `/`. */
-export function FilterInput(props: Props) {
-  const theme = useHasciiTheme()
-
-  if (!props.active) return null
-
-  return (
-    <box
-      style={{
-        height: funnel.barHeight,
-        backgroundColor: theme.color.muted,
-        paddingLeft: funnel.paddingX,
-        paddingRight: funnel.paddingX,
-      }}
-    >
-      <text>
-        <span fg={theme.color.foreground}>/</span>
-        <span fg={theme.color.foreground}>{props.value}</span>
-        <span fg={theme.color.foreground}>█</span>
-        <span fg={theme.color.mutedForeground}>{"  · Enter to apply · Esc to cancel"}</span>
-      </text>
-    </box>
-  )
-}

package/lib/tui/hooks/hascii/use-pressable.ts

@@ -1,54 +0,0 @@
-import { useState } from "react"
-
-export type Bindings = {
-  onMouseOver: () => void
-  onMouseOut: () => void
-  onMouseDown: () => void
-  onMouseUp: () => void
-}
-
-export type PressableState = {
-  isHovered: boolean
-  isPressed: boolean
-  bind: Bindings
-}
-
-export type Options = {
-  isDisabled?: boolean
-  onPress?: () => void
-}
-
-/** Tracks hover and press state for a focusable element and exposes mouse handlers ready for spread. */
-export function usePressable(options?: Options): PressableState {
-  const isDisabled = options?.isDisabled ?? false
-  const onPress = options?.onPress
-
-  const hoveredState = useState(false)
-  const isHovered = hoveredState[0]
-  const setHovered = hoveredState[1]
-
-  const pressedState = useState(false)
-  const isPressed = pressedState[0]
-  const setPressed = pressedState[1]
-
-  const bind: Bindings = {
-    onMouseOver: () => {
-      if (!isDisabled) setHovered(true)
-    },
-    onMouseOut: () => {
-      setHovered(false)
-      setPressed(false)
-    },
-    onMouseDown: () => {
-      if (!isDisabled) setPressed(true)
-    },
-    onMouseUp: () => {
-      if (isDisabled) return
-
-      if (isPressed) onPress?.()
-      setPressed(false)
-    },
-  }
-
-  return { isHovered, isPressed, bind }
-}

package/lib/tui/parse-comma-list.ts

@@ -1,14 +0,0 @@
-/**
- * Parse a comma-separated text input into a clean string array.
- *
- * Used by the editable channels (connector list) and profiles (env-files)
- * views to turn the user's free-form input ("a, b , c,") into the
- * actual list ["a", "b", "c"]. Empty entries and surrounding whitespace
- * are dropped so trailing commas and stray spaces don't matter.
- */
-export function parseCommaList(raw: string): string[] {
-  return raw
-    .split(",")
-    .map((part) => part.trim())
-    .filter((part) => part.length > 0)
-}

package/lib/tui/profile-launcher.tsx

@@ -1,61 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { HasciiSeparator } from "@/tui/components/ui/hascii/separator"
-import { EmptyState } from "@/tui/components/empty-state"
-import { funnel } from "@/tui/theme"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-import type { ProfileConfig } from "@/engine/settings/settings-schema"
-
-type Props = {
-  active: boolean
-  profiles: ProfileConfig[]
-  selectedIndex: number
-}
-
-/**
- * Modal-style overlay: pick a profile and launch Claude Code via the same
- * code path as `fnl claude --profile`. The launcher exits the TUI before
- * exec'ing so Claude takes over the terminal.
- */
-export function ProfileLauncher(props: Props) {
-  const theme = useHasciiTheme()
-
-  if (!props.active) return null
-
-  return (
-    <box
-      style={{
-        flexDirection: "column",
-        backgroundColor: funnel.surface,
-        paddingLeft: funnel.paddingX,
-        paddingRight: funnel.paddingX,
-        paddingTop: funnel.paddingY,
-        paddingBottom: funnel.paddingY,
-        gap: funnel.gap,
-        position: "absolute",
-        top: funnel.modalTop,
-        left: funnel.modalInset,
-        right: funnel.modalInset,
-      }}
-    >
-      <text fg={theme.color.foreground}>launch claude with profile</text>
-      <HasciiSeparator />
-
-      {props.profiles.length === 0 ? (
-        <EmptyState message="(no profiles — `fnl profiles add` first)" />
-      ) : (
-        props.profiles.map((profile, index) => {
-          const selected = index === props.selectedIndex
-
-          return (
-            <text key={profile.name} bg={selected ? theme.color.muted : undefined}>
-              <span fg={theme.color.foreground}>{profile.name}</span>
-              <span fg={funnel.faint}>
-                {`  → channel ${profile.channelId} · path ${profile.path} · sub-agent ${profile.subAgent}`}
-              </span>
-            </text>
-          )
-        })
-      )}
-    </box>
-  )
-}