@interactive-inc/claude-funnel 0.10.0 → 0.10.1

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

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

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

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

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

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