@interactive-inc/claude-funnel 0.8.1 → 0.10.1

package/lib/tui/app.tsx

@@ -1,357 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { useKeyboard, useRenderer } from "@opentui/react"
-import { useState } from "react"
-import { FilterInput } from "@/tui/filter-input"
-import { ProfileLauncher } from "@/tui/profile-launcher"
-import { Sidebar } from "@/tui/sidebar"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-import type { MenuItem, Mode, View } from "@/tui/types"
-import { useEventStream } from "@/tui/use-event-stream"
-import { useSnapshot } from "@/tui/use-snapshot"
-import { ChannelsView } from "@/tui/views/channels-view"
-import { ConnectorsView } from "@/tui/views/connectors-view"
-import { EventsView } from "@/tui/views/events-view"
-import { ListenersView } from "@/tui/views/listeners-view"
-import { ProfilesView } from "@/tui/views/profiles-view"
-import type { Funnel } from "@/funnel"
-
-type Props = {
-  funnel: Funnel
-}
-
-const VIEW_KEYS: View[] = ["events", "connectors", "channels", "profiles", "listeners"]
-
-const clamp = (value: number, length: number): number => {
-  if (length === 0) return 0
-  if (value < 0) return 0
-  if (value >= length) return length - 1
-
-  return value
-}
-
-const matchesEventFilter = (
-  event: { content: string; meta: Record<string, string> },
-  filter: string,
-): boolean => {
-  if (!filter) return true
-
-  const needle = filter.toLowerCase()
-  const haystack = [
-    event.content,
-    event.meta.connector ?? "",
-    event.meta.event_type ?? "",
-    event.meta.channel ?? "",
-  ]
-    .join(" ")
-    .toLowerCase()
-
-  return haystack.includes(needle)
-}
-
-/**
- * Funnel TUI: side-rail navigation + main content panel.
- *
- * Default landing view is the live `events` log. The sidebar shows the
- * gateway state, currently connected sessions, and a navigation menu
- * where each row carries the live count of its underlying entity.
- */
-export function App(props: Props) {
-  const theme = useHasciiTheme()
-  const renderer = useRenderer()
-  const { snapshot, refresh } = useSnapshot(props.funnel)
-  const { events, status: streamStatus } = useEventStream(
-    snapshot.gateway.port,
-    snapshot.daemonReachable,
-    props.funnel.gatewayToken.read(),
-  )
-
-  const [view, setViewState] = useState<View>("events")
-  const [mode, setMode] = useState<Mode>("browse")
-  const [listenerCursor, setListenerCursor] = useState(0)
-  const [profileCursor, setProfileCursor] = useState(0)
-  const [eventCursor, setEventCursor] = useState(0)
-  const [filter, setFilter] = useState("")
-  const [filterDraft, setFilterDraft] = useState("")
-  const [busy, setBusy] = useState(false)
-  const [editFocus, setEditFocus] = useState<string | null>(null)
-
-  const isEditing = editFocus !== null
-
-  const setView = (next: View) => {
-    setViewState(next)
-    setEditFocus(null)
-  }
-
-  const visibleEventCount = events.filter((event) => matchesEventFilter(event, filter)).length
-
-  const menuItems: MenuItem[] = [
-    { view: "events", label: "events", count: events.length },
-    { view: "connectors", label: "connectors", count: snapshot.connectors.length },
-    { view: "channels", label: "channels", count: snapshot.channels.length },
-    { view: "profiles", label: "profiles", count: snapshot.profiles.length },
-    { view: "listeners", label: "listeners", count: snapshot.listeners.length },
-  ]
-
-  const moveCursor = (delta: number) => {
-    if (view === "listeners") {
-      setListenerCursor((prev) => clamp(prev + delta, snapshot.listeners.length))
-    } else if (view === "profiles") {
-      setProfileCursor((prev) => clamp(prev + delta, snapshot.profiles.length))
-    } else if (view === "events") {
-      setEventCursor((prev) => clamp(prev + delta, visibleEventCount))
-    }
-  }
-
-  const runListenerAction = async (action: "start" | "stop" | "restart") => {
-    const entry = snapshot.listeners[listenerCursor]
-
-    if (!entry || busy) return
-
-    setBusy(true)
-
-    if (action === "start") await props.funnel.listeners.start(entry.channelName, entry.name)
-    if (action === "stop") await props.funnel.listeners.stop(entry.channelName, entry.name)
-    if (action === "restart") await props.funnel.listeners.restart(entry.channelName, entry.name)
-
-    setBusy(false)
-    refresh()
-  }
-
-  const launchProfile = async () => {
-    const profile = snapshot.profiles[profileCursor]
-
-    if (!profile) return
-
-    renderer.destroy()
-
-    try {
-      await props.funnel.claude.launch({
-        channel: profile.channelId,
-        cwd: profile.path,
-        subAgent: profile.subAgent,
-        profileName: profile.name,
-      })
-    } catch (error) {
-      process.stderr.write(`error: ${error instanceof Error ? error.message : String(error)}\n`)
-      process.exit(1)
-    }
-
-    process.exit(0)
-  }
-
-  const toggleGateway = async () => {
-    if (busy) return
-
-    setBusy(true)
-
-    if (snapshot.gateway.running) {
-      await props.funnel.gateway.stop()
-    } else {
-      await props.funnel.gateway.start()
-    }
-
-    setBusy(false)
-    refresh()
-  }
-
-  useKeyboard((key) => {
-    if (isEditing) {
-      if (key.name === "escape") setEditFocus(null)
-      return
-    }
-
-    if (mode === "filter") {
-      if (key.name === "return") {
-        setFilter(filterDraft)
-        setEventCursor(0)
-        setMode("browse")
-        return
-      }
-
-      if (key.name === "escape") {
-        setFilterDraft(filter)
-        setMode("browse")
-        return
-      }
-
-      if (key.name === "backspace") {
-        setFilterDraft((prev) => prev.slice(0, -1))
-        return
-      }
-
-      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
-        const ch = key.sequence
-
-        if (ch >= " " && ch <= "~") {
-          setFilterDraft((prev) => prev + ch)
-        }
-      }
-
-      return
-    }
-
-    if (mode === "profile-launcher") {
-      if (key.name === "escape" || (key.ctrl && key.name === "c")) {
-        setMode("browse")
-        return
-      }
-
-      if (key.name === "up" || key.name === "k") {
-        setProfileCursor((prev) => clamp(prev - 1, snapshot.profiles.length))
-        return
-      }
-
-      if (key.name === "down" || key.name === "j") {
-        setProfileCursor((prev) => clamp(prev + 1, snapshot.profiles.length))
-        return
-      }
-
-      if (key.name === "return") {
-        void launchProfile()
-      }
-
-      return
-    }
-
-    if (key.name === "q" || key.name === "escape" || (key.ctrl && key.name === "c")) {
-      renderer.destroy()
-      return
-    }
-
-    const numericIndex = Number.parseInt(key.name ?? "", 10)
-    const target = Number.isFinite(numericIndex) ? VIEW_KEYS[numericIndex - 1] : undefined
-
-    if (target) {
-      setView(target)
-      return
-    }
-
-    if (key.name === "j" || key.name === "down") {
-      moveCursor(1)
-      return
-    }
-
-    if (key.name === "k" || key.name === "up") {
-      moveCursor(-1)
-      return
-    }
-
-    if (key.name === "r") {
-      refresh()
-      return
-    }
-
-    if (key.name === "/" && view === "events") {
-      setFilterDraft(filter)
-      setMode("filter")
-      return
-    }
-
-    if (key.name === "c") {
-      if (snapshot.profiles.length === 0) return
-
-      setProfileCursor((prev) => Math.min(prev, Math.max(0, snapshot.profiles.length - 1)))
-      setMode("profile-launcher")
-      return
-    }
-
-    if (view === "listeners") {
-      if (key.name === "s") {
-        void runListenerAction("start")
-        return
-      }
-
-      if (key.name === "x") {
-        void runListenerAction("stop")
-        return
-      }
-
-      if (key.name === "R" || (key.shift && key.name === "r")) {
-        void runListenerAction("restart")
-        return
-      }
-    }
-
-    if (key.name === "G" || (key.shift && key.name === "g")) {
-      void toggleGateway()
-    }
-  })
-
-  return (
-    <box
-      style={{
-        width: "100%",
-        height: "100%",
-        backgroundColor: theme.color.background,
-        flexDirection: "column",
-      }}
-    >
-      <box style={{ flexDirection: "row", flexGrow: 1 }}>
-        <Sidebar
-          snapshot={snapshot}
-          menuItems={menuItems}
-          view={view}
-          onSelect={setView}
-          busy={busy}
-          onToggleGateway={() => void toggleGateway()}
-        />
-
-        <box
-          style={{
-            flexDirection: "column",
-            flexGrow: 1,
-            backgroundColor: theme.color.background,
-          }}
-        >
-          {view === "events" ? (
-            <EventsView
-              events={events}
-              filter={filter}
-              selectedIndex={eventCursor}
-              streamStatus={streamStatus}
-            />
-          ) : view === "connectors" ? (
-            <ConnectorsView
-              snapshot={snapshot}
-              funnel={props.funnel}
-              refresh={refresh}
-              focusedKey={editFocus}
-              setFocusedKey={setEditFocus}
-            />
-          ) : view === "channels" ? (
-            <ChannelsView
-              snapshot={snapshot}
-              funnel={props.funnel}
-              refresh={refresh}
-              focusedKey={editFocus}
-              setFocusedKey={setEditFocus}
-            />
-          ) : view === "profiles" ? (
-            <ProfilesView
-              snapshot={snapshot}
-              selectedIndex={profileCursor}
-              funnel={props.funnel}
-              refresh={refresh}
-              focusedKey={editFocus}
-              setFocusedKey={setEditFocus}
-            />
-          ) : (
-            <ListenersView
-              snapshot={snapshot}
-              events={events}
-              selectedIndex={listenerCursor}
-              busy={busy}
-            />
-          )}
-        </box>
-      </box>
-
-      <FilterInput value={filterDraft} active={mode === "filter"} />
-      <ProfileLauncher
-        active={mode === "profile-launcher"}
-        profiles={snapshot.profiles}
-        selectedIndex={profileCursor}
-      />
-    </box>
-  )
-}

