8000 fix(ui): make Lens usable on a phone by adeelahmad · Pull Request #346 · adeelahmad/lense · GitHub
[go: up one dir, main page]
Skip to content
8000

fix(ui): make Lens usable on a phone - #346

Merged
adeelahmad merged 14 commits into
mainfrom
claude/project-thread-90aiyy
Oct 14, 2026
Merged

fix(ui): make Lens usable on a phone#346
adeelahmad merged 14 commits into
mainfrom
claude/project-thread-90aiyy

Conversation

@adeelahmad
@adeelahmad adeelahmad commented Oct 10, 2026 •
edited
Loading
Copy link
Copy Markdown
Owner

Requested by Adeel · project thread

Description

Before: on a phone (below 640px) the namespace switcher was hidden, so you couldn't switch namespace at all. Import meant a trip through Jump to, and the Settings sections were a row you had to swipe sideways. The graph's filters sheet stayed over the node you had just picked. Copy sat on top of webhook addresses, and the sensors and connections tables squeezed their text to one letter per line. Save and Create waited below the fold or under the floating Ask button. A recording's step row made the whole page wider than the screen, so the Create podcast dialog opened half off it.

After: the namespace switcher is at the top of the phone's menu, and picking a namespace closes the menu. Import is an icon in the top bar. Settings opens its sections as a list from the current section's name, and tabs wrap. The filters sheet closes after a pick. Copy sits beside webhook addresses, which now wrap. Sensors and connections show as cards. Form buttons stay pinned at the bottom of the screen, clear of the Ask button. A dialog's actions stay in sight even when the dialog is taller than the screen, and long dialog titles wrap. The step row scrolls inside its own box. On a computer, the only change is that a settings section's Save no longer sits under the Ask button.

