@thxgg/steward 0.1.0

package/app/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { TabsContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsContent } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TabsContent
+    data-slot="tabs-content"
+    :class="cn('flex-1 outline-none', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/app/components/ui/tabs/TabsList.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TabsListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsList } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TabsList
+    data-slot="tabs-list"
+    v-bind="delegatedProps"
+    :class="cn(
+      'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>

package/app/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    data-slot="tabs-trigger"
+    :class="cn(
+      'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </TabsTrigger>
+</template>

package/app/components/ui/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from "./Tabs.vue"
+export { default as TabsContent } from "./TabsContent.vue"
+export { default as TabsList } from "./TabsList.vue"
+export { default as TabsTrigger } from "./TabsTrigger.vue"

package/app/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from "reka-ui"
+import { TooltipRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot
+    v-slot="slotProps"
+    data-slot="tooltip"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </TooltipRoot>
+</template>

package/app/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
+    >
+      <slot />
+
+      <TooltipArrow class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

package/app/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from "reka-ui"
+import { TooltipProvider } from "reka-ui"
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0,
+})
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

package/app/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from "reka-ui"
+import { TooltipTrigger } from "reka-ui"
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger
+    data-slot="tooltip-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </TooltipTrigger>
+</template>

package/app/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.vue"
+export { default as TooltipContent } from "./TooltipContent.vue"
+export { default as TooltipProvider } from "./TooltipProvider.vue"
+export { default as TooltipTrigger } from "./TooltipTrigger.vue"

package/app/composables/useFileWatch.ts

@@ -0,0 +1,78 @@
+type FileChangeEvent = {
+  type: 'change' | 'add' | 'unlink' | 'connected'
+  path?: string
+  repoId?: string
+  category?: 'prd' | 'tasks' | 'progress'
+}
+
+type FileWatchCallback = (event: FileChangeEvent) => void
+
+export function useFileWatch(callback: FileWatchCallback) {
+  const eventSource = ref<EventSource | null>(null)
+  const isConnected = ref(false)
+  const error = ref<string | null>(null)
+
+  function connect() {
+    if (!import.meta.client) return
+    if (eventSource.value) return // Already connected
+
+    try {
+      const es = new EventSource('/api/watch')
+
+      es.onopen = () => {
+        isConnected.value = true
+        error.value = null
+      }
+
+      es.onmessage = (e) => {
+        try {
+          const event = JSON.parse(e.data) as FileChangeEvent
+          callback(event)
+        } catch {
+          // Ignore malformed events
+        }
+      }
+
+      es.onerror = () => {
+        isConnected.value = false
+        error.value = 'Connection lost'
+
+        // Attempt reconnect after 5 seconds
+        setTimeout(() => {
+          if (eventSource.value === es) {
+            eventSource.value = null
+            connect()
+          }
+        }, 5000)
+      }
+
+      eventSource.value = es
+    } catch {
+      error.value = 'Failed to connect'
+    }
+  }
+
+  function disconnect() {
+    if (eventSource.value) {
+      eventSource.value.close()
+      eventSource.value = null
+      isConnected.value = false
+    }
+  }
+
+  // Auto-connect on mount, disconnect on unmount
+  onMounted(() => {
+    connect()
+  })
+
+  onUnmounted(() => {
+    disconnect()
+  })
+
+  return {
+    isConnected,
+    error,
+    connect,
+    disconnect
+  }
+}

package/app/composables/useGit.ts

