feat(app): build React session composer parity on Lexical (#1367)

* feat(app): add Lexical React composer shell

Replace the React session textarea with a Lexical-based plain-text composer shell so subsequent parity work can build on a real editor instead of continuing to extend the temporary textarea path.

* feat(app): route React composer through shared session draft flow

Make the React Lexical composer use the existing ComposerDraft send/draft pipeline from the session page and expose transcript copy plus model picker access so parity work builds on the same session actions as the Solid path.

* feat(app): add React composer controls and attachments

Extend the Lexical React composer with model/variant/agent controls, file attachments, prompt-vs-shell draft mode, and slash command suggestions while continuing to use the shared ComposerDraft send path from the existing session actions.

* feat(app): add React mention suggestions

Add end-of-input @ mention suggestions for agents and files in the Lexical React composer and serialize selected mentions into the shared ComposerDraft parts so the React path can target agent/file inputs instead of plain text only.

* feat(app): render React mentions as Lexical chips

Upgrade accepted React composer mentions from plain text into Lexical token nodes so agent and file selections render as real inline chips instead of raw @text while still serializing back into ComposerDraft parts.

* feat(app): add React composer notices and file paste/drop

Bring the Lexical React composer closer to the Solid UX by adding inline composer notices plus file paste/drop intake and attachment feedback without leaving the shared ComposerDraft pipeline.

* fix(app): make Lexical mention node serializable

Implement importJSON/exportJSON and constructor defaults for the React composer mention node so Lexical can safely instantiate and rehydrate accepted mention chips without throwing at runtime.

* feat(app): remove React shell composer mode

Drop the temporary Prompt/Shell toggle from the React session composer so the React path stays focused on prompt-mode parity instead of exposing an incomplete shell-mode branch.

* feat(app): add keyboard navigation for React composer menus

Add ArrowUp/ArrowDown, Enter/Tab accept, Escape close, and highlighted active-row state for the React slash and mention suggestion menus so the Lexical composer behaves more like the Solid composer.

* feat(app): make React mention chips behave like tokens

Treat accepted Lexical mention chips as real inline tokens by improving their visuals and adding backspace/arrow behavior so chip editing feels much closer to the Solid composer path.

* feat(app): add richer React paste and remote composer warnings

Extend the Lexical React composer with collapsed long-paste handling, unsupported-file link insertion, and remote/sandbox-specific notices so paste and drop behavior moves closer to the Solid composer path.

* feat(app): add per-message copy actions to React transcript

Add individual copy actions on React transcript messages so the React session surface closes another gap with the Solid path beyond the existing whole-transcript copy action.

* feat(app): render React slash commands as chips

Upgrade accepted slash commands in the Lexical React composer into real inline token nodes so slash completion feels more intentional and benefits from the same token navigation behavior as mentions.

* feat(app): polish React attachment cards and validation

Upgrade the React composer attachment UI with richer cards, image previews, mime badges, size display, and oversized-file warnings so attachment handling feels closer to the Solid composer path.

* feat(app): polish React composer menu interactions

Close the React mention/slash menus cleanly after selection and keep active-row state in sync with mouse hover so the Lexical composer menus feel less sticky and more intentional.

* feat(app): add pasted text chip UX to React composer

Promote collapsed pasted text into a first-class React composer surface with preview, copy, and remove actions so long pasted content is no longer only a hidden placeholder token inside the draft.

* feat(app): add React code and tool copy actions

Add copy affordances for Markdown code blocks plus tool request/result/diff sections so the React transcript and tool-call surfaces close more of the remaining practical parity gap with the Solid session UI.

* feat(app): polish React menu scrolling and upload actions

Keep the active React mention/slash selection scrolled into view and make remote-path warnings offer a more useful shared-folder upload action when attachments are already present in the composer.

* feat(app): align React drop behavior with attachment support

Handle unsupported dropped files more deliberately in the React composer by matching the attachment support matrix and surfacing an explanatory notice instead of silently treating every dropped file the same.

* feat(app): add keyboard navigation to React agent picker

Extend the React composer agent picker with active-row highlighting plus ArrowUp/ArrowDown/Enter/Escape behavior so it matches the rest of the keyboard-driven Lexical composer interactions.

* feat(app): anchor React composer to session bottom

Keep the React composer pinned to the bottom of the session layout with a dedicated footer container so the transcript scrolls above it instead of letting the composer drift upward when the session is sparse.

* feat(app): delay React session loading and switching UI

Only show the React session loading/switching affordances after a short delay and stop treating normal streaming as a switching state so the session surface feels calmer during quick transitions and active chats.

* feat(app): add visible React composer dropzone

Turn the React composer drag/drop path into a real dropzone with isolated local drag-over state and visible drop affordances instead of relying only on hidden drag handlers.

* fix(app): remove React composer glow

Drop the extra card shadow from the React composer container so the input surface stops showing the grey halo and sits closer to the cleaner Solid styling.

* fix(app): simplify React composer footer chrome

Remove the extra sticky footer treatment from the React session surface so the composer sits more cleanly in the layout without the added gradient wrapper.

* fix(app): clean up React transcript rendering

Remove the useless Step started label from the React transcript, render markdown horizontal rules as subtle dividers instead of heavy black lines, and tone down heading sizes so the session surface looks cleaner.

* fix(app): use light gray for React markdown dividers

Switch the horizontal rule color to a softer gray so markdown dividers feel like subtle section breaks instead of standing out.

* fix(app): clean up React composer layout, copy buttons, and pasted text chips

Fix the session layout so the transcript scrolls and the composer stays at the bottom. Replace raw Copy text buttons with cleaner icon-based copy affordances with check feedback. Render pasted multi-line text as Lexical inline chips instead of raw text in the editor.

* fix(app): unify React composer Run/Stop into one button

Replace the separate Stop and Run task buttons with a single button that switches between Run task and Stop based on streaming state so the composer footer stays clean.

* fix(app): remove Copy transcript button and fix user bubble spacing

Drop the standalone Copy transcript button and move per-message copy affordances to absolute positioning so they don't inflate message bubble height when hidden.

* fix(app): style React model variant picker as a proper menu

Replace the unstyled native select dropdown for model variant/behavior with a styled button + dropdown menu that matches the rest of the Lexical composer controls.

* fix(app): make React session mount chain full height

Add explicit full-height sizing through the Solid session wrapper and React island container so the React session surface can reliably fill the available vertical space without manual inline devtools overrides.

* feat(app): add React session scroll memory and auto-follow

Remember scroll position per session so switching between sessions restores where you left off. Scroll to bottom on first load of a new session. Auto-follow streaming text unless the user scrolls up. Show a scroll-to-bottom pill when not at the bottom.

* fix(app): prevent horizontal scroll in React session transcript

Add overflow-x-hidden to the transcript scroll container so wide content like code blocks or tool output cannot cause unwanted horizontal scrolling.

* fix(app): hide base64 data URLs in React file cards

Stop leaking raw data: URLs and application/octet-stream labels in file attachment cards. Show a clean filename or Attached file label instead, with a human-readable file type badge derived from the extension or mime type.

* feat(app): add React file card preview and desktop actions

Upgrade the React transcript file card with a cleaner design, proper file icon, and a desktop-only actions dropdown for opening files with the OS default app, revealing in Finder, or copying the path. Actions are hidden on web where Tauri APIs are not available.

* fix(app): parenthesize React variant label fallback

Use explicit parentheses around the nullish-coalescing variant label fallback so esbuild accepts the expression during production builds.
This commit is contained in:
ben
2026-04-08 15:13:07 -07:00
committed by GitHub
parent 148fd52ce8
commit 9784c618bd
11 changed files with 2115 additions and 76 deletions

View File

@@ -41,6 +41,7 @@
"@codemirror/language": "^6.11.0",
"@codemirror/state": "^6.5.2",
"@codemirror/view": "^6.38.0",
"@lexical/react": "^0.35.0",
"@opencode-ai/sdk": "^1.1.31",
"@openwork/ui": "workspace:*",
"@radix-ui/colors": "^3.0.0",
@@ -60,6 +61,7 @@
"fuzzysort": "^3.1.0",
"jsonc-parser": "^3.2.1",
"lucide-solid": "^0.562.0",
"lexical": "^0.35.0",
"marked": "^17.0.1",
"react": "^19.1.1",
"react-dom": "^19.1.1",