package/lib/tui/components/add-row.tsx

@@ -1,18 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { HasciiButton } from "@/tui/components/ui/hascii/button"
-
-type Props = {
-  label: string
-  onClick: () => void
-}
-
-/**
- * "+ add …" row used at the foot of an entity list.
- *
- * Bound to hascii's primary `HasciiButton` so AddRows match the gateway's
- * start / stop affordance — same neutral-white CTA chip with darken-
- * on-hover feel.
- */
-export function AddRow(props: Props) {
-  return <HasciiButton onPress={props.onClick}>{`+ ${props.label}`}</HasciiButton>
-}

package/lib/tui/components/brand.tsx

@@ -1,27 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { TextAttributes } from "@opentui/core"
-import { funnel } from "@/tui/theme"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-/**
- * Brand mark rendered at the top of the sidebar. Carries its own paddingX
- * so it aligns with menu items (which need paddingX-less parents so their
- * active highlight spans edge-to-edge).
- */
-export function Brand() {
-  const theme = useHasciiTheme()
-
-  return (
-    <box
-      style={{
-        flexDirection: "row",
-        paddingLeft: funnel.paddingX,
-        paddingRight: funnel.paddingX,
-      }}
-    >
-      <text fg={theme.color.foreground} attributes={TextAttributes.BOLD}>
-        funnel
-      </text>
-    </box>
-  )
-}