@@ -0,0 +1,180 @@
+import type { GitCommit, FileDiff, DiffHunk } from '~/types/git'
+
+export interface FetchCommitsResult {
+  commits: GitCommit[]
+  failedShas: string[]
+}
+
+export function useGit() {
+  const { showError } = useToast()
+
+  // Loading states
+  const isLoadingCommits = ref(false)
+  const isLoadingDiff = ref(false)
+  const isLoadingFileDiff = ref(false)
+  const isLoadingFileContent = ref(false)
+
+  /**
+   * Fetch commit details for an array of SHAs
+   * @param repoId - Repository ID
+   * @param shas - Array of commit SHAs
+   * @param repoPath - Optional relative path to git repo (for pseudo-monorepos)
+   * @returns Object with fetched commits and SHAs that failed to load
+   */
+  async function fetchCommits(repoId: string, shas: string[], repoPath?: string): Promise<FetchCommitsResult> {
+    if (!repoId || shas.length === 0) {
+      return { commits: [], failedShas: [] }
+    }
+
+    isLoadingCommits.value = true
+    try {
+      const query: Record<string, string> = { shas: shas.join(',') }
+      if (repoPath) {
+        query.repo = repoPath
+      }
+
+      const commits = await $fetch<GitCommit[]>(
+        `/api/repos/${repoId}/git/commits`,
+        { query }
+      )
+
+      // Determine which SHAs weren't returned (partial failures on server)
+      // Use shortSha for comparison since requests may use abbreviated SHAs
+      const returnedShortShas = commits.map(c => c.shortSha)
+      const failedShas = shas.filter(sha => {
+        // Check if any returned shortSha matches the requested SHA (prefix matching)
+        return !returnedShortShas.some(shortSha => shortSha.startsWith(sha) || sha.startsWith(shortSha))
+      })
+
+      return { commits, failedShas }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error'
+      showError('Failed to fetch commits', message)
+      // All requested SHAs failed
+      return { commits: [], failedShas: shas }
+    } finally {
+      isLoadingCommits.value = false
+    }
+  }
+
+  /**
+   * Fetch file list with stats for a commit
+   * @param repoId - Repository ID
+   * @param commitSha - Commit SHA
+   * @param repoPath - Optional relative path to git repo (for pseudo-monorepos)
+   */
+  async function fetchDiff(repoId: string, commitSha: string, repoPath?: string): Promise<FileDiff[]> {
+    if (!repoId || !commitSha) {
+      return []
+    }
+
+    isLoadingDiff.value = true
+    try {
+      const query: Record<string, string> = { commit: commitSha }
+      if (repoPath) {
+        query.repo = repoPath
+      }
+
+      const files = await $fetch<FileDiff[]>(
+        `/api/repos/${repoId}/git/diff`,
+        { query }
+      )
+      return files
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error'
+      showError('Failed to fetch diff', message)
+      return []
+    } finally {
+      isLoadingDiff.value = false
+    }
+  }
+
+  /**
+   * Fetch diff hunks for a specific file in a commit
+   * @param repoId - Repository ID
+   * @param commitSha - Commit SHA
+   * @param filePath - Path to the file
+   * @param repoPath - Optional relative path to git repo (for pseudo-monorepos)
+   */
+  async function fetchFileDiff(
+    repoId: string,
+    commitSha: string,
+    filePath: string,
+    repoPath?: string
+  ): Promise<DiffHunk[]> {
+    if (!repoId || !commitSha || !filePath) {
+      return []
+    }
+
+    isLoadingFileDiff.value = true
+    try {
+      const query: Record<string, string> = { commit: commitSha, file: filePath }
+      if (repoPath) {
+        query.repo = repoPath
+      }
+
+      const hunks = await $fetch<DiffHunk[]>(
+        `/api/repos/${repoId}/git/file-diff`,
+        { query }
+      )
+      return hunks
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error'
+      showError('Failed to fetch file diff', message)
+      return []
+    } finally {
+      isLoadingFileDiff.value = false
+    }
+  }
+
+  /**
+   * Fetch file content at a specific commit
+   * @param repoId - Repository ID
+   * @param commitSha - Commit SHA
+   * @param filePath - Path to the file
+   * @param repoPath - Optional relative path to git repo (for pseudo-monorepos)
+   */
+  async function fetchFileContent(
+    repoId: string,
+    commitSha: string,
+    filePath: string,
+    repoPath?: string
+  ): Promise<string | null> {
+    if (!repoId || !commitSha || !filePath) {
+      return null
+    }
+
+    isLoadingFileContent.value = true
+    try {
+      const query: Record<string, string> = { commit: commitSha, file: filePath }
+      if (repoPath) {
+        query.repo = repoPath
+      }
+
+      const result = await $fetch<{ content: string }>(
+        `/api/repos/${repoId}/git/file-content`,
+        { query }
+      )
+      return result.content
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error'
+      showError('Failed to fetch file content', message)
+      return null
+    } finally {
+      isLoadingFileContent.value = false
+    }
+  }
+
+  return {
+    // Functions
+    fetchCommits,
+    fetchDiff,
+    fetchFileDiff,
+    fetchFileContent,
+    // Loading states
+    isLoadingCommits: readonly(isLoadingCommits),
+    isLoadingDiff: readonly(isLoadingDiff),
+    isLoadingFileDiff: readonly(isLoadingFileDiff),
+    isLoadingFileContent: readonly(isLoadingFileContent),
+  }
+}

