refactor(ui): migrate chat surfaces to Astryx layout#1795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Astro-Han merged 5 commits into from
Aug 1, 2026
Merged

refactor(ui): migrate chat surfaces to Astryx layout #1795

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7fe22bb
refactor(ui): migrate chat surfaces to Astryx layout
Astro-Han Aug 1, 2026
7227d42
fix(ui): remove phantom chat scroll range
Astro-Han Aug 1, 2026
2a16fd9
fix(ui): keep chat status panels docked
Astro-Han Aug 1, 2026
ea0e32f
refactor(ui): require Astryx chat layout ownership
Astro-Han Aug 1, 2026
b547767
test(ui): render chat view with layout owner
Astro-Han Aug 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/desktop/e2e/fixtures.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -271,7 +271,7 @@ export const test = base.extend<{
await withE2eWindow(
{
seed: false,
readinessSelector: '.maka-chatViewport:has(.maka-turn):not(:has(.maka-markdown-pending))',
readinessSelector: '[data-chat-scroll-container="true"]:has(.maka-turn):not(:has(.maka-markdown-pending))',
e2eFixtureScenario: 'long-transcript',
locale: 'zh',
},
Expand Down
61 changes: 51 additions & 10 deletions apps/desktop/e2e/scroll-geometry.spec.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,7 +17,7 @@ import { test, expect } from './fixtures';
*/

const probeScroller = `(() => {
const scroller = document.querySelector('.maka-chatViewport');
const scroller = document.querySelector('[data-chat-scroll-container="true"]');
return {
scrollHeight: scroller.scrollHeight,
clientHeight: scroller.clientHeight,
Expand DownExpand Up@@ -45,8 +45,8 @@ type ColumnGeometry = {

async function probeColumnGeometry(page: import('@playwright/test').Page): Promise<ColumnGeometry> {
return await page.evaluate(() => {
const host = document.querySelector<HTMLElement>('.maka-chat.messages');
const viewport = document.querySelector<HTMLElement>('.maka-chatViewport');
const host = document.querySelector<HTMLElement>('.maka-chat-layout');
const viewport = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
const turn = document.querySelector<HTMLElement>('.maka-turn');
const composer = document.querySelector<HTMLElement>('.composer .maka-composer-astryx');
if (!host || !viewport || !turn || !composer) {
Expand DownExpand Up@@ -91,7 +91,7 @@ async function probeColumnGeometry(page: import('@playwright/test').Page): Promi
* done, so ask it.
*/
async function settleGeometry(page: import('@playwright/test').Page, options: { pinned: boolean }): Promise<void> {
await expect(page.locator('.maka-chatViewport[data-turn-warmup="settled"]')).toBeAttached({ timeout: 15_000 });
await expect(page.locator('[data-chat-scroll-container="true"][data-turn-warmup="settled"]')).toBeAttached({ timeout: 15_000 });
const settled = await page.evaluate(probeScroller) as { scrollHeight: number };
expect(settled.scrollHeight, JSON.stringify(settled)).toBeGreaterThan(WARMED_HEIGHT_FLOOR);
// The last chunk's inflation reaches the pinned follower through a
Expand All@@ -116,15 +116,15 @@ test('chat viewport and message column share the composer centerline', async ({
}
});

test('empty chat keeps its grid content flush with the viewport', async ({ window: page }) => {
test('empty chat has no phantom vertical range and stays flush with the viewport', async ({ window: page }) => {
const content = page.locator('.mainColumn[data-home-surface="true"] .maka-chatContent');
await expect(content).toBeVisible();

for (const width of [900, 1180, 1440]) {
await page.setViewportSize({ width, height: 760 });
const geometry = await page.evaluate(() => {
const host = document.querySelector<HTMLElement>('.maka-chat.messages');
const viewport = document.querySelector<HTMLElement>('.maka-chatViewport');
const host = document.querySelector<HTMLElement>('.maka-chat-layout');
const viewport = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
const content = document.querySelector<HTMLElement>('.maka-chatContent');
if (!host || !viewport || !content) throw new Error('Expected the empty chat scroll surface');
const hostRect = host.getBoundingClientRect();
Expand All@@ -134,12 +134,15 @@ test('empty chat keeps its grid content flush with the viewport', async ({ windo
hostViewportLeftDelta: viewportRect.left - hostRect.left,
contentDisplay: contentStyle.display,
contentGap: contentStyle.gap,
scrollRange: viewport.scrollHeight - viewport.clientHeight,
scrollTop: viewport.scrollTop,
};
});
const diagnostics = JSON.stringify({ width, ...geometry });
expect(Math.abs(geometry.hostViewportLeftDelta), diagnostics).toBeLessThanOrEqual(1);
expect(geometry.contentDisplay, diagnostics).toBe('grid');
expect(geometry.contentGap, diagnostics).toBe('0px');
expect(geometry.contentDisplay, diagnostics).toBe('flex');
expect(geometry.scrollRange, diagnostics).toBeLessThanOrEqual(1);
expect(geometry.scrollTop, diagnostics).toBeLessThanOrEqual(1);
}
});

Expand All@@ -156,11 +159,49 @@ test('long session opens pinned to bottom and stays pinned while geometry settle
// And the pin still holds once the walk reports itself done, which is what
// makes the poll above a contract rather than a lucky early read.
await settleGeometry(page, { pinned: true });

const bottomBoundary = await page.evaluate(() => {
const scroller = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
const lastTurn = scroller?.querySelector<HTMLElement>('.maka-turn:last-of-type');
const dock = scroller?.lastElementChild;
if (!lastTurn || !dock) throw new Error('Expected the final turn and Astryx dock');
return {
dockTop: dock.getBoundingClientRect().top,
lastTurnBottom: lastTurn.getBoundingClientRect().bottom,
};
});
expect(
bottomBoundary.lastTurnBottom,
JSON.stringify(bottomBoundary),
).toBeLessThanOrEqual(bottomBoundary.dockTop + 1);
expect(
bottomBoundary.dockTop - bottomBoundary.lastTurnBottom,
JSON.stringify(bottomBoundary),
).toBeLessThanOrEqual(48);
});

test('graph status stays docked above the composer while transcript history scrolls', async ({ longTranscriptWindow: page }) => {
await settleGeometry(page, { pinned: true });
const graphPanel = page.locator('.maka-agent-graph-panel');
await expect(graphPanel).toBeVisible();

const before = await graphPanel.boundingBox();
expect(before).not.toBeNull();
await page.evaluate(() => {
const scroller = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
if (!scroller) throw new Error('Expected the Astryx chat scroller');
scroller.scrollTop = 0;
});
const after = await graphPanel.boundingBox();
expect(after).not.toBeNull();
if (before && after) {
expect(Math.abs(after.y - before.y), JSON.stringify({ before, after })).toBeLessThanOrEqual(1);
}
});

async function climbToTop(page: import('@playwright/test').Page) {
return await page.evaluate(async () => {
const scroller = document.querySelector('.maka-chatViewport') as HTMLElement;
const scroller = document.querySelector('[data-chat-scroll-container="true"]') as HTMLElement;
const started = performance.now();
// Self-imposed deadline well under the 60s test timeout: a stalled or
// crawling compositor must produce a diagnosable assertion failure with
Expand Down
32 changes: 27 additions & 5 deletions apps/desktop/e2e/sidebar-geometry.spec.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -27,7 +27,7 @@ import type { Page } from '@playwright/test';
* and does not assert rendered footer-visibility geometry. The two layers
* deliberately lock different declarations.
* - `scroll-geometry.spec.ts` boots `long-transcript` and probes
* `.maka-chatViewport`, not the sidebar.
* Astryx `ChatLayout`, not the sidebar.
*
* This spec is the rendered-geometry lock. It boots the `sidebar-long-sessions`
* fixture and asserts, against the live desktop shell:
Expand All@@ -48,7 +48,7 @@ import type { Page } from '@playwright/test';
*/

const LIST_CONTENT = '.maka-session-list';
const CHAT_VIEWPORT = '.maka-chatViewport';
const CHAT_VIEWPORT = '[data-chat-scroll-container="true"]';

interface ScrollerMetrics {
scrollTop: number;
Expand DownExpand Up@@ -90,7 +90,7 @@ async function readGeometry(page: Page): Promise<Geometry> {
panel: rect(document.querySelector('.maka-session-panel')),
viewport: { width: window.innerWidth, height: window.innerHeight },
list: scroller(document.querySelector(listContentSelector)?.parentElement ?? null),
chat: scroller(document.querySelector('.maka-chatViewport')),
chat: scroller(document.querySelector('[data-chat-scroll-container="true"]')),
};
}, LIST_CONTENT);
}
Expand DownExpand Up@@ -167,6 +167,28 @@ test('sidebar list scrolls independently and keeps the footer in view with 60 se
await expect(page.locator(LIST_CONTENT)).toHaveCount(1);
await expect(page.locator(CHAT_VIEWPORT)).toHaveCount(1);

// Astryx owns the chat's initial fill and follows transcript geometry
// asynchronously. Establish its terminal pinned position before using the
// chat scrollTop as the sidebar-independence control value.
await expect(page.locator(`${CHAT_VIEWPORT}[data-turn-warmup="settled"]`)).toBeAttached();
await expect.poll(async () => {
const geometry = await readGeometry(page);
return geometry.chat
? Math.round(geometry.chat.scrollHeight - geometry.chat.scrollTop - geometry.chat.clientHeight)
: Number.POSITIVE_INFINITY;
}).toBeLessThanOrEqual(1);

// The newest fixture session is one short exchange. It already fits above
// the composer, so reaching its final message must not create a second,
// composer-height scroll range below the conversation.
const settledChat = (await readGeometry(page)).chat;
expect(settledChat, JSON.stringify(settledChat)).not.toBeNull();
if (settledChat) {
const diagnostics = JSON.stringify(settledChat);
expect(settledChat.scrollHeight - settledChat.clientHeight, diagnostics).toBeLessThanOrEqual(1);
expect(settledChat.scrollTop, diagnostics).toBeLessThanOrEqual(1);
}

// (1a) The sidebar list scroller actually overflows its constrained grid
// row — this is what makes it an independent scroll container. If the panel
// loses its constrained height, the row grows to content height and this
Expand DownExpand Up@@ -199,8 +221,8 @@ test('sidebar list scrolls independently and keeps the footer in view with 60 se

// The sidebar's own scrollTop moved...
expect(after.list?.scrollTop ?? -1, afterDiag).toBeGreaterThan(listScrollTopBefore);
// ...while the chat viewport's scrollTop is unaffected (short transcript →
// stays pinned at 0). This is the scroll-independence lock for this seed.
// ...while the already-settled chat viewport's scrollTop is unaffected.
// This is the scroll-independence lock for this seed.
expect(after.chat?.scrollTop ?? -1, afterDiag).toBe(chatScrollTopBefore);

// (b) Footer still fully inside the panel and the window after scrolling the
Expand Down
30 changes: 0 additions & 30 deletions apps/desktop/resources/licenses/npm/THIRD_PARTY_NOTICES.txt
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7003,36 +7003,6 @@ IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

================================================================================

Package: overlayscrollbars@2.16.0
Declared license: MIT
Selected license: MIT
Repository: https://github.com/KingSora/OverlayScrollbars.git#packages/overlayscrollbars

--- VERSION-PINNED LICENSE TEXT OVERRIDE ---
MIT License

Copyright (c) 2022 Rene Haas

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================================================

Package: p-finally@1.0.0
Declared license: MIT
Selected license: MIT
Expand Down
7 changes: 5 additions & 2 deletions apps/desktop/src/main/__tests__/attachment-chat-render.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,11 +3,14 @@ import { describe, it } from 'node:test';
import { createElement, type ReactNode } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import type { AttachmentRef, SessionSummary, StoredMessage } from '@maka/core';
import { ChatView, LocaleProvider } from '@maka/ui';
import { ChatSurfaceLayout, ChatView, LocaleProvider } from '@maka/ui';

function renderWithLocale(child: ReactNode): string {
return renderToStaticMarkup(
createElement(LocaleProvider, { locale: 'zh', children: child }),
createElement(LocaleProvider, {
locale: 'zh',
children: createElement(ChatSurfaceLayout, { composer: null, children: child }),
}),
);
}

Expand Down
6 changes: 5 additions & 1 deletion apps/desktop/src/main/__tests__/streaming-handoff.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
import type { SessionEvent } from '@maka/core';
import {
armLiveTurn,
ChatSurfaceLayout,
ChatView,
LocaleProvider,
type LiveTurnProjection,
Expand All@@ -14,7 +15,10 @@ import { createAppShellSessionEventHandlers } from '../../renderer/app-shell-ses

function renderWithLocale(child: ReactNode): string {
return renderToStaticMarkup(
createElement(LocaleProvider, { locale: 'zh', children: child }),
createElement(LocaleProvider, {
locale: 'zh',
children: createElement(ChatSurfaceLayout, { composer: null, children: child }),
}),
);
}

Expand Down
19 changes: 1 addition & 18 deletions apps/desktop/src/main/__tests__/ui-render-memo-boundary-contract.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { resolve } from 'node:path';
import { pathToFileURL } from 'node:url';
import { afterEach, describe, it } from 'node:test';
import type { SessionSummary } from '@maka/core';
import { build, type Plugin } from 'esbuild';
import { build } from 'esbuild';
import { act, createElement, type ReactElement } from 'react';
import { createRoot, type Root } from 'react-dom/client';

Expand DownExpand Up@@ -212,27 +212,10 @@ async function importSessionHistoryList(): Promise<SessionHistoryModule> {
format: 'esm',
target: 'node20',
logLevel: 'silent',
plugins: [mockOverlayScrollbars()],
});
return await import(`${pathToFileURL(outfile).href}?t=${Date.now()}`) as SessionHistoryModule;
}

function mockOverlayScrollbars(): Plugin {
return {
name: 'mock-overlayscrollbars',
setup(buildApi) {
buildApi.onResolve({ filter: /^overlayscrollbars$/ }, () => ({
path: 'overlayscrollbars-mock',
namespace: 'memo-test',
}));
buildApi.onLoad({ filter: /^overlayscrollbars-mock$/, namespace: 'memo-test' }, () => ({
loader: 'js',
contents: 'export function OverlayScrollbars() { return { destroy() {}, options() {} }; }',
}));
},
};
}

function installReactRenderer(): Root {
installFakeDom();
const container = new FakeElement('div', document);
Expand Down
1 change: 1 addition & 0 deletions apps/desktop/src/main/e2e-fixture/scenarios-sessions.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@ export function longTranscriptSession(now: number): SessionHeader {
name: '超长会话滚动几何',
connection: 'zai-live',
model: 'glm-5.1',
orchestrationMode: 'graph',
now,
lastMessageAt: now - 5 * 60_000,
});
Expand Down
2 changes: 2 additions & 0 deletions apps/desktop/src/main/e2e-fixture/seed-helpers.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -99,6 +99,7 @@ export function header(input: {
blockedReason?: SessionHeader['blockedReason'];
isArchived?: boolean;
isFlagged?: boolean;
orchestrationMode?: SessionHeader['orchestrationMode'];
}): SessionHeader {
return {
id: input.id,
Expand All@@ -116,6 +117,7 @@ export function header(input: {
...(input.blockedReason ? { blockedReason: input.blockedReason } : {}),
statusUpdatedAt: input.lastMessageAt,
hasUnread: input.hasUnread ?? false,
...(input.orchestrationMode ? { orchestrationMode: input.orchestrationMode } : {}),
// Legacy backend kinds like 'claude' aren't in the current BackendKind
// union but are needed for the stale-sessions reproduction. Forward
// the value verbatim into the JSONL so the renderer sees exactly what
Expand Down
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
refactor(ui): migrate chat surfaces to Astryx layout#1795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Astro-Han
merged 5 commits into

from

Aug 1, 2026
 Merged


refactor(ui): migrate chat surfaces to Astryx layout
#1795
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
7fe22bb

refactor(ui): migrate chat surfaces to Astryx layout


Astro-Han Aug 1, 2026
7227d42

fix(ui): remove phantom chat scroll range


Astro-Han Aug 1, 2026
2a16fd9

fix(ui): keep chat status panels docked


Astro-Han Aug 1, 2026
ea0e32f

refactor(ui): require Astryx chat layout ownership


Astro-Han Aug 1, 2026
b547767

test(ui): render chat view with layout owner


Astro-Han Aug 1, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
apps/desktop/e2e/fixtures.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -271,7 +271,7 @@ export const test = base.extend<{
 await withE2eWindow(
 {
 seed: false,
 readinessSelector: '.maka-chatViewport:has(.maka-turn):not(:has(.maka-markdown-pending))',
 readinessSelector: '[data-chat-scroll-container="true"]:has(.maka-turn):not(:has(.maka-markdown-pending))',
 e2eFixtureScenario: 'long-transcript',
 locale: 'zh',
 },
Expand Down

61 changes: 51 additions & 10 deletions
apps/desktop/e2e/scroll-geometry.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,7 +17,7 @@ import { test, expect } from './fixtures';
 */

const probeScroller = `(() => {
 const scroller = document.querySelector('.maka-chatViewport');
 const scroller = document.querySelector('[data-chat-scroll-container="true"]');
 return {
 scrollHeight: scroller.scrollHeight,
 clientHeight: scroller.clientHeight,
Expand DownExpand Up@@ -45,8 +45,8 @@ type ColumnGeometry = {

async function probeColumnGeometry(page: import('@playwright/test').Page): Promise<ColumnGeometry> {
 return await page.evaluate(() => {
 const host = document.querySelector<HTMLElement>('.maka-chat.messages');
 const viewport = document.querySelector<HTMLElement>('.maka-chatViewport');
 const host = document.querySelector<HTMLElement>('.maka-chat-layout');
 const viewport = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const turn = document.querySelector<HTMLElement>('.maka-turn');
 const composer = document.querySelector<HTMLElement>('.composer .maka-composer-astryx');
 if (!host || !viewport || !turn || !composer) {
Expand DownExpand Up@@ -91,7 +91,7 @@ async function probeColumnGeometry(page: import('@playwright/test').Page): Promi
 * done, so ask it.
 */
async function settleGeometry(page: import('@playwright/test').Page, options: { pinned: boolean }): Promise<void> {
 await expect(page.locator('.maka-chatViewport[data-turn-warmup="settled"]')).toBeAttached({ timeout: 15_000 });
 await expect(page.locator('[data-chat-scroll-container="true"][data-turn-warmup="settled"]')).toBeAttached({ timeout: 15_000 });
 const settled = await page.evaluate(probeScroller) as { scrollHeight: number };
 expect(settled.scrollHeight, JSON.stringify(settled)).toBeGreaterThan(WARMED_HEIGHT_FLOOR);
 // The last chunk's inflation reaches the pinned follower through a
Expand All@@ -116,15 +116,15 @@ test('chat viewport and message column share the composer centerline', async ({
 }
});

test('empty chat keeps its grid content flush with the viewport', async ({ window: page }) => {
test('empty chat has no phantom vertical range and stays flush with the viewport', async ({ window: page }) => {
 const content = page.locator('.mainColumn[data-home-surface="true"] .maka-chatContent');
 await expect(content).toBeVisible();

 for (const width of [900, 1180, 1440]) {
 await page.setViewportSize({ width, height: 760 });
 const geometry = await page.evaluate(() => {
 const host = document.querySelector<HTMLElement>('.maka-chat.messages');
 const viewport = document.querySelector<HTMLElement>('.maka-chatViewport');
 const host = document.querySelector<HTMLElement>('.maka-chat-layout');
 const viewport = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const content = document.querySelector<HTMLElement>('.maka-chatContent');
 if (!host || !viewport || !content) throw new Error('Expected the empty chat scroll surface');
 const hostRect = host.getBoundingClientRect();
Expand All@@ -134,12 +134,15 @@ test('empty chat keeps its grid content flush with the viewport', async ({ windo
 hostViewportLeftDelta: viewportRect.left - hostRect.left,
 contentDisplay: contentStyle.display,
 contentGap: contentStyle.gap,
 scrollRange: viewport.scrollHeight - viewport.clientHeight,
 scrollTop: viewport.scrollTop,
 };
 });
 const diagnostics = JSON.stringify({ width, ...geometry });
 expect(Math.abs(geometry.hostViewportLeftDelta), diagnostics).toBeLessThanOrEqual(1);
 expect(geometry.contentDisplay, diagnostics).toBe('grid');
 expect(geometry.contentGap, diagnostics).toBe('0px');
 expect(geometry.contentDisplay, diagnostics).toBe('flex');
 expect(geometry.scrollRange, diagnostics).toBeLessThanOrEqual(1);
 expect(geometry.scrollTop, diagnostics).toBeLessThanOrEqual(1);
 }
});

Expand All@@ -156,11 +159,49 @@ test('long session opens pinned to bottom and stays pinned while geometry settle
 // And the pin still holds once the walk reports itself done, which is what
 // makes the poll above a contract rather than a lucky early read.
 await settleGeometry(page, { pinned: true });

 const bottomBoundary = await page.evaluate(() => {
 const scroller = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const lastTurn = scroller?.querySelector<HTMLElement>('.maka-turn:last-of-type');
 const dock = scroller?.lastElementChild;
 if (!lastTurn || !dock) throw new Error('Expected the final turn and Astryx dock');
 return {
 dockTop: dock.getBoundingClientRect().top,
 lastTurnBottom: lastTurn.getBoundingClientRect().bottom,
 };
 });
 expect(
 bottomBoundary.lastTurnBottom,
 JSON.stringify(bottomBoundary),
 ).toBeLessThanOrEqual(bottomBoundary.dockTop + 1);
 expect(
 bottomBoundary.dockTop - bottomBoundary.lastTurnBottom,
 JSON.stringify(bottomBoundary),
 ).toBeLessThanOrEqual(48);
});

test('graph status stays docked above the composer while transcript history scrolls', async ({ longTranscriptWindow: page }) => {
 await settleGeometry(page, { pinned: true });
 const graphPanel = page.locator('.maka-agent-graph-panel');
 await expect(graphPanel).toBeVisible();

 const before = await graphPanel.boundingBox();
 expect(before).not.toBeNull();
 await page.evaluate(() => {
 const scroller = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 if (!scroller) throw new Error('Expected the Astryx chat scroller');
 scroller.scrollTop = 0;
 });
 const after = await graphPanel.boundingBox();
 expect(after).not.toBeNull();
 if (before && after) {
 expect(Math.abs(after.y - before.y), JSON.stringify({ before, after })).toBeLessThanOrEqual(1);
 }
});

async function climbToTop(page: import('@playwright/test').Page) {
 return await page.evaluate(async () => {
 const scroller = document.querySelector('.maka-chatViewport') as HTMLElement;
 const scroller = document.querySelector('[data-chat-scroll-container="true"]') as HTMLElement;
 const started = performance.now();
 // Self-imposed deadline well under the 60s test timeout: a stalled or
 // crawling compositor must produce a diagnosable assertion failure with
Expand Down

32 changes: 27 additions & 5 deletions
apps/desktop/e2e/sidebar-geometry.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -27,7 +27,7 @@ import type { Page } from '@playwright/test';
 * and does not assert rendered footer-visibility geometry. The two layers
 * deliberately lock different declarations.
 * - `scroll-geometry.spec.ts` boots `long-transcript` and probes
 * `.maka-chatViewport`, not the sidebar.
 * Astryx `ChatLayout`, not the sidebar.
 *
 * This spec is the rendered-geometry lock. It boots the `sidebar-long-sessions`
 * fixture and asserts, against the live desktop shell:
Expand All@@ -48,7 +48,7 @@ import type { Page } from '@playwright/test';
 */

const LIST_CONTENT = '.maka-session-list';
const CHAT_VIEWPORT = '.maka-chatViewport';
const CHAT_VIEWPORT = '[data-chat-scroll-container="true"]';

interface ScrollerMetrics {
 scrollTop: number;
Expand DownExpand Up@@ -90,7 +90,7 @@ async function readGeometry(page: Page): Promise<Geometry> {
 panel: rect(document.querySelector('.maka-session-panel')),
 viewport: { width: window.innerWidth, height: window.innerHeight },
 list: scroller(document.querySelector(listContentSelector)?.parentElement ?? null),
 chat: scroller(document.querySelector('.maka-chatViewport')),
 chat: scroller(document.querySelector('[data-chat-scroll-container="true"]')),
 };
 }, LIST_CONTENT);
}
Expand DownExpand Up@@ -167,6 +167,28 @@ test('sidebar list scrolls independently and keeps the footer in view with 60 se
 await expect(page.locator(LIST_CONTENT)).toHaveCount(1);
 await expect(page.locator(CHAT_VIEWPORT)).toHaveCount(1);

 // Astryx owns the chat's initial fill and follows transcript geometry
 // asynchronously. Establish its terminal pinned position before using the
 // chat scrollTop as the sidebar-independence control value.
 await expect(page.locator(`${CHAT_VIEWPORT}[data-turn-warmup="settled"]`)).toBeAttached();
 await expect.poll(async () => {
 const geometry = await readGeometry(page);
 return geometry.chat
 ? Math.round(geometry.chat.scrollHeight - geometry.chat.scrollTop - geometry.chat.clientHeight)
 : Number.POSITIVE_INFINITY;
 }).toBeLessThanOrEqual(1);

 // The newest fixture session is one short exchange. It already fits above
 // the composer, so reaching its final message must not create a second,
 // composer-height scroll range below the conversation.
 const settledChat = (await readGeometry(page)).chat;
 expect(settledChat, JSON.stringify(settledChat)).not.toBeNull();
 if (settledChat) {
 const diagnostics = JSON.stringify(settledChat);
 expect(settledChat.scrollHeight - settledChat.clientHeight, diagnostics).toBeLessThanOrEqual(1);
 expect(settledChat.scrollTop, diagnostics).toBeLessThanOrEqual(1);
 }

 // (1a) The sidebar list scroller actually overflows its constrained grid
 // row — this is what makes it an independent scroll container. If the panel
 // loses its constrained height, the row grows to content height and this
Expand DownExpand Up@@ -199,8 +221,8 @@ test('sidebar list scrolls independently and keeps the footer in view with 60 se

 // The sidebar's own scrollTop moved...
 expect(after.list?.scrollTop ?? -1, afterDiag).toBeGreaterThan(listScrollTopBefore);
 // ...while the chat viewport's scrollTop is unaffected (short transcript →
 // stays pinned at 0). This is the scroll-independence lock for this seed.
 // ...while the already-settled chat viewport's scrollTop is unaffected.
 // This is the scroll-independence lock for this seed.
 expect(after.chat?.scrollTop ?? -1, afterDiag).toBe(chatScrollTopBefore);

 // (b) Footer still fully inside the panel and the window after scrolling the
Expand Down

30 changes: 0 additions & 30 deletions
apps/desktop/resources/licenses/npm/THIRD_PARTY_NOTICES.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7003,36 +7003,6 @@ IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

================================================================================

Package: overlayscrollbars@2.16.0
Declared license: MIT
Selected license: MIT
Repository: https://github.com/KingSora/OverlayScrollbars.git#packages/overlayscrollbars

--- VERSION-PINNED LICENSE TEXT OVERRIDE ---
MIT License

Copyright (c) 2022 Rene Haas

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================================================

Package: p-finally@1.0.0
Declared license: MIT
Selected license: MIT
Expand Down

7 changes: 5 additions & 2 deletions
apps/desktop/src/main/__tests__/attachment-chat-render.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,11 +3,14 @@ import { describe, it } from 'node:test';
import { createElement, type ReactNode } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import type { AttachmentRef, SessionSummary, StoredMessage } from '@maka/core';
import { ChatView, LocaleProvider } from '@maka/ui';
import { ChatSurfaceLayout, ChatView, LocaleProvider } from '@maka/ui';

function renderWithLocale(child: ReactNode): string {
 return renderToStaticMarkup(
 createElement(LocaleProvider, { locale: 'zh', children: child }),
 createElement(LocaleProvider, {
 locale: 'zh',
 children: createElement(ChatSurfaceLayout, { composer: null, children: child }),
 }),
 );
}

Expand Down

6 changes: 5 additions & 1 deletion
apps/desktop/src/main/__tests__/streaming-handoff.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
import type { SessionEvent } from '@maka/core';
import {
 armLiveTurn,
 ChatSurfaceLayout,
 ChatView,
 LocaleProvider,
 type LiveTurnProjection,
Expand All@@ -14,7 +15,10 @@ import { createAppShellSessionEventHandlers } from '../../renderer/app-shell-ses

function renderWithLocale(child: ReactNode): string {
 return renderToStaticMarkup(
 createElement(LocaleProvider, { locale: 'zh', children: child }),
 createElement(LocaleProvider, {
 locale: 'zh',
 children: createElement(ChatSurfaceLayout, { composer: null, children: child }),
 }),
 );
}

Expand Down

19 changes: 1 addition & 18 deletions
apps/desktop/src/main/__tests__/ui-render-memo-boundary-contract.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { resolve } from 'node:path';
import { pathToFileURL } from 'node:url';
import { afterEach, describe, it } from 'node:test';
import type { SessionSummary } from '@maka/core';
import { build, type Plugin } from 'esbuild';
import { build } from 'esbuild';
import { act, createElement, type ReactElement } from 'react';
import { createRoot, type Root } from 'react-dom/client';

Expand DownExpand Up@@ -212,27 +212,10 @@ async function importSessionHistoryList(): Promise<SessionHistoryModule> {
 format: 'esm',
 target: 'node20',
 logLevel: 'silent',
 plugins: [mockOverlayScrollbars()],
 });
 return await import(`${pathToFileURL(outfile).href}?t=${Date.now()}`) as SessionHistoryModule;
}

function mockOverlayScrollbars(): Plugin {
 return {
 name: 'mock-overlayscrollbars',
 setup(buildApi) {
 buildApi.onResolve({ filter: /^overlayscrollbars$/ }, () => ({
 path: 'overlayscrollbars-mock',
 namespace: 'memo-test',
 }));
 buildApi.onLoad({ filter: /^overlayscrollbars-mock$/, namespace: 'memo-test' }, () => ({
 loader: 'js',
 contents: 'export function OverlayScrollbars() { return { destroy() {}, options() {} }; }',
 }));
 },
 };
}

function installReactRenderer(): Root {
 installFakeDom();
 const container = new FakeElement('div', document);
Expand Down

1 change: 1 addition & 0 deletions
apps/desktop/src/main/e2e-fixture/scenarios-sessions.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@ export function longTranscriptSession(now: number): SessionHeader {
 name: '超长会话滚动几何',
 connection: 'zai-live',
 model: 'glm-5.1',
 orchestrationMode: 'graph',
 now,
 lastMessageAt: now - 5 * 60_000,
 });
Expand Down

2 changes: 2 additions & 0 deletions
apps/desktop/src/main/e2e-fixture/seed-helpers.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -99,6 +99,7 @@ export function header(input: {
 blockedReason?: SessionHeader['blockedReason'];
 isArchived?: boolean;
 isFlagged?: boolean;
 orchestrationMode?: SessionHeader['orchestrationMode'];
}): SessionHeader {
 return {
 id: input.id,
Expand All@@ -116,6 +117,7 @@ export function header(input: {
 ...(input.blockedReason ? { blockedReason: input.blockedReason } : {}),
 statusUpdatedAt: input.lastMessageAt,
 hasUnread: input.hasUnread ?? false,
 ...(input.orchestrationMode ? { orchestrationMode: input.orchestrationMode } : {}),
 // Legacy backend kinds like 'claude' aren't in the current BackendKind
 // union but are needed for the stale-sessions reproduction. Forward
 // the value verbatim into the JSONL so the renderer sees exactly what
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
refactor(ui): migrate chat surfaces to Astryx layout#1795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Astro-Han
merged 5 commits into

from

Aug 1, 2026
 Merged


refactor(ui): migrate chat surfaces to Astryx layout
#1795
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
7fe22bb

refactor(ui): migrate chat surfaces to Astryx layout


Astro-Han Aug 1, 2026
7227d42

fix(ui): remove phantom chat scroll range


Astro-Han Aug 1, 2026
2a16fd9

fix(ui): keep chat status panels docked


Astro-Han Aug 1, 2026
ea0e32f

refactor(ui): require Astryx chat layout ownership


Astro-Han Aug 1, 2026
b547767

test(ui): render chat view with layout owner


Astro-Han Aug 1, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
apps/desktop/e2e/fixtures.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -271,7 +271,7 @@ export const test = base.extend<{
 await withE2eWindow(
 {
 seed: false,
 readinessSelector: '.maka-chatViewport:has(.maka-turn):not(:has(.maka-markdown-pending))',
 readinessSelector: '[data-chat-scroll-container="true"]:has(.maka-turn):not(:has(.maka-markdown-pending))',
 e2eFixtureScenario: 'long-transcript',
 locale: 'zh',
 },
Expand Down

61 changes: 51 additions & 10 deletions
apps/desktop/e2e/scroll-geometry.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,7 +17,7 @@ import { test, expect } from './fixtures';
 */

const probeScroller = `(() => {
 const scroller = document.querySelector('.maka-chatViewport');
 const scroller = document.querySelector('[data-chat-scroll-container="true"]');
 return {
 scrollHeight: scroller.scrollHeight,
 clientHeight: scroller.clientHeight,
Expand DownExpand Up@@ -45,8 +45,8 @@ type ColumnGeometry = {

async function probeColumnGeometry(page: import('@playwright/test').Page): Promise<ColumnGeometry> {
 return await page.evaluate(() => {
 const host = document.querySelector<HTMLElement>('.maka-chat.messages');
 const viewport = document.querySelector<HTMLElement>('.maka-chatViewport');
 const host = document.querySelector<HTMLElement>('.maka-chat-layout');
 const viewport = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const turn = document.querySelector<HTMLElement>('.maka-turn');
 const composer = document.querySelector<HTMLElement>('.composer .maka-composer-astryx');
 if (!host || !viewport || !turn || !composer) {
Expand DownExpand Up@@ -91,7 +91,7 @@ async function probeColumnGeometry(page: import('@playwright/test').Page): Promi
 * done, so ask it.
 */
async function settleGeometry(page: import('@playwright/test').Page, options: { pinned: boolean }): Promise<void> {
 await expect(page.locator('.maka-chatViewport[data-turn-warmup="settled"]')).toBeAttached({ timeout: 15_000 });
 await expect(page.locator('[data-chat-scroll-container="true"][data-turn-warmup="settled"]')).toBeAttached({ timeout: 15_000 });
 const settled = await page.evaluate(probeScroller) as { scrollHeight: number };
 expect(settled.scrollHeight, JSON.stringify(settled)).toBeGreaterThan(WARMED_HEIGHT_FLOOR);
 // The last chunk's inflation reaches the pinned follower through a
Expand All@@ -116,15 +116,15 @@ test('chat viewport and message column share the composer centerline', async ({
 }
});

test('empty chat keeps its grid content flush with the viewport', async ({ window: page }) => {
test('empty chat has no phantom vertical range and stays flush with the viewport', async ({ window: page }) => {
 const content = page.locator('.mainColumn[data-home-surface="true"] .maka-chatContent');
 await expect(content).toBeVisible();

 for (const width of [900, 1180, 1440]) {
 await page.setViewportSize({ width, height: 760 });
 const geometry = await page.evaluate(() => {
 const host = document.querySelector<HTMLElement>('.maka-chat.messages');
 const viewport = document.querySelector<HTMLElement>('.maka-chatViewport');
 const host = document.querySelector<HTMLElement>('.maka-chat-layout');
 const viewport = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const content = document.querySelector<HTMLElement>('.maka-chatContent');
 if (!host || !viewport || !content) throw new Error('Expected the empty chat scroll surface');
 const hostRect = host.getBoundingClientRect();
Expand All@@ -134,12 +134,15 @@ test('empty chat keeps its grid content flush with the viewport', async ({ windo
 hostViewportLeftDelta: viewportRect.left - hostRect.left,
 contentDisplay: contentStyle.display,
 contentGap: contentStyle.gap,
 scrollRange: viewport.scrollHeight - viewport.clientHeight,
 scrollTop: viewport.scrollTop,
 };
 });
 const diagnostics = JSON.stringify({ width, ...geometry });
 expect(Math.abs(geometry.hostViewportLeftDelta), diagnostics).toBeLessThanOrEqual(1);
 expect(geometry.contentDisplay, diagnostics).toBe('grid');
 expect(geometry.contentGap, diagnostics).toBe('0px');
 expect(geometry.contentDisplay, diagnostics).toBe('flex');
 expect(geometry.scrollRange, diagnostics).toBeLessThanOrEqual(1);
 expect(geometry.scrollTop, diagnostics).toBeLessThanOrEqual(1);
 }
});

Expand All@@ -156,11 +159,49 @@ test('long session opens pinned to bottom and stays pinned while geometry settle
 // And the pin still holds once the walk reports itself done, which is what
 // makes the poll above a contract rather than a lucky early read.
 await settleGeometry(page, { pinned: true });

 const bottomBoundary = await page.evaluate(() => {
 const scroller = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const lastTurn = scroller?.querySelector<HTMLElement>('.maka-turn:last-of-type');
 const dock = scroller?.lastElementChild;
 if (!lastTurn || !dock) throw new Error('Expected the final turn and Astryx dock');
 return {
 dockTop: dock.getBoundingClientRect().top,
 lastTurnBottom: lastTurn.getBoundingClientRect().bottom,
 };
 });
 expect(
 bottomBoundary.lastTurnBottom,
 JSON.stringify(bottomBoundary),
 ).toBeLessThanOrEqual(bottomBoundary.dockTop + 1);
 expect(
 bottomBoundary.dockTop - bottomBoundary.lastTurnBottom,
 JSON.stringify(bottomBoundary),
 ).toBeLessThanOrEqual(48);
});

test('graph status stays docked above the composer while transcript history scrolls', async ({ longTranscriptWindow: page }) => {
 await settleGeometry(page, { pinned: true });
 const graphPanel = page.locator('.maka-agent-graph-panel');
 await expect(graphPanel).toBeVisible();

 const before = await graphPanel.boundingBox();
 expect(before).not.toBeNull();
 await page.evaluate(() => {
 const scroller = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 if (!scroller) throw new Error('Expected the Astryx chat scroller');
 scroller.scrollTop = 0;
 });
 const after = await graphPanel.boundingBox();
 expect(after).not.toBeNull();
 if (before && after) {
 expect(Math.abs(after.y - before.y), JSON.stringify({ before, after })).toBeLessThanOrEqual(1);
 }
});

async function climbToTop(page: import('@playwright/test').Page) {
 return await page.evaluate(async () => {
 const scroller = document.querySelector('.maka-chatViewport') as HTMLElement;
 const scroller = document.querySelector('[data-chat-scroll-container="true"]') as HTMLElement;
 const started = performance.now();
 // Self-imposed deadline well under the 60s test timeout: a stalled or
 // crawling compositor must produce a diagnosable assertion failure with
Expand Down

32 changes: 27 additions & 5 deletions
apps/desktop/e2e/sidebar-geometry.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -27,7 +27,7 @@ import type { Page } from '@playwright/test';
 * and does not assert rendered footer-visibility geometry. The two layers
 * deliberately lock different declarations.
 * - `scroll-geometry.spec.ts` boots `long-transcript` and probes
 * `.maka-chatViewport`, not the sidebar.
 * Astryx `ChatLayout`, not the sidebar.
 *
 * This spec is the rendered-geometry lock. It boots the `sidebar-long-sessions`
 * fixture and asserts, against the live desktop shell:
Expand All@@ -48,7 +48,7 @@ import type { Page } from '@playwright/test';
 */

const LIST_CONTENT = '.maka-session-list';
const CHAT_VIEWPORT = '.maka-chatViewport';
const CHAT_VIEWPORT = '[data-chat-scroll-container="true"]';

interface ScrollerMetrics {
 scrollTop: number;
Expand DownExpand Up@@ -90,7 +90,7 @@ async function readGeometry(page: Page): Promise<Geometry> {
 panel: rect(document.querySelector('.maka-session-panel')),
 viewport: { width: window.innerWidth, height: window.innerHeight },
 list: scroller(document.querySelector(listContentSelector)?.parentElement ?? null),
 chat: scroller(document.querySelector('.maka-chatViewport')),
 chat: scroller(document.querySelector('[data-chat-scroll-container="true"]')),
 };
 }, LIST_CONTENT);
}
Expand DownExpand Up@@ -167,6 +167,28 @@ test('sidebar list scrolls independently and keeps the footer in view with 60 se
 await expect(page.locator(LIST_CONTENT)).toHaveCount(1);
 await expect(page.locator(CHAT_VIEWPORT)).toHaveCount(1);

 // Astryx owns the chat's initial fill and follows transcript geometry
 // asynchronously. Establish its terminal pinned position before using the
 // chat scrollTop as the sidebar-independence control value.
 await expect(page.locator(`${CHAT_VIEWPORT}[data-turn-warmup="settled"]`)).toBeAttached();
 await expect.poll(async () => {
 const geometry = await readGeometry(page);
 return geometry.chat
 ? Math.round(geometry.chat.scrollHeight - geometry.chat.scrollTop - geometry.chat.clientHeight)
 : Number.POSITIVE_INFINITY;
 }).toBeLessThanOrEqual(1);

 // The newest fixture session is one short exchange. It already fits above
 // the composer, so reaching its final message must not create a second,
 // composer-height scroll range below the conversation.
 const settledChat = (await readGeometry(page)).chat;
 expect(settledChat, JSON.stringify(settledChat)).not.toBeNull();
 if (settledChat) {
 const diagnostics = JSON.stringify(settledChat);
 expect(settledChat.scrollHeight - settledChat.clientHeight, diagnostics).toBeLessThanOrEqual(1);
 expect(settledChat.scrollTop, diagnostics).toBeLessThanOrEqual(1);
 }

 // (1a) The sidebar list scroller actually overflows its constrained grid
 // row — this is what makes it an independent scroll container. If the panel
 // loses its constrained height, the row grows to content height and this
Expand DownExpand Up@@ -199,8 +221,8 @@ test('sidebar list scrolls independently and keeps the footer in view with 60 se

 // The sidebar's own scrollTop moved...
 expect(after.list?.scrollTop ?? -1, afterDiag).toBeGreaterThan(listScrollTopBefore);
 // ...while the chat viewport's scrollTop is unaffected (short transcript →
 // stays pinned at 0). This is the scroll-independence lock for this seed.
 // ...while the already-settled chat viewport's scrollTop is unaffected.
 // This is the scroll-independence lock for this seed.
 expect(after.chat?.scrollTop ?? -1, afterDiag).toBe(chatScrollTopBefore);

 // (b) Footer still fully inside the panel and the window after scrolling the
Expand Down

30 changes: 0 additions & 30 deletions
apps/desktop/resources/licenses/npm/THIRD_PARTY_NOTICES.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7003,36 +7003,6 @@ IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

================================================================================

Package: overlayscrollbars@2.16.0
Declared license: MIT
Selected license: MIT
Repository: https://github.com/KingSora/OverlayScrollbars.git#packages/overlayscrollbars

--- VERSION-PINNED LICENSE TEXT OVERRIDE ---
MIT License

Copyright (c) 2022 Rene Haas

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================================================

Package: p-finally@1.0.0
Declared license: MIT
Selected license: MIT
Expand Down

7 changes: 5 additions & 2 deletions
apps/desktop/src/main/__tests__/attachment-chat-render.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,11 +3,14 @@ import { describe, it } from 'node:test';
import { createElement, type ReactNode } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import type { AttachmentRef, SessionSummary, StoredMessage } from '@maka/core';
import { ChatView, LocaleProvider } from '@maka/ui';
import { ChatSurfaceLayout, ChatView, LocaleProvider } from '@maka/ui';

function renderWithLocale(child: ReactNode): string {
 return renderToStaticMarkup(
 createElement(LocaleProvider, { locale: 'zh', children: child }),
 createElement(LocaleProvider, {
 locale: 'zh',
 children: createElement(ChatSurfaceLayout, { composer: null, children: child }),
 }),
 );
}

Expand Down

6 changes: 5 additions & 1 deletion
apps/desktop/src/main/__tests__/streaming-handoff.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
import type { SessionEvent } from '@maka/core';
import {
 armLiveTurn,
 ChatSurfaceLayout,
 ChatView,
 LocaleProvider,
 type LiveTurnProjection,
Expand All@@ -14,7 +15,10 @@ import { createAppShellSessionEventHandlers } from '../../renderer/app-shell-ses

function renderWithLocale(child: ReactNode): string {
 return renderToStaticMarkup(
 createElement(LocaleProvider, { locale: 'zh', children: child }),
 createElement(LocaleProvider, {
 locale: 'zh',
 children: createElement(ChatSurfaceLayout, { composer: null, children: child }),
 }),
 );
}

Expand Down

19 changes: 1 addition & 18 deletions
apps/desktop/src/main/__tests__/ui-render-memo-boundary-contract.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { resolve } from 'node:path';
import { pathToFileURL } from 'node:url';
import { afterEach, describe, it } from 'node:test';
import type { SessionSummary } from '@maka/core';
import { build, type Plugin } from 'esbuild';
import { build } from 'esbuild';
import { act, createElement, type ReactElement } from 'react';
import { createRoot, type Root } from 'react-dom/client';

Expand DownExpand Up@@ -212,27 +212,10 @@ async function importSessionHistoryList(): Promise<SessionHistoryModule> {
 format: 'esm',
 target: 'node20',
 logLevel: 'silent',
 plugins: [mockOverlayScrollbars()],
 });
 return await import(`${pathToFileURL(outfile).href}?t=${Date.now()}`) as SessionHistoryModule;
}

function mockOverlayScrollbars(): Plugin {
 return {
 name: 'mock-overlayscrollbars',
 setup(buildApi) {
 buildApi.onResolve({ filter: /^overlayscrollbars$/ }, () => ({
 path: 'overlayscrollbars-mock',
 namespace: 'memo-test',
 }));
 buildApi.onLoad({ filter: /^overlayscrollbars-mock$/, namespace: 'memo-test' }, () => ({
 loader: 'js',
 contents: 'export function OverlayScrollbars() { return { destroy() {}, options() {} }; }',
 }));
 },
 };
}

function installReactRenderer(): Root {
 installFakeDom();
 const container = new FakeElement('div', document);
Expand Down

1 change: 1 addition & 0 deletions
apps/desktop/src/main/e2e-fixture/scenarios-sessions.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@ export function longTranscriptSession(now: number): SessionHeader {
 name: '超长会话滚动几何',
 connection: 'zai-live',
 model: 'glm-5.1',
 orchestrationMode: 'graph',
 now,
 lastMessageAt: now - 5 * 60_000,
 });
Expand Down

2 changes: 2 additions & 0 deletions
apps/desktop/src/main/e2e-fixture/seed-helpers.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -99,6 +99,7 @@ export function header(input: {
 blockedReason?: SessionHeader['blockedReason'];
 isArchived?: boolean;
 isFlagged?: boolean;
 orchestrationMode?: SessionHeader['orchestrationMode'];
}): SessionHeader {
 return {
 id: input.id,
Expand All@@ -116,6 +117,7 @@ export function header(input: {
 ...(input.blockedReason ? { blockedReason: input.blockedReason } : {}),
 statusUpdatedAt: input.lastMessageAt,
 hasUnread: input.hasUnread ?? false,
 ...(input.orchestrationMode ? { orchestrationMode: input.orchestrationMode } : {}),
 // Legacy backend kinds like 'claude' aren't in the current BackendKind
 // union but are needed for the stale-sessions reproduction. Forward
 // the value verbatim into the JSONL so the renderer sees exactly what
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
refactor(ui): migrate chat surfaces to Astryx layout#1795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Astro-Han
merged 5 commits into

from

Aug 1, 2026
 Merged


refactor(ui): migrate chat surfaces to Astryx layout
#1795
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
7fe22bb

refactor(ui): migrate chat surfaces to Astryx layout


Astro-Han Aug 1, 2026
7227d42

fix(ui): remove phantom chat scroll range


Astro-Han Aug 1, 2026
2a16fd9

fix(ui): keep chat status panels docked


Astro-Han Aug 1, 2026
ea0e32f

refactor(ui): require Astryx chat layout ownership


Astro-Han Aug 1, 2026
b547767

test(ui): render chat view with layout owner


Astro-Han Aug 1, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
apps/desktop/e2e/fixtures.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -271,7 +271,7 @@ export const test = base.extend<{
 await withE2eWindow(
 {
 seed: false,
 readinessSelector: '.maka-chatViewport:has(.maka-turn):not(:has(.maka-markdown-pending))',
 readinessSelector: '[data-chat-scroll-container="true"]:has(.maka-turn):not(:has(.maka-markdown-pending))',
 e2eFixtureScenario: 'long-transcript',
 locale: 'zh',
 },
Expand Down

61 changes: 51 additions & 10 deletions
apps/desktop/e2e/scroll-geometry.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,7 +17,7 @@ import { test, expect } from './fixtures';
 */

const probeScroller = `(() => {
 const scroller = document.querySelector('.maka-chatViewport');
 const scroller = document.querySelector('[data-chat-scroll-container="true"]');
 return {
 scrollHeight: scroller.scrollHeight,
 clientHeight: scroller.clientHeight,
Expand DownExpand Up@@ -45,8 +45,8 @@ type ColumnGeometry = {

async function probeColumnGeometry(page: import('@playwright/test').Page): Promise<ColumnGeometry> {
 return await page.evaluate(() => {
 const host = document.querySelector<HTMLElement>('.maka-chat.messages');
 const viewport = document.querySelector<HTMLElement>('.maka-chatViewport');
 const host = document.querySelector<HTMLElement>('.maka-chat-layout');
 const viewport = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const turn = document.querySelector<HTMLElement>('.maka-turn');
 const composer = document.querySelector<HTMLElement>('.composer .maka-composer-astryx');
 if (!host || !viewport || !turn || !composer) {
Expand DownExpand Up@@ -91,7 +91,7 @@ async function probeColumnGeometry(page: import('@playwright/test').Page): Promi
 * done, so ask it.
 */
async function settleGeometry(page: import('@playwright/test').Page, options: { pinned: boolean }): Promise<void> {
 await expect(page.locator('.maka-chatViewport[data-turn-warmup="settled"]')).toBeAttached({ timeout: 15_000 });
 await expect(page.locator('[data-chat-scroll-container="true"][data-turn-warmup="settled"]')).toBeAttached({ timeout: 15_000 });
 const settled = await page.evaluate(probeScroller) as { scrollHeight: number };
 expect(settled.scrollHeight, JSON.stringify(settled)).toBeGreaterThan(WARMED_HEIGHT_FLOOR);
 // The last chunk's inflation reaches the pinned follower through a
Expand All@@ -116,15 +116,15 @@ test('chat viewport and message column share the composer centerline', async ({
 }
});

test('empty chat keeps its grid content flush with the viewport', async ({ window: page }) => {
test('empty chat has no phantom vertical range and stays flush with the viewport', async ({ window: page }) => {
 const content = page.locator('.mainColumn[data-home-surface="true"] .maka-chatContent');
 await expect(content).toBeVisible();

 for (const width of [900, 1180, 1440]) {
 await page.setViewportSize({ width, height: 760 });
 const geometry = await page.evaluate(() => {
 const host = document.querySelector<HTMLElement>('.maka-chat.messages');
 const viewport = document.querySelector<HTMLElement>('.maka-chatViewport');
 const host = document.querySelector<HTMLElement>('.maka-chat-layout');
 const viewport = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const content = document.querySelector<HTMLElement>('.maka-chatContent');
 if (!host || !viewport || !content) throw new Error('Expected the empty chat scroll surface');
 const hostRect = host.getBoundingClientRect();
Expand All@@ -134,12 +134,15 @@ test('empty chat keeps its grid content flush with the viewport', async ({ windo
 hostViewportLeftDelta: viewportRect.left - hostRect.left,
 contentDisplay: contentStyle.display,
 contentGap: contentStyle.gap,
 scrollRange: viewport.scrollHeight - viewport.clientHeight,
 scrollTop: viewport.scrollTop,
 };
 });
 const diagnostics = JSON.stringify({ width, ...geometry });
 expect(Math.abs(geometry.hostViewportLeftDelta), diagnostics).toBeLessThanOrEqual(1);
 expect(geometry.contentDisplay, diagnostics).toBe('grid');
 expect(geometry.contentGap, diagnostics).toBe('0px');
 expect(geometry.contentDisplay, diagnostics).toBe('flex');
 expect(geometry.scrollRange, diagnostics).toBeLessThanOrEqual(1);
 expect(geometry.scrollTop, diagnostics).toBeLessThanOrEqual(1);
 }
});

Expand All@@ -156,11 +159,49 @@ test('long session opens pinned to bottom and stays pinned while geometry settle
 // And the pin still holds once the walk reports itself done, which is what
 // makes the poll above a contract rather than a lucky early read.
 await settleGeometry(page, { pinned: true });

 const bottomBoundary = await page.evaluate(() => {
 const scroller = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const lastTurn = scroller?.querySelector<HTMLElement>('.maka-turn:last-of-type');
 const dock = scroller?.lastElementChild;
 if (!lastTurn || !dock) throw new Error('Expected the final turn and Astryx dock');
 return {
 dockTop: dock.getBoundingClientRect().top,
 lastTurnBottom: lastTurn.getBoundingClientRect().bottom,
 };
 });
 expect(
 bottomBoundary.lastTurnBottom,
 JSON.stringify(bottomBoundary),
 ).toBeLessThanOrEqual(bottomBoundary.dockTop + 1);
 expect(
 bottomBoundary.dockTop - bottomBoundary.lastTurnBottom,
 JSON.stringify(bottomBoundary),
 ).toBeLessThanOrEqual(48);
});

test('graph status stays docked above the composer while transcript history scrolls', async ({ longTranscriptWindow: page }) => {
 await settleGeometry(page, { pinned: true });
 const graphPanel = page.locator('.maka-agent-graph-panel');
 await expect(graphPanel).toBeVisible();

 const before = await graphPanel.boundingBox();
 expect(before).not.toBeNull();
 await page.evaluate(() => {
 const scroller = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 if (!scroller) throw new Error('Expected the Astryx chat scroller');
 scroller.scrollTop = 0;
 });
 const after = await graphPanel.boundingBox();
 expect(after).not.toBeNull();
 if (before && after) {
 expect(Math.abs(after.y - before.y), JSON.stringify({ before, after })).toBeLessThanOrEqual(1);
 }
});

async function climbToTop(page: import('@playwright/test').Page) {
 return await page.evaluate(async () => {
 const scroller = document.querySelector('.maka-chatViewport') as HTMLElement;
 const scroller = document.querySelector('[data-chat-scroll-container="true"]') as HTMLElement;
 const started = performance.now();
 // Self-imposed deadline well under the 60s test timeout: a stalled or
 // crawling compositor must produce a diagnosable assertion failure with
Expand Down

32 changes: 27 additions & 5 deletions
apps/desktop/e2e/sidebar-geometry.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -27,7 +27,7 @@ import type { Page } from '@playwright/test';
 * and does not assert rendered footer-visibility geometry. The two layers
 * deliberately lock different declarations.
 * - `scroll-geometry.spec.ts` boots `long-transcript` and probes
 * `.maka-chatViewport`, not the sidebar.
 * Astryx `ChatLayout`, not the sidebar.
 *
 * This spec is the rendered-geometry lock. It boots the `sidebar-long-sessions`
 * fixture and asserts, against the live desktop shell:
Expand All@@ -48,7 +48,7 @@ import type { Page } from '@playwright/test';
 */

const LIST_CONTENT = '.maka-session-list';
const CHAT_VIEWPORT = '.maka-chatViewport';
const CHAT_VIEWPORT = '[data-chat-scroll-container="true"]';

interface ScrollerMetrics {
 scrollTop: number;
Expand DownExpand Up@@ -90,7 +90,7 @@ async function readGeometry(page: Page): Promise<Geometry> {
 panel: rect(document.querySelector('.maka-session-panel')),
 viewport: { width: window.innerWidth, height: window.innerHeight },
 list: scroller(document.querySelector(listContentSelector)?.parentElement ?? null),
 chat: scroller(document.querySelector('.maka-chatViewport')),
 chat: scroller(document.querySelector('[data-chat-scroll-container="true"]')),
 };
 }, LIST_CONTENT);
}
Expand DownExpand Up@@ -167,6 +167,28 @@ test('sidebar list scrolls independently and keeps the footer in view with 60 se
 await expect(page.locator(LIST_CONTENT)).toHaveCount(1);
 await expect(page.locator(CHAT_VIEWPORT)).toHaveCount(1);

 // Astryx owns the chat's initial fill and follows transcript geometry
 // asynchronously. Establish its terminal pinned position before using the
 // chat scrollTop as the sidebar-independence control value.
 await expect(page.locator(`${CHAT_VIEWPORT}[data-turn-warmup="settled"]`)).toBeAttached();
 await expect.poll(async () => {
 const geometry = await readGeometry(page);
 return geometry.chat
 ? Math.round(geometry.chat.scrollHeight - geometry.chat.scrollTop - geometry.chat.clientHeight)
 : Number.POSITIVE_INFINITY;
 }).toBeLessThanOrEqual(1);

 // The newest fixture session is one short exchange. It already fits above
 // the composer, so reaching its final message must not create a second,
 // composer-height scroll range below the conversation.
 const settledChat = (await readGeometry(page)).chat;
 expect(settledChat, JSON.stringify(settledChat)).not.toBeNull();
 if (settledChat) {
 const diagnostics = JSON.stringify(settledChat);
 expect(settledChat.scrollHeight - settledChat.clientHeight, diagnostics).toBeLessThanOrEqual(1);
 expect(settledChat.scrollTop, diagnostics).toBeLessThanOrEqual(1);
 }

 // (1a) The sidebar list scroller actually overflows its constrained grid
 // row — this is what makes it an independent scroll container. If the panel
 // loses its constrained height, the row grows to content height and this
Expand DownExpand Up@@ -199,8 +221,8 @@ test('sidebar list scrolls independently and keeps the footer in view with 60 se

 // The sidebar's own scrollTop moved...
 expect(after.list?.scrollTop ?? -1, afterDiag).toBeGreaterThan(listScrollTopBefore);
 // ...while the chat viewport's scrollTop is unaffected (short transcript →
 // stays pinned at 0). This is the scroll-independence lock for this seed.
 // ...while the already-settled chat viewport's scrollTop is unaffected.
 // This is the scroll-independence lock for this seed.
 expect(after.chat?.scrollTop ?? -1, afterDiag).toBe(chatScrollTopBefore);

 // (b) Footer still fully inside the panel and the window after scrolling the
Expand Down

30 changes: 0 additions & 30 deletions
apps/desktop/resources/licenses/npm/THIRD_PARTY_NOTICES.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7003,36 +7003,6 @@ IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

================================================================================

Package: overlayscrollbars@2.16.0
Declared license: MIT
Selected license: MIT
Repository: https://github.com/KingSora/OverlayScrollbars.git#packages/overlayscrollbars

--- VERSION-PINNED LICENSE TEXT OVERRIDE ---
MIT License

Copyright (c) 2022 Rene Haas

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================================================

Package: p-finally@1.0.0
Declared license: MIT
Selected license: MIT
Expand Down

7 changes: 5 additions & 2 deletions
apps/desktop/src/main/__tests__/attachment-chat-render.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,11 +3,14 @@ import { describe, it } from 'node:test';
import { createElement, type ReactNode } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import type { AttachmentRef, SessionSummary, StoredMessage } from '@maka/core';
import { ChatView, LocaleProvider } from '@maka/ui';
import { ChatSurfaceLayout, ChatView, LocaleProvider } from '@maka/ui';

function renderWithLocale(child: ReactNode): string {
 return renderToStaticMarkup(
 createElement(LocaleProvider, { locale: 'zh', children: child }),
 createElement(LocaleProvider, {
 locale: 'zh',
 children: createElement(ChatSurfaceLayout, { composer: null, children: child }),
 }),
 );
}

Expand Down

6 changes: 5 additions & 1 deletion
apps/desktop/src/main/__tests__/streaming-handoff.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
import type { SessionEvent } from '@maka/core';
import {
 armLiveTurn,
 ChatSurfaceLayout,
 ChatView,
 LocaleProvider,
 type LiveTurnProjection,
Expand All@@ -14,7 +15,10 @@ import { createAppShellSessionEventHandlers } from '../../renderer/app-shell-ses

function renderWithLocale(child: ReactNode): string {
 return renderToStaticMarkup(
 createElement(LocaleProvider, { locale: 'zh', children: child }),
 createElement(LocaleProvider, {
 locale: 'zh',
 children: createElement(ChatSurfaceLayout, { composer: null, children: child }),
 }),
 );
}

Expand Down

19 changes: 1 addition & 18 deletions
apps/desktop/src/main/__tests__/ui-render-memo-boundary-contract.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { resolve } from 'node:path';
import { pathToFileURL } from 'node:url';
import { afterEach, describe, it } from 'node:test';
import type { SessionSummary } from '@maka/core';
import { build, type Plugin } from 'esbuild';
import { build } from 'esbuild';
import { act, createElement, type ReactElement } from 'react';
import { createRoot, type Root } from 'react-dom/client';

Expand DownExpand Up@@ -212,27 +212,10 @@ async function importSessionHistoryList(): Promise<SessionHistoryModule> {
 format: 'esm',
 target: 'node20',
 logLevel: 'silent',
 plugins: [mockOverlayScrollbars()],
 });
 return await import(`${pathToFileURL(outfile).href}?t=${Date.now()}`) as SessionHistoryModule;
}

function mockOverlayScrollbars(): Plugin {
 return {
 name: 'mock-overlayscrollbars',
 setup(buildApi) {
 buildApi.onResolve({ filter: /^overlayscrollbars$/ }, () => ({
 path: 'overlayscrollbars-mock',
 namespace: 'memo-test',
 }));
 buildApi.onLoad({ filter: /^overlayscrollbars-mock$/, namespace: 'memo-test' }, () => ({
 loader: 'js',
 contents: 'export function OverlayScrollbars() { return { destroy() {}, options() {} }; }',
 }));
 },
 };
}

function installReactRenderer(): Root {
 installFakeDom();
 const container = new FakeElement('div', document);
Expand Down

1 change: 1 addition & 0 deletions
apps/desktop/src/main/e2e-fixture/scenarios-sessions.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@ export function longTranscriptSession(now: number): SessionHeader {
 name: '超长会话滚动几何',
 connection: 'zai-live',
 model: 'glm-5.1',
 orchestrationMode: 'graph',
 now,
 lastMessageAt: now - 5 * 60_000,
 });
Expand Down

2 changes: 2 additions & 0 deletions
apps/desktop/src/main/e2e-fixture/seed-helpers.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -99,6 +99,7 @@ export function header(input: {
 blockedReason?: SessionHeader['blockedReason'];
 isArchived?: boolean;
 isFlagged?: boolean;
 orchestrationMode?: SessionHeader['orchestrationMode'];
}): SessionHeader {
 return {
 id: input.id,
Expand All@@ -116,6 +117,7 @@ export function header(input: {
 ...(input.blockedReason ? { blockedReason: input.blockedReason } : {}),
 statusUpdatedAt: input.lastMessageAt,
 hasUnread: input.hasUnread ?? false,
 ...(input.orchestrationMode ? { orchestrationMode: input.orchestrationMode } : {}),
 // Legacy backend kinds like 'claude' aren't in the current BackendKind
 // union but are needed for the stale-sessions reproduction. Forward
 // the value verbatim into the JSONL so the renderer sees exactly what
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
refactor(ui): migrate chat surfaces to Astryx layout#1795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Astro-Han
merged 5 commits into

from

Aug 1, 2026
 Merged


refactor(ui): migrate chat surfaces to Astryx layout
#1795
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
7fe22bb

refactor(ui): migrate chat surfaces to Astryx layout


Astro-Han Aug 1, 2026
7227d42

fix(ui): remove phantom chat scroll range


Astro-Han Aug 1, 2026
2a16fd9

fix(ui): keep chat status panels docked


Astro-Han Aug 1, 2026
ea0e32f

refactor(ui): require Astryx chat layout ownership


Astro-Han Aug 1, 2026
b547767

test(ui): render chat view with layout owner


Astro-Han Aug 1, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
apps/desktop/e2e/fixtures.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -271,7 +271,7 @@ export const test = base.extend<{
 await withE2eWindow(
 {
 seed: false,
 readinessSelector: '.maka-chatViewport:has(.maka-turn):not(:has(.maka-markdown-pending))',
 readinessSelector: '[data-chat-scroll-container="true"]:has(.maka-turn):not(:has(.maka-markdown-pending))',
 e2eFixtureScenario: 'long-transcript',
 locale: 'zh',
 },
Expand Down

61 changes: 51 additions & 10 deletions
apps/desktop/e2e/scroll-geometry.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,7 +17,7 @@ import { test, expect } from './fixtures';
 */

const probeScroller = `(() => {
 const scroller = document.querySelector('.maka-chatViewport');
 const scroller = document.querySelector('[data-chat-scroll-container="true"]');
 return {
 scrollHeight: scroller.scrollHeight,
 clientHeight: scroller.clientHeight,
Expand DownExpand Up@@ -45,8 +45,8 @@ type ColumnGeometry = {

async function probeColumnGeometry(page: import('@playwright/test').Page): Promise<ColumnGeometry> {
 return await page.evaluate(() => {
 const host = document.querySelector<HTMLElement>('.maka-chat.messages');
 const viewport = document.querySelector<HTMLElement>('.maka-chatViewport');
 const host = document.querySelector<HTMLElement>('.maka-chat-layout');
 const viewport = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const turn = document.querySelector<HTMLElement>('.maka-turn');
 const composer = document.querySelector<HTMLElement>('.composer .maka-composer-astryx');
 if (!host || !viewport || !turn || !composer) {
Expand DownExpand Up@@ -91,7 +91,7 @@ async function probeColumnGeometry(page: import('@playwright/test').Page): Promi
 * done, so ask it.
 */
async function settleGeometry(page: import('@playwright/test').Page, options: { pinned: boolean }): Promise<void> {
 await expect(page.locator('.maka-chatViewport[data-turn-warmup="settled"]')).toBeAttached({ timeout: 15_000 });
 await expect(page.locator('[data-chat-scroll-container="true"][data-turn-warmup="settled"]')).toBeAttached({ timeout: 15_000 });
 const settled = await page.evaluate(probeScroller) as { scrollHeight: number };
 expect(settled.scrollHeight, JSON.stringify(settled)).toBeGreaterThan(WARMED_HEIGHT_FLOOR);
 // The last chunk's inflation reaches the pinned follower through a
Expand All@@ -116,15 +116,15 @@ test('chat viewport and message column share the composer centerline', async ({
 }
});

test('empty chat keeps its grid content flush with the viewport', async ({ window: page }) => {
test('empty chat has no phantom vertical range and stays flush with the viewport', async ({ window: page }) => {
 const content = page.locator('.mainColumn[data-home-surface="true"] .maka-chatContent');
 await expect(content).toBeVisible();

 for (const width of [900, 1180, 1440]) {
 await page.setViewportSize({ width, height: 760 });
 const geometry = await page.evaluate(() => {
 const host = document.querySelector<HTMLElement>('.maka-chat.messages');
 const viewport = document.querySelector<HTMLElement>('.maka-chatViewport');
 const host = document.querySelector<HTMLElement>('.maka-chat-layout');
 const viewport = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const content = document.querySelector<HTMLElement>('.maka-chatContent');
 if (!host || !viewport || !content) throw new Error('Expected the empty chat scroll surface');
 const hostRect = host.getBoundingClientRect();
Expand All@@ -134,12 +134,15 @@ test('empty chat keeps its grid content flush with the viewport', async ({ windo
 hostViewportLeftDelta: viewportRect.left - hostRect.left,
 contentDisplay: contentStyle.display,
 contentGap: contentStyle.gap,
 scrollRange: viewport.scrollHeight - viewport.clientHeight,
 scrollTop: viewport.scrollTop,
 };
 });
 const diagnostics = JSON.stringify({ width, ...geometry });
 expect(Math.abs(geometry.hostViewportLeftDelta), diagnostics).toBeLessThanOrEqual(1);
 expect(geometry.contentDisplay, diagnostics).toBe('grid');
 expect(geometry.contentGap, diagnostics).toBe('0px');
 expect(geometry.contentDisplay, diagnostics).toBe('flex');
 expect(geometry.scrollRange, diagnostics).toBeLessThanOrEqual(1);
 expect(geometry.scrollTop, diagnostics).toBeLessThanOrEqual(1);
 }
});

Expand All@@ -156,11 +159,49 @@ test('long session opens pinned to bottom and stays pinned while geometry settle
 // And the pin still holds once the walk reports itself done, which is what
 // makes the poll above a contract rather than a lucky early read.
 await settleGeometry(page, { pinned: true });

 const bottomBoundary = await page.evaluate(() => {
 const scroller = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const lastTurn = scroller?.querySelector<HTMLElement>('.maka-turn:last-of-type');
 const dock = scroller?.lastElementChild;
 if (!lastTurn || !dock) throw new Error('Expected the final turn and Astryx dock');
 return {
 dockTop: dock.getBoundingClientRect().top,
 lastTurnBottom: lastTurn.getBoundingClientRect().bottom,
 };
 });
 expect(
 bottomBoundary.lastTurnBottom,
 JSON.stringify(bottomBoundary),
 ).toBeLessThanOrEqual(bottomBoundary.dockTop + 1);
 expect(
 bottomBoundary.dockTop - bottomBoundary.lastTurnBottom,
 JSON.stringify(bottomBoundary),
 ).toBeLessThanOrEqual(48);
});

test('graph status stays docked above the composer while transcript history scrolls', async ({ longTranscriptWindow: page }) => {
 await settleGeometry(page, { pinned: true });
 const graphPanel = page.locator('.maka-agent-graph-panel');
 await expect(graphPanel).toBeVisible();

 const before = await graphPanel.boundingBox();
 expect(before).not.toBeNull();
 await page.evaluate(() => {
 const scroller = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 if (!scroller) throw new Error('Expected the Astryx chat scroller');
 scroller.scrollTop = 0;
 });
 const after = await graphPanel.boundingBox();
 expect(after).not.toBeNull();
 if (before && after) {
 expect(Math.abs(after.y - before.y), JSON.stringify({ before, after })).toBeLessThanOrEqual(1);
 }
});

async function climbToTop(page: import('@playwright/test').Page) {
 return await page.evaluate(async () => {
 const scroller = document.querySelector('.maka-chatViewport') as HTMLElement;
 const scroller = document.querySelector('[data-chat-scroll-container="true"]') as HTMLElement;
 const started = performance.now();
 // Self-imposed deadline well under the 60s test timeout: a stalled or
 // crawling compositor must produce a diagnosable assertion failure with
Expand Down

32 changes: 27 additions & 5 deletions
apps/desktop/e2e/sidebar-geometry.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -27,7 +27,7 @@ import type { Page } from '@playwright/test';
 * and does not assert rendered footer-visibility geometry. The two layers
 * deliberately lock different declarations.
 * - `scroll-geometry.spec.ts` boots `long-transcript` and probes
 * `.maka-chatViewport`, not the sidebar.
 * Astryx `ChatLayout`, not the sidebar.
 *
 * This spec is the rendered-geometry lock. It boots the `sidebar-long-sessions`
 * fixture and asserts, against the live desktop shell:
Expand All@@ -48,7 +48,7 @@ import type { Page } from '@playwright/test';
 */

const LIST_CONTENT = '.maka-session-list';
const CHAT_VIEWPORT = '.maka-chatViewport';
const CHAT_VIEWPORT = '[data-chat-scroll-container="true"]';

interface ScrollerMetrics {
 scrollTop: number;
Expand DownExpand Up@@ -90,7 +90,7 @@ async function readGeometry(page: Page): Promise<Geometry> {
 panel: rect(document.querySelector('.maka-session-panel')),
 viewport: { width: window.innerWidth, height: window.innerHeight },
 list: scroller(document.querySelector(listContentSelector)?.parentElement ?? null),
 chat: scroller(document.querySelector('.maka-chatViewport')),
 chat: scroller(document.querySelector('[data-chat-scroll-container="true"]')),
 };
 }, LIST_CONTENT);
}
Expand DownExpand Up@@ -167,6 +167,28 @@ test('sidebar list scrolls independently and keeps the footer in view with 60 se
 await expect(page.locator(LIST_CONTENT)).toHaveCount(1);
 await expect(page.locator(CHAT_VIEWPORT)).toHaveCount(1);

 // Astryx owns the chat's initial fill and follows transcript geometry
 // asynchronously. Establish its terminal pinned position before using the
 // chat scrollTop as the sidebar-independence control value.
 await expect(page.locator(`${CHAT_VIEWPORT}[data-turn-warmup="settled"]`)).toBeAttached();
 await expect.poll(async () => {
 const geometry = await readGeometry(page);
 return geometry.chat
 ? Math.round(geometry.chat.scrollHeight - geometry.chat.scrollTop - geometry.chat.clientHeight)
 : Number.POSITIVE_INFINITY;
 }).toBeLessThanOrEqual(1);

 // The newest fixture session is one short exchange. It already fits above
 // the composer, so reaching its final message must not create a second,
 // composer-height scroll range below the conversation.
 const settledChat = (await readGeometry(page)).chat;
 expect(settledChat, JSON.stringify(settledChat)).not.toBeNull();
 if (settledChat) {
 const diagnostics = JSON.stringify(settledChat);
 expect(settledChat.scrollHeight - settledChat.clientHeight, diagnostics).toBeLessThanOrEqual(1);
 expect(settledChat.scrollTop, diagnostics).toBeLessThanOrEqual(1);
 }

 // (1a) The sidebar list scroller actually overflows its constrained grid
 // row — this is what makes it an independent scroll container. If the panel
 // loses its constrained height, the row grows to content height and this
Expand DownExpand Up@@ -199,8 +221,8 @@ test('sidebar list scrolls independently and keeps the footer in view with 60 se

 // The sidebar's own scrollTop moved...
 expect(after.list?.scrollTop ?? -1, afterDiag).toBeGreaterThan(listScrollTopBefore);
 // ...while the chat viewport's scrollTop is unaffected (short transcript →
 // stays pinned at 0). This is the scroll-independence lock for this seed.
 // ...while the already-settled chat viewport's scrollTop is unaffected.
 // This is the scroll-independence lock for this seed.
 expect(after.chat?.scrollTop ?? -1, afterDiag).toBe(chatScrollTopBefore);

 // (b) Footer still fully inside the panel and the window after scrolling the
Expand Down

30 changes: 0 additions & 30 deletions
apps/desktop/resources/licenses/npm/THIRD_PARTY_NOTICES.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7003,36 +7003,6 @@ IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

================================================================================

Package: overlayscrollbars@2.16.0
Declared license: MIT
Selected license: MIT
Repository: https://github.com/KingSora/OverlayScrollbars.git#packages/overlayscrollbars

--- VERSION-PINNED LICENSE TEXT OVERRIDE ---
MIT License

Copyright (c) 2022 Rene Haas

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================================================

Package: p-finally@1.0.0
Declared license: MIT
Selected license: MIT
Expand Down

7 changes: 5 additions & 2 deletions
apps/desktop/src/main/__tests__/attachment-chat-render.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,11 +3,14 @@ import { describe, it } from 'node:test';
import { createElement, type ReactNode } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import type { AttachmentRef, SessionSummary, StoredMessage } from '@maka/core';
import { ChatView, LocaleProvider } from '@maka/ui';
import { ChatSurfaceLayout, ChatView, LocaleProvider } from '@maka/ui';

function renderWithLocale(child: ReactNode): string {
 return renderToStaticMarkup(
 createElement(LocaleProvider, { locale: 'zh', children: child }),
 createElement(LocaleProvider, {
 locale: 'zh',
 children: createElement(ChatSurfaceLayout, { composer: null, children: child }),
 }),
 );
}

Expand Down

6 changes: 5 additions & 1 deletion
apps/desktop/src/main/__tests__/streaming-handoff.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
import type { SessionEvent } from '@maka/core';
import {
 armLiveTurn,
 ChatSurfaceLayout,
 ChatView,
 LocaleProvider,
 type LiveTurnProjection,
Expand All@@ -14,7 +15,10 @@ import { createAppShellSessionEventHandlers } from '../../renderer/app-shell-ses

function renderWithLocale(child: ReactNode): string {
 return renderToStaticMarkup(
 createElement(LocaleProvider, { locale: 'zh', children: child }),
 createElement(LocaleProvider, {
 locale: 'zh',
 children: createElement(ChatSurfaceLayout, { composer: null, children: child }),
 }),
 );
}

Expand Down

19 changes: 1 addition & 18 deletions
apps/desktop/src/main/__tests__/ui-render-memo-boundary-contract.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { resolve } from 'node:path';
import { pathToFileURL } from 'node:url';
import { afterEach, describe, it } from 'node:test';
import type { SessionSummary } from '@maka/core';
import { build, type Plugin } from 'esbuild';
import { build } from 'esbuild';
import { act, createElement, type ReactElement } from 'react';
import { createRoot, type Root } from 'react-dom/client';

Expand DownExpand Up@@ -212,27 +212,10 @@ async function importSessionHistoryList(): Promise<SessionHistoryModule> {
 format: 'esm',
 target: 'node20',
 logLevel: 'silent',
 plugins: [mockOverlayScrollbars()],
 });
 return await import(`${pathToFileURL(outfile).href}?t=${Date.now()}`) as SessionHistoryModule;
}

function mockOverlayScrollbars(): Plugin {
 return {
 name: 'mock-overlayscrollbars',
 setup(buildApi) {
 buildApi.onResolve({ filter: /^overlayscrollbars$/ }, () => ({
 path: 'overlayscrollbars-mock',
 namespace: 'memo-test',
 }));
 buildApi.onLoad({ filter: /^overlayscrollbars-mock$/, namespace: 'memo-test' }, () => ({
 loader: 'js',
 contents: 'export function OverlayScrollbars() { return { destroy() {}, options() {} }; }',
 }));
 },
 };
}

function installReactRenderer(): Root {
 installFakeDom();
 const container = new FakeElement('div', document);
Expand Down

1 change: 1 addition & 0 deletions
apps/desktop/src/main/e2e-fixture/scenarios-sessions.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@ export function longTranscriptSession(now: number): SessionHeader {
 name: '超长会话滚动几何',
 connection: 'zai-live',
 model: 'glm-5.1',
 orchestrationMode: 'graph',
 now,
 lastMessageAt: now - 5 * 60_000,
 });
Expand Down

2 changes: 2 additions & 0 deletions
apps/desktop/src/main/e2e-fixture/seed-helpers.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -99,6 +99,7 @@ export function header(input: {
 blockedReason?: SessionHeader['blockedReason'];
 isArchived?: boolean;
 isFlagged?: boolean;
 orchestrationMode?: SessionHeader['orchestrationMode'];
}): SessionHeader {
 return {
 id: input.id,
Expand All@@ -116,6 +117,7 @@ export function header(input: {
 ...(input.blockedReason ? { blockedReason: input.blockedReason } : {}),
 statusUpdatedAt: input.lastMessageAt,
 hasUnread: input.hasUnread ?? false,
 ...(input.orchestrationMode ? { orchestrationMode: input.orchestrationMode } : {}),
 // Legacy backend kinds like 'claude' aren't in the current BackendKind
 // union but are needed for the stale-sessions reproduction. Forward
 // the value verbatim into the JSONL so the renderer sees exactly what
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
refactor(ui): migrate chat surfaces to Astryx layout#1795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Astro-Han
merged 5 commits into

from

Aug 1, 2026
 Merged


refactor(ui): migrate chat surfaces to Astryx layout
#1795
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
7fe22bb

refactor(ui): migrate chat surfaces to Astryx layout


Astro-Han Aug 1, 2026
7227d42

fix(ui): remove phantom chat scroll range


Astro-Han Aug 1, 2026
2a16fd9

fix(ui): keep chat status panels docked


Astro-Han Aug 1, 2026
ea0e32f

refactor(ui): require Astryx chat layout ownership


Astro-Han Aug 1, 2026
b547767

test(ui): render chat view with layout owner


Astro-Han Aug 1, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
apps/desktop/e2e/fixtures.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -271,7 +271,7 @@ export const test = base.extend<{
 await withE2eWindow(
 {
 seed: false,
 readinessSelector: '.maka-chatViewport:has(.maka-turn):not(:has(.maka-markdown-pending))',
 readinessSelector: '[data-chat-scroll-container="true"]:has(.maka-turn):not(:has(.maka-markdown-pending))',
 e2eFixtureScenario: 'long-transcript',
 locale: 'zh',
 },
Expand Down

61 changes: 51 additions & 10 deletions
apps/desktop/e2e/scroll-geometry.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,7 +17,7 @@ import { test, expect } from './fixtures';
 */

const probeScroller = `(() => {
 const scroller = document.querySelector('.maka-chatViewport');
 const scroller = document.querySelector('[data-chat-scroll-container="true"]');
 return {
 scrollHeight: scroller.scrollHeight,
 clientHeight: scroller.clientHeight,
Expand DownExpand Up@@ -45,8 +45,8 @@ type ColumnGeometry = {

async function probeColumnGeometry(page: import('@playwright/test').Page): Promise<ColumnGeometry> {
 return await page.evaluate(() => {
 const host = document.querySelector<HTMLElement>('.maka-chat.messages');
 const viewport = document.querySelector<HTMLElement>('.maka-chatViewport');
 const host = document.querySelector<HTMLElement>('.maka-chat-layout');
 const viewport = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const turn = document.querySelector<HTMLElement>('.maka-turn');
 const composer = document.querySelector<HTMLElement>('.composer .maka-composer-astryx');
 if (!host || !viewport || !turn || !composer) {
Expand DownExpand Up@@ -91,7 +91,7 @@ async function probeColumnGeometry(page: import('@playwright/test').Page): Promi
 * done, so ask it.
 */
async function settleGeometry(page: import('@playwright/test').Page, options: { pinned: boolean }): Promise<void> {
 await expect(page.locator('.maka-chatViewport[data-turn-warmup="settled"]')).toBeAttached({ timeout: 15_000 });
 await expect(page.locator('[data-chat-scroll-container="true"][data-turn-warmup="settled"]')).toBeAttached({ timeout: 15_000 });
 const settled = await page.evaluate(probeScroller) as { scrollHeight: number };
 expect(settled.scrollHeight, JSON.stringify(settled)).toBeGreaterThan(WARMED_HEIGHT_FLOOR);
 // The last chunk's inflation reaches the pinned follower through a
Expand All@@ -116,15 +116,15 @@ test('chat viewport and message column share the composer centerline', async ({
 }
});

test('empty chat keeps its grid content flush with the viewport', async ({ window: page }) => {
test('empty chat has no phantom vertical range and stays flush with the viewport', async ({ window: page }) => {
 const content = page.locator('.mainColumn[data-home-surface="true"] .maka-chatContent');
 await expect(content).toBeVisible();

 for (const width of [900, 1180, 1440]) {
 await page.setViewportSize({ width, height: 760 });
 const geometry = await page.evaluate(() => {
 const host = document.querySelector<HTMLElement>('.maka-chat.messages');
 const viewport = document.querySelector<HTMLElement>('.maka-chatViewport');
 const host = document.querySelector<HTMLElement>('.maka-chat-layout');
 const viewport = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const content = document.querySelector<HTMLElement>('.maka-chatContent');
 if (!host || !viewport || !content) throw new Error('Expected the empty chat scroll surface');
 const hostRect = host.getBoundingClientRect();
Expand All@@ -134,12 +134,15 @@ test('empty chat keeps its grid content flush with the viewport', async ({ windo
 hostViewportLeftDelta: viewportRect.left - hostRect.left,
 contentDisplay: contentStyle.display,
 contentGap: contentStyle.gap,
 scrollRange: viewport.scrollHeight - viewport.clientHeight,
 scrollTop: viewport.scrollTop,
 };
 });
 const diagnostics = JSON.stringify({ width, ...geometry });
 expect(Math.abs(geometry.hostViewportLeftDelta), diagnostics).toBeLessThanOrEqual(1);
 expect(geometry.contentDisplay, diagnostics).toBe('grid');
 expect(geometry.contentGap, diagnostics).toBe('0px');
 expect(geometry.contentDisplay, diagnostics).toBe('flex');
 expect(geometry.scrollRange, diagnostics).toBeLessThanOrEqual(1);
 expect(geometry.scrollTop, diagnostics).toBeLessThanOrEqual(1);
 }
});

Expand All@@ -156,11 +159,49 @@ test('long session opens pinned to bottom and stays pinned while geometry settle
 // And the pin still holds once the walk reports itself done, which is what
 // makes the poll above a contract rather than a lucky early read.
 await settleGeometry(page, { pinned: true });

 const bottomBoundary = await page.evaluate(() => {
 const scroller = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const lastTurn = scroller?.querySelector<HTMLElement>('.maka-turn:last-of-type');
 const dock = scroller?.lastElementChild;
 if (!lastTurn || !dock) throw new Error('Expected the final turn and Astryx dock');
 return {
 dockTop: dock.getBoundingClientRect().top,
 lastTurnBottom: lastTurn.getBoundingClientRect().bottom,
 };
 });
 expect(
 bottomBoundary.lastTurnBottom,
 JSON.stringify(bottomBoundary),
 ).toBeLessThanOrEqual(bottomBoundary.dockTop + 1);
 expect(
 bottomBoundary.dockTop - bottomBoundary.lastTurnBottom,
 JSON.stringify(bottomBoundary),
 ).toBeLessThanOrEqual(48);
});

test('graph status stays docked above the composer while transcript history scrolls', async ({ longTranscriptWindow: page }) => {
 await settleGeometry(page, { pinned: true });
 const graphPanel = page.locator('.maka-agent-graph-panel');
 await expect(graphPanel).toBeVisible();

 const before = await graphPanel.boundingBox();
 expect(before).not.toBeNull();
 await page.evaluate(() => {
 const scroller = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 if (!scroller) throw new Error('Expected the Astryx chat scroller');
 scroller.scrollTop = 0;
 });
 const after = await graphPanel.boundingBox();
 expect(after).not.toBeNull();
 if (before && after) {
 expect(Math.abs(after.y - before.y), JSON.stringify({ before, after })).toBeLessThanOrEqual(1);
 }
});

async function climbToTop(page: import('@playwright/test').Page) {
 return await page.evaluate(async () => {
 const scroller = document.querySelector('.maka-chatViewport') as HTMLElement;
 const scroller = document.querySelector('[data-chat-scroll-container="true"]') as HTMLElement;
 const started = performance.now();
 // Self-imposed deadline well under the 60s test timeout: a stalled or
 // crawling compositor must produce a diagnosable assertion failure with
Expand Down

32 changes: 27 additions & 5 deletions
apps/desktop/e2e/sidebar-geometry.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -27,7 +27,7 @@ import type { Page } from '@playwright/test';
 * and does not assert rendered footer-visibility geometry. The two layers
 * deliberately lock different declarations.
 * - `scroll-geometry.spec.ts` boots `long-transcript` and probes
 * `.maka-chatViewport`, not the sidebar.
 * Astryx `ChatLayout`, not the sidebar.
 *
 * This spec is the rendered-geometry lock. It boots the `sidebar-long-sessions`
 * fixture and asserts, against the live desktop shell:
Expand All@@ -48,7 +48,7 @@ import type { Page } from '@playwright/test';
 */

const LIST_CONTENT = '.maka-session-list';
const CHAT_VIEWPORT = '.maka-chatViewport';
const CHAT_VIEWPORT = '[data-chat-scroll-container="true"]';

interface ScrollerMetrics {
 scrollTop: number;
Expand DownExpand Up@@ -90,7 +90,7 @@ async function readGeometry(page: Page): Promise<Geometry> {
 panel: rect(document.querySelector('.maka-session-panel')),
 viewport: { width: window.innerWidth, height: window.innerHeight },
 list: scroller(document.querySelector(listContentSelector)?.parentElement ?? null),
 chat: scroller(document.querySelector('.maka-chatViewport')),
 chat: scroller(document.querySelector('[data-chat-scroll-container="true"]')),
 };
 }, LIST_CONTENT);
}
Expand DownExpand Up@@ -167,6 +167,28 @@ test('sidebar list scrolls independently and keeps the footer in view with 60 se
 await expect(page.locator(LIST_CONTENT)).toHaveCount(1);
 await expect(page.locator(CHAT_VIEWPORT)).toHaveCount(1);

 // Astryx owns the chat's initial fill and follows transcript geometry
 // asynchronously. Establish its terminal pinned position before using the
 // chat scrollTop as the sidebar-independence control value.
 await expect(page.locator(`${CHAT_VIEWPORT}[data-turn-warmup="settled"]`)).toBeAttached();
 await expect.poll(async () => {
 const geometry = await readGeometry(page);
 return geometry.chat
 ? Math.round(geometry.chat.scrollHeight - geometry.chat.scrollTop - geometry.chat.clientHeight)
 : Number.POSITIVE_INFINITY;
 }).toBeLessThanOrEqual(1);

 // The newest fixture session is one short exchange. It already fits above
 // the composer, so reaching its final message must not create a second,
 // composer-height scroll range below the conversation.
 const settledChat = (await readGeometry(page)).chat;
 expect(settledChat, JSON.stringify(settledChat)).not.toBeNull();
 if (settledChat) {
 const diagnostics = JSON.stringify(settledChat);
 expect(settledChat.scrollHeight - settledChat.clientHeight, diagnostics).toBeLessThanOrEqual(1);
 expect(settledChat.scrollTop, diagnostics).toBeLessThanOrEqual(1);
 }

 // (1a) The sidebar list scroller actually overflows its constrained grid
 // row — this is what makes it an independent scroll container. If the panel
 // loses its constrained height, the row grows to content height and this
Expand DownExpand Up@@ -199,8 +221,8 @@ test('sidebar list scrolls independently and keeps the footer in view with 60 se

 // The sidebar's own scrollTop moved...
 expect(after.list?.scrollTop ?? -1, afterDiag).toBeGreaterThan(listScrollTopBefore);
 // ...while the chat viewport's scrollTop is unaffected (short transcript →
 // stays pinned at 0). This is the scroll-independence lock for this seed.
 // ...while the already-settled chat viewport's scrollTop is unaffected.
 // This is the scroll-independence lock for this seed.
 expect(after.chat?.scrollTop ?? -1, afterDiag).toBe(chatScrollTopBefore);

 // (b) Footer still fully inside the panel and the window after scrolling the
Expand Down

30 changes: 0 additions & 30 deletions
apps/desktop/resources/licenses/npm/THIRD_PARTY_NOTICES.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7003,36 +7003,6 @@ IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

================================================================================

Package: overlayscrollbars@2.16.0
Declared license: MIT
Selected license: MIT
Repository: https://github.com/KingSora/OverlayScrollbars.git#packages/overlayscrollbars

--- VERSION-PINNED LICENSE TEXT OVERRIDE ---
MIT License

Copyright (c) 2022 Rene Haas

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================================================

Package: p-finally@1.0.0
Declared license: MIT
Selected license: MIT
Expand Down

7 changes: 5 additions & 2 deletions
apps/desktop/src/main/__tests__/attachment-chat-render.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,11 +3,14 @@ import { describe, it } from 'node:test';
import { createElement, type ReactNode } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import type { AttachmentRef, SessionSummary, StoredMessage } from '@maka/core';
import { ChatView, LocaleProvider } from '@maka/ui';
import { ChatSurfaceLayout, ChatView, LocaleProvider } from '@maka/ui';

function renderWithLocale(child: ReactNode): string {
 return renderToStaticMarkup(
 createElement(LocaleProvider, { locale: 'zh', children: child }),
 createElement(LocaleProvider, {
 locale: 'zh',
 children: createElement(ChatSurfaceLayout, { composer: null, children: child }),
 }),
 );
}

Expand Down

6 changes: 5 additions & 1 deletion
apps/desktop/src/main/__tests__/streaming-handoff.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
import type { SessionEvent } from '@maka/core';
import {
 armLiveTurn,
 ChatSurfaceLayout,
 ChatView,
 LocaleProvider,
 type LiveTurnProjection,
Expand All@@ -14,7 +15,10 @@ import { createAppShellSessionEventHandlers } from '../../renderer/app-shell-ses

function renderWithLocale(child: ReactNode): string {
 return renderToStaticMarkup(
 createElement(LocaleProvider, { locale: 'zh', children: child }),
 createElement(LocaleProvider, {
 locale: 'zh',
 children: createElement(ChatSurfaceLayout, { composer: null, children: child }),
 }),
 );
}

Expand Down

19 changes: 1 addition & 18 deletions
apps/desktop/src/main/__tests__/ui-render-memo-boundary-contract.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { resolve } from 'node:path';
import { pathToFileURL } from 'node:url';
import { afterEach, describe, it } from 'node:test';
import type { SessionSummary } from '@maka/core';
import { build, type Plugin } from 'esbuild';
import { build } from 'esbuild';
import { act, createElement, type ReactElement } from 'react';
import { createRoot, type Root } from 'react-dom/client';

Expand DownExpand Up@@ -212,27 +212,10 @@ async function importSessionHistoryList(): Promise<SessionHistoryModule> {
 format: 'esm',
 target: 'node20',
 logLevel: 'silent',
 plugins: [mockOverlayScrollbars()],
 });
 return await import(`${pathToFileURL(outfile).href}?t=${Date.now()}`) as SessionHistoryModule;
}

function mockOverlayScrollbars(): Plugin {
 return {
 name: 'mock-overlayscrollbars',
 setup(buildApi) {
 buildApi.onResolve({ filter: /^overlayscrollbars$/ }, () => ({
 path: 'overlayscrollbars-mock',
 namespace: 'memo-test',
 }));
 buildApi.onLoad({ filter: /^overlayscrollbars-mock$/, namespace: 'memo-test' }, () => ({
 loader: 'js',
 contents: 'export function OverlayScrollbars() { return { destroy() {}, options() {} }; }',
 }));
 },
 };
}

function installReactRenderer(): Root {
 installFakeDom();
 const container = new FakeElement('div', document);
Expand Down

1 change: 1 addition & 0 deletions
apps/desktop/src/main/e2e-fixture/scenarios-sessions.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@ export function longTranscriptSession(now: number): SessionHeader {
 name: '超长会话滚动几何',
 connection: 'zai-live',
 model: 'glm-5.1',
 orchestrationMode: 'graph',
 now,
 lastMessageAt: now - 5 * 60_000,
 });
Expand Down

2 changes: 2 additions & 0 deletions
apps/desktop/src/main/e2e-fixture/seed-helpers.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -99,6 +99,7 @@ export function header(input: {
 blockedReason?: SessionHeader['blockedReason'];
 isArchived?: boolean;
 isFlagged?: boolean;
 orchestrationMode?: SessionHeader['orchestrationMode'];
}): SessionHeader {
 return {
 id: input.id,
Expand All@@ -116,6 +117,7 @@ export function header(input: {
 ...(input.blockedReason ? { blockedReason: input.blockedReason } : {}),
 statusUpdatedAt: input.lastMessageAt,
 hasUnread: input.hasUnread ?? false,
 ...(input.orchestrationMode ? { orchestrationMode: input.orchestrationMode } : {}),
 // Legacy backend kinds like 'claude' aren't in the current BackendKind
 // union but are needed for the stale-sessions reproduction. Forward
 // the value verbatim into the JSONL so the renderer sees exactly what
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
refactor(ui): migrate chat surfaces to Astryx layout#1795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Astro-Han
merged 5 commits into

from

Aug 1, 2026
 Merged


refactor(ui): migrate chat surfaces to Astryx layout
#1795
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
7fe22bb

refactor(ui): migrate chat surfaces to Astryx layout


Astro-Han Aug 1, 2026
7227d42

fix(ui): remove phantom chat scroll range


Astro-Han Aug 1, 2026
2a16fd9

fix(ui): keep chat status panels docked


Astro-Han Aug 1, 2026
ea0e32f

refactor(ui): require Astryx chat layout ownership


Astro-Han Aug 1, 2026
b547767

test(ui): render chat view with layout owner


Astro-Han Aug 1, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
apps/desktop/e2e/fixtures.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -271,7 +271,7 @@ export const test = base.extend<{
 await withE2eWindow(
 {
 seed: false,
 readinessSelector: '.maka-chatViewport:has(.maka-turn):not(:has(.maka-markdown-pending))',
 readinessSelector: '[data-chat-scroll-container="true"]:has(.maka-turn):not(:has(.maka-markdown-pending))',
 e2eFixtureScenario: 'long-transcript',
 locale: 'zh',
 },
Expand Down

61 changes: 51 additions & 10 deletions
apps/desktop/e2e/scroll-geometry.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,7 +17,7 @@ import { test, expect } from './fixtures';
 */

const probeScroller = `(() => {
 const scroller = document.querySelector('.maka-chatViewport');
 const scroller = document.querySelector('[data-chat-scroll-container="true"]');
 return {
 scrollHeight: scroller.scrollHeight,
 clientHeight: scroller.clientHeight,
Expand DownExpand Up@@ -45,8 +45,8 @@ type ColumnGeometry = {

async function probeColumnGeometry(page: import('@playwright/test').Page): Promise<ColumnGeometry> {
 return await page.evaluate(() => {
 const host = document.querySelector<HTMLElement>('.maka-chat.messages');
 const viewport = document.querySelector<HTMLElement>('.maka-chatViewport');
 const host = document.querySelector<HTMLElement>('.maka-chat-layout');
 const viewport = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const turn = document.querySelector<HTMLElement>('.maka-turn');
 const composer = document.querySelector<HTMLElement>('.composer .maka-composer-astryx');
 if (!host || !viewport || !turn || !composer) {
Expand DownExpand Up@@ -91,7 +91,7 @@ async function probeColumnGeometry(page: import('@playwright/test').Page): Promi
 * done, so ask it.
 */
async function settleGeometry(page: import('@playwright/test').Page, options: { pinned: boolean }): Promise<void> {
 await expect(page.locator('.maka-chatViewport[data-turn-warmup="settled"]')).toBeAttached({ timeout: 15_000 });
 await expect(page.locator('[data-chat-scroll-container="true"][data-turn-warmup="settled"]')).toBeAttached({ timeout: 15_000 });
 const settled = await page.evaluate(probeScroller) as { scrollHeight: number };
 expect(settled.scrollHeight, JSON.stringify(settled)).toBeGreaterThan(WARMED_HEIGHT_FLOOR);
 // The last chunk's inflation reaches the pinned follower through a
Expand All@@ -116,15 +116,15 @@ test('chat viewport and message column share the composer centerline', async ({
 }
});

test('empty chat keeps its grid content flush with the viewport', async ({ window: page }) => {
test('empty chat has no phantom vertical range and stays flush with the viewport', async ({ window: page }) => {
 const content = page.locator('.mainColumn[data-home-surface="true"] .maka-chatContent');
 await expect(content).toBeVisible();

 for (const width of [900, 1180, 1440]) {
 await page.setViewportSize({ width, height: 760 });
 const geometry = await page.evaluate(() => {
 const host = document.querySelector<HTMLElement>('.maka-chat.messages');
 const viewport = document.querySelector<HTMLElement>('.maka-chatViewport');
 const host = document.querySelector<HTMLElement>('.maka-chat-layout');
 const viewport = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const content = document.querySelector<HTMLElement>('.maka-chatContent');
 if (!host || !viewport || !content) throw new Error('Expected the empty chat scroll surface');
 const hostRect = host.getBoundingClientRect();
Expand All@@ -134,12 +134,15 @@ test('empty chat keeps its grid content flush with the viewport', async ({ windo
 hostViewportLeftDelta: viewportRect.left - hostRect.left,
 contentDisplay: contentStyle.display,
 contentGap: contentStyle.gap,
 scrollRange: viewport.scrollHeight - viewport.clientHeight,
 scrollTop: viewport.scrollTop,
 };
 });
 const diagnostics = JSON.stringify({ width, ...geometry });
 expect(Math.abs(geometry.hostViewportLeftDelta), diagnostics).toBeLessThanOrEqual(1);
 expect(geometry.contentDisplay, diagnostics).toBe('grid');
 expect(geometry.contentGap, diagnostics).toBe('0px');
 expect(geometry.contentDisplay, diagnostics).toBe('flex');
 expect(geometry.scrollRange, diagnostics).toBeLessThanOrEqual(1);
 expect(geometry.scrollTop, diagnostics).toBeLessThanOrEqual(1);
 }
});

Expand All@@ -156,11 +159,49 @@ test('long session opens pinned to bottom and stays pinned while geometry settle
 // And the pin still holds once the walk reports itself done, which is what
 // makes the poll above a contract rather than a lucky early read.
 await settleGeometry(page, { pinned: true });

 const bottomBoundary = await page.evaluate(() => {
 const scroller = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const lastTurn = scroller?.querySelector<HTMLElement>('.maka-turn:last-of-type');
 const dock = scroller?.lastElementChild;
 if (!lastTurn || !dock) throw new Error('Expected the final turn and Astryx dock');
 return {
 dockTop: dock.getBoundingClientRect().top,
 lastTurnBottom: lastTurn.getBoundingClientRect().bottom,
 };
 });
 expect(
 bottomBoundary.lastTurnBottom,
 JSON.stringify(bottomBoundary),
 ).toBeLessThanOrEqual(bottomBoundary.dockTop + 1);
 expect(
 bottomBoundary.dockTop - bottomBoundary.lastTurnBottom,
 JSON.stringify(bottomBoundary),
 ).toBeLessThanOrEqual(48);
});

test('graph status stays docked above the composer while transcript history scrolls', async ({ longTranscriptWindow: page }) => {
 await settleGeometry(page, { pinned: true });
 const graphPanel = page.locator('.maka-agent-graph-panel');
 await expect(graphPanel).toBeVisible();

 const before = await graphPanel.boundingBox();
 expect(before).not.toBeNull();
 await page.evaluate(() => {
 const scroller = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 if (!scroller) throw new Error('Expected the Astryx chat scroller');
 scroller.scrollTop = 0;
 });
 const after = await graphPanel.boundingBox();
 expect(after).not.toBeNull();
 if (before && after) {
 expect(Math.abs(after.y - before.y), JSON.stringify({ before, after })).toBeLessThanOrEqual(1);
 }
});

async function climbToTop(page: import('@playwright/test').Page) {
 return await page.evaluate(async () => {
 const scroller = document.querySelector('.maka-chatViewport') as HTMLElement;
 const scroller = document.querySelector('[data-chat-scroll-container="true"]') as HTMLElement;
 const started = performance.now();
 // Self-imposed deadline well under the 60s test timeout: a stalled or
 // crawling compositor must produce a diagnosable assertion failure with
Expand Down

32 changes: 27 additions & 5 deletions
apps/desktop/e2e/sidebar-geometry.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -27,7 +27,7 @@ import type { Page } from '@playwright/test';
 * and does not assert rendered footer-visibility geometry. The two layers
 * deliberately lock different declarations.
 * - `scroll-geometry.spec.ts` boots `long-transcript` and probes
 * `.maka-chatViewport`, not the sidebar.
 * Astryx `ChatLayout`, not the sidebar.
 *
 * This spec is the rendered-geometry lock. It boots the `sidebar-long-sessions`
 * fixture and asserts, against the live desktop shell:
Expand All@@ -48,7 +48,7 @@ import type { Page } from '@playwright/test';
 */

const LIST_CONTENT = '.maka-session-list';
const CHAT_VIEWPORT = '.maka-chatViewport';
const CHAT_VIEWPORT = '[data-chat-scroll-container="true"]';

interface ScrollerMetrics {
 scrollTop: number;
Expand DownExpand Up@@ -90,7 +90,7 @@ async function readGeometry(page: Page): Promise<Geometry> {
 panel: rect(document.querySelector('.maka-session-panel')),
 viewport: { width: window.innerWidth, height: window.innerHeight },
 list: scroller(document.querySelector(listContentSelector)?.parentElement ?? null),
 chat: scroller(document.querySelector('.maka-chatViewport')),
 chat: scroller(document.querySelector('[data-chat-scroll-container="true"]')),
 };
 }, LIST_CONTENT);
}
Expand DownExpand Up@@ -167,6 +167,28 @@ test('sidebar list scrolls independently and keeps the footer in view with 60 se
 await expect(page.locator(LIST_CONTENT)).toHaveCount(1);
 await expect(page.locator(CHAT_VIEWPORT)).toHaveCount(1);

 // Astryx owns the chat's initial fill and follows transcript geometry
 // asynchronously. Establish its terminal pinned position before using the
 // chat scrollTop as the sidebar-independence control value.
 await expect(page.locator(`${CHAT_VIEWPORT}[data-turn-warmup="settled"]`)).toBeAttached();
 await expect.poll(async () => {
 const geometry = await readGeometry(page);
 return geometry.chat
 ? Math.round(geometry.chat.scrollHeight - geometry.chat.scrollTop - geometry.chat.clientHeight)
 : Number.POSITIVE_INFINITY;
 }).toBeLessThanOrEqual(1);

 // The newest fixture session is one short exchange. It already fits above
 // the composer, so reaching its final message must not create a second,
 // composer-height scroll range below the conversation.
 const settledChat = (await readGeometry(page)).chat;
 expect(settledChat, JSON.stringify(settledChat)).not.toBeNull();
 if (settledChat) {
 const diagnostics = JSON.stringify(settledChat);
 expect(settledChat.scrollHeight - settledChat.clientHeight, diagnostics).toBeLessThanOrEqual(1);
 expect(settledChat.scrollTop, diagnostics).toBeLessThanOrEqual(1);
 }

 // (1a) The sidebar list scroller actually overflows its constrained grid
 // row — this is what makes it an independent scroll container. If the panel
 // loses its constrained height, the row grows to content height and this
Expand DownExpand Up@@ -199,8 +221,8 @@ test('sidebar list scrolls independently and keeps the footer in view with 60 se

 // The sidebar's own scrollTop moved...
 expect(after.list?.scrollTop ?? -1, afterDiag).toBeGreaterThan(listScrollTopBefore);
 // ...while the chat viewport's scrollTop is unaffected (short transcript →
 // stays pinned at 0). This is the scroll-independence lock for this seed.
 // ...while the already-settled chat viewport's scrollTop is unaffected.
 // This is the scroll-independence lock for this seed.
 expect(after.chat?.scrollTop ?? -1, afterDiag).toBe(chatScrollTopBefore);

 // (b) Footer still fully inside the panel and the window after scrolling the
Expand Down

30 changes: 0 additions & 30 deletions
apps/desktop/resources/licenses/npm/THIRD_PARTY_NOTICES.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7003,36 +7003,6 @@ IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

================================================================================

Package: overlayscrollbars@2.16.0
Declared license: MIT
Selected license: MIT
Repository: https://github.com/KingSora/OverlayScrollbars.git#packages/overlayscrollbars

--- VERSION-PINNED LICENSE TEXT OVERRIDE ---
MIT License

Copyright (c) 2022 Rene Haas

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================================================

Package: p-finally@1.0.0
Declared license: MIT
Selected license: MIT
Expand Down

7 changes: 5 additions & 2 deletions
apps/desktop/src/main/__tests__/attachment-chat-render.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,11 +3,14 @@ import { describe, it } from 'node:test';
import { createElement, type ReactNode } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import type { AttachmentRef, SessionSummary, StoredMessage } from '@maka/core';
import { ChatView, LocaleProvider } from '@maka/ui';
import { ChatSurfaceLayout, ChatView, LocaleProvider } from '@maka/ui';

function renderWithLocale(child: ReactNode): string {
 return renderToStaticMarkup(
 createElement(LocaleProvider, { locale: 'zh', children: child }),
 createElement(LocaleProvider, {
 locale: 'zh',
 children: createElement(ChatSurfaceLayout, { composer: null, children: child }),
 }),
 );
}

Expand Down

6 changes: 5 additions & 1 deletion
apps/desktop/src/main/__tests__/streaming-handoff.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
import type { SessionEvent } from '@maka/core';
import {
 armLiveTurn,
 ChatSurfaceLayout,
 ChatView,
 LocaleProvider,
 type LiveTurnProjection,
Expand All@@ -14,7 +15,10 @@ import { createAppShellSessionEventHandlers } from '../../renderer/app-shell-ses

function renderWithLocale(child: ReactNode): string {
 return renderToStaticMarkup(
 createElement(LocaleProvider, { locale: 'zh', children: child }),
 createElement(LocaleProvider, {
 locale: 'zh',
 children: createElement(ChatSurfaceLayout, { composer: null, children: child }),
 }),
 );
}

Expand Down

19 changes: 1 addition & 18 deletions
apps/desktop/src/main/__tests__/ui-render-memo-boundary-contract.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { resolve } from 'node:path';
import { pathToFileURL } from 'node:url';
import { afterEach, describe, it } from 'node:test';
import type { SessionSummary } from '@maka/core';
import { build, type Plugin } from 'esbuild';
import { build } from 'esbuild';
import { act, createElement, type ReactElement } from 'react';
import { createRoot, type Root } from 'react-dom/client';

Expand DownExpand Up@@ -212,27 +212,10 @@ async function importSessionHistoryList(): Promise<SessionHistoryModule> {
 format: 'esm',
 target: 'node20',
 logLevel: 'silent',
 plugins: [mockOverlayScrollbars()],
 });
 return await import(`${pathToFileURL(outfile).href}?t=${Date.now()}`) as SessionHistoryModule;
}

function mockOverlayScrollbars(): Plugin {
 return {
 name: 'mock-overlayscrollbars',
 setup(buildApi) {
 buildApi.onResolve({ filter: /^overlayscrollbars$/ }, () => ({
 path: 'overlayscrollbars-mock',
 namespace: 'memo-test',
 }));
 buildApi.onLoad({ filter: /^overlayscrollbars-mock$/, namespace: 'memo-test' }, () => ({
 loader: 'js',
 contents: 'export function OverlayScrollbars() { return { destroy() {}, options() {} }; }',
 }));
 },
 };
}

function installReactRenderer(): Root {
 installFakeDom();
 const container = new FakeElement('div', document);
Expand Down

1 change: 1 addition & 0 deletions
apps/desktop/src/main/e2e-fixture/scenarios-sessions.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@ export function longTranscriptSession(now: number): SessionHeader {
 name: '超长会话滚动几何',
 connection: 'zai-live',
 model: 'glm-5.1',
 orchestrationMode: 'graph',
 now,
 lastMessageAt: now - 5 * 60_000,
 });
Expand Down

2 changes: 2 additions & 0 deletions
apps/desktop/src/main/e2e-fixture/seed-helpers.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -99,6 +99,7 @@ export function header(input: {
 blockedReason?: SessionHeader['blockedReason'];
 isArchived?: boolean;
 isFlagged?: boolean;
 orchestrationMode?: SessionHeader['orchestrationMode'];
}): SessionHeader {
 return {
 id: input.id,
Expand All@@ -116,6 +117,7 @@ export function header(input: {
 ...(input.blockedReason ? { blockedReason: input.blockedReason } : {}),
 statusUpdatedAt: input.lastMessageAt,
 hasUnread: input.hasUnread ?? false,
 ...(input.orchestrationMode ? { orchestrationMode: input.orchestrationMode } : {}),
 // Legacy backend kinds like 'claude' aren't in the current BackendKind
 // union but are needed for the stale-sessions reproduction. Forward
 // the value verbatim into the JSONL so the renderer sees exactly what
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
refactor(ui): migrate chat surfaces to Astryx layout#1795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Astro-Han
merged 5 commits into

from

Aug 1, 2026
 Merged


refactor(ui): migrate chat surfaces to Astryx layout
#1795
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
7fe22bb

refactor(ui): migrate chat surfaces to Astryx layout


Astro-Han Aug 1, 2026
7227d42

fix(ui): remove phantom chat scroll range


Astro-Han Aug 1, 2026
2a16fd9

fix(ui): keep chat status panels docked


Astro-Han Aug 1, 2026
ea0e32f

refactor(ui): require Astryx chat layout ownership


Astro-Han Aug 1, 2026
b547767

test(ui): render chat view with layout owner


Astro-Han Aug 1, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
apps/desktop/e2e/fixtures.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -271,7 +271,7 @@ export const test = base.extend<{
 await withE2eWindow(
 {
 seed: false,
 readinessSelector: '.maka-chatViewport:has(.maka-turn):not(:has(.maka-markdown-pending))',
 readinessSelector: '[data-chat-scroll-container="true"]:has(.maka-turn):not(:has(.maka-markdown-pending))',
 e2eFixtureScenario: 'long-transcript',
 locale: 'zh',
 },
Expand Down

61 changes: 51 additions & 10 deletions
apps/desktop/e2e/scroll-geometry.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,7 +17,7 @@ import { test, expect } from './fixtures';
 */

const probeScroller = `(() => {
 const scroller = document.querySelector('.maka-chatViewport');
 const scroller = document.querySelector('[data-chat-scroll-container="true"]');
 return {
 scrollHeight: scroller.scrollHeight,
 clientHeight: scroller.clientHeight,
Expand DownExpand Up@@ -45,8 +45,8 @@ type ColumnGeometry = {

async function probeColumnGeometry(page: import('@playwright/test').Page): Promise<ColumnGeometry> {
 return await page.evaluate(() => {
 const host = document.querySelector<HTMLElement>('.maka-chat.messages');
 const viewport = document.querySelector<HTMLElement>('.maka-chatViewport');
 const host = document.querySelector<HTMLElement>('.maka-chat-layout');
 const viewport = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const turn = document.querySelector<HTMLElement>('.maka-turn');
 const composer = document.querySelector<HTMLElement>('.composer .maka-composer-astryx');
 if (!host || !viewport || !turn || !composer) {
Expand DownExpand Up@@ -91,7 +91,7 @@ async function probeColumnGeometry(page: import('@playwright/test').Page): Promi
 * done, so ask it.
 */
async function settleGeometry(page: import('@playwright/test').Page, options: { pinned: boolean }): Promise<void> {
 await expect(page.locator('.maka-chatViewport[data-turn-warmup="settled"]')).toBeAttached({ timeout: 15_000 });
 await expect(page.locator('[data-chat-scroll-container="true"][data-turn-warmup="settled"]')).toBeAttached({ timeout: 15_000 });
 const settled = await page.evaluate(probeScroller) as { scrollHeight: number };
 expect(settled.scrollHeight, JSON.stringify(settled)).toBeGreaterThan(WARMED_HEIGHT_FLOOR);
 // The last chunk's inflation reaches the pinned follower through a
Expand All@@ -116,15 +116,15 @@ test('chat viewport and message column share the composer centerline', async ({
 }
});

test('empty chat keeps its grid content flush with the viewport', async ({ window: page }) => {
test('empty chat has no phantom vertical range and stays flush with the viewport', async ({ window: page }) => {
 const content = page.locator('.mainColumn[data-home-surface="true"] .maka-chatContent');
 await expect(content).toBeVisible();

 for (const width of [900, 1180, 1440]) {
 await page.setViewportSize({ width, height: 760 });
 const geometry = await page.evaluate(() => {
 const host = document.querySelector<HTMLElement>('.maka-chat.messages');
 const viewport = document.querySelector<HTMLElement>('.maka-chatViewport');
 const host = document.querySelector<HTMLElement>('.maka-chat-layout');
 const viewport = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const content = document.querySelector<HTMLElement>('.maka-chatContent');
 if (!host || !viewport || !content) throw new Error('Expected the empty chat scroll surface');
 const hostRect = host.getBoundingClientRect();
Expand All@@ -134,12 +134,15 @@ test('empty chat keeps its grid content flush with the viewport', async ({ windo
 hostViewportLeftDelta: viewportRect.left - hostRect.left,
 contentDisplay: contentStyle.display,
 contentGap: contentStyle.gap,
 scrollRange: viewport.scrollHeight - viewport.clientHeight,
 scrollTop: viewport.scrollTop,
 };
 });
 const diagnostics = JSON.stringify({ width, ...geometry });
 expect(Math.abs(geometry.hostViewportLeftDelta), diagnostics).toBeLessThanOrEqual(1);
 expect(geometry.contentDisplay, diagnostics).toBe('grid');
 expect(geometry.contentGap, diagnostics).toBe('0px');
 expect(geometry.contentDisplay, diagnostics).toBe('flex');
 expect(geometry.scrollRange, diagnostics).toBeLessThanOrEqual(1);
 expect(geometry.scrollTop, diagnostics).toBeLessThanOrEqual(1);
 }
});

Expand All@@ -156,11 +159,49 @@ test('long session opens pinned to bottom and stays pinned while geometry settle
 // And the pin still holds once the walk reports itself done, which is what
 // makes the poll above a contract rather than a lucky early read.
 await settleGeometry(page, { pinned: true });

 const bottomBoundary = await page.evaluate(() => {
 const scroller = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 const lastTurn = scroller?.querySelector<HTMLElement>('.maka-turn:last-of-type');
 const dock = scroller?.lastElementChild;
 if (!lastTurn || !dock) throw new Error('Expected the final turn and Astryx dock');
 return {
 dockTop: dock.getBoundingClientRect().top,
 lastTurnBottom: lastTurn.getBoundingClientRect().bottom,
 };
 });
 expect(
 bottomBoundary.lastTurnBottom,
 JSON.stringify(bottomBoundary),
 ).toBeLessThanOrEqual(bottomBoundary.dockTop + 1);
 expect(
 bottomBoundary.dockTop - bottomBoundary.lastTurnBottom,
 JSON.stringify(bottomBoundary),
 ).toBeLessThanOrEqual(48);
});

test('graph status stays docked above the composer while transcript history scrolls', async ({ longTranscriptWindow: page }) => {
 await settleGeometry(page, { pinned: true });
 const graphPanel = page.locator('.maka-agent-graph-panel');
 await expect(graphPanel).toBeVisible();

 const before = await graphPanel.boundingBox();
 expect(before).not.toBeNull();
 await page.evaluate(() => {
 const scroller = document.querySelector<HTMLElement>('[data-chat-scroll-container="true"]');
 if (!scroller) throw new Error('Expected the Astryx chat scroller');
 scroller.scrollTop = 0;
 });
 const after = await graphPanel.boundingBox();
 expect(after).not.toBeNull();
 if (before && after) {
 expect(Math.abs(after.y - before.y), JSON.stringify({ before, after })).toBeLessThanOrEqual(1);
 }
});

async function climbToTop(page: import('@playwright/test').Page) {
 return await page.evaluate(async () => {
 const scroller = document.querySelector('.maka-chatViewport') as HTMLElement;
 const scroller = document.querySelector('[data-chat-scroll-container="true"]') as HTMLElement;
 const started = performance.now();
 // Self-imposed deadline well under the 60s test timeout: a stalled or
 // crawling compositor must produce a diagnosable assertion failure with
Expand Down

32 changes: 27 additions & 5 deletions
apps/desktop/e2e/sidebar-geometry.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -27,7 +27,7 @@ import type { Page } from '@playwright/test';
 * and does not assert rendered footer-visibility geometry. The two layers
 * deliberately lock different declarations.
 * - `scroll-geometry.spec.ts` boots `long-transcript` and probes
 * `.maka-chatViewport`, not the sidebar.
 * Astryx `ChatLayout`, not the sidebar.
 *
 * This spec is the rendered-geometry lock. It boots the `sidebar-long-sessions`
 * fixture and asserts, against the live desktop shell:
Expand All@@ -48,7 +48,7 @@ import type { Page } from '@playwright/test';
 */

const LIST_CONTENT = '.maka-session-list';
const CHAT_VIEWPORT = '.maka-chatViewport';
const CHAT_VIEWPORT = '[data-chat-scroll-container="true"]';

interface ScrollerMetrics {
 scrollTop: number;
Expand DownExpand Up@@ -90,7 +90,7 @@ async function readGeometry(page: Page): Promise<Geometry> {
 panel: rect(document.querySelector('.maka-session-panel')),
 viewport: { width: window.innerWidth, height: window.innerHeight },
 list: scroller(document.querySelector(listContentSelector)?.parentElement ?? null),
 chat: scroller(document.querySelector('.maka-chatViewport')),
 chat: scroller(document.querySelector('[data-chat-scroll-container="true"]')),
 };
 }, LIST_CONTENT);
}
Expand DownExpand Up@@ -167,6 +167,28 @@ test('sidebar list scrolls independently and keeps the footer in view with 60 se
 await expect(page.locator(LIST_CONTENT)).toHaveCount(1);
 await expect(page.locator(CHAT_VIEWPORT)).toHaveCount(1);

 // Astryx owns the chat's initial fill and follows transcript geometry
 // asynchronously. Establish its terminal pinned position before using the
 // chat scrollTop as the sidebar-independence control value.
 await expect(page.locator(`${CHAT_VIEWPORT}[data-turn-warmup="settled"]`)).toBeAttached();
 await expect.poll(async () => {
 const geometry = await readGeometry(page);
 return geometry.chat
 ? Math.round(geometry.chat.scrollHeight - geometry.chat.scrollTop - geometry.chat.clientHeight)
 : Number.POSITIVE_INFINITY;
 }).toBeLessThanOrEqual(1);

 // The newest fixture session is one short exchange. It already fits above
 // the composer, so reaching its final message must not create a second,
 // composer-height scroll range below the conversation.
 const settledChat = (await readGeometry(page)).chat;
 expect(settledChat, JSON.stringify(settledChat)).not.toBeNull();
 if (settledChat) {
 const diagnostics = JSON.stringify(settledChat);
 expect(settledChat.scrollHeight - settledChat.clientHeight, diagnostics).toBeLessThanOrEqual(1);
 expect(settledChat.scrollTop, diagnostics).toBeLessThanOrEqual(1);
 }

 // (1a) The sidebar list scroller actually overflows its constrained grid
 // row — this is what makes it an independent scroll container. If the panel
 // loses its constrained height, the row grows to content height and this
Expand DownExpand Up@@ -199,8 +221,8 @@ test('sidebar list scrolls independently and keeps the footer in view with 60 se

 // The sidebar's own scrollTop moved...
 expect(after.list?.scrollTop ?? -1, afterDiag).toBeGreaterThan(listScrollTopBefore);
 // ...while the chat viewport's scrollTop is unaffected (short transcript →
 // stays pinned at 0). This is the scroll-independence lock for this seed.
 // ...while the already-settled chat viewport's scrollTop is unaffected.
 // This is the scroll-independence lock for this seed.
 expect(after.chat?.scrollTop ?? -1, afterDiag).toBe(chatScrollTopBefore);

 // (b) Footer still fully inside the panel and the window after scrolling the
Expand Down

30 changes: 0 additions & 30 deletions
apps/desktop/resources/licenses/npm/THIRD_PARTY_NOTICES.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7003,36 +7003,6 @@ IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

================================================================================

Package: overlayscrollbars@2.16.0
Declared license: MIT
Selected license: MIT
Repository: https://github.com/KingSora/OverlayScrollbars.git#packages/overlayscrollbars

--- VERSION-PINNED LICENSE TEXT OVERRIDE ---
MIT License

Copyright (c) 2022 Rene Haas

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================================================

Package: p-finally@1.0.0
Declared license: MIT
Selected license: MIT
Expand Down

7 changes: 5 additions & 2 deletions
apps/desktop/src/main/__tests__/attachment-chat-render.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,11 +3,14 @@ import { describe, it } from 'node:test';
import { createElement, type ReactNode } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import type { AttachmentRef, SessionSummary, StoredMessage } from '@maka/core';
import { ChatView, LocaleProvider } from '@maka/ui';
import { ChatSurfaceLayout, ChatView, LocaleProvider } from '@maka/ui';

function renderWithLocale(child: ReactNode): string {
 return renderToStaticMarkup(
 createElement(LocaleProvider, { locale: 'zh', children: child }),
 createElement(LocaleProvider, {
 locale: 'zh',
 children: createElement(ChatSurfaceLayout, { composer: null, children: child }),
 }),
 );
}

Expand Down

6 changes: 5 additions & 1 deletion
apps/desktop/src/main/__tests__/streaming-handoff.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
import type { SessionEvent } from '@maka/core';
import {
 armLiveTurn,
 ChatSurfaceLayout,
 ChatView,
 LocaleProvider,
 type LiveTurnProjection,
Expand All@@ -14,7 +15,10 @@ import { createAppShellSessionEventHandlers } from '../../renderer/app-shell-ses

function renderWithLocale(child: ReactNode): string {
 return renderToStaticMarkup(
 createElement(LocaleProvider, { locale: 'zh', children: child }),
 createElement(LocaleProvider, {
 locale: 'zh',
 children: createElement(ChatSurfaceLayout, { composer: null, children: child }),
 }),
 );
}

Expand Down

19 changes: 1 addition & 18 deletions
apps/desktop/src/main/__tests__/ui-render-memo-boundary-contract.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { resolve } from 'node:path';
import { pathToFileURL } from 'node:url';
import { afterEach, describe, it } from 'node:test';
import type { SessionSummary } from '@maka/core';
import { build, type Plugin } from 'esbuild';
import { build } from 'esbuild';
import { act, createElement, type ReactElement } from 'react';
import { createRoot, type Root } from 'react-dom/client';

Expand DownExpand Up@@ -212,27 +212,10 @@ async function importSessionHistoryList(): Promise<SessionHistoryModule> {
 format: 'esm',
 target: 'node20',
 logLevel: 'silent',
 plugins: [mockOverlayScrollbars()],
 });
 return await import(`${pathToFileURL(outfile).href}?t=${Date.now()}`) as SessionHistoryModule;
}

function mockOverlayScrollbars(): Plugin {
 return {
 name: 'mock-overlayscrollbars',
 setup(buildApi) {
 buildApi.onResolve({ filter: /^overlayscrollbars$/ }, () => ({
 path: 'overlayscrollbars-mock',
 namespace: 'memo-test',
 }));
 buildApi.onLoad({ filter: /^overlayscrollbars-mock$/, namespace: 'memo-test' }, () => ({
 loader: 'js',
 contents: 'export function OverlayScrollbars() { return { destroy() {}, options() {} }; }',
 }));
 },
 };
}

function installReactRenderer(): Root {
 installFakeDom();
 const container = new FakeElement('div', document);
Expand Down

1 change: 1 addition & 0 deletions
apps/desktop/src/main/e2e-fixture/scenarios-sessions.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@ export function longTranscriptSession(now: number): SessionHeader {
 name: '超长会话滚动几何',
 connection: 'zai-live',
 model: 'glm-5.1',
 orchestrationMode: 'graph',
 now,
 lastMessageAt: now - 5 * 60_000,
 });
Expand Down

2 changes: 2 additions & 0 deletions
apps/desktop/src/main/e2e-fixture/seed-helpers.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -99,6 +99,7 @@ export function header(input: {
 blockedReason?: SessionHeader['blockedReason'];
 isArchived?: boolean;
 isFlagged?: boolean;
 orchestrationMode?: SessionHeader['orchestrationMode'];
}): SessionHeader {
 return {
 id: input.id,
Expand All@@ -116,6 +117,7 @@ export function header(input: {
 ...(input.blockedReason ? { blockedReason: input.blockedReason } : {}),
 statusUpdatedAt: input.lastMessageAt,
 hasUnread: input.hasUnread ?? false,
 ...(input.orchestrationMode ? { orchestrationMode: input.orchestrationMode } : {}),
 // Legacy backend kinds like 'claude' aren't in the current BackendKind
 // union but are needed for the stale-sessions reproduction. Forward
 // the value verbatim into the JSONL so the renderer sees exactly what
Expand Down
Loading
Loading