@interactive-inc/claude-funnel 0.8.1 → 0.10.1

package/lib/tui/components/menu-item.tsx

@@ -1,73 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { funnel } from "@/tui/theme"
-import { usePressable } from "@/tui/hooks/hascii/use-pressable"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-type Props = {
-  label: string
-  active: boolean
-  count?: number
-  onSelect: () => void
-}
-
-const ROW_HEIGHT = funnel.paddingY * 2 + 1
-
-/**
- * One row in the sidebar nav.
- *
- * Active state: a thin `▏` (U+258F LEFT ONE EIGHTH BLOCK) rule painted
- * in the primary color, stacked to fill the row height. The rule is
- * narrower than a full character cell so it reads as a delicate accent
- * instead of a heavy block. The sidebar's own background is `muted`,
- * so hover/active lift the row to `secondaryHover` / `secondaryActive`
- * to read against it.
- */
-export function MenuItem(props: Props) {
-  const theme = useHasciiTheme()
-  const press = usePressable({ onPress: props.onSelect })
-
-  const bg = press.isPressed
-    ? theme.color.secondaryActive
-    : props.active || press.isHovered
-      ? theme.color.secondaryHover
-      : undefined
-
-  const isLifted = props.active || press.isHovered || press.isPressed
-  const fg = isLifted ? theme.color.foreground : theme.color.foreground
-  const countFg = isLifted ? theme.color.foreground : funnel.faint
-
-  return (
-    <box
-      {...press.bind}
-      style={{
-        flexDirection: "row",
-        justifyContent: "space-between",
-        backgroundColor: bg,
-        paddingLeft: funnel.paddingX,
-        paddingRight: funnel.paddingX,
-        paddingTop: funnel.paddingY,
-        paddingBottom: funnel.paddingY,
-      }}
-    >
-      {props.active ? (
-        <box
-          style={{
-            position: "absolute",
-            left: 0,
-            top: 0,
-            bottom: 0,
-            flexDirection: "column",
-          }}
-        >
-          {Array.from({ length: ROW_HEIGHT }, (_, index) => (
-            <text key={index} fg={funnel.primary}>
-              ▏
-            </text>
-          ))}
-        </box>
-      ) : null}
-      <text fg={fg}>{props.label}</text>
-      {props.count !== undefined ? <text fg={countFg}>{String(props.count)}</text> : null}
-    </box>
-  )
-}

package/lib/tui/components/menu.tsx

@@ -1,26 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { MenuItem } from "@/tui/components/menu-item"
-import type { MenuItem as MenuItemType, View } from "@/tui/types"
-
-type Props = {
-  items: MenuItemType[]
-  active: View
-  onSelect: (view: View) => void
-}
-
-/** Vertical list of clickable nav rows. Each row is a `MenuItem`. */
-export function Menu(props: Props) {
-  return (
-    <box style={{ flexDirection: "column" }}>
-      {props.items.map((item) => (
-        <MenuItem
-          key={item.view}
-          label={item.label}
-          active={item.view === props.active}
-          count={item.count}
-          onSelect={() => props.onSelect(item.view)}
-        />
-      ))}
-    </box>
-  )
-}

package/lib/tui/components/panel-header.tsx

@@ -1,22 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { funnel } from "@/tui/theme"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-type Props = {
-  label: string
-  count?: number
-  hint?: string
-}
-
-/** Dim section label rendered at the top of every Panel. */
-export function PanelHeader(props: Props) {
-  const theme = useHasciiTheme()
-  const text = props.count !== undefined ? `${props.label} (${props.count})` : props.label
-
-  return (
-    <text fg={theme.color.mutedForeground}>
-      {text}
-      {props.hint ? <span fg={funnel.faint}>{`  · ${props.hint}`}</span> : null}
-    </text>
-  )
-}

package/lib/tui/components/readonly-field.tsx

@@ -1,18 +0,0 @@
-import { HasciiFormItem } from "@/tui/components/ui/hascii/form-item"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-type Props = {
-  label: string
-  value: string
-}
-
-/** Static label + value row that mirrors the EditableField layout. */
-export function ReadonlyField(props: Props) {
-  const theme = useHasciiTheme()
-
-  return (
-    <HasciiFormItem label={props.label} labelWidth={12}>
-      <text fg={theme.color.foreground}>{props.value}</text>
-    </HasciiFormItem>
-  )
-}