package/app/composables/useKeyboard.ts

@@ -0,0 +1,180 @@
+import { onMounted, onUnmounted } from 'vue'
+
+export interface KeyboardShortcut {
+  keys: string
+  handler: () => void
+  description?: string
+}
+
+/**
+ * Check if the currently focused element is an input field
+ * where keyboard shortcuts should be suppressed
+ */
+function isTypingInInput(): boolean {
+  if (!import.meta.client) return false
+
+  const activeElement = document.activeElement
+  if (!activeElement) return false
+
+  // Check for input, textarea, or contenteditable elements
+  const tagName = activeElement.tagName.toLowerCase()
+  if (tagName === 'input' || tagName === 'textarea') {
+    return true
+  }
+
+  // Check for contenteditable
+  if (activeElement.getAttribute('contenteditable') === 'true') {
+    return true
+  }
+
+  // Check for role="textbox"
+  if (activeElement.getAttribute('role') === 'textbox') {
+    return true
+  }
+
+  return false
+}
+
+/**
+ * Parse a key combo string into its components
+ * e.g., 'Meta+Shift+a' -> { meta: true, ctrl: false, shift: true, alt: false, key: 'a' }
+ */
+function parseKeyCombo(combo: string): { meta: boolean; ctrl: boolean; shift: boolean; alt: boolean; key: string } {
+  const parts = combo.toLowerCase().split('+')
+  const key = parts.pop() || ''
+
+  return {
+    meta: parts.includes('meta'),
+    ctrl: parts.includes('ctrl'),
+    shift: parts.includes('shift'),
+    alt: parts.includes('alt'),
+    key
+  }
+}
+
+/**
+ * Check if a keyboard event matches a key combo
+ */
+function eventMatchesCombo(event: KeyboardEvent, combo: ReturnType<typeof parseKeyCombo>): boolean {
+  const eventKey = event.key.toLowerCase()
+
+  // Handle special keys
+  let keyMatches = eventKey === combo.key
+  if (combo.key === '\\') {
+    keyMatches = eventKey === '\\' || event.code === 'Backslash'
+  }
+  if (combo.key === '/') {
+    keyMatches = eventKey === '/' || event.code === 'Slash'
+  }
+  if (combo.key === '.') {
+    keyMatches = eventKey === '.' || event.code === 'Period'
+  }
+  if (combo.key === ',') {
+    keyMatches = eventKey === ',' || event.code === 'Comma'
+  }
+
+  return (
+    keyMatches &&
+    event.metaKey === combo.meta &&
+    event.ctrlKey === combo.ctrl &&
+    event.shiftKey === combo.shift &&
+    event.altKey === combo.alt
+  )
+}
+
+interface RegisteredShortcut {
+  combo: ReturnType<typeof parseKeyCombo>
+  handler: () => void
+  allowInInput: boolean
+}
+
+// Global registry of shortcuts
+const shortcuts: RegisteredShortcut[] = []
+
+let listenerAttached = false
+
+function handleKeyDown(event: KeyboardEvent) {
+  for (const shortcut of shortcuts) {
+    if (eventMatchesCombo(event, shortcut.combo)) {
+      // Skip if typing in input unless explicitly allowed
+      if (!shortcut.allowInInput && isTypingInInput()) {
+        continue
+      }
+
+      // Prevent browser default behavior
+      event.preventDefault()
+      event.stopPropagation()
+
+      // Call the handler
+      shortcut.handler()
+      return
+    }
+  }
+}
+
+function ensureListener() {
+  if (!import.meta.client || listenerAttached) return
+
+  document.addEventListener('keydown', handleKeyDown, { capture: true })
+  listenerAttached = true
+}
+
+/**
+ * Composable for handling global keyboard shortcuts.
+ * Prevents default browser behavior when shortcuts are triggered.
+ *
+ * Shortcuts are automatically suppressed when the user is typing in an input field.
+ */
+export function useKeyboard() {
+  onMounted(() => {
+    ensureListener()
+  })
+
+  /**
+   * Register a keyboard shortcut that fires when the specified key combo is pressed.
+   * The handler will NOT fire if the user is typing in an input field.
+   * Browser default behavior is automatically prevented.
+   *
+   * @param keyCombo - Key combination string (e.g., 'Meta+k', 'Ctrl+Shift+a')
+   * @param handler - Function to call when shortcut is triggered
+   * @param options - Additional options
+   */
+  function onShortcut(
+    keyCombo: string,
+    handler: () => void,
+    options?: { allowInInput?: boolean }
+  ) {
+    const combo = parseKeyCombo(keyCombo)
+
+    const shortcut: RegisteredShortcut = {
+      combo,
+      handler,
+      allowInInput: options?.allowInInput ?? false
+    }
+
+    shortcuts.push(shortcut)
+
+    // Ensure listener is attached
+    ensureListener()
+
+    // Cleanup on unmount
+    onUnmounted(() => {
+      const index = shortcuts.indexOf(shortcut)
+      if (index > -1) {
+        shortcuts.splice(index, 1)
+      }
+    })
+  }
+
+  /**
+   * Check if the user is currently focused on an input element
+   */
+  function isInputFocused(): boolean {
+    return isTypingInInput()
+  }
+
+  return {
+    onShortcut,
+    isInputFocused
+  }
+}

