@thxgg/steward 0.1.0

package/app/components/prd/Viewer.vue

@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { marked } from 'marked'
+import { codeToHtml } from 'shiki'
+import DOMPurify from 'dompurify'
+
+const props = defineProps<{
+  content: string
+}>()
+
+const renderedHtml = ref('')
+const isLoading = ref(true)
+
+// Configure DOMPurify to allow shiki's style attributes
+const purifyConfig = {
+  ADD_TAGS: ['style'],
+  ADD_ATTR: ['style', 'class', 'target', 'rel']
+}
+
+// Configure marked to open links in new tab
+const renderer = new marked.Renderer()
+renderer.link = ({ href, title, text }) => {
+  const titleAttr = title ? ` title="${title}"` : ''
+  return `<a href="${href}"${titleAttr} target="_blank" rel="noopener noreferrer">${text}</a>`
+}
+
+// Custom code block renderer with shiki
+async function highlightCode(code: string, lang: string): Promise<string> {
+  try {
+    return await codeToHtml(code, {
+      lang: lang || 'text',
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark'
+      }
+    })
+  } catch {
+    // Fallback for unsupported languages
+    return `<pre><code class="language-${lang}">${escapeHtml(code)}</code></pre>`
+  }
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+
+// Extract code blocks and process them
+async function renderMarkdown(content: string): Promise<string> {
+  // First pass: extract code blocks and replace with placeholders
+  // Use format that won't be interpreted as markdown formatting
+  const codeBlockRegex = /```(\w*)\n([\s\S]*?)```/g
+  const placeholders: { placeholder: string; lang: string; code: string }[] = []
+  let placeholderIndex = 0
+
+  const contentWithPlaceholders = content.replace(codeBlockRegex, (_, lang, code) => {
+    const placeholder = `CODEBLOCK${placeholderIndex++}PLACEHOLDER`
+    placeholders.push({ placeholder, lang: lang || 'text', code: code.trim() })
+    return placeholder
+  })
+
+  // Parse markdown without code blocks
+  marked.setOptions({
+    renderer,
+    gfm: true,
+    breaks: false
+  })
+
+  let html = await marked.parse(contentWithPlaceholders)
+
+  // Highlight code blocks in parallel
+  const highlightPromises = placeholders.map(async ({ placeholder, lang, code }) => {
+    const highlighted = await highlightCode(code, lang)
+    return { placeholder, highlighted }
+  })
+
+  const results = await Promise.all(highlightPromises)
+
+  // Replace placeholders with highlighted code
+  for (const { placeholder, highlighted } of results) {
+    html = html.replace(`<p>${placeholder}</p>`, highlighted)
+    html = html.replace(placeholder, highlighted)
+  }
+
+  // Sanitize the final HTML to prevent XSS
+  return DOMPurify.sanitize(html, purifyConfig)
+}
+
+// Render on mount and when content changes
+watch(() => props.content, async (newContent) => {
+  if (newContent) {
+    isLoading.value = true
+    try {
+      renderedHtml.value = await renderMarkdown(newContent)
+    } finally {
+      isLoading.value = false
+    }
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <div class="prd-viewer">
+    <div v-if="isLoading" class="flex items-center justify-center py-8">
+      <div class="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+    </div>
+    <div
+      v-else
+      class="prose prose-sm dark:prose-invert max-w-none"
+      v-html="renderedHtml"
+    />
+  </div>
+</template>
+
+<style>
+/* Prose styling for markdown content */
+.prd-viewer .prose {
+  --tw-prose-body: hsl(var(--foreground));
+  --tw-prose-headings: hsl(var(--foreground));
+  --tw-prose-links: hsl(var(--primary));
+  --tw-prose-code: hsl(var(--foreground));
+  --tw-prose-pre-bg: hsl(var(--muted));
+  --tw-prose-quotes: hsl(var(--muted-foreground));
+  --tw-prose-hr: hsl(var(--border));
+}
+
+.prd-viewer .prose h1,
+.prd-viewer .prose h2,
+.prd-viewer .prose h3,
+.prd-viewer .prose h4 {
+  font-weight: 600;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.prd-viewer .prose h1 {
+  font-size: 1.875rem;
+  border-bottom: 1px solid hsl(var(--border));
+  padding-bottom: 0.5rem;
+}
+
+.prd-viewer .prose h2 {
+  font-size: 1.5rem;
+  border-bottom: 1px solid hsl(var(--border));
+  padding-bottom: 0.25rem;
+}
+
+.prd-viewer .prose h3 {
+  font-size: 1.25rem;
+}
+
+.prd-viewer .prose p {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+  line-height: 1.7;
+}
+
+.prd-viewer .prose a {
+  color: hsl(var(--primary));
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.prd-viewer .prose a:hover {
+  opacity: 0.8;
+}
+
+.prd-viewer .prose code:not(pre code) {
+  background: hsl(var(--muted));
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+  font-weight: 500;
+}
+
+.prd-viewer .prose pre {
+  background: hsl(var(--muted));
+  border-radius: 0.5rem;
+  padding: 1rem;
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+/* Shiki code blocks */
+.prd-viewer .prose pre.shiki {
+  background-color: hsl(var(--muted)) !important;
+}
+
+.prd-viewer .prose .shiki code {
+  background: transparent;
+  padding: 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+/* Dark mode shiki */
+.dark .prd-viewer .prose pre.shiki,
+.dark .prd-viewer .prose .shiki {
+  background-color: hsl(var(--muted)) !important;
+}
+
+.dark .prd-viewer .prose .shiki.github-light {
+  display: none !important;
+}
+
+.light .prd-viewer .prose .shiki.github-dark,
+:not(.dark) .prd-viewer .prose .shiki.github-dark {
+  display: none !important;
+}
+
+/* Tables */
+.prd-viewer .prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+}
+
+.prd-viewer .prose th,
+.prd-viewer .prose td {
+  border: 1px solid hsl(var(--border));
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+}
+
+.prd-viewer .prose th {
+  background: hsl(var(--muted));
+  font-weight: 600;
+}
+
+.prd-viewer .prose tr:nth-child(even) {
+  background: hsl(var(--muted) / 0.3);
+}
+
+/* Lists */
+.prd-viewer .prose ul,
+.prd-viewer .prose ol {
+  padding-left: 1.5rem;
+  margin: 0.75em 0;
+}
+
+.prd-viewer .prose li {
+  margin: 0.25em 0;
+}
+
+.prd-viewer .prose ul {
+  list-style-type: disc;
+}
+
+.prd-viewer .prose ol {
+  list-style-type: decimal;
+}
+
+/* Checkboxes (task lists) */
+.prd-viewer .prose input[type="checkbox"] {
+  margin-right: 0.5rem;
+  pointer-events: none;
+}
+
+/* Blockquotes */
+.prd-viewer .prose blockquote {
+  border-left: 4px solid hsl(var(--border));
+  padding-left: 1rem;
+  margin: 1rem 0;
+  color: hsl(var(--muted-foreground));
+  font-style: italic;
+}
+
+/* Horizontal rules */
+.prd-viewer .prose hr {
+  border: none;
+  border-top: 1px solid hsl(var(--border));
+  margin: 2rem 0;
+}
+
+/* Images */
+.prd-viewer .prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+}
+</style>

package/app/components/tasks/Board.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { Task, TaskStatus } from '~/types/task'
+
+const props = defineProps<{
+  tasks: Task[]
+}>()
+
+const emit = defineEmits<{
+  taskClick: [task: Task]
+}>()
+
+// Extract task number from ID (e.g., "task-001" -> 1)
+function getTaskNumber(task: Task): number {
+  const match = task.id.match(/(\d+)$/)
+  const value = match?.[1]
+  return value ? parseInt(value, 10) : 0
+}
+
+// Group tasks by status and sort them
+// Pending/In Progress: lowest number first (ascending)
+// Completed: highest number first (descending)
+const pendingTasks = computed(() =>
+  props.tasks
+    .filter(t => t.status === 'pending')
+    .sort((a, b) => getTaskNumber(a) - getTaskNumber(b))
+)
+
+const inProgressTasks = computed(() =>
+  props.tasks
+    .filter(t => t.status === 'in_progress')
+    .sort((a, b) => getTaskNumber(a) - getTaskNumber(b))
+)
+
+const completedTasks = computed(() =>
+  props.tasks
+    .filter(t => t.status === 'completed')
+    .sort((a, b) => {
+      // Sort by completedAt descending (most recently completed first)
+      const aTime = a.completedAt ? new Date(a.completedAt).getTime() : 0
+      const bTime = b.completedAt ? new Date(b.completedAt).getTime() : 0
+      return bTime - aTime
+    })
+)
+
+// Build a map of task ID -> array of incomplete blocking task IDs
+const blockedByMap = computed(() => {
+  const map = new Map<string, string[]>()
+  const completedIds = new Set(completedTasks.value.map(t => t.id))
+
+  for (const task of props.tasks) {
+    if (task.dependencies.length > 0) {
+      // Filter to only incomplete dependencies
+      const blockers = task.dependencies.filter(depId => !completedIds.has(depId))
+      if (blockers.length > 0) {
+        map.set(task.id, blockers)
+      }
+    }
+  }
+
+  return map
+})
+
+// Column definitions
+const columns: { status: TaskStatus; tasks: typeof pendingTasks }[] = [
+  { status: 'pending', tasks: pendingTasks },
+  { status: 'in_progress', tasks: inProgressTasks },
+  { status: 'completed', tasks: completedTasks }
+]
+
+function handleTaskClick(task: Task) {
+  emit('taskClick', task)
+}
+</script>
+
+<template>
+  <div class="flex h-full gap-3 overflow-x-auto pb-2">
+    <TasksColumn
+      v-for="column in columns"
+      :key="column.status"
+      :status="column.status"
+      :tasks="column.tasks.value"
+      :blocked-by-map="blockedByMap"
+      @task-click="handleTaskClick"
+    />
+  </div>
+</template>

package/app/components/tasks/Card.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { AlertCircle, ArrowUp, ArrowDown, Minus } from 'lucide-vue-next'
+import { Card, CardContent } from '~/components/ui/card'
+import { Badge } from '~/components/ui/badge'
+import type { Task } from '~/types/task'
+
+const props = defineProps<{
+  task: Task
+  /** IDs of tasks that are blocking this one (not completed) */
+  blockedBy?: string[]
+}>()
+
+const emit = defineEmits<{
+  click: [task: Task]
+}>()
+
+// Category badge styling
+const categoryConfig = computed(() => {
+  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 indicator
+const priorityConfig = computed(() => {
+  switch (props.task.priority) {
+    case 'critical':
+      return { icon: ArrowUp, class: 'text-destructive', label: 'Critical' }
+    case 'high':
+      return { icon: ArrowUp, class: 'text-orange-500', label: 'High' }
+    case 'medium':
+      return { icon: Minus, class: 'text-muted-foreground', label: 'Medium' }
+    case 'low':
+      return { icon: ArrowDown, class: 'text-muted-foreground', label: 'Low' }
+    default:
+      return { icon: Minus, class: 'text-muted-foreground', label: 'Unknown' }
+  }
+})
+
+// Check if task is blocked
+const isBlocked = computed(() => {
+  return props.blockedBy && props.blockedBy.length > 0
+})
+
+// Extract task number from ID (e.g., "task-001" -> 1)
+const taskNumber = computed(() => {
+  const match = props.task.id.match(/(\d+)$/)
+  const value = match?.[1]
+  return value ? parseInt(value, 10) : 0
+})
+
+const blockedCount = computed(() => {
+  return props.blockedBy?.length ?? 0
+})
+
+function handleClick() {
+  emit('click', props.task)
+}
+</script>
+
+<template>
+  <Card
+    class="cursor-pointer py-0 gap-0 transition-all hover:shadow-md hover:border-primary/50"
+    :class="{ 'opacity-60': isBlocked }"
+    @click="handleClick"
+  >
+    <CardContent class="p-2.5">
+      <!-- Header: Category + Priority -->
+      <div class="flex items-center justify-between gap-2 mb-1.5">
+        <Badge :variant="categoryConfig.variant" class="text-xs">
+          {{ categoryConfig.label }}
+        </Badge>
+        <component
+          :is="priorityConfig.icon"
+          class="size-4"
+          :class="priorityConfig.class"
+          :title="priorityConfig.label"
+        />
+      </div>
+
+      <!-- Title -->
+      <h4 class="text-sm font-medium leading-snug">
+        <span class="text-muted-foreground">#{{ taskNumber }}</span>
+        {{ task.title }}
+      </h4>
+
+      <!-- Blocked indicator -->
+      <div
+        v-if="isBlocked"
+        class="mt-2 flex items-center gap-1.5 text-xs text-destructive"
+      >
+        <AlertCircle class="size-3.5" />
+        <span>Blocked by {{ blockedCount }} task{{ blockedCount === 1 ? '' : 's' }}</span>
+      </div>
+    </CardContent>
+  </Card>
+</template>

package/app/components/tasks/Column.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { Circle, PlayCircle, CheckCircle2 } from 'lucide-vue-next'
+import type { Task, TaskStatus } from '~/types/task'
+
+const props = defineProps<{
+  status: TaskStatus
+  tasks: Task[]
+  /** Map of task ID to array of blocking task IDs */
+  blockedByMap?: Map<string, string[]>
+}>()
+
+const emit = defineEmits<{
+  taskClick: [task: Task]
+}>()
+
+// Status configuration for styling
+const statusConfig = computed(() => {
+  switch (props.status) {
+    case 'pending':
+      return {
+        label: 'Pending',
+        icon: Circle,
+        headerClass: 'bg-muted/50',
+        iconClass: 'text-muted-foreground'
+      }
+    case 'in_progress':
+      return {
+        label: 'In Progress',
+        icon: PlayCircle,
+        headerClass: 'bg-blue-500/10',
+        iconClass: 'text-blue-500'
+      }
+    case 'completed':
+      return {
+        label: 'Completed',
+        icon: CheckCircle2,
+        headerClass: 'bg-green-500/10',
+        iconClass: 'text-green-500'
+      }
+    default:
+      return {
+        label: props.status,
+        icon: Circle,
+        headerClass: 'bg-muted/50',
+        iconClass: 'text-muted-foreground'
+      }
+  }
+})
+
+function getBlockedBy(taskId: string): string[] {
+  return props.blockedByMap?.get(taskId) ?? []
+}
+
+function handleTaskClick(task: Task) {
+  emit('taskClick', task)
+}
+</script>
+
+<template>
+  <div class="flex h-full min-w-56 flex-1 flex-col overflow-hidden rounded-lg border border-border bg-card">
+    <!-- Column Header -->
+    <div
+      class="flex items-center gap-2 rounded-t-lg border-b border-border px-3 py-2"
+      :class="statusConfig.headerClass"
+    >
+      <component
+        :is="statusConfig.icon"
+        class="size-4"
+        :class="statusConfig.iconClass"
+      />
+      <h3 class="text-sm font-medium">{{ statusConfig.label }}</h3>
+      <span class="ml-auto text-xs text-muted-foreground">
+        {{ tasks.length }}
+      </span>
+    </div>
+
+    <!-- Task Cards -->
+    <div class="scrollbar-hide min-h-0 flex-1 overflow-y-auto p-1.5">
+      <div class="space-y-1.5">
+        <TasksCard
+          v-for="task in tasks"
+          :key="task.id"
+          :task="task"
+          :blocked-by="getBlockedBy(task.id)"
+          @click="handleTaskClick"
+        />
+
+        <!-- Empty state -->
+        <div
+          v-if="tasks.length === 0"
+          class="py-8 text-center text-sm text-muted-foreground"
+        >
+          No tasks
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+</style>