@thxgg/steward 0.1.0

package/app/components/tasks/Detail.vue

@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import {
+  Calendar,
+  Clock,
+  Tag,
+  AlertTriangle,
+  CheckCircle2,
+  Circle,
+  ListOrdered,
+  CheckSquare,
+  Link2,
+  Check,
+  Diff,
+  ArrowLeft
+} from 'lucide-vue-next'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+  SheetClose
+} from '~/components/ui/sheet'
+import { Badge } from '~/components/ui/badge'
+import { Separator } from '~/components/ui/separator'
+import { Button } from '~/components/ui/button'
+import type { Task, CommitRef } from '~/types/task'
+
+const props = defineProps<{
+  task: Task | null
+  /** Map of task ID to task title for displaying dependency names */
+  taskTitles?: Map<string, string>
+  /** Git commits associated with this task (resolved with repo context) */
+  commits?: CommitRef[]
+  /** Repository ID for fetching commit details */
+  repoId?: string
+}>()
+
+const open = defineModel<boolean>('open', { default: false })
+
+// Category badge styling
+const categoryConfig = computed(() => {
+  if (!props.task) return { label: '', variant: 'secondary' as const }
+  switch (props.task.category) {
+    case 'setup':
+      return { label: 'Setup', variant: 'secondary' as const }
+    case 'feature':
+      return { label: 'Feature', variant: 'default' as const }
+    case 'integration':
+      return { label: 'Integration', variant: 'outline' as const }
+    case 'testing':
+      return { label: 'Testing', variant: 'secondary' as const }
+    case 'documentation':
+      return { label: 'Docs', variant: 'secondary' as const }
+    default:
+      return { label: props.task.category, variant: 'secondary' as const }
+  }
+})
+
+// Priority styling
+const priorityConfig = computed(() => {
+  if (!props.task) return { label: '', class: '' }
+  switch (props.task.priority) {
+    case 'critical':
+      return { label: 'Critical', class: 'text-destructive' }
+    case 'high':
+      return { label: 'High', class: 'text-orange-500' }
+    case 'medium':
+      return { label: 'Medium', class: 'text-muted-foreground' }
+    case 'low':
+      return { label: 'Low', class: 'text-muted-foreground' }
+    default:
+      return { label: props.task.priority, class: 'text-muted-foreground' }
+  }
+})
+
+// Status styling
+const statusConfig = computed(() => {
+  if (!props.task) return { label: '', icon: Circle, class: '' }
+  switch (props.task.status) {
+    case 'pending':
+      return { label: 'Pending', icon: Circle, class: 'text-muted-foreground' }
+    case 'in_progress':
+      return { label: 'In Progress', icon: Clock, class: 'text-blue-500' }
+    case 'completed':
+      return { label: 'Completed', icon: CheckCircle2, class: 'text-green-500' }
+    default:
+      return { label: props.task.status, icon: Circle, class: 'text-muted-foreground' }
+  }
+})
+
+// Format ISO date to readable string
+function formatDate(isoString?: string): string {
+  if (!isoString) return ''
+  try {
+    return new Date(isoString).toLocaleString()
+  } catch {
+    return isoString
+  }
+}
+
+// Get task title from ID
+function getTaskTitle(taskId: string): string {
+  return props.taskTitles?.get(taskId) ?? taskId
+}
+
+// Has commits to show
+const hasCommits = computed(() => props.commits && props.commits.length > 0 && props.repoId)
+
+// View state: 'details' or 'diff'
+const viewMode = ref<'details' | 'diff'>('details')
+const selectedCommitSha = ref<string | null>(null)
+const selectedCommitRepo = ref<string | null>(null)
+
+// Handle commit selection (now receives sha and repo)
+function handleCommitSelect(sha: string, repo?: string) {
+  selectedCommitSha.value = sha
+  selectedCommitRepo.value = repo || null
+  viewMode.value = 'diff'
+}
+
+// Go back to details view
+function handleBackToDetails() {
+  viewMode.value = 'details'
+  selectedCommitSha.value = null
+  selectedCommitRepo.value = null
+}
+
+// Reset view when task changes or sheet closes
+watch(() => props.task, () => {
+  viewMode.value = 'details'
+  selectedCommitSha.value = null
+  selectedCommitRepo.value = null
+})
+
+watch(open, (isOpen) => {
+  if (!isOpen) {
+    viewMode.value = 'details'
+    selectedCommitSha.value = null
+    selectedCommitRepo.value = null
+  }
+})
+</script>
+
+<template>
+  <Sheet v-model:open="open">
+    <SheetContent class="flex h-full w-full flex-col overflow-hidden sm:max-w-lg" :class="{ 'sm:!max-w-none !max-w-none': viewMode === 'diff' }">
+      <!-- Header with back button when viewing diff -->
+      <SheetHeader v-if="task" class="px-6 pr-12">
+        <div class="flex items-center gap-2">
+          <Button
+            v-if="viewMode === 'diff'"
+            variant="ghost"
+            size="icon"
+            class="size-8 shrink-0"
+            @click="handleBackToDetails"
+          >
+            <ArrowLeft class="size-4" />
+          </Button>
+          <SheetTitle class="text-left text-lg">
+            {{ viewMode === 'diff' ? 'Commit Changes' : task.title }}
+          </SheetTitle>
+        </div>
+        <SheetDescription class="sr-only">Task details</SheetDescription>
+      </SheetHeader>
+
+      <!-- Diff View -->
+      <div v-if="task && viewMode === 'diff' && selectedCommitSha && repoId" class="min-h-0 flex-1 overflow-hidden">
+        <GitDiffPanel :repo-id="repoId" :commit-sha="selectedCommitSha" :repo-path="selectedCommitRepo || undefined" class="h-full" @close="handleBackToDetails" />
+      </div>
+
+      <!-- Details View -->
+      <div v-else-if="task" class="min-h-0 flex-1 space-y-4 overflow-y-auto px-6">
+        <!-- Status, Category, Priority row -->
+        <div class="flex flex-wrap items-center gap-2">
+          <Badge :variant="categoryConfig.variant">
+            <Tag class="mr-1 size-3" />
+            {{ categoryConfig.label }}
+          </Badge>
+          <Badge variant="outline" :class="priorityConfig.class">
+            <AlertTriangle class="mr-1 size-3" />
+            {{ priorityConfig.label }}
+          </Badge>
+          <Badge variant="outline" :class="statusConfig.class">
+            <component :is="statusConfig.icon" class="mr-1 size-3" />
+            {{ statusConfig.label }}
+          </Badge>
+        </div>
+
+        <!-- Description -->
+        <div class="space-y-2">
+          <h4 class="text-sm font-medium">Description</h4>
+          <p class="text-sm text-muted-foreground leading-relaxed">
+            {{ task.description }}
+          </p>
+        </div>
+
+        <Separator />
+
+        <!-- Steps -->
+        <div v-if="task.steps.length > 0" class="space-y-2">
+          <h4 class="flex items-center gap-2 text-sm font-medium">
+            <ListOrdered class="size-4" />
+            Steps
+          </h4>
+          <ol class="ml-4 list-decimal space-y-1 text-sm text-muted-foreground">
+            <li v-for="(step, index) in task.steps" :key="index" class="pl-1">
+              {{ step }}
+            </li>
+          </ol>
+        </div>
+
+        <Separator v-if="task.steps.length > 0 && task.passes.length > 0" />
+
+        <!-- Passes (criteria) -->
+        <div v-if="task.passes.length > 0" class="space-y-2">
+          <h4 class="flex items-center gap-2 text-sm font-medium">
+            <CheckSquare class="size-4" />
+            Pass Criteria
+          </h4>
+          <ul class="space-y-1.5 text-sm text-muted-foreground">
+            <li v-for="(pass, index) in task.passes" :key="index" class="flex items-start gap-2">
+              <div
+                class="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded border"
+                :class="task.status === 'completed' ? 'border-primary bg-primary text-primary-foreground' : 'border-muted-foreground/50'"
+              >
+                <Check v-if="task.status === 'completed'" class="size-3" />
+              </div>
+              <span>{{ pass }}</span>
+            </li>
+          </ul>
+        </div>
+
+        <Separator v-if="task.dependencies.length > 0" />
+
+        <!-- Dependencies -->
+        <div v-if="task.dependencies.length > 0" class="space-y-2">
+          <h4 class="flex items-center gap-2 text-sm font-medium">
+            <Link2 class="size-4" />
+            Dependencies
+          </h4>
+          <ul class="space-y-1 text-sm text-muted-foreground">
+            <li v-for="depId in task.dependencies" :key="depId" class="flex items-center gap-2">
+              <span class="font-mono text-xs">{{ depId }}</span>
+              <span>{{ getTaskTitle(depId) }}</span>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Changes (commits) -->
+        <template v-if="hasCommits">
+          <Separator />
+          <div class="space-y-2">
+            <h4 class="flex items-center gap-2 text-sm font-medium">
+              <Diff class="size-4" />
+              Changes
+            </h4>
+            <GitCommitList
+              :commits="commits!"
+              :repo-id="repoId!"
+              @select="handleCommitSelect"
+            />
+          </div>
+        </template>
+
+        <!-- Timestamps -->
+        <div v-if="task.startedAt || task.completedAt" class="space-y-2">
+          <Separator />
+          <div class="flex flex-col gap-1 text-xs text-muted-foreground">
+            <div v-if="task.startedAt" class="flex items-center gap-2">
+              <Calendar class="size-3" />
+              <span>Started: {{ formatDate(task.startedAt) }}</span>
+            </div>
+            <div v-if="task.completedAt" class="flex items-center gap-2">
+              <CheckCircle2 class="size-3" />
+              <span>Completed: {{ formatDate(task.completedAt) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Close button - always at bottom -->
+      <SheetFooter class="px-6 pb-6">
+        <SheetClose as-child>
+          <Button variant="outline" class="w-full">Close</Button>
+        </SheetClose>
+      </SheetFooter>
+    </SheetContent>
+  </Sheet>
+</template>

package/app/components/ui/badge/Badge.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { BadgeVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { badgeVariants } from "."
+
+const props = defineProps<PrimitiveProps & {
+  variant?: BadgeVariants["variant"]
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Primitive
+    data-slot="badge"
+    :class="cn(badgeVariants({ variant }), props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,26 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Badge } from "./Badge.vue"
+
+export const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+         "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+export type BadgeVariants = VariantProps<typeof badgeVariants>

package/app/components/ui/button/Button.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "button",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,38 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Button } from "./Button.vue"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
+        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+        "icon": "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>

package/app/components/ui/card/Card.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :class="
+      cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/app/components/ui/card/CardAction.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-action"
+    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/ui/card/CardContent.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-content"
+    :class="cn('px-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/ui/card/CardDescription.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>

package/app/components/ui/card/CardFooter.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/ui/card/CardHeader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-header"
+    :class="cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/ui/card/CardTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h3
+    data-slot="card-title"
+    :class="cn('leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </h3>
+</template>

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

@@ -0,0 +1,7 @@
+export { default as Card } from "./Card.vue"
+export { default as CardAction } from "./CardAction.vue"
+export { default as CardContent } from "./CardContent.vue"
+export { default as CardDescription } from "./CardDescription.vue"
+export { default as CardFooter } from "./CardFooter.vue"
+export { default as CardHeader } from "./CardHeader.vue"
+export { default as CardTitle } from "./CardTitle.vue"

package/app/components/ui/combobox/Combobox.vue

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

package/app/components/ui/combobox/ComboboxAnchor.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxAnchorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ComboboxAnchor, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxAnchor
+    data-slot="combobox-anchor"
+    v-bind="forwarded"
+    :class="cn('w-[200px]', props.class)"
+  >
+    <slot />
+  </ComboboxAnchor>
+</template>

package/app/components/ui/combobox/ComboboxEmpty.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ComboboxEmpty } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ComboboxEmpty
+    data-slot="combobox-empty"
+    v-bind="delegatedProps"
+    :class="cn('py-6 text-center text-sm', props.class)"
+  >
+    <slot />
+  </ComboboxEmpty>
+</template>

package/app/components/ui/combobox/ComboboxGroup.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ComboboxGroup, ComboboxLabel } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes["class"]
+  heading?: string
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ComboboxGroup
+    data-slot="combobox-group"
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground', props.class)"
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>