package/app/composables/usePrd.ts

@@ -0,0 +1,86 @@
+import type { PrdListItem, PrdDocument } from '~/types/prd'
+import type { TasksFile, ProgressFile, CommitRef } from '~/types/task'
+
+export function usePrd() {
+  const { currentRepoId } = useRepos()
+  const { showError } = useToast()
+
+  // PRD list for current repo - refetches when currentRepoId changes
+  const prdsUrl = computed(() =>
+    currentRepoId.value ? `/api/repos/${currentRepoId.value}/prds` : ''
+  )
+
+  const { data: prds, refresh: refreshPrds, status: prdsStatus, error: prdsError } = useFetch<PrdListItem[]>(
+    prdsUrl,
+    {
+      default: () => [],
+      immediate: false
+    }
+  )
+
+  // Show error toast when PRD list fetch fails
+  watch(prdsError, (err) => {
+    if (err) {
+      showError('Failed to load PRD list', 'The repository may be inaccessible.')
+    }
+  })
+
+  // Watch for repo changes and fetch PRDs
+  watch(currentRepoId, async (newId) => {
+    if (newId) {
+      await refreshPrds()
+    }
+  }, { immediate: true })
+
+  // Fetch a PRD document by slug
+  async function fetchDocument(slug: string): Promise<PrdDocument | null> {
+    if (!currentRepoId.value) return null
+    try {
+      return await $fetch<PrdDocument>(`/api/repos/${currentRepoId.value}/prd/${slug}`)
+    } catch {
+      return null
+    }
+  }
+
+  // Fetch tasks.json for a PRD
+  async function fetchTasks(slug: string): Promise<TasksFile | null> {
+    if (!currentRepoId.value) return null
+    try {
+      return await $fetch<TasksFile | null>(`/api/repos/${currentRepoId.value}/prd/${slug}/tasks`)
+    } catch {
+      return null
+    }
+  }
+
+  // Fetch progress.json for a PRD
+  async function fetchProgress(slug: string): Promise<ProgressFile | null> {
+    if (!currentRepoId.value) return null
+    try {
+      return await $fetch<ProgressFile | null>(`/api/repos/${currentRepoId.value}/prd/${slug}/progress`)
+    } catch {
+      return null
+    }
+  }
+
+  // Fetch resolved commits for a task (returns { sha, repo }[] format)
+  async function fetchTaskCommits(slug: string, taskId: string): Promise<CommitRef[]> {
+    if (!currentRepoId.value) return []
+    try {
+      return await $fetch<CommitRef[]>(
+        `/api/repos/${currentRepoId.value}/prd/${slug}/tasks/${taskId}/commits`
+      )
+    } catch {
+      return []
+    }
+  }
+
+  return {
+    prds,
+    prdsStatus,
+    refreshPrds,
+    fetchDocument,
+    fetchTasks,
+    fetchProgress,
+    fetchTaskCommits
+  }
+}