@mdxui/issues 6.0.0

package/src/components/issue-filters.tsx

@@ -0,0 +1,180 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '@mdxui/primitives/button'
+import { Input } from '@mdxui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@mdxui/primitives/select'
+import { cn } from '@mdxui/primitives/lib/utils'
+import { Search, X } from 'lucide-react'
+import { useIssuesStore } from '../hooks/use-issues-store'
+import type { IssueStatus, IssueType, IssueFilters as IssueFiltersType } from '../types'
+
+export interface IssueFiltersProps {
+  className?: string
+}
+
+export function IssueFilters({ className }: IssueFiltersProps) {
+  const filters = useIssuesStore((s) => s.filters)
+  const setFilters = useIssuesStore((s) => s.setFilters)
+  const [searchText, setSearchText] = React.useState(filters.search ?? '')
+
+  // Debounce search
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setFilters({ ...filters, search: searchText || undefined })
+    }, 300)
+    return () => clearTimeout(timer)
+  }, [searchText])
+
+  const updateFilter = <K extends keyof IssueFiltersType>(
+    key: K,
+    value: IssueFiltersType[K]
+  ) => {
+    setFilters({ ...filters, [key]: value })
+  }
+
+  const clearFilters = () => {
+    setSearchText('')
+    setFilters({})
+  }
+
+  const hasActiveFilters =
+    searchText ||
+    filters.status?.length ||
+    filters.type?.length ||
+    filters.priority?.length
+
+  return (
+    <div className={cn('flex flex-wrap items-center gap-2', className)}>
+      {/* Search */}
+      <div className="relative flex-1 min-w-48">
+        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+        <Input
+          type="search"
+          placeholder="Search issues..."
+          value={searchText}
+          onChange={(e) => setSearchText(e.target.value)}
+          className="pl-8"
+        />
+      </div>
+
+      {/* Status Filter */}
+      <Select
+        value={filters.status?.[0] ?? 'all'}
+        onValueChange={(value) =>
+          updateFilter('status', value === 'all' ? undefined : [value as IssueStatus])
+        }
+      >
+        <SelectTrigger className="w-32">
+          <SelectValue placeholder="Status" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All Status</SelectItem>
+          <SelectItem value="open">Open</SelectItem>
+          <SelectItem value="in_progress">In Progress</SelectItem>
+          <SelectItem value="blocked">Blocked</SelectItem>
+          <SelectItem value="closed">Closed</SelectItem>
+        </SelectContent>
+      </Select>
+
+      {/* Type Filter */}
+      <Select
+        value={filters.type?.[0] ?? 'all'}
+        onValueChange={(value) =>
+          updateFilter('type', value === 'all' ? undefined : [value as IssueType])
+        }
+      >
+        <SelectTrigger className="w-28">
+          <SelectValue placeholder="Type" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All Types</SelectItem>
+          <SelectItem value="task">Task</SelectItem>
+          <SelectItem value="bug">Bug</SelectItem>
+          <SelectItem value="feature">Feature</SelectItem>
+          <SelectItem value="epic">Epic</SelectItem>
+          <SelectItem value="story">Story</SelectItem>
+          <SelectItem value="chore">Chore</SelectItem>
+        </SelectContent>
+      </Select>
+
+      {/* Clear Filters */}
+      {hasActiveFilters && (
+        <Button variant="ghost" size="sm" onClick={clearFilters}>
+          <X className="h-4 w-4 mr-1" />
+          Clear
+        </Button>
+      )}
+    </div>
+  )
+}
+
+// Quick filter buttons for common filters
+export interface QuickFiltersProps {
+  className?: string
+}
+
+export function QuickFilters({ className }: QuickFiltersProps) {
+  const filters = useIssuesStore((s) => s.filters)
+  const setFilters = useIssuesStore((s) => s.setFilters)
+
+  const isActive = (check: Partial<IssueFiltersType>) => {
+    if (check.ready && filters.ready) return true
+    if (check.blocked && filters.blocked) return true
+    if (check.status && JSON.stringify(check.status) === JSON.stringify(filters.status))
+      return true
+    return false
+  }
+
+  const toggleFilter = (filter: Partial<IssueFiltersType>) => {
+    if (isActive(filter)) {
+      // Clear the filter
+      const newFilters = { ...filters }
+      if (filter.ready) delete newFilters.ready
+      if (filter.blocked) delete newFilters.blocked
+      if (filter.status) delete newFilters.status
+      setFilters(newFilters)
+    } else {
+      setFilters({ ...filters, ...filter, ready: undefined, blocked: undefined })
+    }
+  }
+
+  return (
+    <div className={cn('flex items-center gap-1', className)}>
+      <Button
+        variant={filters.ready ? 'default' : 'outline'}
+        size="sm"
+        onClick={() => toggleFilter({ ready: true })}
+      >
+        Ready
+      </Button>
+      <Button
+        variant={filters.blocked ? 'default' : 'outline'}
+        size="sm"
+        onClick={() => toggleFilter({ blocked: true })}
+      >
+        Blocked
+      </Button>
+      <Button
+        variant={isActive({ status: ['in_progress'] }) ? 'default' : 'outline'}
+        size="sm"
+        onClick={() => toggleFilter({ status: ['in_progress'] })}
+      >
+        In Progress
+      </Button>
+      <Button
+        variant={isActive({ status: ['closed'] }) ? 'default' : 'outline'}
+        size="sm"
+        onClick={() => toggleFilter({ status: ['closed'] })}
+      >
+        Closed
+      </Button>
+    </div>
+  )
+}

