Workbench-Pattern

Die 2-bis-3-Spalten-Workbench ist das primaere Anwendungs-UI-Pattern fuer die Verwaltung von Arbeitselementen, Faellen, Tickets oder beliebigen Entitaeten mit einem Listen-Detail-Kontext-Workflow. Sie bietet eine persistente Listenansicht, einen austauschbaren Detailbereich und eine optionale dritte Spalte fuer kontextbezogene Inhalte wie Notizen.

Pattern Overview

2-Pane Default

List pane (left) + detail pane (right). Click an item in the list to load its detail via htmx partial. The detail pane swaps content without full-page reload. Selection state is tracked client-side with Alpine.js.

3-Pane on Demand

A third notes/context pane appears on the right when triggered by a CTA on a detail item. The detail pane narrows to accommodate. Close the third pane to return to the 2-pane layout.

Key Techniques

Negative margins break out of AppShell padding. Alpine.js toggles grid classes and pane visibility. htmx swaps pane content. CSS transitions keep layout shifts smooth.

CSS Class Reference

Class	Purpose
`lmn-workbench-grid`	12-col grid for 2-pane layout (list 4 + detail 8)
`lmn-workbench-grid-with-notes`	12-col grid for 3-pane layout (list 4 + detail 5 + notes 3)
`lmn-workbench-pane-list`	Left list pane (col-span-4 / col-span-3)
`lmn-workbench-pane-detail`	Detail pane in 2-pane mode (col-span-8 / col-span-9)
`lmn-workbench-pane-detail-with-notes`	Detail pane in 3-pane mode (col-span-5)
`lmn-workbench-pane-notes`	Third pane for contextual content (col-span-3 / col-span-4)
`lmn-ticket-list`	Divided list container for items
`lmn-ticket-item`	Clickable list item with hover state
`lmn-ticket-item-selected`	Active selection highlight
`lmn-timeline-event`	Timeline entry container (flex with rail)
`lmn-timeline-card`	Content card for standard entries
`lmn-timeline-card-ai`	Content card for AI-generated entries
`lmn-notes-header`	Notes pane header with close button
`lmn-note-card`	Individual note card
`lmn-docref-strip`	Document reference strip container (inline in timeline card)
`lmn-docref-item`	Single document reference row
`lmn-docref-mapping`	Mapping pill with entity label (combine with mapped/excluded/unmapped)
`lmn-docref-mapping-dot`	Colored status dot inside the mapping pill
`lmn-docref-mapped`	Positive mapping indicator (green)
`lmn-docref-excluded`	Negative mapping indicator (red)
`lmn-docref-unmapped`	Unknown mapping indicator (gray)
`lmn-workflow-editor-shell`	Workflow-editor container with toolbar and editable step list
`lmn-workflow-editor-step`	Single editable step card with controls and form fields
`lmn-workflow-editor-missing-card`	Callout card for unsupported or currently missing trigger definitions
`lmn-workflow-editor-empty-card`	Dashed empty-state card for editor onboarding and missing-data prompts

Workflow Editor Pattern

Use this pattern when operators need to edit an ordered step definition with a clear left-hand list of available definitions and a right-hand detail editor. The editing surface should feel safe, structured, and strongly aligned with the workbench shell instead of devolving into ad hoc admin forms.

Lookup

lookup

Step type

Step ID

Instruction

Draft

draft

Step type

Step ID

Instruction

Missing trigger definition

Use a dashed callout card when the operator can create a definition for a supported trigger that does not yet have one.

Document Reference Strip

Appears inline below AI lookup results in the case timeline. Shows which knowledge base documents were used, their relevance score, and mapping status for each entity in the case context. Users can click mapping indicators to toggle mappings without leaving the case.

Mietvertrag Einheit 12A: Aktuelle Miete 1.450 EUR/Monat, Vertragslaufzeit bis 30.04.2025. Verlaengerungsklausel vorhanden.

Sources (4)

Mietvertrag Anna Schmidt 2022 92% Unit 12A Anna Schmidt

Hausordnung Flussufer Apartments 71% Unit 12A Anna Schmidt

Betriebskosteninfo 2025 55% Unit 12A Anna Schmidt

Allgemeine Mietrechtsinfo 42% Unit 12A Anna Schmidt

Indicator States

Click cycles: unmapped → mapped → excluded → unmapped

Mapped Excluded Unmapped

Interactive Demo

Click items, open notes, and resize to see the responsive layout in action.

a3f8c291 New

Flussufer Apartments

Unit 12A — Lease Renewal

Created: 10 Mar 2026 14:22

Updated: 10 Mar 2026 14:35

Contact

Anna Schmidt

AI Assistant Summary

2 AI-assisted actions on this case. 1 draft awaiting review.

Lookup Draft

Communication History

Anna Schmidt Inbound Message

10 Mar 14:22

Sehr geehrte Damen und Herren, mein Mietvertrag fuer die Wohnung 12A in den Flussufer Apartments laeuft bald aus. Ich wuerde gerne ueber eine Verlaengerung sprechen. Mit freundlichen Gruessen, Anna Schmidt

KI-Assistent AI Action - Lookup

10 Mar 14:23

Mietvertrag Einheit 12A, Flussufer Apartments. Aktuelle Miete: 1.450 EUR/Monat. Vertragslaufzeit bis 30.04.2025. Verlaengerungsklausel vorhanden. Marktanpassung: +3,2%.