feat(web): add request workspace tabs component

[andrewmelchor]

Summary

Adds a tabbed request workspace interface to the web HTTP editor, allowing users to navigate between Params, Headers, and Body sections for each request.

[greptile-apps]

Greptile Summary

This PR introduces a scaffolded RequestWorkspaceTabs component that adds a tabbed interface (Params / Headers / Body) to the HTTP editor panel, along with the supporting model, type guard, unit tests, and integration into EditorWithExecution. The tab content panels are intentional placeholders ("wiring is next") — the structure and state management are the deliverable here.

Key changes:

• New request-workspace module with a typed RequestWorkspaceTabId union, DEFAULT_REQUEST_WORKSPACE_TAB constant, and isRequestWorkspaceTabId type guard
• RequestWorkspaceTabs SolidJS component renders the tab bar and a reactive content area keyed to the active tab and selected request
• EditorWithExecution gains activeRequestTab and selectedRequest reactive signals; activeRequestTab is correctly reset on file-path changes
• Unit tests cover all guard cases (valid IDs, case sensitivity, invalid strings)
• Minor issues: role="tab" buttons are missing the required aria-selected attribute; the selectedRequest memo lacks an out-of-bounds index guard; the type guard uses an unsafe cast (value as RequestWorkspaceTabId) that can be replaced with a safer includes-based check

Confidence Score: 4/5

• Safe to merge — all identified issues are style/accessibility suggestions with no runtime impact.
• The changes are well-scoped (new module + minimal integration), backed by unit tests, and all three flagged issues are non-critical style improvements. No logic errors or breaking changes were found.
• Pay light attention to request-workspace-tabs.tsx for the missing aria-selected attribute and EditorWithExecution.tsx for the selectedRequest bounds guard.

Important Files Changed

Filename	Overview
packages/web/src/components/request-workspace/request-workspace-tabs.tsx	New SolidJS component rendering the tab bar (Params / Headers / Body) and a placeholder content panel; missing aria-selected on role="tab" buttons reduces accessibility.
packages/web/src/components/request-workspace/model.ts	Defines the tab ID union type, constants, and type guard; the guard uses an unsafe cast that can be replaced with a safer includes-based check.
packages/web/src/components/editor/EditorWithExecution.tsx	Wires activeRequestTab and selectedRequest signals into the new RequestWorkspaceTabs; the selectedRequest memo is missing an out-of-bounds index guard that could cause transient undefined during request-list shrinks.
packages/web/src/components/request-workspace/model.test.ts	Unit tests covering tab order, default tab, and all valid/invalid type guard inputs — comprehensive coverage for the model.
packages/web/src/components/request-workspace/index.ts	Clean barrel export — no issues.
bun.lock	Version bumps across several workspace packages; generated lockfile change, no concerns.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User opens .http file] --> B[EditorWithExecution mounts]
    B --> C[createSignal: activeRequestTab = 'params']
    B --> D[createMemo: selectedRequest]
    B --> E[createMemo: requests]

    E --> D
    C --> F[RequestWorkspaceTabs rendered]
    D --> F

    F --> G{selectedRequest?}
    G -- undefined --> H[Fallback: 'Select a request to view ...']
    G -- present --> I{activeTab}

    I -- params --> J[Params placeholder panel]
    I -- headers --> K[Headers placeholder panel]
    I -- body --> L[Body placeholder panel]

    F --> M[User clicks tab button]
    M --> N[onTabChange fires]
    N --> O[setActiveRequestTab updates signal]
    O --> F

    P[User switches file path] --> Q[setActiveRequestTab reset to 'params']
    Q --> F

Loading

_{Last reviewed commit: 9873427}

[greptile-apps]

_{6 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

selectedRequest memo missing out-of-bounds guard

The memo guards against an empty list but not against a stale index. If the requests() array shrinks (e.g., after a file save), there is a brief window before the index-clamping effect fires where selectedRequestIndex() can exceed allRequests.length - 1. In that window allRequests[selectedRequestIndex()] returns undefined from a non-empty array, which may cause a transient "Select a request" flash in the tab panel. An explicit bounds check makes the invariant clearer and avoids the timing dependency on the clamping effect.

Suggested change

	const selectedRequest = createMemo<WorkspaceRequest | undefined>(() => {
	const allRequests = requests();
	if (allRequests.length === 0) {
	return undefined;
	}
	return allRequests[selectedRequestIndex()];
	});
	const selectedRequest = createMemo<WorkspaceRequest | undefined>(() => {
	const allRequests = requests();
	const index = selectedRequestIndex();
	if (index >= allRequests.length) {
	return undefined;
	}
	return allRequests[index];
	});