fix(messages): remove duplicate channel header causing stacked rendering by jaylfc · Pull Request #2170 · jaylfc/taOS

jaylfc · 2026-07-27T19:43:02Z

Autonomous build of board card tsk-55xqwq.

REVIEW WARNING (automated): this card's text asks for tests, but the diff changes no test file. Either the acceptance criteria are unmet or the card needs correcting. Do not merge without resolving this.

The channel header block in MessagesApp.tsx (type icon, agent emoji,
channel name, settings, guide link, pin/search, member count,
description) was a near-exact copy of the header already rendered
by MessageList.tsx at line 214. Since messageAreaUI renders both
its own header and , the result was two stacked headers.

Remove the duplicate header from MessagesApp.tsx and clean up the
five imports that became unused (MessagesSquare, Search, PinBadge,
PinnedMessagesPopover, resolveAgentEmoji). The PinnedMessage type
import is preserved.

Closes #2124

Files:

Summary by CodeRabbit

UI Improvements
- Simplified the message view by removing the inline channel header.
- Removed the channel description, member count, pinned-message indicator, thread navigation, and message search controls from this area.
- The message list now appears with a cleaner, more focused layout.

The channel header block in MessagesApp.tsx (type icon, agent emoji, channel name, settings, guide link, pin/search, member count, description) was a near-exact copy of the header already rendered by MessageList.tsx at line 214. Since messageAreaUI renders both its own header and <MessageList>, the result was two stacked headers. Remove the duplicate header from MessagesApp.tsx and clean up the five imports that became unused (MessagesSquare, Search, PinBadge, PinnedMessagesPopover, resolveAgentEmoji). The PinnedMessage type import is preserved. Closes #2124

coderabbitai · 2026-07-27T19:43:21Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: bfb7af24-7d0f-4b7d-89be-6d3ff907d251

📥 Commits

Reviewing files that changed from the base of the PR and between f551e63 and 18a3943.

⛔ Files ignored due to path filters (1)

desktop/package-lock.json is excluded by !**/package-lock.json, !**/package-lock.json

📒 Files selected for processing (1)

desktop/src/apps/MessagesApp.tsx

📝 Walkthrough

Walkthrough

Changes

Messages channel header

Layer / File(s)	Summary
Remove inline channel header `desktop/src/apps/MessagesApp.tsx`	Removes the inline channel header, pinned-message controls, thread navigation, and search controls above `MessageList`, and cleans up their unused imports.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

jaylfc/taOS#2169: Removes the same duplicate channel-header JSX and related imports.
jaylfc/taOS#1877: Refactors channel-header functionality into extracted message components.
jaylfc/taOS#1881: Adjusts MessagesApp and MessageList channel-header integration.

Suggested reviewers: hognek

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch exec/tsk-55xqwq

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

jaylfc · 2026-07-27T19:43:22Z

Duplicate of #2169, which is already MERGED (f551e63) and deployed. Identical diff from the same branch for the same card (tsk-55xqwq); the fix is already on dev. Closing per one-PR-per-task.

gitar-bot · 2026-07-27T19:43:48Z

Important

You are using the Gitar free plan. Upgrade to unlock code review, CI analysis, auto-apply, custom automations, and more.

_Gitar

qodo-code-review · 2026-07-27T19:44:02Z

PR Summary by Qodo

Fix Messages UI double header by removing duplicate channel header

🐞 Bug fix ⚙️ Configuration changes 🕐 20-40 Minutes

AI Description

• Remove duplicated channel header in MessagesApp to prevent stacked header rendering.
• Rely on MessageList-owned header as the single source of truth.
• Bump desktop package-lock version to 1.0.0-beta.44.

Diagram

graph TD
  A["MessagesApp (message area)"] --> B["MessageList"] --> C["Channel header (single)"]
  B --> D["Pinned/Search/Threads UI"]
  A --> E["Desktop build (package-lock)"]

High-Level Assessment

The following are alternative approaches to this PR:

1. Extract a shared ChannelHeader component

➕ Prevents future duplication across MessagesApp/MessageList
➕ Enables consistent behavior and styling with one implementation
➖ More refactor surface area than needed for the immediate bug fix
➖ Requires agreement on ownership/props boundaries (channel/actions/state)

