@interactive-inc/claude-funnel 0.7.1 → 0.8.0

package/lib/tui/views/channels-view.tsx

@@ -0,0 +1,108 @@
+/** @jsxImportSource @opentui/react */
+import { AddRow } from "@/tui/components/add-row"
+import { Card } from "@/tui/components/card"
+import { EditableField } from "@/tui/components/editable-field"
+import { EmptyState } from "@/tui/components/empty-state"
+import { PanelHeader } from "@/tui/components/panel-header"
+import { ReadonlyField } from "@/tui/components/readonly-field"
+import { ViewShell } from "@/tui/components/view-shell"
+import type { Snapshot } from "@/tui/types"
+import { uniqueName } from "@/tui/unique-name"
+import type { Funnel } from "@/funnel"
+
+type Props = {
+  snapshot: Snapshot
+  funnel: Funnel
+  refresh: () => void
+  focusedKey: string | null
+  setFocusedKey: (key: string | null) => void
+}
+
+type Channel = Snapshot["channels"][number]
+
+const fieldKey = (name: string, field: string): string => `channels::${name}::${field}`
+
+/**
+ * Channel inspector — one Card per channel. Connectors live nested inside the
+ * channel and are managed in the connectors view; here only the channel's
+ * name and id (read-only) are shown along with a count of nested connectors.
+ */
+export function ChannelsView(props: Props) {
+  const channels = props.snapshot.channels
+
+  const commit = (channel: Channel, field: string, raw: string): void => {
+    try {
+      if (field === "name") {
+        const next = raw.trim()
+
+        if (next && next !== channel.name) props.funnel.channels.rename(channel.name, next)
+      }
+    } catch (error) {
+      props.funnel.logger.error(error instanceof Error ? error.message : String(error))
+    }
+
+    props.setFocusedKey(null)
+    props.refresh()
+  }
+
+  const removeChannel = (name: string): void => {
+    try {
+      props.funnel.channels.remove(name)
+    } catch (error) {
+      props.funnel.logger.error(error instanceof Error ? error.message : String(error))
+    }
+
+    props.setFocusedKey(null)
+    props.refresh()
+  }
+
+  const addChannel = (): void => {
+    const name = uniqueName(
+      channels.map((c) => c.name),
+      "channel",
+    )
+
+    try {
+      const created = props.funnel.channels.add({ name })
+      props.setFocusedKey(fieldKey(created.name, "name"))
+    } catch (error) {
+      props.funnel.logger.error(error instanceof Error ? error.message : String(error))
+    }
+
+    props.refresh()
+  }
+
+  return (
+    <ViewShell>
+      <PanelHeader label="channels" count={channels.length} />
+
+      {channels.length === 0 ? (
+        <EmptyState message="(none — use the button below to add one)" />
+      ) : (
+        channels.map((channel) => (
+          <Card key={channel.id} title={channel.name} onDelete={() => removeChannel(channel.name)}>
+            <EditableField
+              label="name"
+              initialValue={channel.name}
+              focused={props.focusedKey === fieldKey(channel.name, "name")}
+              onFocus={() => props.setFocusedKey(fieldKey(channel.name, "name"))}
+              onCommit={(raw) => commit(channel, "name", raw)}
+            />
+            <ReadonlyField label="id" value={channel.id} />
+            <ReadonlyField label="delivery" value={channel.delivery} />
+            <ReadonlyField
+              label="connectors"
+              value={
+                channel.connectors.length > 0
+                  ? channel.connectors.map((c) => `${c.name}:${c.type}`).join(", ")
+                  : "(none)"
+              }
+            />
+          </Card>
+        ))
+      )}
+
+      <AddRow label="add channel" onClick={addChannel} />
+    </ViewShell>
+  )
+}

package/lib/tui/views/connectors-view.tsx

