diff --git a/src/components/DynamicPropertiesPanel.tsx b/src/components/DynamicPropertiesPanel.tsx
new file mode 100644
index 00000000..b3aab1d3
--- /dev/null
+++ b/src/components/DynamicPropertiesPanel.tsx
@@ -0,0 +1,266 @@
+import { useMemo, useState, useCallback } from 'react'
+import type { VaultEntry } from '../types'
+import type { FrontmatterValue } from './Inspector'
+import type { ParsedFrontmatter } from '../utils/frontmatter'
+import { EditableValue, EditableList } from './EditableValue'
+import { Button } from '@/components/ui/button'
+
+const STATUS_STYLES: Record<string, { bg: string; color: string }> = {
+  Active: { bg: 'var(--accent-green-light)', color: 'var(--accent-green)' },
+  Done: { bg: 'var(--accent-blue-light)', color: 'var(--accent-blue)' },
+  Paused: { bg: 'var(--accent-yellow-light)', color: 'var(--accent-yellow)' },
+  Archived: { bg: 'var(--accent-blue-light)', color: 'var(--muted-foreground)' },
+  Dropped: { bg: 'var(--accent-red-light)', color: 'var(--accent-red)' },
+  Open: { bg: 'var(--accent-green-light)', color: 'var(--accent-green)' },
+  Closed: { bg: 'var(--accent-blue-light)', color: 'var(--muted-foreground)' },
+  'Not started': { bg: 'var(--accent-blue-light)', color: 'var(--muted-foreground)' },
+  Draft: { bg: 'var(--accent-yellow-light)', color: 'var(--accent-yellow)' },
+  Mixed: { bg: 'var(--accent-yellow-light)', color: 'var(--accent-yellow)' },
+}
+
+const DEFAULT_STATUS_STYLE = { bg: 'var(--accent-blue-light)', color: 'var(--muted-foreground)' }
+
+// Keys that are relationships (contain wikilinks)
+export const RELATIONSHIP_KEYS = new Set([
+  'Belongs to', 'Related to', 'Events', 'Has Data', 'Owner',
+  'Advances', 'Parent', 'Children', 'Has', 'Notes',
+])
+
+// Keys to skip showing in Properties
+const SKIP_KEYS = new Set(['aliases', 'notion_id', 'workspace'])
+
+export function containsWikilinks(value: FrontmatterValue): boolean {
+  if (typeof value === 'string') return /^\[\[.*\]\]$/.test(value)
+  if (Array.isArray(value)) return value.some(v => typeof v === 'string' && /^\[\[.*\]\]$/.test(v))
+  return false
+}
+
+function countWords(content: string | null): number {
+  if (!content) return 0
+  const stripped = content.replace(/^---[\s\S]*?---\n?/, '')
+  const words = stripped.trim().split(/\s+/).filter((w) => w.length > 0)
+  return words.length
+}
+
+function formatDate(timestamp: number | null): string {
+  if (!timestamp) return '\u2014'
+  const d = new Date(timestamp * 1000)
+  return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+export function DynamicPropertiesPanel({
+  entry,
+  content,
+  frontmatter,
+  onUpdateProperty,
+  onDeleteProperty,
+  onAddProperty,
+}: {
+  entry: VaultEntry
+  content: string | null
+  frontmatter: ParsedFrontmatter
+  onUpdateProperty?: (key: string, value: FrontmatterValue) => void
+  onDeleteProperty?: (key: string) => void
+  onAddProperty?: (key: string, value: FrontmatterValue) => void
+}) {
+  const [editingKey, setEditingKey] = useState<string | null>(null)
+  const [showAddDialog, setShowAddDialog] = useState(false)
+  const [newKey, setNewKey] = useState('')
+  const [newValue, setNewValue] = useState('')
+
+  const wordCount = countWords(content)
+
+  const propertyEntries = useMemo(() => {
+    return Object.entries(frontmatter)
+      .filter(([key, value]) => {
+        if (SKIP_KEYS.has(key)) return false
+        if (RELATIONSHIP_KEYS.has(key)) return false
+        if (containsWikilinks(value)) return false
+        return true
+      })
+  }, [frontmatter])
+
+  const handleSaveValue = useCallback((key: string, newValue: string) => {
+    setEditingKey(null)
+    if (onUpdateProperty) {
+      if (newValue.toLowerCase() === 'true') onUpdateProperty(key, true)
+      else if (newValue.toLowerCase() === 'false') onUpdateProperty(key, false)
+      else if (!isNaN(Number(newValue)) && newValue.trim() !== '') onUpdateProperty(key, Number(newValue))
+      else onUpdateProperty(key, newValue)
+    }
+  }, [onUpdateProperty])
+
+  const handleSaveList = useCallback((key: string, newItems: string[]) => {
+    if (onUpdateProperty) {
+      if (newItems.length === 0) onDeleteProperty?.(key)
+      else if (newItems.length === 1) onUpdateProperty(key, newItems[0])
+      else onUpdateProperty(key, newItems)
+    }
+  }, [onUpdateProperty, onDeleteProperty])
+
+  const handleAddProperty = useCallback(() => {
+    if (newKey.trim() && onAddProperty) {
+      if (newValue.includes(',')) {
+        const items = newValue.split(',').map(s => s.trim()).filter(s => s)
+        onAddProperty(newKey.trim(), items.length === 1 ? items[0] : items)
+      } else {
+        onAddProperty(newKey.trim(), newValue.trim() || '')
+      }
+      setNewKey('')
+      setNewValue('')
+      setShowAddDialog(false)
+    }
+  }, [newKey, newValue, onAddProperty])
+
+  const handleAddKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') handleAddProperty()
+    else if (e.key === 'Escape') {
+      setShowAddDialog(false)
+      setNewKey('')
+      setNewValue('')
+    }
+  }
+
+  const renderEditableValue = (key: string, value: FrontmatterValue) => {
+    if (value === null || value === undefined) {
+      return (
+        <EditableValue
+          value="" isEditing={editingKey === key}
+          onStartEdit={() => setEditingKey(key)}
+          onSave={(v) => handleSaveValue(key, v)}
+          onCancel={() => setEditingKey(null)}
+        />
+      )
+    }
+
+    if (key === 'Status' || key.includes('Status')) {
+      const statusStr = String(value)
+      const style = STATUS_STYLES[statusStr] ?? DEFAULT_STATUS_STYLE
+      if (editingKey === key) {
+        return (
+          <input
+            className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
+            type="text" defaultValue={statusStr}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleSaveValue(key, (e.target as HTMLInputElement).value)
+              if (e.key === 'Escape') setEditingKey(null)
+            }}
+            onBlur={(e) => handleSaveValue(key, e.target.value)}
+            autoFocus
+          />
+        )
+      }
+      return (
+        <span
+          className="inline-block cursor-pointer transition-opacity hover:opacity-80"
+          style={{ backgroundColor: style.bg, color: style.color, borderRadius: 9999, padding: '1px 6px', fontSize: 10, fontWeight: 500 }}
+          onClick={() => setEditingKey(key)} title="Click to edit"
+        >
+          {statusStr}
+        </span>
+      )
+    }
+
+    if (Array.isArray(value)) {
+      return <EditableList items={value.map(String)} onSave={(items) => handleSaveList(key, items)} label={key} />
+    }
+
+    if (key.includes('Created') || key.includes('Modified') || key.includes('time') || key.includes('Date')) {
+      return (
+        <EditableValue
+          value={String(value)} isEditing={editingKey === key}
+          onStartEdit={() => setEditingKey(key)}
+          onSave={(v) => handleSaveValue(key, v)}
+          onCancel={() => setEditingKey(null)}
+        />
+      )
+    }
+
+    if (typeof value === 'boolean') {
+      return (
+        <button
+          className="rounded border border-border bg-transparent px-2 py-0.5 text-xs text-secondary-foreground transition-colors hover:bg-muted"
+          onClick={() => onUpdateProperty?.(key, !value)}
+        >
+          {value ? '\u2713 Yes' : '\u2717 No'}
+        </button>
+      )
+    }
+
+    return (
+      <EditableValue
+        value={String(value)} isEditing={editingKey === key}
+        onStartEdit={() => setEditingKey(key)}
+        onSave={(v) => handleSaveValue(key, v)}
+        onCancel={() => setEditingKey(null)}
+      />
+    )
+  }
+
+  return (
+    <div className="mb-4">
+      <h4 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Properties</h4>
+      <div className="flex flex-col gap-2">
+        {entry.isA && (
+          <div className="flex items-center justify-between text-[13px]">
+            <span className="shrink-0 text-muted-foreground">Type</span>
+            <span className="text-right text-secondary-foreground">{entry.isA}</span>
+          </div>
+        )}
+
+        {propertyEntries.map(([key, value]) => (
+          <div key={key} className="group/prop flex items-center justify-between text-[13px]">
+            <span className="flex shrink-0 items-center gap-1 text-muted-foreground">
+              {key}
+              {onDeleteProperty && (
+                <button
+                  className="border-none bg-transparent p-0 text-sm leading-none text-muted-foreground opacity-0 transition-all hover:text-destructive group-hover/prop:opacity-100"
+                  onClick={() => onDeleteProperty(key)} title="Delete property"
+                >
+                  &times;
+                </button>
+              )}
+            </span>
+            {renderEditableValue(key, value)}
+          </div>
+        ))}
+
+        <div className="flex items-center justify-between text-[13px]">
+          <span className="shrink-0 text-muted-foreground">Modified</span>
+          <span className="text-right text-secondary-foreground">{formatDate(entry.modifiedAt)}</span>
+        </div>
+        <div className="flex items-center justify-between text-[13px]">
+          <span className="shrink-0 text-muted-foreground">Words</span>
+          <span className="text-right text-secondary-foreground">{wordCount}</span>
+        </div>
+      </div>
+
+      {showAddDialog ? (
+        <div className="mt-3 flex flex-col gap-2 rounded-md border border-border bg-muted p-3">
+          <input
+            className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
+            type="text" placeholder="Property name" value={newKey}
+            onChange={(e) => setNewKey(e.target.value)} onKeyDown={handleAddKeyDown} autoFocus
+          />
+          <input
+            className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
+            type="text" placeholder="Value" value={newValue}
+            onChange={(e) => setNewValue(e.target.value)} onKeyDown={handleAddKeyDown}
+          />
+          <div className="flex justify-end gap-2">
+            <Button size="xs" onClick={handleAddProperty} disabled={!newKey.trim()}>Add</Button>
+            <Button size="xs" variant="outline" onClick={() => { setShowAddDialog(false); setNewKey(''); setNewValue('') }}>Cancel</Button>
+          </div>
+        </div>
+      ) : (
+        <button
+          className="mt-3 w-full cursor-pointer border border-border bg-transparent text-center text-muted-foreground transition-colors hover:border-primary hover:text-primary disabled:cursor-not-allowed disabled:opacity-50"
+          style={{ borderRadius: 6, padding: '6px 12px', fontSize: 12 }}
+          onClick={() => setShowAddDialog(true)} disabled={!onAddProperty}
+        >
+          + Add property
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/EditableValue.tsx b/src/components/EditableValue.tsx
new file mode 100644
index 00000000..5f082f15
--- /dev/null
+++ b/src/components/EditableValue.tsx
@@ -0,0 +1,167 @@
+import { useState } from 'react'
+
+export function EditableValue({
+  value,
+  onSave,
+  onCancel,
+  isEditing,
+  onStartEdit
+}: {
+  value: string
+  onSave: (newValue: string) => void
+  onCancel: () => void
+  isEditing: boolean
+  onStartEdit: () => void
+}) {
+  const [editValue, setEditValue] = useState(value)
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      onSave(editValue)
+    } else if (e.key === 'Escape') {
+      setEditValue(value)
+      onCancel()
+    }
+  }
+
+  if (isEditing) {
+    return (
+      <input
+        className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
+        type="text"
+        value={editValue}
+        onChange={(e) => setEditValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={() => onSave(editValue)}
+        autoFocus
+      />
+    )
+  }
+
+  return (
+    <span
+      className="cursor-pointer rounded px-1 py-0.5 text-right text-secondary-foreground transition-colors hover:bg-muted"
+      onClick={onStartEdit}
+      title="Click to edit"
+    >
+      {value || '\u2014'}
+    </span>
+  )
+}
+
+export function EditableList({
+  items,
+  onSave,
+  label,
+}: {
+  items: string[]
+  onSave: (newItems: string[]) => void
+  label: string
+}) {
+  const [editingIndex, setEditingIndex] = useState<number | null>(null)
+  const [editValue, setEditValue] = useState('')
+  const [isAddingNew, setIsAddingNew] = useState(false)
+  const [newValue, setNewValue] = useState('')
+
+  const handleStartEdit = (index: number) => {
+    setEditingIndex(index)
+    setEditValue(items[index])
+  }
+
+  const handleSaveEdit = () => {
+    if (editingIndex !== null) {
+      const newItems = [...items]
+      if (editValue.trim()) {
+        newItems[editingIndex] = editValue.trim()
+      } else {
+        newItems.splice(editingIndex, 1)
+      }
+      onSave(newItems)
+      setEditingIndex(null)
+    }
+  }
+
+  const handleDeleteItem = (index: number) => {
+    const newItems = items.filter((_, i) => i !== index)
+    onSave(newItems)
+  }
+
+  const handleAddNew = () => {
+    if (newValue.trim()) {
+      onSave([...items, newValue.trim()])
+      setNewValue('')
+      setIsAddingNew(false)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent, action: 'edit' | 'add') => {
+    if (e.key === 'Enter') {
+      if (action === 'edit') handleSaveEdit()
+      else handleAddNew()
+    } else if (e.key === 'Escape') {
+      if (action === 'edit') {
+        setEditingIndex(null)
+        setEditValue('')
+      } else {
+        setIsAddingNew(false)
+        setNewValue('')
+      }
+    }
+  }
+
+  return (
+    <div className="flex w-full flex-col gap-1">
+      {items.map((item, idx) => (
+        <div key={idx} className="group/item flex items-center gap-1">
+          {editingIndex === idx ? (
+            <input
+              className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
+              type="text"
+              value={editValue}
+              onChange={(e) => setEditValue(e.target.value)}
+              onKeyDown={(e) => handleKeyDown(e, 'edit')}
+              onBlur={handleSaveEdit}
+              autoFocus
+            />
+          ) : (
+            <>
+              <span
+                className="flex-1 cursor-pointer truncate rounded px-1 py-0.5 text-[13px] text-secondary-foreground transition-colors hover:bg-muted"
+                onClick={() => handleStartEdit(idx)}
+                title="Click to edit"
+              >
+                {item}
+              </span>
+              <button
+                className="border-none bg-transparent p-0 px-1 text-sm leading-none text-muted-foreground opacity-0 transition-all hover:text-destructive group-hover/item:opacity-100"
+                onClick={() => handleDeleteItem(idx)}
+                title="Remove item"
+              >
+                &times;
+              </button>
+            </>
+          )}
+        </div>
+      ))}
+      {isAddingNew ? (
+        <input
+          className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
+          type="text"
+          value={newValue}
+          onChange={(e) => setNewValue(e.target.value)}
+          onKeyDown={(e) => handleKeyDown(e, 'add')}
+          onBlur={handleAddNew}
+          placeholder={`New ${label.toLowerCase()}...`}
+          autoFocus
+        />
+      ) : (
+        <button
+          className="border-none bg-transparent p-0 py-1 text-left text-xs text-muted-foreground hover:text-secondary-foreground"
+          onClick={() => setIsAddingNew(true)}
+        >
+          + Add item
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/Inspector.tsx b/src/components/Inspector.tsx
index c1838aa3..aff8d48c 100644
--- a/src/components/Inspector.tsx
+++ b/src/components/Inspector.tsx
@@ -1,8 +1,9 @@
-import { useMemo, useState, useCallback } from 'react'
+import { useMemo, useCallback } from 'react'
 import type { VaultEntry, GitCommit } from '../types'
 import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
 import { SlidersHorizontal, X } from '@phosphor-icons/react'
+import { parseFrontmatter, type ParsedFrontmatter } from '../utils/frontmatter'
+import { DynamicPropertiesPanel, RELATIONSHIP_KEYS, containsWikilinks } from './DynamicPropertiesPanel'
 
 interface InspectorProps {
   collapsed: boolean
@@ -20,156 +21,16 @@ interface InspectorProps {
 
 export type FrontmatterValue = string | number | boolean | string[] | null
 
-interface ParsedFrontmatter {
-  [key: string]: FrontmatterValue
-}
-
-const STATUS_STYLES: Record<string, { bg: string; color: string }> = {
-  Active: { bg: 'var(--accent-green-light)', color: 'var(--accent-green)' },
-  Done: { bg: 'var(--accent-blue-light)', color: 'var(--accent-blue)' },
-  Paused: { bg: 'var(--accent-yellow-light)', color: 'var(--accent-yellow)' },
-  Archived: { bg: 'var(--accent-blue-light)', color: 'var(--muted-foreground)' },
-  Dropped: { bg: 'var(--accent-red-light)', color: 'var(--accent-red)' },
-  Open: { bg: 'var(--accent-green-light)', color: 'var(--accent-green)' },
-  Closed: { bg: 'var(--accent-blue-light)', color: 'var(--muted-foreground)' },
-  'Not started': { bg: 'var(--accent-blue-light)', color: 'var(--muted-foreground)' },
-  Draft: { bg: 'var(--accent-yellow-light)', color: 'var(--accent-yellow)' },
-  Mixed: { bg: 'var(--accent-yellow-light)', color: 'var(--accent-yellow)' },
-}
-
-const DEFAULT_STATUS_STYLE = { bg: 'var(--accent-blue-light)', color: 'var(--muted-foreground)' }
-
-// Keys that are relationships (contain wikilinks)
-const RELATIONSHIP_KEYS = new Set([
-  'Belongs to',
-  'Related to',
-  'Events',
-  'Has Data',
-  'Owner',
-  'Advances',
-  'Parent',
-  'Children',
-  'Has',
-  'Notes',
-])
-
-// Keys to skip showing in Properties (shown elsewhere or internal)
-const SKIP_KEYS = new Set([
-  'aliases',
-  'notion_id',
-  'workspace',
-])
-
-function formatDate(timestamp: number | null): string {
-  if (!timestamp) return '\u2014'
-  const d = new Date(timestamp * 1000)
-  return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
-}
-
-function countWords(content: string | null): number {
-  if (!content) return 0
-  // Strip YAML frontmatter
-  const stripped = content.replace(/^---[\s\S]*?---\n?/, '')
-  const words = stripped.trim().split(/\s+/).filter((w) => w.length > 0)
-  return words.length
-}
-
-/** Parse YAML frontmatter from content */
-function parseFrontmatter(content: string | null): ParsedFrontmatter {
-  if (!content) return {}
-
-  const match = content.match(/^---\n([\s\S]*?)\n---/)
-  if (!match) return {}
-
-  const yaml = match[1]
-  const result: ParsedFrontmatter = {}
-
-  let currentKey: string | null = null
-  let currentList: string[] = []
-  let inList = false
-
-  const lines = yaml.split('\n')
-
-  for (const line of lines) {
-    // Check for list item
-    const listMatch = line.match(/^  - (.*)$/)
-    if (listMatch && currentKey) {
-      inList = true
-      currentList.push(listMatch[1].replace(/^["']|["']$/g, ''))
-      continue
-    }
-
-    // If we were in a list and hit a non-list line, save it
-    if (inList && currentKey) {
-      result[currentKey] = currentList.length === 1 ? currentList[0] : currentList
-      currentList = []
-      inList = false
-    }
-
-    // Check for key: value
-    const kvMatch = line.match(/^["']?([^"':]+)["']?\s*:\s*(.*)$/)
-    if (kvMatch) {
-      currentKey = kvMatch[1].trim()
-      const value = kvMatch[2].trim()
-
-      if (value === '' || value === '|' || value === '>') {
-        // Empty value or multiline - wait for list items or next key
-        continue
-      }
-
-      // Handle inline list like [item1, item2]
-      if (value.startsWith('[') && value.endsWith(']')) {
-        const items = value.slice(1, -1).split(',').map(s => s.trim().replace(/^["']|["']$/g, ''))
-        result[currentKey] = items.length === 1 ? items[0] : items
-        continue
-      }
-
-      // Handle quoted string
-      const unquoted = value.replace(/^["']|["']$/g, '')
-
-      // Handle boolean
-      if (unquoted.toLowerCase() === 'true') {
-        result[currentKey] = true
-        continue
-      }
-      if (unquoted.toLowerCase() === 'false') {
-        result[currentKey] = false
-        continue
-      }
-
-      result[currentKey] = unquoted
-    }
-  }
-
-  // Don't forget last list if any
-  if (inList && currentKey) {
-    result[currentKey] = currentList.length === 1 ? currentList[0] : currentList
-  }
-
-  return result
-}
-
 /** Check if a string is a wikilink */
 function isWikilink(value: string): boolean {
   return /^\[\[.*\]\]$/.test(value)
 }
 
-/** Check if a value contains wikilinks */
-function containsWikilinks(value: FrontmatterValue): boolean {
-  if (typeof value === 'string') return isWikilink(value)
-  if (Array.isArray(value)) return value.some(v => typeof v === 'string' && isWikilink(v))
-  return false
-}
-
-/** Extract display name from a wikilink like "[[responsibility/grow-newsletter|Grow Newsletter]]" */
+/** Extract display name from a wikilink */
 function wikilinkDisplay(ref: string): string {
   const inner = ref.replace(/^\[\[|\]\]$/g, '')
-  // Check for pipe alias: [[path|Display Name]]
   const pipeIdx = inner.indexOf('|')
-  if (pipeIdx !== -1) {
-    return inner.slice(pipeIdx + 1)
-  }
-  // Take last path segment and convert to title case
+  if (pipeIdx !== -1) return inner.slice(pipeIdx + 1)
   const last = inner.split('/').pop() ?? inner
   return last.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
 }
@@ -177,180 +38,8 @@ function wikilinkDisplay(ref: string): string {
 /** Extract the target path for navigation from a wikilink ref */
 function wikilinkTarget(ref: string): string {
   const inner = ref.replace(/^\[\[|\]\]$/g, '')
-  // Check for pipe alias: [[path|Display Name]] — use path part
   const pipeIdx = inner.indexOf('|')
-  const path = pipeIdx !== -1 ? inner.slice(0, pipeIdx) : inner
-  // Return the full path for matching (not just last segment)
-  return path
-}
-
-// Editable value component for inline editing
-function EditableValue({
-  value,
-  onSave,
-  onCancel,
-  isEditing,
-  onStartEdit
-}: {
-  value: string
-  onSave: (newValue: string) => void
-  onCancel: () => void
-  isEditing: boolean
-  onStartEdit: () => void
-}) {
-  const [editValue, setEditValue] = useState(value)
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      onSave(editValue)
-    } else if (e.key === 'Escape') {
-      setEditValue(value)
-      onCancel()
-    }
-  }
-
-  if (isEditing) {
-    return (
-      <input
-        className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
-        type="text"
-        value={editValue}
-        onChange={(e) => setEditValue(e.target.value)}
-        onKeyDown={handleKeyDown}
-        onBlur={() => onSave(editValue)}
-        autoFocus
-      />
-    )
-  }
-
-  return (
-    <span
-      className="cursor-pointer rounded px-1 py-0.5 text-right text-secondary-foreground transition-colors hover:bg-muted"
-      onClick={onStartEdit}
-      title="Click to edit"
-    >
-      {value || '\u2014'}
-    </span>
-  )
-}
-
-// Editable list component
-function EditableList({
-  items,
-  onSave,
-  label,
-}: {
-  items: string[]
-  onSave: (newItems: string[]) => void
-  label: string
-}) {
-  const [editingIndex, setEditingIndex] = useState<number | null>(null)
-  const [editValue, setEditValue] = useState('')
-  const [isAddingNew, setIsAddingNew] = useState(false)
-  const [newValue, setNewValue] = useState('')
-
-  const handleStartEdit = (index: number) => {
-    setEditingIndex(index)
-    setEditValue(items[index])
-  }
-
-  const handleSaveEdit = () => {
-    if (editingIndex !== null) {
-      const newItems = [...items]
-      if (editValue.trim()) {
-        newItems[editingIndex] = editValue.trim()
-      } else {
-        // Remove empty items
-        newItems.splice(editingIndex, 1)
-      }
-      onSave(newItems)
-      setEditingIndex(null)
-    }
-  }
-
-  const handleDeleteItem = (index: number) => {
-    const newItems = items.filter((_, i) => i !== index)
-    onSave(newItems)
-  }
-
-  const handleAddNew = () => {
-    if (newValue.trim()) {
-      onSave([...items, newValue.trim()])
-      setNewValue('')
-      setIsAddingNew(false)
-    }
-  }
-
-  const handleKeyDown = (e: React.KeyboardEvent, action: 'edit' | 'add') => {
-    if (e.key === 'Enter') {
-      if (action === 'edit') handleSaveEdit()
-      else handleAddNew()
-    } else if (e.key === 'Escape') {
-      if (action === 'edit') {
-        setEditingIndex(null)
-        setEditValue('')
-      } else {
-        setIsAddingNew(false)
-        setNewValue('')
-      }
-    }
-  }
-
-  return (
-    <div className="flex w-full flex-col gap-1">
-      {items.map((item, idx) => (
-        <div key={idx} className="group/item flex items-center gap-1">
-          {editingIndex === idx ? (
-            <input
-              className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
-              type="text"
-              value={editValue}
-              onChange={(e) => setEditValue(e.target.value)}
-              onKeyDown={(e) => handleKeyDown(e, 'edit')}
-              onBlur={handleSaveEdit}
-              autoFocus
-            />
-          ) : (
-            <>
-              <span
-                className="flex-1 cursor-pointer truncate rounded px-1 py-0.5 text-[13px] text-secondary-foreground transition-colors hover:bg-muted"
-                onClick={() => handleStartEdit(idx)}
-                title="Click to edit"
-              >
-                {item}
-              </span>
-              <button
-                className="border-none bg-transparent p-0 px-1 text-sm leading-none text-muted-foreground opacity-0 transition-all hover:text-destructive group-hover/item:opacity-100"
-                onClick={() => handleDeleteItem(idx)}
-                title="Remove item"
-              >
-                &times;
-              </button>
-            </>
-          )}
-        </div>
-      ))}
-      {isAddingNew ? (
-        <input
-          className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
-          type="text"
-          value={newValue}
-          onChange={(e) => setNewValue(e.target.value)}
-          onKeyDown={(e) => handleKeyDown(e, 'add')}
-          onBlur={handleAddNew}
-          placeholder={`New ${label.toLowerCase()}...`}
-          autoFocus
-        />
-      ) : (
-        <button
-          className="border-none bg-transparent p-0 py-1 text-left text-xs text-muted-foreground hover:text-secondary-foreground"
-          onClick={() => setIsAddingNew(true)}
-        >
-          + Add item
-        </button>
-      )}
-    </div>
-  )
+  return pipeIdx !== -1 ? inner.slice(0, pipeIdx) : inner
 }
 
 function RelationshipGroup({ label, refs, onNavigate }: { label: string; refs: string[]; onNavigate: (target: string) => void }) {
@@ -363,13 +52,7 @@ function RelationshipGroup({ label, refs, onNavigate }: { label: string; refs: s
           <button
             key={`${ref}-${idx}`}
             className="border-none text-left text-primary cursor-pointer hover:opacity-80"
-            style={{
-              background: 'var(--accent-blue-light)',
-              borderRadius: 6,
-              padding: '6px 10px',
-              fontSize: 12,
-              fontWeight: 500,
-            }}
+            style={{ background: 'var(--accent-blue-light)', borderRadius: 6, padding: '6px 10px', fontSize: 12, fontWeight: 500 }}
             onClick={() => onNavigate(wikilinkTarget(ref))}
           >
             {wikilinkDisplay(ref)}
@@ -380,57 +63,33 @@ function RelationshipGroup({ label, refs, onNavigate }: { label: string; refs: s
   )
 }
 
-function DynamicRelationshipsPanel({
-  frontmatter,
-  onNavigate
-}: {
-  frontmatter: ParsedFrontmatter
-  onNavigate: (target: string) => void
-}) {
-  // Find all keys that contain wikilinks
+function DynamicRelationshipsPanel({ frontmatter, onNavigate }: { frontmatter: ParsedFrontmatter; onNavigate: (target: string) => void }) {
   const relationshipEntries = useMemo(() => {
     return Object.entries(frontmatter)
-      .filter(([key, value]) => {
-        // Check if this key typically contains relationships or has wikilinks
-        if (RELATIONSHIP_KEYS.has(key)) return true
-        return containsWikilinks(value)
-      })
+      .filter(([key, value]) => RELATIONSHIP_KEYS.has(key) || containsWikilinks(value))
       .map(([key, value]) => {
         const refs: string[] = []
-        if (typeof value === 'string' && isWikilink(value)) {
-          refs.push(value)
-        } else if (Array.isArray(value)) {
-          value.forEach(v => {
-            if (typeof v === 'string' && isWikilink(v)) {
-              refs.push(v)
-            }
-          })
-        }
+        if (typeof value === 'string' && isWikilink(value)) refs.push(value)
+        else if (Array.isArray(value)) value.forEach(v => { if (typeof v === 'string' && isWikilink(v)) refs.push(v) })
         return { key, refs }
       })
       .filter(({ refs }) => refs.length > 0)
   }, [frontmatter])
 
-  if (relationshipEntries.length === 0) {
-    return (
-      <div className="mb-4">
-        <h4 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Relationships</h4>
-        <p className="m-0 text-[13px] text-muted-foreground">No relationships</p>
-      </div>
-    )
-  }
-
   return (
     <div className="mb-4">
       <h4 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Relationships</h4>
-      {relationshipEntries.map(({ key, refs }) => (
-        <RelationshipGroup key={key} label={key} refs={refs} onNavigate={onNavigate} />
-      ))}
+      {relationshipEntries.length === 0 ? (
+        <p className="m-0 text-[13px] text-muted-foreground">No relationships</p>
+      ) : (
+        relationshipEntries.map(({ key, refs }) => (
+          <RelationshipGroup key={key} label={key} refs={refs} onNavigate={onNavigate} />
+        ))
+      )}
       <button
         className="mt-2 w-full cursor-not-allowed border border-border bg-transparent text-center text-muted-foreground"
         style={{ borderRadius: 6, padding: '6px 12px', fontSize: 12, opacity: 0.6 }}
-        disabled
-        title="Coming soon"
+        disabled title="Coming soon"
       >
         + Link existing
       </button>
@@ -438,299 +97,23 @@ function DynamicRelationshipsPanel({
   )
 }
 
-function DynamicPropertiesPanel({
-  entry,
-  content,
-  frontmatter,
-  onUpdateProperty,
-  onDeleteProperty,
-  onAddProperty,
-}: {
-  entry: VaultEntry
-  content: string | null
-  frontmatter: ParsedFrontmatter
-  onUpdateProperty?: (key: string, value: FrontmatterValue) => void
-  onDeleteProperty?: (key: string) => void
-  onAddProperty?: (key: string, value: FrontmatterValue) => void
-}) {
-  const [editingKey, setEditingKey] = useState<string | null>(null)
-  const [showAddDialog, setShowAddDialog] = useState(false)
-  const [newKey, setNewKey] = useState('')
-  const [newValue, setNewValue] = useState('')
-
-  const wordCount = countWords(content)
-
-  // Filter out relationship keys and skipped keys
-  const propertyEntries = useMemo(() => {
-    return Object.entries(frontmatter)
-      .filter(([key, value]) => {
-        if (SKIP_KEYS.has(key)) return false
-        if (RELATIONSHIP_KEYS.has(key)) return false
-        if (containsWikilinks(value)) return false
-        return true
-      })
-  }, [frontmatter])
-
-  const handleSaveValue = useCallback((key: string, newValue: string) => {
-    setEditingKey(null)
-    if (onUpdateProperty) {
-      // Try to preserve type
-      if (newValue.toLowerCase() === 'true') {
-        onUpdateProperty(key, true)
-      } else if (newValue.toLowerCase() === 'false') {
-        onUpdateProperty(key, false)
-      } else if (!isNaN(Number(newValue)) && newValue.trim() !== '') {
-        onUpdateProperty(key, Number(newValue))
-      } else {
-        onUpdateProperty(key, newValue)
-      }
-    }
-  }, [onUpdateProperty])
-
-  const handleSaveList = useCallback((key: string, newItems: string[]) => {
-    if (onUpdateProperty) {
-      if (newItems.length === 0) {
-        onDeleteProperty?.(key)
-      } else if (newItems.length === 1) {
-        onUpdateProperty(key, newItems[0])
-      } else {
-        onUpdateProperty(key, newItems)
-      }
-    }
-  }, [onUpdateProperty, onDeleteProperty])
-
-  const handleAddProperty = useCallback(() => {
-    if (newKey.trim() && onAddProperty) {
-      // Check if it looks like a list
-      if (newValue.includes(',')) {
-        const items = newValue.split(',').map(s => s.trim()).filter(s => s)
-        onAddProperty(newKey.trim(), items.length === 1 ? items[0] : items)
-      } else {
-        onAddProperty(newKey.trim(), newValue.trim() || '')
-      }
-      setNewKey('')
-      setNewValue('')
-      setShowAddDialog(false)
-    }
-  }, [newKey, newValue, onAddProperty])
-
-  const handleAddKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      handleAddProperty()
-    } else if (e.key === 'Escape') {
-      setShowAddDialog(false)
-      setNewKey('')
-      setNewValue('')
-    }
-  }
-
-  const renderEditableValue = (key: string, value: FrontmatterValue) => {
-    if (value === null || value === undefined) {
-      return (
-        <EditableValue
-          value=""
-          isEditing={editingKey === key}
-          onStartEdit={() => setEditingKey(key)}
-          onSave={(v) => handleSaveValue(key, v)}
-          onCancel={() => setEditingKey(null)}
-        />
-      )
-    }
-
-    // Status gets special rendering but is still editable
-    if (key === 'Status' || key.includes('Status')) {
-      const statusStr = String(value)
-      const style = STATUS_STYLES[statusStr] ?? DEFAULT_STATUS_STYLE
-      if (editingKey === key) {
-        return (
-          <input
-            className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
-            type="text"
-            defaultValue={statusStr}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') handleSaveValue(key, (e.target as HTMLInputElement).value)
-              if (e.key === 'Escape') setEditingKey(null)
-            }}
-            onBlur={(e) => handleSaveValue(key, e.target.value)}
-            autoFocus
-          />
-        )
-      }
-      return (
-        <span
-          className="inline-block cursor-pointer transition-opacity hover:opacity-80"
-          style={{
-            backgroundColor: style.bg,
-            color: style.color,
-            borderRadius: 9999,
-            padding: '1px 6px',
-            fontSize: 10,
-            fontWeight: 500,
-          }}
-          onClick={() => setEditingKey(key)}
-          title="Click to edit"
-        >
-          {statusStr}
-        </span>
-      )
-    }
-
-    // Arrays get list editor
-    if (Array.isArray(value)) {
-      return (
-        <EditableList
-          items={value.map(String)}
-          onSave={(items) => handleSaveList(key, items)}
-          label={key}
-        />
-      )
-    }
-
-    // Date fields - still editable but formatted
-    if (key.includes('Created') || key.includes('Modified') || key.includes('time') || key.includes('Date')) {
-      return (
-        <EditableValue
-          value={String(value)}
-          isEditing={editingKey === key}
-          onStartEdit={() => setEditingKey(key)}
-          onSave={(v) => handleSaveValue(key, v)}
-          onCancel={() => setEditingKey(null)}
-        />
-      )
-    }
-
-    // Boolean
-    if (typeof value === 'boolean') {
-      return (
-        <button
-          className="rounded border border-border bg-transparent px-2 py-0.5 text-xs text-secondary-foreground transition-colors hover:bg-muted"
-          onClick={() => onUpdateProperty?.(key, !value)}
-        >
-          {value ? '\u2713 Yes' : '\u2717 No'}
-        </button>
-      )
-    }
-
-    // Default: editable string
-    return (
-      <EditableValue
-        value={String(value)}
-        isEditing={editingKey === key}
-        onStartEdit={() => setEditingKey(key)}
-        onSave={(v) => handleSaveValue(key, v)}
-        onCancel={() => setEditingKey(null)}
-      />
-    )
-  }
-
-  return (
-    <div className="mb-4">
-      <h4 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Properties</h4>
-      <div className="flex flex-col gap-2">
-        {/* Always show Type from entry */}
-        {entry.isA && (
-          <div className="flex items-center justify-between text-[13px]">
-            <span className="shrink-0 text-muted-foreground">Type</span>
-            <span className="text-right text-secondary-foreground">{entry.isA}</span>
-          </div>
-        )}
-
-        {/* Dynamic properties from frontmatter */}
-        {propertyEntries.map(([key, value]) => (
-          <div key={key} className="group/prop flex items-center justify-between text-[13px]">
-            <span className="flex shrink-0 items-center gap-1 text-muted-foreground">
-              {key}
-              {onDeleteProperty && (
-                <button
-                  className="border-none bg-transparent p-0 text-sm leading-none text-muted-foreground opacity-0 transition-all hover:text-destructive group-hover/prop:opacity-100"
-                  onClick={() => onDeleteProperty(key)}
-                  title="Delete property"
-                >
-                  &times;
-                </button>
-              )}
-            </span>
-            {renderEditableValue(key, value)}
-          </div>
-        ))}
-
-        {/* Always show Modified and Words (read-only) */}
-        <div className="flex items-center justify-between text-[13px]">
-          <span className="shrink-0 text-muted-foreground">Modified</span>
-          <span className="text-right text-secondary-foreground">{formatDate(entry.modifiedAt)}</span>
-        </div>
-        <div className="flex items-center justify-between text-[13px]">
-          <span className="shrink-0 text-muted-foreground">Words</span>
-          <span className="text-right text-secondary-foreground">{wordCount}</span>
-        </div>
-      </div>
-
-      {/* Add property UI */}
-      {showAddDialog ? (
-        <div className="mt-3 flex flex-col gap-2 rounded-md border border-border bg-muted p-3">
-          <input
-            className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
-            type="text"
-            placeholder="Property name"
-            value={newKey}
-            onChange={(e) => setNewKey(e.target.value)}
-            onKeyDown={handleAddKeyDown}
-            autoFocus
-          />
-          <input
-            className="w-full rounded border border-ring bg-muted px-2 py-1 text-[13px] text-foreground outline-none focus:border-primary"
-            type="text"
-            placeholder="Value"
-            value={newValue}
-            onChange={(e) => setNewValue(e.target.value)}
-            onKeyDown={handleAddKeyDown}
-          />
-          <div className="flex justify-end gap-2">
-            <Button size="xs" onClick={handleAddProperty} disabled={!newKey.trim()}>Add</Button>
-            <Button size="xs" variant="outline" onClick={() => { setShowAddDialog(false); setNewKey(''); setNewValue('') }}>Cancel</Button>
-          </div>
-        </div>
-      ) : (
-        <button
-          className="mt-3 w-full cursor-pointer border border-border bg-transparent text-center text-muted-foreground transition-colors hover:border-primary hover:text-primary disabled:cursor-not-allowed disabled:opacity-50"
-          style={{ borderRadius: 6, padding: '6px 12px', fontSize: 12 }}
-          onClick={() => setShowAddDialog(true)}
-          disabled={!onAddProperty}
-        >
-          + Add property
-        </button>
-      )}
-    </div>
-  )
-}
-
-/** Find all entries whose content contains a wikilink to the current note */
-function useBacklinks(
-  entry: VaultEntry | null,
-  entries: VaultEntry[],
-  allContent: Record<string, string>
-): VaultEntry[] {
+function useBacklinks(entry: VaultEntry | null, entries: VaultEntry[], allContent: Record<string, string>): VaultEntry[] {
   return useMemo(() => {
     if (!entry) return []
-    // Build patterns to match: [[title]], [[filename-without-ext]], [[path-segment/filename-without-ext]]
     const title = entry.title
     const stem = entry.filename.replace(/\.md$/, '')
-    // Also match by aliases
     const targets = [title, ...entry.aliases]
-    // Also match path-based links like [[project/26q1-laputa-app]]
     const pathStem = entry.path.replace(/^.*\/Laputa\//, '').replace(/\.md$/, '')
 
     return entries.filter((e) => {
       if (e.path === entry.path) return false
       const content = allContent[e.path]
       if (!content) return false
-      // Check for any [[target]] pattern in the content
       for (const t of targets) {
         if (content.includes(`[[${t}]]`)) return true
       }
       if (content.includes(`[[${stem}]]`)) return true
       if (content.includes(`[[${pathStem}]]`)) return true
-      // Also check with pipe aliases
       if (content.includes(`[[${pathStem}|`)) return true
       return false
     })
@@ -803,38 +186,46 @@ function GitHistoryPanel({ commits }: { commits: GitCommit[] }) {
   )
 }
 
+function EmptyInspector() {
+  return (
+    <>
+      <div className="mb-4">
+        <h4 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Properties</h4>
+        <p className="m-0 text-[13px] text-muted-foreground">No note selected</p>
+      </div>
+      <div className="mb-4">
+        <h4 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Relationships</h4>
+        <p className="m-0 text-[13px] text-muted-foreground">No relationships</p>
+      </div>
+      <div className="mb-4">
+        <h4 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Backlinks</h4>
+        <p className="m-0 text-[13px] text-muted-foreground">No backlinks</p>
+      </div>
+      <div className="mb-4">
+        <h4 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">History</h4>
+        <p className="m-0 text-[13px] text-muted-foreground">No revision history</p>
+      </div>
+    </>
+  )
+}
+
 export function Inspector({
-  collapsed,
-  onToggle,
-  entry,
-  content,
-  entries,
-  allContent,
-  gitHistory,
-  onNavigate,
-  onUpdateFrontmatter,
-  onDeleteProperty,
-  onAddProperty,
+  collapsed, onToggle, entry, content, entries, allContent, gitHistory, onNavigate,
+  onUpdateFrontmatter, onDeleteProperty, onAddProperty,
 }: InspectorProps) {
   const backlinks = useBacklinks(entry, entries, allContent)
   const frontmatter = useMemo(() => parseFrontmatter(content), [content])
 
   const handleUpdateProperty = useCallback((key: string, value: FrontmatterValue) => {
-    if (entry && onUpdateFrontmatter) {
-      onUpdateFrontmatter(entry.path, key, value)
-    }
+    if (entry && onUpdateFrontmatter) onUpdateFrontmatter(entry.path, key, value)
   }, [entry, onUpdateFrontmatter])
 
   const handleDeleteProperty = useCallback((key: string) => {
-    if (entry && onDeleteProperty) {
-      onDeleteProperty(entry.path, key)
-    }
+    if (entry && onDeleteProperty) onDeleteProperty(entry.path, key)
   }, [entry, onDeleteProperty])
 
   const handleAddProperty = useCallback((key: string, value: FrontmatterValue) => {
-    if (entry && onAddProperty) {
-      onAddProperty(entry.path, key, value)
-    }
+    if (entry && onAddProperty) onAddProperty(entry.path, key, value)
   }, [entry, onAddProperty])
 
   return (
@@ -842,28 +233,16 @@ export function Inspector({
       "flex flex-col overflow-y-auto border-l border-border bg-background text-foreground transition-[width] duration-200",
       collapsed && "!w-10 !min-w-10"
     )}>
-      <div
-        className="flex items-center border-b border-border"
-        style={{ height: 45, padding: '0 12px', gap: 8 }}
-        data-tauri-drag-region
-      >
+      <div className="flex items-center border-b border-border" style={{ height: 45, padding: '0 12px', gap: 8 }} data-tauri-drag-region>
         {collapsed ? (
-          <button
-            className="shrink-0 border-none bg-transparent p-1 text-muted-foreground cursor-pointer hover:text-foreground"
-            onClick={onToggle}
-            style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
-          >
+          <button className="shrink-0 border-none bg-transparent p-1 text-muted-foreground cursor-pointer hover:text-foreground" onClick={onToggle} style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}>
             <SlidersHorizontal size={16} />
           </button>
         ) : (
           <>
             <SlidersHorizontal size={16} className="shrink-0 text-muted-foreground" />
             <span className="flex-1 text-muted-foreground" style={{ fontSize: 13, fontWeight: 600 }}>Properties</span>
-            <button
-              className="shrink-0 border-none bg-transparent p-1 text-muted-foreground cursor-pointer hover:text-foreground"
-              onClick={onToggle}
-              style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
-            >
+            <button className="shrink-0 border-none bg-transparent p-1 text-muted-foreground cursor-pointer hover:text-foreground" onClick={onToggle} style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}>
               <X size={16} />
             </button>
           </>
@@ -874,9 +253,7 @@ export function Inspector({
           {entry ? (
             <>
               <DynamicPropertiesPanel
-                entry={entry}
-                content={content}
-                frontmatter={frontmatter}
+                entry={entry} content={content} frontmatter={frontmatter}
                 onUpdateProperty={onUpdateFrontmatter ? handleUpdateProperty : undefined}
                 onDeleteProperty={onDeleteProperty ? handleDeleteProperty : undefined}
                 onAddProperty={onAddProperty ? handleAddProperty : undefined}
@@ -886,24 +263,7 @@ export function Inspector({
               <GitHistoryPanel commits={gitHistory} />
             </>
           ) : (
-            <>
-              <div className="mb-4">
-                <h4 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Properties</h4>
-                <p className="m-0 text-[13px] text-muted-foreground">No note selected</p>
-              </div>
-              <div className="mb-4">
-                <h4 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Relationships</h4>
-                <p className="m-0 text-[13px] text-muted-foreground">No relationships</p>
-              </div>
-              <div className="mb-4">
-                <h4 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Backlinks</h4>
-                <p className="m-0 text-[13px] text-muted-foreground">No backlinks</p>
-              </div>
-              <div className="mb-4">
-                <h4 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">History</h4>
-                <p className="m-0 text-[13px] text-muted-foreground">No revision history</p>
-              </div>
-            </>
+            <EmptyInspector />
           )}
         </div>
       )}
diff --git a/src/utils/frontmatter.ts b/src/utils/frontmatter.ts
new file mode 100644
index 00000000..e1ec8dc7
--- /dev/null
+++ b/src/utils/frontmatter.ts
@@ -0,0 +1,72 @@
+import type { FrontmatterValue } from '../components/Inspector'
+
+export interface ParsedFrontmatter {
+  [key: string]: FrontmatterValue
+}
+
+/** Parse YAML frontmatter from content */
+export function parseFrontmatter(content: string | null): ParsedFrontmatter {
+  if (!content) return {}
+
+  const match = content.match(/^---\n([\s\S]*?)\n---/)
+  if (!match) return {}
+
+  const yaml = match[1]
+  const result: ParsedFrontmatter = {}
+
+  let currentKey: string | null = null
+  let currentList: string[] = []
+  let inList = false
+
+  const lines = yaml.split('\n')
+
+  for (const line of lines) {
+    const listMatch = line.match(/^  - (.*)$/)
+    if (listMatch && currentKey) {
+      inList = true
+      currentList.push(listMatch[1].replace(/^["']|["']$/g, ''))
+      continue
+    }
+
+    if (inList && currentKey) {
+      result[currentKey] = currentList.length === 1 ? currentList[0] : currentList
+      currentList = []
+      inList = false
+    }
+
+    const kvMatch = line.match(/^["']?([^"':]+)["']?\s*:\s*(.*)$/)
+    if (kvMatch) {
+      currentKey = kvMatch[1].trim()
+      const value = kvMatch[2].trim()
+
+      if (value === '' || value === '|' || value === '>') {
+        continue
+      }
+
+      if (value.startsWith('[') && value.endsWith(']')) {
+        const items = value.slice(1, -1).split(',').map(s => s.trim().replace(/^["']|["']$/g, ''))
+        result[currentKey] = items.length === 1 ? items[0] : items
+        continue
+      }
+
+      const unquoted = value.replace(/^["']|["']$/g, '')
+
+      if (unquoted.toLowerCase() === 'true') {
+        result[currentKey] = true
+        continue
+      }
+      if (unquoted.toLowerCase() === 'false') {
+        result[currentKey] = false
+        continue
+      }
+
+      result[currentKey] = unquoted
+    }
+  }
+
+  if (inList && currentKey) {
+    result[currentKey] = currentList.length === 1 ? currentList[0] : currentList
+  }
+
+  return result
+}