@interactive-inc/claude-funnel 0.7.1 → 0.8.1

package/lib/tui/app.tsx

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

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

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

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

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

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

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

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

@@ -0,0 +1,29 @@
+/** @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>
+  )
+}