@@ -0,0 +1,164 @@
+import { AddRow } from "@/tui/components/add-row"
+import { Card } from "@/tui/components/card"
+import { EmptyState } from "@/tui/components/empty-state"
+import { PanelHeader } from "@/tui/components/panel-header"
+import { ReadonlyField } from "@/tui/components/readonly-field"
+import { HasciiButton } from "@/tui/components/ui/hascii/button"
+import { ViewShell } from "@/tui/components/view-shell"
+import { funnel } from "@/tui/theme"
+import type { Snapshot } from "@/tui/types"
+import { uniqueName } from "@/tui/unique-name"
+import type { Funnel } from "@/funnel"
+
+type Props = {
+  snapshot: Snapshot
+  funnel: Funnel
+  refresh: () => void
+  focusedKey: string | null
+  setFocusedKey: (key: string | null) => void
+}
+
+type Connector = Snapshot["connectors"][number]
+type ConnectorType = Connector["type"]
+
+const formatTimestamp = (iso: string | undefined): string => {
+  if (!iso) return "—"
+
+  const d = new Date(iso)
+
+  if (Number.isNaN(d.getTime())) return "—"
+
+  const yyyy = d.getFullYear()
+  const mm = String(d.getMonth() + 1).padStart(2, "0")
+  const dd = String(d.getDate()).padStart(2, "0")
+  const hh = String(d.getHours()).padStart(2, "0")
+  const mn = String(d.getMinutes()).padStart(2, "0")
+
+  return `${yyyy}-${mm}-${dd} ${hh}:${mn}`
+}
+
+/**
+ * Channel-scoped connector inspector. Reads `funnel.channels.listAllConnectors()`
+ * (already flattened with channelName / channelId tags) and lets the user delete
+ * each connector or quickly add a new one to the first available channel via the
+ * AddRow buttons. Editing values is intentionally read-only — token / pollInterval
+ * mutation belongs to `fnl channels <ch> connectors set <conn> ...` because the
+ * same connector name can exist in multiple channels and inline edits would have
+ * to disambiguate.
+ */
+export function ConnectorsView(props: Props) {
+  const connectors = props.snapshot.connectors
+  const channels = props.snapshot.channels
+  const targetChannel = channels[0] ?? null
+
+  const logError = (error: unknown): void => {
+    props.funnel.logger.error(error instanceof Error ? error.message : String(error))
+  }
+
+  const removeConnector = (connector: Connector): void => {
+    props.funnel.listeners.stop(connector.channelName, connector.name).catch(logError)
+
+    try {
+      props.funnel.channels.removeConnector(connector.channelName, connector.name)
+    } catch (error) {
+      logError(error)
+    }
+
+    props.refresh()
+  }
+
+  const addConnector = (type: ConnectorType): void => {
+    if (!targetChannel) {
+      logError(new Error("add a channel first before creating a connector"))
+
+      return
+    }
+
+    const existingNames = connectors
+      .filter((c) => c.channelId === targetChannel.id)
+      .map((c) => c.name)
+    const name = uniqueName(existingNames, type)
+
+    try {
+      if (type === "slack") {
+        props.funnel.channels.addConnector(targetChannel.name, {
+          type: "slack",
+          name,
+          botToken: "xoxb-PLACEHOLDER",
+          appToken: "xapp-PLACEHOLDER",
+        })
+      } else if (type === "gh") {
+        props.funnel.channels.addConnector(targetChannel.name, { type: "gh", name })
+      } else if (type === "discord") {
+        props.funnel.channels.addConnector(targetChannel.name, {
+          type: "discord",
+          name,
+          botToken: "PLACEHOLDER-PLACEHOLDER",
+        })
+      } else {
+        props.funnel.channels.addConnector(targetChannel.name, { type: "schedule", name })
+      }
+
+      props.funnel.listeners.start(targetChannel.name, name).catch(logError)
+    } catch (error) {
+      logError(error)
+    }
+
+    props.refresh()
+  }
+
+  return (
+    <ViewShell>
+      <PanelHeader label="connectors" count={connectors.length} />
+
+      {connectors.length === 0 ? (
+        <EmptyState message="(none — add via the buttons below or `fnl channels <ch> connectors add ...`)" />
+      ) : (
+        connectors.map((connector) => (
+          <Card key={`${connector.channelId}::${connector.id}`} title={connector.name}>
+            <ReadonlyField label="channel" value={connector.channelName} />
+            <ReadonlyField label="type" value={connector.type} />
+            <ReadonlyField label="id" value={connector.id} />
+            {connector.type === "slack" ? (
+              <>
+                <ReadonlyField label="bot-token" value={connector.botToken} />
+                <ReadonlyField label="app-token" value={connector.appToken} />
+              </>
+            ) : null}
+            {connector.type === "gh" ? (
+              <ReadonlyField label="poll" value={String(connector.pollInterval ?? 60)} />
+            ) : null}
+            {connector.type === "discord" ? (
+              <ReadonlyField label="bot-token" value={connector.botToken} />
+            ) : null}
+            {connector.type === "schedule" ? (
+              <ReadonlyField label="entries" value={String(connector.entries.length)} />
+            ) : null}
+            <text fg={funnel.faint}>{`created  ${formatTimestamp(connector.createdAt)}`}</text>
+            <box style={{ flexDirection: "row", justifyContent: "space-between" }}>
+              <text fg={funnel.faint}>{`updated  ${formatTimestamp(connector.updatedAt)}`}</text>
+              <HasciiButton
+                variant="destructive"
+                size="sm"
+                onPress={() => removeConnector(connector)}
+              >
+                delete
+              </HasciiButton>
+            </box>
+          </Card>
+        ))
+      )}
+
+      {targetChannel ? (
+        <text fg={funnel.faint}>{`add target channel: ${targetChannel.name}`}</text>
+      ) : (
+        <text fg={funnel.warn}>add a channel first to enable the buttons below</text>
+      )}
+
+      <AddRow label="add slack" onClick={() => addConnector("slack")} />
+      <AddRow label="add gh" onClick={() => addConnector("gh")} />
+      <AddRow label="add discord" onClick={() => addConnector("discord")} />
+      <AddRow label="add schedule" onClick={() => addConnector("schedule")} />
+    </ViewShell>
+  )
+}

