Feature: Visual Conversation Timeline for Navigation and Branching - aka 'Branch' #1020

User Story

As a user, I want to view my conversation history as a visual graph so that I can easily understand the flow of my work, navigate between different conversational paths, and branch off from any point to explore alternative solutions using the keyboard in the TUI.

Acceptance Criteria

1. A new "Timeline" view can be toggled on and off with a keybinding (example: Alt+B).
2. The view renders all sessions for the current project as a graph or tree, showing parent-child relationships.
3. The user can navigate the nodes of the graph using arrow keys (Up/Down/Left/Right).
4. The currently selected node is visually highlighted.
5. A tooltip or preview pane displays a summary of the user's prompt for the selected node.
6. Pressing Enter on a node switches the main chat view to that session's context and closes the timeline view.
7. Pressing Shift+Enter on a node creates a new, empty session that is a child of the selected session, and immediately switches the TUI to this new session. Essentially branching the conversation from this point.

Proposed Design & Mockup

The visual layout should resemble a simple git style tree to feel familiar and intuitive in a terminal environment. The final design is open to discussion, but here is a proposed mockup:

┌─────────────────── Conversation Timeline ────────────────────┐
│                                                              │
│ ●─ Implement user login .1                                   │
│ │                                                            │
│ ●─ Create the backend API endpoint for login .2              │
│ │                                                            │
│ ●─ Add basic validation to the API endpoint (current) .3     │
│ ├─● Branch A: Explore using Zod for validation               │
│ │ │                                                          │
│ │ ●─ Add Zod schema for login                                │
│ │                                                            │
│ └─● Branch B: Explore using a different library              │
│ │                                                            │
│ ●─ Back to .3 before any branching                           │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Open Questions for Implementation:

• Layout Algorithm: The exact algorithm for drawing the tree is detable imo as idk which way to go tbh. A simple indented list is a good starting point.
• Tooltip Content: The preview tooltip should initially contain the user's prompt. This could be expanded later to include a snippet of the AI's response if useful (maybe?).

Implementation Details

This feature can be implemented by leveraging the existing parentID in the session data structure.

• Backend (TypeScript - packages/opencode):

  • No major changes are required. The backend already supports the necessary data structures and endpoints.
  • GET /session: Provides the list of all sessions with id and parentID.
  • POST /session: The Session.create function already accepts an optional parentID, which is all that's needed for the branching functionality.

• TUI (Go - packages/tui):

  • New Component: Create a new timeline component in packages/tui/internal/components/timeline/.
    • This component will be a tea.Model.
    • It will receive the list of all project sessions and build an in-memory graph data structure (e.g., a map of parentID -> []childSessions).
    • Its View() method will be responsible for rendering the graph using box-drawing characters.
    • It will manage its own state, including the selected node, graph traversal logic, and viewport scrolling.
  • Main Model Integration (tui.go):
    • The main app model will fetch all sessions and pass them to the timeline component.
    • It will manage the timeline component as a modal, toggled by the new keybinding.
    • It will handle messages from the timeline component, such as SwitchSessionMsg{SessionID: "..."} and BranchSessionMsg{ParentID: "..."}.
  • Keybinding (commands.go):
    • Add a new command, e.g., TimelineViewCommand, with the Alt+B keybinding (or another suitable key).