Skip to content

Improve the CodeWhale sidebar experience with clearer agent status, panel navigation, and collapse controls. - #10

Merged
gaord merged 3 commits into
HengQuWorld:mainfrom
eoli:new-side-panel
Sep 17, 2026
Merged

gaord merged 3 commits into
HengQuWorld:mainfrom
eoli:new-side-panel

Conversation

@eoli

@eoli eoli commented Sep 17, 2026

Copy link
Copy Markdown
Contributor

Improve the CodeWhale sidebar experience with clearer agent status, panel navigation, and collapse controls.

Changes

  • Add an Activity tab to the sidebar with contextual hint texts.
  • Add an Agent status label to make the current agent state more visible.
  • Overlay the Threads panel on the sidebar to better utilize the available space.
  • Add a close button to collapse the Agent panel and return to the sidebar.

These changes improve the sidebar layout and make the Agent, Activity, and Threads interactions more explicit.
image
image

Introduce a third sidebar tab ("Activity") alongside Sessions and
Threads to surface live agent status (work, tasks, agents, changes),
and add explanatory hint text under the tab bar for each tab.

- Add activity, sessionsTabHint, threadsTabHint, and activityTabHint
  translation keys for en and zh-CN locales and export them through
  webviewTranslations for the webview bundle
- Scope sidebar tab visibility rules to direct children
  (#sidebar-threads > ...) so nested Activity sections retain their
  own collapse behaviour, and add a data-active-tab="activity" rule
- Make sidebar tabs flex evenly with centered, ellipsized labels so
  they fit narrower sidebars
- Add .sidebar-tab-hint styling for the new hint line
- Convert the session search bar to a flex layout so the input
  shrinks gracefully next to its action button
- Change threads panel from a flex sibling that squeezes chat content to an
  absolutely positioned overlay expanding over the editor, with opaque
  background, drop shadow, and z-index layering; the resize handle is now
  absolutely positioned to match
- Replace the thread-count span ("0 sessions" / toggleHistory tooltip) with
  an agent status control using new agentStatus/agentStatusTitle
  translations ("Agent", "Open agent panel — sessions, threads, activity"),
  added for en and zh-cn locales
- Update the webview HTML test mock with the new translation keys
Add a close (✕) button to the sidebar tab bar that collapses the agent
panel when clicked by removing the `open` class from the panel.

- Introduce a new `closePanel` translation key with English and
  Simplified Chinese labels, exposed to the webview
- Style the button via `.sidebar-close-btn` to match the existing tab
  bar with hover states
- Register a click handler in the sidebar script to close the panel
- Include the new key in test helper translations
@eoli

eoli commented Sep 17, 2026

Copy link
Copy Markdown
Contributor Author

For the next iteration, I’ll also look into improving how the think output and tool-call output are presented, with the goal of reducing unnecessary information and minimizing distractions in the UI.

@gaord
gaord merged commit 5568b68 into HengQuWorld:main Sep 17, 2026
gaord added a commit that referenced this pull request Sep 17, 2026
…anel overlay

The three sidebar tabs became peers in #10, which left
brotherwhale.showThreadList contributed, documented and read by the chat
provider while the webview only assigned it to a no-op: a user who set it
saw the Threads tab anyway, and nothing said so. Remove it end to end — the
contribution, its package.nls strings, the three reads, the no-op, the
export and the runtime message field the webview consumed.

Also:

- Esc collapses an open panel. The overlay covers the chat, so the ✕ was the
  only way out; an Esc that reaches an input (slash menu, task draft) is left
  to that input.
- renderSessions() removed .session-empty-msg while appending .work-empty, so
  an empty result list stacked another "no conversations" block on every
  render instead of replacing it. Both list renderers now remove what they
  create, keeping the hint and the search bar.
- The toolbar's thread-count id/class (and the debug probe key) is named
  agent-panel-toggle, which is what the element has been since #10.
- The zh Activity hint no longer mixes "Agent" into Chinese.
gaord added a commit that referenced this pull request Sep 17, 2026
README and README_zh now describe the Sessions / Threads / Activity tabs, the
threads panel as an overlay over the chat, and how it closes; the settings
table drops the removed showThreadList row, and the contributor list credits
#10 to @eoli.

AGENTS.md records the new sidebar structure, and CHANGELOG gets an Unreleased
section covering #10 and these follow-up fixes.
gaord added a commit that referenced this pull request Sep 17, 2026
#10 made the panel an absolutely positioned overlay — opaque background, drop
shadow, z-index 20 — so that opening it would not take width from the chat.
Taking that width was the point: the overlay covered the messages the panel
exists to navigate, so the two could never be read together, and the resize
grip (also absolute, with its `left` written on every drag and on load) could
only ever widen a panel that was hiding content.

The panel is an in-flow flex child of #layout again, so the chat area is
squeezed rather than covered, and the grip stands in its own place in the row:
no left offset is written during a drag, and the saved width applies to the
panel alone. The three tabs, the ✕, the Esc handler, the attention badge and
the width persistence are untouched.

Measured in headless Chromium against the generated webview HTML at 900x700 —
overlay: panel 0–220 on top of a chat that still spans 0–900 (220px covered);
restored: panel 0–220, grip 220–224, chat 224–900, nothing covered, and the
chat width is the layout width minus panel and grip.

Also:

- The CSS and Esc-handler comments no longer explain the layout as an overlay.
- README / README_zh say the panel sits beside the chat and takes its width
  from it, and the #10 credit no longer claims the overlay.
- AGENTS.md's 侧边栏状态 records the in-flow panel, so it does not drift back
  to absolute positioning.
- CHANGELOG drops the overlay sentence from the Unreleased sidebar entry (it
  never shipped) and records the regression under Bug Fixes.
- vitest 946/946, tsc --noEmit, eslint src and the webpack build all pass.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants