fix(frontend): disable view toggle when no automations exist

[hieptl]

• A human has tested these changes.

---

Why

Summary

On the /automations page, the grid/list view-mode toggle next to the search input remains clickable even when the user has not created any automations. Toggling between grid and list has no visible effect (the page only renders <EmptyState />), so the affordance is misleading and inaccessible — assistive tech still announces it as an active control.

Steps to reproduce

1. Clone agent-canvas and run npm run dev.
2. Open http://localhost:3001/automations with an account / backend that has zero automations.
3. Click the view-toggle button beside the search input.

Current behaviour

The toggle opens its menu and onChange fires. The selected view mode is persisted to localStorage, but the page still shows <EmptyState />. The control reports as enabled in the accessibility tree.

Expected behaviour

When data.automations.length === 0 after a successful load, the toggle is disabled:

• disabled and aria-disabled are set on the trigger button.
• Clicking it does not open the menu and does not fire onChange.
• Visual state communicates the disabled affordance (reduced opacity, cursor-not-allowed).
• Once the user creates an automation, the toggle becomes enabled again.

Acceptance criteria

• Empty state: toggle is disabled and unresponsive to clicks.
• Non-empty state: toggle behaves as before (opens menu, switches views, persists to localStorage).
• Loading state: toggle is not flashed as disabled before the response arrives.
• Tests cover both the component-level disabled behaviour and the page-level wiring against an empty service response.

Notes

The empty condition already gates <EmptyState /> at src/routes/automations-list.tsx:211. The fix should hoist that condition into a single variable and reuse it for the toggle so the two stay in lockstep.

Summary

• <AutomationViewToggle /> now accepts an optional disabled prop that forwards disabled + aria-disabled to the trigger button and short-circuits the click handler so the menu cannot open.
• automations-list.tsx derives hasNoAutomations = !isLoading && !isError && data?.automations.length === 0 once and reuses it for both the toggle's disabled prop and the existing <EmptyState /> branch, so the two affordances can never disagree.
• The toggle is not disabled during the initial skeleton load — only after the response confirms the list is empty — to avoid a brief flash of a disabled control on first paint.

Why

On /automations with zero automations, the user saw <EmptyState /> but the view-toggle button next to the search input was still active. Clicking it opened a grid/list menu that had no effect on the page and was announced as an active control by assistive tech. The toggle should be inactive whenever there is nothing to view.

Changes

• src/components/features/automations/automation-view-toggle.tsx — add disabled?: boolean prop; forward to the <button>, set aria-disabled, no-op the onClick, and add disabled-state classes via cn(...).
• src/routes/automations-list.tsx — compute hasNoAutomations once, pass it to <AutomationViewToggle />, and reuse it for <EmptyState />.
• __tests__/components/automations/automation-view-toggle.test.tsx — new test: clicking the trigger while disabled does not open the menu and does not fire onChange.
• __tests__/routes/automations-list.test.tsx — new test: with AutomationService.getAutomations resolving to an empty list, the toggle is disabled and clicking it does not reveal the list menu item.

Issue Number

Resolves #748

How to Test

1. Clone the agent-server-gui repository.
2. Start the development server:

npm run dev

3. Open the automations page at http://localhost:3001/automations.

Video/Screenshots

app-1914.mov

Type

• Bug fix
• Feature
• Refactor
• Breaking change
• Docs / chore

Notes

• The empty condition deliberately excludes the loading and error branches. Using (data?.automations.length ?? 0) === 0 would disable the toggle during the initial skeleton render, which is jarring. The chosen condition matches the existing <EmptyState /> guard.
• The toggle component remains presentational — it does not learn about useAutomations; the page owns the wiring.
• No styling assertions in tests, per the project's testing rules. Tests cover behaviour only (toBeDisabled, menu not rendered, onChange not called).

---

🐳 Docker images for this PR

• GHCR package: https://github.com/OpenHands/agent-canvas/pkgs/container/agent-canvas

Component	Value
Image	ghcr.io/openhands/agent-canvas
Architectures	amd64, arm64
Agent Server	ghcr.io/openhands/agent-server:1.23.0-python
Automation	openhands-automation==1.0.0a3
Commit	57151a0b89decd9634b28d69e6d7da2c73eda61a

Pull (multi-arch manifest)

# Multi-arch manifest — Docker automatically pulls the correct architecture
docker pull ghcr.io/openhands/agent-canvas:sha-57151a0

Run

