nhcarrigan/hikari-desktop
9
0
Fork 0
generated from nhcarrigan/template
Code Issues 9 Pull Requests 36 Actions Releases 22 Activity

perf: lazy load and virtualise conversation history in the terminal #194

New Issue
Closed
opened 2026-03-06 11:58:59 -08:00 by hikari · 0 comments
hikari commented 2026-03-06 11:58:59 -08:00
Owner
Copy Link
Copy Source

Problem

As conversations grow, the terminal window renders all messages in the DOM simultaneously. Long sessions accumulate hundreds of message blocks, tool-use entries, thinking blocks, and code snippets, causing significant layout/paint work and slowing the app noticeably.

Root Cause

Terminal.svelte iterates over the full terminalLines array with {#each}, meaning every line — including ones scrolled far out of view — is a live DOM node. Svelte still diffs and re-renders the entire list on every update.

Proposed Solution

1. Virtualise the list (render only visible rows)

Use a virtual scrolling approach so only the messages currently in the viewport (plus a small overscan buffer) are mounted as DOM nodes. Options:

  • svelte-virtual-list — lightweight, maintained by the Svelte team
  • Manual implementation using IntersectionObserver + a fixed-height sentinel

Variable row heights (code blocks, thinking blocks, tool outputs) make this tricky — prefer a library that supports dynamic heights.

2. Cap and archive old messages

Alternatively (or additionally), once a conversation exceeds N messages (e.g. 500), move older messages out of the reactive store into a non-reactive archive array. Only the tail is kept live; older messages are rendered as a collapsed "Load earlier messages" section on demand.

3. Debounce terminal updates

Rapid streaming produces many small terminalLines mutations. Batch updates with a short debounce (e.g. 16ms / one animation frame) so Svelte doesn't re-render on every token.

Acceptance Criteria

  • Long conversations (500+ messages) no longer cause noticeable lag
  • Scroll position is preserved when new messages arrive at the bottom
  • "Jump to bottom" behaviour still works correctly
  • No visible flicker or layout shift during normal use
  • Existing Terminal.test.ts tests still pass; new tests cover the virtualisation/archiving logic

Notes

  • Be careful with the existing auto-scroll logic — virtualisation can break scroll anchoring
  • Thinking blocks and tool-use blocks have variable heights; account for this in any height estimation
  • The streaming cursor / live assistant message at the bottom must always be in the DOM (never virtualised away)

✨ This issue was created with help from Hikari~ 🌸

## Problem As conversations grow, the terminal window renders *all* messages in the DOM simultaneously. Long sessions accumulate hundreds of message blocks, tool-use entries, thinking blocks, and code snippets, causing significant layout/paint work and slowing the app noticeably. ## Root Cause `Terminal.svelte` iterates over the full `terminalLines` array with `{#each}`, meaning every line — including ones scrolled far out of view — is a live DOM node. Svelte still diffs and re-renders the entire list on every update. ## Proposed Solution ### 1. Virtualise the list (render only visible rows) Use a virtual scrolling approach so only the messages currently in the viewport (plus a small overscan buffer) are mounted as DOM nodes. Options: - [`svelte-virtual-list`](https://github.com/sveltejs/svelte-virtual-list) — lightweight, maintained by the Svelte team - Manual implementation using `IntersectionObserver` + a fixed-height sentinel Variable row heights (code blocks, thinking blocks, tool outputs) make this tricky — prefer a library that supports dynamic heights. ### 2. Cap and archive old messages Alternatively (or additionally), once a conversation exceeds N messages (e.g. 500), move older messages out of the reactive store into a non-reactive archive array. Only the tail is kept live; older messages are rendered as a collapsed "Load earlier messages" section on demand. ### 3. Debounce terminal updates Rapid streaming produces many small `terminalLines` mutations. Batch updates with a short debounce (e.g. 16ms / one animation frame) so Svelte doesn't re-render on every token. ## Acceptance Criteria - [ ] Long conversations (500+ messages) no longer cause noticeable lag - [ ] Scroll position is preserved when new messages arrive at the bottom - [ ] "Jump to bottom" behaviour still works correctly - [ ] No visible flicker or layout shift during normal use - [ ] Existing `Terminal.test.ts` tests still pass; new tests cover the virtualisation/archiving logic ## Notes - Be careful with the existing auto-scroll logic — virtualisation can break scroll anchoring - Thinking blocks and tool-use blocks have variable heights; account for this in any height estimation - The streaming cursor / live assistant message at the bottom must always be in the DOM (never virtualised away) ✨ This issue was created with help from Hikari~ 🌸
naomi closed this issue 2026-03-07 03:08:34 -08:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
aspect
code
Concerns the software code in the repository
aspect
dx
Concerns developers' experience with the codebase
aspect
interface
Concerns end-users' experience with the software
aspect
text
Concerns the documentation material in the repository
contribute
good first issue
A great opportunity for a team member to learn a new codebase
contribute
help wanted
Open for anyone on our team to grab.
contribute
staff only
Restricted to our executive leadership.
goal
addition
Addition of new feature
goal
fix
Bug fix
goal
improvement
Improvement to an existing feature
points
1
Very simple issue requiring minimal effort and complexity.
points
13
Extremely complex issue representing major undertakings. Should be broken down into smaller pieces.
points
2
Simple issue that requires a bit more thought or investigation.
points
3
Moderate complexity issue requiring more substantial work.
points
5
Complex issue requiring significant effort and expertise.
points
8
Very complex issue requiring extensive work and deep expertise.
priority
critical
1
Must be fixed ASAP
priority
high
2
Stalls work on the project or its dependents
priority
low
4
Low priority and doesn't need to be rushed
priority
medium
3
Not blocking but should be fixed soon
priority
none
5
No priority, should only be performed when a developer is available
status
awaiting triage
Has not been triaged & therefore, not ready for work
status
blocked
Blocked and therefore not ready for work
status
discarded
Will not be worked on
status
discontinued
Not suitable for work as repo is in maintenance
status
label work required
Needs proper labelling before it can be worked on
status
ready for dev
Ready for work
status
ticket work required
Needs more details before it can be worked on
talk
discussion
Open for discussions and feedback
talk
question
Can be resolved with an answer
time
1 day
Approximately one full day of development work.
time
1-2 weeks
One to two weeks of focused development effort.
time
2-3 days
Two to three days of development effort.
time
4-5 days
Approximately one week of development work.
time
<1 day
Less than one day of focused work. Quick fixes or simple tasks.
time
>2 weeks
More than two weeks of development work. Must be broken down into smaller pieces.
No Label
Milestone
No items
No Milestone
Assignees
Clear assignees
gurkirat hanna (Hanna Rose) hikari (Hikari) minori (Minori) naomi (Naomi Carrigan) rain teklu tim
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: nhcarrigan/hikari-desktop#194
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?