@houston-ai/events 0.2.0

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@houston-ai/events",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@houston-ai/core": "workspace:*"
+  },
+  "dependencies": {
+    "lucide-react": "^0.577.0",
+    "framer-motion": "^12.38.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/event-empty.tsx

@@ -0,0 +1,23 @@
+import {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+} from "@houston-ai/core"
+
+export interface EventEmptyProps {
+  message?: string
+}
+
+export function EventEmpty({
+  message = "Heartbeats, cron jobs, and channel messages will appear here as they happen.",
+}: EventEmptyProps) {
+  return (
+    <Empty className="border-0">
+      <EmptyHeader>
+        <EmptyTitle>No events</EmptyTitle>
+        <EmptyDescription>{message}</EmptyDescription>
+      </EmptyHeader>
+    </Empty>
+  )
+}

package/src/event-feed.tsx

@@ -0,0 +1,120 @@
+import { useRef, useEffect, useCallback } from "react"
+import { AnimatePresence, motion } from "framer-motion"
+import { EventItem } from "./event-item"
+import { EventFilter } from "./event-filter"
+import { EventEmpty } from "./event-empty"
+import type { EventEntry, EventType } from "./types"
+
+export interface EventFeedProps {
+  events: EventEntry[]
+  loading?: boolean
+  filter?: EventType | null
+  onFilterChange?: (type: EventType | null) => void
+  onEventClick?: (event: EventEntry) => void
+  maxHeight?: string
+  emptyMessage?: string
+}
+
+export function EventFeed({
+  events,
+  loading = false,
+  filter = null,
+  onFilterChange,
+  onEventClick,
+  maxHeight = "100%",
+  emptyMessage,
+}: EventFeedProps) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const isAtBottomRef = useRef(true)
+
+  const checkIsAtBottom = useCallback(() => {
+    const el = scrollRef.current
+    if (!el) return true
+    return el.scrollHeight - el.scrollTop - el.clientHeight < 32
+  }, [])
+
+  const scrollToBottom = useCallback(() => {
+    const el = scrollRef.current
+    if (!el) return
+    el.scrollTo({ top: el.scrollHeight, behavior: "smooth" })
+  }, [])
+
+  // Track scroll position
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el) return
+
+    const handleScroll = () => {
+      isAtBottomRef.current = checkIsAtBottom()
+    }
+
+    el.addEventListener("scroll", handleScroll, { passive: true })
+    return () => el.removeEventListener("scroll", handleScroll)
+  }, [checkIsAtBottom])
+
+  // Auto-scroll when new events arrive (only if already at bottom)
+  useEffect(() => {
+    if (isAtBottomRef.current) {
+      scrollToBottom()
+    }
+  }, [events.length, scrollToBottom])
+
+  const filteredEvents = filter
+    ? events.filter((e) => e.type === filter)
+    : events
+
+  const counts = events.reduce<Partial<Record<EventType, number>>>(
+    (acc, e) => {
+      acc[e.type] = (acc[e.type] ?? 0) + 1
+      return acc
+    },
+    {},
+  )
+
+  return (
+    <div className="flex flex-col flex-1" style={{ maxHeight }}>
+      {/* Filter bar */}
+      {onFilterChange && (
+        <div className="shrink-0 border-b border-border">
+          <EventFilter
+            value={filter}
+            onChange={onFilterChange}
+            counts={counts}
+          />
+        </div>
+      )}
+
+      {/* Event list */}
+      <div ref={scrollRef} className="flex-1 flex flex-col overflow-y-auto min-h-0">
+        {filteredEvents.length === 0 && !loading ? (
+          <EventEmpty message={emptyMessage} />
+        ) : (
+          <div className="divide-y divide-border">
+            <AnimatePresence initial={false}>
+              {filteredEvents.map((event) => (
+                <motion.div
+                  key={event.id}
+                  initial={{ opacity: 0, y: 8 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -8 }}
+                  transition={{
+                    duration: 0.2,
+                    ease: [0.25, 0.1, 0.25, 1],
+                  }}
+                >
+                  <EventItem event={event} onClick={onEventClick} />
+                </motion.div>
+              ))}
+            </AnimatePresence>
+          </div>
+        )}
+
+        {loading && (
+          <div className="flex items-center justify-center py-4">
+            <span className="text-xs text-muted-foreground">Loading...</span>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/event-filter.tsx

@@ -0,0 +1,64 @@
+import { cn, Badge } from "@houston-ai/core"
+import type { EventType } from "./types"
+import { EVENT_TYPE_LABELS } from "./types"
+
+export interface EventFilterProps {
+  value: EventType | null
+  onChange: (type: EventType | null) => void
+  counts?: Partial<Record<EventType, number>>
+}
+
+const EVENT_TYPES: EventType[] = [
+  "message",
+  "heartbeat",
+  "cron",
+  "hook",
+  "webhook",
+  "agent_message",
+]
+
+export function EventFilter({ value, onChange, counts }: EventFilterProps) {
+  return (
+    <div className="flex items-center gap-1.5 px-3 py-2 overflow-x-auto">
+      <button
+        onClick={() => onChange(null)}
+        className={cn(
+          "shrink-0 px-2.5 py-1 rounded-full text-xs font-medium transition-colors duration-150",
+          value === null
+            ? "bg-primary text-primary-foreground"
+            : "bg-secondary text-muted-foreground hover:bg-accent",
+        )}
+      >
+        All
+      </button>
+
+      {EVENT_TYPES.map((type) => {
+        const count = counts?.[type]
+        const isActive = value === type
+
+        return (
+          <button
+            key={type}
+            onClick={() => onChange(isActive ? null : type)}
+            className={cn(
+              "shrink-0 flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium transition-colors duration-150",
+              isActive
+                ? "bg-primary text-primary-foreground"
+                : "bg-secondary text-muted-foreground hover:bg-accent",
+            )}
+          >
+            {EVENT_TYPE_LABELS[type]}
+            {count !== undefined && count > 0 && (
+              <Badge
+                variant={isActive ? "secondary" : "outline"}
+                className="ml-0.5 px-1.5 py-0 text-[10px] leading-4 h-4"
+              >
+                {count}
+              </Badge>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/event-item.tsx

@@ -0,0 +1,99 @@
+import { cn } from "@houston-ai/core"
+import {
+  MessageSquare,
+  Heart,
+  Clock,
+  Zap,
+  Globe,
+  Bot,
+  Check,
+} from "lucide-react"
+import type { EventEntry, EventType } from "./types"
+
+export interface EventItemProps {
+  event: EventEntry
+  onClick?: (event: EventEntry) => void
+}
+
+const iconMap: Record<EventType, React.ComponentType<{ className?: string }>> = {
+  message: MessageSquare,
+  heartbeat: Heart,
+  cron: Clock,
+  hook: Zap,
+  webhook: Globe,
+  agent_message: Bot,
+}
+
+function statusIndicator(status: EventEntry["status"]) {
+  switch (status) {
+    case "pending":
+      return <span className="flex size-2 shrink-0 rounded-full bg-muted-foreground/40" />
+    case "processing":
+      return <span className="flex size-2 shrink-0 rounded-full bg-primary tool-active-dot" />
+    case "completed":
+      return <Check className="size-3 shrink-0 text-green-600" />
+    case "suppressed":
+      return <span className="flex size-2 shrink-0 rounded-full bg-muted-foreground/30" />
+    case "error":
+      return <span className="flex size-2 shrink-0 rounded-full bg-destructive" />
+    default:
+      return <span className="flex size-2 shrink-0 rounded-full bg-muted-foreground/30" />
+  }
+}
+
+function relativeTime(iso: string): string {
+  const now = Date.now()
+  const then = new Date(iso).getTime()
+  const diffSec = Math.floor((now - then) / 1000)
+
+  if (diffSec < 60) return "just now"
+  if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`
+  if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`
+  return `${Math.floor(diffSec / 86400)}d ago`
+}
+
+export function EventItem({ event, onClick }: EventItemProps) {
+  const Icon = iconMap[event.type]
+  const isSuppressed = event.status === "suppressed"
+  const isSuppressedHeartbeat = isSuppressed && event.type === "heartbeat"
+
+  return (
+    <button
+      onClick={() => onClick?.(event)}
+      className={cn(
+        "w-full text-left flex items-center gap-3 px-3 py-2 transition-colors duration-150",
+        "hover:bg-accent/50",
+        isSuppressedHeartbeat && "opacity-50",
+      )}
+    >
+      {/* Type icon */}
+      <div className="flex items-center justify-center w-4 shrink-0">
+        <Icon className="size-4 text-muted-foreground" />
+      </div>
+
+      {/* Summary + source */}
+      <div className="flex-1 min-w-0">
+        <p
+          className={cn(
+            "text-sm truncate text-foreground",
+            isSuppressed && "line-through text-muted-foreground",
+          )}
+        >
+          {event.summary}
+        </p>
+        <p className="text-[11px] text-muted-foreground truncate">
+          {event.source.channel}
+          {event.source.identifier && ` ${event.source.identifier}`}
+        </p>
+      </div>
+
+      {/* Timestamp + status */}
+      <div className="flex items-center gap-2 shrink-0">
+        <span className="text-[11px] text-muted-foreground/60">
+          {relativeTime(event.createdAt)}
+        </span>
+        {statusIndicator(event.status)}
+      </div>
+    </button>
+  )
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+// Types
+export type {
+  EventType,
+  EventStatus,
+  EventSource,
+  EventEntry,
+} from "./types"
+export { EVENT_TYPE_LABELS, EVENT_TYPE_ICONS } from "./types"
+
+// Components
+export { EventFeed } from "./event-feed"
+export type { EventFeedProps } from "./event-feed"
+
+export { EventItem } from "./event-item"
+export type { EventItemProps } from "./event-item"
+
+export { EventFilter } from "./event-filter"
+export type { EventFilterProps } from "./event-filter"
+
+export { EventEmpty } from "./event-empty"
+export type { EventEmptyProps } from "./event-empty"

package/src/types.ts

@@ -0,0 +1,47 @@
+// Generic event types — no app-specific coupling.
+
+export type EventType =
+  | "message"
+  | "heartbeat"
+  | "cron"
+  | "hook"
+  | "webhook"
+  | "agent_message"
+
+export type EventStatus = "pending" | "processing" | "completed" | "suppressed" | "error"
+
+export interface EventSource {
+  channel: string // "slack", "telegram", "desktop", "system", "webhook", "agent"
+  identifier: string // channel ID, cron job name, etc.
+}
+
+export interface EventEntry {
+  id: string
+  type: EventType
+  source: EventSource
+  summary: string // human-readable description
+  status: EventStatus
+  payload?: Record<string, unknown>
+  sessionKey?: string
+  projectId?: string
+  createdAt: string // ISO 8601
+  processedAt?: string
+}
+
+export const EVENT_TYPE_LABELS: Record<EventType, string> = {
+  message: "Message",
+  heartbeat: "Heartbeat",
+  cron: "Scheduled",
+  hook: "Hook",
+  webhook: "Webhook",
+  agent_message: "Agent",
+}
+
+export const EVENT_TYPE_ICONS: Record<EventType, string> = {
+  message: "MessageSquare",
+  heartbeat: "Heart",
+  cron: "Clock",
+  hook: "Zap",
+  webhook: "Globe",
+  agent_message: "Bot",
+}