docker run -it --rm \
  -p 8000:8000 \
  ghcr.io/openhands/agent-canvas:sha-57151a0

All tags pushed for this build

ghcr.io/openhands/agent-canvas:sha-57151a0-amd64
ghcr.io/openhands/agent-canvas:hieptl-app-1914-amd64
ghcr.io/openhands/agent-canvas:pr-749-amd64
ghcr.io/openhands/agent-canvas:sha-57151a0-arm64
ghcr.io/openhands/agent-canvas:hieptl-app-1914-arm64
ghcr.io/openhands/agent-canvas:pr-749-arm64
ghcr.io/openhands/agent-canvas:sha-57151a0
ghcr.io/openhands/agent-canvas:hieptl-app-1914
ghcr.io/openhands/agent-canvas:pr-749

About Multi-Architecture Support

• Each tag (e.g., sha-57151a0) is a multi-arch manifest supporting both amd64 and arm64
• Docker automatically pulls the correct architecture for your platform
• Individual architecture tags (e.g., sha-57151a0-amd64) are also available if needed

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
agent-canvas	Ready	Preview, Comment	May 23, 2026 7:37pm

[github-actions]

📸 Snapshot Test Report

Warning

Snapshot comparison step crashed (timeout, OOM, or runner error) — diff results below may be incomplete or absent.
Check the CI logs for the full error output (look for the "Run snapshot comparison" step).

✅ 1 snapshot changed — acknowledged via the update-snapshots label. New baselines will be uploaded when this PR merges.

Category	Count
🔴 Changed	1
🆕 New	0
✅ Unchanged	72
Total	73

🔴 Changed snapshots (1)

automations

automations-no-automations

Expected (main)	Actual (PR)	Diff

✅ Unchanged snapshots (72)

archived-conversation

• conversation-panel-with-archived-badges
• conversation-view-archived
• conversation-view-sandbox-error

automations

• automations-delete-modal
• automations-list-active-inactive
• automations-search-no-results

backends-extended

• backend-add-blank-disabled
• backend-add-cloud-advanced-open
• backend-add-cloud-no-key-disabled
• backend-add-cloud-with-key-enabled
• backend-add-form-partially-filled
• backend-add-invalid-url-disabled
• backend-add-local-ready
• backend-add-name-only-disabled
• backend-add-two-column-layout
• backend-add-whitespace-host-disabled
• backend-after-switch
• backend-cancel-nothing-saved
• backend-dropdown-two-backends
• backend-edit-prefilled
• backend-manage-after-removal
• backend-manage-two-listed
• backend-remove-cancelled
• backend-remove-confirmation
• backend-switch-overlay

backends

• backend-add-modal
• backend-manage-modal
• backend-selector-open

changes-tab

• changes-deleted-file
• changes-diff-viewer
• changes-empty

collapsible-thinking

• reasoning-content-collapsed
• reasoning-content-expanded
• think-action-collapsed
• think-action-expanded

mcp-page

• mcp-custom-server-1-editor-open
• mcp-custom-server-2-url-filled
• mcp-custom-server-3-all-filled
• mcp-custom-server-4-installed
• mcp-custom-server-editor
• mcp-empty-installed
• mcp-search-filtered
• mcp-slack-install-1-marketplace
• mcp-slack-install-2-modal
• mcp-slack-install-3-filled
• mcp-slack-install-4-installed

onboarding

• onboarding-step-0-choose-agent
• onboarding-step-1-check-backend
• onboarding-step-2-setup-llm
• onboarding-step-3-say-hello

projects-workspace-browser

• projects-workspace-browser

settings-page

• add-backend-modal
• analytics-consent-modal
• home-screen
• settings-app-page
• settings-page

settings-secrets

• secrets-add-form-filled
• secrets-add-form
• secrets-after-save
• secrets-delete-confirm
• secrets-list

settings-verification

• condenser-settings
• verification-settings-off
• verification-settings-on

sidebar

• sidebar-collapsed
• sidebar-conversation-panel
• sidebar-filter-menu

skills-page

• skills-empty
• skills-loaded
• skills-no-match
• skills-search-filtered
• skills-type-filter

---

Generated by the Snapshot Tests workflow. This comment was created by an AI agent (OpenHands) on behalf of the repo maintainers.

[hieptl]

PR Review by OpenHands / pr-review (pull_request) is failing. I will merge this pull request for now. If any issues are found, I will address them in follow-up pull requests. Thank you! 🙏