Add visual distinction for terminal components in workbench UI #26

New issue

Open

opened 2025-12-14 06:23:08 +00:00 by blightbow · 0 comments

blightbow commented

2025-12-14 06:23:08 +00:00

Owner

Summary

Update the workbench frontend to visually distinguish terminal components (pending_event, tool_result) from reorderable components, making it clear they cannot be reordered.

Background

This is Phase 3 of the terminal component separation work from #16. The backend now marks terminal components with is_terminal: true, but the frontend needs to reflect this visually.

Requirements

Visual Distinction

Terminal components should appear in a separate "Terminal Zone" section
Different background color or border style (e.g., muted/grayed)
No drag handles on terminal components
Clear label: "Terminal Zone - Fixed Order"

Behavior

Terminal components should not be draggable
Attempting to drag should show a tooltip explaining why
Order within terminal zone is fixed (pending_event, then tool_result)

Mockup Concept

┌─────────────────────────────────────┐
│  Reorderable Components             │
│  ┌─────────────────────────────┐   │
│  │ ≡ system_prompt      [0]    │   │
│  │ ≡ character_context  [1000] │   │
│  │ ≡ entity_context     [2000] │   │
│  │ ...                         │   │
│  └─────────────────────────────┘   │
│                                     │
│  Terminal Zone (Fixed Order)        │
│  ┌─────────────────────────────┐   │
│  │   pending_event             │   │  ← No drag handle
│  │   tool_result               │   │  ← No drag handle
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

Technical Notes

Check for is_terminal: true in component data
Components come pre-sorted from API (terminal always last)
May need to split component list into two groups for rendering

Depends on backend changes from #16
Benefits from #XX (Render Preview API) for preview button

## Summary Update the workbench frontend to visually distinguish terminal components (pending_event, tool_result) from reorderable components, making it clear they cannot be reordered. ## Background This is Phase 3 of the terminal component separation work from #16. The backend now marks terminal components with `is_terminal: true`, but the frontend needs to reflect this visually. ## Requirements ### Visual Distinction - Terminal components should appear in a separate "Terminal Zone" section - Different background color or border style (e.g., muted/grayed) - No drag handles on terminal components - Clear label: "Terminal Zone - Fixed Order" ### Behavior - Terminal components should not be draggable - Attempting to drag should show a tooltip explaining why - Order within terminal zone is fixed (pending_event, then tool_result) ### Mockup Concept ``` ┌─────────────────────────────────────┐ │ Reorderable Components │ │ ┌─────────────────────────────┐ │ │ │ ≡ system_prompt [0] │ │ │ │ ≡ character_context [1000] │ │ │ │ ≡ entity_context [2000] │ │ │ │ ... │ │ │ └─────────────────────────────┘ │ │ │ │ Terminal Zone (Fixed Order) │ │ ┌─────────────────────────────┐ │ │ │ pending_event │ │ ← No drag handle │ │ tool_result │ │ ← No drag handle │ └─────────────────────────────┘ │ └─────────────────────────────────────┘ ``` ## Technical Notes - Check for `is_terminal: true` in component data - Components come pre-sorted from API (terminal always last) - May need to split component list into two groups for rendering ## Related - Depends on backend changes from #16 - Benefits from #XX (Render Preview API) for preview button