@thxgg/steward 0.1.5 → 0.1.7

package/app/composables/useRepos.ts

@@ -1,108 +0,0 @@
-import type { RepoConfig, AddRepoRequest } from '~/types/repo'
-
-const STORAGE_KEY = 'prd-viewer-current-repo'
-
-export function useRepos() {
-  const { showError, showSuccess } = useToast()
-
-  // Reactive repos list fetched from API
-  // Use key to share data, server: false to avoid SSR issues with filesystem reads
-  const { data: repos, refresh: refreshRepos, status, error: fetchError } = useFetch<RepoConfig[]>('/api/repos', {
-    key: 'repos',
-    default: () => [],
-    server: false
-  })
-
-  // Show error toast when fetch fails
-  watch(fetchError, (err) => {
-    if (err) {
-      showError('Failed to load repositories', 'Please check if the server is running.')
-    }
-  })
-
-  // Current repo ID stored in localStorage
-  const currentRepoId = useState<string | null>('currentRepoId', () => {
-    if (import.meta.client) {
-      return localStorage.getItem(STORAGE_KEY)
-    }
-    return null
-  })
-
-  // Computed current repo object
-  const currentRepo = computed(() => {
-    if (!currentRepoId.value || !repos.value) return null
-    return repos.value.find(r => r.id === currentRepoId.value) || null
-  })
-
-  // Select a repo by ID
-  function selectRepo(id: string | null) {
-    currentRepoId.value = id
-    if (import.meta.client) {
-      if (id) {
-        localStorage.setItem(STORAGE_KEY, id)
-      } else {
-        localStorage.removeItem(STORAGE_KEY)
-      }
-    }
-  }
-
-  // Add a new repo
-  async function addRepo(path: string, name?: string): Promise<RepoConfig> {
-    const body: AddRepoRequest = { path, name }
-    const newRepo = await $fetch<RepoConfig>('/api/repos', {
-      method: 'POST',
-      body
-    })
-    await refreshRepos()
-    // Auto-select the newly added repo
-    selectRepo(newRepo.id)
-    return newRepo
-  }
-
-  // Remove a repo by ID
-  async function removeRepo(id: string): Promise<void> {
-    try {
-      await $fetch(`/api/repos/${id}`, {
-        method: 'DELETE'
-      })
-      // If we deleted the current repo, clear selection
-      if (currentRepoId.value === id) {
-        selectRepo(null)
-      }
-      await refreshRepos()
-      showSuccess('Repository removed')
-    } catch (err) {
-      showError('Failed to remove repository')
-      throw err
-    }
-  }
-
-  // Refresh git repos discovery for a repository
-  async function refreshGitRepos(id: string): Promise<{ discovered: number }> {
-    const result = await $fetch<{ discovered: number }>(`/api/repos/${id}/refresh-git-repos`, {
-      method: 'POST'
-    })
-    await refreshRepos()
-    return result
-  }
-
-  // Initialize: restore from localStorage on client
-  if (import.meta.client) {
-    const storedId = localStorage.getItem(STORAGE_KEY)
-    if (storedId && !currentRepoId.value) {
-      currentRepoId.value = storedId
-    }
-  }
-
-  return {
-    repos,
-    currentRepo,
-    currentRepoId,
-    status,
-    selectRepo,
-    addRepo,
-    removeRepo,
-    refreshRepos,
-    refreshGitRepos
-  }
-}

package/app/composables/useThemeMode.ts

@@ -1,38 +0,0 @@
-type ThemeMode = 'light' | 'dark' | 'system'
-
-const THEME_MODE_CYCLE: ThemeMode[] = ['light', 'dark', 'system']
-
-function normalizeThemeMode(value: unknown): ThemeMode {
-  if (value === 'dark' || value === 'system') {
-    return value
-  }
-
-  return 'light'
-}
-
-export function useThemeMode() {
-  const colorMode = useColorMode()
-
-  const themeMode = computed<ThemeMode>(() => normalizeThemeMode(colorMode.preference))
-
-  const resolvedTheme = computed<'light' | 'dark'>(() => {
-    return colorMode.value === 'dark' ? 'dark' : 'light'
-  })
-
-  function setThemeMode(mode: ThemeMode) {
-    colorMode.preference = mode
-  }
-
-  function cycleThemeMode() {
-    const currentIndex = THEME_MODE_CYCLE.indexOf(themeMode.value)
-    const nextIndex = (currentIndex + 1) % THEME_MODE_CYCLE.length
-    setThemeMode(THEME_MODE_CYCLE[nextIndex]!)
-  }
-
-  return {
-    themeMode,
-    resolvedTheme,
-    setThemeMode,
-    cycleThemeMode
-  }
-}