package/lib/tui/views/events-view.tsx

@@ -0,0 +1,160 @@
+/** @jsxImportSource @opentui/react */
+import { DetailBar } from "@/tui/components/detail-bar"
+import { HasciiSeparator } from "@/tui/components/ui/hascii/separator"
+import { EmptyState } from "@/tui/components/empty-state"
+import { Keymap } from "@/tui/components/keymap"
+import { PanelHeader } from "@/tui/components/panel-header"
+import { ViewShell } from "@/tui/components/view-shell"
+import { funnel } from "@/tui/theme"
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+import type { StreamEvent, StreamStatus } from "@/tui/types"
+
+type Props = {
+  events: StreamEvent[]
+  filter: string
+  selectedIndex: number
+  streamStatus: StreamStatus
+}
+
+const streamLabel = (status: StreamStatus): string => {
+  if (status === "open") return "live"
+  if (status === "connecting") return "connecting…"
+  if (status === "closed") return "reconnecting…"
+
+  return "offline"
+}
+
+const formatTime = (ms: number): string => {
+  const date = new Date(ms)
+  const hh = String(date.getHours()).padStart(2, "0")
+  const mm = String(date.getMinutes()).padStart(2, "0")
+  const ss = String(date.getSeconds()).padStart(2, "0")
+
+  return `${hh}:${mm}:${ss}`
+}
+
+const truncate = (value: string, max: number): string => {
+  const flat = value.replace(/\s+/g, " ").trim()
+
+  if (flat.length <= max) return flat
+
+  return `${flat.slice(0, max - 1)}…`
+}
+
+const matches = (event: StreamEvent, 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)
+}
+
+const tryParseJson = (value: string): unknown => {
+  try {
+    return JSON.parse(value)
+  } catch {
+    return value
+  }
+}
+
+const formatJson = (value: unknown): string => {
+  try {
+    return JSON.stringify(value, null, 2)
+  } catch {
+    return String(value)
+  }
+}
+
+/**
+ * Live event stream + detail of the selected event.
+ *
+ * The events list lives inside `ViewShell` (padded canvas) while the
+ * detail strip is a sibling `DetailBar` so its background spans the
+ * full main column edge-to-edge and reads as a distinct elevated
+ * stratum below the list.
+ */
+export function EventsView(props: Props) {
+  const theme = useHasciiTheme()
+  const visible = props.events.filter((event) => matches(event, props.filter))
+  const selected = visible[props.selectedIndex] ?? null
+
+  return (
+    <box style={{ flexDirection: "column", flexGrow: 1 }}>
+      <ViewShell>
+        <PanelHeader
+          label="events"
+          count={visible.length}
+          hint={[
+            streamLabel(props.streamStatus),
+            `${props.events.length} total`,
+            props.filter ? `/${props.filter}/` : null,
+          ]
+            .filter((part): part is string => part !== null)
+            .join(" · ")}
+        />
+
+        {visible.length === 0 ? (
+          <EmptyState message="(no events yet — waiting for the first one)" />
+        ) : (
+          visible.map((event, index) => {
+            const isSelected = index === props.selectedIndex
+            const connector = event.meta.connector ?? "system"
+            const eventType = event.meta.event_type ?? "?"
+
+            return (
+              <text key={event.id} bg={isSelected ? theme.color.muted : undefined}>
+                <span fg={theme.color.mutedForeground}>{formatTime(event.receivedAt)}</span>
+                <span fg={funnel.faint}> </span>
+                <span fg={theme.color.mutedForeground}>{eventType.padEnd(8)}</span>
+                <span fg={funnel.faint}>{" · "}</span>
+                <span fg={isSelected ? theme.color.foreground : theme.color.foreground}>
+                  {connector.padEnd(14)}
+                </span>
+                <span fg={funnel.faint}> </span>
+                <span fg={isSelected ? theme.color.foreground : theme.color.mutedForeground}>
+                  {truncate(event.content, 80)}
+                </span>
+              </text>
+            )
+          })
+        )}
+
+        <Keymap
+          hints={[
+            { key: "j/k", label: "select" },
+            { key: "/", label: "filter" },
+          ]}
+        />
+      </ViewShell>
+
+      <DetailBar>
+        <PanelHeader label="detail" />
+
+        {!selected ? (
+          <EmptyState message="(select an event with j/k to inspect)" />
+        ) : (
+          <>
+            <text>
+              <span fg={theme.color.mutedForeground}>meta: </span>
+              <span fg={theme.color.foreground}>
+                {Object.entries(selected.meta)
+                  .map(([key, value]) => `${key}=${value}`)
+                  .join("  ")}
+              </span>
+            </text>
+            <HasciiSeparator />
+            <text fg={theme.color.foreground}>{formatJson(tryParseJson(selected.content))}</text>
+          </>
+        )}
+      </DetailBar>
+    </box>
+  )
+}