2. Add a UI regression test for single header rendering

➕ Guards against reintroducing double-header rendering
➕ Documents expected behavior in an executable way
➖ Test harness investment (Playwright/Cypress/component tests) may be non-trivial
➖ Can be flaky if selectors/layout aren’t stabilized

Recommendation: The PR’s approach (remove the duplicate header and let MessageList remain the sole header owner) is the lowest-risk fix and appropriate for this regression. Consider a follow-up to add a simple UI regression test (e.g., assert exactly one channel header region renders) since the ticket text calls for tests and this change touches user-visible layout.

Files changed (2) +3 / -124

Bug fix (1) +1 / -122

MessagesApp.tsxRemove duplicated channel header and unused imports +1/-122

Remove duplicated channel header and unused imports

• Deletes the channel header block that duplicated the header already rendered by MessageList, fixing the stacked/double-header UI. Cleans up unused imports (icons, pin/search UI, agent emoji resolver) while preserving the PinnedMessage type import.

desktop/src/apps/MessagesApp.tsx

Other (1) +2 / -2

package-lock.jsonBump desktop lockfile version to beta.44 +2/-2

Bump desktop lockfile version to beta.44

• Updates the package-lock.json version fields from 1.0.0-beta.43 to 1.0.0-beta.44. No dependency graph changes are shown in the provided diff hunk.

desktop/package-lock.json

qodo-code-review · 2026-07-27T19:47:48Z

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📜 Skill insights (1)

Context used

✅ Compliance rules (platform): 35 rules

✅ Skills: taos-development-skill

1. Missing regression test for header 📜 Skill insight ▣ Testability

Description

This PR fixes a UI rendering bug (duplicate stacked channel headers) but does not add any regression
test that would fail without the fix and pass with it. This increases the risk of the
duplicate-header bug reappearing unnoticed in future refactors.

Code

