feat(web): add request workspace tabs component (#105)

* feat(web): add request workspace tabs component
Introduce tabbed request workspace UI with Params, Headers, and Body tabs
for the HTTP editor.

Author: andrewmelchor

bun.lock

@@ -18,6 +18,11 @@ import {
 import type { WorkspaceRequest } from '../../sdk';
 import { type FileType, getFileType } from '../../utils/fileType';
 import { ExecutionDetail } from '../execution/ExecutionDetail';
+import {
+  DEFAULT_REQUEST_WORKSPACE_TAB,
+  type RequestWorkspaceTabId,
+  RequestWorkspaceTabs
+} from '../request-workspace';
 import { ScriptPanel } from '../script';
 import { CodeEditor } from './CodeEditor';
 import { HttpEditor } from './HttpEditor';
@@ -46,13 +51,23 @@ export const EditorWithExecution: Component<EditorWithExecutionProps> = (props)
   };
 
   const [selectedRequestIndex, setSelectedRequestIndex] = createSignal(0);
+  const [activeRequestTab, setActiveRequestTab] = createSignal<RequestWorkspaceTabId>(
+    DEFAULT_REQUEST_WORKSPACE_TAB
+  );
   const [resultsPanelCollapsed, setResultsPanelCollapsed] = createSignal(loadCollapsedState());
   const requests = createMemo<WorkspaceRequest[]>(() => {
     if (fileType() !== 'http') {
       return [];
     }
     return workspace.requestsByPath()[props.path] ?? [];
   });
+  const selectedRequest = createMemo<WorkspaceRequest | undefined>(() => {
+    const allRequests = requests();
+    if (allRequests.length === 0) {
+      return undefined;
+    }
+    return allRequests[selectedRequestIndex()];
+  });
 
   const saveCollapsedState = (collapsed: boolean) => {
     if (typeof localStorage !== 'undefined') {
@@ -74,6 +89,7 @@ export const EditorWithExecution: Component<EditorWithExecutionProps> = (props)
         // Clear previous execution results when switching files
         observer.clearExecutions();
         setSelectedRequestIndex(0);
+        setActiveRequestTab(DEFAULT_REQUEST_WORKSPACE_TAB);
 
         if (!path) {
           observer.clearScriptOutput();
@@ -184,7 +200,19 @@ export const EditorWithExecution: Component<EditorWithExecutionProps> = (props)
 
           <div class="flex-1 min-h-0">
             <ResizableSplitPane
-              left={<HttpEditor path={props.path} onExecute={handleHttpExecute} />}
+              left={
+                <div class="flex h-full min-h-0 flex-col">
+                  <RequestWorkspaceTabs
+                    activeTab={activeRequestTab()}
+                    onTabChange={setActiveRequestTab}
+                    selectedRequest={selectedRequest()}
+                    requestCount={requests().length}
+                  />
+                  <div class="flex-1 min-h-0">
+                    <HttpEditor path={props.path} onExecute={handleHttpExecute} />
+                  </div>
+                </div>
+              }
               right={
                 <div class="h-full bg-treq-bg dark:bg-treq-dark-bg overflow-hidden">
                   <Show

packages/web/src/components/editor/EditorWithExecution.tsx

@@ -0,0 +1,7 @@
+export {
+  DEFAULT_REQUEST_WORKSPACE_TAB,
+  isRequestWorkspaceTabId,
+  REQUEST_WORKSPACE_TABS,
+  type RequestWorkspaceTabId
+} from './model';
+export { RequestWorkspaceTabs } from './request-workspace-tabs';

packages/web/src/components/request-workspace/index.ts

@@ -0,0 +1,25 @@
+import { describe, expect, test } from 'bun:test';
+import {
+  DEFAULT_REQUEST_WORKSPACE_TAB,
+  isRequestWorkspaceTabId,
+  REQUEST_WORKSPACE_TABS
+} from './model';
+
+describe('request workspace tab model', () => {
+  test('exports the expected tab order', () => {
+    expect(REQUEST_WORKSPACE_TABS).toEqual(['params', 'headers', 'body']);
+  });
+
+  test('uses params as the default tab', () => {
+    expect(DEFAULT_REQUEST_WORKSPACE_TAB).toBe('params');
+  });
+
+  test('validates request workspace tab ids', () => {
+    expect(isRequestWorkspaceTabId('params')).toBe(true);
+    expect(isRequestWorkspaceTabId('headers')).toBe(true);
+    expect(isRequestWorkspaceTabId('body')).toBe(true);
+    expect(isRequestWorkspaceTabId('response')).toBe(false);
+    expect(isRequestWorkspaceTabId('')).toBe(false);
+    expect(isRequestWorkspaceTabId('Params')).toBe(false);
+  });
+});

packages/web/src/components/request-workspace/model.test.ts

@@ -0,0 +1,11 @@
+export const REQUEST_WORKSPACE_TABS = ['params', 'headers', 'body'] as const;
+
+export type RequestWorkspaceTabId = (typeof REQUEST_WORKSPACE_TABS)[number];
+
+export const DEFAULT_REQUEST_WORKSPACE_TAB: RequestWorkspaceTabId = 'params';
+
+const requestWorkspaceTabSet = new Set<RequestWorkspaceTabId>(REQUEST_WORKSPACE_TABS);
+
+export function isRequestWorkspaceTabId(value: string): value is RequestWorkspaceTabId {
+  return requestWorkspaceTabSet.has(value as RequestWorkspaceTabId);
+}

packages/web/src/components/request-workspace/model.ts

@@ -0,0 +1,76 @@
+import { For, Match, Show, Switch } from 'solid-js';
+import type { WorkspaceRequest } from '../../sdk';
+import { REQUEST_WORKSPACE_TABS, type RequestWorkspaceTabId } from './model';
+
+interface RequestWorkspaceTabsProps {
+  activeTab: RequestWorkspaceTabId;
+  onTabChange: (tab: RequestWorkspaceTabId) => void;
+  selectedRequest?: WorkspaceRequest;
+  requestCount: number;
+}
+
+const TAB_LABELS: Record<RequestWorkspaceTabId, string> = {
+  params: 'Params',
+  headers: 'Headers',
+  body: 'Body'
+};
+
+export function RequestWorkspaceTabs(props: RequestWorkspaceTabsProps) {
+  return (
+    <section
+      class="border-b border-treq-border-light dark:border-treq-dark-border-light bg-base-100/80"
+      aria-label="Request workspace details"
+    >
+      <div class="flex items-center justify-between gap-3 px-3 pt-2">
+        <p class="text-xs font-mono uppercase tracking-[0.08em] text-base-content/60">
+          Request Workspace
+        </p>
+        <span class="badge badge-sm border-base-300 bg-base-200/70 font-mono text-[11px]">
+          {props.requestCount} req
+        </span>
+      </div>
+
+      <div role="tablist" class="tabs tabs-border px-3 pt-1">
+        <For each={REQUEST_WORKSPACE_TABS}>
+          {(tab) => (
+            <button
+              type="button"
+              role="tab"
+              class="tab tab-sm"
+              aria-selected={props.activeTab === tab}
+              classList={{ 'tab-active': props.activeTab === tab }}
+              onClick={() => props.onTabChange(tab)}
+            >
+              {TAB_LABELS[tab]}
+            </button>
+          )}
+        </For>
+      </div>
+
+      <div class="px-3 pb-3 pt-2">
+        <div class="rounded-box border border-base-300 bg-base-100/70 px-3 py-2 text-sm text-base-content/75">
+          <Show
+            when={props.selectedRequest}
+            fallback={<p>Select a request to view {TAB_LABELS[props.activeTab].toLowerCase()}.</p>}
+          >
+            {(request) => (
+              <Switch>
+                <Match when={props.activeTab === 'params'}>
+                  <p>Params editor wiring is next for {request().method.toUpperCase()} requests.</p>
+                </Match>
+                <Match when={props.activeTab === 'headers'}>
+                  <p>
+                    Headers editor wiring is next for {request().method.toUpperCase()} requests.
+                  </p>
+                </Match>
+                <Match when={props.activeTab === 'body'}>
+                  <p>Body editor wiring is next for {request().method.toUpperCase()} requests.</p>
+                </Match>
+              </Switch>
+            )}
+          </Show>
+        </div>
+      </div>
+    </section>
+  );
+}