Skip to content

Commit 2bd2908

Browse files
claudeclaude
committed
Merge main into loop/conversation-width
Resolve merge conflicts with main: - ChatDisplay.tsx: combine main's chat-transcript ScrollArea test id (used by the scroll-to-bottom e2e) with this PR's configurable --chat-content-max-width messages container. - docs/loop/feature-ledger.md: adopt main's canonical ledger and prepend this PR's conversation-width (#63) row.
2 parents 694e252 + 3a4f438 commit 2bd2908

10 files changed

Lines changed: 227 additions & 9 deletions

File tree

‎apps/electron/src/renderer/components/app-shell/ChatDisplay.tsx‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -584,6 +584,8 @@ export const ChatDisplay = React.forwardRef<ChatDisplayHandle, ChatDisplayProps>
584584
const [visibleTurnCount, setVisibleTurnCount] = React.useState(TURNS_PER_PAGE)
585585
// Sticky-bottom: When true, auto-scroll on content changes. Toggled by user scroll behavior.
586586
const isStickToBottomRef = React.useRef(true)
587+
// Show a floating "jump to latest" button when the user has scrolled far from the bottom.
588+
const [showScrollToBottom, setShowScrollToBottom] = React.useState(false)
587589
// Mirror isFocusedPanel into a ref so the ResizeObserver closure reads the latest value
588590
const isFocusedPanelRef = React.useRef(isFocusedPanel)
589591
isFocusedPanelRef.current = isFocusedPanel
@@ -1175,6 +1177,9 @@ export const ChatDisplay = React.forwardRef<ChatDisplayHandle, ChatDisplayProps>
11751177
const distanceFromBottom = scrollHeight - scrollTop - clientHeight
11761178
// 20px threshold for "at bottom" detection
11771179
isStickToBottomRef.current = distanceFromBottom < 20
1180+
// Reveal the jump-to-latest button once the user is well away from the bottom
1181+
// (200px hysteresis so it doesn't flicker while reading near the end).
1182+
setShowScrollToBottom(distanceFromBottom > 200)
11781183

11791184
// Load more turns when scrolling near top (within 100px)
11801185
if (scrollTop < 100) {
@@ -1205,6 +1210,13 @@ export const ChatDisplay = React.forwardRef<ChatDisplayHandle, ChatDisplayProps>
12051210
return () => viewport.removeEventListener('scroll', handleScroll)
12061211
}, [handleScroll])
12071212

1213+
// Jump back to the latest message and resume sticky-bottom auto-scroll.
1214+
const scrollToBottom = React.useCallback(() => {
1215+
isStickToBottomRef.current = true
1216+
setShowScrollToBottom(false)
1217+
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
1218+
}, [])
1219+
12081220
// Auto-scroll using ResizeObserver for streaming content
12091221
// Initial scroll is handled by ScrollOnMount (useLayoutEffect, before paint)
12101222
React.useEffect(() => {
@@ -1218,6 +1230,7 @@ export const ChatDisplay = React.forwardRef<ChatDisplayHandle, ChatDisplayProps>
12181230
if (isSessionSwitch) {
12191231
isStickToBottomRef.current = true
12201232
setVisibleTurnCount(TURNS_PER_PAGE)
1233+
setShowScrollToBottom(false)
12211234
}
12221235

12231236
// Debounced scroll for streaming - waits for layout to settle
@@ -1698,7 +1711,7 @@ export const ChatDisplay = React.forwardRef<ChatDisplayHandle, ChatDisplayProps>
16981711
WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%)'
16991712
}}
17001713
>
1701-
<ScrollArea className="h-full min-w-0" viewportRef={scrollViewportRef}>
1714+
<ScrollArea className="h-full min-w-0" viewportRef={scrollViewportRef} data-testid="chat-transcript">
17021715
<div
17031716
data-testid="chat-messages-container"
17041717
style={compactMode ? undefined : { maxWidth: 'var(--chat-content-max-width, 840px)' }}
@@ -2076,6 +2089,32 @@ export const ChatDisplay = React.forwardRef<ChatDisplayHandle, ChatDisplayProps>
20762089
</div>
20772090
</ScrollArea>
20782091
</div>
2092+
2093+
{/* Jump-to-latest: floating button shown when scrolled up from the bottom */}
2094+
<AnimatePresence>
2095+
{showScrollToBottom && (
2096+
<motion.button
2097+
type="button"
2098+
onClick={scrollToBottom}
2099+
aria-label={t('chat.scrollToBottom')}
2100+
title={t('chat.scrollToBottom')}
2101+
data-testid="scroll-to-bottom"
2102+
initial={{ opacity: 0, y: 8 }}
2103+
animate={{ opacity: 1, y: 0 }}
2104+
exit={{ opacity: 0, y: 8 }}
2105+
transition={{ duration: 0.12, ease: 'easeOut' }}
2106+
className={cn(
2107+
"absolute bottom-4 left-1/2 -translate-x-1/2 z-10",
2108+
"flex items-center justify-center h-9 w-9 rounded-full",
2109+
"bg-background/90 backdrop-blur border border-border shadow-md",
2110+
"text-muted-foreground hover:text-foreground hover:bg-accent",
2111+
"transition-colors"
2112+
)}
2113+
>
2114+
<ChevronDown className="h-5 w-5" />
2115+
</motion.button>
2116+
)}
2117+
</AnimatePresence>
20792118
</div>
20802119