desktop/src/apps/MessagesApp.tsx[R1698-1703]

        </div>
      ) : (
        <>
-          {/* channel header — MobileSplitView owns back nav on mobile */}
-<div className="px-4 py-2.5 border-b border-shell-border flex items-center gap-3 shrink-0">
-             {currentChannel?.type === "topic" ? <Hash size={16} className="text-shell-text-tertiary" /> :
-              currentChannel?.type === "group" ? <Users size={16} className="text-shell-text-tertiary" /> :
-              <AtSign size={16} className="text-shell-text-tertiary" />}
-            {(() => {
-              // For DM channels, prefix the header with the paired agent's
-              // emoji (or framework default) so the user can see at a glance
-              // who they are chatting with.
-              if (currentChannel?.type !== "dm") return null;
-              const agentName = (currentChannel.members ?? []).find((m) => m !== "user");
-              if (!agentName) return null;
-              const agent = liveAgents.find((a) => a.name === agentName);
-              if (!agent) return null;
-              return (
-                <span
-                  className="text-base leading-none shrink-0"
-                  aria-hidden="true"
-                >
-                  {resolveAgentEmoji(agent.emoji, agent.framework)}
-                </span>
-              );
-            })()}
-            <div className="min-w-0 flex-1">
-              <div className="text-sm font-medium truncate flex items-center gap-1">
-                {currentChannel?.name ?? "Unknown"}
-                {currentChannel && currentChannel.type !== "dm" && (
-                  <button
-                    aria-label="Channel settings"
-                    onClick={handleOpenSettings}
-                    className="ml-1 opacity-60 hover:opacity-100"
-                  >ⓘ</button>
-                )}
-                <a
-                  aria-label="Open chat guide"
-                  href="https://github.com/jaylfc/tinyagentos/blob/master/docs/chat-guide.md"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="ml-1 opacity-60 hover:opacity-100 text-[12px]"
-                >?</a>
-                <div className="relative">
-                  <PinBadge
-                    count={pinnedMessages.length}
-                    onClick={() => setPinnedPopoverOpen((open) => !open)}
-                  />
-                  {pinnedPopoverOpen && (
-                    <PinnedMessagesPopover
-                      pins={pinnedMessages}
-                      authorCtx={{ currentUserId, currentUserDisplayName }}
-                      onJumpTo={(id) => {
-                        setPinnedPopoverOpen(false);
-                        const el = document.querySelector(`[data-message-id="${id}"]`) as HTMLElement | null;
-                        if (el) {
-                          el.scrollIntoView({ behavior: "smooth", block: "center" });
-                          el.classList.add("data-highlight");
-                          setTimeout(() => el.classList.remove("data-highlight"), 2000);
-                        } else {
-                          // Only ~50 messages load; a pin older than that is not in the DOM.
-                          setSendError("Message is older than the loaded history");
-                        }
-                      }}
-                      onClose={() => setPinnedPopoverOpen(false)}
-                    />
-                  )}
-                </div>
-                <button
-                  type="button"
-                  onClick={() => {
-                    if (showAllThreads) {
-                      setShowAllThreads(false);
-                    } else {
-                      closeThread();
-                      setShowSettings(false);
-                      setShowSearch(false);
-                      setShowAllThreads(true);
-                    }
-                  }}
-className="ml-2 p-1 rounded hover:bg-shell-surface-active text-shell-text-secondary hover:text-shell-text"
-                   aria-label={showAllThreads ? "Hide all threads" : "Show all threads"}
-                  aria-expanded={showAllThreads}
-                  aria-controls="all-threads-panel"
-                  title="All threads"
-                >
-                  <MessagesSquare size={14} aria-hidden="true" />
-                </button>
-                <button
-                  type="button"
-                  onClick={() => {
-                    if (showSearch) {
-                      setShowSearch(false);
-                    } else {
-                      closeThread();
-                      setShowSettings(false);
-                      setShowAllThreads(false);
-                      setShowSearch(true);
-                    }
-                  }}
-className="ml-2 p-1 rounded hover:bg-shell-surface-active text-shell-text-secondary hover:text-shell-text"
-                   aria-label={showSearch ? "Hide search" : "Search messages"}
-                  aria-expanded={showSearch}
-                  aria-controls="search-panel"
-                  title="Search"
-                >
-                  <Search size={14} aria-hidden="true" />
-                </button>
-              </div>
-{currentChannel?.description && (
-                 <div className="text-[11px] text-shell-text-tertiary truncate">{currentChannel.description}</div>
-               )}
-             </div>
-             {currentChannel?.members && (
-               <div className="text-[11px] text-shell-text-tertiary flex items-center gap-1">
-                <Users size={12} /> {currentChannel.members.length}
-              </div>
-            )}
-          </div>
-
          <MessageList
            ref={messageListHandleRef}
            messages={messages}

Relevance

⭐ Low
Small MessagesApp bugfixes merged without new tests (e.g., #457), suggesting tests not required for
such UI fixes.
PR-#457

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

PR Compliance ID 2185285 requires a regression test for bug-fix PRs. The diff shows only the UI fix
in MessagesApp.tsx (removing the duplicate header area around where MessageList is rendered) and
no accompanying test additions in the PR diff.

desktop/src/apps/MessagesApp.tsx[1698-1704]
Skill: taos-development-skill

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
This PR is a bug fix but includes no regression test to prevent the duplicate channel header from returning.

## Issue Context
The duplicate header was caused by `MessagesApp` rendering its own header while `MessageList` also renders a header.

## Fix Focus Areas
- desktop/src/apps/MessagesApp.tsx[1698-1704]
- desktop/src/apps/__tests__/MessagesApp.header.test.tsx[1-200]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

2. Silent pinned jump failure 🐞 Bug ≡ Correctness

Description

After removing the MessagesApp header, pinned-message “Jump to” now relies on MessageList’s handler,
which closes the popover and does nothing when the pinned message isn’t in the DOM (older than the
loaded window). This removes the previous error feedback path, making “Jump to” appear broken for
older pins.

Code

desktop/src/apps/MessagesApp.tsx[L1754-1765]

-                      onJumpTo={(id) => {
-                        setPinnedPopoverOpen(false);
-                        const el = document.querySelector(`[data-message-id="${id}"]`) as HTMLElement | null;
-                        if (el) {
-                          el.scrollIntoView({ behavior: "smooth", block: "center" });
-                          el.classList.add("data-highlight");
-                          setTimeout(() => el.classList.remove("data-highlight"), 2000);
-                        } else {
-                          // Only ~50 messages load; a pin older than that is not in the DOM.
-                          setSendError("Message is older than the loaded history");
-                        }
-                      }}

Relevance

⭐ Low
Pinned “Jump to” already shipped with silent no-op when message absent in DOM (#237); team accepted
that behavior.
PR-#237

ⓘ Recommendations generated based on similar findings in past PRs

Evidence
MessageList’s pinned popover jump handler only scrolls when it finds a [data-message-id="..."]
element and otherwise does nothing, while MessagesApp still renders a sendError alert region that
previously was used to inform users when a pinned message was outside the loaded history window.
desktop/src/apps/chat/MessageList.tsx[259-279]
desktop/src/apps/MessagesApp.tsx[475-492]
desktop/src/apps/MessagesApp.tsx[1849-1854]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
Pinned-message navigation now silently no-ops when the pinned message isn’t currently rendered in the DOM (e.g., older than the loaded history window). Previously, the removed header implementation surfaced an explicit error via `setSendError("Message is older than the loaded history")`, but the remaining `MessageList` implementation has no fallback.

### Issue Context
- `MessageList` owns the only remaining pinned popover UI and handles `onJumpTo` by `querySelector` + `scrollIntoView` only when the element exists.
- `MessagesApp` still has a `sendError` alert region, but the pinned-jump path no longer sets it.

### Fix Focus Areas
- desktop/src/apps/chat/MessageList.tsx[259-279]
- desktop/src/apps/MessagesApp.tsx[475-492]
- desktop/src/apps/MessagesApp.tsx[1699-1774]
- desktop/src/apps/MessagesApp.tsx[1849-1854]

### Suggested fix
1. Add an optional callback prop to `MessageListProps`, e.g. `onPinnedJumpNotFound?: (messageId: string) => void` (or a more general `onPinnedJumpTo` callback that returns a boolean).
2. In `MessageList`’s `PinnedMessagesPopover.onJumpTo`, add an `else` branch when `el` is null to call the callback.
3. In `MessagesApp`, pass a handler that calls `setSendError("Message is older than the loaded history")` (matching the previous behavior).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

kilo-code-bot · 2026-07-27T19:50:25Z

Code Review Summary

Status: 1 Issue Found | Recommendation: Address before merge

Overview

Severity	Count
WARNING	1

Issue Details (click to expand)

WARNING

File	Line	Issue
`desktop/src/apps/chat/MessageList.tsx`	268	Missing error feedback for pinned messages not in DOM. The `onJumpTo` callback lacks an `else` branch that previously called `setSendError("Message is older than the loaded history")` in the removed duplicate header from `MessagesApp.tsx`. Users clicking pinned messages older than the loaded history will now see no feedback.

Files Reviewed (2 files)

desktop/src/apps/MessagesApp.tsx - Import cleanup and header removal
desktop/src/apps/chat/MessageList.tsx - Missing error handling in onJumpTo

Fix these issues in Kilo Cloud

_{Reviewed by step-3.7-flash · Input: 81.6K · Output: 35.8K · Cached: 930.4K}

jaylfc closed this Jul 27, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(messages): remove duplicate channel header causing stacked rendering - #2170

fix(messages): remove duplicate channel header causing stacked rendering#2170
jaylfc wants to merge 1 commit into
devfrom
exec/tsk-55xqwq

jaylfc commented Jul 27, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 27, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Uh oh!

jaylfc commented Jul 27, 2026

Uh oh!

gitar-bot Bot commented Jul 27, 2026

Uh oh!

qodo-code-review Bot commented Jul 27, 2026

Uh oh!

qodo-code-review Bot commented Jul 27, 2026

Uh oh!

kilo-code-bot Bot commented Jul 27, 2026 •

edited

Loading

WARNING

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

jaylfc commented Jul 27, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Uh oh!

jaylfc commented Jul 27, 2026

Uh oh!

gitar-bot Bot commented Jul 27, 2026

Uh oh!

qodo-code-review Bot commented Jul 27, 2026

PR Summary by Qodo

Uh oh!

qodo-code-review Bot commented Jul 27, 2026

Code Review by Qodo

Uh oh!

kilo-code-bot Bot commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Summary

Overview

WARNING

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

jaylfc commented Jul 27, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 27, 2026 •

edited

Loading

kilo-code-bot Bot commented Jul 27, 2026 •

edited

Loading