Skip to content

feat(ai): + attach menu, Markdown image lightbox and composer focus - #3266

Merged
abose merged 11 commits into
mainfrom
ai
Oct 9, 2026
Merged

feat(ai): + attach menu, Markdown image lightbox and composer focus#3266
abose merged 11 commits into
mainfrom
ai

Conversation

@abose

@abose abose commented Oct 8, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Three user-facing changes from the ai branch, paired with https://github.com/phcode-dev/phoenix-pro/pull/282:

  1. One + attach menu in the AI composer. A single + button replaces the paperclip and camera buttons. Its menu has:

    • Attach a file
    • Add folder as context
    • Area screenshot…
    • Live Preview screenshot
    • Live Preview selection screenshot

    Full Editor and Upload from Device are gone: Attach a file covers uploads, and the area picker's new whole-window toggle covers the full editor. Live Preview screenshot captures whatever the preview shows, Markdown previews included, and opens Live Preview first if it is closed. The selection screenshot is disabled when there's no HTML preview, the preview uses a custom server, or nothing is selected; its tooltip says which.

  2. Full-size images in the Markdown preview.

    • Reader mode: clicking an image shows it alone over a dimmed backdrop, inside the preview frame; a linked image still follows its link.
    • Edit mode: a click still selects the image; a double-click, or the expand button in a hovered image's top-right corner, opens it.
    • Escape or a click closes it.

  3. Click unused space to focus the AI prompt. This works in the AI sidebar and the floating Ask AI dialog and shows the existing outline pulse. The usage dropdown arrow now stays pointed down, open or closed.

What kind of change does this PR introduce?

  • Features: the + attach menu, the Markdown image lightbox and composer focus feedback.
  • Bugfix: consistent usage dropdown arrow direction.
  • Build-related changes: advance the Pro pin to 5fc672d16b2d07c291f6da141e53e41ebfb4bf96.

Core changes:

  • Attach menu: strings and LESS for the menu, its divider and disabled items, and the area picker's whole-window toggle. The toggle returns to the previous selection, or to a centred area when the previous one was the whole window.
  • Markdown viewer: a new image-lightbox.js component, plus Escape and focus handling in bridge.js, styles and one locale string.
  • Composer focus: the floating composer reuses the pulse CSS, and the usage arrow no longer rotates.

Screenshots or Gifs of the change

None attached; screenshots can't be attached from the current connection. The menu, the area toggle, the lightbox and the hover button were reviewed in the connected Linux app.

Does this PR introduce a breaking change?

No.

Tests done

  • + attach menu (Pro 5fc672d, core 2bdd62483; tooltip fix in 47cb671f8):
    • macOS: 104/104 across AI Attach Menu 8, AI Live Preview Chat 42, AI Image UI 24, AI CLI Composer 17 and AI Live Preview Send 13.
    • Linux: the same five suites, 104/104 at the final commits.
    • The restored capture-button tooltip renders "Take Screenshot" on macOS and Linux.
    • Windows: that machine is offline, so this PR's CI covers it.
  • Markdown image lightbox: livepreview:Markdown Editor 1 66/66 on Windows, macOS and Linux (core a53496d1e), including 7 new lightbox specs.
  • Composer focus: integration:AI Composer Focus 19/19 and integration:AI Live Preview Chat 42/42 on Windows Tauri, macOS Tauri and Linux Electron.
  • ESLint (pre-commit) and LESS compilation passed.

Checklist

  • User-visible problem and resulting behavior described above.
  • Proposed changelog: Attach files, folders and screenshots from one + menu in the AI panel; view Markdown preview images full size; click empty space to focus the AI prompt.
  • Reason for the feature: fewer composer buttons, screenshots that work for every preview, and a quick way to inspect images in Markdown.

Other information

Companion Pro PR: https://github.com/phcode-dev/phoenix-pro/pull/282. Review and merge the two together; this PR pins the Pro commit tested above.

abose added 8 commits October 8, 2026 20:34
@abose
feat(ai): reuse composer pulse and update Pro pin
40b6f51 
Apply the existing input-outline animation to the floating Ask AI composer,
so unused-space focus uses the same visual cue as the AI sidebar.

Pin Phoenix Pro to 89b11573b9d64eb22130f83c56702aa490492178 for shared click-to-focus
handling in both composers, registered regression coverage and updated task
tracking. Preserve text selection, dragging, normal controls and preview
interactions while retaining the draft and caret.

Validation: 19 focus integration specs and 42 existing Ask AI dialog specs
pass on each of Windows, macOS and Linux (183 checks). Targeted ESLint, LESS
compilation and whitespace checks pass. Both surfaces were also checked in
the connected Linux app. The user confirmed the earlier CI fixes pass fully.
@abose
fix(ai): keep the usage dropdown arrow pointing down
36fe699 
Remove the usage chip's open-state chevron rotation and its unused
transform transition. The arrow now keeps the same direction as the
other composer dropdowns, independently of popup placement or visibility.

