refactor(team): zweite Überarbeitungsrunde — Oberfläche bereinigen

Gezielte UI-Bereinigung ohne neue Architektur. Bestehende Komponenten angepasst,
Datenstrukturen und Routing unverändert.

GLOBAL
Chip «Verwaltung» und Seitenname in der Kopfzeile entfallen auf /supply/team/*;
die Seiten tragen ihren Titel bereits gross im Inhalt. Andere Module behalten die
Zeile. Demo-Modus-Hinweis und alle Untertitel entfernt. Autonomiegrad aus der
Oberfläche genommen — die Daten bleiben unangetastet.

PERSONALVERWALTUNG
Beschrieb auf zwei Sätze gekürzt, Input/Kernablauf/Output entfallen: das war
Prozessnotation, sie beschrieb wie gearbeitet wird, nicht wofür man jemanden hat.
Zuständigkeiten stehen jetzt im Kopfbereich statt tief im Dossier. Reiterfolge
neu: Agentenbeschrieb, Aufgaben, Kennzahlen, Kanäle & Systeme, Protokoll.
Kanäle und Systeme sind über eine dünne Hülle zusammengeführt — die bestehende
Logik samt Konfigurationsdialog bleibt unberührt. Aufgaben dreispaltig ohne
Zeitplan, Ereignisfilter im Protokoll entfernt.

Der abgelöste Reiter «Systeme» wird weiterhin aufgelöst, damit bestehende
Verweise nicht still auf den ersten Reiter zurückfallen.

ORGANIGRAMM — die eigentliche Korrektur
Der falsch gewählte Agent lag an der Geometrie: `rotate(a) translateY(r)` schiebt
bei a = 0 nach UNTEN, die Drehung wurde aber als `180 − index·step` berechnet.
Damit stand der gewählte Mitarbeitende oben und das Dossier darunter gehörte zum
falschen. Jetzt `−index·step`.

Dazu beruhigt: Zugempfindlichkeit von 0.5 auf 0.22 Grad je Pixel, 10 px Totzone
gegen Zittern, kurzer Zug wechselt höchstens einen Platz, Einrasten in 250 ms,
Auswahl erst nach dem Einrasten. Kreis von 720 auf 460 px.

BEARBEITUNGSVERLAUF
Filter ohne Vorgangstyp, Priorität und Kanal; Suche in Zeile eins, Rest in Zeile
zwei. Karten tragen nur noch Agent, Titel mit Liegenschaft, zwei Zeilen Text und
Zeitstempel — Priorität, Status, Vorgangstyp und Kanal standen auf praktisch
jeder Karte und trugen damit keine Information mehr.

Drawer ohne Verarbeitungsschritte und Aktionshistorie; nur die auslösende
Nachricht plus Quicklink ins Anfragencenter statt des ganzen Verlaufs.
«Fundstellen» heisst «Quellen». Der Entscheidungshinweis heisst jetzt
«Hierzu brauche ich Ihre Entscheidung». Aktionsleiste: pendent Freigeben,
Zurückweisen, Quellen anzeigen, Inserat anzeigen — erledigt nur «Objekt anzeigen».

KANÄLE & SYSTEME, TEAMÜBERSICHT
Kanäle vor Systemen als eigene Abschnitte, vier Karten pro Zeile, Beschreibung
und Statusbadge raus, Regler mit Klartext Aktiv/Inaktiv/Geplant. Die Kreisgrafik
skaliert nach Anzahl sichtbarer Ringe und ist auf die Viewport-Höhe begrenzt,
damit das Kernteam ohne Scrollen vollständig sichtbar bleibt.

Drei Testzusicherungen prüfen jetzt die Abwesenheit statt der Anwesenheit von
Objekt-ID und Rückfragegrund auf der Karte — beides wurde bewusst entfernt.

Typecheck grün, ESLint über die geänderten Dateien grün, Build grün, 413 Tests grün.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-08-04 13:30:32 +02:00
parent 8377ce03b5
commit 177641386a
22 changed files with 667 additions and 784 deletions
+43 -3
View File
@@ -4,7 +4,7 @@ import { AlertTriangle, Mail } from 'lucide-react'
import type { TeamAgent } from '../../domain/teamAgent'
import { AgentStatus } from '../../domain/teamAgent'
import { AgentAvatar } from './AgentAvatar'
import { AgentAutonomyBadge, AgentStatusBadge } from './AgentBadges'
import { AgentStatusBadge } from './AgentBadges'
import { ConfirmDialog } from '../ui'
import { useSetAgentActive } from '../../hooks/useTeamAgents'
import { DS_BG, DS_BORDER, DS_SURFACE, DS_TEXT } from '../../lib/ds'
@@ -14,6 +14,22 @@ interface Props {
agent: TeamAgent
}
/** Mehr als vier Stichworte liest im Kopfbereich niemand mehr. */
const MAX_RESPONSIBILITIES = 4
const LABEL_MAX_CHARS = 42
/**
* Verdichtet eine ausformulierte Zuständigkeit auf ein Stichwort.
* Schneidet am ersten Komma, sonst an der Wortgrenze — der volle Wortlaut
* bleibt als Titel am Element erhalten, es geht also keine Aussage verloren.
*/
function shortLabel(text: string): string {
const head = text.split(',')[0].trim()
if (head.length <= LABEL_MAX_CHARS) return head
const cut = head.slice(0, LABEL_MAX_CHARS)
return `${cut.slice(0, cut.lastIndexOf(' '))}`
}
function MetaField({ label, value }: { label: string; value: string }) {
return (
<Box>
@@ -65,8 +81,33 @@ export function AgentDossierHeader({ agent }: Props) {
<Box sx={{ display: 'flex', gap: 0.75, flexWrap: 'wrap', mt: 1 }}>
<AgentStatusBadge status={agent.status} />
<AgentAutonomyBadge autonomy={agent.autonomyLevel} note={agent.autonomyNote} />
</Box>
{/* Kurzer Beschrieb und Zuständigkeiten stehen jetzt oben statt tief im
Dossier — das ist die Frage, die man beim Öffnen zuerst hat. */}
<Typography variant="body2" sx={{ color: DS_TEXT.secondary, mt: 1.25, maxWidth: '70ch' }}>
{agent.shortDescription}
</Typography>
{agent.responsibilities.length > 0 && (
<Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1, flexWrap: 'wrap', mt: 1.25 }}>
<Typography variant="caption" sx={{ color: DS_TEXT.muted, flexShrink: 0 }}>
Zuständig für:
</Typography>
{agent.responsibilities.slice(0, MAX_RESPONSIBILITIES).map((r, i) => (
<Box key={r} sx={{ display: 'inline-flex', alignItems: 'baseline', gap: 1 }}>
{i > 0 && <Typography aria-hidden variant="caption" sx={{ color: DS_TEXT.disabled }}>·</Typography>}
<Typography
title={r}
variant="caption"
sx={{ color: DS_TEXT.secondary, fontWeight: 600 }}
>
{shortLabel(r)}
</Typography>
</Box>
))}
</Box>
)}
</Box>
<FormControlLabel
@@ -96,7 +137,6 @@ export function AgentDossierHeader({ agent }: Props) {
>
<MetaField label="Personalnummer" value={agent.personnelNumber} />
<MetaField label="Abteilung" value={agent.department} />
<MetaField label="Autonomiegrad" value={agent.autonomyNote} />
<MetaField
label="Letzter Lauf"
value={agent.lastRun ? formatTeamDateTime(agent.lastRun) : 'Noch nicht gelaufen'}