vitepress-theme-pm 0.1.0 → 0.2.0

package/dist/plugin.mjs

@@ -19,6 +19,76 @@ function scanTickets(ticketsDir, dirRelative) {
     };
   });
 }
+function validateTickets(ticketsDir, dirRelative, prefix) {
+  if (!fs.existsSync(ticketsDir)) return [];
+  const files = fs.readdirSync(ticketsDir).filter((f) => f.endsWith(".md"));
+  const issues = [];
+  const entries = files.map((file) => {
+    const raw = fs.readFileSync(path.join(ticketsDir, file), "utf-8");
+    const parsed = matter(raw);
+    const id = Number(parsed.data.id) || 0;
+    const slug = path.basename(file, ".md");
+    return { file, id, slug };
+  });
+  const idCounts = /* @__PURE__ */ new Map();
+  for (const e of entries) {
+    if (e.id > 0) idCounts.set(e.id, (idCounts.get(e.id) || 0) + 1);
+  }
+  for (const e of entries) {
+    const expectedSlug = prefix ? `${prefix}-${e.id}` : String(e.id);
+    const isDuplicate = e.id > 0 && (idCounts.get(e.id) || 0) > 1;
+    const isMissing = e.id <= 0;
+    const isMismatch = e.id > 0 && e.slug !== expectedSlug;
+    if (isDuplicate || isMissing || isMismatch) {
+      issues.push({
+        file: e.file,
+        currentId: e.id,
+        currentSlug: e.slug,
+        fixedId: 0,
+        // assigned below
+        fixedSlug: ""
+        // assigned below
+      });
+    }
+  }
+  const goodIds = /* @__PURE__ */ new Set();
+  for (const e of entries) {
+    const expectedSlug = prefix ? `${prefix}-${e.id}` : String(e.id);
+    const isDuplicate = e.id > 0 && (idCounts.get(e.id) || 0) > 1;
+    const isMissing = e.id <= 0;
+    const isMismatch = e.id > 0 && e.slug !== expectedSlug;
+    if (!isDuplicate && !isMissing && !isMismatch) {
+      goodIds.add(e.id);
+    }
+  }
+  let nextFixId = 1;
+  for (const issue of issues) {
+    while (goodIds.has(nextFixId)) nextFixId++;
+    issue.fixedId = nextFixId;
+    issue.fixedSlug = prefix ? `${prefix}-${nextFixId}` : String(nextFixId);
+    goodIds.add(nextFixId);
+    nextFixId++;
+  }
+  return issues;
+}
+function fixTickets(ticketsDir, dirRelative, prefix) {
+  const issues = validateTickets(ticketsDir, dirRelative, prefix);
+  if (issues.length === 0) return [];
+  for (const issue of issues) {
+    const oldPath = path.join(ticketsDir, issue.file);
+    const newFile = `${issue.fixedSlug}.md`;
+    const newPath = path.join(ticketsDir, newFile);
+    const raw = fs.readFileSync(oldPath, "utf-8");
+    const parsed = matter(raw);
+    parsed.data.id = issue.fixedId;
+    const output = matter.stringify(parsed.content, parsed.data);
+    fs.writeFileSync(newPath, output);
+    if (oldPath !== newPath && fs.existsSync(oldPath)) {
+      fs.unlinkSync(oldPath);
+    }
+  }
+  return issues;
+}
 function getMaxTicketId(ticketsDir) {
   if (!fs.existsSync(ticketsDir)) return 0;
   const files = fs.readdirSync(ticketsDir).filter((f) => f.endsWith(".md"));
@@ -65,6 +135,38 @@ function markdownWriterPlugin() {
         res.setHeader("Content-Type", "application/json");
         res.end(JSON.stringify(tickets));
       });
