Add cursor-pointer class to button component #800

K-Mistele · 2025-10-23T20:41:42Z

What problem(s) was I solving?

This PR addresses two UX improvements:

Directory Validation and Creation: Users launching Claude Code sessions need to specify working directories. Previously, if a directory didn't exist, the session would fail without offering an option to create it. This created friction in the user experience, especially for new projects or non-standard paths.
Button Cursor Feedback: Buttons throughout the UI lacked a clear visual indicator that they are interactive, which can confuse users about which elements are clickable.

What user-facing changes did I ship?

Directory Management

Validate Directory Endpoint: New /validate-directory API endpoint to check if a directory exists before attempting session creation
Automatic Directory Creation: New createDirectoryIfNotExists flag on session creation endpoints allows automatic directory creation with user confirmation
Directory Creation Dialog: When launching a draft session with a non-existent working directory, users see a confirmation dialog asking if they want to create the directory
Additional Directories Support: Real-time validation in the Additional Directories dropdown with visual feedback (button text changes from "Add" to "Create" for non-existent paths)
Better Error Handling: Returns 422 status code with detailed directory information when validation fails, allowing clients to handle appropriately

Visual Improvements

Cursor Pointer on Buttons: All button variants now display cursor: pointer on hover, providing clear visual feedback that elements are interactive

How I implemented it

Backend (hld/)

Added ValidateDirectory handler: Checks directory existence, identifies if path is a directory, and returns creation feasibility
Added CreateDirectory handler: Creates directories with os.MkdirAll and proper tilde expansion
Enhanced CreateSession and LaunchDraftSession to accept and handle createDirectoryIfNotExists flag
Introduced DirectoryNotFoundError type for cleaner error handling and structured responses
Extended OpenAPI spec with new endpoints and response schemas

Frontend (humanlayer-wui/)

CreateDirectoryDialog Component: New modal component for confirming directory creation with path display
DraftLauncherForm: Updated to catch 422 responses and display directory creation dialog when needed
HTTP Client: Enhanced to parse and handle directory validation errors
Additional Directories Input: Added 300ms debounced validation as user types, with visual feedback showing directory status
Button Component: Added cursor-pointer class to base button styles for all variants

Generated Code

Regenerated TypeScript SDK with new validateDirectory and createDirectory methods
Updated Go server code from OpenAPI spec with new endpoint handlers
Updated Go and TypeScript types to include new request/response schemas

How to verify it

Manual Testing

Directory Validation

Launch a draft session and try to use a non-existent working directory path
Confirm the directory creation dialog appears with the correct path
Click "Create" and verify the session launches with the new directory
Try again with a path that already exists - no dialog should appear

Additional Directories Feature

Open the Settings dialog
In Additional Directories, start typing a path that doesn't exist
Verify the button changes from "Add" to "Create" after validation
Click "Create" and verify the directory is created in the file system
Add a path that already exists and verify the button stays as "Add"

Button Cursor Feedback

Hover over any button in the UI
Verify the cursor changes to a pointer (hand cursor)
This should work across all button variants: default, destructive, outline, secondary, ghost, and link

API Validation

Test /validate-directory endpoint with:
- Non-existent path: Should return exists: false, canCreate: true
- Existing directory: Should return exists: true, isDirectory: true
- Existing file: Should return exists: true, isDirectory: false
- Path with tilde (~): Should return expanded path
Test /directories endpoint creates directories correctly
Test session creation with createDirectoryIfNotExists flag

Description for the changelog

New Features

Add directory validation and creation support for Claude Code sessions via new /validate-directory and /directories endpoints
Allow automatic directory creation during session launch with createDirectoryIfNotExists flag
Add CreateDirectoryDialog component for user confirmation before directory creation
Add real-time directory validation in Additional Directories settings with visual feedback

Improvements

Add cursor-pointer class to button components for better visual feedback
Improve session error handling with structured DirectoryNotFoundError responses
Enhanced API to return 422 status with directory details when creation is needed

…unch Add directory validation and automatic creation support for Claude Code sessions: - New /validate-directory endpoint to check directory status before session creation - Add createDirectoryIfNotExists flag to session creation API - Implement directory creation logic in session manager with proper error handling - Return 422 status when directory doesn't exist and needs creation - Add DirectoryNotFoundError type for cleaner error handling This allows Claude Code to prompt users before creating new directories, improving the user experience when launching sessions in non-existent paths.

Allows draft sessions to be configured with any working directory path without immediate validation. Directory validation and creation now happens when launching the draft via POST /sessions/{id}/launch, not during draft creation. This improves UX by keeping sessions in draft state on validation failure. - Skip directory validation in LaunchSession when isDraft=true - Add createDirectoryIfNotExists parameter to LaunchDraftSession API - Validate/create directories before status transition in LaunchDraftSession - Return 422 response when directory doesn't exist and creation not requested - Update OpenAPI spec and regenerate server code 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

Implement client-side handling for directory creation when launching draft sessions: - Add CreateDirectoryDialog component with confirmation UI - Update DraftLauncherForm to catch 422 responses and show dialog - Update HTTP client to parse 422 directory_not_found errors - Regenerate SDK with createDirectoryIfNotExists parameter support - Add CREATE_DIRECTORY_DIALOG hotkey scope When launching a draft session with a non-existent working directory, the daemon returns 422 with directory details. The UI now shows a confirmation dialog and retries the launch with createDirectoryIfNotExists=true when confirmed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

