Issue Station
Sign In
Tools hereToolbox

openclaw - 💡(How to fix) Fix [UX] Improve session switching in Web UI — sidebar chat list, state preservation, active highlight [1 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
openclaw/openclaw#84214•Fetched 2026-05-20 03:42:37
View on GitHub
Comments
1
Participants
2
Timeline
8
Reactions
1
Author
AungMyoKyawAungMyoKyaw
Participants
AungMyoKyawAungMyoKyawclawsweeper[bot]clawsweeper[bot]
Timeline (top)
labeled ×6commented ×1cross-referenced ×1

Code Example

┌─────────────────┬────────────────────────────────────────────────┐
│  [+ New Chat]   │                                                │
│                 │     Agent: main (kimi/kimi-for-coding)         │
├─────────────────┤                                                │
│ ◀ Session Name  │  ┌─────────────────────────────────────────┐   │
│   "Auth Refactor│  │  You: Fix the auth bug in utils.py      │   │
│   2m ago ..."   │  │                                         │   │
│                 │  │  Agent: Fixed! The bug was variable    │   │
│ ▸ My Session 2  │  │  shadowing on line 42. See diff below  │   │
│   "Weather API" │  │  ...                                    │   │
│   15m ago ..."  │  │                                         │   │
│                 │  │  [Code block]                           │   │
│ ▸ My Session 3  │  └─────────────────────────────────────────┘   │
│   "Docker opt"  │                                                │
│   1h ago ..."   │  ┌─────────────────────────────────────────┐   │
│                 │  │ > Type a message...                     │   │
│                 │  │                                         │   │
│                 │  │  [Send]  [Attach]  [Tools]              │   │
│                 │  └─────────────────────────────────────────┘   │
└─────────────────┴────────────────────────────────────────────────┘
      ↑                                             ↑
   Sidebar (fixed, 260px)                   Chat Area (flexible)

---

┌────────────────────────────────────┐
│  ≡  │  Agent: main            [+] │   ← header, tap ≡ to open drawer
├────────────────────────────────────┤
│                                    │
│  [chat content scrolls here]       │
│                                    │
│                                    │
│                                    │
├────────────────────────────────────┤
│  > Type a message...      [Send]   │
└────────────────────────────────────┘

── Drawer Open (swipe from left / tap ≡) ──

┌────────┬───────────────────────────┐
│ [+New] │  Agent: main         [≡] │
├────────┤                           │
│ ◀ Auth │  [content dims slightly] │
│   Ref..│                           │
│ ▸ Weat..│                           │
│ ▸ Dock..│                           │
│         │                           │
└────────┴───────────────────────────┘
     ↑
  Drawer slides in (280px), tap outside or select session → auto-close

---

┌────────────────────────────┐
│ ◀  Auth Refactor Bug Fix   │  ← active item (highlighted bg)
│    2m ago  |  "Fixed! The.."│  ← relative time + message preview
├────────────────────────────┤
│ ▸  Weather API Wrapper     │  ← inactive item
│    15m ago | "httpx is be..│
├────────────────────────────┤
│ ▸  Docker Build Optimize   │  ← inactive item
│    1h ago  | "Multi-stage..│
└────────────────────────────┘

---

User clicks "Weather API" in sidebar
            │
            ▼
┌─────────────────────┐
│ 1. Visual feedback: │  sidebar item gets brief press ripple
│ 2. Chat area:      │  fades out old content (150ms)
│ 3. Restore state:   │  scroll position Y=340, draft="" (empty)
│ 4. Chat area:      │  fades in new content (150ms)
│ 5. Mobile only:    │  sidebar auto-collapses
│ 6. Focus:          │  input field regains focus (desktop)
└─────────────────────┘
        Total perceived switch time: < 300ms
RAW_BUFFERClick to expand / collapse

Improve Session Switching UX in OpenClaw Web UI

Problem Statement

Currently, OpenClaw's web UI has a poor session switching experience compared to popular chatbot applications. When users create sessions and chat with agents, switching between sessions is clunky and does not follow established UX patterns users expect from modern chat interfaces.

Current Behavior (Problem)

  • Session switching in the web UI is not smooth or intuitive
  • Does not follow the familiar "sidebar chat list" pattern used by industry leaders
  • Users likely lose context or face friction when moving between active conversations

Expected Behavior (Popular Chatbot Patterns)

Modern chatbot UIs (ChatGPT, Claude, Gemini, etc.) typically implement session management with these patterns:

  1. Persistent Sidebar / Drawer

    • Chat history list is always accessible on the left (desktop) or via a swipe drawer (mobile)
    • One-tap switch between any past or current conversation

  2. Session-Level Context Preservation

    • Each session maintains its own scroll position, input draft, and tool state
    • Switching back restores the exact state the user left

  3. Visual Active State

    • The currently active session is clearly highlighted in the sidebar
    • Unread / new message indicators on inactive sessions

  4. New Session Creation

    • Prominent "New Chat" button at the top of the sidebar
    • Keyboard shortcut (e.g., Cmd/Ctrl + Shift + O) for power users

  5. Session Metadata in List

    • Session title (auto-generated from first message or user-editable)
    • Timestamp / "last active" relative time (e.g., "2 hours ago")
    • Message preview (first ~50 chars of last message)

  6. Mobile Adaptations

    • Sidebar auto-collapses after session selection on small screens
    • Swipe gesture to reveal sidebar from left edge

Concept UI (ASCII Mockup)

Desktop Layout — Persistent Sidebar

┌─────────────────┬────────────────────────────────────────────────┐
│  [+ New Chat]   │                                                │
│                 │     Agent: main (kimi/kimi-for-coding)         │
├─────────────────┤                                                │
│ ◀ Session Name  │  ┌─────────────────────────────────────────┐   │
│   "Auth Refactor│  │  You: Fix the auth bug in utils.py      │   │
│   2m ago ..."   │  │                                         │   │
│                 │  │  Agent: Fixed! The bug was variable    │   │
│ ▸ My Session 2  │  │  shadowing on line 42. See diff below  │   │
│   "Weather API" │  │  ...                                    │   │
│   15m ago ..."  │  │                                         │   │
│                 │  │  [Code block]                           │   │
│ ▸ My Session 3  │  └─────────────────────────────────────────┘   │
│   "Docker opt"  │                                                │
│   1h ago ..."   │  ┌─────────────────────────────────────────┐   │
│                 │  │ > Type a message...                     │   │
│                 │  │                                         │   │
│                 │  │  [Send]  [Attach]  [Tools]              │   │
│                 │  └─────────────────────────────────────────┘   │
└─────────────────┴────────────────────────────────────────────────┘
      ↑                                             ↑
   Sidebar (fixed, 260px)                   Chat Area (flexible)

Key elements shown:

  • Left sidebar is always visible on desktop (no hamburger needed)
  • Active session (◀) has distinct background highlight + left border accent
  • Inactive sessions (▸) show title + relative timestamp + truncated last-message preview
  • [+ New Chat] sits pinned at top of sidebar for instant session creation
  • Input area at bottom preserves draft text per session even after switching away

Mobile Layout — Collapsible Drawer

┌────────────────────────────────────┐
│  ≡  │  Agent: main            [+] │   ← header, tap ≡ to open drawer
├────────────────────────────────────┤
│                                    │
│  [chat content scrolls here]       │
│                                    │
│                                    │
│                                    │
├────────────────────────────────────┤
│  > Type a message...      [Send]   │
└────────────────────────────────────┘

── Drawer Open (swipe from left / tap ≡) ──

┌────────┬───────────────────────────┐
│ [+New] │  Agent: main         [≡] │
├────────┤                           │
│ ◀ Auth │  [content dims slightly] │
│   Ref..│                           │
│ ▸ Weat..│                           │
│ ▸ Dock..│                           │
│         │                           │
└────────┴───────────────────────────┘
     ↑
  Drawer slides in (280px), tap outside or select session → auto-close

Session List Item Detail

┌────────────────────────────┐
│ ◀  Auth Refactor Bug Fix   │  ← active item (highlighted bg)
│    2m ago  |  "Fixed! The.."│  ← relative time + message preview
├────────────────────────────┤
│ ▸  Weather API Wrapper     │  ← inactive item
│    15m ago | "httpx is be..│
├────────────────────────────┤
│ ▸  Docker Build Optimize   │  ← inactive item
│    1h ago  | "Multi-stage..│
└────────────────────────────┘

Session Switch Interaction Flow

User clicks "Weather API" in sidebar
            │
            ▼
┌─────────────────────┐
│ 1. Visual feedback: │  sidebar item gets brief press ripple
│ 2. Chat area:      │  fades out old content (150ms)
│ 3. Restore state:   │  scroll position Y=340, draft="" (empty)
│ 4. Chat area:      │  fades in new content (150ms)
│ 5. Mobile only:    │  sidebar auto-collapses
│ 6. Focus:          │  input field regains focus (desktop)
└─────────────────────┘
        Total perceived switch time: < 300ms

Proposed Improvements for OpenClaw

#ImprovementPriority
1Implement persistent session sidebar with active highlightingHigh
2Preserve session scroll position and input draft on switchHigh
3Auto-generate session titles from first user messageMedium
4Add relative timestamps + last message preview in sidebarMedium
5Add keyboard shortcut for new session (Cmd/Ctrl + Shift + O)Low
6Auto-collapse sidebar on mobile after session selectionMedium

Acceptance Criteria

  • User can switch between any two sessions with a single click/tap
  • Active session is visually distinct in the sidebar
  • Returning to a previous session restores exact scroll position and any unsent input draft
  • Session list shows meaningful title + last activity time
  • Mobile experience does not require manual sidebar management after every switch

Additional Context

This is a UX parity issue — users coming from ChatGPT, Claude, or other popular AI chat interfaces will find OpenClaw's current session switching unfamiliar and frustrating.

Environment

  • OpenClaw Version: (latest / main)
  • Component: Web UI (frontend)
  • Browsers Affected: All (Chrome, Safari, Firefox, mobile browsers)

Issue filed 2026-05-19.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#api#ssr#installation#tensor shape#autograd error

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

openclaw - 💡(How to fix) Fix [UX] Improve session switching in Web UI — sidebar chat list, state preservation, active highlight [1 comments, 2 participants]