# Feedback & Display Components

# Feedback & Display Components

<details>
<summary>Relevant source files</summary>

The following files were used as context for generating this wiki page:

- [src/lib/colors/badge.ts](src/lib/colors/badge.ts)
- [src/lib/components/ui/JsonTableViewer.svelte](src/lib/components/ui/JsonTableViewer.svelte)
- [src/lib/components/ui/alert/alert.svelte](src/lib/components/ui/alert/alert.svelte)
- [src/lib/components/ui/dock/ctx.ts](src/lib/components/ui/dock/ctx.ts)
- [src/lib/components/ui/dock/dock-icon.svelte](src/lib/components/ui/dock/dock-icon.svelte)
- [src/lib/components/ui/dock/dock-separator.svelte](src/lib/components/ui/dock/dock-separator.svelte)
- [src/lib/components/ui/dock/index.ts](src/lib/components/ui/dock/index.ts)
- [src/lib/components/ui/event-card/event-card-label.svelte](src/lib/components/ui/event-card/event-card-label.svelte)
- [src/lib/components/ui/event-card/event-card-message.svelte](src/lib/components/ui/event-card/event-card-message.svelte)
- [src/lib/components/ui/event-card/event-card-root.svelte](src/lib/components/ui/event-card/event-card-root.svelte)
- [src/lib/components/ui/event-card/event-card-time.svelte](src/lib/components/ui/event-card/event-card-time.svelte)
- [src/lib/components/ui/event-card/event-card-title.svelte](src/lib/components/ui/event-card/event-card-title.svelte)
- [src/lib/components/ui/event-card/event-card.svelte](src/lib/components/ui/event-card/event-card.svelte)
- [src/lib/components/ui/event-card/index.ts](src/lib/components/ui/event-card/index.ts)
- [src/lib/components/ui/resizable/index.ts](src/lib/components/ui/resizable/index.ts)
- [src/lib/components/ui/resizable/resizable-handle.svelte](src/lib/components/ui/resizable/resizable-handle.svelte)
- [src/lib/components/ui/resizable/resizable-pane-group.svelte](src/lib/components/ui/resizable/resizable-pane-group.svelte)
- [src/lib/components/ui/rfc-error-dialog.svelte](src/lib/components/ui/rfc-error-dialog.svelte)
- [src/lib/components/ui/scroll-area/index.ts](src/lib/components/ui/scroll-area/index.ts)
- [src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte](src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte)
- [src/lib/components/ui/scroll-area/scroll-area.svelte](src/lib/components/ui/scroll-area/scroll-area.svelte)
- [src/lib/components/ui/skeleton/skeleton.svelte](src/lib/components/ui/skeleton/skeleton.svelte)
- [src/lib/components/ui/sonner/index.ts](src/lib/components/ui/sonner/index.ts)
- [src/lib/components/ui/sonner/sonner.svelte](src/lib/components/ui/sonner/sonner.svelte)
- [src/lib/components/ui/sortable/ctx.ts](src/lib/components/ui/sortable/ctx.ts)
- [src/lib/components/ui/sortable/index.ts](src/lib/components/ui/sortable/index.ts)
- [src/lib/components/ui/sortable/sortable-handle.svelte](src/lib/components/ui/sortable/sortable-handle.svelte)
- [src/lib/components/ui/sortable/sortable-item.svelte](src/lib/components/ui/sortable/sortable-item.svelte)
- [src/lib/components/ui/sortable/sortable.svelte](src/lib/components/ui/sortable/sortable.svelte)
- [src/lib/components/ui/tooltip/index.ts](src/lib/components/ui/tooltip/index.ts)
- [src/lib/components/ui/tooltip/tooltip-content.svelte](src/lib/components/ui/tooltip/tooltip-content.svelte)
- [src/lib/components/ui/window/index.ts](src/lib/components/ui/window/index.ts)
- [src/lib/components/ui/window/window.svelte](src/lib/components/ui/window/window.svelte)
- [src/lib/shell/sheets/panels/ErrorsPanel.svelte](src/lib/shell/sheets/panels/ErrorsPanel.svelte)

