@thxgg/steward 0.1.5 → 0.1.7

package/app/components/git/CommitList.vue

@@ -1,224 +0,0 @@
-<script setup lang="ts">
-import { GitCommit as GitCommitIcon, Plus, Minus, FileText, FolderGit2, AlertCircle } from 'lucide-vue-next'
-import { Badge } from '~/components/ui/badge'
-import type { GitCommit } from '~/types/git'
-import type { CommitRef } from '~/types/task'
-
-const props = defineProps<{
-  /** Array of commits to display - expects CommitRef objects with sha and repo */
-  commits: CommitRef[]
-  /** Repository ID for API calls */
-  repoId: string
-}>()
-
-const emit = defineEmits<{
-  select: [sha: string, repo?: string]
-}>()
-
-const { fetchCommits, isLoadingCommits } = useGit()
-
-// Fetched commit details (keyed by sha for lookup)
-const commitDetails = ref<Map<string, GitCommit>>(new Map())
-
-// Track commits that failed to load
-const failedCommits = ref<Set<string>>(new Set())
-
-// Check if any commits have repo info (indicates pseudo-monorepo)
-const hasMultipleRepos = computed(() => {
-  const repos = new Set(props.commits.map(c => c.repo).filter(Boolean))
-  return repos.size > 1
-})
-
-// Fetch commit details when props change
-// Group commits by repo to make efficient API calls
-watch(
-  () => ({ commits: props.commits, repoId: props.repoId }),
-  async ({ commits, repoId }) => {
-    if (commits.length === 0 || !repoId) {
-      commitDetails.value = new Map()
-      failedCommits.value = new Set()
-      return
-    }
-
-    // Group commits by repo
-    const commitsByRepo = new Map<string, string[]>()
-    for (const commit of commits) {
-      const repoPath = commit.repo || ''
-      if (!commitsByRepo.has(repoPath)) {
-        commitsByRepo.set(repoPath, [])
-      }
-      commitsByRepo.get(repoPath)!.push(commit.sha)
-    }
-
-    // Fetch commits for each repo in parallel
-    const results = await Promise.all(
-      Array.from(commitsByRepo.entries()).map(async ([repoPath, shas]) => {
-        const result = await fetchCommits(repoId, shas, repoPath || undefined)
-        return {
-          commits: result.commits.map(c => ({ ...c, repoPath })),
-          failedShas: result.failedShas,
-        }
-      })
-    )
-
-    // Build map of sha -> commit details and collect failed SHAs
-    const detailsMap = new Map<string, GitCommit>()
-    const failed = new Set<string>()
-
-    for (const { commits: repoCommits, failedShas } of results) {
-      for (const commit of repoCommits) {
-        // Key by shortSha since props contain abbreviated SHAs
-        detailsMap.set(commit.shortSha, commit)
-      }
-      for (const sha of failedShas) {
-        failed.add(sha)
-      }
-    }
-
-    commitDetails.value = detailsMap
-    failedCommits.value = failed
-  },
-  { immediate: true }
-)
-
-// Format relative date
-function formatRelativeDate(isoDate: string): string {
-  const date = new Date(isoDate)
-  const now = new Date()
-  const diffMs = now.getTime() - date.getTime()
-  const diffSeconds = Math.floor(diffMs / 1000)
-  const diffMinutes = Math.floor(diffSeconds / 60)
-  const diffHours = Math.floor(diffMinutes / 60)
-  const diffDays = Math.floor(diffHours / 24)
-
-  if (diffSeconds < 60) {
-    return 'just now'
-  } else if (diffMinutes < 60) {
-    return `${diffMinutes} minute${diffMinutes === 1 ? '' : 's'} ago`
-  } else if (diffHours < 24) {
-    return `${diffHours} hour${diffHours === 1 ? '' : 's'} ago`
-  } else if (diffDays < 7) {
-    return `${diffDays} day${diffDays === 1 ? '' : 's'} ago`
-  } else {
-    return date.toLocaleDateString()
-  }
-}
-
-function handleClick(commit: CommitRef) {
-  emit('select', commit.sha, commit.repo)
-}
-
-// Get commit details by SHA (supports prefix matching for abbreviated SHAs)
-function getDetails(sha: string): GitCommit | undefined {
-  // Direct lookup first
-  const direct = commitDetails.value.get(sha)
-  if (direct) return direct
-
-  // Try prefix matching (short SHA might be abbreviated differently)
-  for (const [key, commit] of commitDetails.value) {
-    if (key.startsWith(sha) || sha.startsWith(key)) {
-      return commit
-    }
-  }
-  return undefined
-}
-
-// Check if a commit failed to load (supports prefix matching)
-function isFailed(sha: string): boolean {
-  if (failedCommits.value.has(sha)) return true
-
-  // Try prefix matching
-  for (const failedSha of failedCommits.value) {
-    if (failedSha.startsWith(sha) || sha.startsWith(failedSha)) {
-      return true
-    }
-  }
-  return false
-}
-</script>
-
-<template>
-  <div class="space-y-2">
-    <!-- Loading skeleton -->
-    <template v-if="isLoadingCommits">
-      <div
-        v-for="i in Math.min(commits.length, 3)"
-        :key="i"
-        class="animate-pulse rounded-lg border bg-muted/50 p-3"
-      >
-        <div class="flex items-start gap-3">
-          <div class="h-5 w-5 rounded bg-muted" />
-          <div class="flex-1 space-y-2">
-            <div class="h-4 w-20 rounded bg-muted" />
-            <div class="h-4 w-3/4 rounded bg-muted" />
-            <div class="h-3 w-1/2 rounded bg-muted" />
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <!-- Empty state -->
-    <div
-      v-else-if="commits.length === 0"
-      class="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground"
-    >
-      No commits recorded for this task
-    </div>
-
-    <!-- Commit list -->
-    <template v-else>
-      <button
-        v-for="commit in commits"
-        :key="commit.sha"
-        class="w-full rounded-lg border bg-card p-3 text-left transition-colors hover:bg-muted/50 focus:outline-none focus:ring-2 focus:ring-ring"
-        @click="handleClick(commit)"
-      >
-        <div class="flex items-start gap-3">
-          <GitCommitIcon class="mt-0.5 size-5 shrink-0 text-muted-foreground" />
-          <div class="min-w-0 flex-1">
-            <!-- SHA, stats, and repo badge -->
-            <div class="flex flex-wrap items-center gap-2">
-              <code class="font-mono text-xs font-medium text-primary">
-                {{ getDetails(commit.sha)?.shortSha || commit.sha.substring(0, 7) }}
-              </code>
-              <template v-if="getDetails(commit.sha)">
-                <span class="flex items-center gap-1 text-xs text-muted-foreground">
-                  <FileText class="size-3" />
-                  {{ getDetails(commit.sha)!.filesChanged }}
-                </span>
-                <span class="flex items-center gap-0.5 text-xs text-green-600 dark:text-green-400">
-                  <Plus class="size-3" />{{ getDetails(commit.sha)!.additions }}
-                </span>
-                <span class="flex items-center gap-0.5 text-xs text-red-600 dark:text-red-400">
-                  <Minus class="size-3" />{{ getDetails(commit.sha)!.deletions }}
-                </span>
-              </template>
-              <!-- Repo badge - only show for pseudo-monorepos with multiple repos -->
-              <Badge v-if="commit.repo && hasMultipleRepos" variant="secondary" class="gap-1 text-xs">
-                <FolderGit2 class="size-3" />
-                {{ commit.repo }}
-              </Badge>
-            </div>
-
-            <!-- Message -->
-            <p class="mt-1 truncate text-sm">
-              <template v-if="getDetails(commit.sha)">
-                {{ getDetails(commit.sha)!.message }}
-              </template>
-              <span v-else-if="isFailed(commit.sha)" class="flex items-center gap-1 text-muted-foreground">
-                <AlertCircle class="size-3" />
-                Commit unavailable
-              </span>
-              <span v-else class="text-muted-foreground">Loading...</span>
-            </p>
-
-            <!-- Author and date -->
-            <p v-if="getDetails(commit.sha)" class="mt-1 text-xs text-muted-foreground">
-              {{ getDetails(commit.sha)!.author }} &middot; {{ formatRelativeDate(getDetails(commit.sha)!.date) }}
-            </p>
-          </div>
-        </div>
-      </button>
-    </template>
-  </div>
-</template>