Pin Phoenix Pro to 4cef1b9ae230952c519da4381059ebc25eaf93a5 for the matching downward
icon and completed task documentation.

Validation: LESS compilation and whitespace checks pass. In the connected
Linux app, the arrow remains down with no transform in both open and closed
states, while the usage popup continues toggling normally.
@abose
feat(mdviewer): view images full size in the Markdown preview
3406b07 
Show an image on its own over a dimmed backdrop inside the Markdown preview
frame, with no dialog chrome. Any click or Escape closes it.

Reader mode opens it on a click; linked images keep following their link. In
edit mode a click still selects the image, and the lightbox opens from a
centred expand button shown while hovering the image, a double-click, or a
new expand icon in the image toolbar. A reader image click no longer moves
focus back to the code editor, and Escape stays in the frame while the
lightbox is open. File and mode switches close it.

Tests: livepreview:Markdown Editor 1 > Image Lightbox (7) with a new
image-test.md fixture.
@abose
fix(mdviewer): keep the image expand button on its image
211c4ba 
The edit-mode expand button only appeared on mouseover, so a scroll that hid
it, or a pointer already inside a large image, left it hidden until the
pointer left and re-entered. It now follows the pointer's position: each mouse
move (using the event's own target) and each scroll or resize shows, moves or
hides it for whatever image is under the pointer. Moving onto a different
element is handled at once; repeated moves and scrolls are checked at most
once per 16 ms with a trailing check, since not every engine coalesces mouse
moves per frame.

The button now sits in the viewer's scroll container, centred on the image in
content coordinates, so it scrolls with the image instead of trailing it. The
image toolbar's expand icon is removed: the centre button does the same.

Tests: Image Lightbox covers hovering anywhere on the image, moving off and
back, and a scroll while the pointer stays.
@abose
fix(mdviewer): enlarge the image expand button
f062e39 
Make the edit-mode centre expand button 56px (from 44px) with a 24px icon,
so there is more area to click. Images under 96px no longer get the button,
since it would cover most of them.
@abose
fix(mdviewer): move the image expand button to the top-right corner
a53496d 
Show the edit-mode expand button as a 48px rounded square in the hovered
image's top-right corner, inset 10px, instead of a circle over its centre, so
it no longer covers the image content or the spot where an image is grabbed
to drag it. On an image taller than the preview, the button moves down to
stay on the visible part once the image's top has scrolled out of view.

Tests: the Image Lightbox hover specs check the corner position.
@abose
feat(ai): strings and styles for the composer + attach menu
2bdd624 
Rename the screenshot menu items to lead with what differs (Area, Live
Preview, Live Preview selection screenshot), add the whole-window toggle and
disabled-item tooltips, and drop the camera, Full Editor and Upload from
Device strings. Style the + button, the menu divider, disabled items and the
area picker's toggle; remove the camera button and its drop-up styles.
@abose
fix(ai): restore the screenshot title string and update Pro pin
47cb671 
The Live Preview chat capture button still uses AI_CHAT_SCREENSHOT_TITLE
for its tooltip, which the attach menu change removed.

Advance the Pro pin to 5fc672d, the + attach menu.
@abose abose changed the title feat(ai): add composer focus feedback and consistent usage arrow feat(ai): + attach menu, Markdown image lightbox and composer focus Oct 9, 2026
abose added 3 commits October 9, 2026 13:11
@abose
test(mdviewer): embed images in the lightbox fixture
f651a4d 
Use data URLs for the existing SVG so Chromium lightbox tests do not
depend on a relative virtual-server URL that returns 404. Preserve the
image dimensions and interaction checks, and remove the unused SVG file.

Validation: connected Chromium lightbox suite 7/7; full Chromium Live
Preview CI command 320/320 on Linux. The embedded image also loads with
the production sandbox restrictions. Production code is unchanged.
@abose
chore(deps): update Phoenix Pro pin
39d19c0 
Advance Phoenix Pro from 5fc672d to 558213d to include the latest attach
menu and Chromium lightbox verification notes. The intervening Pro
changes are documentation only.

Validation: the tracking JSON parses and its commit ID matches Pro HEAD.
@abose
build: update pro deps
26a23ca
@abose
abose merged commit 63f86d1 into main Oct 9, 2026
13 of 14 checks passed
@abose
abose deleted the ai branch October 9, 2026 08:22
@sonarqubecloud

sonarqubecloud Bot commented Oct 9, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@abose