</details>



This section documents the UI components responsible for communicating system status, displaying structured data, and providing interactive visual feedback. These components range from simple status indicators like `Badge` and `Alert` to complex interactive systems like `Sortable` drag-and-drop and the `JsonTableViewer`.

## Status & Feedback Primitives

### Alert
The `Alert` component follows the `shadcn-svelte` pattern but includes specialized variants to align with the application's impact-level taxonomy [src/lib/components/ui/alert/alert.svelte:8-27]().

| Variant | Description | CSS Hook |
| :--- | :--- | :--- |
| `default` | Standard informational alert. | `border-border bg-background` |
| `destructive` | Standard error alert. | `border-destructive/30 bg-destructive/5` |
| `impactCritical` | Maps to `CRITICAL` impact level. | `pb-shell-error-card--critical` |
| `impactHigh` | Maps to `HIGH` impact level. | `pb-shell-error-card--error` |
| `impactMedium` | Maps to `MEDIUM` impact level. | `pb-shell-error-card--warning` |
| `impactLow` | Maps to `LOW` impact level. | `pb-shell-error-card--info` |

**Sources:** [src/lib/components/ui/alert/alert.svelte:1-56]()

### Badge
The `Badge` component utilizes a specialized utility, `badgeClassesFromToken`, to map Tailwind-like color tokens (e.g., `zinc-300`) to high-contrast accessible color schemes [src/lib/colors/badge.ts:19-23](). It calculates appropriate background and text colors to ensure "Excel-like" readability [src/lib/colors/badge.ts:25-32]().

**Sources:** [src/lib/colors/badge.ts:1-75]()

### EventCard
Used primarily in the `ErrorsPanel` to display log entries and system events [src/lib/shell/sheets/panels/ErrorsPanel.svelte:136-190](). It provides a structured layout including a label, title, message, and timestamp.

**Sources:** [src/lib/components/ui/event-card/event-card.svelte:1-45](), [src/lib/components/ui/event-card/event-card-time.svelte:1-24]()

## Error Visualization

### RFC Error Dialog
A specialized full-screen dialog for inspecting `RFC7807` compliant error objects [src/lib/components/ui/rfc-error-dialog.svelte:18-38](). It features a dual-mode preview:
1.  **Aesthetic Mode**: Renders the error data using `JsonTableViewer` [src/lib/components/ui/rfc-error-dialog.svelte:159]().
2.  **Raw Mode**: Renders a syntax-highlighted JSON string using the `shiki` highlighter [src/lib/components/ui/rfc-error-dialog.svelte:61-72]().

The dialog uses a `Dock` component at the top to toggle between these modes [src/lib/components/ui/rfc-error-dialog.svelte:123-144]().

**Sources:** [src/lib/components/ui/rfc-error-dialog.svelte:1-200]()

### JsonTableViewer
A recursive component that transforms complex JSON objects into a readable table/grid structure [src/lib/components/ui/JsonTableViewer.svelte:7-11]().
-   **Root Level**: Uses `Table.Root` for primary properties [src/lib/components/ui/JsonTableViewer.svelte:21-63]().
-   **Nested Level**: Uses a CSS grid layout to maintain alignment without breaking table semantics [src/lib/components/ui/JsonTableViewer.svelte:66-109]().
-   **Arrays**: Renders indices as "Item X" badges [src/lib/components/ui/JsonTableViewer.svelte:74-76]().

**Sources:** [src/lib/components/ui/JsonTableViewer.svelte:1-111]()

### Mapping Error Data to UI
The following diagram illustrates how raw error data flows into the specialized feedback components.

**Error Display Data Flow**
```mermaid
graph TD
    subgraph "Data Space"
        RFC["RFC7807Error Object"]
        IL["ImpactLevel: CRITICAL|HIGH|MEDIUM|LOW"]
    end

    subgraph "Component Space"
        RED["rfc-error-dialog.svelte"]
        JTV["JsonTableViewer.svelte"]
        EC["EventCard.svelte"]
        AV["alertVariants"]
    end

    RFC -->|Passed to| RED
    RED -->|Recursive Render| JTV
    IL -->|impactToEventColor| EC
    IL -->|impactToAlertVariant| AV
```
**Sources:** [src/lib/components/ui/rfc-error-dialog.svelte:47-50](), [src/lib/shell/sheets/panels/ErrorsPanel.svelte:69-80](), [src/lib/components/ui/alert/alert.svelte:17-21]()

