feat: Add DNS timings and resolution overrides (#360)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

src-web/components/DnsOverridesEditor.tsx

@@ -0,0 +1,181 @@
+import type { DnsOverride, Workspace } from '@yaakapp-internal/models';
+import { patchModel } from '@yaakapp-internal/models';
+import { useCallback, useId, useMemo } from 'react';
+import { Button } from './core/Button';
+import { Checkbox } from './core/Checkbox';
+import { IconButton } from './core/IconButton';
+import { PlainInput } from './core/PlainInput';
+import { HStack, VStack } from './core/Stacks';
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from './core/Table';
+
+interface Props {
+  workspace: Workspace;
+}
+
+interface DnsOverrideWithId extends DnsOverride {
+  _id: string;
+}
+
+export function DnsOverridesEditor({ workspace }: Props) {
+  const reactId = useId();
+
+  // Ensure each override has an internal ID for React keys
+  const overridesWithIds = useMemo<DnsOverrideWithId[]>(() => {
+    return workspace.settingDnsOverrides.map((override, index) => ({
+      ...override,
+      _id: `${reactId}-${index}`,
+    }));
+  }, [workspace.settingDnsOverrides, reactId]);
+
+  const handleChange = useCallback(
+    (overrides: DnsOverride[]) => {
+      patchModel(workspace, { settingDnsOverrides: overrides });
+    },
+    [workspace],
+  );
+
+  const handleAdd = useCallback(() => {
+    const newOverride: DnsOverride = {
+      hostname: '',
+      ipv4: [''],
+      ipv6: [],
+      enabled: true,
+    };
+    handleChange([...workspace.settingDnsOverrides, newOverride]);
+  }, [workspace.settingDnsOverrides, handleChange]);
+
+  const handleUpdate = useCallback(
+    (index: number, update: Partial<DnsOverride>) => {
+      const updated = workspace.settingDnsOverrides.map((o, i) =>
+        i === index ? { ...o, ...update } : o,
+      );
+      handleChange(updated);
+    },
+    [workspace.settingDnsOverrides, handleChange],
+  );
+
+  const handleDelete = useCallback(
+    (index: number) => {
+      const updated = workspace.settingDnsOverrides.filter((_, i) => i !== index);
+      handleChange(updated);
+    },
+    [workspace.settingDnsOverrides, handleChange],
+  );
+
+  return (
+    <VStack space={3} className="pb-3">
+      <div className="text-text-subtle text-sm">
+        Override DNS resolution for specific hostnames. This works like{' '}
+        <code className="text-text-subtlest bg-surface-highlight px-1 rounded">/etc/hosts</code>{' '}
+        but only for requests made from this workspace.
+      </div>
+
+      {overridesWithIds.length > 0 && (
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeaderCell className="w-8" />
+              <TableHeaderCell>Hostname</TableHeaderCell>
+              <TableHeaderCell>IPv4 Address</TableHeaderCell>
+              <TableHeaderCell>IPv6 Address</TableHeaderCell>
+              <TableHeaderCell className="w-10" />
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {overridesWithIds.map((override, index) => (
+              <DnsOverrideRow
+                key={override._id}
+                override={override}
+                onUpdate={(update) => handleUpdate(index, update)}
+                onDelete={() => handleDelete(index)}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      )}
+
+      <HStack>
+        <Button size="xs" color="secondary" variant="border" onClick={handleAdd}>
+          Add DNS Override
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}
+
+interface DnsOverrideRowProps {
+  override: DnsOverride;
+  onUpdate: (update: Partial<DnsOverride>) => void;
+  onDelete: () => void;
+}
+
+function DnsOverrideRow({ override, onUpdate, onDelete }: DnsOverrideRowProps) {
+  const ipv4Value = override.ipv4.join(', ');
+  const ipv6Value = override.ipv6.join(', ');
+
+  return (
+    <TableRow>
+      <TableCell>
+        <Checkbox
+          hideLabel
+          title={override.enabled ? 'Disable override' : 'Enable override'}
+          checked={override.enabled ?? true}
+          onChange={(enabled) => onUpdate({ enabled })}
+        />
+      </TableCell>
+      <TableCell>
+        <PlainInput
+          size="sm"
+          hideLabel
+          label="Hostname"
+          placeholder="api.example.com"
+          defaultValue={override.hostname}
+          onChange={(hostname) => onUpdate({ hostname })}
+        />
+      </TableCell>
+      <TableCell>
+        <PlainInput
+          size="sm"
+          hideLabel
+          label="IPv4 addresses"
+          placeholder="127.0.0.1"
+          defaultValue={ipv4Value}
+          onChange={(value) =>
+            onUpdate({
+              ipv4: value
+                .split(',')
+                .map((s) => s.trim())
+                .filter(Boolean),
+            })
+          }
+        />
+      </TableCell>
+      <TableCell>
+        <PlainInput
+          size="sm"
+          hideLabel
+          label="IPv6 addresses"
+          placeholder="::1"
+          defaultValue={ipv6Value}
+          onChange={(value) =>
+            onUpdate({
+              ipv6: value
+                .split(',')
+                .map((s) => s.trim())
+                .filter(Boolean),
+            })
+          }
+        />
+      </TableCell>
+      <TableCell>
+        <IconButton
+          size="xs"
+          iconSize="sm"
+          icon="trash"
+          title="Delete override"
+          onClick={onDelete}
+        />
+      </TableCell>
+    </TableRow>
+  );
+}

src-web/components/HttpResponseTimeline.tsx

@@ -188,6 +188,35 @@ function EventDetails({
     );
   }
 
+  // DNS Resolution - show hostname, addresses, and timing
+  if (e.type === 'dns_resolved') {
+    return (
+      <div className="flex flex-col gap-2">
+        <EventDetailHeader
+          title={e.overridden ? 'DNS Override' : 'DNS Resolution'}
+          timestamp={event.createdAt}
+          actions={actions}
+        />
+        <KeyValueRows>
+          <KeyValueRow label="Hostname">{e.hostname}</KeyValueRow>
+          <KeyValueRow label="Addresses">{e.addresses.join(', ')}</KeyValueRow>
+          <KeyValueRow label="Duration">
+            {e.overridden ? (
+              <span className="text-text-subtlest">--</span>
+            ) : (
+              `${String(e.duration)}ms`
+            )}
+          </KeyValueRow>
+        </KeyValueRows>
+        {e.overridden && (
+          <KeyValueRows>
+            <KeyValueRow label="Source">Workspace Override</KeyValueRow>
+          </KeyValueRows>
+        )}
+      </div>
+    );
+  }
+
   // Default - use summary
   const { summary } = getEventDisplay(event.event);
   return (
@@ -219,6 +248,11 @@ function formatEventRaw(event: HttpResponseEventData): string {
       return `[${formatBytes(event.bytes)} sent]`;
     case 'chunk_received':
       return `[${formatBytes(event.bytes)} received]`;
+    case 'dns_resolved':
+      if (event.overridden) {
+        return `DNS override ${event.hostname} → ${event.addresses.join(', ')}`;
+      }
+      return `DNS resolved ${event.hostname} → ${event.addresses.join(', ')} (${event.duration}ms)`;
     default:
       return '[unknown event]';
   }
@@ -297,6 +331,15 @@ function getEventDisplay(event: HttpResponseEventData): EventDisplay {
         label: 'Chunk',
         summary: `${formatBytes(event.bytes)} chunk received`,
       };
+    case 'dns_resolved':
+      return {
+        icon: 'globe',
+        color: event.overridden ? 'success' : 'secondary',
+        label: event.overridden ? 'DNS Override' : 'DNS',
+        summary: event.overridden
+          ? `${event.hostname} → ${event.addresses.join(', ')} (overridden)`
+          : `${event.hostname} → ${event.addresses.join(', ')} (${event.duration}ms)`,
+      };
     default:
       return {
         icon: 'info',

src-web/components/WorkspaceSettingsDialog.tsx

@@ -13,6 +13,7 @@ import { InlineCode } from './core/InlineCode';
 import { PlainInput } from './core/PlainInput';
 import { HStack, VStack } from './core/Stacks';
 import { TabContent, Tabs } from './core/Tabs/Tabs';
+import { DnsOverridesEditor } from './DnsOverridesEditor';
 import { HeadersEditor } from './HeadersEditor';
 import { HttpAuthenticationEditor } from './HttpAuthenticationEditor';
 import { MarkdownEditor } from './MarkdownEditor';
@@ -27,11 +28,13 @@ interface Props {
 
 const TAB_AUTH = 'auth';
 const TAB_DATA = 'data';
+const TAB_DNS = 'dns';
 const TAB_HEADERS = 'headers';
 const TAB_GENERAL = 'general';
 
 export type WorkspaceSettingsTab =
   | typeof TAB_AUTH
+  | typeof TAB_DNS
   | typeof TAB_HEADERS
   | typeof TAB_GENERAL
   | typeof TAB_DATA;
@@ -75,6 +78,7 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
           value: TAB_DATA,
           label: 'Storage',
         },
+        { value: TAB_DNS, label: 'DNS' },
         ...headersTab,
         ...authTab,
       ]}
@@ -153,6 +157,9 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
           <WorkspaceEncryptionSetting size="xs" />
         </VStack>
       </TabContent>
+      <TabContent value={TAB_DNS} className="overflow-y-auto h-full px-4">
+        <DnsOverridesEditor workspace={workspace} />
+      </TabContent>
     </Tabs>
   );
 }

src-web/components/core/HttpResponseDurationTag.tsx

@@ -19,7 +19,8 @@ export function HttpResponseDurationTag({ response }: Props) {
     return () => clearInterval(timeout.current);
   }, [response.createdAt, response.state]);
 
-  const title = `HEADER: ${formatMillis(response.elapsedHeaders)}\nTOTAL: ${formatMillis(response.elapsed)}`;
+  const dnsValue = response.elapsedDns > 0 ? formatMillis(response.elapsedDns) : '--';
+  const title = `DNS: ${dnsValue}\nHEADER: ${formatMillis(response.elapsedHeaders)}\nTOTAL: ${formatMillis(response.elapsed)}`;
 
   const elapsed = response.state === 'closed' ? response.elapsed : fallbackElapsed;
 

src-web/components/core/Icon.tsx

@@ -78,6 +78,7 @@ import {
   GitCommitVerticalIcon,
   GitForkIcon,
   GitPullRequestIcon,
+  GlobeIcon,
   GripVerticalIcon,
   HandIcon,
   HardDriveDownloadIcon,
@@ -212,6 +213,7 @@ const icons = {
   git_commit_vertical: GitCommitVerticalIcon,
   git_fork: GitForkIcon,
   git_pull_request: GitPullRequestIcon,
+  globe: GlobeIcon,
   grip_vertical: GripVerticalIcon,
   circle_off: CircleOffIcon,
   hand: HandIcon,