Skip to content

[UI] Response block rendering with left border + task live status #115

@randomm

Description

@randomm

Problem

oclite UI has multiple visual issues compared to opencode TUI:

  1. No visual separation — Agent text mixed with tool calls, no clear blocks
  2. Task line missing live status — Should show → --- or current child tool output below task line
  3. Inconsistent styling — Background color partially applied, truncated

Solution: Vertical Line Border (like TUI)

Use left vertical line () to distinguish agent output — user confirmed this approach is preferred.

Requirements

Left Border on Agent Output

  • Add vertical line () on left side of agent prose/response text
  • Use theme color (cyan or configurable)
  • Tool calls and task lines can remain without border (they have icons)

Task Live Status Line

  • Below each running task line, show: → [current child tool or ---]
  • Update in real-time as child tools execute
  • Clear when task completes

Remove Background Color Approach

  • Remove the theme.prose.bg background color
  • Use vertical line instead for visual distinction

Acceptance Criteria

  • Agent prose text has left vertical border
  • Task lines show live child status below (→ ---)
  • Clean visual separation between user and agent
  • No truncated/inconsistent background colors

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions