Merge feat/dsms-stufe3-version-chains: version chain history + diff + audit-timeline modal

admin-compliance/app/sdk/audit-timeline/_components/CIDHistoryModal.tsx

@@ -0,0 +1,207 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+interface HistoryEntry {
+  cid: string
+  version: string | null
+  document_type: string | null
+  document_id: string | null
+  parent_cid: string | null
+  created_at: string | null
+  checksum: string | null
+}
+
+interface DiffResponse {
+  kind: 'text' | 'binary'
+  cid_a: string
+  cid_b: string
+  metadata_diff: Record<string, { old: unknown; new: unknown }>
+  diff?: string
+  added_lines?: number
+  removed_lines?: number
+  note?: string
+}
+
+interface Props {
+  cid: string
+  onClose: () => void
+}
+
+function shorten(cid: string): string {
+  if (cid.length <= 14) return cid
+  return cid.slice(0, 8) + '…' + cid.slice(-6)
+}
+
+export default function CIDHistoryModal({ cid, onClose }: Props) {
+  const [history, setHistory] = useState<HistoryEntry[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [diffPair, setDiffPair] = useState<{ a: string; b: string } | null>(null)
+  const [diff, setDiff] = useState<DiffResponse | null>(null)
+  const [diffLoading, setDiffLoading] = useState(false)
+
+  useEffect(() => {
+    let cancel = false
+    setLoading(true)
+    setError(null)
+    fetch(`/api/sdk/v1/dsms/documents/${encodeURIComponent(cid)}/history`)
+      .then(async (r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`)
+        const json = await r.json()
+        if (!cancel) setHistory(json.history || [])
+      })
+      .catch((e) => {
+        if (!cancel) setError(e?.message || 'Fehler beim Laden')
+      })
+      .finally(() => {
+        if (!cancel) setLoading(false)
+      })
+    return () => {
+      cancel = true
+    }
+  }, [cid])
+
+  async function loadDiff(a: string, b: string) {
+    setDiffPair({ a, b })
+    setDiff(null)
+    setDiffLoading(true)
+    try {
+      const res = await fetch(
+        `/api/sdk/v1/dsms/documents/${encodeURIComponent(a)}/diff/${encodeURIComponent(b)}`
+      )
+      if (res.ok) {
+        const json = (await res.json()) as DiffResponse
+        setDiff(json)
+      } else {
+        setDiff({ kind: 'binary', cid_a: a, cid_b: b, metadata_diff: {}, note: `HTTP ${res.status}` })
+      }
+    } finally {
+      setDiffLoading(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" onClick={onClose}>
+      <div
+        className="w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col bg-white dark:bg-gray-800 rounded-xl shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between px-5 py-3 border-b border-gray-200 dark:border-gray-700">
+          <div>
+            <h2 className="text-sm font-semibold text-gray-900 dark:text-white">DSMS-Versionsverlauf</h2>
+            <code className="text-[10px] font-mono text-gray-500 dark:text-gray-400">{shorten(cid)}</code>
+          </div>
+          <button onClick={onClose} className="text-gray-500 hover:text-gray-700 dark:text-gray-400 text-sm">
+            Schliessen
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-5 space-y-4">
+          {loading && <div className="text-sm text-gray-500">Verlauf wird geladen…</div>}
+          {error && <div className="text-sm text-red-600 dark:text-red-400">{error}</div>}
+
+          {!loading && !error && history.length === 0 && (
+            <div className="text-sm text-gray-500 italic">
+              Kein Versionsverlauf gefunden. Diese CID hat keine parent_cid-Kette.
+            </div>
+          )}
+
+          {!loading && !error && history.length > 0 && (
+            <>
+              <div className="text-xs text-gray-500 dark:text-gray-400">
+                {history.length} Version{history.length > 1 ? 'en' : ''} in der Kette (neueste oben).
+              </div>
+              <ol className="relative border-l-2 border-emerald-500/40 pl-4 space-y-3">
+                {history.map((entry, idx) => {
+                  const next = history[idx + 1]
+                  return (
+                    <li key={entry.cid} className="relative">
+                      <div className="absolute -left-[1.4rem] top-1.5 w-3 h-3 rounded-full bg-emerald-500 ring-2 ring-white dark:ring-gray-800" />
+                      <div className="bg-gray-50 dark:bg-gray-900/40 rounded-lg p-3 border border-gray-200 dark:border-gray-700">
+                        <div className="flex items-center justify-between gap-2">
+                          <div className="min-w-0">
+                            <div className="text-sm font-medium text-gray-900 dark:text-white">
+                              Version {entry.version || '?'} {idx === 0 && <span className="ml-2 text-[10px] text-emerald-600 font-semibold">AKTUELL</span>}
+                            </div>
+                            <code className="text-[10px] font-mono text-gray-500 dark:text-gray-400 break-all">{entry.cid}</code>
+                          </div>
+                          {next && (
+                            <button
+                              onClick={() => loadDiff(next.cid, entry.cid)}
+                              className="shrink-0 text-[11px] text-purple-600 hover:text-purple-800 dark:text-purple-400 hover:underline"
+                              title="Aenderungen zur Vorversion anzeigen"
+                            >
+                              Diff zu V{next.version || '?'}
+                            </button>
+                          )}
+                        </div>
+                        <div className="mt-1 text-[11px] text-gray-500 dark:text-gray-400 flex flex-wrap gap-x-3 gap-y-0.5">
+                          {entry.document_type && <span>Typ: {entry.document_type}</span>}
+                          {entry.document_id && <span>Dok-ID: {entry.document_id}</span>}
+                          {entry.created_at && <span>{new Date(entry.created_at).toLocaleString('de-DE')}</span>}
+                        </div>
+                        {entry.checksum && (
+                          <div className="mt-1 text-[10px] text-gray-400 font-mono">SHA-256: {entry.checksum.slice(0, 16)}…</div>
+                        )}
+                      </div>
+                    </li>
+                  )
+                })}
+              </ol>
+            </>
+          )}
+
+          {diffPair && (
+            <div className="mt-4 border-t border-gray-200 dark:border-gray-700 pt-4 space-y-2">
+              <div className="flex items-center justify-between">
+                <h3 className="text-xs font-semibold text-gray-900 dark:text-white">
+                  Diff: {shorten(diffPair.a)} → {shorten(diffPair.b)}
+                </h3>
+                <button onClick={() => { setDiff(null); setDiffPair(null) }} className="text-[11px] text-gray-500 hover:text-gray-700">
+                  Schliessen
+                </button>
+              </div>
+              {diffLoading && <div className="text-xs text-gray-500">Diff wird geladen…</div>}
+              {!diffLoading && diff && (
+                <>
+                  {Object.keys(diff.metadata_diff || {}).length > 0 && (
+                    <div className="text-xs">
+                      <div className="font-medium text-gray-700 dark:text-gray-300 mb-1">Metadaten-Aenderungen</div>
+                      <table className="w-full">
+                        <tbody>
+                          {Object.entries(diff.metadata_diff).map(([field, { old, new: nv }]) => (
+                            <tr key={field} className="border-b border-gray-100 dark:border-gray-800">
+                              <td className="py-0.5 pr-2 font-mono text-[10px] text-gray-500">{field}</td>
+                              <td className="py-0.5 pr-2 text-red-600 dark:text-red-400 line-through">{JSON.stringify(old)}</td>
+                              <td className="py-0.5 text-green-700 dark:text-green-400">{JSON.stringify(nv)}</td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  )}
+                  {diff.kind === 'text' && diff.diff && (
+                    <>
+                      <div className="text-[11px] text-gray-500">
+                        {diff.added_lines ?? 0} Zeilen hinzu, {diff.removed_lines ?? 0} entfernt
+                      </div>
+                      <pre className="text-[10px] font-mono whitespace-pre-wrap bg-gray-900 text-gray-100 p-3 rounded max-h-64 overflow-y-auto">
+                        {diff.diff}
+                      </pre>
+                    </>
+                  )}
+                  {diff.kind === 'binary' && (
+                    <div className="text-xs text-amber-700 dark:text-amber-400 italic">
+                      {diff.note || 'Binaere Datei — kein Text-Diff verfuegbar.'}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/audit-timeline/page.tsx

@@ -1,6 +1,8 @@
 'use client'
 
+import { useState } from 'react'
 import { useAuditTimeline, type AuditEntry } from './_hooks/useAuditTimeline'
+import CIDHistoryModal from './_components/CIDHistoryModal'
 
 const ENTITY_LABELS: Record<string, string> = {
   evidence: 'Nachweis', control: 'Control', document: 'Dokument',
@@ -16,8 +18,24 @@ const ACTION_COLORS: Record<string, string> = {
 
 const FILTER_OPTIONS = ['all', 'evidence', 'dsms_archive', 'control', 'document', 'dsfa', 'vvt', 'tom']
 
+// new_value may be a plain CID (from Python evidence flow) or a JSON envelope
+// {"cid":"X","filename":"...","size":"..."} (from the Go IACE tech-file flow).
+function extractCID(value: string): string {
+  const trimmed = value.trim()
+  if (trimmed.startsWith('{')) {
+    try {
+      const parsed = JSON.parse(trimmed)
+      if (typeof parsed.cid === 'string') return parsed.cid
+    } catch {
+      // fall through
+    }
+  }
+  return trimmed
+}
+
 export default function AuditTimelinePage() {
   const { entries, loading, filter, setFilter } = useAuditTimeline()
+  const [historyCID, setHistoryCID] = useState<string | null>(null)
 
   return (
     <div className="max-w-4xl mx-auto space-y-6">
@@ -58,16 +76,18 @@ export default function AuditTimelinePage() {
 
           <div className="space-y-4">
             {entries.map((entry) => (
-              <TimelineEntry key={entry.id} entry={entry} />
+              <TimelineEntry key={entry.id} entry={entry} onShowHistory={setHistoryCID} />
             ))}
           </div>
         </div>
       )}
+
+      {historyCID && <CIDHistoryModal cid={historyCID} onClose={() => setHistoryCID(null)} />}
     </div>
   )
 }
 
-function TimelineEntry({ entry }: { entry: AuditEntry }) {
+function TimelineEntry({ entry, onShowHistory }: { entry: AuditEntry; onShowHistory: (cid: string) => void }) {
   const dotColor = ACTION_COLORS[entry.action] || 'bg-gray-400'
   const isCID = entry.field_changed === 'dsms_cid' || entry.action === 'archive'
   const date = new Date(entry.performed_at)
@@ -94,7 +114,7 @@ function TimelineEntry({ entry }: { entry: AuditEntry }) {
               <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">{entry.change_summary}</p>
             )}
             {isCID && entry.new_value && (
-              <div className="mt-2 flex items-center gap-2">
+              <div className="mt-2 flex items-center gap-2 flex-wrap">
                 <svg className="w-3.5 h-3.5 text-emerald-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                 </svg>
@@ -102,6 +122,16 @@ function TimelineEntry({ entry }: { entry: AuditEntry }) {
                   {entry.new_value.length > 20 ? entry.new_value.slice(0, 8) + '...' + entry.new_value.slice(-6) : entry.new_value}
                 </code>
                 <span className="text-[10px] text-emerald-500">DSMS/IPFS</span>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (entry.new_value) onShowHistory(extractCID(entry.new_value))
+                  }}
+                  className="text-[10px] text-purple-600 hover:text-purple-800 dark:text-purple-400 underline-offset-2 hover:underline"
+                  title="DSMS-Versionsverlauf und Diff zur Vorversion anzeigen"
+                >
+                  Verlauf anzeigen
+                </button>
               </div>
             )}
           </div>