package/lib/tui/components/card.tsx

@@ -1,44 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import type { ReactNode } from "react"
-import { HasciiButton } from "@/tui/components/ui/hascii/button"
-import { HasciiCard } from "@/tui/components/ui/hascii/card"
-import { HasciiCardFooter } from "@/tui/components/ui/hascii/card-footer"
-import { HasciiCardHeader } from "@/tui/components/ui/hascii/card-header"
-import { HasciiCardTitle } from "@/tui/components/ui/hascii/card-title"
-import { SelectionAccent } from "@/tui/components/selection-accent"
-
-type Props = {
-  /** Entity identifier shown at the top so each Card reads as one item. */
-  title: string
-  children: ReactNode
-  /** When provided, a destructive "delete" Button is rendered bottom-right. */
-  onDelete?: () => void
-  selected?: boolean
-}
-
-/**
- * Per-entity form wrapper used inside the connectors / channels /
- * profiles / listeners views.
- *
- * Composed from hascii's `HasciiCard` family — header + body + footer.
- * `selected` overlays a `SelectionAccent` (▏ primary rule) at the left
- * edge for cursor-driven views.
- */
-export function Card(props: Props) {
-  return (
-    <HasciiCard>
-      {props.selected ? <SelectionAccent /> : null}
-      <HasciiCardHeader>
-        <HasciiCardTitle>{props.title}</HasciiCardTitle>
-      </HasciiCardHeader>
-      {props.children}
-      {props.onDelete ? (
-        <HasciiCardFooter>
-          <HasciiButton variant="destructive" size="sm" onPress={props.onDelete}>
-            delete
-          </HasciiButton>
-        </HasciiCardFooter>
-      ) : null}
-    </HasciiCard>
-  )
-}

package/lib/tui/components/detail-bar.tsx

