@interactive-inc/claude-funnel 0.4.1 → 0.8.0

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,58 @@
+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>
+  )
+}