Allow manual URL override in dev server preview (Vibe Kanban) (#1989)

* The implementation is complete and tested. Here's a summary of the changes made:

I've implemented an editable URL bar in the Preview Controls that allows users to override the auto-detected dev server URL on a per-workspace basis.

| File | Changes |
|------|---------|
| `crates/db/src/models/scratch.rs` | Added `PreviewUrlOverrideData` struct and `PreviewUrlOverride` variant to `ScratchPayload` enum |
| `crates/server/src/bin/generate_types.rs` | Registered `PreviewUrlOverrideData::decl()` for TypeScript type generation |
| `shared/types.ts` | Auto-generated with new `PreviewUrlOverrideData` type and updated `ScratchPayload` union |
| `frontend/src/hooks/usePreviewUrlOverride.ts` | **New file** - Custom hook for managing URL override persistence via scratch system |
| `frontend/src/components/ui-new/containers/PreviewControlsContainer.tsx` | Added URL override hook integration, merged auto-detected with override URL |
| `frontend/src/components/ui-new/views/PreviewControls.tsx` | Replaced static `<span>` with editable `<input>`, added clear override button (X icon) |

- **Editable URL bar**: Users can type a custom URL to override the auto-detected one
- **Per-workspace persistence**: Override URL saved in the scratch system using workspace ID
- **Debounced saves**: Changes are debounced (300ms) before saving to avoid excessive API calls
- **Clear override button**: X button appears when override is active, allowing revert to auto-detected URL
- **Visual distinction**: Override URLs show in normal text color, auto-detected in dim text

* Cleanup script changes for workspace 3f3c315d-5cc2-43b0-9043-117c857f38b4

* The URL input fix is complete. Here's a summary of what was implemented:

**Feature: Editable URL bar with per-workspace persistence**

1. **New scratch type** - Added `PreviewUrlOverride` to the Rust scratch system for persisting URL overrides per workspace

2. **New hook** - Created `usePreviewUrlOverride.ts` that wraps the scratch system with debounced saves (300ms delay)

3. **Container integration** - Updated `PreviewControlsContainer.tsx` to use the override URL when set, falling back to auto-detected URL

4. **View updates** - Updated `PreviewControls.tsx` with:
   - Editable input field instead of read-only display
   - Clear button (X icon) to revert to auto-detected URL
   - Local state management to prevent WebSocket updates from disrupting typing

**Bug fix for typing issue:**
- Added local state (`localValue`) and ref (`inputRef`) to track input value locally
- The effect only syncs from server when input is not focused, preventing cursor jumping and character loss during typing

* ESLint and Clippy both pass now. The fix moved the state management from the presentational view component (`PreviewControls.tsx`) to the container component (`PreviewControlsContainer.tsx`), which aligns with the codebase's architecture pattern of keeping views stateless.

* I can see projects now. Let me click on the first project to access a workspace where I can test the URL override feature:

* TypeScript check passes now. The fix was changing `RefObject<HTMLInputElement | null>` to `RefObject<HTMLInputElement>` in the props interface - the `null` is already implied in how React refs work.
This commit is contained in:
Louis Knight-Webb
2026-01-12 23:36:15 +00:00
committed by GitHub
parent d9fa2d1fa5
commit c7cf72a57f
7 changed files with 193 additions and 18 deletions

View File

@@ -64,9 +64,11 @@ export type DraftWorkspaceData = { message: string, project_id: string | null, r
export type DraftWorkspaceRepo = { repo_id: string, target_branch: string, };
export type ScratchPayload = { "type": "DRAFT_TASK", "data": string } | { "type": "DRAFT_FOLLOW_UP", "data": DraftFollowUpData } | { "type": "DRAFT_WORKSPACE", "data": DraftWorkspaceData };
export type PreviewUrlOverrideData = { url: string, };
export enum ScratchType { DRAFT_TASK = "DRAFT_TASK", DRAFT_FOLLOW_UP = "DRAFT_FOLLOW_UP", DRAFT_WORKSPACE = "DRAFT_WORKSPACE" }
export type ScratchPayload = { "type": "DRAFT_TASK", "data": string } | { "type": "DRAFT_FOLLOW_UP", "data": DraftFollowUpData } | { "type": "DRAFT_WORKSPACE", "data": DraftWorkspaceData } | { "type": "PREVIEW_URL_OVERRIDE", "data": PreviewUrlOverrideData };
export enum ScratchType { DRAFT_TASK = "DRAFT_TASK", DRAFT_FOLLOW_UP = "DRAFT_FOLLOW_UP", DRAFT_WORKSPACE = "DRAFT_WORKSPACE", PREVIEW_URL_OVERRIDE = "PREVIEW_URL_OVERRIDE" }
export type Scratch = { id: string, payload: ScratchPayload, created_at: string, updated_at: string, };