@interactive-inc/claude-funnel 0.7.1 → 0.8.1

package/lib/tui/scrollbar-options.ts

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,176 @@
+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"],
+  },
+}