…tories Add real-time directory validation and automatic creation capabilities to the Additional Directories dropdown, providing a smoother UX when adding new paths. Backend changes: - Add POST /directories endpoint to create directories via daemon - Add CreateDirectory handler with tilde expansion and os.MkdirAll - Regenerate Go and TypeScript SDKs from OpenAPI spec - Add validateDirectory and createDirectory methods to SDK client Frontend changes: - Add debounced validation (300ms) as user types directory paths - Track directory existence state and show visual feedback - Dynamic button text: "Add" for existing dirs, "Create" for non-existent - Use destructive button variant (red) when creating directories - Improved toast messages distinguishing create vs add operations - Fix FuzzySearchInput bug: now correctly filters out files, showing only directories All filesystem operations go through daemon endpoints (no Tauri fs calls), ensuring consistent behavior and proper permission handling.

Apply cursor-pointer to all button variants through the base class, providing clear visual feedback that buttons are interactive elements.

ellipsis-dev

Important

Looks good to me! 👍

Reviewed everything up to 5a79afd in 2 minutes and 11 seconds. Click for details.

Reviewed 2529 lines of code in 26 files
Skipped 0 files when reviewing.
Skipped posting 7 draft comments. View those below.
Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. humanlayer-wui/src/components/ui/button.tsx:8

Draft comment:
Good addition of the 'cursor-pointer' class in the button variant definition; this improves interactivity indication. Ensure accessibility (e.g., focus rings) is maintained.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

2. humanlayer-wui/src/hooks/hotkeys/scopes.ts:16

Draft comment:
The new hotkey scope 'CREATE_DIRECTORY_DIALOG' is added consistently with other scopes. This enhances organized keybinding management.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

3. humanlayer-wui/src/components/internal/SessionDetail/components/CreateDirectoryDialog.tsx:60

Draft comment:
The CreateDirectoryDialog component is well implemented with clear instructions and effective hotkey usage for confirm/cancel actions, which improves user experience.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

4. humanlayer-wui/src/components/internal/SessionDetail/components/AdditionalDirectoriesDropdown.tsx:247

Draft comment:
The debounced validation of directory existence is implemented correctly. As an enhancement, consider memoizing the validateDirectory function using useCallback to avoid unnecessary re-creations.
Reason this comment was not posted:
Confidence changes required: 33% <= threshold 50% None

5. humanlayer-wui/src/components/internal/SessionDetail/components/DraftLauncherForm.tsx:441

Draft comment:
Integration of the 'createDirectoryIfNotExists' flag in launchDraftSession is handled properly and the error for a 422 'directory_not_found' response is robustly managed. Consider adding stricter type checks or narrowing for the error object in the catch block.
Reason this comment was not posted:
Confidence changes required: 33% <= threshold 50% None

6. humanlayer-wui/src/lib/daemon/http-client.ts:327

Draft comment:
The error handling in the launchDraftSession method is robust, correctly parsing a 422 error response and re-throwing a structured error for UI handling. Adding more detailed logging when JSON parsing fails could further aid debugging.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

7. hld/sdk/typescript/src/generated/apis/FilesApi.ts:97

Draft comment:
The JSDoc for validateDirectoryRaw refers to a parameter named validateDirectoryRequest with type {ValidateDirectoryRequest}, but the actual function parameter is requestParameters of type ValidateDirectoryOperationRequest. Please update the documentation to match the code.
Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 0% vs. threshold = 50% This is a generated file (see header comments). The mismatch appears to be systematic across all methods. While technically incorrect, fixing it in one place would be inconsistent with the rest of the file. Generated files should generally not be manually edited as changes will be lost on next generation. The inconsistency likely comes from the OpenAPI generator template. The comment is technically correct in pointing out a real documentation mismatch. Manual fixes to generated files could help developers in the short term. The systematic nature of the issue and the fact this is a generated file means local fixes would be lost and inconsistent. The proper fix would be to update the OpenAPI generator template. Delete the comment since this is a generated file and the issue should be fixed in the generator template rather than with manual edits.

Workflow ID: wflow_ajNhDApkXCGLoyLK

^{You can customize}^{by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

claude and others added 8 commits October 23, 2025 15:01

fix(wui): remove unused isValidating state variable

84b6f47

chore(hld): regenerate server.gen.go after rebase

152bccd

chore(wui): update bun.lock after SDK rebuild

960b4c4

Add cursor-pointer class to button component

5a79afd

Apply cursor-pointer to all button variants through the base class, providing clear visual feedback that buttons are interactive elements.

ellipsis-dev bot reviewed Oct 23, 2025

View reviewed changes

K-Mistele closed this Oct 23, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add cursor-pointer class to button component #800

Add cursor-pointer class to button component #800

Uh oh!

K-Mistele commented Oct 23, 2025 •

edited

Loading

Uh oh!

ellipsis-dev bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Add cursor-pointer class to button component #800

Add cursor-pointer class to button component #800

Uh oh!

Conversation

K-Mistele commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What problem(s) was I solving?

What user-facing changes did I ship?

Directory Management

Visual Improvements

How I implemented it

Backend (hld/)

Frontend (humanlayer-wui/)

Generated Code

How to verify it

Manual Testing

Directory Validation

Additional Directories Feature

Button Cursor Feedback

API Validation

Description for the changelog

Uh oh!

ellipsis-dev bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

K-Mistele commented Oct 23, 2025 •

edited

Loading