## Layout & Interactive Components

### Sortable (Drag-and-Drop)
The `Sortable` system provides a Svelte 5 rune-based implementation for reordering lists. It consists of three main parts:
1.  **Sortable**: The root container that manages the global drag state and reordering logic [src/lib/components/ui/sortable/sortable.svelte:6-18]().
2.  **SortableItem**: A wrapper for individual list items that handles `dragstart` and `dragover` events [src/lib/components/ui/sortable/sortable-item.svelte:23-44]().
3.  **SortableHandle**: A specific sub-element that "arms" the parent item for dragging, preventing accidental drags when interacting with other item content [src/lib/components/ui/sortable/sortable-handle.svelte:14-18]().

The system uses a `move` function with `getBoundingClientRect` to perform FLIP (First, Last, Invert, Play) animations during reordering [src/lib/components/ui/sortable/sortable.svelte:86-112]().

**Sources:** [src/lib/components/ui/sortable/sortable.svelte:1-190](), [src/lib/components/ui/sortable/sortable-item.svelte:1-46](), [src/lib/components/ui/sortable/sortable-handle.svelte:1-25]()

### Dock
Inspired by macOS, the `Dock` provides a magnified icon navigation bar. It uses `svelte-motion` for spring-based animations [src/lib/components/ui/dock/dock-icon.svelte:39-43](). The magnification is calculated based on the mouse's proximity to the icon center using `useTransform` [src/lib/components/ui/dock/dock-icon.svelte:28-37]().

**Sources:** [src/lib/components/ui/dock/dock-icon.svelte:1-78]()

### Window & Resizable
-   **Window**: A container for modular UI pieces, often used for floating utilities.
-   **Resizable**: Provides `ResizablePaneGroup` and `ResizableHandle` for creating adjustable multi-column or multi-row layouts.

**Sources:** [src/lib/components/ui/window/window.svelte](), [src/lib/components/ui/resizable/resizable-pane-group.svelte]()

## Visual Interaction Flow

The interaction between `Sortable` entities and their internal state is managed via a shared context.

**Sortable Component Interaction**
```mermaid
sequenceDiagram
    participant H as SortableHandle
    participant I as SortableItem
    participant R as Sortable (Root)
    
    H->>I: onmousedown (sets data-sortable-drag-armed)
    I->>R: ondragstart (calls ctx.onDragStart)
    R->>R: startGlobalDragMode()
    Note over R: items array reordered in $state
    I->>R: ondragover (calls ctx.onDragOver)
    R->>R: move(from, to) with FLIP animation
    I->>R: ondragend (calls ctx.onDragEnd)
    R->>R: stopGlobalDragMode()
```
**Sources:** [src/lib/components/ui/sortable/sortable-handle.svelte:14-18](), [src/lib/components/ui/sortable/sortable-item.svelte:29-37](), [src/lib/components/ui/sortable/sortable.svelte:118-132](), [src/lib/components/ui/sortable/sortable.svelte:86-112]()

## Miscellaneous Display
-   **Tooltip**: Wraps elements to show brief descriptions on hover, utilizing `bits-ui` primitives [src/lib/components/ui/tooltip/tooltip-content.svelte:14-22]().
-   **Skeleton**: Provides placeholder loading states [src/lib/components/ui/skeleton/skeleton.svelte]().
-   **ScrollArea**: A custom-styled scrollbar implementation [src/lib/components/ui/scroll-area/scroll-area.svelte]().
-   **Sonner**: Integration for transient toast notifications.

**Sources:** [src/lib/components/ui/tooltip/tooltip-content.svelte:1-23](), [src/lib/components/ui/sonner/sonner.svelte]()

---