package/lib/tui/views/listeners-view.tsx

@@ -0,0 +1,80 @@
+/** @jsxImportSource @opentui/react */
+import { Card } from "@/tui/components/card"
+import { EmptyState } from "@/tui/components/empty-state"
+import { Keymap } from "@/tui/components/keymap"
+import { PanelHeader } from "@/tui/components/panel-header"
+import { ViewShell } from "@/tui/components/view-shell"
+import { funnel } from "@/tui/theme"
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+import type { Snapshot, StreamEvent } from "@/tui/types"
+
+type Props = {
+  snapshot: Snapshot
+  events: StreamEvent[]
+  selectedIndex: number
+  busy: boolean
+}
+
+const eventCountBy = (events: StreamEvent[], connectorName: string): number => {
+  let count = 0
+
+  for (const event of events) {
+    if (event.meta.connector === connectorName) count += 1
+  }
+
+  return count
+}
+
+/**
+ * Listener registry — one Card per listener. The Card title shows the
+ * listener's name; inside, a single status line carries the alive
+ * dot, the connector type, and the event count. Cursor selection is
+ * shown via the Card's `selected` accent. Listeners are runtime
+ * entities derived from connectors, so there is no add path here —
+ * register / remove a connector instead.
+ */
+export function ListenersView(props: Props) {
+  const theme = useHasciiTheme()
+  const listeners = props.snapshot.listeners
+
+  return (
+    <ViewShell>
+      <PanelHeader
+        label="listeners"
+        count={listeners.length}
+        hint={props.busy ? "working…" : undefined}
+      />
+
+      {!props.snapshot.daemonReachable ? (
+        <EmptyState message="(gateway daemon offline — press G to start it)" />
+      ) : listeners.length === 0 ? (
+        <EmptyState message="(no listeners — register a connector first)" />
+      ) : (
+        listeners.map((entry, index) => {
+          const aliveColor = entry.alive ? funnel.alive : funnel.dead
+          const count = eventCountBy(props.events, entry.name)
+
+          return (
+            <Card key={entry.name} title={entry.name} selected={index === props.selectedIndex}>
+              <text>
+                <span fg={aliveColor}>{entry.alive ? "●" : "○"}</span>
+                <span fg={funnel.faint}> </span>
+                <span fg={theme.color.mutedForeground}>{entry.type}</span>
+                {count > 0 ? <span fg={theme.color.mutedForeground}>{`  ${count}↓`}</span> : null}
+              </text>
+            </Card>
+          )
+        })
+      )}
+
+      <Keymap
+        hints={[
+          { key: "j/k", label: "select" },
+          { key: "s", label: "start" },
+          { key: "x", label: "stop" },
+          { key: "R", label: "restart" },
+        ]}
+      />
+    </ViewShell>
+  )
+}

package/lib/tui/views/profiles-view.tsx