package/app/composables/useToast.ts

@@ -1,31 +0,0 @@
-import { toast } from 'vue-sonner'
-
-export function useToast() {
-  function showError(message: string, description?: string) {
-    toast.error(message, {
-      description,
-      duration: 5000
-    })
-  }
-
-  function showSuccess(message: string, description?: string) {
-    toast.success(message, {
-      description,
-      duration: 3000
-    })
-  }
-
-  function showInfo(message: string, description?: string) {
-    toast.info(message, {
-      description,
-      duration: 3000
-    })
-  }
-
-  return {
-    showError,
-    showSuccess,
-    showInfo,
-    toast
-  }
-}

package/app/layouts/default.vue

@@ -1,197 +0,0 @@
-<script setup lang="ts">
-import { Monitor, Moon, Sun } from 'lucide-vue-next'
-import { Button } from '~/components/ui/button'
-import CommandPalette from '~/components/CommandPalette.vue'
-import ShortcutsHelp from '~/components/ShortcutsHelp.vue'
-
-const { themeMode, cycleThemeMode } = useThemeMode()
-const { refreshPrds } = usePrd()
-const { currentRepoId } = useRepos()
-const route = useRoute()
-
-// File change event for live updates (provided to child components)
-const fileChangeEvent = ref<{ category: string; path?: string; timestamp: number } | null>(null)
-provide('fileChangeEvent', fileChangeEvent)
-
-// Command palette state
-const commandPaletteOpen = ref(false)
-const commandPaletteFilter = ref('')
-
-// Shortcuts help modal state
-const shortcutsHelpOpen = ref(false)
-
-// Ref to access RepoSelector methods
-const repoSelectorRef = ref<{ openAddDialog: () => void } | null>(null)
-
-// Register keyboard shortcuts
-const { onShortcut } = useKeyboard()
-
-// Cmd/Ctrl+K to open command palette
-onShortcut('Meta+k', () => {
-  commandPaletteOpen.value = true
-})
-onShortcut('Ctrl+k', () => {
-  commandPaletteOpen.value = true
-})
-
-// Cmd/Ctrl+J to open palette pre-filtered to PRDs
-onShortcut('Meta+j', () => {
-  commandPaletteFilter.value = 'PRD: '
-  commandPaletteOpen.value = true
-})
-onShortcut('Ctrl+j', () => {
-  commandPaletteFilter.value = 'PRD: '
-  commandPaletteOpen.value = true
-})
-
-// Cmd/Ctrl+\ to toggle Document/Task Board tabs
-function toggleTab() {
-  if (!import.meta.client) return
-  const currentTab = localStorage.getItem('prd-viewer-tab') || 'document'
-  const newTab = currentTab === 'document' ? 'board' : 'document'
-  localStorage.setItem('prd-viewer-tab', newTab)
-  window.dispatchEvent(new StorageEvent('storage', {
-    key: 'prd-viewer-tab',
-    newValue: newTab
-  }))
-}
-onShortcut('Meta+\\', toggleTab)
-onShortcut('Ctrl+\\', toggleTab)
-
-// Cmd/Ctrl+. to cycle theme mode (light/dark/system)
-function toggleColorMode() {
-  cycleThemeMode()
-}
-onShortcut('Meta+.', toggleColorMode)
-onShortcut('Ctrl+.', toggleColorMode)
-
-// Cmd/Ctrl+, to open add repository dialog
-function openAddRepoDialog() {
-  repoSelectorRef.value?.openAddDialog()
-}
-onShortcut('Meta+,', openAddRepoDialog)
-onShortcut('Ctrl+,', openAddRepoDialog)
-
-// Cmd/Ctrl+/ or Cmd/Ctrl+? to open shortcuts help
-function openShortcutsHelp() {
-  shortcutsHelpOpen.value = true
-}
-onShortcut('Meta+/', openShortcutsHelp)
-onShortcut('Ctrl+/', openShortcutsHelp)
-onShortcut('Meta+Shift+/', openShortcutsHelp) // Cmd+? is Cmd+Shift+/
-onShortcut('Ctrl+Shift+/', openShortcutsHelp) // Ctrl+? is Ctrl+Shift+/
-
-// File watching for auto-refresh
-useFileWatch((event) => {
-  if (event.type === 'connected') {
-    return
-  }
-
-  if (!event.category) {
-    return
-  }
-
-  const category = event.category
-
-  // Only refresh if the change is for the current repo
-  if (event.repoId !== currentRepoId.value) {
-    return
-  }
-
-  // Refresh PRD list for any changes
-  if (category === 'prd' || category === 'tasks') {
-    refreshPrds()
-  }
-
-  // For task/progress/prd changes on current PRD page, emit event for granular refresh
-  const prdSlug = route.params.prd as string | undefined
-  if (prdSlug) {
-    const isPrdChange = category === 'prd' && event.path?.includes(`/${prdSlug}.`)
-    const isTaskChange = (category === 'tasks' || category === 'progress') && event.path?.includes(`/${prdSlug}/`)
-
-    if (isPrdChange || isTaskChange) {
-      fileChangeEvent.value = {
-        category,
-        path: event.path,
-        timestamp: Date.now()
-      }
-    }
-  }
-})
-</script>
-
-<template>
-  <div class="min-h-screen bg-background text-foreground">
-    <!-- Command Palette -->
-    <CommandPalette
-      v-model:open="commandPaletteOpen"
-      v-model:filter="commandPaletteFilter"
-      @open-shortcuts-help="openShortcutsHelp"
-    />
-
-    <!-- Shortcuts Help Modal -->
-    <ShortcutsHelp v-model:open="shortcutsHelpOpen" />
-    <!-- Fixed Header -->
-    <header
-      class="fixed top-0 left-0 right-0 z-50 h-14 border-b border-border bg-background/95 backdrop-blur-sm supports-[backdrop-filter]:bg-background/80"
-    >
-      <div class="flex h-full items-center justify-between px-4 md:px-6">
-        <!-- App Title -->
-        <div class="flex items-center gap-4">
-          <h1 class="text-lg font-semibold tracking-tight">
-            PRD Viewer
-          </h1>
-        </div>
-
-        <!-- Right side: Repo Selector + Theme Toggle (ClientOnly to prevent hydration mismatch) -->
-        <ClientOnly>
-          <div class="flex items-center gap-3">
-            <LayoutRepoSelector ref="repoSelectorRef" />
-            <Button
-              variant="ghost"
-              size="icon"
-              class="size-9"
-              @click="toggleColorMode"
-            >
-              <Monitor v-if="themeMode === 'system'" class="size-4" />
-              <Sun v-else-if="themeMode === 'light'" class="size-4" />
-              <Moon v-else class="size-4" />
-              <span class="sr-only">Cycle theme mode</span>
-            </Button>
-          </div>
-          <template #fallback>
-            <div class="flex items-center gap-3">
-              <div class="h-8 w-[200px] animate-pulse rounded-md bg-muted" />
-              <div class="size-9 animate-pulse rounded-md bg-muted" />
-            </div>
-          </template>
-        </ClientOnly>
-      </div>
-    </header>
-
-    <!-- Main Content Area with top padding for fixed header -->
-    <div class="flex h-screen pt-14">
-      <!-- Sidebar -->
-      <ClientOnly>
-        <LayoutSidebar />
-        <template #fallback>
-          <aside class="flex h-full w-64 flex-col border-r border-border bg-background">
-            <div class="flex h-12 items-center border-b border-border px-4">
-              <div class="h-4 w-20 animate-pulse rounded bg-muted" />
-            </div>
-            <div class="flex-1 p-2 space-y-2">
-              <div class="h-9 animate-pulse rounded-md bg-muted" />
-              <div class="h-9 animate-pulse rounded-md bg-muted" />
-              <div class="h-9 animate-pulse rounded-md bg-muted" />
-            </div>
-          </aside>
-        </template>
-      </ClientOnly>
-
-      <!-- Main content -->
-      <main class="flex-1 overflow-auto">
-        <slot />
-      </main>
-    </div>
-  </div>
-</template>

