@pimzino/claude-code-spec-workflow
Version:
Automated workflows for Claude Code. Includes spec-driven development (Requirements → Design → Tasks → Implementation) with intelligent orchestration, optional steering documents and streamlined bug fix workflow (Report → Analyze → Fix → Verify). We have
875 lines (816 loc) • 39.9 kB
HTML
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spec Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
// Suppress Tailwind CDN production warning for development dashboard
if (typeof tailwind !== 'undefined') {
tailwind.config = { devtools: { enabled: false } };
}
</script>
<script src="https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.iife.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
[v-cloak] {
display: none;
}
.task-indent-1 {
padding-left: 1.5rem;
}
.task-indent-2 {
padding-left: 3rem;
}
.task-indent-3 {
padding-left: 4.5rem;
}
/* EARS keyword syntax highlighting */
.ears-keyword {
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 0.875em;
font-weight: 500;
color: rgb(245 158 11);
}
.dark .ears-keyword {
color: rgb(251 191 36);
}
/* Remove focus ring from markdown preview buttons */
.markdown-preview-btn:focus {
outline: none;
}
/* GitHub-style Markdown content */
.markdown-content {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;
color: #24292f;
}
.dark .markdown-content {
color: #c9d1d9;
}
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
margin-top: 24px;
margin-bottom: 16px;
font-weight: 600;
line-height: 1.25;
color: #24292f;
}
.dark .markdown-content h1,
.dark .markdown-content h2,
.dark .markdown-content h3,
.dark .markdown-content h4,
.dark .markdown-content h5,
.dark .markdown-content h6 {
color: #c9d1d9;
}
.markdown-content h1 {
font-size: 2em;
padding-bottom: 0.3em;
border-bottom: 1px solid #d0d7de;
}
.dark .markdown-content h1 {
border-bottom-color: #21262d;
}
.markdown-content h2 {
font-size: 1.5em;
padding-bottom: 0.3em;
border-bottom: 1px solid #d0d7de;
}
.dark .markdown-content h2 {
border-bottom-color: #21262d;
}
.markdown-content h3 { font-size: 1.25em; }
.markdown-content h4 { font-size: 1em; }
.markdown-content h5 { font-size: 0.875em; }
.markdown-content h6 { font-size: 0.85em; color: #57606a; }
.dark .markdown-content h6 { color: #8b949e; }
.markdown-content p {
margin-top: 0;
margin-bottom: 16px;
}
.markdown-content code {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
white-space: break-spaces;
background-color: rgba(175, 184, 193, 0.2);
border-radius: 6px;
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}
.dark .markdown-content code {
background-color: rgba(110, 118, 129, 0.4);
}
.markdown-content pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: #f6f8fa;
border-radius: 6px;
margin-top: 0;
margin-bottom: 16px;
}
.dark .markdown-content pre {
background-color: #161b22;
}
.markdown-content pre code {
display: inline;
max-width: auto;
padding: 0;
margin: 0;
overflow: visible;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
font-size: 100%;
}
.markdown-content ul,
.markdown-content ol {
margin-top: 0;
margin-bottom: 16px;
padding-left: 2em;
}
.markdown-content ul ul,
.markdown-content ul ol,
.markdown-content ol ol,
.markdown-content ol ul {
margin-bottom: 0;
}
.markdown-content li {
margin-top: 0.25em;
}
.markdown-content li + li {
margin-top: 0.25em;
}
.markdown-content blockquote {
padding: 0 1em;
color: #57606a;
border-left: 0.25em solid #d0d7de;
margin: 0 0 16px 0;
}
.dark .markdown-content blockquote {
color: #8b949e;
border-left-color: #3b434b;
}
.markdown-content blockquote > :first-child {
margin-top: 0;
}
.markdown-content blockquote > :last-child {
margin-bottom: 0;
}
.markdown-content a {
color: #0969da;
text-decoration: none;
font-weight: 500;
}
.dark .markdown-content a {
color: #58a6ff;
}
.markdown-content a:hover {
text-decoration: underline;
}
.markdown-content table {
display: block;
width: max-content;
max-width: 100%;
overflow: auto;
border-spacing: 0;
border-collapse: collapse;
margin-top: 0;
margin-bottom: 16px;
}
.markdown-content table tr {
background-color: #ffffff;
border-top: 1px solid #d1d9e0;
}
.dark .markdown-content table tr {
background-color: #0d1117;
border-top-color: #30363d;
}
.markdown-content table tr:nth-child(2n) {
background-color: #f6f8fa;
}
.dark .markdown-content table tr:nth-child(2n) {
background-color: #161b22;
}
.markdown-content table th,
.markdown-content table td {
padding: 6px 13px;
border: 1px solid #d0d7de;
}
.dark .markdown-content table th,
.dark .markdown-content table td {
border-color: #30363d;
}
.markdown-content table th {
font-weight: 600;
}
.markdown-content hr {
height: 0.25em;
padding: 0;
margin: 24px 0;
background-color: #d0d7de;
border: 0;
}
.dark .markdown-content hr {
background-color: #21262d;
}
.markdown-content img {
max-width: 100%;
box-sizing: content-box;
background-color: #ffffff;
}
.dark .markdown-content img {
background-color: #0d1117;
}
.markdown-content > *:first-child {
margin-top: 0 ;
}
.markdown-content > *:last-child {
margin-bottom: 0 ;
}
</style>
<script>
// Configure Tailwind dark mode
tailwind.config = {
darkMode: 'class',
};
</script>
</head>
<body class="h-full bg-gray-50 dark:bg-gray-900 transition-colors">
<div id="app" v-cloak class="h-full" @vue:mounted="init()">
<div class="min-h-full">
<!-- Header -->
<header
class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 transition-colors"
>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-3">
<div class="flex items-center gap-8">
<div class="flex items-center">
<img src="/claude-icon.svg" alt="Claude" class="w-6 h-6 mr-2" />
<h1 class="text-xl font-bold text-gray-900 dark:text-white">{{ projectName }}</h1>
<a
v-if="branch && githubUrl"
:href="githubUrl"
target="_blank"
class="ml-3 inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
>
<i class="fas fa-code-branch mr-1"></i>
{{ branch }}
</a>
<span
v-else-if="branch"
class="ml-3 inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
>
<i class="fas fa-code-branch mr-1"></i>
{{ branch }}
</span>
</div>
<div class="flex items-center gap-4 text-sm">
<div class="flex items-center gap-1.5"
:title="steeringStatus && steeringStatus.exists ? (steeringStatus.hasProduct && steeringStatus.hasTech && steeringStatus.hasStructure ? 'Steering documents complete' : 'Steering documents incomplete') : 'No steering documents'">
<i class="fas fa-compass"
:class="steeringStatus && steeringStatus.hasProduct && steeringStatus.hasTech && steeringStatus.hasStructure ? 'text-green-500' : 'text-gray-400 dark:text-gray-500'"></i>
<span class="hidden md:inline text-gray-600 dark:text-gray-400">Steering:</span>
<i class="fas fa-sm"
:class="steeringStatus && steeringStatus.hasProduct && steeringStatus.hasTech && steeringStatus.hasStructure ? 'fa-check text-green-600 dark:text-green-400' : 'fa-times text-red-500 dark:text-red-400'"></i>
</div>
<div class="flex items-center gap-1.5">
<i class="fas fa-file-alt text-gray-400 dark:text-gray-500"></i>
<span class="hidden md:inline text-gray-600 dark:text-gray-400">Specs:</span>
<span class="font-semibold text-gray-900 dark:text-white"
>{{ specs.length }}</span
>
</div>
<div class="flex items-center gap-1.5">
<i class="fas fa-spinner text-indigo-400 dark:text-indigo-500"></i>
<span class="hidden md:inline text-gray-600 dark:text-gray-400"
>In Progress:</span
>
<span class="font-semibold text-indigo-600 dark:text-indigo-400"
>{{ specsInProgress }}</span
>
</div>
<div class="flex items-center gap-1.5">
<i class="fas fa-check-circle text-green-400 dark:text-green-500"></i>
<span class="hidden md:inline text-gray-600 dark:text-gray-400"
>Completed:</span
>
<span class="font-semibold text-green-600 dark:text-green-400"
>{{ specsCompleted }}</span
>
</div>
<div class="flex items-center gap-1.5">
<i class="fas fa-tasks text-gray-400 dark:text-gray-500"></i>
<span class="hidden md:inline text-gray-600 dark:text-gray-400">Tasks:</span>
<span class="font-semibold text-gray-900 dark:text-white"
>{{ totalTasks }}</span
>
</div>
<div v-if="bugs.length > 0" class="flex items-center gap-1.5">
<i class="fas fa-bug text-gray-400 dark:text-gray-500"></i>
<span class="hidden md:inline text-gray-600 dark:text-gray-400">Bugs:</span>
<span class="font-semibold text-gray-900 dark:text-white"
>{{ bugs.length }}</span
>
</div>
<div v-if="bugsInProgress > 0" class="flex items-center gap-1.5">
<span class="hidden md:inline text-gray-600 dark:text-gray-400"
>Active:</span
>
<span class="font-semibold text-orange-600 dark:text-orange-400"
>{{ bugsInProgress }}</span
>
</div>
<div v-if="bugsResolved > 0" class="flex items-center gap-1.5">
<span class="hidden md:inline text-gray-600 dark:text-gray-400"
>Resolved:</span
>
<span class="font-semibold text-green-600 dark:text-green-400"
>{{ bugsResolved }}</span
>
</div>
</div>
</div>
<div class="flex items-center gap-3">
<!-- Theme toggle -->
<button
@click="cycleTheme"
class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
title="Toggle theme"
>
<svg
v-if="theme === 'light'"
class="w-5 h-5 text-gray-600 dark:text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
></path>
</svg>
<svg
v-else-if="theme === 'dark'"
class="w-5 h-5 text-gray-600 dark:text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
></path>
</svg>
<svg
v-else
class="w-5 h-5 text-gray-600 dark:text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
></path>
</svg>
</button>
<i
class="fas fa-circle text-xs"
:class="connected ? 'text-green-500' : 'text-red-500'"
:title="connected ? 'Connected' : 'Disconnected'"
></i>
<button
v-if="!connected"
@click="refresh"
class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
title="Refresh"
>
<i class="fas fa-sync-alt"></i>
</button>
</div>
</div>
</div>
</header>
<!-- Main content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<!-- Steering Documents Warning (Only shown when incomplete) -->
<div v-if="steeringStatus && (!steeringStatus.exists || !steeringStatus.hasProduct || !steeringStatus.hasTech || !steeringStatus.hasStructure)"
class="mb-6 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-exclamation-triangle text-yellow-400"></i>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
Steering Documents Incomplete
</h3>
<div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
<p>
Run <button @click.stop="copyCommand('/spec-steering-setup', $event)" class="inline-flex items-center gap-1 bg-yellow-100 dark:bg-yellow-800 px-1.5 py-0.5 rounded text-xs font-mono hover:bg-yellow-200 dark:hover:bg-yellow-700 transition-colors"><i class="fas fa-copy"></i>/spec-steering-setup</button> to create missing steering documents:
</p>
<ul class="list-disc list-inside mt-1">
<li v-if="!steeringStatus.hasProduct">Product vision and goals (product.md)</li>
<li v-if="!steeringStatus.hasTech">Technology stack and architecture (tech.md)</li>
<li v-if="!steeringStatus.hasStructure">Project structure and patterns (structure.md)</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Specs list -->
<div class="bg-white dark:bg-gray-800 shadow rounded-lg transition-colors">
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<div
v-for="spec in specs"
:key="spec.name"
:data-spec-name="spec.name"
class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all"
:class="spec.status === 'completed' ? 'opacity-75' : ''"
>
<div
class="flex items-center justify-between p-6 cursor-pointer"
@click="selectedSpec = selectedSpec?.name === spec.name ? null : spec"
>
<div class="flex-1">
<h3 class="text-lg font-medium transition-all"
:class="spec.status === 'completed' ? 'text-gray-600 dark:text-gray-400' : 'text-gray-900 dark:text-white'">
{{ spec.displayName }}
</h3>
<div
class="mt-1 flex items-center space-x-4 text-sm"
:class="spec.status === 'completed' ? 'text-gray-400 dark:text-gray-500' : 'text-gray-500 dark:text-gray-400'"
>
<span>
<i class="fas fa-clock mr-1"></i>
{{ formatDate(spec.lastModified) }}
</span>
<span v-if="spec.tasks">
<i class="fas fa-tasks mr-1"></i>
{{ spec.tasks.completed }} / {{ spec.tasks.total }} tasks
</span>
<a
v-if="branch && githubUrl"
:href="githubUrl"
target="_blank"
class="flex items-center hover:text-gray-700 dark:hover:text-gray-200"
>
<i class="fas fa-code-branch mr-1"></i>
{{ branch }}
</a>
<span
v-else-if="branch"
class="flex items-center"
>
<i class="fas fa-code-branch mr-1"></i>
{{ branch }}
</span>
</div>
</div>
<div class="ml-4 flex items-center gap-3">
<span
class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium"
:class="getStatusClass(spec.status)"
>
{{ getStatusLabel(spec.status) }}
</span>
<i
class="fas fa-chevron-down text-gray-400 transition-transform duration-200"
:class="selectedSpec?.name === spec.name ? 'rotate-180' : ''"
></i>
</div>
</div>
<!-- Progress bar (outside clickable area) -->
<div v-if="spec.tasks && spec.tasks.total > 0" class="px-6 pb-3">
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div
class="bg-indigo-600 dark:bg-indigo-500 h-2 rounded-full transition-all duration-300"
:style="`width: ${(spec.tasks.completed / spec.tasks.total) * 100}%`"
></div>
</div>
</div>
<!-- Expanded details (outside clickable area) -->
<div
v-if="selectedSpec?.name === spec.name"
class="px-6 pb-6 pt-4 border-t border-gray-200 dark:border-gray-700"
>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
<div>
<h4 class="font-medium text-gray-900 dark:text-white mb-2">
<i class="fas fa-clipboard-list mr-1"></i> Requirements
<button
v-if="spec.requirements"
@click.stop="viewMarkdown(spec.name, 'requirements')"
class="markdown-preview-btn ml-2 text-xs text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300"
title="View source"
>
<i class="fas fa-search"></i> <span class="font-mono text-[10px] opacity-75">.md</span>
</button>
</h4>
<div
v-if="spec.requirements"
class="text-sm text-gray-600 dark:text-gray-400"
>
<p>{{ spec.requirements.userStories }} user stories</p>
<p v-if="spec.requirements.content && spec.requirements.content.length > 0" class="mt-1">
{{ spec.requirements.content.length }} requirements
</p>
<p class="flex items-center mt-1">
<i
class="fas mr-1"
:class="spec.requirements.approved ? 'fa-check-circle text-green-500' : 'fa-clock text-yellow-500'"
></i>
{{ spec.requirements.approved ? 'Approved' : 'Pending approval' }}
</p>
<!-- Jump to requirement list -->
<div v-if="spec.requirements.content && spec.requirements.content.length > 0" class="mt-2 space-y-1">
<a v-for="req in spec.requirements.content.slice(0, 5)"
:key="req.id"
href="#"
@click.prevent="scrollToRequirement(req.id)"
class="block text-xs text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 truncate">
{{ req.id }}: {{ req.title }}
</a>
<span v-if="spec.requirements.content.length > 5" class="text-xs text-gray-500 dark:text-gray-400">
and {{ spec.requirements.content.length - 5 }} more...
</span>
</div>
</div>
<p v-else class="text-sm text-gray-400 dark:text-gray-500">Not created</p>
</div>
<div>
<h4 class="font-medium text-gray-900 dark:text-white mb-2">
<i class="fas fa-drafting-compass mr-1"></i> Design
<button
v-if="spec.design"
@click.stop="viewMarkdown(spec.name, 'design')"
class="markdown-preview-btn ml-2 text-xs text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300"
title="View source"
>
<i class="fas fa-search"></i> <span class="font-mono text-[10px] opacity-75">.md</span>
</button>
</h4>
<div v-if="spec.design" class="text-sm text-gray-600 dark:text-gray-400">
<p class="flex items-center">
<i
class="fas mr-1"
:class="spec.design.approved ? 'fa-check-circle text-green-500' : 'fa-clock text-yellow-500'"
></i>
{{ spec.design.approved ? 'Approved' : 'Pending approval' }}
<i
class="fas ml-2"
:class="spec.design.hasCodeReuseAnalysis ? 'fa-check-circle text-green-500' : 'fa-times-circle text-red-500'"
></i>
<span class="ml-1">{{ spec.design.hasCodeReuseAnalysis ? 'Has code reuse analysis' : 'No code reuse analysis' }}</span>
</p>
</div>
<p v-else class="text-sm text-gray-400 dark:text-gray-500">Not created</p>
</div>
<div>
<h4 class="font-medium text-gray-900 dark:text-white mb-2">
<i class="fas fa-tasks mr-1"></i> Tasks
<button
v-if="spec.tasks"
@click.stop="viewMarkdown(spec.name, 'tasks')"
class="markdown-preview-btn ml-2 text-xs text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300"
title="View source"
>
<i class="fas fa-search"></i> <span class="font-mono text-[10px] opacity-75">.md</span>
</button>
</h4>
<div v-if="spec.tasks" class="text-sm text-gray-600 dark:text-gray-400">
<p>{{ spec.tasks.total }} total tasks</p>
<p class="flex items-center mt-1">
<i
class="fas mr-1"
:class="spec.tasks.approved ? 'fa-check-circle text-green-500' : 'fa-clock text-yellow-500'"
></i>
{{ spec.tasks.approved ? 'Approved' : 'Pending approval' }}
</p>
</div>
<p v-else class="text-sm text-gray-400 dark:text-gray-500">Not created</p>
</div>
</div>
<!-- Requirements Details -->
<div v-if="spec.requirements && spec.requirements.content && spec.requirements.content.length > 0" class="mt-4">
<h4 class="font-medium text-gray-700 dark:text-gray-300 mb-3">
<i class="fas fa-list-check mr-1"></i> Requirements Details
</h4>
<div class="space-y-4">
<div v-for="req in spec.requirements.content" :key="req.id"
:id="'requirement-' + req.id"
class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
<div class="mb-2">
<span class="text-sm font-semibold text-gray-600 dark:text-gray-400">{{ req.id }}:</span>
<span class="text-sm font-medium text-gray-900 dark:text-white ml-1">{{ req.title }}</span>
</div>
<div v-if="req.userStory" class="text-sm text-gray-600 dark:text-gray-400 mb-3 italic" v-html="formatUserStory(req.userStory)">
</div>
<div v-if="req.acceptanceCriteria.length > 0" class="space-y-2">
<div v-for="(criteria, index) in req.acceptanceCriteria" :key="index"
class="flex items-start">
<div class="flex-1">
<span v-html="formatAcceptanceCriteria(criteria)"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Task list -->
<div v-if="spec.tasks && spec.tasks.taskList.length > 0" class="mt-4">
<div class="flex items-center justify-between mb-2">
<h4 class="font-medium text-gray-700 dark:text-gray-300">
Task Breakdown
</h4>
<button
v-if="getCompletedTaskCount(spec) > 0"
@click.stop="toggleCompletedTasks(spec.name)"
class="text-xs text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 flex items-center gap-1"
>
<i class="fas" :class="areCompletedTasksCollapsed(spec.name) ? 'fa-eye' : 'fa-eye-slash'"></i>
<span>{{ areCompletedTasksCollapsed(spec.name) ? 'Show' : 'Hide' }} {{ getCompletedTaskCount(spec) }} completed</span>
</button>
</div>
<div class="space-y-1">
<div
v-for="task in getVisibleTasks(spec)"
:key="task.id"
class="flex items-start p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-opacity"
:class="{
'bg-yellow-50 dark:bg-yellow-900/50 border-2 border-yellow-500 dark:border-yellow-400': spec.tasks.inProgress === task.id,
'opacity-60': task.completed
}"
>
<i
class="fas mt-0.5 mr-2"
:class="task.completed ? 'fa-check-square text-green-500' : 'fa-square text-gray-400'"
></i>
<div class="flex-1">
<div class="flex items-center">
<span class="font-medium text-sm"
:class="task.completed ? 'text-gray-500 dark:text-gray-500 line-through' : 'text-gray-900 dark:text-gray-200'"
>Task {{ task.id }}:</span
>
<span class="ml-2 text-sm"
:class="task.completed ? 'text-gray-500 dark:text-gray-500 line-through' : 'text-gray-700 dark:text-gray-300'"
>{{ task.description }}</span
>
<button
v-if="!task.completed"
@click.stop="copyTaskCommand(spec.name, task.id, $event)"
class="ml-2 text-xs text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 flex items-center gap-1"
:title="`Copy command: /spec-execute ${spec.name} ${task.id}`"
>
<i class="fas fa-copy"></i>
<span>/spec-execute</span>
</button>
</div>
<div
v-if="task.requirements.length > 0"
class="text-xs text-gray-500 dark:text-gray-400 mt-1"
>
Requirements: {{ task.requirements.join(', ') }}
</div>
<div
v-if="task.leverage"
class="text-xs text-blue-600 dark:text-blue-400 mt-1"
>
<i class="fas fa-screwdriver mr-1"></i> Leverage: {{ task.leverage }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bugs Section -->
<div v-if="bugs.length > 0" class="mt-6">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
<i class="fas fa-bug mr-2"></i>Bug Tracking
</h2>
<div class="bg-white dark:bg-gray-800 shadow rounded-lg transition-colors">
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<div
v-for="bug in bugs"
:key="bug.name"
:data-bug-name="bug.name"
class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all p-4"
>
<div class="flex items-start justify-between">
<div class="flex-1">
<h3 class="text-base font-medium text-gray-900 dark:text-white">
{{ bug.displayName }}
</h3>
<!-- Bug Status -->
<div class="mt-2 flex items-center gap-4 text-sm">
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
:class="{
'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200': bug.status === 'reported',
'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200': bug.status === 'analyzing',
'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200': bug.status === 'fixing',
'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200': bug.status === 'verifying',
'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200': bug.status === 'resolved'
}"
>
{{ bug.status }}
</span>
<span v-if="bug.report?.severity"
class="inline-flex items-center text-xs"
:class="{
'text-red-600 dark:text-red-400': bug.report.severity === 'critical',
'text-orange-600 dark:text-orange-400': bug.report.severity === 'high',
'text-yellow-600 dark:text-yellow-400': bug.report.severity === 'medium',
'text-gray-600 dark:text-gray-400': bug.report.severity === 'low'
}"
>
<i class="fas fa-exclamation-circle mr-1"></i>
{{ bug.report.severity }}
</span>
</div>
<!-- Bug Documents -->
<div class="mt-3 flex items-center gap-3">
<button
v-if="bug.report?.exists"
@click="viewBugMarkdown(bug.name, 'report')"
class="text-sm text-blue-600 dark:text-blue-400 hover:underline"
>
<i class="fas fa-file-alt mr-1"></i>Report
</button>
<button
v-if="bug.analysis?.exists"
@click="viewBugMarkdown(bug.name, 'analysis')"
class="text-sm text-blue-600 dark:text-blue-400 hover:underline"
>
<i class="fas fa-search mr-1"></i>Analysis
</button>
<button
v-if="bug.verification?.exists"
@click="viewBugMarkdown(bug.name, 'verification')"
class="text-sm text-blue-600 dark:text-blue-400 hover:underline"
>
<i class="fas fa-check-circle mr-1"></i>Verification
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Markdown Preview Modal -->
<div v-if="markdownPreview.show" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50" @click.self="closeMarkdownPreview()" @keydown.esc="closeMarkdownPreview()">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] flex flex-col" @click.stop>
<!-- Modal Header -->
<div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">
<i class="fas fa-file-alt mr-2"></i>{{ markdownPreview.title }}
</h3>
<button
@click="closeMarkdownPreview()"
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
>
<i class="fas fa-times text-xl"></i>
</button>
</div>
<!-- Modal Content -->
<div class="flex-1 overflow-y-auto p-6">
<div v-if="markdownPreview.loading" class="flex items-center justify-center py-12">
<i class="fas fa-spinner fa-spin text-2xl text-gray-400"></i>
</div>
<div v-else class="prose dark:prose-invert max-w-none">
<div v-html="renderMarkdown(markdownPreview.content)" class="markdown-content"></div>
</div>
</div>
</div>
</div>
<script src="/shared-components.js"></script>
<script src="/app.js"></script>
</body>
</html>