@interactive-inc/claude-funnel 0.10.0 → 0.15.1

package/lib/tui/scrollbar-options.ts

@@ -1,19 +0,0 @@
-import { funnel } from "@/tui/theme"
-import type { HasciiTheme } from "@/tui/utils/hascii/theme"
-
-/**
- * Shared OpenTUI scrollbar styling. Used by `ViewShell` and `DetailBar`
- * so both scroll containers paint the track with the surrounding
- * `surface` tone and the thumb in `mutedForeground` instead of OpenTUI's
- * default electric blue.
- *
- * Takes the active hascii theme since scrollbar coloring depends on
- * the same palette as everything else.
- */
-export const verticalScrollbarOptions = (theme: HasciiTheme) =>
-  ({
-    trackOptions: {
-      backgroundColor: funnel.surface,
-      foregroundColor: theme.color.mutedForeground,
-    },
-  }) as const

package/lib/tui/sidebar.tsx

@@ -1,50 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { Brand } from "@/tui/components/brand"
-import { GatewayStatus } from "@/tui/components/gateway-status"
-import { Menu } from "@/tui/components/menu"
-import { SectionHeader } from "@/tui/components/section-header"
-import { SessionList } from "@/tui/components/session-list"
-import { HasciiSidebar } from "@/tui/components/ui/hascii/sidebar"
-import { HasciiSidebarHeader } from "@/tui/components/ui/hascii/sidebar-header"
-import { funnel } from "@/tui/theme"
-import type { MenuItem, Snapshot, View } from "@/tui/types"
-
-type Props = {
-  snapshot: Snapshot
-  menuItems: MenuItem[]
-  view: View
-  onSelect: (view: View) => void
-  busy: boolean
-  onToggleGateway: () => void
-}
-
-/**
- * Left rail built on hascii's HasciiSidebar shell.
- *
- * Sections (top → bottom): brand (header slot), gateway card, sessions,
- * navigation menu. The funnel `Menu` items keep the left-edge `▏`
- * primary accent and right-aligned counts that hascii's stock sidebar
- * menu does not provide.
- */
-export function Sidebar(props: Props) {
-  return (
-    <HasciiSidebar width={funnel.sidebarWidth}>
-      <HasciiSidebarHeader>
-        <Brand />
-      </HasciiSidebarHeader>
-
-      <GatewayStatus
-        gateway={props.snapshot.gateway}
-        busy={props.busy}
-        onToggle={props.onToggleGateway}
-      />
-
-      <box style={{ flexDirection: "column" }}>
-        <SectionHeader label="sessions" />
-        <SessionList sessions={props.snapshot.sessions} />
-      </box>
-
-      <Menu items={props.menuItems} active={props.view} onSelect={props.onSelect} />
-    </HasciiSidebar>
-  )
-}

package/lib/tui/theme.ts

@@ -1,40 +0,0 @@
-import { hasciiTw } from "@/tui/utils/hascii/theme"
-
-/**
- * Funnel-specific TUI tokens that hascii does not cover.
- *
- * Generic colors (background / foreground / primary / muted / etc.)
- * come from hascii via `useHasciiTheme()` — components that need them
- * read the theme there. Only the funnel-only concerns live here:
- *
- *   - status accents (`alive` / `dead` / `warn`) and the selection
- *     accent (`primary` blue) — semantic colors not in hascii's palette
- *   - the in-between background tier `surface` (zinc[900]) sitting
- *     between hascii's `background` and `muted`
- *   - the deeper text tier `faint` (zinc[600]) below `mutedForeground`
- *   - layout constants (paddingX / paddingY / gap / sidebarWidth / ...)
- */
-export const funnel = {
-  // ─ funnel-specific colors ────────────────────────────────
-  alive: "#86efac",
-  dead: "#fca5a5",
-  warn: "#fcd34d",
-  primary: "#3b82f6",
-
-  surface: hasciiTw.colors.zinc[900],
-  faint: hasciiTw.colors.zinc[600],
-
-  // ─ layout ────────────────────────────────────────────────
-  paddingX: 2,
-  paddingY: 1,
-  gap: 1,
-
-  sidebarWidth: 24,
-
-  modalTop: 4,
-  modalInset: "20%",
-
-  barHeight: 1,
-
-  detailPanelHeight: 14,
-} as const

package/lib/tui/tui.tsx

