From 21a1034f83bc01055e25761e2a0526cea4e0a4cf Mon Sep 17 00:00:00 2001
From: anuphilipp3 <anuphilipp3@gmail.com>
Date: Mon, 24 Aug 2026 15:03:35 +0530
Subject: [PATCH] Network & API

---
 apps/desktop-ui/AGENTS.md                     |   9 +
 apps/desktop-ui/CLAUDE.md                     |   1 +
 .../curl-to-code/curl-to-code-layout.tsx      | 149 ++++++-----
 .../http-status-codes-layout.tsx              | 201 +++++++-------
 .../ip-subnet-calculator-layout.tsx           |  38 ++-
 .../mime-type-lookup-layout.tsx               | 245 +++++++++---------
 .../user-agent-parser-layout.tsx              | 139 +++++-----
 .../websocket-tester-layout.tsx               |  75 +++---
 .../whois-lookup/whois-lookup-layout.tsx      |  64 +++--
 9 files changed, 445 insertions(+), 476 deletions(-)
 create mode 100644 apps/desktop-ui/AGENTS.md
 create mode 100644 apps/desktop-ui/CLAUDE.md

diff --git a/apps/desktop-ui/AGENTS.md b/apps/desktop-ui/AGENTS.md
new file mode 100644
index 00000000..643577df
--- /dev/null
+++ b/apps/desktop-ui/AGENTS.md
@@ -0,0 +1,9 @@
+<!-- BEGIN:nextjs-agent-rules -->
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
+<!-- END:nextjs-agent-rules -->
diff --git a/apps/desktop-ui/CLAUDE.md b/apps/desktop-ui/CLAUDE.md
new file mode 100644
index 00000000..43c994c2
--- /dev/null
+++ b/apps/desktop-ui/CLAUDE.md
@@ -0,0 +1 @@
+@AGENTS.md
diff --git a/apps/desktop-ui/src/components/curl-to-code/curl-to-code-layout.tsx b/apps/desktop-ui/src/components/curl-to-code/curl-to-code-layout.tsx
index 3f366c6b..c2a95422 100644
--- a/apps/desktop-ui/src/components/curl-to-code/curl-to-code-layout.tsx
+++ b/apps/desktop-ui/src/components/curl-to-code/curl-to-code-layout.tsx
@@ -4,8 +4,6 @@ import React, { useMemo, useState } from 'react'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { useTranslations } from 'next-intl'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
-import { Label } from '@/components/ui/label'
 import {
   Select,
   SelectContent,
@@ -13,11 +11,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { Check, Copy, FileText, Trash2 } from 'lucide-react'
+import { Check, Copy, Trash2 } from 'lucide-react'
 import { IconTerminal2 } from '@tabler/icons-react'
-import { ToolPageHeader } from '@/components/tools/tool-page-header'
-import { RevealItem } from '@/components/dashboard/dashboard-reveal'
-import { CATEGORY_ACCENT } from '@/components/dashboard/types'
+import { ToolShell } from '@/components/tools/tool-shell'
+import { ToolPanels, IOPanel, ToolTextArea } from '@/components/tools/io-panel'
 import { CURL_TARGETS, curlToCode, type CurlTarget } from '@/lib/curl-to-code'
 
 const SAMPLE = `curl -X POST https://api.example.com/v1/users \\
@@ -33,83 +30,95 @@ export function CurlToCodeLayout() {
 
   const result = useMemo(() => curlToCode(input, target), [input, target])
 
-  return (
-    <div className="relative flex h-full min-h-0 w-full flex-col gap-4 overflow-hidden dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconTerminal2}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT['Network & API']}
-          offline={false}
-        />
-      </RevealItem>
+  const toolbar = (
+    <div className="flex flex-wrap items-end gap-4 rounded-lg border border-border bg-card px-4 py-3">
+      <Select value={target} onValueChange={(v) => setTarget(v as CurlTarget)}>
+        <SelectTrigger className="w-[190px]">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {CURL_TARGETS.map((tg) => (
+            <SelectItem key={tg.value} value={tg.value}>
+              {tg.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  )
 
-      <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-2">
-        <Card className="flex flex-col overflow-hidden min-h-0">
-          <div className="flex items-center justify-between border-b border-border/50 bg-muted/30 px-4 py-2.5">
-            <div className="flex items-center gap-2">
-              <FileText className="h-3.5 w-3.5 text-muted-foreground" />
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('panels.input')}</Label>
-            </div>
-            <div className="flex items-center gap-1">
-              <Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={() => setInput(SAMPLE)}>
+  return (
+    <ToolShell
+      icon={IconTerminal2}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
+      <ToolPanels className="lg:grid-cols-2">
+        <IOPanel
+          label={t('panels.input')}
+          actions={
+            <>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2 text-xs"
+                onClick={() => setInput(SAMPLE)}
+              >
                 {t('sample')}
               </Button>
-              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setInput('')} disabled={!input} title={t('clear')}>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6"
+                onClick={() => setInput('')}
+                disabled={!input}
+                title={t('clear')}
+              >
                 <Trash2 className="h-3.5 w-3.5" />
               </Button>
-            </div>
-          </div>
-          <div className="relative min-h-0 flex-1">
-            <textarea
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              placeholder={t('placeholder')}
-              className="absolute inset-0 h-full w-full resize-none bg-transparent p-4 font-mono text-sm placeholder:text-muted-foreground/50 focus:outline-none"
-              spellCheck={false}
-              autoComplete="off"
-            />
-          </div>
-        </Card>
+            </>
+          }
+        >
+          <ToolTextArea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder={t('placeholder')}
+            autoComplete="off"
+          />
+        </IOPanel>
 
-        <Card className="flex flex-col overflow-hidden min-h-0">
-          <div className="flex items-center justify-between gap-2 border-b border-border/50 bg-muted/30 px-4 py-2">
-            <Select value={target} onValueChange={(v) => setTarget(v as CurlTarget)}>
-              <SelectTrigger className="h-8 w-[190px] text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {CURL_TARGETS.map((tg) => (
-                  <SelectItem key={tg.value} value={tg.value}>
-                    {tg.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+        <IOPanel
+          label={t('panels.output')}
+          bodyClassName="overflow-auto"
+          actions={
             <Button
               size="sm"
               variant="secondary"
+              className="h-7"
               disabled={!result.code}
               onClick={() => void copyToClipboard(result.code, { silent: true })}
             >
-              {copied ? <Check className="mr-1.5 h-4 w-4 text-emerald-600" /> : <Copy className="mr-1.5 h-4 w-4" />}
+              {copied ? (
+                <Check className="mr-1.5 h-4 w-4 text-emerald-600" />
+              ) : (
+                <Copy className="mr-1.5 h-4 w-4" />
+              )}
               {copied ? t('copied') : t('copy')}
             </Button>
-          </div>
-          <div className="min-h-0 flex-1 overflow-auto">
-            {result.error ? (
-              <div className="p-4 text-sm text-destructive">{result.error}</div>
-            ) : result.code ? (
-              <pre className="p-4 font-mono text-sm leading-relaxed whitespace-pre">{result.code}</pre>
-            ) : (
-              <div className="p-4 text-sm text-muted-foreground">{t('outputPlaceholder')}</div>
-            )}
-          </div>
-        </Card>
-      </div>
-    </div>
+          }
+        >
+          {result.error ? (
+            <div className="p-3 text-sm text-destructive">{result.error}</div>
+          ) : result.code ? (
+            <pre className="whitespace-pre p-3 font-mono text-sm leading-relaxed">
+              {result.code}
+            </pre>
+          ) : (
+            <div className="p-3 text-sm text-muted-foreground">{t('outputPlaceholder')}</div>
+          )}
+        </IOPanel>
+      </ToolPanels>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/http-status-codes/http-status-codes-layout.tsx b/apps/desktop-ui/src/components/http-status-codes/http-status-codes-layout.tsx
index fea26eb6..ac1e0ec7 100644
--- a/apps/desktop-ui/src/components/http-status-codes/http-status-codes-layout.tsx
+++ b/apps/desktop-ui/src/components/http-status-codes/http-status-codes-layout.tsx
@@ -2,7 +2,6 @@
 
 import { useMemo, useState } from 'react'
 import { useTranslations } from 'next-intl'
-import { Card, CardContent } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import {
@@ -21,10 +20,8 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { CopyButton } from '@/components/tools/copy-button'
-import { ToolPageHeader } from '@/components/tools/tool-page-header'
-import { ToolWrapper } from '@/components/tools/tool-wrapper'
-import { CATEGORY_ACCENT } from '@/components/dashboard/types'
 import { IconListNumbers } from '@tabler/icons-react'
+import { ToolShell } from '@/components/tools/tool-shell'
 import { HTTP_STATUS_CODES, type HttpStatusClass } from '@/lib/http-status-codes'
 
 type ClassFilter = 'all' | HttpStatusClass
@@ -74,112 +71,106 @@ export function HttpStatusCodesLayout() {
     })
   }, [classFilter, query])
 
-  return (
-    <ToolWrapper toolId="http-status-codes" maxWidth="5xl">
-      <ToolPageHeader
-        icon={IconListNumbers}
-        title={t('title')}
-        description={t('subtitle')}
-        accent={CATEGORY_ACCENT['Network & API']}
-        offline={false}
-      />
-
-      <div className="mt-6 space-y-4">
-        <Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
-          <CardContent className="pt-6">
-            <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-              <div className="flex-1">
-                <Input
-                  value={query}
-                  onChange={(e) => setQuery(e.target.value)}
-                  placeholder={t('searchPlaceholder')}
-                  className="h-10"
-                  autoFocus
-                />
-              </div>
-              <div className="w-full sm:w-64">
-                <Select
-                  value={classFilter}
-                  onValueChange={(v) => setClassFilter(v as ClassFilter)}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder={t('classFilterPlaceholder')} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">{t('classFilterAll')}</SelectItem>
-                    {(['1xx', '2xx', '3xx', '4xx', '5xx'] as const).map((c) => (
-                      <SelectItem key={c} value={c}>
-                        {classLabel(c)}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="shrink-0 text-xs text-muted-foreground tabular-nums">
-                {t('resultsCount', { count: filtered.length, total: HTTP_STATUS_CODES.length })}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+  const toolbar = (
+    <div className="rounded-lg border border-border bg-card px-4 py-3">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <div className="flex-1">
+          <Input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t('searchPlaceholder')}
+            className="h-10"
+            autoFocus
+          />
+        </div>
+        <div className="w-full sm:w-64">
+          <Select
+            value={classFilter}
+            onValueChange={(v) => setClassFilter(v as ClassFilter)}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder={t('classFilterPlaceholder')} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{t('classFilterAll')}</SelectItem>
+              {(['1xx', '2xx', '3xx', '4xx', '5xx'] as const).map((c) => (
+                <SelectItem key={c} value={c}>
+                  {classLabel(c)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="shrink-0 text-xs text-muted-foreground tabular-nums">
+          {t('resultsCount', { count: filtered.length, total: HTTP_STATUS_CODES.length })}
+        </div>
+      </div>
+    </div>
+  )
 
-        <Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm overflow-hidden">
-          <div className="max-h-[70vh] overflow-auto">
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10">
+  return (
+    <ToolShell
+      icon={IconListNumbers}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
+      <div className="overflow-hidden rounded-lg border border-border bg-card">
+        <div className="max-h-[70vh] overflow-auto">
+          <Table>
+            <TableHeader className="sticky top-0 bg-background z-10">
+              <TableRow>
+                <TableHead className="w-[120px]">{t('table.code')}</TableHead>
+                <TableHead className="w-[220px]">{t('table.phrase')}</TableHead>
+                <TableHead>{t('table.description')}</TableHead>
+                <TableHead className="w-[90px] text-right">{t('table.copy')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filtered.length === 0 ? (
                 <TableRow>
-                  <TableHead className="w-[120px]">{t('table.code')}</TableHead>
-                  <TableHead className="w-[220px]">{t('table.phrase')}</TableHead>
-                  <TableHead>{t('table.description')}</TableHead>
-                  <TableHead className="w-[90px] text-right">{t('table.copy')}</TableHead>
+                  <TableCell colSpan={4} className="py-10 text-center text-muted-foreground">
+                    {t('noResults', { query })}
+                  </TableCell>
                 </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filtered.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={4} className="py-10 text-center text-muted-foreground">
-                      {t('noResults', { query })}
+              ) : (
+                filtered.map((s) => (
+                  <TableRow key={s.code}>
+                    <TableCell className="font-mono font-semibold">
+                      <div className="flex items-center gap-2">
+                        <span>{s.code}</span>
+                        <Badge
+                          variant="outline"
+                          className={`text-[11px] px-2 py-0.5 ${badgeClass(s.class)}`}
+                        >
+                          {s.class}
+                        </Badge>
+                      </div>
+                    </TableCell>
+                    <TableCell className="font-medium">{s.phrase}</TableCell>
+                    <TableCell className="text-muted-foreground">
+                      <span>{s.description}</span>
+                      {s.spec ? (
+                        <span className="ml-2 text-xs text-muted-foreground/80">
+                          {t('specPrefix')} {s.spec}
+                        </span>
+                      ) : null}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <CopyButton
+                        text={String(s.code)}
+                        successMessage={t('copied')}
+                        variant="ghost"
+                        size="icon"
+                      />
                     </TableCell>
                   </TableRow>
-                ) : (
-                  filtered.map((s) => (
-                    <TableRow key={s.code}>
-                      <TableCell className="font-mono font-semibold">
-                        <div className="flex items-center gap-2">
-                          <span>{s.code}</span>
-                          <Badge
-                            variant="outline"
-                            className={`text-[11px] px-2 py-0.5 ${badgeClass(s.class)}`}
-                          >
-                            {s.class}
-                          </Badge>
-                        </div>
-                      </TableCell>
-                      <TableCell className="font-medium">{s.phrase}</TableCell>
-                      <TableCell className="text-muted-foreground">
-                        <span>{s.description}</span>
-                        {s.spec ? (
-                          <span className="ml-2 text-xs text-muted-foreground/80">
-                            {t('specPrefix')} {s.spec}
-                          </span>
-                        ) : null}
-                      </TableCell>
-                      <TableCell className="text-right">
-                        <CopyButton
-                          text={String(s.code)}
-                          successMessage={t('copied')}
-                          variant="ghost"
-                          size="icon"
-                        />
-                      </TableCell>
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        </Card>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
       </div>
-    </ToolWrapper>
+    </ToolShell>
   )
 }
-
diff --git a/apps/desktop-ui/src/components/ip-subnet-calculator/ip-subnet-calculator-layout.tsx b/apps/desktop-ui/src/components/ip-subnet-calculator/ip-subnet-calculator-layout.tsx
index 73756c93..7c33e307 100644
--- a/apps/desktop-ui/src/components/ip-subnet-calculator/ip-subnet-calculator-layout.tsx
+++ b/apps/desktop-ui/src/components/ip-subnet-calculator/ip-subnet-calculator-layout.tsx
@@ -4,7 +4,6 @@ import { useMemo, useState } from 'react';
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { useTranslations } from 'next-intl';
 import { useDebouncedCallback } from 'use-debounce';
-import { Card } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -13,9 +12,7 @@ import { Copy, Check } from 'lucide-react';
 import { computeIpv4Subnet, computeIpv6Subnet } from '@/lib/ip-subnet';
 import { cn } from '@/lib/utils';
 import { IconHierarchy2 } from '@tabler/icons-react';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
-import { CATEGORY_ACCENT } from '@/components/dashboard/types';
+import { ToolShell } from '@/components/tools/tool-shell';
 
 function Row({
   label,
@@ -78,16 +75,11 @@ export function IpSubnetCalculatorLayout() {
   const ipv6Result = useMemo(() => computeIpv6Subnet(ipv6Debounced), [ipv6Debounced]);
 
   return (
-    <div className="flex h-full min-h-0 w-full flex-col gap-4">
-      <RevealItem index={0} className="shrink-0">
-        <ToolPageHeader
-          icon={IconHierarchy2}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT['Network & API']}
-        />
-      </RevealItem>
-
+    <ToolShell
+      icon={IconHierarchy2}
+      title={t('title')}
+      description={t('subtitle')}
+    >
       <Tabs value={family} onValueChange={(v) => setFamily(v as 'ipv4' | 'ipv6')} className="flex min-h-0 flex-1 flex-col gap-4">
         <TabsList className="grid w-full max-w-md grid-cols-2">
           <TabsTrigger value="ipv4">{t('tabIpv4')}</TabsTrigger>
@@ -95,7 +87,7 @@ export function IpSubnetCalculatorLayout() {
         </TabsList>
 
         <TabsContent value="ipv4" className="mt-0 flex min-h-0 flex-1 flex-col gap-4 data-[state=inactive]:hidden">
-          <Card className="space-y-3 p-4">
+          <div className="space-y-3 rounded-lg border border-border bg-card px-4 py-3">
             <div className="space-y-2">
               <Label htmlFor="ipv4-input">{t('inputLabel')}</Label>
               <Input
@@ -109,9 +101,9 @@ export function IpSubnetCalculatorLayout() {
               />
               <p className="text-xs text-muted-foreground">{t('hintIpv4')}</p>
             </div>
-          </Card>
+          </div>
 
-          <Card className="flex flex-col gap-2 p-4">
+          <div className="flex flex-col gap-2 rounded-lg border border-border bg-card p-4">
             {!ipv4Result.ok ? (
               <p className="text-sm text-destructive">{t(`errors.${ipv4Result.errorKey}`)}</p>
             ) : (
@@ -147,11 +139,11 @@ export function IpSubnetCalculatorLayout() {
                 )}
               </>
             )}
-          </Card>
+          </div>
         </TabsContent>
 
         <TabsContent value="ipv6" className="mt-0 flex min-h-0 flex-1 flex-col gap-4 data-[state=inactive]:hidden">
-          <Card className="space-y-3 p-4">
+          <div className="space-y-3 rounded-lg border border-border bg-card px-4 py-3">
             <div className="space-y-2">
               <Label htmlFor="ipv6-input">{t('inputLabel')}</Label>
               <Input
@@ -165,9 +157,9 @@ export function IpSubnetCalculatorLayout() {
               />
               <p className="text-xs text-muted-foreground">{t('hintIpv6')}</p>
             </div>
-          </Card>
+          </div>
 
-          <Card className="flex flex-col gap-2 p-4">
+          <div className="flex flex-col gap-2 rounded-lg border border-border bg-card p-4">
             {!ipv6Result.ok ? (
               <p className="text-sm text-destructive">{t(`errors.${ipv6Result.errorKey}`)}</p>
             ) : (
@@ -182,9 +174,9 @@ export function IpSubnetCalculatorLayout() {
                 </p>
               </>
             )}
-          </Card>
+          </div>
         </TabsContent>
       </Tabs>
-    </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/mime-type-lookup/mime-type-lookup-layout.tsx b/apps/desktop-ui/src/components/mime-type-lookup/mime-type-lookup-layout.tsx
index 65b561b1..ae631509 100644
--- a/apps/desktop-ui/src/components/mime-type-lookup/mime-type-lookup-layout.tsx
+++ b/apps/desktop-ui/src/components/mime-type-lookup/mime-type-lookup-layout.tsx
@@ -2,7 +2,6 @@
 
 import { useMemo, useState } from 'react'
 import { useTranslations } from 'next-intl'
-import { Card } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Button } from '@/components/ui/button'
@@ -10,9 +9,7 @@ import { Check, Copy } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { lookupMimeType } from '@/lib/mime-type-lookup'
 import { IconFileInfo } from '@tabler/icons-react'
-import { ToolPageHeader } from '@/components/tools/tool-page-header'
-import { RevealItem } from '@/components/dashboard/dashboard-reveal'
-import { CATEGORY_ACCENT } from '@/components/dashboard/types'
+import { ToolShell } from '@/components/tools/tool-shell'
 
 async function copyToClipboard(text: string) {
   await navigator.clipboard.writeText(text)
@@ -38,143 +35,133 @@ export function MimeTypeLookupLayout() {
   const canShow = Boolean(value.trim())
   const hasMatch = Boolean(result.mimeType)
 
-  return (
-    <div className="flex h-full min-h-0 w-full flex-col gap-4">
-      <RevealItem index={0} className="shrink-0">
-        <ToolPageHeader
-          icon={IconFileInfo}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT['Network & API']}
+  const toolbar = (
+    <div className="flex flex-wrap items-end gap-4 rounded-lg border border-border bg-card px-4 py-3">
+      <div className="min-w-0 flex-1 space-y-2">
+        <Label htmlFor="mime-input">{t('inputLabel')}</Label>
+        <Input
+          id="mime-input"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={t('placeholder')}
+          spellCheck={false}
+          autoComplete="off"
+          inputMode="text"
         />
-      </RevealItem>
+        <p className="text-xs text-muted-foreground">{t('hint')}</p>
+      </div>
 
-      <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-2">
-        <Card className="flex flex-col gap-4 overflow-auto p-4">
-          <div className="space-y-2">
-            <Label htmlFor="mime-input">{t('inputLabel')}</Label>
-            <Input
-              id="mime-input"
-              value={value}
-              onChange={(e) => setValue(e.target.value)}
-              placeholder={t('placeholder')}
-              spellCheck={false}
-              autoComplete="off"
-              inputMode="text"
-            />
-            <p className="text-xs text-muted-foreground">{t('hint')}</p>
-          </div>
+      <div className="flex flex-wrap gap-2">
+        <Button type="button" variant="secondary" size="sm" onClick={() => setValue('')}>
+          {t('clear')}
+        </Button>
+        <Button type="button" variant="outline" size="sm" onClick={() => setValue('package.json')}>
+          {t('exampleFilename')}
+        </Button>
+        <Button type="button" variant="outline" size="sm" onClick={() => setValue('.png')}>
+          {t('exampleExtension')}
+        </Button>
+      </div>
+    </div>
+  )
 
-          <div className="flex flex-wrap gap-2">
-            <Button type="button" variant="secondary" size="sm" onClick={() => setValue('')}>
-              {t('clear')}
-            </Button>
+  return (
+    <ToolShell
+      icon={IconFileInfo}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
+      <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-auto rounded-lg border border-border bg-card p-4">
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+            {t('resultLabel')}
+          </span>
+          {hasMatch && (
             <Button
               type="button"
-              variant="outline"
               size="sm"
-              onClick={() => setValue('package.json')}
+              variant="secondary"
+              onClick={async () => {
+                if (!result.mimeType) return
+                try {
+                  await copyToClipboard(result.mimeType)
+                  setCopiedKey('mimeType')
+                  setTimeout(() => setCopiedKey(null), 1500)
+                } catch {
+                  /* ignore */
+                }
+              }}
             >
-              {t('exampleFilename')}
-            </Button>
-            <Button type="button" variant="outline" size="sm" onClick={() => setValue('.png')}>
-              {t('exampleExtension')}
+              {copiedKey === 'mimeType' ? (
+                <Check className="mr-1.5 h-4 w-4 text-emerald-600" />
+              ) : (
+                <Copy className="mr-1.5 h-4 w-4" />
+              )}
+              {copiedKey === 'mimeType' ? t('copied') : t('copyMimeType')}
             </Button>
-          </div>
-        </Card>
-
-        <Card className="flex flex-col gap-3 overflow-auto p-4">
-          <div className="flex items-center justify-between gap-2">
-            <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              {t('resultLabel')}
-            </Label>
-            {hasMatch && (
-              <Button
-                type="button"
-                size="sm"
-                variant="secondary"
-                onClick={async () => {
-                  if (!result.mimeType) return
-                  try {
-                    await copyToClipboard(result.mimeType)
-                    setCopiedKey('mimeType')
-                    setTimeout(() => setCopiedKey(null), 1500)
-                  } catch {
-                    /* ignore */
-                  }
-                }}
-              >
-                {copiedKey === 'mimeType' ? (
-                  <Check className="mr-1.5 h-4 w-4 text-emerald-600" />
-                ) : (
-                  <Copy className="mr-1.5 h-4 w-4" />
-                )}
-                {copiedKey === 'mimeType' ? t('copied') : t('copyMimeType')}
-              </Button>
-            )}
-          </div>
-
-          <div
-            className={cn(
-              'rounded-md border bg-muted/30 p-3 text-sm',
-              !canShow && 'text-muted-foreground'
-            )}
-          >
-            {!canShow ? (
-              <span>{t('emptyHint')}</span>
-            ) : !hasMatch ? (
-              <span className="text-destructive">{t('notFound')}</span>
-            ) : (
-              <div className="space-y-3">
-                <div className="text-xs text-muted-foreground">
-                  {t('normalizedLabel')}{' '}
-                  <span className="font-mono text-foreground">{result.normalized || '—'}</span>
-                </div>
-
-                <div className="space-y-2">
-                  {items.map((it) => (
-                    <div key={it.key} className="flex items-start justify-between gap-3">
-                      <div className="min-w-0">
-                        <div className="text-xs font-medium text-muted-foreground">{it.label}</div>
-                        <div className="font-mono break-all">{it.value ?? '—'}</div>
-                      </div>
+          )}
+        </div>
+
+        <div
+          className={cn(
+            'rounded-md border bg-muted/30 p-3 text-sm',
+            !canShow && 'text-muted-foreground'
+          )}
+        >
+          {!canShow ? (
+            <span>{t('emptyHint')}</span>
+          ) : !hasMatch ? (
+            <span className="text-destructive">{t('notFound')}</span>
+          ) : (
+            <div className="space-y-3">
+              <div className="text-xs text-muted-foreground">
+                {t('normalizedLabel')}{' '}
+                <span className="font-mono text-foreground">{result.normalized || '—'}</span>
+              </div>
 
-                      {it.value && (
-                        <Button
-                          type="button"
-                          size="icon"
-                          variant="ghost"
-                          className="shrink-0"
-                          onClick={async () => {
-                            try {
-                              await copyToClipboard(it.value!)
-                              setCopiedKey(it.key)
-                              setTimeout(() => setCopiedKey(null), 1500)
-                            } catch {
-                              /* ignore */
-                            }
-                          }}
-                          title={t('copy')}
-                          aria-label={t('copy')}
-                        >
-                          {copiedKey === it.key ? (
-                            <Check className="h-4 w-4 text-emerald-600" />
-                          ) : (
-                            <Copy className="h-4 w-4" />
-                          )}
-                        </Button>
-                      )}
+              <div className="space-y-2">
+                {items.map((it) => (
+                  <div key={it.key} className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <div className="text-xs font-medium text-muted-foreground">{it.label}</div>
+                      <div className="font-mono break-all">{it.value ?? '—'}</div>
                     </div>
-                  ))}
-                </div>
+
+                    {it.value && (
+                      <Button
+                        type="button"
+                        size="icon"
+                        variant="ghost"
+                        className="shrink-0"
+                        onClick={async () => {
+                          try {
+                            await copyToClipboard(it.value!)
+                            setCopiedKey(it.key)
+                            setTimeout(() => setCopiedKey(null), 1500)
+                          } catch {
+                            /* ignore */
+                          }
+                        }}
+                        title={t('copy')}
+                        aria-label={t('copy')}
+                      >
+                        {copiedKey === it.key ? (
+                          <Check className="h-4 w-4 text-emerald-600" />
+                        ) : (
+                          <Copy className="h-4 w-4" />
+                        )}
+                      </Button>
+                    )}
+                  </div>
+                ))}
               </div>
-            )}
-          </div>
+            </div>
+          )}
+        </div>
 
-          <p className="text-xs text-muted-foreground">{t('localNote')}</p>
-        </Card>
+        <p className="text-xs text-muted-foreground">{t('localNote')}</p>
       </div>
-    </div>
+    </ToolShell>
   )
 }
-
diff --git a/apps/desktop-ui/src/components/user-agent-parser/user-agent-parser-layout.tsx b/apps/desktop-ui/src/components/user-agent-parser/user-agent-parser-layout.tsx
index aa427d89..daf61668 100644
--- a/apps/desktop-ui/src/components/user-agent-parser/user-agent-parser-layout.tsx
+++ b/apps/desktop-ui/src/components/user-agent-parser/user-agent-parser-layout.tsx
@@ -2,17 +2,13 @@
 
 import { useMemo, useState } from 'react'
 import { useTranslations } from 'next-intl'
-import { Card } from '@/components/ui/card'
-import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
 import { Button } from '@/components/ui/button'
 import { Check, Copy } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { parseUserAgent } from '@/lib/user-agent-parser'
 import { IconUserSearch } from '@tabler/icons-react'
-import { ToolPageHeader } from '@/components/tools/tool-page-header'
-import { RevealItem } from '@/components/dashboard/dashboard-reveal'
-import { CATEGORY_ACCENT } from '@/components/dashboard/types'
+import { ToolShell } from '@/components/tools/tool-shell'
+import { ToolPanels, IOPanel, ToolTextArea } from '@/components/tools/io-panel'
 
 async function copyToClipboard(text: string) {
   await navigator.clipboard.writeText(text)
@@ -50,73 +46,73 @@ export function UserAgentParserLayout() {
   const json = useMemo(() => (result ? JSON.stringify(result, null, 2) : ''), [result])
 
   return (
-    <div className="flex h-full min-h-0 w-full flex-col gap-4">
-      <RevealItem index={0} className="shrink-0">
-        <ToolPageHeader
-          icon={IconUserSearch}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT['Network & API']}
-        />
-      </RevealItem>
-
-      <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-2">
-        <Card className="flex flex-col gap-4 overflow-auto p-4">
-          <div className="space-y-2">
-            <Label htmlFor="ua-input">{t('inputLabel')}</Label>
-            <Textarea
-              id="ua-input"
+    <ToolShell
+      icon={IconUserSearch}
+      title={t('title')}
+      description={t('subtitle')}
+    >
+      <ToolPanels className="lg:grid-cols-2">
+        <IOPanel
+          label={t('inputLabel')}
+          bodyClassName="flex flex-col"
+          actions={
+            <>
+              <Button type="button" variant="secondary" size="sm" className="h-7" onClick={() => setUa('')}>
+                {t('clear')}
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-7"
+                onClick={() =>
+                  setUa(
+                    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36'
+                  )
+                }
+              >
+                {t('exampleDesktop')}
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-7"
+                onClick={() =>
+                  setUa(
+                    'Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile/15E148 Safari/604.1'
+                  )
+                }
+              >
+                {t('exampleMobile')}
+              </Button>
+            </>
+          }
+        >
+          <div className="relative min-h-0 flex-1">
+            <ToolTextArea
               value={ua}
               onChange={(e) => setUa(e.target.value)}
               placeholder={t('placeholder')}
-              className="min-h-[180px] resize-y font-mono text-sm"
-              spellCheck={false}
               autoComplete="off"
+              aria-label={t('inputLabel')}
             />
-            <p className="text-xs text-muted-foreground">{t('hint')}</p>
-          </div>
-
-          <div className="flex flex-wrap gap-2">
-            <Button type="button" variant="secondary" size="sm" onClick={() => setUa('')}>
-              {t('clear')}
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={() =>
-                setUa(
-                  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36'
-                )
-              }
-            >
-              {t('exampleDesktop')}
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={() =>
-                setUa(
-                  'Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile/15E148 Safari/604.1'
-                )
-              }
-            >
-              {t('exampleMobile')}
-            </Button>
           </div>
-        </Card>
+          <p className="shrink-0 border-t border-border/50 px-3 py-1.5 text-xs text-muted-foreground">
+            {t('hint')}
+          </p>
+        </IOPanel>
 
-        <Card className="flex flex-col gap-3 overflow-auto p-4">
-          <div className="flex items-center justify-between gap-2">
-            <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              {t('resultLabel')}
-            </Label>
-            {canCopyJson && (
+        <IOPanel
+          label={t('resultLabel')}
+          bodyClassName="flex flex-col"
+          actions={
+            canCopyJson && (
               <Button
                 type="button"
                 size="sm"
                 variant="secondary"
+                className="h-7"
                 onClick={async () => {
                   try {
                     await copyToClipboard(json)
@@ -134,12 +130,12 @@ export function UserAgentParserLayout() {
                 )}
                 {copiedKey === 'json' ? t('copied') : t('copyJson')}
               </Button>
-            )}
-          </div>
-
+            )
+          }
+        >
           <div
             className={cn(
-              'rounded-md border bg-muted/30 p-3 text-sm',
+              'min-h-0 flex-1 overflow-auto p-3 text-sm',
               !canShow && 'text-muted-foreground'
             )}
           >
@@ -183,11 +179,12 @@ export function UserAgentParserLayout() {
               </div>
             )}
           </div>
-
-          <p className="text-xs text-muted-foreground">{t('localNote')}</p>
-        </Card>
-      </div>
-    </div>
+          <p className="shrink-0 border-t border-border/50 px-3 py-1.5 text-xs text-muted-foreground">
+            {t('localNote')}
+          </p>
+        </IOPanel>
+      </ToolPanels>
+    </ToolShell>
   )
 }
 
diff --git a/apps/desktop-ui/src/components/websocket-tester/websocket-tester-layout.tsx b/apps/desktop-ui/src/components/websocket-tester/websocket-tester-layout.tsx
index b399cffa..257a47c3 100644
--- a/apps/desktop-ui/src/components/websocket-tester/websocket-tester-layout.tsx
+++ b/apps/desktop-ui/src/components/websocket-tester/websocket-tester-layout.tsx
@@ -5,13 +5,10 @@ import { useTranslations } from 'next-intl'
 import { saveAs } from 'file-saver'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Badge } from '@/components/ui/badge'
 import { Switch } from '@/components/ui/switch'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Textarea } from '@/components/ui/textarea'
 import {
   ArrowDown,
   ArrowUp,
@@ -28,9 +25,8 @@ import {
 import { IconPlugConnected } from '@tabler/icons-react'
 import { cn } from '@/lib/utils'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
-import { ToolPageHeader } from '@/components/tools/tool-page-header'
-import { RevealItem } from '@/components/dashboard/dashboard-reveal'
-import { CATEGORY_ACCENT } from '@/components/dashboard/types'
+import { ToolShell } from '@/components/tools/tool-shell'
+import { IOPanel, ToolTextArea } from '@/components/tools/io-panel'
 import {
   describeCloseEvent,
   formatLogEntry,
@@ -252,23 +248,9 @@ export function WebsocketTesterLayout() {
   const isConnected = status === 'connected'
   const isConnecting = status === 'connecting'
 
-  return (
-    <div className="relative flex h-full min-h-0 w-full flex-col gap-4 overflow-hidden dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconPlugConnected}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT['Network & API']}
-          offline={false}
-        />
-      </RevealItem>
-
-      {/* Connection bar */}
-      <Card className="flex flex-wrap items-end gap-3 p-4">
-        <div className="min-w-[240px] flex-1 space-y-1.5">
+  const toolbar = (
+    <div className="flex flex-wrap items-end gap-3 rounded-lg border border-border bg-card px-4 py-3">
+      <div className="min-w-[240px] flex-1 space-y-1.5">
           <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
             {t('urlLabel')}
           </Label>
@@ -323,20 +305,28 @@ export function WebsocketTesterLayout() {
           />
           {t(`status.${status}`)}
         </Badge>
-      </Card>
+      </div>
+  )
 
+  return (
+    <ToolShell
+      icon={IconPlugConnected}
+      title={t('title')}
+      description={t('subtitle')}
+      offline={false}
+      toolbar={toolbar}
+      contentClassName="gap-4"
+    >
       {/* Message log */}
-      <Card className="flex min-h-0 flex-1 flex-col overflow-hidden">
-        <div className="flex items-center justify-between border-b border-border/50 bg-muted/30 px-4 py-2.5">
-          <div className="flex items-center gap-2">
-            <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              {t('log.title')}
-            </Label>
+      <IOPanel
+        className="min-h-0 flex-1"
+        bodyClassName="overflow-y-auto"
+        label={t('log.title')}
+        actions={
+          <>
             <Badge variant="secondary" className="h-5 px-2 text-[11px]">
               {entries.length}
             </Badge>
-          </div>
-          <div className="flex items-center gap-1">
             <Button
               variant="ghost"
               size="icon"
@@ -367,10 +357,10 @@ export function WebsocketTesterLayout() {
             >
               <Trash2 className="h-3.5 w-3.5" />
             </Button>
-          </div>
-        </div>
-        <ScrollArea className="min-h-0 flex-1">
-          <div className="flex flex-col gap-1 p-3">
+          </>
+        }
+      >
+        <div className="flex flex-col gap-1 p-3">
             {entries.length === 0 && (
               <p className="px-1 py-6 text-center text-sm text-muted-foreground/60">{t('log.empty')}</p>
             )}
@@ -412,12 +402,11 @@ export function WebsocketTesterLayout() {
             })}
             <div ref={bottomRef} />
           </div>
-        </ScrollArea>
-      </Card>
+      </IOPanel>
 
       {/* Composer */}
-      <Card className="flex flex-col gap-3 p-4">
-        <Textarea
+      <div className="flex flex-col gap-3 rounded-lg border border-border bg-card p-4">
+        <ToolTextArea
           value={draft}
           onChange={(e) => setDraft(e.target.value)}
           onKeyDown={(e) => {
@@ -427,7 +416,7 @@ export function WebsocketTesterLayout() {
             }
           }}
           placeholder={t('composer.placeholder')}
-          className="min-h-[72px] resize-y font-mono text-sm"
+          className="relative h-auto min-h-[72px] resize-y"
           spellCheck={false}
         />
         <div className="flex flex-wrap items-center gap-3">
@@ -464,7 +453,7 @@ export function WebsocketTesterLayout() {
             <Switch id="ws-ping-switch" checked={pingEnabled} onCheckedChange={setPingEnabled} />
           </div>
         </div>
-      </Card>
-    </div>
+      </div>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/whois-lookup/whois-lookup-layout.tsx b/apps/desktop-ui/src/components/whois-lookup/whois-lookup-layout.tsx
index baa9abc4..b5e2ec7e 100644
--- a/apps/desktop-ui/src/components/whois-lookup/whois-lookup-layout.tsx
+++ b/apps/desktop-ui/src/components/whois-lookup/whois-lookup-layout.tsx
@@ -3,7 +3,6 @@
 import React, { useCallback, useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { motion, AnimatePresence } from 'framer-motion'
-import { Card } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
@@ -23,11 +22,8 @@ import {
   Users,
 } from 'lucide-react'
 import { IconWorldSearch } from '@tabler/icons-react'
-import { cn } from '@/lib/utils'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
-import { ToolPageHeader } from '@/components/tools/tool-page-header'
-import { RevealItem } from '@/components/dashboard/dashboard-reveal'
-import { CATEGORY_ACCENT } from '@/components/dashboard/types'
+import { ToolShell } from '@/components/tools/tool-shell'
 import { formatIsoDate, normalizeTarget, relativeTime } from '@/lib/whois-lookup'
 import { rdapLookup, type WhoisResult } from '@/lib/rdap'
 
@@ -37,14 +33,14 @@ function DateCard({ icon: Icon, label, iso }: { icon: React.ElementType; label:
   const date = iso ? formatIsoDate(iso) : null
   const rel = iso ? relativeTime(iso) : null
   return (
-    <Card className="flex flex-col gap-1 p-3">
+    <div className="flex flex-col gap-1 rounded-lg border border-border bg-card p-3">
       <div className="flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
         <Icon className="h-3.5 w-3.5" />
         {label}
       </div>
       <div className="font-mono text-sm">{date ?? '—'}</div>
       {rel && <div className="text-[11px] text-muted-foreground/70">{rel}</div>}
-    </Card>
+    </div>
   )
 }
 
@@ -80,22 +76,9 @@ export function WhoisLookupLayout() {
     [input, t],
   )
 
-  return (
-    <div className="relative flex h-full min-h-0 w-full flex-col gap-4 overflow-hidden dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconWorldSearch}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT['Network & API']}
-          offline={false}
-        />
-      </RevealItem>
-
-      {/* Search card */}
-      <Card className="space-y-3 p-4">
+  const toolbar = (
+    <div className="flex flex-wrap items-end gap-4 rounded-lg border border-border bg-card px-4 py-3">
+      <div className="flex flex-1 flex-col gap-3">
         <div className="flex gap-2">
           <div className="relative flex-1">
             <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
@@ -131,8 +114,19 @@ export function WhoisLookupLayout() {
             </button>
           ))}
         </div>
-      </Card>
+      </div>
+    </div>
+  )
 
+  return (
+    <ToolShell
+      icon={IconWorldSearch}
+      title={t('title')}
+      description={t('subtitle')}
+      offline={false}
+      toolbar={toolbar}
+      contentClassName="gap-4"
+    >
       {/* Error */}
       <AnimatePresence>
         {error && (
@@ -153,10 +147,10 @@ export function WhoisLookupLayout() {
         <div className="space-y-3">
           <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
             {[0, 1, 2, 3].map((i) => (
-              <Card key={i} className="h-[76px] animate-pulse bg-muted/20 p-3" />
+              <div key={i} className="h-[76px] animate-pulse rounded-lg border border-border bg-muted/20 p-3" />
             ))}
           </div>
-          <Card className="h-32 animate-pulse bg-muted/20" />
+          <div className="h-32 animate-pulse rounded-lg border border-border bg-muted/20" />
         </div>
       )}
 
@@ -172,12 +166,12 @@ export function WhoisLookupLayout() {
               </Badge>
             </div>
 
-            <Card className="flex flex-col gap-1 p-3">
+            <div className="flex flex-col gap-1 rounded-lg border border-border bg-card p-3">
               <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
                 {result.type === 'ip' ? t('summary.network') : t('summary.registrar')}
               </div>
               <div className="text-sm">{result.registrar ?? t('notAvailable')}</div>
-            </Card>
+            </div>
 
             {/* Dates */}
             <div className="grid grid-cols-2 gap-3 lg:grid-cols-3">
@@ -204,7 +198,7 @@ export function WhoisLookupLayout() {
 
             {/* Nameservers */}
             {result.nameservers.length > 0 && (
-              <Card className="overflow-hidden">
+              <div className="overflow-hidden rounded-lg border border-border bg-card">
                 <div className="flex items-center gap-2 border-b border-border/40 bg-muted/20 px-4 py-2.5">
                   <Server className="h-3.5 w-3.5 text-muted-foreground" />
                   <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
@@ -221,12 +215,12 @@ export function WhoisLookupLayout() {
                     </div>
                   ))}
                 </div>
-              </Card>
+              </div>
             )}
 
             {/* Contacts */}
             {result.contacts.length > 0 && (
-              <Card className="overflow-hidden">
+              <div className="overflow-hidden rounded-lg border border-border bg-card">
                 <div className="flex items-center gap-2 border-b border-border/40 bg-muted/20 px-4 py-2.5">
                   <Users className="h-3.5 w-3.5 text-muted-foreground" />
                   <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
@@ -263,12 +257,12 @@ export function WhoisLookupLayout() {
                     </tbody>
                   </table>
                 </div>
-              </Card>
+              </div>
             )}
 
             {/* Raw RDAP */}
             <Collapsible>
-              <Card className="overflow-hidden">
+              <div className="overflow-hidden rounded-lg border border-border bg-card">
                 <CollapsibleTrigger className="flex w-full items-center gap-2 px-4 py-2.5 text-left transition-colors hover:bg-muted/20">
                   <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform data-[state=open]:rotate-180" />
                   <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
@@ -298,7 +292,7 @@ export function WhoisLookupLayout() {
                     {JSON.stringify(result.raw, null, 2)}
                   </pre>
                 </CollapsibleContent>
-              </Card>
+              </div>
             </Collapsible>
 
             <div className="flex justify-end">
@@ -315,6 +309,6 @@ export function WhoisLookupLayout() {
           </motion.div>
         </ScrollArea>
       )}
-    </div>
+    </ToolShell>
   )
 }