From 27186c2ff7c5e88161f336cc820607835548bb13 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 24 Mar 2026 14:06:11 -0400
Subject: [PATCH] refactor molecule components to use .withProps()
 subcomponents and extract inline code

- Add UnstyledButton listItem theme variant to replace inline style for border-radius
- Extract subcomponent constants with .withProps() across all molecules
- Replace raw <span /> with Mantine <Flex /> in ResourcePreviewPanel
- Extract inline template literals and expressions to named functions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../ElicitationFormPanel.tsx                  |  20 ++-
 .../ElicitationUrlPanel.tsx                   |  40 ++++--
 .../ExperimentalFeaturesPanel.tsx             |  77 ++++++-----
 .../molecules/HistoryEntry/HistoryEntry.tsx   | 127 +++++++++++-------
 .../ImportServerJsonPanel.tsx                 |  15 ++-
 .../InlineElicitationRequest.tsx              |  56 +++++---
 .../InlineSamplingRequest.tsx                 |  77 +++++++----
 .../molecules/LogControls/LogControls.tsx     |  13 +-
 .../PendingClientRequests.tsx                 |  10 +-
 .../PromptArgumentsForm.tsx                   |  15 ++-
 .../PromptMessagesDisplay.tsx                 |   9 +-
 .../ResourceListItem/ResourceListItem.tsx     |   2 +-
 .../ResourcePreviewPanel.tsx                  |  63 ++++++---
 .../ResourceTemplateInput.tsx                 |   9 +-
 .../molecules/ResultPanel/ResultPanel.tsx     |  21 ++-
 .../molecules/RootsTable/RootsTable.tsx       |  31 +++--
 .../SamplingRequestPanel.tsx                  |  63 ++++++---
 .../molecules/SchemaForm/SchemaForm.tsx       |  26 ++--
 .../molecules/ServerCard/ServerCard.tsx       |  53 ++++----
 .../ServerInfoContent/ServerInfoContent.tsx   |  25 ++--
 .../ServerSettingsForm/ServerSettingsForm.tsx |  57 ++++----
 .../molecules/TaskCard/TaskCard.tsx           | 106 ++++++++++-----
 .../ToolDetailPanel/ToolDetailPanel.tsx       |  69 ++++++----
 .../molecules/ToolListItem/ToolListItem.tsx   |  27 ++--
 clients/web/src/theme/UnstyledButton.ts       |  10 ++
 clients/web/src/theme/index.ts                |   1 +
 clients/web/src/theme/theme.ts                |   2 +
 27 files changed, 667 insertions(+), 357 deletions(-)
 create mode 100644 clients/web/src/theme/UnstyledButton.ts

diff --git a/clients/web/src/components/molecules/ElicitationFormPanel/ElicitationFormPanel.tsx b/clients/web/src/components/molecules/ElicitationFormPanel/ElicitationFormPanel.tsx
index 6b6a0fb7..6507ec5f 100644
--- a/clients/web/src/components/molecules/ElicitationFormPanel/ElicitationFormPanel.tsx
+++ b/clients/web/src/components/molecules/ElicitationFormPanel/ElicitationFormPanel.tsx
@@ -12,6 +12,19 @@ export interface ElicitationFormPanelProps {
   onCancel: () => void;
 }
 