@@ -1,46 +0,0 @@
-/** @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
-}
-
-/**
- * Bottom inspector strip rendered at the foot of a view.
- *
- * Sits as a sibling of `ViewShell` (not inside it) so its background
- * stretches edge-to-edge across the main column and butts against the
- * sidebar with no horizontal gap. Background tier is `elevated` —
- * one step brighter than the sidebar — to read as a separate stratum
- * without needing a border.
- *
- * The strip is itself a `<scrollbox>` so long content (e.g., JSON for
- * the selected event) scrolls within the fixed `funnel.detailPanelHeight`
- * frame instead of pushing other UI off-screen.
- */
-export function DetailBar(props: Props) {
-  const theme = useHasciiTheme()
-
-  return (
-    <scrollbox
-      style={{
-        height: funnel.detailPanelHeight,
-        backgroundColor: theme.color.muted,
-      }}
-      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/components/editable-field.tsx

@@ -1,33 +0,0 @@
-import { HasciiFormItem } from "@/tui/components/ui/hascii/form-item"
-import { HasciiInput } from "@/tui/components/ui/hascii/input"
-
-type Props = {
-  label: string
-  initialValue: string
-  focused: boolean
-  onFocus: () => void
-  onCommit: (value: string) => void
-  placeholder?: string
-}
-
-/**
- * Inline label + input row built on hascii primitives. The hascii Input fires
- * `onChange` on every keystroke; we forward that to `onCommit` so callers
- * persist live (re-keying by `focused` still forces a remount on blur so the
- * input snaps back when the user clicks away without typing).
- */
-export function EditableField(props: Props) {
-  return (
-    <box style={{ flexDirection: "row" }} onMouseDown={props.onFocus}>
-      <HasciiFormItem label={props.label} labelWidth={12}>
-        <HasciiInput
-          key={props.focused ? "focused" : "blurred"}
-          value={props.initialValue}
-          placeholder={props.placeholder}
-          defaultFocused={props.focused}
-          onChange={props.onCommit}
-        />
-      </HasciiFormItem>
-    </box>
-  )
-}

package/lib/tui/components/empty-state.tsx

@@ -1,11 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { funnel } from "@/tui/theme"
-
-type Props = {
-  message: string
-}
-
-/** Faint placeholder shown when a list has no items. */
-export function EmptyState(props: Props) {
-  return <text fg={funnel.faint}>{props.message}</text>
-}

package/lib/tui/components/gateway-status.tsx

@@ -1,66 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { HasciiButton } from "@/tui/components/ui/hascii/button"
-import { funnel } from "@/tui/theme"
-import type { Snapshot } from "@/tui/types"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-type Props = {
-  gateway: Snapshot["gateway"]
-  busy: boolean
-  onToggle: () => void
-}
-
-/**
- * Compact running/stopped indicator with pid and port for the sidebar.
- *
- * The "gateway" label lives inside the same elevated block as the status
- * so the heading reads as part of the card, not a floating sidebar
- * separator on the surrounding surface tier.
- *
- * The toggle is rendered as a neutral-white `Button` with the same
- * paddingX=2 / paddingY=1 as the rest of the form chrome — no leading
- * glyph, just the verb. `busy` disables the button while a toggle is
- * in flight so rapid clicks don't stack daemon spawns.
- */
-export function GatewayStatus(props: Props) {
-  const theme = useHasciiTheme()
-
-  return (
-    <box
-      style={{
-        flexDirection: "column",
-        backgroundColor: theme.color.muted,
-        paddingLeft: funnel.paddingX,
-        paddingRight: funnel.paddingX,
-        paddingTop: funnel.paddingY,
-        paddingBottom: funnel.paddingY,
-        gap: funnel.gap,
-      }}
-    >
-      <text fg={funnel.faint}>gateway</text>
-
-      {props.gateway.running ? (
-        <>
-          <text>
-            <span fg={funnel.alive}>●</span>
-            <span fg={theme.color.foreground}>{` running`}</span>
-          </text>
-          <text fg={funnel.faint}>{`pid ${props.gateway.pid}  ·  :${props.gateway.port}`}</text>
-          <HasciiButton onPress={props.onToggle} isDisabled={props.busy}>
-            {props.busy ? "stopping…" : "stop"}
-          </HasciiButton>
-        </>
-      ) : (
-        <>
-          <text>
-            <span fg={theme.color.mutedForeground}>○</span>
-            <span fg={theme.color.mutedForeground}>{` stopped`}</span>
-          </text>
-          <HasciiButton onPress={props.onToggle} isDisabled={props.busy}>
-            {props.busy ? "starting…" : "start"}
-          </HasciiButton>
-        </>
-      )}
-    </box>
-  )
-}

package/lib/tui/components/keymap.tsx

@@ -1,29 +0,0 @@
-/** @jsxImportSource @opentui/react */
-import { funnel } from "@/tui/theme"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-type Hint = {
-  key: string
-  label: string
-}
-
-type Props = {
-  hints: Hint[]
-}
-
-/** Inline keymap row — used at the bottom of each interactive view. */
-export function Keymap(props: Props) {
-  const theme = useHasciiTheme()
-
-  return (
-    <text fg={theme.color.mutedForeground}>
-      {props.hints.map((hint, index) => (
-        <span key={hint.key}>
-          {index > 0 ? <span fg={funnel.faint}>{"  ·  "}</span> : null}
-          <span fg={funnel.faint}>{hint.key} </span>
-          {hint.label}
-        </span>
-      ))}
-    </text>
-  )
-}