lazyreview 0.1.4

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "lazyreview",
+  "version": "0.1.4",
+  "description": "A TUI code review tool for GitHub PRs",
+  "type": "module",
+  "author": "Tauan Camargo",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tauantcamargo/lazyreview.git"
+  },
+  "keywords": [
+    "tui",
+    "github",
+    "pr",
+    "code review",
+    "lazyreview",
+    "terminal"
+  ],
+  "bin": {
+    "lazyreview": "dist/cli.js"
+  },
+  "scripts": {
+    "build": "tsup",
+    "start": "node dist/cli.js",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "prettier --check 'src/**/*.{ts,tsx}'",
+    "format": "prettier --write 'src/**/*.{ts,tsx}'"
+  },
+  "dependencies": {
+    "@effect/platform": "^0.77.0",
+    "@inkjs/ui": "^2.0.0",
+    "@tanstack/react-query": "^5.66.0",
+    "date-fns": "^4.1.0",
+    "effect": "^3.14.0",
+    "ink": "^6.7.0",
+    "ink-confirm-input": "^2.0.0",
+    "ink-divider": "^4.1.1",
+    "ink-select-input": "^6.2.0",
+    "ink-scroll-list": "^0.4.1",
+    "ink-scroll-view": "^0.3.5",
+    "ink-syntax-highlight": "^2.0.2",
+    "ink-tab": "^5.2.0",
+    "react": "^19.0.0",
+    "yaml": "^2.7.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.0",
+    "@types/react": "^19.0.0",
+    "@vitest/coverage-v8": "^3.0.0",
+    "ink-testing-library": "^4.0.0",
+    "prettier": "^3.5.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+packages:
+  - '.'
+
+ignoredBuiltDependencies:
+  - esbuild

package/src/app.tsx

@@ -0,0 +1,235 @@
+import React, { useState, useCallback } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Box, useApp, useInput, useStdout } from 'ink'
+import { ThemeProvider, getThemeByName } from './theme/index'
+import type { ThemeName } from './theme/index'
+import { TopBar } from './components/layout/TopBar'
+import { Sidebar, SIDEBAR_ITEMS } from './components/layout/Sidebar'
+import { MainPanel } from './components/layout/MainPanel'
+import { StatusBar } from './components/layout/StatusBar'
+import { HelpModal } from './components/layout/HelpModal'
+import { TokenInputModal } from './components/layout/TokenInputModal'
+import { PRDetailScreen } from './screens/PRDetailScreen'
+import { MyPRsScreen } from './screens/MyPRsScreen'
+import { ReviewRequestsScreen } from './screens/ReviewRequestsScreen'
+import { SettingsScreen } from './screens/SettingsScreen'
+import { InvolvedScreen } from './screens/InvolvedScreen'
+import { ThisRepoScreen } from './screens/ThisRepoScreen'
+import { Match } from 'effect'
+import { useAuth } from './hooks/useAuth'
+import { useConfig } from './hooks/useConfig'
+import { useListNavigation } from './hooks/useListNavigation'
+import { useActivePanel } from './hooks/useActivePanel'
+import { InputFocusProvider, useInputFocus } from './hooks/useInputFocus'
+import type { PullRequest } from './models/pull-request'
+
+type AppScreen =
+  | { readonly type: 'list' }
+  | { readonly type: 'detail'; readonly pr: PullRequest }
+
+interface AppContentProps {
+  readonly repoOwner: string | null
+  readonly repoName: string | null
+}
+
+function AppContent({
+  repoOwner,
+  repoName,
+}: AppContentProps): React.ReactElement {
+  const { exit } = useApp()
+  const { stdout } = useStdout()
+  const { user, isAuthenticated, loading, saveToken, error } = useAuth()
+  const [sidebarVisible, setSidebarVisible] = useState(true)
+  const [currentScreen, setCurrentScreen] = useState<AppScreen>({
+    type: 'list',
+  })
+  const [tokenError, setTokenError] = useState<string | null>(null)
+  const [showHelp, setShowHelp] = useState(false)
+  // Start with modal hidden, show only after auth check fails
+  const [showTokenInput, setShowTokenInput] = useState(false)
+
+  // Panel focus management
+  const { activePanel, setActivePanel } = useActivePanel({
+    hasSelection: currentScreen.type === 'detail',
+  })
+
+  // Input focus tracking (for disabling shortcuts when typing)
+  const { isInputActive } = useInputFocus()
+
+  // Sidebar navigation
+  const { selectedIndex: sidebarIndex } = useListNavigation({
+    itemCount: SIDEBAR_ITEMS.length,
+    viewportHeight: SIDEBAR_ITEMS.length,
+    isActive: activePanel === 'sidebar' && !showHelp && !showTokenInput,
+  })
+
+  // Show token modal when not authenticated (covers invalid token case)
+  React.useEffect(() => {
+    if (!loading && !isAuthenticated && !showTokenInput) {
+      setShowTokenInput(true)
+    } else if (isAuthenticated && showTokenInput) {
+      setShowTokenInput(false)
+    }
+  }, [loading, isAuthenticated, showTokenInput])
+
+  const handleTokenSubmit = useCallback(
+    async (token: string) => {
+      try {
+        setTokenError(null)
+        await saveToken(token)
+      } catch (err) {
+        setTokenError(String(err))
+      }
+    },
+    [saveToken],
+  )
+
+  // Global keyboard shortcuts
+  useInput(
+    (input, key) => {
+      // Handle modals first
+      if (showHelp || showTokenInput) {
+        if (key.escape || (showHelp && input === '?')) {
+          setShowHelp(false)
+        }
+        return
+      }
+
+      if (input === 'b') {
+        setSidebarVisible((prev) => !prev)
+      } else if (input === '?') {
+        setShowHelp(true)
+      } else if (input === 'q') {
+        if (currentScreen.type === 'detail') {
+          setCurrentScreen({ type: 'list' })
+        } else {
+          exit()
+        }
+      } else if (key.return && activePanel === 'sidebar') {
+        setActivePanel('list')
+      }
+    },
+    { isActive: !showTokenInput && !isInputActive },
+  )
+
+  const handleSelectPR = useCallback((pr: PullRequest) => {
+    setCurrentScreen({ type: 'detail', pr })
+  }, [])
+
+  const handleBackToList = useCallback(() => {
+    setCurrentScreen({ type: 'list' })
+  }, [])
+
+  function renderScreen(): React.ReactElement {
+    if (currentScreen.type === 'detail') {
+      // Extract owner/repo from PR URL for detail view
+      const prUrl = currentScreen.pr.html_url
+      const match = prUrl.match(/github\.com\/([^/]+)\/([^/]+)\/pull/)
+      const prOwner = match?.[1] ?? repoOwner ?? ''
+      const prRepo = match?.[2] ?? repoName ?? ''
+
+      return (
+        <PRDetailScreen
+          pr={currentScreen.pr}
+          owner={prOwner}
+          repo={prRepo}
+          onBack={handleBackToList}
+        />
+      )
+    }
+
+    // Navigation:
+    // 0 - Involved (all PRs user is involved in)
+    // 1 - My PRs (PRs user created)
+    // 2 - For Review (PRs requesting user's review)
+    // 3 - This Repo (PRs from current git directory)
+    // 4 - Settings
+    return Match.value(sidebarIndex).pipe(
+      Match.when(0, () => <InvolvedScreen onSelect={handleSelectPR} />),
+      Match.when(1, () => <MyPRsScreen onSelect={handleSelectPR} />),
+      Match.when(2, () => <ReviewRequestsScreen onSelect={handleSelectPR} />),
+      Match.when(3, () => (
+        <ThisRepoScreen
+          owner={repoOwner}
+          repo={repoName}
+          onSelect={handleSelectPR}
+        />
+      )),
+      Match.when(4, () => <SettingsScreen />),
+      Match.orElse(() => <InvolvedScreen onSelect={handleSelectPR} />),
+    )
+  }
+
+  const terminalHeight = stdout?.rows ?? 24
+
+  const repoPath =
+    repoOwner && repoName ? `${repoOwner}/${repoName}` : undefined
+
+  return (
+    <Box flexDirection="column" height={terminalHeight}>
+      <TopBar
+        username={user?.login ?? 'anonymous'}
+        provider="github"
+        repoPath={repoPath}
+      />
+      <Box flexDirection="row" flexGrow={1}>
+        <Sidebar
+          selectedIndex={sidebarIndex}
+          visible={sidebarVisible}
+          isActive={activePanel === 'sidebar'}
+        />
+        <MainPanel isActive={activePanel === 'list'}>
+          {renderScreen()}
+        </MainPanel>
+      </Box>
+      <StatusBar activePanel={activePanel} />
+      {showHelp && <HelpModal onClose={() => setShowHelp(false)} />}
+      {showTokenInput && (
+        <TokenInputModal
+          onSubmit={handleTokenSubmit}
+          onClose={() => setShowTokenInput(false)}
+          error={tokenError ?? error}
+        />
+      )}
+    </Box>
+  )
+}
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60, // 1 minute
+      retry: 1,
+    },
+  },
+})
+
+interface AppProps {
+  readonly repoOwner: string | null
+  readonly repoName: string | null
+}
+
+function AppWithTheme({
+  repoOwner,
+  repoName,
+}: AppProps): React.ReactElement {
+  const { config } = useConfig()
+  const themeName = (config?.theme ?? 'tokyo-night') as ThemeName
+  const theme = getThemeByName(themeName)
+
+  return (
+    <ThemeProvider theme={theme}>
+      <AppContent repoOwner={repoOwner} repoName={repoName} />
+    </ThemeProvider>
+  )
+}
+
+export function App({ repoOwner, repoName }: AppProps): React.ReactElement {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <InputFocusProvider>
+        <AppWithTheme repoOwner={repoOwner} repoName={repoName} />
+      </InputFocusProvider>
+    </QueryClientProvider>
+  )
+}