package/lib/tui/components/section-header.tsx

@@ -1,25 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { funnel } from "@/tui/theme"
-
-type Props = {
-  label: string
-}
-
-/**
- * Tiny faint label rendered above each sidebar section. Wrapped in a box
- * because OpenTUI ignores padding on `<text>`; only boxes lay out with
- * padding.
- */
-export function SectionHeader(props: Props) {
-  return (
-    <box
-      style={{
-        flexDirection: "row",
-        paddingLeft: funnel.paddingX,
-        paddingRight: funnel.paddingX,
-      }}
-    >
-      <text fg={funnel.faint}>{props.label}</text>
-    </box>
-  )
-}

package/lib/tui/components/selection-accent.tsx

@@ -1,32 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { funnel } from "@/tui/theme"
-
-const RULE_LENGTH = 20
-
-/**
- * A thin `▏` (U+258F) primary-colour rule pinned to the left edge of
- * the parent box. Stacked tall enough to span any reasonable card or
- * field-group height; rows past the parent's bottom edge are clipped.
- *
- * Use inside a `position: relative` parent to mark it as the "current"
- * selection — same look as the sidebar `MenuItem` active accent.
- */
-export function SelectionAccent() {
-  return (
-    <box
-      style={{
-        position: "absolute",
-        left: 0,
-        top: 0,
-        bottom: 0,
-        flexDirection: "column",
-      }}
-    >
-      {Array.from({ length: RULE_LENGTH }, (_, index) => (
-        <text key={index} fg={funnel.primary}>
-          ▏
-        </text>
-      ))}
-    </box>
-  )
-}

package/lib/tui/components/session-item.tsx

@@ -1,33 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { funnel } from "@/tui/theme"
-import type { Session } from "@/tui/types"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-type Props = {
-  session: Session
-}
-
-/** One connected WebSocket session — channel name + connector summary. */
-export function SessionItem(props: Props) {
-  const theme = useHasciiTheme()
-  const { session } = props
-  const summary =
-    session.connectors.length === 0
-      ? "(no connectors)"
-      : session.connectors.length === 1
-        ? session.connectors[0]
-        : `${session.connectors.length} connectors`
-
-  return (
-    <box
-      style={{
-        flexDirection: "column",
-        paddingLeft: funnel.paddingX,
-        paddingRight: funnel.paddingX,
-      }}
-    >
-      <text fg={theme.color.foreground}>{session.channel || "(unnamed)"}</text>
-      <text fg={funnel.faint}>{summary}</text>
-    </box>
-  )
-}

package/lib/tui/components/session-list.tsx

@@ -1,33 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { SessionItem } from "@/tui/components/session-item"
-import { funnel } from "@/tui/theme"
-import type { Session } from "@/tui/types"
-
-type Props = {
-  sessions: Session[]
-}
-
-/** Vertical list of connected sessions (Claude MCP clients) for the sidebar. */
-export function SessionList(props: Props) {
-  if (props.sessions.length === 0) {
-    return (
-      <box
-        style={{
-          flexDirection: "row",
-          paddingLeft: funnel.paddingX,
-          paddingRight: funnel.paddingX,
-        }}
-      >
-        <text fg={funnel.faint}>(none)</text>
-      </box>
-    )
-  }
-
-  return (
-    <box style={{ flexDirection: "column" }}>
-      {props.sessions.map((session, index) => (
-        <SessionItem key={`${session.channel}-${index}`} session={session} />
-      ))}
-    </box>
-  )
-}

package/lib/tui/components/ui/hascii/accordion-item.tsx