+      server.middlewares.use("/__vitepress_pm_validate", (req, res) => {
+        const url = new URL(req.url || "/", "http://localhost");
+        const dir = url.searchParams.get("dir") || "tickets";
+        const prefix = url.searchParams.get("prefix") || "";
+        const ticketsDir = path.resolve(srcDir, dir);
+        const issues = validateTickets(ticketsDir, dir, prefix);
+        res.setHeader("Content-Type", "application/json");
+        res.end(JSON.stringify(issues));
+      });
+      server.middlewares.use("/__vitepress_pm_fix", (req, res) => {
+        if (req.method !== "POST") {
+          res.statusCode = 405;
+          res.end("Method not allowed");
+          return;
+        }
+        let body = "";
+        req.on("data", (chunk) => {
+          body += chunk;
+        });
+        req.on("end", () => {
+          try {
+            const { dir, prefix } = JSON.parse(body);
+            const ticketsDir = path.resolve(srcDir, dir || "tickets");
+            const fixed = fixTickets(ticketsDir, dir || "tickets", prefix || "");
+            res.setHeader("Content-Type", "application/json");
+            res.end(JSON.stringify(fixed));
+          } catch (e) {
+            res.statusCode = 500;
+            res.end(String(e));
+          }
+        });
+      });
       server.middlewares.use("/__vitepress_pm_create", (req, res) => {
         if (req.method !== "POST") {
           res.statusCode = 405;
@@ -77,7 +179,7 @@ function markdownWriterPlugin() {
         });
         req.on("end", () => {
           try {
-            const { dir, status, title, priority, tags, body: ticketBody } = JSON.parse(body);
+            const { dir, prefix, status, title, priority, tags, body: ticketBody } = JSON.parse(body);
             const ticketsDir = path.resolve(srcDir, dir || "tickets");
             if (!fs.existsSync(ticketsDir)) {
               fs.mkdirSync(ticketsDir, { recursive: true });
@@ -92,16 +194,17 @@ function markdownWriterPlugin() {
               priority: priority || "medium",
               tags: tags || []
             };
+            const slug = prefix ? `${prefix}-${id}` : String(id);
             const bodyContent = ticketBody ? `
 ${ticketBody}
 ` : "\n";
             const content = matter.stringify(bodyContent, frontmatter);
-            const filePath = path.join(ticketsDir, `${id}.md`);
+            const filePath = path.join(ticketsDir, `${slug}.md`);
             fs.writeFileSync(filePath, content);
             const ticket = {
               ...frontmatter,
               body: ticketBody || "",
-              url: `/${dir || "tickets"}/${id}.html`
+              url: `/${dir || "tickets"}/${slug}.html`
             };
             res.setHeader("Content-Type", "application/json");
             res.end(JSON.stringify(ticket));
@@ -180,5 +283,6 @@ ${ticketBody}
 export {
   getMaxTicketId,
   markdownWriterPlugin,
-  scanTickets
+  scanTickets,
+  validateTickets
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress-theme-pm",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A VitePress theme that adds a kanban board for project management with markdown tickets",
   "type": "module",
   "license": "MIT",

package/src/cli.mjs

@@ -18,7 +18,9 @@ Options:
   --dir <path>       Tickets directory (default: tickets)
   --status <status>  Initial status (default: backlog)
   --priority <pri>   Priority: critical, high, medium, low (default: medium)
-  --tags <tags>      Comma-separated tags`)
+  --tags <tags>      Comma-separated tags
+  --body <text>      Ticket body/description (markdown)
+  --prefix <prefix>  Ticket ID prefix (overrides board.md ticketPrefix)`)
   process.exit(command ? 1 : 0)
 }
 
@@ -41,6 +43,8 @@ function parseArgs(args) {
   let status = 'backlog'
   let priority = 'medium'
   let tags = []
+  let body = ''
+  let prefix = null
 
   let i = 0
   while (i < args.length) {
@@ -48,11 +52,13 @@ function parseArgs(args) {
     if (args[i] === '--status') { status = args[++i]; i++; continue }
     if (args[i] === '--priority') { priority = args[++i]; i++; continue }
     if (args[i] === '--tags') { tags = args[++i].split(',').map(t => t.trim()).filter(Boolean); i++; continue }
+    if (args[i] === '--body') { body = args[++i]; i++; continue }
+    if (args[i] === '--prefix') { prefix = args[++i]; i++; continue }
     if (!title) { title = args[i] }
     i++
   }
 
-  return { title, dir, status, priority, tags }
+  return { title, dir, status, priority, tags, body, prefix }
 }
 
 function readTicketPrefix(siteDir) {
@@ -81,6 +87,7 @@ function createTicket(args) {
   }
 
   const id = getMaxTicketId(ticketsDir) + 1
+  const prefix = opts.prefix !== null ? opts.prefix : readTicketPrefix(path.dirname(ticketsDir))
   const frontmatter = {
     id,
     title: opts.title,
@@ -91,11 +98,12 @@ function createTicket(args) {
     frontmatter.tags = opts.tags
   }
 
-  const content = matter.stringify('\n', frontmatter)
-  const filePath = path.join(ticketsDir, `${id}.md`)
+  const slug = prefix ? `${prefix}-${id}` : String(id)
+  const bodyContent = opts.body ? `\n${opts.body}\n` : '\n'
+  const content = matter.stringify(bodyContent, frontmatter)
+  const filePath = path.join(ticketsDir, `${slug}.md`)
   fs.writeFileSync(filePath, content)
 
-  const prefix = readTicketPrefix(path.dirname(ticketsDir))
   const displayId = prefix ? `${prefix}-${id}` : String(id)
 
   console.log(`Created ${displayId}: ${opts.title}`)

package/src/components/Board.vue

@@ -6,6 +6,8 @@ import { useDragDrop } from '../composables/useDragDrop'
 import { useTicketWriter } from '../composables/useTicketWriter'
 import BoardColumn from './BoardColumn.vue'
 import TicketDetail from './TicketDetail.vue'
+import TicketFixModal from './TicketFixModal.vue'
+import TagFilterDropdown from './TagFilterDropdown.vue'
 import '../styles/board.css'
 
 const { frontmatter } = useData()
@@ -14,16 +16,31 @@ const columns = computed<Column[]>(() => frontmatter.value.columns || [])
 const ticketsDir = computed(() => frontmatter.value.ticketsDir || 'tickets')
 const ticketPrefix = computed(() => frontmatter.value.ticketPrefix || '')
 const defaultColumn = computed(() => frontmatter.value.defaultColumn || (columns.value.length > 0 ? columns.value[0].key : 'backlog'))
+const demo = computed(() => !!frontmatter.value.demo)
 
 const tickets = ref<Ticket[]>([])
 const selectedId = ref<number | null>(null)
 const draftTicket = ref<Ticket | null>(null)
 const filter = ref('')
+const selectedTags = ref<string[]>([])
+
+const allTags = computed(() =>
+  [...new Set(tickets.value.flatMap(t => t.tags || []))].sort()
+)
+const ticketIssues = ref<any[]>([])
+const showFixModal = ref(false)
 
 const { writeTicket } = useTicketWriter()
 
-// Load tickets from dev plugin or static JSON
-if (typeof window !== 'undefined') {
+function fetchValidation() {
+  if (!import.meta.env.DEV) return
+  fetch(`/__vitepress_pm_validate?dir=${encodeURIComponent(ticketsDir.value)}&prefix=${encodeURIComponent(ticketPrefix.value)}`)
+    .then(r => r.ok ? r.json() : [])
+    .then((data: any[]) => { ticketIssues.value = data })
+    .catch(() => { ticketIssues.value = [] })
+}
+
+function loadTickets() {
   const url = import.meta.env.DEV
     ? `/__vitepress_pm_tickets?dir=${encodeURIComponent(ticketsDir.value)}`
     : `${import.meta.env.BASE_URL}__vitepress_pm_tickets/${encodeURIComponent(ticketsDir.value)}.json`
@@ -33,14 +50,41 @@ if (typeof window !== 'undefined') {
       if (r.ok) return r.json()
       throw new Error('not available')
     })
-    .then((data: Ticket[]) => { tickets.value = data })
+    .then((data: Ticket[]) => {
+      tickets.value = data
+      fetchValidation()
+    })
     .catch(() => {})
 }
 
+function onFixed() {
+  showFixModal.value = false
+  if (demo.value) {
+    // Apply fixes in-memory only — don't reload from disk
+    for (const issue of ticketIssues.value) {
+      const ticket = tickets.value.find(t => t.id === issue.currentId || t.id === 0)
+      if (ticket) {
+        ticket.id = issue.fixedId
+        const slug = ticketPrefix.value ? `${ticketPrefix.value}-${issue.fixedId}` : String(issue.fixedId)
+        ticket.url = `/${ticketsDir.value}/${slug}.html`
+      }
+    }
+    ticketIssues.value = []
+  } else {
+    loadTickets()
+  }
+}
+
+// Load tickets from dev plugin or static JSON
+if (typeof window !== 'undefined') {
+  loadTickets()
+}
+
 function updateTicket(id: number, patch: Partial<Ticket>) {
   tickets.value = tickets.value.map(t =>
     t.id === id ? { ...t, ...patch } : t
   )
+  if (demo.value) return
   const ticket = tickets.value.find(t => t.id === id)
   if (ticket?.url) {
     // Don't send url/id to the file writer
@@ -64,13 +108,14 @@ function openNewTicket() {
 }
 
 async function confirmCreate(draft: Ticket) {
-  if (import.meta.env.DEV) {
+  if (import.meta.env.DEV && !demo.value) {
     try {
       const res = await fetch('/__vitepress_pm_create', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           dir: ticketsDir.value,
+          prefix: ticketPrefix.value,
           status: draft.status,
           title: draft.title,
           priority: draft.priority,
@@ -91,14 +136,16 @@ async function confirmCreate(draft: Ticket) {
 
   // Production: create in-memory only
   const maxId = tickets.value.reduce((m, t) => Math.max(m, t.id), 0)
+  const newId = maxId + 1
+  const slug = ticketPrefix.value ? `${ticketPrefix.value}-${newId}` : String(newId)
   const ticket: Ticket = {
-    id: maxId + 1,
+    id: newId,
     title: draft.title,
     status: draft.status,
     priority: draft.priority,
     tags: [...draft.tags],
     body: draft.body,
-    url: '',
+    url: `/${ticketsDir.value}/${slug}.html`,
   }
   tickets.value = [...tickets.value, ticket]
   draftTicket.value = null
@@ -112,13 +159,20 @@ function deleteTicket(id: number) {
 }
 
 const filteredTickets = computed(() => {
-  if (!filter.value) return tickets.value
-  const q = filter.value.toLowerCase()
-  return tickets.value.filter(t =>
-    t.title.toLowerCase().includes(q) ||
-    t.tags.some(tag => tag.includes(q)) ||
-    formatId(t.id).toLowerCase().includes(q)
-  )
+  let result = tickets.value
+  if (filter.value) {
+    const q = filter.value.toLowerCase()
+    result = result.filter(t =>
+      t.title.toLowerCase().includes(q) ||
+      t.tags.some(tag => tag.includes(q)) ||
+      formatId(t.id).toLowerCase().includes(q)
+    )
+  }
+  if (selectedTags.value.length > 0) {
+    const tagSet = new Set(selectedTags.value)
+    result = result.filter(t => t.tags.some(tag => tagSet.has(tag)))
+  }
+  return result
 })
 
 const selectedTicket = computed(() =>
@@ -146,11 +200,20 @@ const { dragOverColumn, handleDragStart, handleDragEnd, handleDragOver, handleDr
       <input
         v-model="filter"
         placeholder="Filter tickets..."
-        style="font-size: 12px; padding: 5px 10px; background: #171923; border: 1px solid #2d3748; border-radius: 5px; color: #e2e8f0; outline: none; width: 200px"
+        style="font-size: 12px; padding: 4px 10px; background: #171923; border: 1px solid #2d3748; border-radius: 5px; color: #e2e8f0; outline: none; width: 200px; height: 28px; box-sizing: border-box"
       >
+      <TagFilterDropdown
+        v-model="selectedTags"
+        :tags="allTags"
+      />
+      <button
+        v-if="ticketIssues.length > 0"
+        style="font-size: 12px; padding: 4px 12px; background: rgba(237, 137, 54, 0.12); border: 1px solid rgba(237, 137, 54, 0.4); border-radius: 5px; color: #ed8936; cursor: pointer; font-weight: 600; line-height: 1.2; height: 28px; box-sizing: border-box"
+        @click="showFixModal = true"
+      >&#9888; Fix {{ ticketIssues.length }} ticket{{ ticketIssues.length === 1 ? '' : 's' }}</button>
       <button
         title="New ticket"
-        style="font-size: 13px; padding: 4px 12px; background: #2d3748; border: 1px solid #4a5568; border-radius: 5px; color: #e2e8f0; cursor: pointer; font-weight: 600; line-height: 1.2"
+        style="font-size: 13px; padding: 4px 12px; background: #2d3748; border: 1px solid #4a5568; border-radius: 5px; color: #e2e8f0; cursor: pointer; font-weight: 600; line-height: 1.2; height: 28px; box-sizing: border-box"
         @click="openNewTicket"
       >+ New</button>
     </div>
@@ -196,5 +259,16 @@ const { dragOverColumn, handleDragStart, handleDragEnd, handleDragOver, handleDr
       @update="updateTicket"
       @delete="deleteTicket"
     />
+
+    <!-- Fix modal -->
+    <TicketFixModal
+      v-if="showFixModal"
+      :issues="ticketIssues"
+      :tickets-dir="ticketsDir"
+      :ticket-prefix="ticketPrefix"
+      :demo="demo"
+      @close="showFixModal = false"
+      @fixed="onFixed"
+    />
   </div>
 </template>

package/src/components/TagFilterDropdown.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+
+const props = defineProps<{
+  tags: string[]
+  modelValue: string[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [tags: string[]]
+}>()
+
+const open = ref(false)
+const search = ref('')
+const dropdownRef = ref<HTMLElement | null>(null)
+
+const filteredTags = computed(() => {
+  if (!search.value) return props.tags
+  const q = search.value.toLowerCase()
+  return props.tags.filter(tag => tag.toLowerCase().includes(q))
+})
+
+function toggle(tag: string) {
+  const selected = new Set(props.modelValue)
+  if (selected.has(tag)) {
+    selected.delete(tag)
+  } else {
+    selected.add(tag)
+  }
+  emit('update:modelValue', [...selected])
+}
+
+function clear() {
+  emit('update:modelValue', [])
+}
+
+function onClickOutside(e: MouseEvent) {
+  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {
+    open.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('mousedown', onClickOutside))
+onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
+</script>
+
+<template>
+  <div ref="dropdownRef" style="position: relative">
+    <button
+      style="font-size: 12px; padding: 4px 12px; background: #2d3748; border: 1px solid #4a5568; border-radius: 5px; color: #e2e8f0; cursor: pointer; font-weight: 600; line-height: 1.2; height: 28px; box-sizing: border-box"
+      @click="open = !open"
+    >
+      Tags<span v-if="modelValue.length > 0"> ({{ modelValue.length }})</span>
+    </button>
+
+    <div
+      v-if="open"
+      style="position: absolute; top: calc(100% + 4px); left: 0; z-index: 100; min-width: 220px; background: #171923; border: 1px solid #2d3748; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); display: flex; flex-direction: column; max-height: 300px"
+    >
+      <div style="padding: 8px; border-bottom: 1px solid #2d3748; display: flex; align-items: center; gap: 6px">
+        <input
+          v-model="search"
+          placeholder="Search tags..."
+          style="flex: 1; font-size: 12px; padding: 4px 8px; background: #0d1117; border: 1px solid #2d3748; border-radius: 4px; color: #e2e8f0; outline: none"
+        >
+        <button
+          v-if="modelValue.length > 0"
+          style="font-size: 11px; background: none; border: none; color: #718096; cursor: pointer; white-space: nowrap"
+          @click="clear"
+        >clear</button>
+      </div>
+
+      <div style="overflow-y: auto; padding: 4px 0">
+        <label
+          v-for="tag in filteredTags"
+          :key="tag"
+          style="display: flex; align-items: center; gap: 8px; padding: 4px 12px; cursor: pointer; font-size: 12px; color: #e2e8f0"
+          @mouseenter="($event.currentTarget as HTMLElement).style.background = '#2d3748'"
+          @mouseleave="($event.currentTarget as HTMLElement).style.background = 'transparent'"
+        >
+          <input
+            type="checkbox"
+            :checked="modelValue.includes(tag)"
+            style="accent-color: #63b3ed"
+            @change="toggle(tag)"
+          >
+          <span style="display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: #2d3748; color: #a0aec0">{{ tag }}</span>
+        </label>
+        <div
+          v-if="filteredTags.length === 0"
+          style="padding: 8px 12px; font-size: 12px; color: #718096"
+        >No tags found</div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/TicketDetail.vue

@@ -41,6 +41,9 @@ const checks = computed(() => countCheckboxes(props.ticket.body))
 const displayId = computed(() =>
   props.ticketPrefix ? `${props.ticketPrefix}-${props.ticket.id}` : String(props.ticket.id)
 )
+const filePath = computed(() =>
+  props.ticket.url ? props.ticket.url.replace(/^\//, '').replace(/\.html$/, '.md') : ''
+)
 
 watch(() => props.ticket.id, () => {
   draft.value = props.ticket.body
@@ -164,9 +167,10 @@ function onBackdropClick(e: MouseEvent) {
             <span style="font-size: 12px; color: #718096; text-transform: uppercase; letter-spacing: 1px; font-weight: 700">Description</span>
             <button
               v-if="!editing"
-              style="font-size: 12px; color: #e6a817; background: none; border: 1px solid rgba(230, 168, 23, 0.27); border-radius: 4px; padding: 3px 12px; cursor: pointer"
+              title="Edit description"
+              style="background: none; border: 1px solid #2d3748; color: #718096; cursor: pointer; font-size: 13px; padding: 4px 8px; border-radius: 4px; line-height: 1"
               @click="draft = ticket.body; editing = true"
-            >Edit</button>
+            >&#9998;</button>
             <div v-else style="display: flex; gap: 6px">
               <button
                 style="font-size: 12px; color: #6bcb6b; background: rgba(107, 203, 107, 0.09); border: 1px solid rgba(107, 203, 107, 0.27); border-radius: 4px; padding: 3px 12px; cursor: pointer"
@@ -231,10 +235,10 @@ function onBackdropClick(e: MouseEvent) {
             <TagEditor :tags="ticket.tags" @add="addTag" @remove="removeTag" />
           </div>
 
-          <!-- Ticket ID -->
-          <div v-if="!createMode" style="margin-bottom: 20px">
-            <label style="display: block; font-size: 11px; color: #718096; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 6px">ID</label>
-            <span style="font-size: 13px; color: #4a5568; font-family: monospace">{{ displayId }}</span>
+          <!-- File path -->
+          <div v-if="!createMode && filePath" style="margin-bottom: 20px">
+            <label style="display: block; font-size: 11px; color: #718096; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 6px">File</label>
+            <span style="font-size: 12px; color: #4a5568; font-family: monospace; word-break: break-all">{{ filePath }}</span>
           </div>
 
           <!-- Create / Delete -->

package/src/components/TicketFixModal.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface TicketIssue {
+  file: string
+  currentId: number
+  currentSlug: string
+  fixedId: number
+  fixedSlug: string
+}
+
+const props = defineProps<{
+  issues: TicketIssue[]
+  ticketsDir: string
+  ticketPrefix: string
+  demo?: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  fixed: []
+}>()
+
+const fixing = ref(false)
+
+async function fix() {
+  fixing.value = true
+  try {
+    if (!props.demo) {
+      const res = await fetch('/__vitepress_pm_fix', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ dir: props.ticketsDir, prefix: props.ticketPrefix }),
+      })
+      if (!res.ok) throw new Error(await res.text())
+    }
+    emit('fixed')
+  } catch (e) {
+    console.error('Failed to fix tickets:', e)
+  } finally {
+    fixing.value = false
+  }
+}
+
+function onBackdropClick(e: MouseEvent) {
+  if ((e.target as HTMLElement).classList.contains('fix-modal-backdrop')) {
+    emit('close')
+  }
+}
+</script>
+
+<template>
+  <div
+    class="fix-modal-backdrop"
+    style="position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px)"
+    @click="onBackdropClick"
+  >
+    <div style="width: 90vw; max-width: 640px; max-height: 80vh; background: #0d1117; border: 1px solid #2d3748; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 48px rgba(0,0,0,0.4)">
+
+      <!-- Header -->
+      <div style="display: flex; align-items: center; padding: 16px 24px; border-bottom: 1px solid #2d3748; background: #171923; gap: 12px">
+        <span style="font-size: 16px; font-weight: 700; color: #ed8936; flex: 1">&#9888; Fix {{ issues.length }} ticket{{ issues.length === 1 ? '' : 's' }}</span>
+        <button
+          style="background: none; border: none; color: #718096; cursor: pointer; font-size: 20px; padding: 4px 8px; line-height: 1"
+          @click="emit('close')"
+        >&times;</button>
+      </div>
+
+      <!-- Issue list -->
+      <div style="flex: 1; overflow-y: auto; padding: 16px 24px">
+        <div
+          v-for="issue in issues"
+          :key="issue.file"
+          style="display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #1a202c"
+        >
+          <div style="flex: 1; min-width: 0">
+            <div style="font-size: 13px; color: #a0aec0; font-family: monospace">
+              {{ issue.currentSlug }} <span style="color: #4a5568">(id: {{ issue.currentId }})</span>
+            </div>
+          </div>
+          <span style="color: #4a5568; font-size: 13px">&rarr;</span>
+          <div style="flex: 1; min-width: 0">
+            <div style="font-size: 13px; color: #6bcb6b; font-family: monospace">
+              {{ issue.fixedSlug }} <span style="color: #4a5568">(id: {{ issue.fixedId }})</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div style="padding: 16px 24px; border-top: 1px solid #2d3748; display: flex; justify-content: flex-end; gap: 8px">
+        <button
+          style="font-size: 13px; color: #718096; background: none; border: 1px solid #2d3748; border-radius: 6px; padding: 6px 16px; cursor: pointer"
+          @click="emit('close')"
+        >Cancel</button>
+        <button
+          :disabled="fixing"
+          style="font-size: 13px; color: #1a202c; background: #ed8936; border: none; border-radius: 6px; padding: 6px 16px; cursor: pointer; font-weight: 600"
+          @click="fix"
+        >{{ fixing ? 'Fixing...' : 'Fix all' }}</button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/plugins/markdownWriter.ts

@@ -33,6 +33,104 @@ export function scanTickets(ticketsDir: string, dirRelative: string): ScannedTic
   })
 }
 
+interface TicketIssue {
+  file: string
+  currentId: number
+  currentSlug: string
+  fixedId: number
+  fixedSlug: string
+}
+
+/** Validate tickets for duplicate IDs, missing IDs, and filename/ID mismatches. */
+export function validateTickets(ticketsDir: string, dirRelative: string, prefix: string): TicketIssue[] {
+  if (!fs.existsSync(ticketsDir)) return []
+
+  const files = fs.readdirSync(ticketsDir).filter(f => f.endsWith('.md'))
+  const issues: TicketIssue[] = []
+
+  // Parse all tickets
+  const entries = files.map(file => {
+    const raw = fs.readFileSync(path.join(ticketsDir, file), 'utf-8')
+    const parsed = matter(raw)
+    const id = Number(parsed.data.id) || 0
+    const slug = path.basename(file, '.md')
+    return { file, id, slug }
+  })
+
+  // Detect duplicate IDs (only non-zero)
+  const idCounts = new Map<number, number>()
+  for (const e of entries) {
+    if (e.id > 0) idCounts.set(e.id, (idCounts.get(e.id) || 0) + 1)
+  }
+
+  // Check each ticket for issues
+  for (const e of entries) {
+    const expectedSlug = prefix ? `${prefix}-${e.id}` : String(e.id)
+    const isDuplicate = e.id > 0 && (idCounts.get(e.id) || 0) > 1
+    const isMissing = e.id <= 0
+    const isMismatch = e.id > 0 && e.slug !== expectedSlug
+
+    if (isDuplicate || isMissing || isMismatch) {
+      issues.push({
+        file: e.file,
+        currentId: e.id,
+        currentSlug: e.slug,
+        fixedId: 0, // assigned below
+        fixedSlug: '', // assigned below
+      })
+    }
+  }
+
+  // Assign fresh sequential IDs to issues
+  // Collect IDs that are NOT problematic (keep them)
+  const goodIds = new Set<number>()
+  for (const e of entries) {
+    const expectedSlug = prefix ? `${prefix}-${e.id}` : String(e.id)
+    const isDuplicate = e.id > 0 && (idCounts.get(e.id) || 0) > 1
+    const isMissing = e.id <= 0
+    const isMismatch = e.id > 0 && e.slug !== expectedSlug
+    if (!isDuplicate && !isMissing && !isMismatch) {
+      goodIds.add(e.id)
+    }
+  }
+
+  let nextFixId = 1
+  for (const issue of issues) {
+    while (goodIds.has(nextFixId)) nextFixId++
+    issue.fixedId = nextFixId
+    issue.fixedSlug = prefix ? `${prefix}-${nextFixId}` : String(nextFixId)
+    goodIds.add(nextFixId)
+    nextFixId++
+  }
+
+  return issues
+}
+
+/** Fix all ticket issues by rewriting frontmatter IDs and renaming files. */
+function fixTickets(ticketsDir: string, dirRelative: string, prefix: string): TicketIssue[] {
+  const issues = validateTickets(ticketsDir, dirRelative, prefix)
+  if (issues.length === 0) return []
+
+  for (const issue of issues) {
+    const oldPath = path.join(ticketsDir, issue.file)
+    const newFile = `${issue.fixedSlug}.md`
+    const newPath = path.join(ticketsDir, newFile)
+
+    const raw = fs.readFileSync(oldPath, 'utf-8')
+    const parsed = matter(raw)
+    parsed.data.id = issue.fixedId
+    const output = matter.stringify(parsed.content, parsed.data)
+
+    // Write to new path first, then remove old if different
+    fs.writeFileSync(newPath, output)
+    if (oldPath !== newPath && fs.existsSync(oldPath)) {
+      fs.unlinkSync(oldPath)
+    }
+  }
+
+  return issues
+}
+
 /** Scan a tickets directory and return the highest numeric `id` found in frontmatter. */
 export function getMaxTicketId(ticketsDir: string): number {
   if (!fs.existsSync(ticketsDir)) return 0
@@ -89,6 +187,42 @@ export function markdownWriterPlugin(): Plugin {
         res.end(JSON.stringify(tickets))
       })
 
+      // Validate tickets for issues
+      server.middlewares.use('/__vitepress_pm_validate', (req, res) => {
+        const url = new URL(req.url || '/', 'http://localhost')
+        const dir = url.searchParams.get('dir') || 'tickets'
+        const prefix = url.searchParams.get('prefix') || ''
+        const ticketsDir = path.resolve(srcDir, dir)
+
+        const issues = validateTickets(ticketsDir, dir, prefix)
+        res.setHeader('Content-Type', 'application/json')
+        res.end(JSON.stringify(issues))
+      })
+
+      // Fix ticket issues (reassign IDs, rename files)
+      server.middlewares.use('/__vitepress_pm_fix', (req, res) => {
+        if (req.method !== 'POST') {
+          res.statusCode = 405
+          res.end('Method not allowed')
+          return
+        }
+
+        let body = ''
+        req.on('data', (chunk: string) => { body += chunk })
+        req.on('end', () => {
+          try {
+            const { dir, prefix } = JSON.parse(body)
+            const ticketsDir = path.resolve(srcDir, dir || 'tickets')
+            const fixed = fixTickets(ticketsDir, dir || 'tickets', prefix || '')
+            res.setHeader('Content-Type', 'application/json')
+            res.end(JSON.stringify(fixed))
+          } catch (e) {
+            res.statusCode = 500
+            res.end(String(e))
+          }
+        })
+      })
+
       // Create a new ticket (server-assigned sequential ID)
       server.middlewares.use('/__vitepress_pm_create', (req, res) => {
         if (req.method !== 'POST') {
@@ -101,7 +235,7 @@ export function markdownWriterPlugin(): Plugin {
         req.on('data', chunk => { body += chunk })
         req.on('end', () => {
           try {
-            const { dir, status, title, priority, tags, body: ticketBody } = JSON.parse(body)
+            const { dir, prefix, status, title, priority, tags, body: ticketBody } = JSON.parse(body)
             const ticketsDir = path.resolve(srcDir, dir || 'tickets')
 
             if (!fs.existsSync(ticketsDir)) {
@@ -121,15 +255,16 @@ export function markdownWriterPlugin(): Plugin {
               tags: tags || [],
             }
 
+            const slug = prefix ? `${prefix}-${id}` : String(id)
             const bodyContent = ticketBody ? `\n${ticketBody}\n` : '\n'
             const content = matter.stringify(bodyContent, frontmatter)
-            const filePath = path.join(ticketsDir, `${id}.md`)
+            const filePath = path.join(ticketsDir, `${slug}.md`)
             fs.writeFileSync(filePath, content)
 
             const ticket = {
               ...frontmatter,
               body: ticketBody || '',
-              url: `/${dir || 'tickets'}/${id}.html`,
+              url: `/${dir || 'tickets'}/${slug}.html`,
             }
 
             res.setHeader('Content-Type', 'application/json')