package/src/cli.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { render } from 'ink'
+import { App } from './app'
+import { detectGitRepo } from './utils/git'
+
+// ANSI escape codes for alternate screen buffer
+const ENTER_ALT_SCREEN = '\x1b[?1049h'
+const EXIT_ALT_SCREEN = '\x1b[?1049l'
+const CLEAR_SCREEN = '\x1b[2J'
+const CURSOR_HOME = '\x1b[H'
+const HIDE_CURSOR = '\x1b[?25l'
+const SHOW_CURSOR = '\x1b[?25h'
+
+interface RepoInfo {
+  readonly owner: string | null
+  readonly repo: string | null
+}
+
+function parseArgs(argv: string[]): RepoInfo | null {
+  const repoArg = argv[2]
+
+  if (repoArg && repoArg.includes('/')) {
+    const [owner, repo] = repoArg.split('/')
+    if (owner && repo) {
+      return { owner, repo }
+    }
+  }
+
+  return null
+}
+
+// Cleanup on exit
+function cleanup(): void {
+  process.stdout.write(SHOW_CURSOR + EXIT_ALT_SCREEN)
+}
+
+async function main(): Promise<void> {
+  // Enter alternate screen buffer
+  process.stdout.write(
+    ENTER_ALT_SCREEN + CLEAR_SCREEN + CURSOR_HOME + HIDE_CURSOR,
+  )
+
+  process.on('exit', cleanup)
+  process.on('SIGINT', () => {
+    cleanup()
+    process.exit(0)
+  })
+  process.on('SIGTERM', () => {
+    cleanup()
+    process.exit(0)
+  })
+
+  // Check for CLI args first
+  const argsRepo = parseArgs(process.argv)
+
+  // If no args, try to detect from current git repo
+  let repoOwner: string | null = null
+  let repoName: string | null = null
+
+  if (argsRepo) {
+    repoOwner = argsRepo.owner
+    repoName = argsRepo.repo
+  } else {
+    const gitInfo = await detectGitRepo()
+    if (gitInfo.isGitRepo && gitInfo.owner && gitInfo.repo) {
+      repoOwner = gitInfo.owner
+      repoName = gitInfo.repo
+    }
+  }
+
+  render(<App repoOwner={repoOwner} repoName={repoName} />)
+}
+
+main().catch((error) => {
+  cleanup()
+  console.error('Failed to start:', error)
+  process.exit(1)
+})