@@ -1,20 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { createCliRenderer } from "@opentui/core"
-import { createRoot } from "@opentui/react"
-import { App } from "@/tui/app"
-import { HasciiThemeProvider } from "@/tui/utils/hascii/theme-context"
-import type { Funnel } from "@/funnel"
-
-export async function launchTui(funnel: Funnel): Promise<void> {
-  const renderer = await createCliRenderer()
-
-  createRoot(renderer).render(
-    <HasciiThemeProvider>
-      <App funnel={funnel} />
-    </HasciiThemeProvider>,
-  )
-
-  await new Promise<void>((resolve) => {
-    renderer.once("destroy", () => resolve())
-  })
-}

package/lib/tui/types.ts

@@ -1,38 +0,0 @@
-import type { ChannelConnectorView } from "@/engine/channels/channels"
-import type { ListenerEntry } from "@/gateway/listeners-client"
-import type { ChannelConfig, ProfileConfig } from "@/engine/settings/settings-schema"
-
-export type Session = {
-  channel: string
-  connectors: string[]
-}
-
-export type Snapshot = {
-  connectors: ChannelConnectorView[]
-  channels: ChannelConfig[]
-  profiles: ProfileConfig[]
-  gateway: { running: boolean; pid: number | null; port: number }
-  listeners: ListenerEntry[]
-  sessions: Session[]
-  daemonReachable: boolean
-  refreshedAt: number
-}
-
-export type StreamEvent = {
-  id: number
-  receivedAt: number
-  content: string
-  meta: Record<string, string>
-}
-
-export type StreamStatus = "connecting" | "open" | "closed" | "disabled"
-
-export type Mode = "browse" | "filter" | "profile-launcher"
-
-export type View = "events" | "connectors" | "channels" | "profiles" | "listeners"
-
-export type MenuItem = {
-  view: View
-  label: string
-  count?: number
-}

package/lib/tui/unique-name.ts

@@ -1,18 +0,0 @@
-/**
- * Pick the first `${prefix}-N` (N = 1, 2, …) that doesn't appear in the
- * `existing` list.
- *
- * Used by the connectors / channels / profiles views to mint a unique
- * default name when the user clicks "+ add". Stops at 10 000 to avoid a
- * runaway loop if `existing` is full of placeholder names — falls back
- * to `${prefix}-${Date.now()}` so the caller still gets a legal name.
- */
-export function uniqueName(existing: string[], prefix: string): string {
-  for (let i = 1; i < 10000; i += 1) {
-    const candidate = `${prefix}-${i}`
-
-    if (!existing.includes(candidate)) return candidate
-  }
-
-  return `${prefix}-${Date.now()}`
-}

package/lib/tui/use-event-stream.ts