package/src/components/issue-list.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import * as React from 'react'
+import {
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@mdxui/primitives/table'
+import { cn } from '@mdxui/primitives/lib/utils'
+import { IssueRow } from './issue-row'
+import { IssueFilters } from './issue-filters'
+import { useIssuesStore, useFilteredIssues } from '../hooks/use-issues-store'
+import type { Issue, IssueSort } from '../types'
+
+export interface IssueListProps {
+  /** Issues to display (overrides store) */
+  issues?: Issue[]
+  /** Currently selected issue ID */
+  selectedId?: string
+  /** Callback when an issue is selected */
+  onSelect?: (issue: Issue) => void
+  /** Show filters */
+  showFilters?: boolean
+  /** Custom class name */
+  className?: string
+}
+
+export function IssueList({
+  issues: propIssues,
+  selectedId: propSelectedId,
+  onSelect,
+  showFilters = true,
+  className,
+}: IssueListProps) {
+  const storeIssues = useFilteredIssues()
+  const storeSelectedId = useIssuesStore((s) => s.selectedId)
+  const selectIssue = useIssuesStore((s) => s.selectIssue)
+  const sort = useIssuesStore((s) => s.sort)
+  const setSort = useIssuesStore((s) => s.setSort)
+
+  const issues = propIssues ?? storeIssues
+  const selectedId = propSelectedId ?? storeSelectedId
+
+  const handleSelect = (issue: Issue) => {
+    selectIssue(issue.id)
+    onSelect?.(issue)
+  }
+
+  const handleSort = (field: IssueSort['field']) => {
+    if (sort.field === field) {
+      setSort({ field, direction: sort.direction === 'asc' ? 'desc' : 'asc' })
+    } else {
+      setSort({ field, direction: 'asc' })
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent, index: number) => {
+    if (e.key === 'ArrowDown' && index < issues.length - 1) {
+      e.preventDefault()
+      handleSelect(issues[index + 1])
+    } else if (e.key === 'ArrowUp' && index > 0) {
+      e.preventDefault()
+      handleSelect(issues[index - 1])
+    }
+  }
+
+  const SortHeader = ({
+    field,
+    children,
+    className: headerClassName,
+  }: {
+    field: IssueSort['field']
+    children: React.ReactNode
+    className?: string
+  }) => (
+    <TableHead
+      className={cn('cursor-pointer select-none hover:bg-muted/50', headerClassName)}
+      onClick={() => handleSort(field)}
+    >
+      <div className="flex items-center gap-1">
+        {children}
+        {sort.field === field && (
+          <span className="text-xs">{sort.direction === 'asc' ? '↑' : '↓'}</span>
+        )}
+      </div>
+    </TableHead>
+  )
+
+  return (
+    <div className={cn('flex flex-col gap-4', className)}>
+      {showFilters && <IssueFilters />}
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-28">ID</TableHead>
+              <TableHead className="w-20">Type</TableHead>
+              <SortHeader field="title" className="max-w-md">
+                Title
+              </SortHeader>
+              <SortHeader field="status" className="w-28">
+                Status
+              </SortHeader>
+              <TableHead className="w-24">Assignee</TableHead>
+              <SortHeader field="priority" className="w-16">
+                Priority
+              </SortHeader>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {issues.length === 0 ? (
+              <TableRow>
+                <TableHead colSpan={6} className="text-center text-muted-foreground py-8">
+                  No issues found
+                </TableHead>
+              </TableRow>
+            ) : (
+              issues.map((issue, index) => (
+                <IssueRow
+                  key={issue.id}
+                  issue={issue}
+                  isSelected={issue.id === selectedId}
+                  onClick={() => handleSelect(issue)}
+                  onKeyDown={(e) => handleKeyDown(e, index)}
+                />
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {issues.length > 0 && (
+        <div className="text-sm text-muted-foreground">
+          {issues.length} issue{issues.length !== 1 ? 's' : ''}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/issue-row.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import * as React from 'react'
+import { TableRow, TableCell } from '@mdxui/primitives/table'
+import { cn } from '@mdxui/primitives/lib/utils'
+import { TypeBadge, StatusBadge, PriorityBadge } from './issue-badges'
+import type { Issue } from '../types'
+
+export interface IssueRowProps {
+  issue: Issue
+  isSelected?: boolean
+  onClick?: () => void
+  onKeyDown?: (e: React.KeyboardEvent) => void
+  className?: string
+}
+
+export function IssueRow({ issue, isSelected, onClick, onKeyDown, className }: IssueRowProps) {
+  return (
+    <TableRow
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          onClick?.()
+        }
+        onKeyDown?.(e)
+      }}
+      className={cn(
+        'cursor-pointer transition-colors',
+        isSelected && 'bg-muted',
+        className
+      )}
+    >
+      <TableCell className="font-mono text-xs text-muted-foreground w-28">
+        {issue.id}
+      </TableCell>
+      <TableCell className="w-20">
+        <TypeBadge type={issue.type} />
+      </TableCell>
+      <TableCell className="max-w-md">
+        <span className="line-clamp-1">{issue.title}</span>
+      </TableCell>
+      <TableCell className="w-28">
+        <StatusBadge status={issue.status} />
+      </TableCell>
+      <TableCell className="w-24 text-sm text-muted-foreground">
+        {issue.assignee ?? '-'}
+      </TableCell>
+      <TableCell className="w-16">
+        <PriorityBadge priority={issue.priority} />
+      </TableCell>
+    </TableRow>
+  )
+}

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './use-issues-store'
+export * from './use-issue-mutations'
+export * from './use-beads'

package/src/hooks/use-beads.ts

@@ -0,0 +1,224 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useIssuesStore } from './use-issues-store'
+import type { Issue } from '../types'
+
+export interface BeadsConfig {
+  /** Base URL for the beads API server */
+  apiUrl?: string
+  /** WebSocket URL for live updates */
+  wsUrl?: string
+  /** Enable live updates via WebSocket */
+  liveUpdates?: boolean
+  /** Polling interval in ms (fallback if WS not available) */
+  pollInterval?: number
+}
+
+interface BeadsTransport {
+  /** Send an RPC request to the beads server */
+  send: (method: string, params: Record<string, unknown>) => Promise<unknown>
+  /** Connect to WebSocket for live updates */
+  connect: () => void
+  /** Disconnect WebSocket */
+  disconnect: () => void
+  /** Connection status */
+  isConnected: boolean
+}
+
+/**
+ * Hook for connecting to the beads CLI/server.
+ * Provides real-time updates and RPC transport.
+ */
+export function useBeads(config: BeadsConfig = {}): BeadsTransport {
+  const {
+    apiUrl = 'http://localhost:5000/api',
+    wsUrl = 'ws://localhost:5000/ws',
+    liveUpdates = true,
+    pollInterval = 30000,
+  } = config
+
+  const wsRef = useRef<WebSocket | null>(null)
+  const [isConnected, setIsConnected] = useState(false)
+  const setIssues = useIssuesStore((s) => s.setIssues)
+  const updateIssue = useIssuesStore((s) => s.updateIssue)
+  const addIssue = useIssuesStore((s) => s.addIssue)
+  const removeIssue = useIssuesStore((s) => s.removeIssue)
+
+  // Fetch all issues from the server
+  const fetchIssues = useCallback(async () => {
+    try {
+      const response = await fetch(`${apiUrl}/issues`)
+      if (!response.ok) throw new Error('Failed to fetch issues')
+      const data = await response.json()
+      setIssues(mapBeadsIssuesToIssues(data.issues ?? []))
+    } catch (error) {
+      console.error('Failed to fetch issues:', error)
+    }
+  }, [apiUrl, setIssues])
+
+  // Send RPC request
+  const send = useCallback(
+    async (method: string, params: Record<string, unknown>): Promise<unknown> => {
+      const response = await fetch(`${apiUrl}/rpc`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ method, params }),
+      })
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ message: 'Unknown error' }))
+        throw new Error(error.message ?? 'RPC request failed')
+      }
+      return response.json()
+    },
+    [apiUrl]
+  )
+
+  // WebSocket connection
+  const connect = useCallback(() => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) return
+
+    try {
+      const ws = new WebSocket(wsUrl)
+
+      ws.onopen = () => {
+        console.log('WebSocket connected')
+        setIsConnected(true)
+      }
+
+      ws.onclose = () => {
+        console.log('WebSocket disconnected')
+        setIsConnected(false)
+        // Reconnect after delay
+        setTimeout(connect, 5000)
+      }
+
+      ws.onerror = (error) => {
+        console.error('WebSocket error:', error)
+      }
+
+      ws.onmessage = (event) => {
+        try {
+          const message = JSON.parse(event.data)
+          handleLiveUpdate(message)
+        } catch (error) {
+          console.error('Failed to parse WebSocket message:', error)
+        }
+      }
+
+      wsRef.current = ws
+    } catch (error) {
+      console.error('Failed to connect WebSocket:', error)
+    }
+  }, [wsUrl])
+
+  const disconnect = useCallback(() => {
+    if (wsRef.current) {
+      wsRef.current.close()
+      wsRef.current = null
+    }
+  }, [])
+
+  // Handle live updates from WebSocket
+  const handleLiveUpdate = (message: { type: string; payload: unknown }) => {
+    switch (message.type) {
+      case 'issue:created':
+        addIssue(mapBeadsIssueToIssue(message.payload as BeadsIssue))
+        break
+      case 'issue:updated':
+        const updated = message.payload as BeadsIssue
+        updateIssue(updated.id, mapBeadsIssueToIssue(updated))
+        break
+      case 'issue:deleted':
+        removeIssue((message.payload as { id: string }).id)
+        break
+      case 'issues:refresh':
+        fetchIssues()
+        break
+    }
+  }
+
+  // Initial fetch and setup
+  useEffect(() => {
+    fetchIssues()
+
+    if (liveUpdates) {
+      connect()
+    } else if (pollInterval > 0) {
+      const interval = setInterval(fetchIssues, pollInterval)
+      return () => clearInterval(interval)
+    }
+
+    return disconnect
+  }, [fetchIssues, connect, disconnect, liveUpdates, pollInterval])
+
+  return { send, connect, disconnect, isConnected }
+}
+
+// Beads-specific issue format (from beads CLI)
+interface BeadsIssue {
+  id: string
+  title: string
+  description?: string
+  type: string
+  status: string
+  priority: number
+  assignee?: string
+  labels?: string[]
+  epic?: string
+  deps?: string[]
+  dependents?: string[]
+  design?: string
+  acceptance?: string
+  notes?: string
+  created: string
+  updated: string
+  closed?: string
+  close_reason?: string
+}
+
+// Map beads format to our Issue type
+function mapBeadsIssueToIssue(beads: BeadsIssue): Issue {
+  return {
+    id: beads.id,
+    title: beads.title,
+    description: beads.description,
+    type: beads.type as Issue['type'],
+    status: beads.status as Issue['status'],
+    priority: beads.priority as Issue['priority'],
+    assignee: beads.assignee,
+    labels: beads.labels ?? [],
+    epic: beads.epic,
+    dependencies: beads.deps ?? [],
+    dependents: beads.dependents ?? [],
+    design: beads.design,
+    acceptance: beads.acceptance,
+    notes: beads.notes,
+    createdAt: beads.created,
+    updatedAt: beads.updated,
+    closedAt: beads.closed,
+    closeReason: beads.close_reason,
+  }
+}
+
+function mapBeadsIssuesToIssues(beads: BeadsIssue[]): Issue[] {
+  return beads.map(mapBeadsIssueToIssue)
+}
+
+// Map our Issue type to beads format for updates
+export function mapIssueToBeads(issue: Partial<Issue>): Partial<BeadsIssue> {
+  const beads: Partial<BeadsIssue> = {}
+
+  if (issue.title !== undefined) beads.title = issue.title
+  if (issue.description !== undefined) beads.description = issue.description
+  if (issue.type !== undefined) beads.type = issue.type
+  if (issue.status !== undefined) beads.status = issue.status
+  if (issue.priority !== undefined) beads.priority = issue.priority
+  if (issue.assignee !== undefined) beads.assignee = issue.assignee
+  if (issue.labels !== undefined) beads.labels = issue.labels
+  if (issue.epic !== undefined) beads.epic = issue.epic
+  if (issue.dependencies !== undefined) beads.deps = issue.dependencies
+  if (issue.design !== undefined) beads.design = issue.design
+  if (issue.acceptance !== undefined) beads.acceptance = issue.acceptance
+  if (issue.notes !== undefined) beads.notes = issue.notes
+
+  return beads
+}