package/src/components/common/BorderedBox.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { useTheme } from '../../theme/index'
+
+interface BorderedBoxProps {
+  readonly title: string
+  readonly width?: number | string
+  readonly height?: number | string
+  readonly isActive?: boolean
+  readonly children: React.ReactNode
+}
+
+export function BorderedBox({
+  title,
+  width,
+  height,
+  isActive = false,
+  children,
+}: BorderedBoxProps): React.ReactElement {
+  const theme = useTheme()
+  const borderColor = isActive ? theme.colors.accent : theme.colors.border
+
+  return (
+    <Box
+      flexDirection="column"
+      width={width}
+      height={height}
+      borderStyle="single"
+      borderColor={borderColor}
+    >
+      <Box paddingX={1}>
+        <Text bold={isActive} color={borderColor} dimColor={!isActive}>
+          {title}
+        </Text>
+      </Box>
+      <Box flexDirection="column" flexGrow={1} paddingX={1}>
+        {children}
+      </Box>
+    </Box>
+  )
+}

package/src/components/common/Divider.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Box, Text, useStdout } from 'ink'
+import { useTheme } from '../../theme/index'
+
+const DEFAULT_LINE_LENGTH = 36
+
+export function Divider({ title }: { readonly title?: string }): React.ReactElement {
+  const theme = useTheme()
+  const { stdout } = useStdout()
+  const cols = stdout?.columns ?? 80
+  const len = Math.min(DEFAULT_LINE_LENGTH, Math.max(10, cols - 8))
+  const line = '─'.repeat(len)
+
+  if (title) {
+    const pad = Math.max(0, len - title.length - 2)
+    const left = Math.floor(pad / 2)
+    const right = pad - left
+    const text = '─'.repeat(left) + ` ${title} ` + '─'.repeat(right)
+    return (
+      <Box paddingY={0}>
+        <Text color={theme.colors.border}>{text}</Text>
+      </Box>
+    )
+  }
+
+  return (
+    <Box paddingY={0}>
+      <Text color={theme.colors.border}>{line}</Text>
+    </Box>
+  )
+}

