@interactive-inc/claude-funnel 0.7.1 → 0.8.0

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

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

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

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

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

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

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

@@ -0,0 +1,44 @@
+/** @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

@@ -0,0 +1,33 @@
+/** @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

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

@@ -0,0 +1,14 @@
+/**
+ * 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

@@ -0,0 +1,61 @@
+/** @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>
+  )
+}