Hitonabi
991c9a2f82
Ampel / ampel (push) Successful in 22s
Die Queue war 703 der 1147 Zeilen in AuftragsbuchView — die MEHRHEIT einer Seite,
die nach etwas anderem benannt ist. Und sie laufen gegenlaeufig: Auftragsbuch =
die Box schlaegt DIR vor (Eingang), Ideen = DU beauftragst die Box (Ausgang).
Seit dem Umbau ist Idee -> Konzept -> Repo -> Zed der Haupteingang des Systems
und gehoert in die Seitenleiste, nicht in einen Unterabschnitt.
Umzug (reines Verschieben, kein Logik-Umbau):
AuftragsbuchView 1147 -> 406 Zeilen Bundle 51,0 -> 17,8 KB
IdeenView neu, 785 Zeilen Bundle 32,7 KB, laedt nur bei Bedarf
fmtWhen -> lib/format.ts (dessen Kopf genau davor warnt: "vorher in
einzelnen Views dupliziert")
SectionLabel -> components/ui/ (beide Seiten brauchen sie jetzt)
Zwei inhaltliche Aenderungen:
1. Die flache Einzelkarten-Liste wird gruppiert — mit der Ordnung, die
ProjektGruppe fuer Ketten LAENGST benutzt (AKTIV_RANG): aktiv zuerst,
Wartende und Fertige eingeklappt. Bei 19 Karten, davon 16 fertig, gingen die
drei relevanten in der Erstellzeit-Liste unter.
2. Die Kopfzeile sagt jetzt "1 braucht dich · 2 in Arbeit · 16 fertig" statt
einer nackten Gesamtzahl.
Das Auftragsbuch zaehlte im gruenen "Nichts zu entscheiden" bisher haengende
Ideen mit, damit es nicht luegt, waehrend direkt darunter eine Karte haengt.
Nach der Trennung wird daraus ein anklickbarer Querverweis auf die Ideen-Seite —
dieselbe Ehrlichkeit, jetzt mit Weg dorthin.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
407 lines
23 KiB
TypeScript
407 lines
23 KiB
TypeScript
import { useState } from "react"
|
|
import {
|
|
Inbox, Check, X, GitBranch, FileDiff, Loader2, AlertTriangle, Sparkles,
|
|
ChevronDown, ChevronRight, Clock, Hammer, RefreshCw, Lightbulb, ArrowRight,
|
|
} from "lucide-react"
|
|
import { api, type AuftragItem, type SkillKandidat } from "@/lib/api"
|
|
import { useAuftragsbuch, useIdeen, useQueryClient, qk } from "@/lib/queries"
|
|
import { useDialog } from "@/lib/useDialog"
|
|
import { cn } from "@/lib/utils"
|
|
import { fmtWhen } from "@/lib/format"
|
|
import { SectionLabel } from "@/components/ui/SectionLabel"
|
|
|
|
// Auftragsbuch = die Vorschlags-Inbox der Box. Werkstatt/Orchestrator liefern propose-only-
|
|
// Branches, der Traum liefert Skill-Kandidaten — hier fällt die Entscheidung per Klick.
|
|
// Annehmen (Branch) = Merge→Push→Deploy→Health mit Auto-Rollback; alles detached auf der Box.
|
|
|
|
const KIND_LABEL: Record<string, string> = {
|
|
wartung: "Werkstatt",
|
|
orchestrator: "Orchestrator",
|
|
doku: "Doku",
|
|
feature: "Feature",
|
|
}
|
|
|
|
const STATE_UI: Record<string, { label: string; cls: string; spin?: boolean }> = {
|
|
laeuft: { label: "wird eingespielt …", cls: "text-sky-300 border-sky-500/40 bg-sky-500/10", spin: true },
|
|
rollback: { label: "Rollback läuft …", cls: "text-amber-300 border-amber-500/40 bg-amber-500/10", spin: true },
|
|
eingespielt: { label: "eingespielt ✓", cls: "text-emerald-300 border-emerald-500/40 bg-emerald-500/10" },
|
|
fehlgeschlagen: { label: "fehlgeschlagen", cls: "text-red-300 border-red-500/40 bg-red-500/10" },
|
|
zurueckgerollt: { label: "zurückgerollt", cls: "text-amber-300 border-amber-500/40 bg-amber-500/10" },
|
|
kritisch: { label: "KRITISCH — Box prüfen", cls: "text-red-200 border-red-500/60 bg-red-500/20" },
|
|
abgelehnt: { label: "abgelehnt", cls: "text-muted-foreground border-border/60 bg-background/30" },
|
|
}
|
|
|
|
|
|
export function AuftragsbuchView() {
|
|
const { data, isLoading, refetch, isFetching } = useAuftragsbuch()
|
|
// Geteilter Cache mit der IdeenSection — hier nur fürs ehrliche "Nichts zu entscheiden"-
|
|
// Banner (eine hängende Karte direkt darunter widerspräche dem grünen Häkchen).
|
|
const { data: ideenData } = useIdeen()
|
|
const qc = useQueryClient()
|
|
const { showAlert, showConfirm, dialogElement } = useDialog()
|
|
const [busy, setBusy] = useState<Record<string, boolean>>({})
|
|
|
|
const reload = () => qc.invalidateQueries({ queryKey: qk.auftragsbuch })
|
|
|
|
async function act(key: string, path: string, body: object, done?: string) {
|
|
setBusy((b) => ({ ...b, [key]: true }))
|
|
try {
|
|
await api(path, { method: "POST", body: JSON.stringify(body) })
|
|
if (done) showAlert("Erledigt", done)
|
|
reload()
|
|
} catch (e: any) {
|
|
showAlert("Das hat nicht geklappt", String(e?.message || e))
|
|
} finally {
|
|
setBusy((b) => ({ ...b, [key]: false }))
|
|
}
|
|
}
|
|
|
|
const items = data?.items ?? []
|
|
const kandidaten = data?.skill_kandidaten ?? []
|
|
// Hängende Ideen leben seit 25.07. auf der eigenen Ideen-Seite. Das grüne „Nichts zu
|
|
// entscheiden" darf trotzdem nicht behaupten, alles sei erledigt — es zeigt jetzt einen
|
|
// Querverweis statt die Karte selbst (vorher stand sie direkt darunter).
|
|
const blockedIdeen = ideenData?.available ? ideenData.items.filter((i) => i.status === "blocked").length : 0
|
|
const empty = items.length === 0 && kandidaten.length === 0
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<h1 className="bg-gradient-to-r from-foreground via-foreground to-primary bg-clip-text font-space text-2xl font-bold tracking-tight text-transparent">
|
|
Auftragsbuch
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Was die Box gebaut oder sich ausgedacht hat — du entscheidest. Annehmen spielt es mit Fangnetz ein (Health-Check, automatischer Rollback).
|
|
</p>
|
|
</div>
|
|
<button onClick={() => refetch()}
|
|
className="flex h-9 items-center gap-1.5 rounded-lg border border-border/60 bg-card/45 px-3 text-xs font-semibold text-muted-foreground hover:text-foreground hover:border-primary/40 transition-all cursor-pointer">
|
|
<RefreshCw className={cn("h-3.5 w-3.5", isFetching && "animate-spin")} /> Aktualisieren
|
|
</button>
|
|
</div>
|
|
|
|
{data && !data.available && (
|
|
<div className="rounded-2xl border border-amber-500/30 bg-amber-500/5 p-4 text-xs text-amber-300">
|
|
Das Auftragsbuch lebt auf der Box (liest die Gitea-Branches dort). Im lokalen Dev-Modus ist hier nichts zu sehen.
|
|
</div>
|
|
)}
|
|
|
|
{isLoading && (
|
|
<div className="flex items-center gap-2 rounded-2xl border border-border/60 bg-card/30 p-6 text-xs text-muted-foreground">
|
|
<Loader2 className="h-4 w-4 animate-spin" /> Vorschläge werden geladen …
|
|
</div>
|
|
)}
|
|
|
|
{data?.available && empty && (
|
|
<div className="flex items-center gap-3 rounded-2xl border border-emerald-500/25 bg-emerald-500/5 p-5">
|
|
<Check className="h-5 w-5 shrink-0 text-emerald-400" />
|
|
<div>
|
|
<p className="text-sm font-semibold text-foreground">Nichts zu entscheiden</p>
|
|
<p className="text-xs text-muted-foreground">Keine offenen Vorschläge. Werkstatt, Orchestrator und Traum melden sich hier, sobald es etwas gibt.</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{blockedIdeen > 0 && (
|
|
<button
|
|
onClick={() => window.dispatchEvent(new CustomEvent("mc-navigate", { detail: { view: "ideen" } }))}
|
|
className="flex w-full items-center gap-3 rounded-2xl border border-red-500/30 bg-red-500/5 p-4 text-left transition-all hover:border-red-500/50 cursor-pointer">
|
|
<Lightbulb className="h-5 w-5 shrink-0 text-red-300" />
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-semibold text-foreground">
|
|
{blockedIdeen === 1 ? "Eine Idee hängt und braucht dich" : `${blockedIdeen} Ideen hängen und brauchen dich`}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">Hier ist nichts zu tun — aber drüben in den Ideen wartet eine Frage auf deine Antwort.</p>
|
|
</div>
|
|
<ArrowRight className="h-4 w-4 shrink-0 text-red-300/70" />
|
|
</button>
|
|
)}
|
|
|
|
{items.length > 0 && (
|
|
<section className="space-y-3">
|
|
<SectionLabel icon={GitBranch}>Patch-Vorschläge ({items.length})</SectionLabel>
|
|
{items.map((it) => (
|
|
<ProposalCard key={`${it.repo ?? "mc2"}:${it.branch}`} item={it} busy={busy} onAct={act} showConfirm={showConfirm} />
|
|
))}
|
|
</section>
|
|
)}
|
|
|
|
{kandidaten.length > 0 && (
|
|
<section className="space-y-3">
|
|
<SectionLabel icon={Sparkles}>Skill-Kandidaten aus dem Traum ({kandidaten.length})</SectionLabel>
|
|
{kandidaten.map((k) => (
|
|
<KandidatCard key={k.file} k={k} busy={busy} onAct={act} showConfirm={showConfirm} />
|
|
))}
|
|
</section>
|
|
)}
|
|
|
|
{dialogElement}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
function StateBadge({ item }: { item: AuftragItem }) {
|
|
const st = item.status
|
|
if (!st) return null
|
|
const ui = STATE_UI[st.state]
|
|
if (!ui) return null
|
|
return (
|
|
<span className={cn("flex items-center gap-1.5 rounded-lg border px-2 py-0.5 text-[10px] font-bold", ui.cls)} title={st.detail}>
|
|
{ui.spin && <Loader2 className="h-3 w-3 animate-spin" />}
|
|
{ui.label}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
function ProposalCard({
|
|
item, busy, onAct, showConfirm,
|
|
}: {
|
|
item: AuftragItem
|
|
busy: Record<string, boolean>
|
|
onAct: (key: string, path: string, body: object, done?: string) => void
|
|
showConfirm: (title: string, msg: string, ok: () => void) => void
|
|
}) {
|
|
const [open, setOpen] = useState(false)
|
|
const [diff, setDiff] = useState<string | null>(null)
|
|
const [diffLoading, setDiffLoading] = useState(false)
|
|
// Ablehnen mit Grund: der Grund ist das Lern-Gedächtnis des Kreislaufs (Radar/Specifier
|
|
// bekommen ihn als „nie wieder vorschlagen"-Material) — deshalb ein kleines Inline-Feld.
|
|
const [rejecting, setRejecting] = useState(false)
|
|
const [grund, setGrund] = useState("")
|
|
const running = item.status?.state === "laeuft" || item.status?.state === "rollback"
|
|
const decided = item.status?.state === "eingespielt"
|
|
// Lucy-Karten (Desktop-App): Annehmen baut am PC (dist) statt auf der Box zu deployen.
|
|
const repo = item.repo ?? "mc2"
|
|
const isLucy = repo === "lucy"
|
|
const k = `${repo}:${item.branch}`
|
|
|
|
async function loadDiff() {
|
|
const next = !open
|
|
setOpen(next)
|
|
if (next && diff === null) {
|
|
setDiffLoading(true)
|
|
try {
|
|
const r = await api<{ diff: string; truncated: boolean }>(`/api/auftragsbuch/diff?branch=${encodeURIComponent(item.branch)}&repo=${repo}`)
|
|
setDiff(r.diff + (r.truncated ? "\n… (gekürzt)" : ""))
|
|
} catch (e: any) {
|
|
setDiff(`(Diff nicht ladbar: ${e?.message || e})`)
|
|
} finally {
|
|
setDiffLoading(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="mc-card p-4 space-y-3">
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="rounded-md border border-primary/30 bg-primary/10 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-primary">
|
|
{KIND_LABEL[item.kind] ?? item.kind}
|
|
</span>
|
|
{isLucy && (
|
|
<span className="rounded-md border border-pink-500/40 bg-pink-500/10 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-pink-300"
|
|
title="Vorschlag fürs Lucy-Repo — Annehmen baut die App am PC neu und startet sie neu, wenn sie läuft.">
|
|
Lucy
|
|
</span>
|
|
)}
|
|
<span className="font-mono text-[11px] text-muted-foreground truncate" title={item.branch}>{item.branch}</span>
|
|
<span className="flex items-center gap-1 text-[10px] text-muted-foreground/70"><Clock className="h-3 w-3" />{fmtWhen(item.ts)}</span>
|
|
<StateBadge item={item} />
|
|
</div>
|
|
<p className="mt-1.5 text-sm font-semibold text-foreground">{item.subject || "(ohne Titel)"}</p>
|
|
{item.body && <p className="mt-1 whitespace-pre-wrap text-xs leading-relaxed text-muted-foreground line-clamp-6">{item.body}</p>}
|
|
{item.empfehlung && (
|
|
<p className={cn("mt-1.5 flex items-start gap-1.5 rounded-lg border px-2 py-1 text-[11px]",
|
|
item.empfehlung.empfehlung === "ANNEHMEN" && "border-emerald-500/30 bg-emerald-500/5 text-emerald-300",
|
|
item.empfehlung.empfehlung === "ABLEHNEN" && "border-red-500/30 bg-red-500/5 text-red-300",
|
|
item.empfehlung.empfehlung === "UNKLAR" && "border-amber-500/30 bg-amber-500/5 text-amber-300")}
|
|
title={`Nächtliches Kurz-Gutachten (${item.empfehlung.richter}) — eine Meinung, kein Muss. Die Entscheidung bleibt bei dir.`}>
|
|
<Sparkles className="mt-0.5 h-3 w-3 shrink-0" />
|
|
<span><b>Empfehlung: {item.empfehlung.empfehlung === "ANNEHMEN" ? "Annehmen" : item.empfehlung.empfehlung === "ABLEHNEN" ? "Ablehnen" : "Unklar"}.</b> {item.empfehlung.satz}</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{!running && !decided && (
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
{!item.verwaist && (
|
|
<button
|
|
disabled={!!busy[k]}
|
|
onClick={() =>
|
|
showConfirm("Vorschlag annehmen?",
|
|
isLucy
|
|
? `'${item.branch}' wird im Lucy-Repo auf main gemergt, dann baut dein PC die App neu (dist) und startet Lucy neu, falls sie gerade läuft. Der PC muss dafür an sein. Schlägt Build oder Start fehl, dreht die Box den Merge automatisch zurück — die laufende Lucy bleibt die alte.`
|
|
: `'${item.branch}' wird auf main gemergt und live eingespielt. Die Zentrale startet dabei kurz neu. Geht der Health-Check danach rot, rollt die Box automatisch zurück.${item.frontend_ohne_build ? "\n\nAchtung: Enthält Frontend-Quelltext ohne gebautes Bundle — die Oberfläche bleibt alt, bis am PC gebaut wird." : ""}`,
|
|
() => onAct(k, "/api/auftragsbuch/annehmen", { branch: item.branch, repo }))}
|
|
className="flex h-9 items-center gap-1.5 rounded-lg border border-emerald-500/40 bg-emerald-500/10 px-3 text-[11px] font-bold uppercase tracking-wide text-emerald-300 transition-all hover:bg-emerald-500/20 cursor-pointer disabled:opacity-50">
|
|
{busy[k] ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Check className="h-3.5 w-3.5" />} Annehmen
|
|
</button>
|
|
)}
|
|
<button
|
|
disabled={!!busy["ab:" + k]}
|
|
onClick={() => setRejecting((v) => !v)}
|
|
className="flex h-9 items-center gap-1.5 rounded-lg border border-red-500/30 bg-red-500/5 px-3 text-[11px] font-bold uppercase tracking-wide text-red-300/90 transition-all hover:bg-red-500/15 cursor-pointer disabled:opacity-50">
|
|
{busy["ab:" + k] ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <X className="h-3.5 w-3.5" />} Ablehnen
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{rejecting && !running && !decided && (
|
|
<div className="space-y-2 rounded-xl border border-red-500/25 bg-red-500/5 p-3">
|
|
<p className="text-[11px] text-muted-foreground">
|
|
Der Branch '{item.branch}' wird auf Gitea gelöscht (die Arbeit bleibt in der Historie).
|
|
Sag der Box kurz <b>warum</b> — dann schlägt sie dir so etwas nicht wieder vor.
|
|
</p>
|
|
<input
|
|
value={grund}
|
|
onChange={(e) => setGrund(e.target.value)}
|
|
placeholder={"Grund (optional) — z. B. „gibt es schon“ oder „will ich nicht“"}
|
|
maxLength={400}
|
|
className="w-full rounded-lg border border-border/60 bg-background/60 px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground/50 focus:border-red-400/50 focus:outline-none"
|
|
/>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
disabled={!!busy["ab:" + k]}
|
|
onClick={() => {
|
|
setRejecting(false)
|
|
onAct("ab:" + k, "/api/auftragsbuch/ablehnen", { branch: item.branch, repo, grund: grund.trim() })
|
|
}}
|
|
className="flex h-8 items-center gap-1.5 rounded-lg border border-red-500/40 bg-red-500/10 px-3 text-[11px] font-bold uppercase tracking-wide text-red-300 transition-all hover:bg-red-500/20 cursor-pointer disabled:opacity-50">
|
|
<X className="h-3.5 w-3.5" /> Wirklich ablehnen
|
|
</button>
|
|
<button
|
|
onClick={() => setRejecting(false)}
|
|
className="flex h-8 items-center rounded-lg border border-border/60 bg-background/40 px-3 text-[11px] font-semibold text-muted-foreground transition-all hover:text-foreground cursor-pointer">
|
|
Abbrechen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{item.status && (running || !decided) && item.status.detail && (
|
|
<p className="text-[11px] text-muted-foreground">{item.status.detail}</p>
|
|
)}
|
|
|
|
{item.verwaist && (
|
|
<p className="rounded-lg border border-red-500/30 bg-red-500/5 px-2 py-1.5 text-[11px] text-red-300/90">
|
|
<b>Kaputt aufgesetzt:</b> Dieser Branch hat keinen gemeinsamen Ursprung mit main (der Werkstatt-Worker
|
|
hat nicht richtig geklont) — Annehmen ist technisch unmöglich, deshalb fehlt der Knopf.
|
|
Am besten <b>ablehnen mit Grund</b>; die Idee kann danach frisch in die Queue.
|
|
</p>
|
|
)}
|
|
|
|
<div className="flex flex-wrap items-center gap-2 text-[11px] text-muted-foreground">
|
|
<span className="rounded bg-background/40 px-1.5 py-0.5 font-mono">{item.ahead} Commit{item.ahead === 1 ? "" : "s"}</span>
|
|
{item.shortstat && <span className="rounded bg-background/40 px-1.5 py-0.5 font-mono">{item.shortstat.trim()}</span>}
|
|
{item.verwaist && (
|
|
<span className="flex items-center gap-1 rounded bg-red-500/10 px-1.5 py-0.5 text-red-300" title="Kein gemeinsamer Vorfahre mit main — git kann diesen Branch niemals mergen.">
|
|
<AlertTriangle className="h-3 w-3" /> kein gemeinsamer Ursprung
|
|
</span>
|
|
)}
|
|
{item.leer && (
|
|
<span className="flex items-center gap-1 rounded bg-amber-500/10 px-1.5 py-0.5 text-amber-300" title="Der Diff gegen main ist leer — der Branch würde nichts verändern (Inhalt schon in main oder am Repo vorbei gearbeitet).">
|
|
<AlertTriangle className="h-3 w-3" /> Diff leer — bringt nichts
|
|
</span>
|
|
)}
|
|
{item.behind > 0 && !item.verwaist && (
|
|
<span className="flex items-center gap-1 rounded bg-amber-500/10 px-1.5 py-0.5 text-amber-300" title="main ist seit diesem Vorschlag weitergelaufen — bei Konflikten versucht die Annahme automatisch einen Rebase.">
|
|
<AlertTriangle className="h-3 w-3" /> {item.behind} hinter main
|
|
</span>
|
|
)}
|
|
{item.frontend_ohne_build && (
|
|
<span className="flex items-center gap-1 rounded bg-amber-500/10 px-1.5 py-0.5 text-amber-300" title="Die Box kann kein Frontend bauen (kein Node) — nach dem Annehmen bleibt die Oberfläche alt, bis am PC gebaut wird.">
|
|
<AlertTriangle className="h-3 w-3" /> Frontend ohne Build
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<button onClick={loadDiff}
|
|
className="flex items-center gap-1.5 text-[11px] font-semibold text-muted-foreground hover:text-foreground transition-colors cursor-pointer">
|
|
{open ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
|
|
<FileDiff className="h-3.5 w-3.5" /> {item.files.length} Datei{item.files.length === 1 ? "" : "en"} — Änderungen ansehen
|
|
</button>
|
|
{open && (
|
|
<div className="mt-2 space-y-2">
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{item.files.map((f) => (
|
|
<span key={f.path} className="rounded bg-background/40 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
|
|
<b className={cn(f.status.startsWith("A") && "text-emerald-400", f.status.startsWith("D") && "text-red-400", f.status.startsWith("M") && "text-sky-400")}>{f.status}</b> {f.path}
|
|
</span>
|
|
))}
|
|
{item.files_truncated && <span className="text-[10px] text-muted-foreground/60">…</span>}
|
|
</div>
|
|
<div className="max-h-96 overflow-auto rounded-xl border border-border/50 bg-background/50 p-3">
|
|
{diffLoading
|
|
? <span className="text-[11px] text-muted-foreground">Diff wird geladen …</span>
|
|
: <pre className="text-[10px] leading-relaxed text-foreground/80 whitespace-pre">{
|
|
(diff ?? "").split("\n").map((ln, i) => (
|
|
<span key={i} className={cn("block", ln.startsWith("+") && !ln.startsWith("+++") && "text-emerald-300/90 bg-emerald-500/5", ln.startsWith("-") && !ln.startsWith("---") && "text-red-300/90 bg-red-500/5", (ln.startsWith("@@") || ln.startsWith("diff ")) && "text-sky-300/90")}>{ln || " "}</span>
|
|
))
|
|
}</pre>}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function KandidatCard({
|
|
k, busy, onAct, showConfirm,
|
|
}: {
|
|
k: SkillKandidat
|
|
busy: Record<string, boolean>
|
|
onAct: (key: string, path: string, body: object, done?: string) => void
|
|
showConfirm: (title: string, msg: string, ok: () => void) => void
|
|
}) {
|
|
const [open, setOpen] = useState(false)
|
|
return (
|
|
<div className="rounded-2xl border border-violet-500/25 bg-violet-500/[0.04] p-4 shadow-lg shadow-black/15 backdrop-blur-md space-y-3">
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="rounded-md border border-violet-500/30 bg-violet-500/10 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-violet-300">Traum-Idee</span>
|
|
<span className="font-mono text-[11px] text-muted-foreground truncate">{k.file}</span>
|
|
<span className="flex items-center gap-1 text-[10px] text-muted-foreground/70"><Clock className="h-3 w-3" />{fmtWhen(k.mtime)}</span>
|
|
</div>
|
|
<p className="mt-1.5 text-sm font-semibold text-foreground">{k.title}</p>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<button
|
|
disabled={!!busy["sk:" + k.file]}
|
|
onClick={() =>
|
|
showConfirm("Werkstatt beauftragen?",
|
|
`Der Kandidat '${k.title}' geht als Auftrag an die Werkstatt (Orchestrator, propose-only). Das Ergebnis erscheint später als neuer Patch-Vorschlag hier im Auftragsbuch — nichts geht ungefragt live.`,
|
|
() => onAct("sk:" + k.file, "/api/auftragsbuch/skill/annehmen", { file: k.file },
|
|
"Die Werkstatt arbeitet. Das Ergebnis taucht als neuer Vorschlag im Auftragsbuch auf (das kann einige Minuten dauern)."))}
|
|
className="flex h-9 items-center gap-1.5 rounded-lg border border-violet-500/40 bg-violet-500/10 px-3 text-[11px] font-bold uppercase tracking-wide text-violet-300 transition-all hover:bg-violet-500/20 cursor-pointer disabled:opacity-50">
|
|
{busy["sk:" + k.file] ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Hammer className="h-3.5 w-3.5" />} Beauftragen
|
|
</button>
|
|
<button
|
|
disabled={!!busy["skab:" + k.file]}
|
|
onClick={() =>
|
|
showConfirm("Kandidat verwerfen?",
|
|
`'${k.title}' wandert ins Archiv des Wissens-Vaults (verworfen/). Der Traum schlägt ihn nicht erneut vor.`,
|
|
() => onAct("skab:" + k.file, "/api/auftragsbuch/skill/ablehnen", { file: k.file }))}
|
|
className="flex h-9 items-center gap-1.5 rounded-lg border border-red-500/30 bg-red-500/5 px-3 text-[11px] font-bold uppercase tracking-wide text-red-300/90 transition-all hover:bg-red-500/15 cursor-pointer disabled:opacity-50">
|
|
{busy["skab:" + k.file] ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <X className="h-3.5 w-3.5" />} Verwerfen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button onClick={() => setOpen((o) => !o)}
|
|
className="flex items-center gap-1.5 text-[11px] font-semibold text-muted-foreground hover:text-foreground transition-colors cursor-pointer">
|
|
{open ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
|
|
<Inbox className="h-3.5 w-3.5" /> Vorschlag lesen
|
|
</button>
|
|
{open && (
|
|
<pre className="max-h-72 overflow-auto rounded-xl border border-border/50 bg-background/50 p-3 text-[11px] leading-relaxed text-foreground/85 whitespace-pre-wrap">{k.preview}</pre>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|