package/src/components/common/EmptyState.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { useTheme } from '../../theme/index'
+
+interface EmptyStateProps {
+  readonly icon?: string
+  readonly message: string
+  readonly hint?: string
+}
+
+export function EmptyState({
+  icon = '~',
+  message,
+  hint,
+}: EmptyStateProps): React.ReactElement {
+  const theme = useTheme()
+
+  return (
+    <Box
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      flexGrow={1}
+      paddingY={2}
+    >
+      <Text color={theme.colors.muted}>{icon}</Text>
+      <Text color={theme.colors.muted}>{message}</Text>
+      {hint && (
+        <Text color={theme.colors.muted} dimColor>
+          {hint}
+        </Text>
+      )}
+    </Box>
+  )
+}

package/src/components/common/FilterModal.tsx

@@ -0,0 +1,117 @@
+import React, { useState, useEffect } from 'react'
+import { Box, Text, useInput } from 'ink'
+import { TextInput } from '@inkjs/ui'
+import { useTheme } from '../../theme/index'
+import { useInputFocus } from '../../hooks/useInputFocus'
+import { Modal } from './Modal'
+import type { FilterState, SortField } from '../../hooks/useFilter'
+
+interface FilterModalProps {
+  readonly filter: FilterState
+  readonly availableRepos: readonly string[]
+  readonly availableAuthors: readonly string[]
+  readonly availableLabels: readonly string[]
+  readonly onSearchChange: (search: string) => void
+  readonly onRepoChange: (repo: string | null) => void
+  readonly onAuthorChange: (author: string | null) => void
+  readonly onLabelChange: (label: string | null) => void
+  readonly onSortChange: (sortBy: SortField) => void
+  readonly onSortDirectionToggle: () => void
+  readonly onClear: () => void
+  readonly onClose: () => void
+}
+
+export function FilterModal({
+  filter,
+  onSearchChange,
+  onClear,
+  onClose,
+}: FilterModalProps): React.ReactElement {
+  const theme = useTheme()
+  const { setInputActive } = useInputFocus()
+  const [searchValue, setSearchValue] = useState(filter.search)
+  const [showClearConfirm, setShowClearConfirm] = useState(false)
+
+  useEffect(() => {
+    setInputActive(true)
+    return () => setInputActive(false)
+  }, [setInputActive])
+
+  useInput((input, key) => {
+    if (showClearConfirm) {
+      if (input === 'y' || input === 'Y') {
+        onClear()
+        onClose()
+      } else if (input === 'n' || input === 'N' || key.escape) {
+        setShowClearConfirm(false)
+      }
+      return
+    }
+
+    if (key.escape) {
+      onClose()
+    } else if (key.return) {
+      onSearchChange(searchValue)
+      onClose()
+    } else if (input === 'c' && filter.search) {
+      setShowClearConfirm(true)
+    }
+  })
+
+  if (showClearConfirm) {
+    return (
+      <Modal>
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor={theme.colors.accent}
+          // @ts-ignore
+          backgroundColor={theme.colors.bg}
+          paddingX={2}
+          paddingY={1}
+          gap={1}
+        >
+          <Text color={theme.colors.accent} bold>
+            Clear all filters?
+          </Text>
+          <Text color={theme.colors.text}>y: Yes, n: No</Text>
+        </Box>
+      </Modal>
+    )
+  }
+
+  return (
+    <Modal>
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={theme.colors.accent}
+        // @ts-ignore
+        backgroundColor={theme.colors.bg}
+        paddingX={2}
+        paddingY={1}
+        gap={1}
+      >
+        <Text color={theme.colors.accent} bold>
+          Search PRs
+        </Text>
+
+        <Text color={theme.colors.muted}>
+          Filter by title, number, or author
+        </Text>
+
+        <Box>
+          <TextInput
+            defaultValue={searchValue}
+            onChange={setSearchValue}
+            placeholder="Type to search..."
+          />
+        </Box>
+
+        <Text color={theme.colors.muted} dimColor>
+          Enter: apply | Esc: cancel{filter.search ? ' | c: clear' : ''}
+        </Text>
+      </Box>
+    </Modal>
+  )
+}