@@ -1,133 +0,0 @@
-import { useEffect, useState } from "react"
-import { z } from "zod"
-import type { StreamEvent, StreamStatus } from "@/tui/types"
-
-const MAX_BUFFER = 200
-const RECONNECT_BASE_MS = 500
-const RECONNECT_MAX_MS = 8000
-
-const eventPayloadSchema = z.object({
-  content: z.string(),
-  meta: z.record(z.string(), z.string()).optional(),
-  offset: z.number().int().nonnegative().optional(),
-})
-
-type Result = {
-  events: StreamEvent[]
-  status: StreamStatus
-  reset: () => void
-}
-
-/**
- * Opens a `tap=all` WebSocket against the gateway daemon and accumulates
- * received events in a ring buffer. Reconnects with capped exponential
- * backoff. Returns `disabled` status until the daemon comes online.
- *
- * `token` is appended as `?token=` so the gateway accepts the upgrade.
- */
-export const useEventStream = (
-  port: number,
-  daemonReachable: boolean,
-  token: string | null,
-): Result => {
-  const [events, setEvents] = useState<StreamEvent[]>([])
-  const [status, setStatus] = useState<StreamStatus>("disabled")
-  const [resetTick, setResetTick] = useState(0)
-
-  useEffect(() => {
-    if (!daemonReachable) {
-      setStatus("disabled")
-      return
-    }
-
-    let cancelled = false
-    let socket: WebSocket | null = null
-    let reconnectTimer: ReturnType<typeof setTimeout> | null = null
-    let attempt = 0
-    let nextId = events.length > 0 ? Math.max(...events.map((e) => e.id)) + 1 : 1
-    let lastOffset = 0
-
-    const connect = () => {
-      if (cancelled) return
-
-      setStatus("connecting")
-      const sinceQuery = lastOffset > 0 ? `&since=${lastOffset}` : ""
-      const protocols = token ? [`funnel.token.${token}`] : undefined
-      socket = new WebSocket(`ws://localhost:${port}/ws?tap=all${sinceQuery}`, protocols)
-
-      socket.addEventListener("open", () => {
-        if (cancelled) return
-
-        attempt = 0
-        setStatus("open")
-      })
-
-      socket.addEventListener("message", (event) => {
-        if (cancelled) return
-
-        const raw: unknown = (() => {
-          try {
-            return JSON.parse(String(event.data))
-          } catch {
-            return null
-          }
-        })()
-        const parsed = eventPayloadSchema.safeParse(raw)
-
-        if (!parsed.success) return
-
-        if (typeof parsed.data.offset === "number") {
-          lastOffset = parsed.data.offset
-        }
-
-        const next: StreamEvent = {
-          id: nextId,
-          receivedAt: Date.now(),
-          content: parsed.data.content,
-          meta: parsed.data.meta ?? {},
-        }
-        nextId += 1
-
-        setEvents((prev) => {
-          const merged = [next, ...prev]
-          return merged.length > MAX_BUFFER ? merged.slice(0, MAX_BUFFER) : merged
-        })
-      })
-
-      socket.addEventListener("close", () => {
-        if (cancelled) return
-
-        setStatus("closed")
-        attempt += 1
-
-        const delay = Math.min(RECONNECT_BASE_MS * 2 ** (attempt - 1), RECONNECT_MAX_MS)
-
-        reconnectTimer = setTimeout(connect, delay)
-      })
-
-      socket.addEventListener("error", () => {
-        // close fires after error; reconnect happens there.
-      })
-    }
-
-    connect()
-
-    return () => {
-      cancelled = true
-
-      if (reconnectTimer) clearTimeout(reconnectTimer)
-      if (socket) socket.close()
-    }
-    // events / nextId intentionally captured at hook entry
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [port, daemonReachable, resetTick, token])
-
-  return {
-    events,
-    status,
-    reset: () => {
-      setEvents([])
-      setResetTick((value) => value + 1)
-    },
-  }
-}

package/lib/tui/use-snapshot.ts

@@ -1,99 +0,0 @@
-import { useEffect, useState } from "react"
-import { z } from "zod"
-import type { Session, Snapshot } from "@/tui/types"
-import type { Funnel } from "@/funnel"
-
-const POLL_INTERVAL_MS = 3000
-
-const sessionSchema = z.object({
-  channel: z.string(),
-  connectors: z.array(z.string()),
-})
-
-const statusResponseSchema = z.object({
-  clients: z.array(sessionSchema),
-})
-
-const emptySnapshot: Snapshot = {
-  connectors: [],
-  channels: [],
-  profiles: [],
-  gateway: { running: false, pid: null, port: 9742 },
-  listeners: [],
-  sessions: [],
-  daemonReachable: false,
-  refreshedAt: 0,
-}
-
-const fetchSessions = async (
-  port: number,
-  daemonRunning: boolean,
-  token: string | null,
-): Promise<Session[]> => {
-  if (!daemonRunning) return []
-
-  try {
-    const headers: Record<string, string> = token ? { authorization: `Bearer ${token}` } : {}
-    const response = await fetch(`http://localhost:${port}/status`, { headers })
-
-    if (!response.ok) return []
-
-    const parsed = statusResponseSchema.safeParse(await response.json())
-
-    if (!parsed.success) return []
-
-    return parsed.data.clients.filter((client) => client.channel !== "*tap*")
-  } catch {
-    return []
-  }
-}
-
-/**
- * Polls Funnel state every few seconds. The returned `refresh` callback forces
- * an immediate refetch — used by the manual `r` key and by listener-action
- * keystrokes that change daemon state.
- */
-export const useSnapshot = (funnel: Funnel): { snapshot: Snapshot; refresh: () => void } => {
-  const [snapshot, setSnapshot] = useState<Snapshot>(emptySnapshot)
-  const [tick, setTick] = useState(0)
-
-  useEffect(() => {
-    let cancelled = false
-
-    const load = async () => {
-      const gateway = funnel.gateway.getStatus()
-      const token = funnel.gatewayToken.read()
-      const [listenersResult, sessions] = await Promise.all([
-        funnel.listeners.list(),
-        fetchSessions(gateway.port, gateway.running, token),
-      ])
-
-      if (cancelled) return
-
-      setSnapshot({
-        connectors: funnel.channels.listAllConnectors(),
-        channels: funnel.channels.list(),
-        profiles: funnel.profiles.list(),
-        gateway,
-        listeners: listenersResult.state === "ok" ? listenersResult.listeners : [],
-        sessions,
-        daemonReachable: listenersResult.state === "ok",
-        refreshedAt: Date.now(),
-      })
-    }
-
-    void load()
-
-    const timer = setInterval(() => void load(), POLL_INTERVAL_MS)
-
-    return () => {
-      cancelled = true
-      clearInterval(timer)
-    }
-  }, [tick, funnel])
-
-  return {
-    snapshot,
-    refresh: () => setTick((value) => value + 1),
-  }
-}

package/lib/tui/utils/hascii/form-item-context.tsx

@@ -1,23 +0,0 @@
-import { createContext, useContext } from "react"
-import type { ReactNode } from "react"
-
-export type FormItemContextValue = {
-  focusId: string
-}
-
-const FormItemContext = createContext<FormItemContextValue | null>(null)
-
-/** Read the surrounding HasciiFormItem context. Returns null when called outside one. */
-export function useHasciiFormItem(): FormItemContextValue | null {
-  return useContext(FormItemContext)
-}
-
-export type Props = {
-  value: FormItemContextValue
-  children: ReactNode
-}
-
-/** Provider used by HasciiFormItem to share the row's focus id with the wrapped HasciiInput. */
-export function HasciiFormItemProvider(props: Props) {
-  return <FormItemContext.Provider value={props.value}>{props.children}</FormItemContext.Provider>
-}

package/lib/tui/utils/hascii/input-focus-context.tsx

@@ -1,31 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { createContext, useContext, useState } from "react"
-import type { ReactNode } from "react"
-
-type ContextValue = {
-  focusedId: string | null
-  setFocusedId: (id: string | null) => void
-}
-
-const InputFocusContext = createContext<ContextValue | null>(null)
-
-/** Returns the surrounding HasciiInputFocusProvider's API. Null when no provider is mounted. */
-export function useHasciiInputFocus(): ContextValue | null {
-  return useContext(InputFocusContext)
-}
-
-export type Props = {
-  children: ReactNode
-}
-
-/** Holds the id of the currently focused HasciiInput so siblings and outer click handlers can blur it. */
-export function HasciiInputFocusProvider(props: Props) {
-  const focusedState = useState<string | null>(null)
-
-  const value: ContextValue = {
-    focusedId: focusedState[0],
-    setFocusedId: focusedState[1],
-  }
-
-  return <InputFocusContext.Provider value={value}>{props.children}</InputFocusContext.Provider>
-}

package/lib/tui/utils/hascii/theme-context.tsx

@@ -1,26 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { createContext, useContext } from "react"
-import type { ReactNode } from "react"
-import type { HasciiTheme } from "@/tui/utils/hascii/theme"
-import { hasciiTheme } from "@/tui/utils/hascii/theme"
-
-const HasciiThemeContext = createContext<HasciiTheme>(hasciiTheme)
-
-/** Read the active theme from context. Falls back to the default theme outside a provider. */
-export function useHasciiTheme(): HasciiTheme {
-  return useContext(HasciiThemeContext)
-}
-
-export type Props = {
-  theme?: HasciiTheme
-  children: ReactNode
-}
-
-/** Wraps a subtree with a HasciiTheme so descendants can read tokens via useHasciiTheme. */
-export function HasciiThemeProvider(props: Props) {
-  return (
-    <HasciiThemeContext.Provider value={props.theme ?? hasciiTheme}>
-      {props.children}
-    </HasciiThemeContext.Provider>
-  )
-}

package/lib/tui/utils/hascii/theme.ts

@@ -1,176 +0,0 @@
-import { z } from "zod"
-import tokens from "@/tui/utils/hascii/tokens.json"
-
-// TailwindCSS v4 default color palette (subset). Use as raw primitives — wire into theme tokens, not directly into components.
-export const hasciiTw = {
-  colors: {
-    neutral: {
-      50: "#fafafa",
-      100: "#f5f5f5",
-      200: "#e5e5e5",
-      300: "#d4d4d4",
-      400: "#a3a3a3",
-      500: "#737373",
-      600: "#525252",
-      700: "#404040",
-      800: "#262626",
-      900: "#171717",
-      950: "#0a0a0a",
-    },
-    zinc: {
-      50: "#fafafa",
-      100: "#f4f4f5",
-      200: "#e4e4e7",
-      300: "#d4d4d8",
-      400: "#a1a1aa",
-      500: "#71717a",
-      600: "#52525b",
-      700: "#3f3f46",
-      800: "#27272a",
-      900: "#18181b",
-      950: "#09090b",
-    },
-    red: {
-      50: "#fef2f2",
-      100: "#fee2e2",
-      200: "#fecaca",
-      300: "#fca5a5",
-      400: "#f87171",
-      500: "#ef4444",
-      600: "#dc2626",
-      700: "#b91c1c",
-      800: "#991b1b",
-      900: "#7f1d1d",
-      950: "#450a0a",
-    },
-  },
-} as const
-
-export type HasciiTw = typeof hasciiTw
-
-const HEX = /^#[0-9a-fA-F]{6}$/
-
-const TokensSchema = z.object({
-  theme: z.object({
-    extend: z.object({
-      colors: z.object({
-        background: z.string().regex(HEX),
-        foreground: z.string().regex(HEX),
-        primary: z.string().regex(HEX),
-        "primary-foreground": z.string().regex(HEX),
-        "primary-hover": z.string().regex(HEX),
-        "primary-active": z.string().regex(HEX),
-        secondary: z.string().regex(HEX),
-        "secondary-foreground": z.string().regex(HEX),
-        "secondary-hover": z.string().regex(HEX),
-        "secondary-active": z.string().regex(HEX),
-        card: z.string().regex(HEX),
-        "card-foreground": z.string().regex(HEX),
-        popover: z.string().regex(HEX),
-        "popover-foreground": z.string().regex(HEX),
-        muted: z.string().regex(HEX),
-        "muted-foreground": z.string().regex(HEX),
-        accent: z.string().regex(HEX),
-        "accent-foreground": z.string().regex(HEX),
-        "accent-hover": z.string().regex(HEX),
-        "accent-active": z.string().regex(HEX),
-        destructive: z.string().regex(HEX),
-        "destructive-foreground": z.string().regex(HEX),
-        "destructive-hover": z.string().regex(HEX),
-        "destructive-active": z.string().regex(HEX),
-        border: z.string().regex(HEX),
-        input: z.string().regex(HEX),
-        ring: z.string().regex(HEX),
-        "hover-active": z.string().regex(HEX),
-      }),
-    }),
-  }),
-})
-
-const parsed = TokensSchema.parse(tokens)
-const c = parsed.theme.extend.colors
-
-export type HasciiTheme = {
-  color: {
-    background: string
-    foreground: string
-
-    primary: string
-    primaryForeground: string
-    primaryHover: string
-    primaryActive: string
-
-    secondary: string
-    secondaryForeground: string
-    secondaryHover: string
-    secondaryActive: string
-
-    card: string
-    cardForeground: string
-
-    popover: string
-    popoverForeground: string
-
-    muted: string
-    mutedForeground: string
-
-    accent: string
-    accentForeground: string
-    accentHover: string
-    accentActive: string
-
-    destructive: string
-    destructiveForeground: string
-    destructiveHover: string
-    destructiveActive: string
-
-    border: string
-    input: string
-    ring: string
-
-    hoverActive: string
-  }
-}
-
-/** Default dark theme. Tokens are loaded from tokens.json (generated from DESIGN.md by `make tokens`) and validated with zod. */
-export const hasciiTheme: HasciiTheme = {
-  color: {
-    background: c.background,
-    foreground: c.foreground,
-
-    primary: c.primary,
-    primaryForeground: c["primary-foreground"],
-    primaryHover: c["primary-hover"],
-    primaryActive: c["primary-active"],
-
-    secondary: c.secondary,
-    secondaryForeground: c["secondary-foreground"],
-    secondaryHover: c["secondary-hover"],
-    secondaryActive: c["secondary-active"],
-
-    card: c.card,
-    cardForeground: c["card-foreground"],
-
-    popover: c.popover,
-    popoverForeground: c["popover-foreground"],
-
-    muted: c.muted,
-    mutedForeground: c["muted-foreground"],
-
-    accent: c.accent,
-    accentForeground: c["accent-foreground"],
-    accentHover: c["accent-hover"],
-    accentActive: c["accent-active"],
-
-    destructive: c.destructive,
-    destructiveForeground: c["destructive-foreground"],
-    destructiveHover: c["destructive-hover"],
-    destructiveActive: c["destructive-active"],
-
-    border: c.border,
-    input: c.input,
-    ring: c.ring,
-
-    hoverActive: c["hover-active"],
-  },
-}