@@ -0,0 +1,152 @@
+/** @jsxImportSource @opentui/react */
+import { AddRow } from "@/tui/components/add-row"
+import { Card } from "@/tui/components/card"
+import { EditableField } from "@/tui/components/editable-field"
+import { EmptyState } from "@/tui/components/empty-state"
+import { Keymap } from "@/tui/components/keymap"
+import { PanelHeader } from "@/tui/components/panel-header"
+import { ViewShell } from "@/tui/components/view-shell"
+import type { Snapshot } from "@/tui/types"
+import { uniqueName } from "@/tui/unique-name"
+import type { Funnel } from "@/funnel"
+
+type Props = {
+  snapshot: Snapshot
+  selectedIndex: number
+  funnel: Funnel
+  refresh: () => void
+  focusedKey: string | null
+  setFocusedKey: (key: string | null) => void
+}
+
+type Profile = Snapshot["profiles"][number]
+
+const fieldKey = (name: string, field: string): string => `profiles::${name}::${field}`
+
+/**
+ * Profile list — one Card per profile. Selection (j/k cursor) shows the
+ * `▏` primary rule via the Card's `selected` prop; pressing `c`
+ * launches Claude Code with the selected profile.
+ *
+ * `+ add profile` at the foot creates a new profile pointed at the
+ * first existing channel (or an empty string if there are none, which
+ * the user must then edit before launching).
+ */
+export function ProfilesView(props: Props) {
+  const profiles = props.snapshot.profiles
+  const channels = props.snapshot.channels
+
+  const commit = (profile: Profile, field: string, raw: string): void => {
+    try {
+      if (field === "name") {
+        const next = raw.trim()
+
+        if (next && next !== profile.name) props.funnel.profiles.rename(profile.name, next)
+      } else if (field === "channel") {
+        const next = raw.trim()
+
+        if (next) props.funnel.profiles.update(profile.name, { channelId: next })
+      } else if (field === "path") {
+        const next = raw.trim()
+
+        if (next) props.funnel.profiles.update(profile.name, { path: next })
+      } else if (field === "sub-agent") {
+        const next = raw.trim()
+
+        if (next) props.funnel.profiles.update(profile.name, { subAgent: next })
+      }
+    } catch (error) {
+      props.funnel.logger.error(error instanceof Error ? error.message : String(error))
+    }
+
+    props.setFocusedKey(null)
+    props.refresh()
+  }
+
+  const removeProfile = (name: string): void => {
+    try {
+      props.funnel.profiles.remove(name)
+    } catch (error) {
+      props.funnel.logger.error(error instanceof Error ? error.message : String(error))
+    }
+
+    props.setFocusedKey(null)
+    props.refresh()
+  }
+
+  const addProfile = (): void => {
+    const name = uniqueName(
+      profiles.map((p) => p.name),
+      "profile",
+    )
+    const channelId = channels[0]?.name ?? ""
+
+    try {
+      props.funnel.profiles.add({ name, path: "", subAgent: "", channelId })
+      props.setFocusedKey(fieldKey(name, "name"))
+    } catch (error) {
+      props.funnel.logger.error(error instanceof Error ? error.message : String(error))
+    }
+
+    props.refresh()
+  }
+
+  return (
+    <ViewShell>
+      <PanelHeader label="profiles" count={profiles.length} />
+
+      {profiles.length === 0 ? (
+        <EmptyState message="(none — use the button below to add one)" />
+      ) : (
+        profiles.map((profile, index) => (
+          <Card
+            key={profile.name}
+            title={profile.name}
+            selected={index === props.selectedIndex}
+            onDelete={() => removeProfile(profile.name)}
+          >
+            <EditableField
+              label="name"
+              initialValue={profile.name}
+              focused={props.focusedKey === fieldKey(profile.name, "name")}
+              onFocus={() => props.setFocusedKey(fieldKey(profile.name, "name"))}
+              onCommit={(raw) => commit(profile, "name", raw)}
+            />
+            <EditableField
+              label="path"
+              initialValue={profile.path}
+              focused={props.focusedKey === fieldKey(profile.name, "path")}
+              onFocus={() => props.setFocusedKey(fieldKey(profile.name, "path"))}
+              onCommit={(raw) => commit(profile, "path", raw)}
+              placeholder="repository path"
+            />
+            <EditableField
+              label="sub-agent"
+              initialValue={profile.subAgent}
+              focused={props.focusedKey === fieldKey(profile.name, "sub-agent")}
+              onFocus={() => props.setFocusedKey(fieldKey(profile.name, "sub-agent"))}
+              onCommit={(raw) => commit(profile, "sub-agent", raw)}
+              placeholder="claude --agent value"
+            />
+            <EditableField
+              label="channel"
+              initialValue={profile.channelId}
+              focused={props.focusedKey === fieldKey(profile.name, "channel")}
+              onFocus={() => props.setFocusedKey(fieldKey(profile.name, "channel"))}
+              onCommit={(raw) => commit(profile, "channel", raw)}
+            />
+          </Card>
+        ))
+      )}
+
+      <AddRow label="add profile" onClick={addProfile} />
+
+      <Keymap
+        hints={[
+          { key: "j/k", label: "select" },
+          { key: "c", label: "launch" },
+        ]}
+      />
+    </ViewShell>
+  )
+}