package/src/components/common/LoadingIndicator.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Box, Text, useStdout } from 'ink'
+import { Spinner } from '@inkjs/ui'
+import { useTheme } from '../../theme/index'
+
+interface LoadingIndicatorProps {
+  readonly message?: string
+}
+
+export function LoadingIndicator({
+  message = 'Loading...',
+}: LoadingIndicatorProps): React.ReactElement {
+  const theme = useTheme()
+  const { stdout } = useStdout()
+  const height = stdout?.rows ?? 24
+
+  return (
+    <Box
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      height={height - 4}
+      flexGrow={1}
+    >
+      <Box gap={1}>
+        <Spinner />
+        <Text color={theme.colors.accent}>{message}</Text>
+      </Box>
+    </Box>
+  )
+}

package/src/components/common/Modal.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Box, useStdout } from 'ink'
+
+interface ModalProps {
+  readonly children: React.ReactNode
+}
+
+export function Modal({ children }: ModalProps): React.ReactElement {
+  const { stdout } = useStdout()
+  const width = stdout?.columns ?? 80
+  const height = stdout?.rows ?? 24
+
+  return (
+    <Box
+      position="absolute"
+      width={width}
+      height={height}
+      justifyContent="center"
+      alignItems="center"
+    >
+      {children}
+    </Box>
+  )
+}