Clicks survey (ci/clicks/run.sh --device phone, fresh install, against main's baseline after #341):

Main This PR
Features that can't be done on a phone 1 0
Swipes 9 2
Taps 114 116
Keys 260 248

Switching namespace now takes 3 taps. Two journeys (Settings, where the sections list opens from a button) each gain one tap and lose one swipe. Importing takes 1 tap and 6 keys fewer. The computer run is unchanged (85 clicks, 251 keys). The first phone survey (#325) found 2 impossible features and 15 swipes; the phone is now at 0 and 2, and #331 and #350 on main account for part of that drop.

Motivation and Context

The phone clicks survey (#325) found features that couldn't be done on a phone, and swipes caused by the layout rather than by long forms.

How

  • app-shell: Nav takes a top slot, and the phone drawer puts NamespaceSwitcher there (onPick closes the drawer). An Import icon link sits in the phone top bar.
  • settings-shell: a phone-only toggle that shows the current section opens and closes the sections list.
  • globals.css: phone-actions makes a form's button row sticky at the bottom on a phone and leaves room for the Ask button (data-ask-button). The setup wizard, the routine and extension editors and the settings save bar use it.
  • Tabs wrap below sm. Panel puts its actions under the title when both don't fit. CodeBlock keeps Copy beside the text. Dialog actions are sticky and titles wrap. StepLoop scrolls inside itself and is relative, so its sr-only labels no longer widen the page.
  • Sensors and Sources show a card list below md and the table above it.
  • ci/clicks/journeys.mjs: on a phone, journeys open the menu to reach the switcher, tap Import in the top bar and open settings sections from the toggle. Both baselines were regenerated from the run.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change; ! in the title)

Checklist:

  • The title is a Conventional Commit.
  • My code follows the code style of this project (make hooks checks it on commit).
  • I added or updated tests (phone-layout.test.tsx, sensors-ui.test.tsx; the phone journeys).
  • My change requires documentation updates, and I have updated docs/ accordingly (docs/frontend.md, ci/clicks/README.md).
  • Users need more than the title to understand it, so I wrote it under ## Unreleased in CHANGELOG.md.

Done questions (AGENTS.md)

  • Goal: every surveyed feature works on a phone, and swipes are down to 2. Merges on green CI.
  • Agents: n/a. This is layout only, and agents already reach all of it through the API and MCP.
  • Zero setup: no new prerequisite or step.
  • Fewest clicks and keystrokes: measured above, with nothing worse on either device.
  • Configurable: n/a, no new settings.
  • Light: CSS and markup only, with no new dependency.
  • Private and secure: n/a, no new data or surface.
  • Cost: n/a, no model calls.
  • User decides: n/a. No defaults changed, and the computer layout is unchanged apart from Save clearing the Ask button.
  • Upgrades: n/a, no stored data.
  • Honest: the numbers come from the survey run and the regenerated baselines.
  • Tests, docs and generated files updated (baselines come from the run, not from hand edits).
  • Open standards; dependencies keep Lens MIT (none added).
  • Result reported with evidence. Refine later: Import on /import sits under the Ask button (the Fewer clicks thread owns this). On a phone, reaching the timeout and API key fields means scrolling down the LLM form. Chat opens on the conversation list (4 taps on a phone against 1 on a computer). The pipelines table is tight at phone width.

🤖 Generated with Claude Code

https://claude.ai/code/session_0173hj1h6qEeBT7zMzCgedwo

claude added 3 commits October 10, 2026 23:12
@claude
fix(ui): make Lens usable on a phone
4b058e3 
The namespace switcher sits at the top of the phone's menu and Import is an
icon in the phone's top bar. Settings sections open as a list from the current
section's name, tabs wrap, the graph's filters sheet closes after a pick, Copy
sits beside webhook addresses instead of over them, and sensors and
connections show as cards. Form buttons stay pinned to the bottom of the
screen, clear of the floating Ask button, and long dialog titles wrap.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0173hj1h6qEeBT7zMzCgedwo
@claude
Merge remote-tracking branch 'origin/main' into claude/project-thread…
6966bc9 
…-90aiyy
@claude
docs: describe the phone layout
f8ca823 
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0173hj1h6qEeBT7zMzCgedwo
@adeelahmad adeelahmad self-assigned this Oct 10, 2026
@adeelahmad adeelahmad mentioned this pull request Oct 11, 2026
Merged
17 of 19 tasks
adeelahmad added a commit that referenced this pull request Oct 11, 2026
@adeelahmad @claude
docs: list the prompt-injection layers and the setup budget as built (#…
0587117 
…349)

"Stay private and safe" now covers flagging instruction-like text (patterns or the optional local classifier, #329,
#347), asking before the browser acts on what the assistant wrote (#333), breaking up links in chat-room answers
(#338), the archive as data over MCP (#343) and the audit log of what was caught (#344). "See what it costs" adds the
overall budget asked for in setup (#281). "In progress" drops what merged and adds #337, #341 and #346.


Claude-Session: https://claude.ai/code/session_01HDx7PPUauyjMn1LZs8JAsS

Co-authored-by: Adeel Ahmad <noreply@anthropic.com>
claude added 7 commits October 11, 2026 01:09
@claude
fix(ui): keep a settings section's Save clear of the Ask button on a …
6ad6206
8000 
…wide screen

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0173hj1h6qEeBT7zMzCgedwo
@claude
Merge main (the phone clicks survey, #325) into the phone layout
b0d89e7 
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0173hj1h6qEeBT7zMzCgedwo
@claude
ci(clicks): reach the phone's namespace switcher, Import and settings…
11270ff 
… sections

The phone journeys open the menu for the namespace switcher, tap Import in
the top bar, and open the settings sections from the current section's name.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0173hj1h6qEeBT7zMzCgedwo
@claude
ci(clicks): switch to a cloud model through the presets
ed189bc 
The same change as #350: Settings › LLM provider has cloud presets (#334), so
the journey picks OpenAI and pastes the key instead of typing the address and
model, which the form no longer has as plain text boxes.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0173hj1h6qEeBT7zMzCgedwo
@claude
fix(ui): keep a recording's step row from widening the page on a phone
825183b 
The pipeline steps above a recording didn't fit a phone's width, and their
screen-reader-only labels were positioned against the page, so the page grew
sideways and centred dialogs (Create podcast) half off the screen. The row now
scrolls inside its own box.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0173hj1h6qEeBT7zMzCgedwo
@claude
Merge main (the cloud presets journey, #350) into the phone layout
ed1e3c0 
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0173hj1h6qEeBT7zMzCgedwo
@claude
ci(clicks): phone baseline with the phone layout
eb220bd 
On a phone every journey can be done now, with 2 swipes (from 9) and 272 keys
(from 284); switching namespace takes 3 taps. The computer run is unchanged.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0173hj1h6qEeBT7zMzCgedwo
@adeelahmad
adeelahmad marked this pull request as ready for review October 11, 2026 02:27
claude added 4 commits October 14, 2026 09:53
@claude
Merge main (v0.8.1) into the phone layout
4169e51 
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0173hj1h6qEeBT7zMzCgedwo
@claude
ci(clicks): baselines with the phone layout on v0.8.1
5f73e8a 
Phone: every journey can be done, 2 swipes (from 9), 248 keys (from 260).
Computer unchanged.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0173hj1h6qEeBT7zMzCgedwo
@claude
Merge main (similar content, logs) into the phone layout
0d060cf 
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0173hj1h6qEeBT7zMzCgedwo
@claude
Merge main (watch a local folder) into the phone layout
a8bb6b0 
Both clicks baselines regenerated from a run on the merged tree.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0173hj1h6qEeBT7zMzCgedwo
@adeelahmad
adeelahmad merged commit c9331dc into main Oct 14, 2026
11 checks passed
@adeelahmad
adeelahmad deleted the claude/project-thread-90aiyy branch October 14, 2026 10:55
adeelahmad pushed a commit that referenced this pull request Oct 14, 2026
@claude
Merge origin/main: bring in #346, #360 and #361
fc127c8 
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014pKRz6HkdQ7hTqEbpnyhYo
adeelahmad pushed a commit that referenced this pull request Oct 14, 2026
@claude
ci(clicks): re-measure both baselines on main with #346
f8e6171 
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014pKRz6HkdQ7hTqEbpnyhYo
@adeelahmad adeelahmad mentioned this pull request Oct 15, 2026
Merged
16 of 22 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@adeelahmad adeelahmad

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@adeelahmad @claude
0