20812120
{/* === INPUT CONTAINER: FreeForm or Structured Input === */}

‎docs/loop/feature-ledger.md‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ log, not the system of record.
1212

1313
| status | meaning |
1414
| --- | --- |
15+
| reduce-motion | "Reduce motion" accessibility setting in Appearance | Claude desktop / macOS / Windows reduce-motion + `prefers-reduced-motion` | frontend-only | pr-open | [#50](https://github.com/modelstudioai/openwork/issues/50) | [#51](https://github.com/modelstudioai/openwork/pull/51) | loop/reduce-motion | 2026-07-03 | Renderer-only pref (localStorage) applied app-wide via `<MotionConfig reducedMotion>` + `data-reduce-motion` on `<html>` + global CSS guard. Off ⇒ `reducedMotion="user"` (still honors OS). New `ReduceMotionProvider` in `main.tsx`; toggle in Appearance→Interface; 2 new i18n keys ×7 locales. typecheck/`bun test` zero-delta vs main (56-failure set byte-identical); renderer build ✅; i18n parity ✅. CDP assertion included; **could not run locally** (egress 403s Electron binary download). |
1516
| `proposed` | Identified as a gap, not started. |
1617
| `in-progress` | Issue filed, branch open, implementation underway. |
1718
| `pr-open` | PR submitted, awaiting human review/merge. |
@@ -33,14 +34,8 @@ log, not the system of record.
3334
| slug | title | source | feasibility | status | issue | pr | branch | updated | notes |
3435
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
3536
| conversation-width | "Conversation width" (Comfortable / Wide / Full) setting in Appearance | Claude Desktop wider-chat / ChatGPT desktop width / Codex & VS Code content width | frontend-only | pr-open | [#62](https://github.com/modelstudioai/openwork/issues/62) | [#63](https://github.com/modelstudioai/openwork/pull/63) | loop/conversation-width | 2026-07-06 | Renderer-only pref (localStorage `craft-conversation-width`). New `ConversationWidthProvider` in `main.tsx` sets `data-conversation-width` on `<html>` + drives CSS var `--chat-content-max-width` (840px/1100px/none). Transcript container (`ChatDisplay`) + composer (`ChatInputZone`) read it via `max-width: var(--chat-content-max-width, 840px)`; fallback keeps shared web viewer unchanged. Segmented control in Appearance→Interface; added `testId` to `SettingsSegmentedControl`; 5 new i18n keys ×7 locales. typecheck/`bun test` zero-delta vs main (56-failure set byte-identical); renderer build ✅; i18n parity ✅. CDP assertion `e2e/assertions/conversation-width.assert.ts` included; **could not run locally** (egress 403 blocks Electron binary + `libsignal-node`/`eslint-config` git-tarball deps — same env blocker as #51). |
36-
| composer-count | Live word / character count indicator in the chat composer | Codex desktop / VS Code / Google Docs status bars | frontend-only | pr-open | [#60](https://github.com/modelstudioai/openwork/issues/60) | [#61](https://github.com/modelstudioai/openwork/pull/61) | loop/composer-count | 2026-07-05 | Opened by a prior run. Draft word count + tooltip (words/chars/lines) in composer toolbar. Awaiting review. |
37-
| shortcuts-search | Search box on the Settings → Keyboard Shortcuts page | Claude Code Desktop / VS Code keybinding search | frontend-only | pr-open | [#58](https://github.com/modelstudioai/openwork/issues/58) | [#59](https://github.com/modelstudioai/openwork/pull/59) | loop/shortcuts-search | 2026-07-04 | Opened by a prior run. Awaiting review. |
38-
| recent-commands | Surface recently-used commands in the Command Palette (⌘K) | Claude Code Desktop / VS Code recently-used | frontend-only | pr-open | [#56](https://github.com/modelstudioai/openwork/issues/56) | [#57](https://github.com/modelstudioai/openwork/pull/57) | loop/recent-commands | 2026-07-04 | Opened by a prior run. Awaiting review. |
39-
| thinking-shortcut | Keyboard shortcut (⌘⇧E) to open the composer's thinking menu | Claude Code Desktop effort menu ⌘⇧E | frontend-only | pr-open | [#54](https://github.com/modelstudioai/openwork/issues/54) | [#55](https://github.com/modelstudioai/openwork/pull/55) | loop/thinking-shortcut | 2026-07-03 | Opened by a prior run. Awaiting review. |
40-
| prompt-history | Recall previously-sent prompts in the composer with Up / Down arrows | Claude Code / shell / ChatGPT prompt history | frontend-only | pr-open | [#52](https://github.com/modelstudioai/openwork/issues/52) | [#53](https://github.com/modelstudioai/openwork/pull/53) | loop/prompt-history | 2026-07-03 | Opened by a prior run. Awaiting review. |
41-
| reduce-motion | "Reduce motion" accessibility setting in Appearance | Claude desktop / macOS / Windows reduce-motion + `prefers-reduced-motion` | frontend-only | merged | [#50](https://github.com/modelstudioai/openwork/issues/50) | [#51](https://github.com/modelstudioai/openwork/pull/51) | loop/reduce-motion | 2026-07-08 | **Merged** into `main` (2026-07-06). Renderer-only pref (localStorage) applied app-wide via `<MotionConfig reducedMotion>` + `data-reduce-motion` on `<html>` + global CSS guard. Off ⇒ `reducedMotion="user"` (still honors OS). New `ReduceMotionProvider` in `main.tsx`; toggle in Appearance→Interface; 2 new i18n keys ×7 locales. |
37+
| scroll-to-bottom | "Jump to latest" (scroll-to-bottom) button in the chat transcript | Claude Code Desktop / ChatGPT / Codex desktop jump-to-latest affordance | frontend-only | pr-open | [#46](https://github.com/modelstudioai/openwork/issues/46) | [#47](https://github.com/modelstudioai/openwork/pull/47) | loop/scroll-to-bottom | 2026-07-02 | Reuses existing `ChatDisplay` scroll state (`distanceFromBottom`, `isStickToBottomRef`, `messagesEndRef`); floating `AnimatePresence` button shown when >200px from bottom. One new i18n key `chat.scrollToBottom` across all 6 locales. Added a reusable `seed(profileDirs)` hook to the e2e harness (`app.ts`/`runner.ts`) so assertions can pre-seed an on-disk session (backend-independent) — the scroll assertion seeds a 40-message session, opens it, scrolls up, asserts the button appears, clicks it, asserts return-to-bottom + hide. typecheck/`bun test` zero-delta vs main (11 pre-existing tsc errors, 56 pre-existing test fails, identical sets); renderer build ✅. **CDP could not run locally**: the Electron binary download is 403'd by the sandbox egress policy (github release host), so the app can't launch here — assertion transpiles and is included for CI/reviewer. |
38+
| thinking-level-picker | Thinking-level (reasoning effort) picker in the chat composer | Claude Code Desktop effort menu (⌘⇧E) + OpenWork's own model picker | frontend-only | merged | [#44](https://github.com/modelstudioai/openwork/issues/44) | [#45](https://github.com/modelstudioai/openwork/pull/45) | loop/thinking-level-picker | 2026-07-02 | Merged into `main`. `thinkingLevel`/`onThinkingLevelChange` already plumbed to `FreeFormInput`; only the UI trigger was missing. Reuses `thinking.*` + `settings.ai.thinking` i18n keys (zero new keys). typecheck/`bun test` zero-delta vs main. |
4239
| composer-expand | Expand / collapse (maximize) toggle for the chat composer | Claude/ChatGPT/Codex desktop composer maximize | frontend-only | pr-open | [#48](https://github.com/modelstudioai/openwork/issues/48) | [#49](https://github.com/modelstudioai/openwork/pull/49) | loop/composer-expand | 2026-07-03 | Opened by a prior run. Adds `isComposerExpanded` toggle in `FreeFormInput`; 2 new i18n keys. Awaiting review. |
43-
| scroll-to-bottom | "Jump to latest" (scroll-to-bottom) button in the chat transcript | Claude Code / ChatGPT / Codex desktop | frontend-only | pr-open | [#46](https://github.com/modelstudioai/openwork/issues/46) | [#47](https://github.com/modelstudioai/openwork/pull/47) | loop/scroll-to-bottom | 2026-07-02 | Opened by a prior run. Floating jump button in `ChatDisplay` + `seed()` harness hook. Awaiting review. |
44-
| thinking-level-picker | Thinking-level (reasoning effort) picker in the chat composer | Claude Code Desktop effort menu (⌘⇧E) + OpenWork's own model picker | frontend-only | merged | [#44](https://github.com/modelstudioai/openwork/issues/44) | [#45](https://github.com/modelstudioai/openwork/pull/45) | loop/thinking-level-picker | 2026-07-03 | **Merged** into `main` (2026-07-02). `thinkingLevel`/`onThinkingLevelChange` already plumbed to `FreeFormInput`; only the UI trigger was missing. Reuses `thinking.*` + `settings.ai.thinking` i18n keys (zero new keys). |
4540
| command-palette | Global command palette (⌘K/Ctrl+K) to search & run any action | Claude Code Desktop ⌘K / VS Code & Codex ⌘⇧P / Linear ⌘K | frontend-only | merged | [#41](https://github.com/modelstudioai/openwork/issues/41) | [#42](https://github.com/modelstudioai/openwork/pull/42) | loop/command-palette | 2026-07-02 | Merged into `main`. Reuses action registry `execute()` + cmdk primitives; zero new i18n keys. CDP e2e 2/2 pass. typecheck/test +0 vs main. |
4641
| settings-search | Searchable/filterable settings navigation | Claude Code Desktop / VS Code / Codex desktop settings search | frontend-only | merged | [#39](https://github.com/modelstudioai/openwork/issues/39) | [#40](https://github.com/modelstudioai/openwork/pull/40) | loop/settings-search | 2026-07-01 | Merged into `main`. Filters `SettingsNavigator` by title+description; reuses `common.search`/`common.noResultsFound` (no new locale keys). Also hardened `e2e/app.ts` teardown (per-launch profile dir + setsid process-group kill) so multiple CDP assertions run under headless xvfb. |

0 commit comments

Comments
 (0)