package/app/components/git/DiffPanel.vue

@@ -1,402 +0,0 @@
-<script setup lang="ts">
-import { AlertCircle, RefreshCw, Loader2, Keyboard, FileCode, FileDiff as FileDiffIcon } from 'lucide-vue-next'
-import { ScrollArea } from '~/components/ui/scroll-area'
-import { Button } from '~/components/ui/button'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '~/components/ui/tooltip'
-import type { FileDiff, DiffHunk } from '~/types/git'
-
-const props = defineProps<{
-  /** Repository ID */
-  repoId: string
-  /** Commit SHA to display diff for */
-  commitSha: string
-  /** Optional relative path to git repo (for pseudo-monorepos) */
-  repoPath?: string
-}>()
-
-const emit = defineEmits<{
-  close: []
-}>()
-
-const { fetchDiff, fetchFileDiff, fetchFileContent, isLoadingDiff, isLoadingFileDiff, isLoadingFileContent } = useGit()
-
-// State
-const files = ref<FileDiff[]>([])
-const selectedFile = ref<string | undefined>()
-const hunks = ref<DiffHunk[]>([])
-const fileContent = ref<string | null>(null)
-const error = ref<string | null>(null)
-const fileDiffError = ref<string | null>(null)
-
-// View mode: 'changes' shows only hunks, 'full' shows entire file with changes highlighted
-const viewMode = ref<'changes' | 'full'>('changes')
-
-// Get the selected file's metadata
-const selectedFileDiff = computed(() => files.value.find(f => f.path === selectedFile.value))
-
-// Fetch file list on mount and when commitSha changes
-async function loadDiff() {
-  error.value = null
-  files.value = []
-  selectedFile.value = undefined
-  hunks.value = []
-
-  const result = await fetchDiff(props.repoId, props.commitSha, props.repoPath)
-
-  if (result.length === 0 && !isLoadingDiff.value) {
-    // Check if it was an error (empty could be valid, but error is set by toast)
-    // We'll set a generic message if truly no files
-    error.value = null // Let empty state show naturally
-  }
-
-  files.value = result
-
-  // Auto-select first file
-  if (result.length > 0) {
-    selectedFile.value = result[0]!.path
-  }
-}
-
-// Fetch file diff when selection changes
-async function loadFileDiff() {
-  if (!selectedFile.value) {
-    hunks.value = []
-    fileContent.value = null
-    return
-  }
-
-  fileDiffError.value = null
-
-  // Fetch hunks (always needed for highlighting changes)
-  const result = await fetchFileDiff(props.repoId, props.commitSha, selectedFile.value, props.repoPath)
-  hunks.value = result
-
-  // Fetch full file content if in full mode
-  if (viewMode.value === 'full') {
-    const content = await fetchFileContent(props.repoId, props.commitSha, selectedFile.value, props.repoPath)
-    fileContent.value = content
-  }
-}
-
-// Toggle view mode
-function toggleViewMode() {
-  viewMode.value = viewMode.value === 'changes' ? 'full' : 'changes'
-}
-
-// Reload file content when switching to full mode
-watch(viewMode, async (mode) => {
-  if (mode === 'full' && selectedFile.value && !fileContent.value) {
-    const content = await fetchFileContent(props.repoId, props.commitSha, selectedFile.value, props.repoPath)
-    fileContent.value = content
-  }
-})
-
-// Handle file selection from minimap
-function handleFileSelect(path: string) {
-  selectedFile.value = path
-}
-
-// Retry loading
-function retry() {
-  loadDiff()
-}
-
-function retryFileDiff() {
-  loadFileDiff()
-}
-
-// Watch for selection changes
-watch(selectedFile, () => {
-  loadFileDiff()
-})
-
-// Watch for prop changes
-watch(
-  () => [props.repoId, props.commitSha, props.repoPath] as const,
-  () => {
-    loadDiff()
-  },
-  { immediate: true }
-)
-
-// Keyboard navigation
-const panelRef = ref<HTMLElement | null>(null)
-const diffViewerRef = ref<HTMLElement | null>(null)
-
-// Navigate to next/previous file
-function navigateFile(direction: 'next' | 'prev') {
-  if (files.value.length === 0) return
-
-  const currentIndex = selectedFile.value
-    ? files.value.findIndex(f => f.path === selectedFile.value)
-    : -1
-
-  let newIndex: number
-  if (direction === 'next') {
-    newIndex = currentIndex < files.value.length - 1 ? currentIndex + 1 : 0
-  } else {
-    newIndex = currentIndex > 0 ? currentIndex - 1 : files.value.length - 1
-  }
-
-  const file = files.value[newIndex]
-  if (file) {
-    selectedFile.value = file.path
-  }
-}
-
-// Jump between hunks
-function jumpToHunk(direction: 'next' | 'prev') {
-  if (!diffViewerRef.value) return
-
-  const separators = diffViewerRef.value.querySelectorAll('.diff-separator')
-  if (separators.length === 0) return
-
-  const container = diffViewerRef.value.closest('.overflow-y-auto, [data-radix-scroll-area-viewport]')
-  if (!container) return
-
-  const scrollTop = container.scrollTop
-  const containerRect = container.getBoundingClientRect()
-
-  let targetSeparator: Element | null = null
-
-  if (direction === 'next') {
-    // Find the first separator below current scroll position
-    for (const sep of separators) {
-      const rect = sep.getBoundingClientRect()
-      const relativeTop = rect.top - containerRect.top + scrollTop
-      if (relativeTop > scrollTop + 50) {
-        targetSeparator = sep
-        break
-      }
-    }
-    // If no separator found below, wrap to first
-    if (!targetSeparator && separators.length > 0) {
-      targetSeparator = separators[0]!
-    }
-  } else {
-    // Find the last separator above current scroll position
-    for (let i = separators.length - 1; i >= 0; i--) {
-      const sep = separators[i]!
-      const rect = sep.getBoundingClientRect()
-      const relativeTop = rect.top - containerRect.top + scrollTop
-      if (relativeTop < scrollTop - 10) {
-        targetSeparator = sep
-        break
-      }
-    }
-    // If no separator found above, wrap to last
-    if (!targetSeparator && separators.length > 0) {
-      targetSeparator = separators[separators.length - 1]!
-    }
-  }
-
-  if (targetSeparator) {
-    targetSeparator.scrollIntoView({ behavior: 'smooth', block: 'start' })
-  }
-}
-
-// Handle keyboard events
-function handleKeydown(event: KeyboardEvent) {
-  // Skip if user is typing in an input
-  if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
-    return
-  }
-
-  switch (event.key) {
-    case 'j':
-    case 'ArrowDown':
-      if (!event.ctrlKey && !event.metaKey) {
-        event.preventDefault()
-        navigateFile('next')
-      }
-      break
-    case 'k':
-    case 'ArrowUp':
-      if (!event.ctrlKey && !event.metaKey) {
-        event.preventDefault()
-        navigateFile('prev')
-      }
-      break
-    case '[':
-      event.preventDefault()
-      jumpToHunk('prev')
-      break
-    case ']':
-      event.preventDefault()
-      jumpToHunk('next')
-      break
-    case 'Escape':
-      event.preventDefault()
-      emit('close')
-      break
-  }
-}
-
-// Set up keyboard listeners when mounted
-onMounted(() => {
-  document.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeydown)
-})
-</script>
-
-<template>
-  <div ref="panelRef" class="flex h-full flex-col overflow-hidden" tabindex="-1">
-    <!-- Error state -->
-    <div v-if="error" class="flex flex-1 flex-col items-center justify-center gap-4 p-8">
-      <AlertCircle class="size-12 text-destructive" />
-      <div class="text-center">
-        <p class="font-medium">Failed to load diff</p>
-        <p class="text-sm text-muted-foreground">{{ error }}</p>
-      </div>
-      <Button variant="outline" size="sm" @click="retry">
-        <RefreshCw class="mr-2 size-4" />
-        Retry
-      </Button>
-    </div>
-
-    <!-- Loading state (initial load) -->
-    <div v-else-if="isLoadingDiff && files.length === 0" class="flex flex-1 items-center justify-center">
-      <Loader2 class="size-8 animate-spin text-muted-foreground" />
-    </div>
-
-    <!-- Empty state -->
-    <div
-      v-else-if="files.length === 0"
-      class="flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center text-muted-foreground"
-    >
-      <p>No files changed in this commit</p>
-    </div>
-
-    <!-- Main content -->
-    <div v-else class="flex min-h-0 flex-1 overflow-hidden">
-      <!-- Minimap sidebar -->
-      <div class="flex w-56 shrink-0 flex-col border-r border-border">
-        <div class="flex items-center justify-between border-b border-border px-3 py-2">
-          <span class="text-xs font-medium text-muted-foreground">
-            {{ files.length }} file{{ files.length !== 1 ? 's' : '' }} changed
-          </span>
-          <!-- Keyboard shortcuts hint -->
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger as-child>
-                <button class="text-muted-foreground/50 transition-colors hover:text-muted-foreground">
-                  <Keyboard class="size-3.5" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom" align="end" class="max-w-xs">
-                <div class="space-y-1 text-xs">
-                  <div class="flex justify-between gap-4">
-                    <span class="text-muted-foreground">Navigate files</span>
-                    <span class="font-mono">j/k or ↑/↓</span>
-                  </div>
-                  <div class="flex justify-between gap-4">
-                    <span class="text-muted-foreground">Jump to hunk</span>
-                    <span class="font-mono">[ / ]</span>
-                  </div>
-                  <div class="flex justify-between gap-4">
-                    <span class="text-muted-foreground">Close</span>
-                    <span class="font-mono">Esc</span>
-                  </div>
-                </div>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-        <div class="min-h-0 flex-1 overflow-y-auto">
-          <GitChangesMinimap
-            :files="files"
-            :selected-file="selectedFile"
-            @select="handleFileSelect"
-          />
-        </div>
-      </div>
-
-      <!-- Diff viewer area -->
-      <div class="flex min-h-0 flex-1 flex-col overflow-hidden">
-        <!-- File header with rename support -->
-        <div v-if="selectedFile" class="flex items-center gap-2 border-b border-border px-4 py-2">
-          <span v-if="selectedFileDiff?.oldPath" class="min-w-0 flex-1 truncate font-mono text-sm">
-            <span class="text-muted-foreground">{{ selectedFileDiff.oldPath }}</span>
-            <span class="mx-2 text-muted-foreground">→</span>
-            <span>{{ selectedFile }}</span>
-          </span>
-          <span v-else class="min-w-0 flex-1 truncate font-mono text-sm">{{ selectedFile }}</span>
-          <span v-if="selectedFileDiff?.binary" class="rounded bg-yellow-500/10 px-1.5 py-0.5 text-xs text-yellow-600 dark:text-yellow-400">
-            binary
-          </span>
-          <!-- View mode toggle -->
-          <TooltipProvider v-if="!selectedFileDiff?.binary">
-            <Tooltip>
-              <TooltipTrigger as-child>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  class="h-7 shrink-0 gap-1.5 text-xs"
-                  @click="toggleViewMode"
-                >
-                  <component :is="viewMode === 'changes' ? FileDiffIcon : FileCode" class="size-3.5" />
-                  {{ viewMode === 'changes' ? 'Changes' : 'Full file' }}
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                {{ viewMode === 'changes' ? 'Show full file with changes' : 'Show changes only' }}
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-
-        <!-- File diff loading -->
-        <div v-if="isLoadingFileDiff" class="flex flex-1 items-center justify-center">
-          <Loader2 class="size-6 animate-spin text-muted-foreground" />
-        </div>
-
-        <!-- File diff error -->
-        <div
-          v-else-if="fileDiffError"
-          class="flex flex-1 flex-col items-center justify-center gap-4 p-8"
-        >
-          <AlertCircle class="size-8 text-destructive" />
-          <div class="text-center">
-            <p class="text-sm font-medium">Failed to load file diff</p>
-            <p class="text-xs text-muted-foreground">{{ fileDiffError }}</p>
-          </div>
-          <Button variant="outline" size="sm" @click="retryFileDiff">
-            <RefreshCw class="mr-2 size-4" />
-            Retry
-          </Button>
-        </div>
-
-        <!-- Diff viewer (min-h-0 enables flex item to shrink for scrolling) -->
-        <ScrollArea v-else-if="selectedFile" class="h-0 flex-1 overflow-hidden">
-          <div ref="diffViewerRef">
-            <GitDiffViewer
-              :hunks="hunks"
-              :file-path="selectedFile"
-              :binary="selectedFileDiff?.binary"
-              :old-path="selectedFileDiff?.oldPath"
-              :file-content="fileContent"
-              :show-full-file="viewMode === 'full'"
-              :is-loading-content="isLoadingFileContent"
-            />
-          </div>
-        </ScrollArea>
-
-        <!-- No file selected -->
-        <div
-          v-else
-          class="flex flex-1 items-center justify-center text-sm text-muted-foreground"
-        >
-          Select a file to view changes
-        </div>
-      </div>
-    </div>
-  </div>
-</template>