@@ -1,88 +0,0 @@
-import type { ReactNode } from "react"
-import type { HasciiTheme } from "@/tui/utils/hascii/theme"
-import { useHasciiAccordion } from "@/tui/components/ui/hascii/accordion"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-import { usePressable } from "@/tui/hooks/hascii/use-pressable"
-
-export type Props = {
-  value: string
-  title: string
-  children?: ReactNode
-}
-
-const HEADER_HEIGHT = 3
-
-const pickHeaderBg = (
-  isOpen: boolean,
-  isHovered: boolean,
-  isPressed: boolean,
-  theme: HasciiTheme,
-): string | undefined => {
-  if (isPressed) return theme.color.secondaryActive
-  if (isHovered && isOpen) return theme.color.hoverActive
-  if (isHovered) return theme.color.secondaryHover
-  if (isOpen) return theme.color.secondaryActive
-  return undefined
-}
-
-/** Single collapsible row inside HasciiAccordion. Header tracks the same hover/active palette as HasciiSidebarMenuItem; body uses a muted text color. */
-export function HasciiAccordionItem(props: Props) {
-  const accordion = useHasciiAccordion()
-  const theme = useHasciiTheme()
-
-  const isOpen = accordion?.isOpen(props.value) ?? false
-
-  const press = usePressable({
-    onPress: () => accordion?.toggle(props.value),
-  })
-
-  const headerBg = pickHeaderBg(isOpen, press.isHovered, press.isPressed, theme)
-
-  const titleFg = isOpen || press.isHovered ? theme.color.foreground : theme.color.mutedForeground
-
-  const indicator = isOpen ? "▾" : "▸"
-
-  return (
-    <box flexDirection="column">
-      <box
-        flexDirection="row"
-        alignItems="center"
-        gap={1}
-        paddingLeft={2}
-        paddingRight={2}
-        paddingTop={1}
-        paddingBottom={1}
-        height={HEADER_HEIGHT}
-        backgroundColor={headerBg}
-        {...press.bind}
-      >
-        {isOpen ? (
-          <box position="absolute" left={0} top={0} bottom={0} flexDirection="column">
-            {Array.from({ length: HEADER_HEIGHT }, (_, index) => (
-              <text key={index} fg={theme.color.primary}>
-                ▏
-              </text>
-            ))}
-          </box>
-        ) : null}
-        <text fg={titleFg}>{indicator}</text>
-        <text fg={titleFg}>{props.title}</text>
-      </box>
-      {isOpen ? (
-        <box
-          paddingLeft={4}
-          paddingRight={2}
-          paddingTop={1}
-          paddingBottom={1}
-          backgroundColor={theme.color.muted}
-        >
-          {typeof props.children === "string" ? (
-            <text fg={theme.color.mutedForeground}>{props.children}</text>
-          ) : (
-            props.children
-          )}
-        </box>
-      ) : null}
-    </box>
-  )
-}

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

@@ -1,96 +0,0 @@
-import { createContext, useContext, useState } from "react"
-import type { ReactNode } from "react"
-
-type Mode = "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: Mode
-  isOpen: (value: string) => boolean
-  toggle: (value: string) => void
-}
-
-const AccordionContext = createContext<ContextValue | null>(null)
-
-/** Read the current Accordion context. Returns null when called outside HasciiAccordion. */
-export function useHasciiAccordion(): ContextValue | null {
-  return useContext(AccordionContext)
-}
-
-const isSingle = (props: Props): props is SingleProps & { children?: ReactNode } =>
-  props.type !== "multiple"
-
-/** Vertical stack of collapsible HasciiAccordionItem children. type="single" only opens one section at a time. */
-export function HasciiAccordion(props: Props) {
-  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) => {
-      const next = current === value ? "" : value
-
-      if (props.value === undefined) setInternal(next)
-      props.onChange?.(next)
-    }
-
-    const ctx: ContextValue = {
-      mode: "single",
-      isOpen: (value) => value === current,
-      toggle,
-    }
-
-    return (
-      <AccordionContext.Provider value={ctx}>
-        <box flexDirection="column">{props.children}</box>
-      </AccordionContext.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",
-    isOpen: (value) => current.includes(value),
-    toggle,
-  }
-
-  return (
-    <AccordionContext.Provider value={ctx}>
-      <box flexDirection="column">{props.children}</box>
-    </AccordionContext.Provider>
-  )
-}

package/lib/tui/components/ui/hascii/alert-dialog.tsx

