Implement TaskDisplay component with child tool status #8312

Closed
opened 2026-02-16 18:09:40 -05:00 by yindo · 0 comments
Owner

Originally created by @randomm on GitHub (Feb 2, 2026).

Originally assigned to: @thdxr on GitHub.

Parent Epic

Part of #11762 (Ink-based TUI Rewrite)

Objective

Create component to display task (subagent) calls with nested child tool status - this is the feature that keeps breaking in the current implementation.

Current Desired Behavior

⠋ task @git-agent: Get current project state (15s)
  → bash: git status... 8s

Component Design

interface TaskDisplayProps {
  id: string
  agent: string
  description: string
  status: 'running' | 'done'
  elapsed: number
  childTool?: {
    name: string
    summary: string
    elapsed: number
  }
}

const TaskDisplay: React.FC<TaskDisplayProps> = ({ 
  agent, description, status, elapsed, childTool 
}) => {
  return (
    <Box flexDirection="column">
      <Box>
        {status === 'running' ? <Spinner type="dots" /> : <Text color="green"></Text>}
        <Text> task </Text>
        <Text color="cyan">@{agent}:</Text>
        <Text> {description}</Text>
        {elapsed > 0 && <Text dimColor> ({elapsed}s)</Text>}
      </Box>
      {status === 'running' && childTool && (
        <Box marginLeft={2}>
          <Text dimColor> </Text>
          <Text>{childTool.name}: </Text>
          <Text>{childTool.summary || 'running'}</Text>
          {childTool.elapsed >= 2 && <Text>... {childTool.elapsed}s</Text>}
        </Box>
      )}
    </Box>
  )
}

Tasks

  • Create src/cli/ink/components/TaskDisplay.tsx
  • Implement main task line with spinner/checkmark
  • Implement nested child tool status line
  • Handle elapsed time updates (re-render every second)
  • Apply theming consistent with ToolDisplay
  • Handle edge cases:
    • Task with no child tool yet (show spinner only)
    • Task with stale child tool (keep showing last known)
    • Task completion (show final elapsed time)

Key Difference from Current Implementation

In React/Ink, state updates batch naturally. We don't need:

  • pausedForProse hacks
  • Manual render scheduling
  • Complex event buffering

The child tool state is just props - when SDK events update state, React re-renders.

Acceptance Criteria

  • Task displays with spinner while running
  • Child tool status shows when available
  • Elapsed time updates every second
  • No crashes when prose is streaming simultaneously
  • Completion shows checkmark and final time

Estimated Effort

1.5 days

Risk

Medium - This is the feature that kept breaking. React should help but same SDK complexity exists.

Dependencies

  • #11763 (Setup Ink dependencies)
  • #11764 (App component)
  • #11766 (ToolDisplay - for consistency)
Originally created by @randomm on GitHub (Feb 2, 2026). Originally assigned to: @thdxr on GitHub. ## Parent Epic Part of #11762 (Ink-based TUI Rewrite) ## Objective Create component to display task (subagent) calls with nested child tool status - this is the feature that keeps breaking in the current implementation. ## Current Desired Behavior ``` ⠋ task @git-agent: Get current project state (15s) → bash: git status... 8s ``` ## Component Design ```tsx interface TaskDisplayProps { id: string agent: string description: string status: 'running' | 'done' elapsed: number childTool?: { name: string summary: string elapsed: number } } const TaskDisplay: React.FC<TaskDisplayProps> = ({ agent, description, status, elapsed, childTool }) => { return ( <Box flexDirection="column"> <Box> {status === 'running' ? <Spinner type="dots" /> : <Text color="green">✓</Text>} <Text> task </Text> <Text color="cyan">@{agent}:</Text> <Text> {description}</Text> {elapsed > 0 && <Text dimColor> ({elapsed}s)</Text>} </Box> {status === 'running' && childTool && ( <Box marginLeft={2}> <Text dimColor>→ </Text> <Text>{childTool.name}: </Text> <Text>{childTool.summary || 'running'}</Text> {childTool.elapsed >= 2 && <Text>... {childTool.elapsed}s</Text>} </Box> )} </Box> ) } ``` ## Tasks - [ ] Create `src/cli/ink/components/TaskDisplay.tsx` - [ ] Implement main task line with spinner/checkmark - [ ] Implement nested child tool status line - [ ] Handle elapsed time updates (re-render every second) - [ ] Apply theming consistent with ToolDisplay - [ ] Handle edge cases: - Task with no child tool yet (show spinner only) - Task with stale child tool (keep showing last known) - Task completion (show final elapsed time) ## Key Difference from Current Implementation In React/Ink, state updates batch naturally. We don't need: - `pausedForProse` hacks - Manual render scheduling - Complex event buffering The child tool state is just props - when SDK events update state, React re-renders. ## Acceptance Criteria - [ ] Task displays with spinner while running - [ ] Child tool status shows when available - [ ] Elapsed time updates every second - [ ] No crashes when prose is streaming simultaneously - [ ] Completion shows checkmark and final time ## Estimated Effort 1.5 days ## Risk Medium - This is the feature that kept breaking. React should help but same SDK complexity exists. ## Dependencies - #11763 (Setup Ink dependencies) - #11764 (App component) - #11766 (ToolDisplay - for consistency)
yindo added the opentui label 2026-02-16 18:09:40 -05:00
yindo closed this issue 2026-02-16 18:09:40 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#8312