package/app/lib/utils.ts

@@ -1,7 +0,0 @@
-import type { ClassValue } from "clsx"
-import { clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/app/pages/[repo]/[prd].vue

@@ -1,263 +0,0 @@
-<script setup lang="ts">
-import { FileText, LayoutGrid, AlertCircle, Loader2, RefreshCw } from 'lucide-vue-next'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs'
-import { Button } from '~/components/ui/button'
-import type { PrdDocument } from '~/types/prd'
-import type { Task, TasksFile, ProgressFile, CommitRef } from '~/types/task'
-
-// Disable SSR for this page - requires client-side localStorage for repo context
-definePageMeta({
-  ssr: false
-})
-
-const route = useRoute()
-const { selectRepo } = useRepos()
-const { fetchDocument, fetchTasks, fetchProgress, fetchTaskCommits } = usePrd()
-const { showError } = useToast()
-
-// Get route params
-const repoId = computed(() => route.params.repo as string)
-const prdSlug = computed(() => route.params.prd as string)
-
-// State
-const document = ref<PrdDocument | null>(null)
-const tasksFile = ref<TasksFile | null>(null)
-const progressFile = ref<ProgressFile | null>(null)
-const isLoading = ref(true)
-const error = ref<string | null>(null)
-
-// Active tab (persisted in localStorage)
-const activeTab = ref('document')
-
-// Load tab preference from localStorage and listen for changes
-onMounted(() => {
-  if (import.meta.client) {
-    const saved = localStorage.getItem('prd-viewer-tab')
-    if (saved === 'document' || saved === 'board') {
-      activeTab.value = saved
-    }
-
-    // Listen for storage events from command palette
-    window.addEventListener('storage', (event) => {
-      if (event.key === 'prd-viewer-tab' && event.newValue) {
-        if (event.newValue === 'document' || event.newValue === 'board') {
-          activeTab.value = event.newValue
-        }
-      }
-    })
-  }
-})
-
-// Save tab preference
-watch(activeTab, (tab) => {
-  if (import.meta.client) {
-    localStorage.setItem('prd-viewer-tab', tab)
-  }
-})
-
-// Selected task for detail view
-const selectedTask = ref<Task | null>(null)
-const detailOpen = ref(false)
-
-// Build task title map for dependencies display
-const taskTitles = computed(() => {
-  const map = new Map<string, string>()
-  if (tasksFile.value?.tasks) {
-    for (const task of tasksFile.value.tasks) {
-      map.set(task.id, task.title)
-    }
-  }
-  return map
-})
-
-// Inject file change event from layout for live updates
-const fileChangeEvent = inject<Ref<{ category: string; path?: string; timestamp: number } | null>>('fileChangeEvent', ref(null))
-
-// Load PRD document only
-async function loadDocument() {
-  const doc = await fetchDocument(prdSlug.value)
-  if (doc) {
-    document.value = doc
-  }
-}
-
-// Load tasks and progress only
-async function loadTasksAndProgress() {
-  const [tasks, progress] = await Promise.all([
-    fetchTasks(prdSlug.value),
-    fetchProgress(prdSlug.value)
-  ])
-  tasksFile.value = tasks
-  progressFile.value = progress
-}
-
-// Fetch all data (initial load and route changes)
-async function loadData() {
-  isLoading.value = true
-  error.value = null
-
-  try {
-    // Ensure repo is selected
-    selectRepo(repoId.value)
-
-    // Fetch document, tasks, and progress in parallel
-    const [doc, tasks, progress] = await Promise.all([
-      fetchDocument(prdSlug.value),
-      fetchTasks(prdSlug.value),
-      fetchProgress(prdSlug.value)
-    ])
-
-    if (!doc) {
-      error.value = `PRD "${prdSlug.value}" not found in this repository.`
-      return
-    }
-
-    document.value = doc
-    tasksFile.value = tasks
-    progressFile.value = progress
-
-    // Auto-switch to document tab if no tasks exist
-    if (!tasks) {
-      activeTab.value = 'document'
-    }
-  } catch (err) {
-    const fetchErr = err as { statusCode?: number; data?: { message?: string } }
-    if (fetchErr.statusCode === 404) {
-      error.value = `PRD "${prdSlug.value}" not found. Check if the file exists in docs/prd/.`
-    } else if (fetchErr.statusCode === 500) {
-      error.value = 'Server error while loading the PRD. Check the file format.'
-      showError('Server error', fetchErr.data?.message || 'Failed to read PRD file')
-    } else {
-      error.value = 'Failed to load PRD document. Please try again.'
-      showError('Load failed', 'Could not fetch the PRD document')
-    }
-  } finally {
-    isLoading.value = false
-  }
-}
-
-// Watch for file changes and refresh relevant data
-// Use getter function to ensure Vue properly tracks the ref value changes
-watch(
-  () => fileChangeEvent.value,
-  (event) => {
-    if (!event) return
-
-    if (event.category === 'prd') {
-      loadDocument()
-    } else if (event.category === 'tasks' || event.category === 'progress') {
-      loadTasksAndProgress()
-    }
-  }
-)
-
-// Load data on mount
-onMounted(loadData)
-
-// Reload when route params change
-watch([repoId, prdSlug], loadData)
-
-// Handle task click
-async function handleTaskClick(task: Task) {
-  selectedTask.value = task
-  detailOpen.value = true
-  // Fetch resolved commits from API (includes repo context)
-  selectedTaskCommits.value = await fetchTaskCommits(prdSlug.value, task.id)
-}
-
-// Resolved commits for selected task (fetched from API with repo context)
-const selectedTaskCommits = ref<CommitRef[]>([])
-</script>
-
-<template>
-  <div class="h-full p-4 md:p-6">
-    <!-- Loading State -->
-    <div v-if="isLoading" class="flex h-full items-center justify-center">
-      <div class="flex flex-col items-center gap-4">
-        <Loader2 class="size-8 animate-spin text-primary" />
-        <p class="text-sm text-muted-foreground">Loading PRD...</p>
-      </div>
-    </div>
-
-    <!-- Error State -->
-    <div v-else-if="error" class="flex h-full items-center justify-center">
-      <div class="flex max-w-md flex-col items-center gap-4 text-center">
-        <AlertCircle class="size-12 text-destructive" />
-        <h2 class="text-lg font-semibold">Error Loading PRD</h2>
-        <p class="text-sm text-muted-foreground">{{ error }}</p>
-        <div class="flex gap-3">
-          <Button variant="outline" size="sm" @click="loadData">
-            <RefreshCw class="mr-2 size-4" />
-            Retry
-          </Button>
-          <NuxtLink to="/">
-            <Button variant="ghost" size="sm">
-              Go back home
-            </Button>
-          </NuxtLink>
-        </div>
-      </div>
-    </div>
-
-    <!-- Content -->
-    <div v-else-if="document" class="mx-auto max-w-6xl space-y-6">
-      <!-- Header with PRD name -->
-      <div class="space-y-2">
-        <h1 class="text-2xl font-bold tracking-tight">{{ document.name }}</h1>
-        <PrdMeta :metadata="document.metadata" />
-      </div>
-
-      <!-- Tabs -->
-      <Tabs v-model="activeTab" class="w-full">
-        <TabsList>
-          <TabsTrigger value="document" class="gap-2">
-            <FileText class="size-4" />
-            Document
-          </TabsTrigger>
-          <TabsTrigger value="board" class="gap-2" :disabled="!tasksFile">
-            <LayoutGrid class="size-4" />
-            Task Board
-            <span v-if="tasksFile" class="text-xs text-muted-foreground">
-              ({{ tasksFile.tasks.length }})
-            </span>
-          </TabsTrigger>
-        </TabsList>
-
-        <!-- Document Tab -->
-        <TabsContent value="document" class="mt-4">
-          <div class="rounded-lg border border-border bg-card p-4 md:p-6">
-            <PrdViewer :content="document.content" />
-          </div>
-        </TabsContent>
-
-        <!-- Board Tab -->
-        <TabsContent value="board" class="mt-4">
-          <div v-if="tasksFile" class="h-[calc(100vh-280px)] min-h-[400px]">
-            <TasksBoard
-              :tasks="tasksFile.tasks"
-              @task-click="handleTaskClick"
-            />
-          </div>
-          <div v-else class="py-12 text-center">
-            <LayoutGrid class="mx-auto size-12 text-muted-foreground/50" />
-            <p class="mt-4 text-muted-foreground">
-              No tasks found for this PRD
-            </p>
-            <p class="mt-1 text-sm text-muted-foreground/70">
-              Task state has not been generated for this PRD yet.
-            </p>
-          </div>
-        </TabsContent>
-      </Tabs>
-    </div>
-
-    <!-- Task Detail Sheet -->
-    <TasksDetail
-      v-model:open="detailOpen"
-      :task="selectedTask"
-      :task-titles="taskTitles"
-      :commits="selectedTaskCommits"
-      :repo-id="repoId"
-    />
-  </div>
-</template>