@@ -1,43 +0,0 @@
-import { HasciiButton } from "@/tui/components/ui/hascii/button"
-import { HasciiDialog } from "@/tui/components/ui/hascii/dialog"
-import { HasciiDialogDescription } from "@/tui/components/ui/hascii/dialog-description"
-import { HasciiDialogFooter } from "@/tui/components/ui/hascii/dialog-footer"
-import { HasciiDialogHeader } from "@/tui/components/ui/hascii/dialog-header"
-import { HasciiDialogTitle } from "@/tui/components/ui/hascii/dialog-title"
-
-export type Props = {
-  title: string
-  description?: string
-  okText?: string
-  cancelText?: string
-  width?: number
-  onOk?: () => void
-  onCancel?: () => void
-  onClose?: () => void
-}
-
-/** Convenience wrapper around HasciiDialog. Renders a title, optional description, and one or two footer buttons (OK / optional Cancel). */
-export function HasciiAlertDialog(props: Props) {
-  const okText = props.okText ?? "OK"
-
-  return (
-    <HasciiDialog width={props.width} onClose={props.onClose}>
-      <HasciiDialogHeader>
-        <HasciiDialogTitle>{props.title}</HasciiDialogTitle>
-        {props.description !== undefined ? (
-          <HasciiDialogDescription>{props.description}</HasciiDialogDescription>
-        ) : null}
-      </HasciiDialogHeader>
-      <HasciiDialogFooter>
-        {props.cancelText !== undefined ? (
-          <HasciiButton variant="secondary" size="default" onPress={props.onCancel}>
-            {props.cancelText}
-          </HasciiButton>
-        ) : null}
-        <HasciiButton variant="default" size="default" onPress={props.onOk}>
-          {okText}
-        </HasciiButton>
-      </HasciiDialogFooter>
-    </HasciiDialog>
-  )
-}

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

@@ -1,51 +0,0 @@
-import type { ReactNode } from "react"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-type Variant = "default" | "secondary" | "outline" | "destructive"
-
-export type Props = {
-  variant?: Variant
-  children?: ReactNode
-}
-
-/** Compact status indicator with default, secondary, outline, and destructive variants. */
-export function HasciiBadge(props: Props) {
-  const variant = props.variant ?? "default"
-  const theme = useHasciiTheme()
-
-  if (variant === "secondary") {
-    return (
-      <box paddingLeft={1} paddingRight={1} backgroundColor={theme.color.secondary}>
-        <text fg={theme.color.secondaryForeground}>{props.children}</text>
-      </box>
-    )
-  }
-
-  if (variant === "outline") {
-    return (
-      <box
-        paddingLeft={1}
-        paddingRight={1}
-        border
-        borderStyle="rounded"
-        borderColor={theme.color.border}
-      >
-        <text fg={theme.color.foreground}>{props.children}</text>
-      </box>
-    )
-  }
-
-  if (variant === "destructive") {
-    return (
-      <box paddingLeft={1} paddingRight={1} backgroundColor={theme.color.destructive}>
-        <text fg={theme.color.destructiveForeground}>{props.children}</text>
-      </box>
-    )
-  }
-
-  return (
-    <box paddingLeft={1} paddingRight={1} backgroundColor={theme.color.primary}>
-      <text fg={theme.color.primaryForeground}>{props.children}</text>
-    </box>
-  )
-}

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

@@ -1,58 +0,0 @@
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-export type BreadcrumbItem = {
-  label: string
-  value?: string
-}
-
-export type Props = {
-  items: BreadcrumbItem[]
-  separator?: string
-  onSelect?: (value: string) => void
-}
-
-/** Horizontal trail of crumbs joined by a separator. The last item is rendered as the current location. */
-export function HasciiBreadcrumb(props: Props) {
-  const separator = props.separator ?? "›"
-  const theme = useHasciiTheme()
-
-  const cells: { id: string; node: import("react").ReactNode }[] = []
-
-  for (let index = 0; index < props.items.length; index++) {
-    const item = props.items[index]
-    if (item === undefined) continue
-
-    const isLast = index === props.items.length - 1
-    const fg = isLast ? theme.color.foreground : theme.color.mutedForeground
-    const onPress =
-      isLast || item.value === undefined ? undefined : () => props.onSelect?.(item.value as string)
-
-    cells.push({
-      id: `crumb-${index}`,
-      node: (
-        <box paddingLeft={0} paddingRight={0} onMouseUp={onPress}>
-          <text fg={fg}>{item.label}</text>
-        </box>
-      ),
-    })
-
-    if (!isLast) {
-      cells.push({
-        id: `sep-${index}`,
-        node: (
-          <box paddingLeft={1} paddingRight={1}>
-            <text fg={theme.color.mutedForeground}>{separator}</text>
-          </box>
-        ),
-      })
-    }
-  }
-
-  return (
-    <box flexDirection="row" alignItems="center">
-      {cells.map((cell) => (
-        <box key={cell.id}>{cell.node}</box>
-      ))}
-    </box>
-  )
-}