@thxgg/steward 0.1.0

package/app/composables/useRepos.ts

@@ -0,0 +1,108 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,197 @@
+<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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,263 @@
+<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>