+const QuotedMessage = Text.withProps({
+  size: "md",
+  fs: "italic",
+});
+
+function formatQuoted(text: string): string {
+  return `\u201C${text}\u201D`;
+}
+
+function formatWarning(serverName: string): string {
+  return `Only provide information you trust this server with. The server \u201C${serverName}\u201D is requesting this data.`;
+}
+
 export function ElicitationFormPanel({
   message,
   schema,
@@ -23,14 +36,11 @@ export function ElicitationFormPanel({
 }: ElicitationFormPanelProps) {
   return (
     <Stack gap="md">
-      <Text size="md" fs="italic">
-        &ldquo;{message}&rdquo;
-      </Text>
+      <QuotedMessage>{formatQuoted(message)}</QuotedMessage>
       <Divider />
       <SchemaForm schema={schema} values={values} onChange={onChange} />
       <Alert color="yellow" title="Warning">
-        Only provide information you trust this server with. The server &ldquo;
-        {serverName}&rdquo; is requesting this data.
+        {formatWarning(serverName)}
       </Alert>
       <Group justify="flex-end">
         <Button variant="light" onClick={onCancel}>
diff --git a/clients/web/src/components/molecules/ElicitationUrlPanel/ElicitationUrlPanel.tsx b/clients/web/src/components/molecules/ElicitationUrlPanel/ElicitationUrlPanel.tsx
index dd924368..fa6c552d 100644
--- a/clients/web/src/components/molecules/ElicitationUrlPanel/ElicitationUrlPanel.tsx
+++ b/clients/web/src/components/molecules/ElicitationUrlPanel/ElicitationUrlPanel.tsx
@@ -19,6 +19,30 @@ export interface ElicitationUrlPanelProps {
   onCancel: () => void;
 }
 
+const ItalicMessage = Text.withProps({
+  size: "md",
+  fs: "italic",
+});
+
+const WrappingCode = Code.withProps({
+  block: true,
+  variant: "wrapping",
+});
+
+const HintText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+});
+
+const MetaText = Text.withProps({
+  size: "xs",
+  c: "dimmed",
+});
+
+function formatElicitationId(id: string): string {
+  return `Elicitation ID: ${id}`;
+}
+
 export function ElicitationUrlPanel({
   message,
   url,
@@ -30,14 +54,10 @@ export function ElicitationUrlPanel({
 }: ElicitationUrlPanelProps) {
   return (
     <Stack gap="md">
-      <Text size="md" fs="italic">
-        {message}
-      </Text>
+      <ItalicMessage>{message}</ItalicMessage>
       <Divider />
       <Text size="sm">The server is requesting you visit:</Text>
-      <Code block variant="wrapping">
-        {url}
-      </Code>
+      <WrappingCode>{url}</WrappingCode>
       <Group>
         <Button variant="light" onClick={onCopyUrl}>
           Copy URL
@@ -50,14 +70,10 @@ export function ElicitationUrlPanel({
       {isWaiting && (
         <Group>
           <Loader size="sm" />
-          <Text size="sm" c="dimmed">
-            Waiting for completion...
-          </Text>
+          <HintText>Waiting for completion...</HintText>
         </Group>
       )}
-      <Text size="xs" c="dimmed">
-        Elicitation ID: {elicitationId}
-      </Text>
+      <MetaText>{formatElicitationId(elicitationId)}</MetaText>
       <Alert color="yellow" title="Warning">
         This will open an external URL. Verify the domain before proceeding.
       </Alert>
diff --git a/clients/web/src/components/molecules/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.tsx b/clients/web/src/components/molecules/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.tsx
index bafe8628..401fea6b 100644
--- a/clients/web/src/components/molecules/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.tsx
+++ b/clients/web/src/components/molecules/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.tsx
@@ -54,6 +54,39 @@ export interface ExperimentalFeaturesPanelProps {
   onTestCapability: (name: string) => void;
 }
 
+const HintText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+});
+
+const MetaText = Text.withProps({
+  size: "xs",
+  c: "dimmed",
+});
+
+const CapCard = Card.withProps({
+  withBorder: true,
+  p: "sm",
+});
+
+const CompactButton = Button.withProps({
+  size: "xs",
+  variant: "light",
+});
+
+const RemoveIcon = ActionIcon.withProps({
+  variant: "light",
+  color: "red",
+});
+
+function formatMethods(methods: string[]): string {
+  return `Methods: ${methods.join(", ")}`;
+}
+
+function formatDuration(ms: number): string {
+  return `${ms}ms`;
+}
+
 export function ExperimentalFeaturesPanel({
   serverCapabilities,
   clientCapabilities,
@@ -82,30 +115,20 @@ export function ExperimentalFeaturesPanel({
         <Text c="dimmed">No experimental capabilities</Text>
       ) : (
         serverCapabilities.map((cap) => (
-          <Card key={cap.name} withBorder p="sm">
+          <CapCard key={cap.name}>
             <Stack gap="xs">
               <Text fw={600}>{cap.name}</Text>
-              {cap.description && (
-                <Text size="sm" c="dimmed">
-                  {cap.description}
-                </Text>
-              )}
+              {cap.description && <HintText>{cap.description}</HintText>}
               {cap.methods && cap.methods.length > 0 && (
-                <Text size="xs" c="dimmed">
-                  Methods: {cap.methods.join(", ")}
-                </Text>
+                <MetaText>{formatMethods(cap.methods)}</MetaText>
               )}
               <Group>
-                <Button
-                  size="xs"
-                  variant="light"
-                  onClick={() => onTestCapability(cap.name)}
-                >
+                <CompactButton onClick={() => onTestCapability(cap.name)}>
                   Test →
-                </Button>
+                </CompactButton>
               </Group>
             </Stack>
-          </Card>
+          </CapCard>
         ))
       )}
 
@@ -128,9 +151,7 @@ export function ExperimentalFeaturesPanel({
 
       <Title order={5}>Advanced JSON-RPC Tester</Title>
 
-      <Text size="sm" c="dimmed">
-        Send raw JSON-RPC requests to test ANY method
-      </Text>
+      <HintText>Send raw JSON-RPC requests to test ANY method</HintText>
 
       {customHeaders.map((header, index) => (
         <Group key={index}>
@@ -148,20 +169,14 @@ export function ExperimentalFeaturesPanel({
               onHeaderChange(index, header.key, e.currentTarget.value)
             }
           />
-          <ActionIcon
-            variant="light"
-            color="red"
-            onClick={() => onRemoveHeader(index)}
-          >
+          <RemoveIcon onClick={() => onRemoveHeader(index)}>
             <Text size="xs">✕</Text>
-          </ActionIcon>
+          </RemoveIcon>
         </Group>
       ))}
 
       <Group>
-        <Button size="xs" variant="light" onClick={onAddHeader}>
-          + Add Header
-        </Button>
+        <CompactButton onClick={onAddHeader}>+ Add Header</CompactButton>
       </Group>
 
       <Textarea
@@ -186,9 +201,7 @@ export function ExperimentalFeaturesPanel({
             minRows={4}
           />
           <Group>
-            <Button variant="light" size="xs" onClick={onCopyResponse}>
-              Copy
-            </Button>
+            <CompactButton onClick={onCopyResponse}>Copy</CompactButton>
           </Group>
         </>
       )}
@@ -211,7 +224,7 @@ export function ExperimentalFeaturesPanel({
                   <Table.Td>{item.timestamp}</Table.Td>
                   <Table.Td>{item.method}</Table.Td>
                   <Table.Td>{item.status}</Table.Td>
-                  <Table.Td>{item.durationMs}ms</Table.Td>
+                  <Table.Td>{formatDuration(item.durationMs)}</Table.Td>
                 </Table.Tr>
               ))}
             </Table.Tbody>
diff --git a/clients/web/src/components/molecules/HistoryEntry/HistoryEntry.tsx b/clients/web/src/components/molecules/HistoryEntry/HistoryEntry.tsx
index b7741572..cfd4d021 100644
--- a/clients/web/src/components/molecules/HistoryEntry/HistoryEntry.tsx
+++ b/clients/web/src/components/molecules/HistoryEntry/HistoryEntry.tsx
@@ -34,6 +34,63 @@ export interface HistoryEntryProps {
   onTogglePin: () => void;
 }
 
+const EntryContainer = Card.withProps({
+  withBorder: true,
+  padding: "md",
+});
+
+const HeaderRow = Group.withProps({
+  justify: "space-between",
+  wrap: "nowrap",
+});
+
+const TimestampText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+  ff: "monospace",
+});
+
+const TargetText = Text.withProps({
+  size: "sm",
+  fw: 500,
+});
+
+const DurationText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+});
+
+const SubtleButton = Button.withProps({
+  variant: "subtle",
+  size: "xs",
+});
+
+const ChildMethodBadge = Badge.withProps({
+  color: "dark",
+  size: "sm",
+});
+
+function formatDuration(ms: number): string {
+  return `${ms}ms`;
+}
+
+function formatStatusLabel(status: "success" | "error"): string {
+  return status === "success" ? "OK" : "Error";
+}
+
+function statusColor(status: "success" | "error"): string {
+  return status === "success" ? "green" : "red";
+}
+
+function formatPinLabel(isPinned: boolean, pinLabel?: string): string {
+  const base = isPinned ? "Unpin" : "Pin";
+  return isPinned && pinLabel ? `${base} (${pinLabel})` : base;
+}
+
+function serializeJson(value: Record<string, unknown>): string {
+  return JSON.stringify(value);
+}
+
 export function HistoryEntry({
   timestamp,
   method,
@@ -51,41 +108,30 @@ export function HistoryEntry({
   onTogglePin,
 }: HistoryEntryProps) {
   return (
-    <Card withBorder padding="md">
+    <EntryContainer>
       <Stack gap="sm">
-        <Group justify="space-between" wrap="nowrap">
+        <HeaderRow>
           <Group gap="sm">
-            <Text size="sm" c="dimmed" ff="monospace">
-              {timestamp}
-            </Text>
+            <TimestampText>{timestamp}</TimestampText>
             <Badge color="dark">{method}</Badge>
-            {target && (
-              <Text size="sm" fw={500}>
-                {target}
-              </Text>
-            )}
+            {target && <TargetText>{target}</TargetText>}
           </Group>
           <Group gap="sm">
-            <Text size="sm" c="dimmed">
-              {durationMs}ms
-            </Text>
-            <Badge color={status === "success" ? "green" : "red"}>
-              {status === "success" ? "OK" : "Error"}
+            <DurationText>{formatDuration(durationMs)}</DurationText>
+            <Badge color={statusColor(status)}>
+              {formatStatusLabel(status)}
             </Badge>
           </Group>
-        </Group>
+        </HeaderRow>
 
         <Group gap="xs">
-          <Button variant="subtle" size="xs" onClick={onReplay}>
-            Replay
-          </Button>
-          <Button variant="subtle" size="xs" onClick={onTogglePin}>
-            {isPinned ? "Unpin" : "Pin"}
-            {isPinned && pinLabel ? ` (${pinLabel})` : ""}
-          </Button>
-          <Button variant="subtle" size="xs" onClick={onToggleExpand} ml="auto">
+          <SubtleButton onClick={onReplay}>Replay</SubtleButton>
+          <SubtleButton onClick={onTogglePin}>
+            {formatPinLabel(isPinned, pinLabel)}
+          </SubtleButton>
+          <SubtleButton onClick={onToggleExpand} ml="auto">
             {isExpanded ? "Collapse" : "Expand"}
-          </Button>
+          </SubtleButton>
         </Group>
 
         <Collapse in={isExpanded}>
@@ -95,7 +141,7 @@ export function HistoryEntry({
                 <Text size="sm">Parameters:</Text>
                 <ContentViewer
                   type="json"
-                  content={JSON.stringify(parameters)}
+                  content={serializeJson(parameters)}
                   copyable
                 />
               </Stack>
@@ -105,7 +151,7 @@ export function HistoryEntry({
                 <Text size="sm">Response:</Text>
                 <ContentViewer
                   type="json"
-                  content={JSON.stringify(response)}
+                  content={serializeJson(response)}
                   copyable
                 />
               </Stack>
@@ -114,25 +160,16 @@ export function HistoryEntry({
               <Stack gap="xs">
                 {childEntries.map((child, index) => (
                   <Group key={index} pl="lg" gap="sm">
-                    <Text size="sm" c="dimmed" ff="monospace">
-                      +--{" "}
-                    </Text>
-                    <Text size="sm" c="dimmed" ff="monospace">
-                      {child.timestamp}
-                    </Text>
-                    <Badge color="dark" size="sm">
-                      {child.method}
-                    </Badge>
+                    <TimestampText>+-- </TimestampText>
+                    <TimestampText>{child.timestamp}</TimestampText>
+                    <ChildMethodBadge>{child.method}</ChildMethodBadge>
                     {child.target && <Text size="sm">{child.target}</Text>}
-                    <Badge
-                      color={child.status === "success" ? "green" : "red"}
-                      size="sm"
-                    >
-                      {child.status === "success" ? "OK" : "Error"}
+                    <Badge color={statusColor(child.status)} size="sm">
+                      {formatStatusLabel(child.status)}
                     </Badge>
-                    <Text size="sm" c="dimmed">
-                      {child.durationMs}ms
-                    </Text>
+                    <DurationText>
+                      {formatDuration(child.durationMs)}
+                    </DurationText>
                   </Group>
                 ))}
               </Stack>
@@ -140,6 +177,6 @@ export function HistoryEntry({
           </Stack>
         </Collapse>
       </Stack>
-    </Card>
+    </EntryContainer>
   );
 }
diff --git a/clients/web/src/components/molecules/ImportServerJsonPanel/ImportServerJsonPanel.tsx b/clients/web/src/components/molecules/ImportServerJsonPanel/ImportServerJsonPanel.tsx
index 1857219b..da19f528 100644
--- a/clients/web/src/components/molecules/ImportServerJsonPanel/ImportServerJsonPanel.tsx
+++ b/clients/web/src/components/molecules/ImportServerJsonPanel/ImportServerJsonPanel.tsx
@@ -54,6 +54,15 @@ const validationIcons: Record<
   error: { icon: "\u2717", color: "red" },
 };
 
+const HintText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+});
+
+function formatPackageLabel(pkg: PackageInfo): string {
+  return `${pkg.registryType}: ${pkg.identifier} (${pkg.runtimeHint})`;
+}
+
 export function ImportServerJsonPanel({
   jsonContent,
   validationResults,
@@ -73,9 +82,7 @@ export function ImportServerJsonPanel({
     <Stack gap="md">
       <Title order={4}>Import MCP Registry server.json</Title>
 
-      <Text size="sm" c="dimmed">
-        Paste server.json content or drag and drop a file:
-      </Text>
+      <HintText>Paste server.json content or drag and drop a file:</HintText>
 
       <Textarea
         value={jsonContent}
@@ -113,7 +120,7 @@ export function ImportServerJsonPanel({
                 <Radio
                   key={index}
                   value={String(index)}
-                  label={`${pkg.registryType}: ${pkg.identifier} (${pkg.runtimeHint})`}
+                  label={formatPackageLabel(pkg)}
                 />
               ))}
             </Stack>
diff --git a/clients/web/src/components/molecules/InlineElicitationRequest/InlineElicitationRequest.tsx b/clients/web/src/components/molecules/InlineElicitationRequest/InlineElicitationRequest.tsx
index d51dcd32..916ba139 100644
--- a/clients/web/src/components/molecules/InlineElicitationRequest/InlineElicitationRequest.tsx
+++ b/clients/web/src/components/molecules/InlineElicitationRequest/InlineElicitationRequest.tsx
@@ -24,6 +24,37 @@ export interface InlineElicitationRequestProps {
   onCancel: () => void;
 }
 
+const RequestContainer = Paper.withProps({
+  p: "md",
+  withBorder: true,
+});
+
+const QueueLabel = Text.withProps({
+  size: "xs",
+  c: "dimmed",
+});
+
+const ItalicMessage = Text.withProps({
+  size: "sm",
+  fs: "italic",
+});
+
+const ActionsRow = Group.withProps({
+  justify: "flex-end",
+  gap: "xs",
+});
+
+const CompactButton = Button.withProps({
+  size: "xs",
+  variant: "light",
+});
+
+function getBadgeLabel(mode: "form" | "url"): string {
+  return mode === "form"
+    ? "elicitation/create (form)"
+    : "elicitation/create (url)";
+}
+
 export function InlineElicitationRequest({
   mode,
   message,
@@ -36,22 +67,15 @@ export function InlineElicitationRequest({
   onSubmit,
   onCancel,
 }: InlineElicitationRequestProps) {
-  const badgeLabel =
-    mode === "form" ? "elicitation/create (form)" : "elicitation/create (url)";
-
   return (
-    <Paper p="md" withBorder>
+    <RequestContainer>
       <Stack gap="sm">
         <Group justify="space-between">
-          <Badge color="violet">{badgeLabel}</Badge>
-          <Text size="xs" c="dimmed">
-            {queuePosition}
-          </Text>
+          <Badge color="violet">{getBadgeLabel(mode)}</Badge>
+          <QueueLabel>{queuePosition}</QueueLabel>
         </Group>
 
-        <Text size="sm" fs="italic">
-          {message}
-        </Text>
+        <ItalicMessage>{message}</ItalicMessage>
 
         {mode === "form" && schema && (
           <SchemaForm
@@ -73,17 +97,15 @@ export function InlineElicitationRequest({
           </>
         )}
 
-        <Group justify="flex-end" gap="xs">
-          <Button size="xs" variant="light" onClick={onCancel}>
-            Cancel
-          </Button>
+        <ActionsRow>
+          <CompactButton onClick={onCancel}>Cancel</CompactButton>
           {mode === "form" && (
             <Button size="xs" onClick={onSubmit}>
               Submit
             </Button>
           )}
-        </Group>
+        </ActionsRow>
       </Stack>
-    </Paper>
+    </RequestContainer>
   );
 }
diff --git a/clients/web/src/components/molecules/InlineSamplingRequest/InlineSamplingRequest.tsx b/clients/web/src/components/molecules/InlineSamplingRequest/InlineSamplingRequest.tsx
index 72b2622e..182e08e9 100644
--- a/clients/web/src/components/molecules/InlineSamplingRequest/InlineSamplingRequest.tsx
+++ b/clients/web/src/components/molecules/InlineSamplingRequest/InlineSamplingRequest.tsx
@@ -19,6 +19,47 @@ export interface InlineSamplingRequestProps {
   onViewDetails: () => void;
 }
 
+const RequestContainer = Paper.withProps({
+  p: "md",
+  withBorder: true,
+});
+
+const QueueLabel = Text.withProps({
+  size: "xs",
+  c: "dimmed",
+});
+
+const PreviewText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+  lineClamp: 2,
+});
+
+const DetailButton = Button.withProps({
+  variant: "subtle",
+  size: "xs",
+});
+
+const ActionsRow = Group.withProps({
+  justify: "flex-end",
+  gap: "xs",
+});
+
+const CompactButton = Button.withProps({
+  size: "xs",
+  variant: "light",
+});
+
+const RejectButton = Button.withProps({
+  size: "xs",
+  variant: "light",
+  color: "red",
+});
+
+function formatModelHints(hints: string[]): string {
+  return `Model hints: ${hints.join(", ")}`;
+}
+
 export function InlineSamplingRequest({
   queuePosition,
   modelHints,
@@ -30,26 +71,18 @@ export function InlineSamplingRequest({
   onViewDetails,
 }: InlineSamplingRequestProps) {
   return (
-    <Paper p="md" withBorder>
+    <RequestContainer>
       <Stack gap="sm">
         <Group justify="space-between">
           <Badge color="blue">sampling/createMessage</Badge>
-          <Text size="xs" c="dimmed">
-            {queuePosition}
-          </Text>
+          <QueueLabel>{queuePosition}</QueueLabel>
         </Group>
 
-        {modelHints && (
-          <Text size="sm">Model hints: {modelHints.join(", ")}</Text>
-        )}
+        {modelHints && <Text size="sm">{formatModelHints(modelHints)}</Text>}
 
-        <Text size="sm" c="dimmed" lineClamp={2}>
-          {messagePreview}
-        </Text>
+        <PreviewText>{messagePreview}</PreviewText>
 
-        <Button variant="subtle" size="xs" onClick={onViewDetails}>
-          View Details
-        </Button>
+        <DetailButton onClick={onViewDetails}>View Details</DetailButton>
 
         <Textarea
           size="sm"
@@ -60,18 +93,12 @@ export function InlineSamplingRequest({
           readOnly
         />
 
-        <Group justify="flex-end" gap="xs">
-          <Button size="xs" variant="light" onClick={onAutoRespond}>
-            Auto-respond
-          </Button>
-          <Button size="xs" variant="light" onClick={onEditAndSend}>
-            Edit &amp; Send
-          </Button>
-          <Button size="xs" variant="light" color="red" onClick={onReject}>
-            Reject
-          </Button>
-        </Group>
+        <ActionsRow>
+          <CompactButton onClick={onAutoRespond}>Auto-respond</CompactButton>
+          <CompactButton onClick={onEditAndSend}>Edit &amp; Send</CompactButton>
+          <RejectButton onClick={onReject}>Reject</RejectButton>
+        </ActionsRow>
       </Stack>
-    </Paper>
+    </RequestContainer>
   );
 }
diff --git a/clients/web/src/components/molecules/LogControls/LogControls.tsx b/clients/web/src/components/molecules/LogControls/LogControls.tsx
index c9c840e8..859ab7e6 100644
--- a/clients/web/src/components/molecules/LogControls/LogControls.tsx
+++ b/clients/web/src/components/molecules/LogControls/LogControls.tsx
@@ -31,6 +31,11 @@ const LEVEL_COLORS: Record<string, { c: string; fw?: number }> = {
   emergency: { c: "red", fw: 900 },
 };
 
+const ToolbarButton = Button.withProps({
+  variant: "light",
+  size: "sm",
+});
+
 export interface LogControlsProps {
   currentLevel: string;
   filterText: string;
@@ -93,12 +98,8 @@ export function LogControls({
       })}
 
       <Group>
-        <Button variant="light" size="sm" onClick={onClear}>
-          Clear
-        </Button>
-        <Button variant="light" size="sm" onClick={onExport}>
-          Export
-        </Button>
+        <ToolbarButton onClick={onClear}>Clear</ToolbarButton>
+        <ToolbarButton onClick={onExport}>Export</ToolbarButton>
       </Group>
     </Stack>
   );
diff --git a/clients/web/src/components/molecules/PendingClientRequests/PendingClientRequests.tsx b/clients/web/src/components/molecules/PendingClientRequests/PendingClientRequests.tsx
index 4cf4b6d4..c3aa78cd 100644
--- a/clients/web/src/components/molecules/PendingClientRequests/PendingClientRequests.tsx
+++ b/clients/web/src/components/molecules/PendingClientRequests/PendingClientRequests.tsx
@@ -6,16 +6,16 @@ export interface PendingClientRequestsProps {
   children: ReactNode;
 }
 
+function formatTitle(count: number): string {
+  return `Pending Client Requests (${count})`;
+}
+
 export function PendingClientRequests({
   count,
   children,
 }: PendingClientRequestsProps) {
   return (
-    <Alert
-      color="blue"
-      variant="light"
-      title={`Pending Client Requests (${count})`}
-    >
+    <Alert color="blue" variant="light" title={formatTitle(count)}>
       <Stack gap="md">{children}</Stack>
     </Alert>
   );
diff --git a/clients/web/src/components/molecules/PromptArgumentsForm/PromptArgumentsForm.tsx b/clients/web/src/components/molecules/PromptArgumentsForm/PromptArgumentsForm.tsx
index 48205cce..7ab97194 100644
--- a/clients/web/src/components/molecules/PromptArgumentsForm/PromptArgumentsForm.tsx
+++ b/clients/web/src/components/molecules/PromptArgumentsForm/PromptArgumentsForm.tsx
@@ -21,6 +21,15 @@ export interface PromptArgumentsFormProps {
   onGetPrompt: () => void;
 }
 
+const DescriptionText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+});
+
+function formatPlaceholder(name: string): string {
+  return `Enter ${name}...`;
+}
+
 export function PromptArgumentsForm({
   prompts,
   selectedPrompt,
@@ -46,9 +55,7 @@ export function PromptArgumentsForm({
         placeholder="Choose a prompt..."
       />
       {selectedPrompt && selectedPromptInfo?.description && (
-        <Text size="sm" c="dimmed">
-          {selectedPromptInfo.description}
-        </Text>
+        <DescriptionText>{selectedPromptInfo.description}</DescriptionText>
       )}
       {promptArguments.length > 0 && (
         <>
@@ -58,7 +65,7 @@ export function PromptArgumentsForm({
               label={arg.name}
               withAsterisk={arg.required}
               description={arg.description}
-              placeholder={`Enter ${arg.name}...`}
+              placeholder={formatPlaceholder(arg.name)}
               value={argumentValues[arg.name] || ""}
               onChange={(event) =>
                 onArgumentChange(arg.name, event.currentTarget.value)
diff --git a/clients/web/src/components/molecules/PromptMessagesDisplay/PromptMessagesDisplay.tsx b/clients/web/src/components/molecules/PromptMessagesDisplay/PromptMessagesDisplay.tsx
index 641e2135..dfad1b7f 100644
--- a/clients/web/src/components/molecules/PromptMessagesDisplay/PromptMessagesDisplay.tsx
+++ b/clients/web/src/components/molecules/PromptMessagesDisplay/PromptMessagesDisplay.tsx
@@ -8,6 +8,11 @@ export interface PromptMessage {
   audioContent?: { data: string; mimeType: string };
 }
 
+const CopyAllButton = Button.withProps({
+  variant: "light",
+  size: "sm",
+});
+
 export interface PromptMessagesDisplayProps {
   messages: PromptMessage[];
   onCopyAll?: () => void;
@@ -22,9 +27,7 @@ export function PromptMessagesDisplay({
       <Group justify="space-between">
         <Title order={4}>Messages</Title>
         {onCopyAll && messages.length > 0 && (
-          <Button variant="light" size="sm" onClick={onCopyAll}>
-            Copy All
-          </Button>
+          <CopyAllButton onClick={onCopyAll}>Copy All</CopyAllButton>
         )}
       </Group>
       {messages.length === 0 ? (
diff --git a/clients/web/src/components/molecules/ResourceListItem/ResourceListItem.tsx b/clients/web/src/components/molecules/ResourceListItem/ResourceListItem.tsx
index 4628e8c0..9b4a93d1 100644
--- a/clients/web/src/components/molecules/ResourceListItem/ResourceListItem.tsx
+++ b/clients/web/src/components/molecules/ResourceListItem/ResourceListItem.tsx
@@ -22,8 +22,8 @@ export function ResourceListItem({
     <UnstyledButton
       w="100%"
       p="sm"
+      variant="listItem"
       bg={selected ? "var(--mantine-primary-color-light)" : undefined}
-      style={{ borderRadius: "var(--mantine-radius-md)" }}
       onClick={onClick}
     >
       <Text fw={500}>{name}</Text>
diff --git a/clients/web/src/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.tsx b/clients/web/src/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.tsx
index 69c9c2c6..a243e107 100644
--- a/clients/web/src/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.tsx
+++ b/clients/web/src/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.tsx
@@ -1,4 +1,4 @@
-import { Group, Stack, Text, Title } from "@mantine/core";
+import { Flex, Group, Stack, Text, Title } from "@mantine/core";
 import { AnnotationBadge } from "../../atoms/AnnotationBadge/AnnotationBadge";
 import { ContentViewer } from "../../atoms/ContentViewer/ContentViewer";
 import { CopyButton } from "../../atoms/CopyButton/CopyButton";
@@ -27,6 +27,41 @@ function resolveContentType(mimeType: string): "json" | "image" | "text" {
   return "text";
 }
 
+function formatLastUpdated(lastUpdated: string): string {
+  return `Last updated: ${lastUpdated}`;
+}
+
+const HeaderRow = Group.withProps({
+  justify: "space-between",
+  wrap: "nowrap",
+});
+
+const UriGroup = Group.withProps({
+  gap: "xs",
+  wrap: "nowrap",
+});
+
+const UriText = Text.withProps({
+  size: "sm",
+  c: "blue",
+  truncate: "end",
+});
+
+const MetaRow = Group.withProps({
+  justify: "space-between",
+  wrap: "nowrap",
+});
+
+const TimestampText = Text.withProps({
+  size: "xs",
+  c: "dimmed",
+});
+
+const MimeText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+});
+
 export function ResourcePreviewPanel({
   uri,
   mimeType,
@@ -39,33 +74,27 @@ export function ResourcePreviewPanel({
 }: ResourcePreviewPanelProps) {
   return (
     <Stack gap="md">
-      <Group justify="space-between" wrap="nowrap">
+      <HeaderRow>
         <Title order={4}>Resource</Title>
-        <Group gap="xs" wrap="nowrap">
-          <Text size="sm" c="blue" truncate="end">
-            {uri}
-          </Text>
+        <UriGroup>
+          <UriText>{uri}</UriText>
           <CopyButton value={uri} />
-        </Group>
-      </Group>
+        </UriGroup>
+      </HeaderRow>
       <ContentViewer
         type={resolveContentType(mimeType)}
         content={content}
         mimeType={mimeType}
         copyable
       />
-      <Group justify="space-between" wrap="nowrap">
+      <MetaRow>
         {lastUpdated ? (
-          <Text size="xs" c="dimmed">
-            Last updated: {lastUpdated}
-          </Text>
+          <TimestampText>{formatLastUpdated(lastUpdated)}</TimestampText>
         ) : (
-          <span />
+          <Flex />
         )}
-        <Text size="sm" c="dimmed">
-          {mimeType}
-        </Text>
-      </Group>
+        <MimeText>{mimeType}</MimeText>
+      </MetaRow>
       <Group justify="space-between">
         <Group gap="xs">
           {annotations?.audience && (
diff --git a/clients/web/src/components/molecules/ResourceTemplateInput/ResourceTemplateInput.tsx b/clients/web/src/components/molecules/ResourceTemplateInput/ResourceTemplateInput.tsx
index 2f04603e..c639e0da 100644
--- a/clients/web/src/components/molecules/ResourceTemplateInput/ResourceTemplateInput.tsx
+++ b/clients/web/src/components/molecules/ResourceTemplateInput/ResourceTemplateInput.tsx
@@ -36,6 +36,11 @@ function parseTemplate(template: string): TemplatePart[] {
   return parts;
 }
 
+const StaticPart = Text.withProps({
+  size: "sm",
+  pb: 6,
+});
+
 export function ResourceTemplateInput({
   template,
   variables,
@@ -48,9 +53,7 @@ export function ResourceTemplateInput({
     <Group gap="xs" align="flex-end">
       {parts.map((part, index) =>
         part.type === "static" ? (
-          <Text key={index} size="sm" pb={6}>
-            {part.value}
-          </Text>
+          <StaticPart key={index}>{part.value}</StaticPart>
         ) : (
           <TextInput
             key={part.value}
diff --git a/clients/web/src/components/molecules/ResultPanel/ResultPanel.tsx b/clients/web/src/components/molecules/ResultPanel/ResultPanel.tsx
index 149661c9..0be55f23 100644
--- a/clients/web/src/components/molecules/ResultPanel/ResultPanel.tsx
+++ b/clients/web/src/components/molecules/ResultPanel/ResultPanel.tsx
@@ -13,6 +13,19 @@ export interface ResultPanelProps {
   onClear: () => void;
 }
 
+const ClearButton = Button.withProps({
+  variant: "light",
+  size: "sm",
+});
+
+function resolveTextType(type: string): "text" | "json" {
+  return type === "text" ? "text" : "json";
+}
+
+function resolveMediaType(mimeType?: string): "image" | "audio" {
+  return mimeType?.startsWith("image") ? "image" : "audio";
+}
+
 export function ResultPanel({ content, onClear }: ResultPanelProps) {
   return (
     <Stack>
@@ -26,7 +39,7 @@ export function ResultPanel({ content, onClear }: ResultPanelProps) {
               return (
                 <ContentViewer
                   key={index}
-                  type={item.type === "text" ? "text" : "json"}
+                  type={resolveTextType(item.type)}
                   content={item.text}
                   copyable
                 />
@@ -36,7 +49,7 @@ export function ResultPanel({ content, onClear }: ResultPanelProps) {
               return (
                 <ContentViewer
                   key={index}
-                  type={item.mimeType?.startsWith("image") ? "image" : "audio"}
+                  type={resolveMediaType(item.mimeType)}
                   content={item.data}
                   mimeType={item.mimeType}
                 />
@@ -47,9 +60,7 @@ export function ResultPanel({ content, onClear }: ResultPanelProps) {
         </>
       )}
       <Group>
-        <Button variant="light" size="sm" onClick={onClear}>
-          Clear
-        </Button>
+        <ClearButton onClick={onClear}>Clear</ClearButton>
       </Group>
     </Stack>
   );
diff --git a/clients/web/src/components/molecules/RootsTable/RootsTable.tsx b/clients/web/src/components/molecules/RootsTable/RootsTable.tsx
index 7d8f138c..0cad2d39 100644
--- a/clients/web/src/components/molecules/RootsTable/RootsTable.tsx
+++ b/clients/web/src/components/molecules/RootsTable/RootsTable.tsx
@@ -27,6 +27,21 @@ export interface RootsTableProps {
   onBrowse: () => void;
 }
 
+const HintText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+});
+
+const RemoveIcon = ActionIcon.withProps({
+  color: "red",
+  variant: "subtle",
+});
+
+const AddRootButton = Button.withProps({
+  variant: "light",
+  fullWidth: true,
+});
+
 export function RootsTable({
   roots,
   newRootName,
@@ -40,9 +55,7 @@ export function RootsTable({
   return (
     <Stack gap="md">
       <Title order={4}>Roots Configuration</Title>
-      <Text size="sm" c="dimmed">
-        Filesystem roots exposed to the connected server:
-      </Text>
+      <HintText>Filesystem roots exposed to the connected server:</HintText>
 
       {roots.length > 0 && (
         <Table>
@@ -59,13 +72,9 @@ export function RootsTable({
                 <Table.Td>{root.name}</Table.Td>
                 <Table.Td>{root.uri}</Table.Td>
                 <Table.Td>
-                  <ActionIcon
-                    color="red"
-                    variant="subtle"
-                    onClick={() => onRemoveRoot(root.uri)}
-                  >
+                  <RemoveIcon onClick={() => onRemoveRoot(root.uri)}>
                     X
-                  </ActionIcon>
+                  </RemoveIcon>
                 </Table.Td>
               </Table.Tr>
             ))}
@@ -73,9 +82,7 @@ export function RootsTable({
         </Table>
       )}
 
-      <Button variant="light" fullWidth onClick={onAddRoot}>
-        + Add Root
-      </Button>
+      <AddRootButton onClick={onAddRoot}>+ Add Root</AddRootButton>
 
       <Divider />
 
diff --git a/clients/web/src/components/molecules/SamplingRequestPanel/SamplingRequestPanel.tsx b/clients/web/src/components/molecules/SamplingRequestPanel/SamplingRequestPanel.tsx
index 86ff02a0..b63bd151 100644
--- a/clients/web/src/components/molecules/SamplingRequestPanel/SamplingRequestPanel.tsx
+++ b/clients/web/src/components/molecules/SamplingRequestPanel/SamplingRequestPanel.tsx
@@ -54,6 +54,39 @@ function formatPriority(value: number): string {
   return `high (${value})`;
 }
 
+function formatOptional(value: unknown, fallback: string): string {
+  return value !== undefined ? String(value) : fallback;
+}
+
+function serializeJson(value: unknown): string {
+  return JSON.stringify(value);
+}
+
+const HintText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+});
+
+const PreferencesContainer = Paper.withProps({
+  p: "sm",
+  withBorder: true,
+});
+
+const ToolCard = Paper.withProps({
+  p: "xs",
+  withBorder: true,
+});
+
+const ToolName = Text.withProps({
+  size: "sm",
+  fw: 600,
+});
+
+const RejectButton = Button.withProps({
+  variant: "light",
+  color: "red",
+});
+
 export function SamplingRequestPanel({
   messages,
   modelHints,
@@ -78,9 +111,7 @@ export function SamplingRequestPanel({
 }: SamplingRequestPanelProps) {
   return (
     <Stack gap="md">
-      <Text size="sm" c="dimmed">
-        The server is requesting an LLM completion.
-      </Text>
+      <HintText>The server is requesting an LLM completion.</HintText>
 
       <Title order={5}>Messages:</Title>
       {messages.map((message, index) => (
@@ -94,7 +125,7 @@ export function SamplingRequestPanel({
       ))}
 
       {modelHints && modelHints.length > 0 && (
-        <Paper p="sm" withBorder>
+        <PreferencesContainer>
           <Stack gap="xs">
             <Title order={5}>Model Preferences:</Title>
             <Group gap="xs">
@@ -119,17 +150,19 @@ export function SamplingRequestPanel({
               </Text>
             )}
           </Stack>
-        </Paper>
+        </PreferencesContainer>
       )}
 
       <Title order={5}>Parameters:</Title>
-      <Text size="sm">Max Tokens: {maxTokens ?? "not specified"}</Text>
       <Text size="sm">
-        Stop Sequences:{" "}
-        {stopSequences ? JSON.stringify(stopSequences) : "not specified"}
+        Max Tokens: {formatOptional(maxTokens, "not specified")}
       </Text>
       <Text size="sm">
-        Temperature: {temperature !== undefined ? temperature : "not specified"}
+        Stop Sequences:{" "}
+        {stopSequences ? serializeJson(stopSequences) : "not specified"}
+      </Text>
+      <Text size="sm">
+        Temperature: {formatOptional(temperature, "not specified")}
       </Text>
 
       {includeContext && (
@@ -143,12 +176,10 @@ export function SamplingRequestPanel({
         <>
           <Title order={5}>Available Tools:</Title>
           {tools.map((tool) => (
-            <Paper key={tool.name} p="xs" withBorder>
-              <Text size="sm" fw={600}>
-                {tool.name}
-              </Text>
+            <ToolCard key={tool.name}>
+              <ToolName>{tool.name}</ToolName>
               {tool.description && <Text size="sm">{tool.description}</Text>}
-            </Paper>
+            </ToolCard>
           ))}
         </>
       )}
@@ -181,9 +212,7 @@ export function SamplingRequestPanel({
         <Button variant="light" onClick={onAutoRespond}>
           Auto-respond
         </Button>
-        <Button variant="light" color="red" onClick={onReject}>
-          Reject
-        </Button>
+        <RejectButton onClick={onReject}>Reject</RejectButton>
         <Button onClick={onSend}>Send Response</Button>
       </Group>
     </Stack>
diff --git a/clients/web/src/components/molecules/SchemaForm/SchemaForm.tsx b/clients/web/src/components/molecules/SchemaForm/SchemaForm.tsx
index bd5a50c1..f72d5f62 100644
--- a/clients/web/src/components/molecules/SchemaForm/SchemaForm.tsx
+++ b/clients/web/src/components/molecules/SchemaForm/SchemaForm.tsx
@@ -27,6 +27,20 @@ export interface JsonSchema {
   format?: string;
 }
 
+const FieldLabel = Text.withProps({
+  fw: 500,
+  size: "sm",
+});
+
+const FieldDescription = Text.withProps({
+  size: "xs",
+  c: "dimmed",
+});
+
+function serializeJson(value: unknown): string {
+  return JSON.stringify(value, null, 2);
+}
+
 export interface SchemaFormProps {
   schema: JsonSchema;
   values: Record<string, unknown>;
@@ -182,14 +196,8 @@ export function SchemaForm({
     if (fieldSchema.type === "object" && fieldSchema.properties) {
       return (
         <Stack key={fieldName} gap="sm">
-          <Text fw={500} size="sm">
-            {label}
-          </Text>
-          {description && (
-            <Text size="xs" c="dimmed">
-              {description}
-            </Text>
-          )}
+          <FieldLabel>{label}</FieldLabel>
+          {description && <FieldDescription>{description}</FieldDescription>}
           <Stack gap="sm" pl="md">
             <SchemaForm
               schema={fieldSchema}
@@ -214,7 +222,7 @@ export function SchemaForm({
         disabled={disabled}
         formatOnBlur
         autosize
-        value={rawValue !== undefined ? JSON.stringify(rawValue, null, 2) : ""}
+        value={rawValue !== undefined ? serializeJson(rawValue) : ""}
         onChange={(val) => {
           try {
             handleFieldChange(fieldName, JSON.parse(val));
diff --git a/clients/web/src/components/molecules/ServerCard/ServerCard.tsx b/clients/web/src/components/molecules/ServerCard/ServerCard.tsx
index 709b38bb..cb0d1e33 100644
--- a/clients/web/src/components/molecules/ServerCard/ServerCard.tsx
+++ b/clients/web/src/components/molecules/ServerCard/ServerCard.tsx
@@ -39,6 +39,27 @@ const ActionsRow = Group.withProps({
   gap: "xs",
 });
 
+const ServerName = Text.withProps({
+  fw: 600,
+  size: "lg",
+});
+
+const ModeText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+});
+
+const SubtleButton = Button.withProps({
+  variant: "subtle",
+  size: "xs",
+});
+
+const RemoveButton = Button.withProps({
+  variant: "subtle",
+  size: "xs",
+  color: "red.6",
+});
+
 export function ServerCard({
   name,
   version,
@@ -68,9 +89,7 @@ export function ServerCard({
       <Stack gap="sm">
         <Group justify="space-between" wrap="wrap">
           <HeaderLeft>
-            <Text fw={600} size="lg">
-              {name}
-            </Text>
+            <ServerName>{name}</ServerName>
             {version && <Badge variant="outline">{version}</Badge>}
           </HeaderLeft>
           <HeaderRight>
@@ -86,9 +105,7 @@ export function ServerCard({
 
         <Group gap="sm">
           <TransportBadge transport={transport} />
-          <Text size="sm" c="dimmed">
-            {connectionMode}
-          </Text>
+          <ModeText>{connectionMode}</ModeText>
         </Group>
 
         <ContentViewer type="text" content={command} copyable />
@@ -103,29 +120,17 @@ export function ServerCard({
 
         <Group justify="space-between">
           <ActionsRow>
-            <Button variant="subtle" size="xs" onClick={onClone}>
-              Clone
-            </Button>
-            <Button variant="subtle" size="xs" onClick={onEdit}>
-              Edit
-            </Button>
-            <Button variant="subtle" size="xs" color="red.6" onClick={onRemove}>
-              Remove
-            </Button>
+            <SubtleButton onClick={onClone}>Clone</SubtleButton>
+            <SubtleButton onClick={onEdit}>Edit</SubtleButton>
+            <RemoveButton onClick={onRemove}>Remove</RemoveButton>
           </ActionsRow>
           <ActionsRow>
-            <Button variant="subtle" size="xs" onClick={onServerInfo}>
-              Server Info
-            </Button>
-            <Button variant="subtle" size="xs" onClick={onSettings}>
-              Settings
-            </Button>
+            <SubtleButton onClick={onServerInfo}>Server Info</SubtleButton>
+            <SubtleButton onClick={onSettings}>Settings</SubtleButton>
             {canTestClientFeatures && (
               <Menu>
                 <Menu.Target>
-                  <Button variant="subtle" size="xs">
-                    Test Client Features &#x25BE;
-                  </Button>
+                  <SubtleButton>Test Client Features &#x25BE;</SubtleButton>
                 </Menu.Target>
                 <Menu.Dropdown>
                   <Menu.Item onClick={onTestSampling}>
diff --git a/clients/web/src/components/molecules/ServerInfoContent/ServerInfoContent.tsx b/clients/web/src/components/molecules/ServerInfoContent/ServerInfoContent.tsx
index 66026801..61d1f484 100644
--- a/clients/web/src/components/molecules/ServerInfoContent/ServerInfoContent.tsx
+++ b/clients/web/src/components/molecules/ServerInfoContent/ServerInfoContent.tsx
@@ -26,6 +26,15 @@ export interface ServerInfoContentProps {
   oauthDetails?: { authUrl?: string; scopes?: string[]; accessToken?: string };
 }
 
+const ValueText = Text.withProps({
+  size: "sm",
+  fw: 600,
+});
+
+function formatScopes(scopes: string[]): string {
+  return scopes.join(", ");
+}
+
 export function ServerInfoContent({
   name,
   version,
@@ -42,19 +51,13 @@ export function ServerInfoContent({
 
       <SimpleGrid cols={2}>
         <Text size="sm">Name</Text>
-        <Text size="sm" fw={600}>
-          {name}
-        </Text>
+        <ValueText>{name}</ValueText>
 
         <Text size="sm">Version</Text>
-        <Text size="sm" fw={600}>
-          {version}
-        </Text>
+        <ValueText>{version}</ValueText>
 
         <Text size="sm">Protocol</Text>
-        <Text size="sm" fw={600}>
-          {protocolVersion}
-        </Text>
+        <ValueText>{protocolVersion}</ValueText>
 
         <Text size="sm">Transport</Text>
         <Badge variant="outline">{transport}</Badge>
@@ -105,9 +108,7 @@ export function ServerInfoContent({
             {oauthDetails.scopes && oauthDetails.scopes.length > 0 && (
               <SimpleGrid cols={2}>
                 <Text size="sm">Scopes</Text>
-                <Text size="sm" fw={600}>
-                  {oauthDetails.scopes.join(", ")}
-                </Text>
+                <ValueText>{formatScopes(oauthDetails.scopes)}</ValueText>
               </SimpleGrid>
             )}
             {oauthDetails.accessToken && (
diff --git a/clients/web/src/components/molecules/ServerSettingsForm/ServerSettingsForm.tsx b/clients/web/src/components/molecules/ServerSettingsForm/ServerSettingsForm.tsx
index bb5aaeeb..5d4fcadb 100644
--- a/clients/web/src/components/molecules/ServerSettingsForm/ServerSettingsForm.tsx
+++ b/clients/web/src/components/molecules/ServerSettingsForm/ServerSettingsForm.tsx
@@ -41,6 +41,27 @@ const CONNECTION_MODE_OPTIONS = [
   { value: "direct", label: "Direct" },
 ];
 
+const RemoveIcon = ActionIcon.withProps({
+  color: "red",
+  variant: "subtle",
+});
+
+const AddButton = Button.withProps({
+  size: "xs",
+  variant: "light",
+});
+
+const HintText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+});
+
+const EmptyHint = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+  fs: "italic",
+});
+
 function KeyValueRows({
   items,
   onChange,
@@ -68,13 +89,7 @@ function KeyValueRows({
             value={item.value}
             onChange={(e) => onChange(index, item.key, e.currentTarget.value)}
           />
-          <ActionIcon
-            color="red"
-            variant="subtle"
-            onClick={() => onRemove(index)}
-          >
-            X
-          </ActionIcon>
+          <RemoveIcon onClick={() => onRemove(index)}>X</RemoveIcon>
         </Group>
       ))}
     </>
@@ -126,17 +141,11 @@ export function ServerSettingsForm({
 
       <Group justify="space-between">
         <Title order={5}>Custom Headers</Title>
-        <Button size="xs" variant="light" onClick={onAddHeader}>
-          + Add Header
-        </Button>
+        <AddButton onClick={onAddHeader}>+ Add Header</AddButton>
       </Group>
-      <Text size="sm" c="dimmed">
-        Headers sent with every HTTP request to this server
-      </Text>
+      <HintText>Headers sent with every HTTP request to this server</HintText>
       {headers.length === 0 ? (
-        <Text size="sm" c="dimmed" fs="italic">
-          No custom headers configured
-        </Text>
+        <EmptyHint>No custom headers configured</EmptyHint>
       ) : (
         <KeyValueRows
           items={headers}
@@ -149,17 +158,13 @@ export function ServerSettingsForm({
 
       <Group justify="space-between">
         <Title order={5}>Request Metadata</Title>
-        <Button size="xs" variant="light" onClick={onAddMetadata}>
-          + Add Metadata
-        </Button>
+        <AddButton onClick={onAddMetadata}>+ Add Metadata</AddButton>
       </Group>
-      <Text size="sm" c="dimmed">
+      <HintText>
         Metadata sent with every MCP request (included in _meta field)
-      </Text>
+      </HintText>
       {metadata.length === 0 ? (
-        <Text size="sm" c="dimmed" fs="italic">
-          No request metadata configured
-        </Text>
+        <EmptyHint>No request metadata configured</EmptyHint>
       ) : (
         <KeyValueRows
           items={metadata}
@@ -189,9 +194,9 @@ export function ServerSettingsForm({
       <Divider />
 
       <Title order={5}>OAuth Settings</Title>
-      <Text size="sm" c="dimmed">
+      <HintText>
         Pre-configure OAuth credentials for servers requiring authentication
-      </Text>
+      </HintText>
       <TextInput
         label="Client ID"
         value={oauthClientId ?? ""}
diff --git a/clients/web/src/components/molecules/TaskCard/TaskCard.tsx b/clients/web/src/components/molecules/TaskCard/TaskCard.tsx
index 9748dc11..89311b40 100644
--- a/clients/web/src/components/molecules/TaskCard/TaskCard.tsx
+++ b/clients/web/src/components/molecules/TaskCard/TaskCard.tsx
@@ -33,6 +33,58 @@ const STATUS_COLORS: Record<TaskStatus, string> = {
   cancelled: "yellow",
 };
 
+const TaskContainer = Card.withProps({
+  withBorder: true,
+  padding: "md",
+});
+
+const TaskIdText = Text.withProps({
+  size: "sm",
+  ff: "monospace",
+});
+
+const DetailText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+});
+
+const ValueSpan = Text.withProps({
+  component: "span",
+  fw: 600,
+});
+
+const ProgressNote = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+  fs: "italic",
+});
+
+const SubtleButton = Button.withProps({
+  variant: "subtle",
+  size: "xs",
+});
+
+const CancelButton = Button.withProps({
+  variant: "subtle",
+  color: "red",
+  size: "xs",
+});
+
+function formatTaskId(taskId: string): string {
+  return `Task: ${taskId}`;
+}
+
+function formatTimeline(
+  startedAt: string,
+  completedAt?: string,
+  elapsed?: string,
+): string {
+  let result = `Started: ${startedAt}`;
+  if (completedAt) result += ` | Completed: ${completedAt}`;
+  if (elapsed) result += ` | Elapsed: ${elapsed}`;
+  return result;
+}
+
 export function TaskCard({
   taskId,
   status,
@@ -52,46 +104,34 @@ export function TaskCard({
   const isActive = status === "waiting" || status === "running";
 
   return (
-    <Card withBorder padding="md">
+    <TaskContainer>
       <Stack gap="xs">
         <Group justify="space-between">
           <Group>
-            <Text size="sm" ff="monospace">
-              Task: {taskId}
-            </Text>
+            <TaskIdText>{formatTaskId(taskId)}</TaskIdText>
             <Badge color={STATUS_COLORS[status]}>{status}</Badge>
           </Group>
           {progress !== undefined && <ProgressDisplay progress={progress} />}
         </Group>
 
-        <Text size="sm" c="dimmed">
-          Method:{" "}
-          <Text component="span" fw={600}>
-            {method}
-          </Text>
-        </Text>
+        <DetailText>
+          Method: <ValueSpan>{method}</ValueSpan>
+        </DetailText>
 
         {target && (
-          <Text size="sm" c="dimmed">
-            Tool/Resource:{" "}
-            <Text component="span" fw={600}>
-              {target}
-            </Text>
-          </Text>
+          <DetailText>
+            Tool/Resource: <ValueSpan>{target}</ValueSpan>
+          </DetailText>
         )}
 
         {startedAt && (
-          <Text size="sm" c="dimmed">
-            Started: {startedAt}
-            {completedAt && <> | Completed: {completedAt}</>}
-            {elapsed && <> | Elapsed: {elapsed}</>}
-          </Text>
+          <DetailText>
+            {formatTimeline(startedAt, completedAt, elapsed)}
+          </DetailText>
         )}
 
         {progressDescription && (
-          <Text size="sm" c="dimmed" fs="italic">
-            {progressDescription}
-          </Text>
+          <ProgressNote>{progressDescription}</ProgressNote>
         )}
 
         {error && (
@@ -103,25 +143,17 @@ export function TaskCard({
         <Group justify="flex-end">
           {isActive ? (
             <>
-              <Button variant="subtle" size="xs" onClick={onViewDetails}>
-                View Details
-              </Button>
-              <Button variant="subtle" color="red" size="xs" onClick={onCancel}>
-                Cancel
-              </Button>
+              <SubtleButton onClick={onViewDetails}>View Details</SubtleButton>
+              <CancelButton onClick={onCancel}>Cancel</CancelButton>
             </>
           ) : (
             <>
-              <Button variant="subtle" size="xs" onClick={onViewResult}>
-                View Result
-              </Button>
-              <Button variant="subtle" size="xs" onClick={onDismiss}>
-                Dismiss
-              </Button>
+              <SubtleButton onClick={onViewResult}>View Result</SubtleButton>
+              <SubtleButton onClick={onDismiss}>Dismiss</SubtleButton>
             </>
           )}
         </Group>
       </Stack>
-    </Card>
+    </TaskContainer>
   );
 }
diff --git a/clients/web/src/components/molecules/ToolDetailPanel/ToolDetailPanel.tsx b/clients/web/src/components/molecules/ToolDetailPanel/ToolDetailPanel.tsx
index 2955830a..69927bab 100644
--- a/clients/web/src/components/molecules/ToolDetailPanel/ToolDetailPanel.tsx
+++ b/clients/web/src/components/molecules/ToolDetailPanel/ToolDetailPanel.tsx
@@ -26,6 +26,43 @@ export interface ToolDetailPanelProps {
   onCancel: () => void;
 }
 
+const ToolTitle = Text.withProps({
+  fw: 700,
+  size: "lg",
+  truncate: "end",
+});
+
+const HintsText = Text.withProps({
+  size: "xs",
+  c: "dimmed",
+  fs: "italic",
+});
+
+const DescriptionText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+});
+
+const CancelButton = Button.withProps({
+  variant: "light",
+  color: "red",
+});
+
+function resolveTitle(name: string, title?: string): string {
+  return title ?? name;
+}
+
+function hasAnyAnnotation(annotations?: ToolAnnotations): boolean {
+  return !!(
+    annotations &&
+    (annotations.audience ||
+      annotations.readOnly ||
+      annotations.destructive ||
+      annotations.longRunning ||
+      annotations.hints)
+  );
+}
+
 export function ToolDetailPanel({
   name,
   title,
@@ -39,20 +76,10 @@ export function ToolDetailPanel({
   onExecute,
   onCancel,
 }: ToolDetailPanelProps) {
-  const hasAnnotations =
-    annotations &&
-    (annotations.audience ||
-      annotations.readOnly ||
-      annotations.destructive ||
-      annotations.longRunning ||
-      annotations.hints);
-
   return (
     <Stack gap="md" miw={0}>
-      <Text fw={700} size="lg" truncate="end">
-        {title ?? name}
-      </Text>
-      {hasAnnotations && (
+      <ToolTitle>{resolveTitle(name, title)}</ToolTitle>
+      {hasAnyAnnotation(annotations) && annotations && (
         <Group gap="xs">
           {annotations.audience && (
             <AnnotationBadge label={annotations.audience} variant="audience" />
@@ -66,19 +93,11 @@ export function ToolDetailPanel({
           {annotations.longRunning && (
             <AnnotationBadge label="long-run" variant="longRun" />
           )}
-          {annotations.hints && (
-            <Text size="xs" c="dimmed" fs="italic">
-              {annotations.hints}
-            </Text>
-          )}
+          {annotations.hints && <HintsText>{annotations.hints}</HintsText>}
         </Group>
       )}
 
-      {description && (
-        <Text size="sm" c="dimmed">
-          {description}
-        </Text>
-      )}
+      {description && <DescriptionText>{description}</DescriptionText>}
 
       <Divider />
 
@@ -105,11 +124,7 @@ export function ToolDetailPanel({
         >
           Execute Tool
         </Button>
-        {isExecuting && (
-          <Button variant="light" color="red" onClick={onCancel}>
-            Cancel
-          </Button>
-        )}
+        {isExecuting && <CancelButton onClick={onCancel}>Cancel</CancelButton>}
       </Group>
     </Stack>
   );
diff --git a/clients/web/src/components/molecules/ToolListItem/ToolListItem.tsx b/clients/web/src/components/molecules/ToolListItem/ToolListItem.tsx
index f54b6c3e..bbe8c427 100644
--- a/clients/web/src/components/molecules/ToolListItem/ToolListItem.tsx
+++ b/clients/web/src/components/molecules/ToolListItem/ToolListItem.tsx
@@ -7,6 +7,21 @@ export interface ToolListItemProps {
   onClick: () => void;
 }
 
+const ItemLabel = Text.withProps({
+  fw: 500,
+  truncate: true,
+});
+
+const ItemSubLabel = Text.withProps({
+  size: "xs",
+  c: "dimmed",
+  truncate: true,
+});
+
+function resolveLabel(name: string, title?: string): string {
+  return title ?? name;
+}
+
 export function ToolListItem({
   name,
   title,
@@ -17,19 +32,13 @@ export function ToolListItem({
     <UnstyledButton
       w="100%"
       p="sm"
+      variant="listItem"
       bg={selected ? "var(--mantine-primary-color-light)" : undefined}
-      style={{ borderRadius: "var(--mantine-radius-md)" }}
       onClick={onClick}
     >
       <Stack gap={2}>
-        <Text fw={500} truncate>
-          {title ?? name}
-        </Text>
-        {title && (
-          <Text size="xs" c="dimmed" truncate>
-            {name}
-          </Text>
-        )}
+        <ItemLabel>{resolveLabel(name, title)}</ItemLabel>
+        {title && <ItemSubLabel>{name}</ItemSubLabel>}
       </Stack>
     </UnstyledButton>
   );
diff --git a/clients/web/src/theme/UnstyledButton.ts b/clients/web/src/theme/UnstyledButton.ts
new file mode 100644
index 00000000..bc2641cd
--- /dev/null
+++ b/clients/web/src/theme/UnstyledButton.ts
@@ -0,0 +1,10 @@
+import { UnstyledButton } from "@mantine/core";
+
+export const ThemeUnstyledButton = UnstyledButton.extend({
+  styles: (_theme, props) => {
+    if (props.variant === "listItem") {
+      return { root: { borderRadius: "var(--mantine-radius-md)" } };
+    }
+    return { root: {} };
+  },
+});
diff --git a/clients/web/src/theme/index.ts b/clients/web/src/theme/index.ts
index 4d1d198a..1736ef0a 100644
--- a/clients/web/src/theme/index.ts
+++ b/clients/web/src/theme/index.ts
@@ -9,3 +9,4 @@ export { ThemePaper } from "./Paper";
 export { ThemeSelect } from "./Select";
 export { ThemeSwitch } from "./Switch";
 export { ThemeTextInput } from "./TextInput";
+export { ThemeUnstyledButton } from "./UnstyledButton";
diff --git a/clients/web/src/theme/theme.ts b/clients/web/src/theme/theme.ts
index 9363d36d..42ca6e95 100644
--- a/clients/web/src/theme/theme.ts
+++ b/clients/web/src/theme/theme.ts
@@ -11,6 +11,7 @@ import {
   ThemeSelect,
   ThemeSwitch,
   ThemeTextInput,
+  ThemeUnstyledButton,
 } from "./index";
 
 export const theme = createTheme({
@@ -45,5 +46,6 @@ export const theme = createTheme({
     Select: ThemeSelect,
     Switch: ThemeSwitch,
     TextInput: ThemeTextInput,
+    UnstyledButton: ThemeUnstyledButton,
   },
 });