From e815f4ebd29d518e4ee1e541ad013c4ba4468e2a Mon Sep 17 00:00:00 2001
From: anuphilipp3 <anuphilipp3@gmail.com>
Date: Fri, 21 Aug 2026 19:15:53 +0530
Subject: [PATCH] feat(converters): migrate all 15 Converters onto the shared
 tool kit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 2 of the tool-consistency pass. Every Converter now renders through
ToolShell + IOPanel/ToolTextArea (IO-style) or ToolShell + kit-surface panels
(form-style), instead of hand-rolled Cards + raw textareas — so they share one
visual language with the Formatters and base64.

IO-style (input → output): url-encode, escape-encode, url-parser,
  string-inspector, string-case-converter, line-sort-dedupe, image-to-base64,
  token-counter  (base64 was already migrated in Phase 0)
Form-style (fields → computed result): number-base-converter,
  timestamp-converter, unit-converter, chmod-calculator, csv-excel-json,
  timezone-converter

Also: IOPanel now omits its header row when a panel has neither label nor
actions (avoids an empty header strip; string-inspector's results panel).

Logic preserved (state, handlers, useMemo, i18n, drag-drop, file upload,
mode toggles). 0 type errors; all 15 pages render.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../chmod-calculator-layout.tsx               |  32 +--
 .../csv-excel-json/csv-excel-json-tool.tsx    | 242 +++++++++---------
 .../escape-encode/escape-encode-layout.tsx    | 177 ++++++-------
 .../image-to-base64-layout.tsx                | 183 ++++++-------
 .../line-sort-dedupe-layout.tsx               | 162 ++++++------
 .../number-base-converter-layout.tsx          | 173 +++++++------
 .../string-case-converter-layout.tsx          |  72 ++----
 .../string-inspector-layout.tsx               |  68 ++---
 .../timestamp-converter-layout.tsx            | 107 ++++----
 .../timezone-converter-layout.tsx             |  40 ++-
 .../token-counter/token-counter-layout.tsx    | 123 +++++----
 .../src/components/tools/io-panel.tsx         |  16 +-
 .../unit-converter/unit-converter-layout.tsx  | 100 ++++----
 .../url-encode/url-encode-layout.tsx          | 170 +++++-------
 .../url-parser/url-parser-layout.tsx          | 170 ++++++------
 15 files changed, 826 insertions(+), 1009 deletions(-)

diff --git a/apps/desktop-ui/src/components/chmod-calculator/chmod-calculator-layout.tsx b/apps/desktop-ui/src/components/chmod-calculator/chmod-calculator-layout.tsx
index 4ac72c46..6c8c0c14 100644
--- a/apps/desktop-ui/src/components/chmod-calculator/chmod-calculator-layout.tsx
+++ b/apps/desktop-ui/src/components/chmod-calculator/chmod-calculator-layout.tsx
@@ -4,15 +4,12 @@ import React, { useCallback, useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Check, Copy, SquareTerminal } from 'lucide-react'
 import { IconLockAccess } 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 {
   CHMOD_PRESETS,
   PERMISSION_CLASSES,
@@ -82,22 +79,11 @@ export function ChmodCalculatorLayout() {
   }
 
   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={IconLockAccess}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Converters}
-        />
-      </RevealItem>
-
+    <ToolShell icon={IconLockAccess} title={t('title')} description={t('subtitle')}>
       <div className="min-h-0 flex-1 overflow-y-auto">
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
           {/* Checkbox grid */}
-          <Card className="p-5">
+          <div className="rounded-lg border border-border bg-card p-5">
             <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
               {t('grid.title')}
             </Label>
@@ -174,11 +160,11 @@ export function ChmodCalculatorLayout() {
                 {!symbolicValid && <p className="text-xs text-destructive">{t('symbolic.invalid')}</p>}
               </div>
             </div>
-          </Card>
+          </div>
 
           <div className="flex flex-col gap-4">
             {/* Output */}
-            <Card className="p-5">
+            <div className="rounded-lg border border-border bg-card p-5">
               <div className="flex items-center justify-between">
                 <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                   {t('output.title')}
@@ -204,10 +190,10 @@ export function ChmodCalculatorLayout() {
                 {flags.setgid && <p>{t('explain.setgid')}</p>}
                 {flags.sticky && <p>{t('explain.sticky')}</p>}
               </div>
-            </Card>
+            </div>
 
             {/* Presets */}
-            <Card className="p-5">
+            <div className="rounded-lg border border-border bg-card p-5">
               <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                 {t('presets.title')}
               </Label>
@@ -239,10 +225,10 @@ export function ChmodCalculatorLayout() {
                   </tbody>
                 </table>
               </div>
-            </Card>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/csv-excel-json/csv-excel-json-tool.tsx b/apps/desktop-ui/src/components/csv-excel-json/csv-excel-json-tool.tsx
index 091ee925..509b4dd7 100644
--- a/apps/desktop-ui/src/components/csv-excel-json/csv-excel-json-tool.tsx
+++ b/apps/desktop-ui/src/components/csv-excel-json/csv-excel-json-tool.tsx
@@ -13,14 +13,10 @@ import {
   IconUpload,
 } from "@tabler/icons-react";
 import { toast } from "sonner";
-import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Label } from "@/components/ui/label";
 import { ToolPinButton } from "@/components/tools/tool-header";
-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 { useToolUsage } from "@/hooks/use-tool-usage";
 import { cn } from "@/lib/utils";
 import {
@@ -152,143 +148,141 @@ export function CsvExcelJsonTool() {
   };
 
   return (
-    <div className="relative flex flex-col h-full min-h-0 overflow-auto pb-4 dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-
-      <RevealItem index={0}>
-        <div className="flex items-center justify-between gap-3 mb-4">
-          <ToolPageHeader
-            icon={IconFileSpreadsheet}
-            title={t("title")}
-            description={t("subtitle")}
-            accent={CATEGORY_ACCENT.Converters}
-            className="flex-1"
-          />
+    <ToolShell
+      icon={IconFileSpreadsheet}
+      title={t("title")}
+      description={t("subtitle")}
+      toolbar={
+        <div className="flex shrink-0 justify-end">
           <ToolPinButton toolId="csv-excel-json" />
         </div>
-      </RevealItem>
-
-      <Card className="border-border/60 shadow-sm">
-        <CardContent className="space-y-6 pt-2">
-          <div
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                fileRef.current?.click();
-              }
-            }}
-            onDragEnter={(e) => {
-              e.preventDefault();
-              setDragOver(true);
-            }}
-            onDragLeave={(e) => {
+      }
+      contentClassName="overflow-auto"
+    >
+      <div className="space-y-6">
+        <div
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              setDragOver(false);
+              fileRef.current?.click();
+            }
+          }}
+          onDragEnter={(e) => {
+            e.preventDefault();
+            setDragOver(true);
+          }}
+          onDragLeave={(e) => {
+            e.preventDefault();
+            setDragOver(false);
+          }}
+          onDragOver={(e) => e.preventDefault()}
+          onDrop={onDrop}
+          className={cn(
+            "rounded-xl border-2 border-dashed p-8 text-center transition-colors",
+            dragOver
+              ? "border-primary bg-primary/5"
+              : "border-muted-foreground/25 bg-muted/20"
+          )}
+        >
+          <IconFileSpreadsheet className="mx-auto h-10 w-10 text-muted-foreground mb-3" />
+          <p className="text-sm font-medium mb-1">{t("dropTitle")}</p>
+          <p className="text-xs text-muted-foreground mb-4">{t("dropHint")}</p>
+          <input
+            ref={fileRef}
+            type="file"
+            accept=".csv,.xlsx,.xls,text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
+            className="hidden"
+            onChange={(e) => {
+              const f = e.target.files?.[0];
+              if (f) void handleFile(f);
+              e.target.value = "";
             }}
-            onDragOver={(e) => e.preventDefault()}
-            onDrop={onDrop}
-            className={cn(
-              "rounded-xl border-2 border-dashed p-8 text-center transition-colors",
-              dragOver
-                ? "border-primary bg-primary/5"
-                : "border-muted-foreground/25 bg-muted/20"
-            )}
+          />
+          <Button
+            type="button"
+            variant="secondary"
+            className="gap-2"
+            onClick={() => fileRef.current?.click()}
           >
-            <IconFileSpreadsheet className="mx-auto h-10 w-10 text-muted-foreground mb-3" />
-            <p className="text-sm font-medium mb-1">{t("dropTitle")}</p>
-            <p className="text-xs text-muted-foreground mb-4">
-              {t("dropHint")}
-            </p>
-            <input
-              ref={fileRef}
-              type="file"
-              accept=".csv,.xlsx,.xls,text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
-              className="hidden"
-              onChange={(e) => {
-                const f = e.target.files?.[0];
-                if (f) void handleFile(f);
-                e.target.value = "";
-              }}
-            />
+            <IconUpload className="h-4 w-4" />
+            {t("chooseFile")}
+          </Button>
+        </div>
+
+        <IOPanel
+          className="h-[320px]"
+          bodyClassName="flex flex-col"
+          label={t("jsonLabel")}
+          actions={
             <Button
               type="button"
-              variant="secondary"
-              className="gap-2"
-              onClick={() => fileRef.current?.click()}
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              onClick={loadSample}
             >
-              <IconUpload className="h-4 w-4" />
-              {t("chooseFile")}
+              {t("loadSample")}
             </Button>
-          </div>
-
-          <div className="space-y-2">
-            <div className="flex flex-wrap items-center justify-between gap-2">
-              <Label htmlFor="csv-json-textarea">{t("jsonLabel")}</Label>
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="h-8 text-xs"
-                onClick={loadSample}
-              >
-                {t("loadSample")}
-              </Button>
-            </div>
-            <Textarea
+          }
+        >
+          <div className="relative min-h-0 flex-1">
+            <ToolTextArea
               id="csv-json-textarea"
+              aria-label={t("jsonLabel")}
               value={jsonText}
               onChange={(e) => {
                 setJsonText(e.target.value);
                 setError(null);
               }}
               placeholder={t("jsonPlaceholder")}
-              className="min-h-[220px] font-mono text-sm"
-              spellCheck={false}
             />
-            {error && (
-              <p className="text-sm text-destructive" role="alert">
-                {error}
-              </p>
-            )}
           </div>
-
-          <div className="flex flex-wrap gap-2">
-            <Button type="button" variant="outline" size="sm" onClick={formatJson}>
-              {t("actions.format")}
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={() => {
-                setJsonText("");
-                setError(null);
-              }}
+          {error && (
+            <p
+              className="shrink-0 border-t border-border/50 px-3 py-1.5 text-sm text-destructive"
+              role="alert"
             >
-              <IconTrash className="h-4 w-4 mr-1.5" />
-              {t("actions.clear")}
-            </Button>
-            <Button type="button" variant="outline" size="sm" onClick={copyJson}>
-              <IconCopy className="h-4 w-4 mr-1.5" />
-              {copied ? t("actions.copied") : t("actions.copy")}
-            </Button>
-            <Button type="button" variant="default" size="sm" onClick={downloadCsv}>
-              <IconFileTypeCsv className="h-4 w-4 mr-1.5" />
-              {t("actions.downloadCsv")}
-            </Button>
-            <Button type="button" variant="default" size="sm" onClick={downloadXlsx}>
-              <IconDownload className="h-4 w-4 mr-1.5" />
-              {t("actions.downloadXlsx")}
-            </Button>
-          </div>
+              {error}
+            </p>
+          )}
+        </IOPanel>
+
+        <div className="flex flex-wrap gap-2">
+          <Button type="button" variant="outline" size="sm" onClick={formatJson}>
+            {t("actions.format")}
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              setJsonText("");
+              setError(null);
+            }}
+          >
+            <IconTrash className="h-4 w-4 mr-1.5" />
+            {t("actions.clear")}
+          </Button>
+          <Button type="button" variant="outline" size="sm" onClick={copyJson}>
+            <IconCopy className="h-4 w-4 mr-1.5" />
+            {copied ? t("actions.copied") : t("actions.copy")}
+          </Button>
+          <Button type="button" variant="default" size="sm" onClick={downloadCsv}>
+            <IconFileTypeCsv className="h-4 w-4 mr-1.5" />
+            {t("actions.downloadCsv")}
+          </Button>
+          <Button type="button" variant="default" size="sm" onClick={downloadXlsx}>
+            <IconDownload className="h-4 w-4 mr-1.5" />
+            {t("actions.downloadXlsx")}
+          </Button>
+        </div>
 
-          <p className="text-xs text-muted-foreground leading-relaxed">
-            {t("footnote")}
-          </p>
-        </CardContent>
-      </Card>
-    </div>
+        <p className="text-xs text-muted-foreground leading-relaxed">
+          {t("footnote")}
+        </p>
+      </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/escape-encode/escape-encode-layout.tsx b/apps/desktop-ui/src/components/escape-encode/escape-encode-layout.tsx
index e7321270..e5149f1e 100644
--- a/apps/desktop-ui/src/components/escape-encode/escape-encode-layout.tsx
+++ b/apps/desktop-ui/src/components/escape-encode/escape-encode-layout.tsx
@@ -4,7 +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,
@@ -14,11 +13,10 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
-import { ArrowRightLeft, Check, Copy, FileText, Trash2 } from 'lucide-react'
+import { ArrowRightLeft, Check, Copy, Trash2 } from 'lucide-react'
 import { IconReplace } 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 { ESCAPE_MODES, transform, type EscapeDir, type EscapeMode } from '@/lib/escape-encode'
 
 const MODE_LABEL_KEY: Record<EscapeMode, string> = {
@@ -42,84 +40,78 @@ export function EscapeEncodeLayout() {
     if (result.output && !result.error) setInput(result.output)
   }
 
-  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={IconReplace}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Converters}
-        />
-      </RevealItem>
-
-      <Card className="flex flex-wrap items-end gap-4 p-4">
-        <div className="space-y-1.5">
-          <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('modeLabel')}</Label>
-          <Select value={mode} onValueChange={(v) => setMode(v as EscapeMode)}>
-            <SelectTrigger className="w-[240px]">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {ESCAPE_MODES.map((m) => (
-                <SelectItem key={m.value} value={m.value}>
-                  {t(MODE_LABEL_KEY[m.value])}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
+  const toolbar = (
+    <div className="flex flex-wrap items-end gap-4 rounded-lg border border-border bg-card px-4 py-3">
+      <div className="space-y-1.5">
+        <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('modeLabel')}</Label>
+        <Select value={mode} onValueChange={(v) => setMode(v as EscapeMode)}>
+          <SelectTrigger className="w-[240px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {ESCAPE_MODES.map((m) => (
+              <SelectItem key={m.value} value={m.value}>
+                {t(MODE_LABEL_KEY[m.value])}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
 
-        <div className="space-y-1.5">
-          <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('directionLabel')}</Label>
-          <ToggleGroup
-            type="single"
-            value={dir}
-            onValueChange={(v) => v && setDir(v as EscapeDir)}
-            className="justify-start"
-          >
-            <ToggleGroupItem value="encode" className="px-4 text-xs">{t('encode')}</ToggleGroupItem>
-            <ToggleGroupItem value="decode" className="px-4 text-xs">{t('decode')}</ToggleGroupItem>
-          </ToggleGroup>
-        </div>
+      <div className="space-y-1.5">
+        <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('directionLabel')}</Label>
+        <ToggleGroup
+          type="single"
+          value={dir}
+          onValueChange={(v) => v && setDir(v as EscapeDir)}
+          className="justify-start"
+        >
+          <ToggleGroupItem value="encode" className="px-4 text-xs">{t('encode')}</ToggleGroupItem>
+          <ToggleGroupItem value="decode" className="px-4 text-xs">{t('decode')}</ToggleGroupItem>
+        </ToggleGroup>
+      </div>
 
-        <Button type="button" variant="outline" size="sm" onClick={swap}>
-          <ArrowRightLeft className="mr-1.5 h-4 w-4" />
-          {t('swap')}
-        </Button>
-      </Card>
+      <Button type="button" variant="outline" size="sm" onClick={swap}>
+        <ArrowRightLeft className="mr-1.5 h-4 w-4" />
+        {t('swap')}
+      </Button>
+    </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>
-            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setInput('')} disabled={!input} title={t('clear')}>
+  return (
+    <ToolShell
+      icon={IconReplace}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
+      <ToolPanels className="lg:grid-cols-2">
+        <IOPanel
+          label={t('panels.input')}
+          actions={
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7"
+              onClick={() => setInput('')}
+              disabled={!input}
+              title={t('clear')}
+            >
               <Trash2 className="h-3.5 w-3.5" />
             </Button>
-          </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 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.output')}</Label>
-            </div>
+        <IOPanel
+          label={t('panels.output')}
+          actions={
             <Button
               size="sm"
               variant="secondary"
@@ -129,22 +121,19 @@ export function EscapeEncodeLayout() {
               {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="relative min-h-0 flex-1">
-            {result.error ? (
-              <div className="p-4 text-sm text-destructive">{result.error}</div>
-            ) : (
-              <textarea
-                value={result.output}
-                readOnly
-                placeholder={t('outputPlaceholder')}
-                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}
-              />
-            )}
-          </div>
-        </Card>
-      </div>
-    </div>
+          }
+        >
+          {result.error ? (
+            <div className="p-3 text-sm text-destructive">{result.error}</div>
+          ) : (
+            <ToolTextArea
+              value={result.output}
+              readOnly
+              placeholder={t('outputPlaceholder')}
+            />
+          )}
+        </IOPanel>
+      </ToolPanels>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/image-to-base64/image-to-base64-layout.tsx b/apps/desktop-ui/src/components/image-to-base64/image-to-base64-layout.tsx
index 7933d852..c877b43e 100644
--- a/apps/desktop-ui/src/components/image-to-base64/image-to-base64-layout.tsx
+++ b/apps/desktop-ui/src/components/image-to-base64/image-to-base64-layout.tsx
@@ -3,8 +3,6 @@
 import React, { useState, useCallback, useRef } from 'react';
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
 import {
   Copy,
   Check,
@@ -18,9 +16,8 @@ import {
 import { cn } from '@/lib/utils';
 import { useTranslations } from 'next-intl';
 import { IconPhoto } 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';
 
 type Mode = 'dataUri' | 'rawString';
 
@@ -100,21 +97,10 @@ export function ImageToBase64Layout() {
   const currentOutput = output ? (mode === 'rawString' ? output.replace(/^data:image\/\w+;base64,/, '') : output) : '';
   const outputCharCount = currentOutput.length;
 
-  return (
-    <div className="relative flex flex-col h-full gap-4 overflow-hidden dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconPhoto}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Converters}
-        />
-      </RevealItem>
-
+  const toolbar = (
+    <div className="flex shrink-0 flex-col gap-3">
       {/* Mobile upload/clear actions */}
-      <div className="flex items-center gap-2 shrink-0 md:hidden">
+      <div className="flex items-center gap-2 md:hidden">
         <Button
           variant="outline"
           size="sm"
@@ -142,7 +128,7 @@ export function ImageToBase64Layout() {
       </div>
 
       {/* Mode Toggle */}
-      <div className="flex items-center justify-center shrink-0">
+      <div className="flex items-center justify-center">
         <div className="inline-flex items-center gap-1 p-1 rounded-xl bg-muted/50 border border-border/50">
           <button
             onClick={() => setMode('dataUri')}
@@ -168,90 +154,97 @@ export function ImageToBase64Layout() {
           </button>
         </div>
       </div>
+    </div>
+  );
 
-      {/* Panels */}
-      <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4 min-h-0">
+  return (
+    <ToolShell
+      icon={IconPhoto}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
+      <ToolPanels className="lg:grid-cols-2">
         {/* Input */}
-        <Card
+        <IOPanel
+          onDrop={handleDrop}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
           className={cn(
-            'flex flex-col overflow-hidden transition-colors relative',
+            'transition-colors',
             isDragging && 'border-primary/50 bg-primary/5',
             !previewUrl && 'border-dashed'
           )}
-          onDrop={handleDrop}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-        >
-          <div className="flex items-center justify-between px-4 py-2.5 border-b border-border/50 bg-muted/30 shrink-0">
-            <div className="flex items-center gap-2">
-              <ImageIcon className="h-3.5 w-3.5 text-muted-foreground" />
-              <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                {t('panels.imageInput')}
-              </Label>
-            </div>
-            {previewUrl && (
+          bodyClassName="flex items-center justify-center p-4"
+          label={
+            <>
+              <ImageIcon className="h-3.5 w-3.5" aria-hidden />
+              {t('panels.imageInput')}
+            </>
+          }
+          actions={
+            previewUrl ? (
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-6 w-6 -mr-2"
+                className="h-6 w-6"
                 onClick={handleClear}
                 title={t('clear')}
               >
                 <Trash2 className="h-3.5 w-3.5" />
               </Button>
-            )}
-          </div>
-          <div className="flex-1 min-h-0 relative flex items-center justify-center p-4">
-            {previewUrl ? (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                src={previewUrl}
-                alt="Preview"
-                className="max-w-full max-h-full object-contain rounded-md"
-              />
-            ) : (
-              <div 
-                className="flex flex-col items-center gap-4 text-center cursor-pointer"
-                onClick={() => fileInputRef.current?.click()}
-              >
-                <div className="p-4 rounded-full bg-muted/50">
-                  <Upload className="h-8 w-8 text-muted-foreground" />
-                </div>
-                <div className="flex flex-col gap-1">
-                  <p className="text-sm font-medium">{t('dropHere')}</p>
-                  <p className="text-xs text-muted-foreground">{t('placeholders.uploadImage')}</p>
-                </div>
-                {error && (
-                  <div className="flex items-center gap-1.5 text-xs text-destructive mt-2">
-                    <AlertCircle className="h-3.5 w-3.5" />
-                    <span>{error}</span>
-                  </div>
-                )}
+            ) : null
+          }
+        >
+          {previewUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={previewUrl}
+              alt="Preview"
+              className="max-w-full max-h-full object-contain rounded-md"
+            />
+          ) : (
+            <div
+              className="flex flex-col items-center gap-4 text-center cursor-pointer"
+              onClick={() => fileInputRef.current?.click()}
+            >
+              <div className="p-4 rounded-full bg-muted/50">
+                <Upload className="h-8 w-8 text-muted-foreground" />
               </div>
-            )}
-            
-            {/* Overlay when dragging */}
-            {isDragging && (
-              <div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-10">
-                <div className="flex flex-col items-center gap-2 text-primary">
-                  <Upload className="h-8 w-8 animate-bounce" />
-                  <span className="text-sm font-medium">{t('dropHere')}</span>
+              <div className="flex flex-col gap-1">
+                <p className="text-sm font-medium">{t('dropHere')}</p>
+                <p className="text-xs text-muted-foreground">{t('placeholders.uploadImage')}</p>
+              </div>
+              {error && (
+                <div className="flex items-center gap-1.5 text-xs text-destructive mt-2">
+                  <AlertCircle className="h-3.5 w-3.5" />
+                  <span>{error}</span>
                 </div>
+              )}
+            </div>
+          )}
+
+          {/* Overlay when dragging */}
+          {isDragging && (
+            <div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-10">
+              <div className="flex flex-col items-center gap-2 text-primary">
+                <Upload className="h-8 w-8 animate-bounce" />
+                <span className="text-sm font-medium">{t('dropHere')}</span>
               </div>
-            )}
-          </div>
-        </Card>
+            </div>
+          )}
+        </IOPanel>
 
         {/* Output */}
-        <Card className="flex flex-col overflow-hidden">
-          <div className="flex items-center justify-between px-4 py-2.5 border-b border-border/50 bg-muted/30 shrink-0">
-            <div className="flex items-center gap-2">
-              <FileText className="h-3.5 w-3.5 text-muted-foreground" />
-              <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                {t('panels.output')}
-              </Label>
-            </div>
-            <div className="flex items-center gap-2">
+        <IOPanel
+          label={
+            <>
+              <FileText className="h-3.5 w-3.5" aria-hidden />
+              {t('panels.output')}
+            </>
+          }
+          actions={
+            <>
               <span className="text-[10px] text-muted-foreground tabular-nums">
                 {t('charCount', { count: outputCharCount.toLocaleString() })}
               </span>
@@ -279,18 +272,12 @@ export function ImageToBase64Layout() {
                   <Copy className="h-3 w-3" />
                 )}
               </Button>
-            </div>
-          </div>
-          <div className="flex-1 min-h-0 relative">
-            <textarea
-              value={currentOutput}
-              readOnly
-              className="absolute inset-0 w-full h-full resize-none bg-transparent p-4 text-sm font-mono focus:outline-none placeholder:text-muted-foreground/50"
-              spellCheck={false}
-            />
-          </div>
-        </Card>
-      </div>
-    </div>
+            </>
+          }
+        >
+          <ToolTextArea value={currentOutput} readOnly />
+        </IOPanel>
+      </ToolPanels>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/line-sort-dedupe/line-sort-dedupe-layout.tsx b/apps/desktop-ui/src/components/line-sort-dedupe/line-sort-dedupe-layout.tsx
index d081457d..0b45f14e 100644
--- a/apps/desktop-ui/src/components/line-sort-dedupe/line-sort-dedupe-layout.tsx
+++ b/apps/desktop-ui/src/components/line-sort-dedupe/line-sort-dedupe-layout.tsx
@@ -4,7 +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 { Switch } from '@/components/ui/switch'
 import {
@@ -14,11 +13,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { Check, Copy, FileText, Trash2 } from 'lucide-react'
+import { Check, Copy, Trash2 } from 'lucide-react'
 import { IconArrowsSort } 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'
 
 type SortMode = 'none' | 'asc' | 'desc' | 'natural' | 'length' | 'reverse'
 
@@ -109,82 +107,69 @@ export function LineSortDedupeLayout() {
     { key: 'caseInsensitive', label: t('opts.caseInsensitive') },
   ]
 
+  const toolbar = (
+    <div className="flex flex-wrap items-end gap-4 rounded-lg border border-border bg-card px-4 py-3">
+      <div className="space-y-1.5">
+        <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('opts.sort')}</Label>
+        <Select value={opts.sort} onValueChange={(v) => set('sort', v as SortMode)}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="none">{t('sortModes.none')}</SelectItem>
+            <SelectItem value="asc">{t('sortModes.asc')}</SelectItem>
+            <SelectItem value="desc">{t('sortModes.desc')}</SelectItem>
+            <SelectItem value="natural">{t('sortModes.natural')}</SelectItem>
+            <SelectItem value="length">{t('sortModes.length')}</SelectItem>
+            <SelectItem value="reverse">{t('sortModes.reverse')}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="flex flex-wrap items-center gap-x-5 gap-y-2">
+        {toggles.map((tg) => (
+          <label key={tg.key} className="flex cursor-pointer items-center gap-2 text-sm">
+            <Switch
+              checked={opts[tg.key] as boolean}
+              onCheckedChange={(v) => set(tg.key, v as never)}
+            />
+            {tg.label}
+          </label>
+        ))}
+      </div>
+    </div>
+  )
+
   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={IconArrowsSort}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Converters}
-        />
-      </RevealItem>
-
-      <Card className="flex flex-wrap items-end gap-4 p-4">
-        <div className="space-y-1.5">
-          <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('opts.sort')}</Label>
-          <Select value={opts.sort} onValueChange={(v) => set('sort', v as SortMode)}>
-            <SelectTrigger className="w-[180px]">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="none">{t('sortModes.none')}</SelectItem>
-              <SelectItem value="asc">{t('sortModes.asc')}</SelectItem>
-              <SelectItem value="desc">{t('sortModes.desc')}</SelectItem>
-              <SelectItem value="natural">{t('sortModes.natural')}</SelectItem>
-              <SelectItem value="length">{t('sortModes.length')}</SelectItem>
-              <SelectItem value="reverse">{t('sortModes.reverse')}</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex flex-wrap items-center gap-x-5 gap-y-2">
-          {toggles.map((tg) => (
-            <label key={tg.key} className="flex cursor-pointer items-center gap-2 text-sm">
-              <Switch
-                checked={opts[tg.key] as boolean}
-                onCheckedChange={(v) => set(tg.key, v as never)}
-              />
-              {tg.label}
-            </label>
-          ))}
-        </div>
-      </Card>
-
-      <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-2">
+    <ToolShell
+      icon={IconArrowsSort}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
+      <ToolPanels className="lg:grid-cols-2">
+        <IOPanel
+          label={t('panels.input')}
+          actions={
+            <>
               <span className="text-[10px] tabular-nums text-muted-foreground">{t('lineCount', { count: inCount })}</span>
               <Button variant="ghost" size="icon" className="h-7 w-7" 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>
-
-        <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.output')}</Label>
-            </div>
-            <div className="flex items-center gap-2">
+            </>
+          }
+        >
+          <ToolTextArea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder={t('placeholder')}
+            autoComplete="off"
+          />
+        </IOPanel>
+
+        <IOPanel
+          label={t('panels.output')}
+          actions={
+            <>
               <span className="text-[10px] tabular-nums text-muted-foreground">{t('lineCount', { count: outCount })}</span>
               <Button
                 size="sm"
@@ -195,19 +180,16 @@ export function LineSortDedupeLayout() {
                 {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>
-          <div className="relative min-h-0 flex-1">
-            <textarea
-              value={output}
-              readOnly
-              placeholder={t('outputPlaceholder')}
-              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}
-            />
-          </div>
-        </Card>
-      </div>
-    </div>
+            </>
+          }
+        >
+          <ToolTextArea
+            value={output}
+            readOnly
+            placeholder={t('outputPlaceholder')}
+          />
+        </IOPanel>
+      </ToolPanels>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/number-base-converter/number-base-converter-layout.tsx b/apps/desktop-ui/src/components/number-base-converter/number-base-converter-layout.tsx
index 5e2e308f..dfcab161 100644
--- a/apps/desktop-ui/src/components/number-base-converter/number-base-converter-layout.tsx
+++ b/apps/desktop-ui/src/components/number-base-converter/number-base-converter-layout.tsx
@@ -4,9 +4,7 @@ import { useCallback, useEffect, 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 { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
 import {
   Select,
@@ -24,9 +22,8 @@ import {
   type NumberBase,
 } from '@/lib/number-base';
 import { IconArrowsExchange } 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';
 
 export function NumberBaseConverterLayout() {
   const t = useTranslations('NumberBaseConverter');
@@ -77,96 +74,98 @@ export function NumberBaseConverterLayout() {
     if (output) setInput(output);
   };
 
-  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={IconArrowsExchange}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Converters}
-        />
-      </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="grid items-end gap-4 sm:grid-cols-3">
-            <div className="space-y-2 sm:col-span-1">
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                {t('inputBaseLabel')}
-              </Label>
-              <Select value={String(inputBase)} onValueChange={(v) => setInputBase(Number(v) as NumberBase)}>
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {NUMBER_BASES.map((b) => (
-                    <SelectItem key={b} value={String(b)}>
-                      {b}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
+  const toolbar = (
+    <div className="grid items-end gap-4 rounded-lg border border-border bg-card px-4 py-3 sm:grid-cols-3">
+      <div className="space-y-2 sm:col-span-1">
+        <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          {t('inputBaseLabel')}
+        </Label>
+        <Select value={String(inputBase)} onValueChange={(v) => setInputBase(Number(v) as NumberBase)}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {NUMBER_BASES.map((b) => (
+              <SelectItem key={b} value={String(b)}>
+                {b}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
 
-            <div className="sm:col-span-1 flex justify-center">
-              <Button type="button" variant="outline" size="sm" onClick={handleSwap}>
-                <ArrowRightLeft className="mr-1.5 h-4 w-4" />
-                {t('swap')}
-              </Button>
-            </div>
+      <div className="flex justify-center sm:col-span-1">
+        <Button type="button" variant="outline" size="sm" onClick={handleSwap}>
+          <ArrowRightLeft className="mr-1.5 h-4 w-4" />
+          {t('swap')}
+        </Button>
+      </div>
 
-            <div className="space-y-2 sm:col-span-1">
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                {t('outputBaseLabel')}
-              </Label>
-              <Select value={String(outputBase)} onValueChange={(v) => setOutputBase(Number(v) as NumberBase)}>
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {NUMBER_BASES.map((b) => (
-                    <SelectItem key={b} value={String(b)}>
-                      {b}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
+      <div className="space-y-2 sm:col-span-1">
+        <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          {t('outputBaseLabel')}
+        </Label>
+        <Select value={String(outputBase)} onValueChange={(v) => setOutputBase(Number(v) as NumberBase)}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {NUMBER_BASES.map((b) => (
+              <SelectItem key={b} value={String(b)}>
+                {b}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
 
-          <div className="space-y-2">
-            <Label htmlFor="nbc-input">{t('inputLabel')}</Label>
-            <Textarea
-              id="nbc-input"
+  return (
+    <ToolShell
+      icon={IconArrowsExchange}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
+      <ToolPanels className="lg:grid-cols-2">
+        <IOPanel
+          label={t('inputLabel')}
+          bodyClassName="flex flex-col"
+          actions={
+            <span className="text-[10px] tabular-nums text-muted-foreground">
+              {t('byteCountHint', { count: inputBytes })}
+            </span>
+          }
+        >
+          <div className="relative min-h-0 flex-1">
+            <ToolTextArea
               value={input}
               onChange={(e) => setInput(e.target.value)}
               placeholder={t('placeholderInput')}
-              className="min-h-[200px] resize-y font-mono text-sm"
-              spellCheck={false}
               autoComplete="off"
             />
-            <p className="text-xs text-muted-foreground">{t('byteCountHint', { count: inputBytes })}</p>
-            {error && <p className="text-sm text-destructive">{error}</p>}
           </div>
-        </Card>
-
-        <Card className="flex flex-col gap-3 overflow-auto p-4">
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              {t('outputLabel')}
-            </Label>
-            <Button type="button" size="sm" variant="secondary" disabled={!output} onClick={handleCopy}>
+          {error && (
+            <p className="shrink-0 border-t border-border/50 px-3 py-1.5 text-sm text-destructive">
+              {error}
+            </p>
+          )}
+        </IOPanel>
+
+        <IOPanel
+          label={t('outputLabel')}
+          bodyClassName="flex flex-col"
+          actions={
+            <Button type="button" size="sm" variant="secondary" className="h-7" disabled={!output} onClick={handleCopy}>
               {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('copyOutput')}
             </Button>
-          </div>
-
+          }
+        >
           <div
             className={cn(
-              'min-h-[120px] rounded-md border bg-muted/30 p-3 font-mono text-sm break-all',
+              'min-h-0 flex-1 overflow-auto break-all p-3 font-mono text-sm',
               working && 'opacity-60'
             )}
           >
@@ -174,11 +173,11 @@ export function NumberBaseConverterLayout() {
               <span className="text-muted-foreground">{input.trim() ? '…' : t('emptyHint')}</span>
             )}
           </div>
-
-          <p className="text-xs text-muted-foreground">{t('note')}</p>
-        </Card>
-      </div>
-    </div>
+          <p className="shrink-0 border-t border-border/50 px-3 py-1.5 text-xs text-muted-foreground">
+            {t('note')}
+          </p>
+        </IOPanel>
+      </ToolPanels>
+    </ToolShell>
   );
 }
-
diff --git a/apps/desktop-ui/src/components/string-case-converter/string-case-converter-layout.tsx b/apps/desktop-ui/src/components/string-case-converter/string-case-converter-layout.tsx
index 25d02a37..cae1e217 100644
--- a/apps/desktop-ui/src/components/string-case-converter/string-case-converter-layout.tsx
+++ b/apps/desktop-ui/src/components/string-case-converter/string-case-converter-layout.tsx
@@ -4,13 +4,10 @@ import React, { useCallback, 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 { Check, Copy, FileText, Trash2 } from 'lucide-react'
+import { Check, Copy, Trash2 } from 'lucide-react'
 import { IconLetterCase } 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'
 
 /** Split arbitrary text into normalized words, honouring camelCase / ACRONYM / separators. */
 function splitWords(input: string): string[] {
@@ -69,52 +66,31 @@ export function StringCaseConverterLayout() {
   )
 
   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={IconLetterCase}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Converters}
-        />
-      </RevealItem>
-
-      <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-2">
+    <ToolShell icon={IconLetterCase} title={t('title')} description={t('subtitle')}>
+      <ToolPanels className="lg:grid-cols-2">
+        <IOPanel
+          label={t('panels.input')}
+          actions={
+            <>
               <span className="text-[10px] tabular-nums text-muted-foreground">
                 {t('wordCount', { count: words.length })}
               </span>
               <Button variant="ghost" size="icon" className="h-7 w-7" 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 gap-2 border-b border-border/50 bg-muted/30 px-4 py-2.5">
-            <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.output')}</Label>
-          </div>
-          <div className="min-h-0 flex-1 overflow-auto p-3">
+        <IOPanel label={t('panels.output')} bodyClassName="overflow-auto">
+          <div className="p-3">
             <div className="grid grid-cols-1 gap-2">
               {results.map((r) => (
                 <div key={r.id} className="rounded-lg border border-border/50 bg-muted/20 p-3">
@@ -129,8 +105,8 @@ export function StringCaseConverterLayout() {
               ))}
             </div>
           </div>
-        </Card>
-      </div>
-    </div>
+        </IOPanel>
+      </ToolPanels>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/string-inspector/string-inspector-layout.tsx b/apps/desktop-ui/src/components/string-inspector/string-inspector-layout.tsx
index 09f9eb6a..e05a9f7c 100644
--- a/apps/desktop-ui/src/components/string-inspector/string-inspector-layout.tsx
+++ b/apps/desktop-ui/src/components/string-inspector/string-inspector-layout.tsx
@@ -2,14 +2,11 @@
 
 import React, { useMemo, useState } from 'react'
 import { useTranslations } from 'next-intl'
-import { Card } from '@/components/ui/card'
-import { Label } from '@/components/ui/label'
 import { Button } from '@/components/ui/button'
-import { FileText, Trash2 } from 'lucide-react'
+import { Trash2 } from 'lucide-react'
 import { IconTextScan2 } 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'
 
 interface SpecialChar {
   cp: number
@@ -109,42 +106,29 @@ export function StringInspectorLayout() {
   ]
 
   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={IconTextScan2}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Converters}
-        />
-      </RevealItem>
-
-      <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>
+    <ToolShell
+      icon={IconTextScan2}
+      title={t('title')}
+      description={t('subtitle')}
+    >
+      <ToolPanels className="lg:grid-cols-2">
+        <IOPanel
+          label={t('panels.input')}
+          actions={
             <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setInput('')} disabled={!input} title={t('clear')}>
               <Trash2 className="h-3.5 w-3.5" />
             </Button>
-          </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>
-
-        <Card className="flex flex-col overflow-auto min-h-0 p-4">
+          }
+        >
+          <ToolTextArea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder={t('placeholder')}
+            autoComplete="off"
+          />
+        </IOPanel>
+
+        <IOPanel label={null} bodyClassName="overflow-auto p-4">
           <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
             {primary.map((p) => (
               <div key={p.label} className="rounded-lg border border-border/50 bg-muted/20 p-3">
@@ -193,8 +177,8 @@ export function StringInspectorLayout() {
               </div>
             )}
           </div>
-        </Card>
-      </div>
-    </div>
+        </IOPanel>
+      </ToolPanels>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/timestamp-converter/timestamp-converter-layout.tsx b/apps/desktop-ui/src/components/timestamp-converter/timestamp-converter-layout.tsx
index 9363ddd3..2aea914a 100644
--- a/apps/desktop-ui/src/components/timestamp-converter/timestamp-converter-layout.tsx
+++ b/apps/desktop-ui/src/components/timestamp-converter/timestamp-converter-layout.tsx
@@ -3,16 +3,13 @@
 import { useMemo, useState } from 'react';
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 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 { formatTimestampAll, parseTimestampInput } from '@/lib/timestamp-convert';
 import { Check, Copy } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { IconCalendarTime } 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 CopyField({
   label,
@@ -26,11 +23,11 @@ function CopyField({
   const { isCopied: done, copyToClipboard } = useCopyToClipboard();
   return (
     <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-2">
-      <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground sm:w-28 shrink-0">
+      <span className="shrink-0 text-[10px] font-medium uppercase tracking-wider text-muted-foreground sm:w-28">
         {label}
       </span>
-      <div className="flex flex-1 items-center gap-1 min-w-0">
-        <Input readOnly value={value} className="font-mono text-xs h-8 flex-1 min-w-0" />
+      <div className="flex min-w-0 flex-1 items-center gap-1">
+        <Input readOnly value={value} className="h-8 min-w-0 flex-1 font-mono text-xs" />
         <Button
           type="button"
           variant="ghost"
@@ -58,57 +55,51 @@ export function TimestampConverterLayout() {
 
   const setNow = () => setInput(String(Date.now()));
 
-  return (
-    <div className="relative flex flex-col h-full gap-4 min-h-0 overflow-hidden dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconCalendarTime}
-          title={t('title')}
-          description={t.rich('subtitle', {
-            code: (chunks) => <code className="text-foreground">{chunks}</code>,
-          })}
-          accent={CATEGORY_ACCENT.Converters}
-        />
-      </RevealItem>
-
-      <Card className="p-4 space-y-3 shrink-0">
-        <div className="flex flex-col gap-2 sm:flex-row sm:items-end">
-          <div className="flex-1 space-y-2 min-w-0">
-            <Label htmlFor="ts-input" className="text-xs text-muted-foreground uppercase tracking-wider">
-              {t('inputLabel')}
-            </Label>
-            <Input
-              id="ts-input"
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              placeholder={t('placeholder')}
-              spellCheck={false}
-              className="font-mono text-sm"
-            />
-          </div>
-          <Button type="button" variant="secondary" size="sm" className="shrink-0" onClick={setNow}>
-            {t('now')}
-          </Button>
+  const toolbar = (
+    <div className="shrink-0 space-y-3 rounded-lg border border-border bg-card px-4 py-3">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-end">
+        <div className="min-w-0 flex-1 space-y-2">
+          <Label htmlFor="ts-input" className="text-xs uppercase tracking-wider text-muted-foreground">
+            {t('inputLabel')}
+          </Label>
+          <Input
+            id="ts-input"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder={t('placeholder')}
+            spellCheck={false}
+            className="font-mono text-sm"
+          />
         </div>
+        <Button type="button" variant="secondary" size="sm" className="shrink-0" onClick={setNow}>
+          {t('now')}
+        </Button>
+      </div>
 
-        {parsed.ok === false && input.trim() !== '' && (
-          <p className="text-sm text-destructive">{t(`errors.${parsed.errorKey}` as never)}</p>
-        )}
-        {input.trim() === '' && (
-          <p className="text-xs text-muted-foreground">
-            {t.rich('hint', {
-              strong: (chunks) => <strong>{chunks}</strong>,
-            })}
-          </p>
-        )}
-      </Card>
+      {parsed.ok === false && input.trim() !== '' && (
+        <p className="text-sm text-destructive">{t(`errors.${parsed.errorKey}` as never)}</p>
+      )}
+      {input.trim() === '' && (
+        <p className="text-xs text-muted-foreground">
+          {t.rich('hint', { strong: (chunks) => <strong>{chunks}</strong> })}
+        </p>
+      )}
+    </div>
+  );
 
+  return (
+    <ToolShell
+      icon={IconCalendarTime}
+      title={t('title')}
+      description={t.rich('subtitle', {
+        code: (chunks) => <code className="text-foreground">{chunks}</code>,
+      })}
+      toolbar={toolbar}
+    >
       {parsed.ok && formatted && (
-        <Card className="p-4 space-y-4 flex-1 min-h-0 overflow-auto">
+        <div className="min-h-0 flex-1 space-y-4 overflow-auto rounded-lg border border-border bg-card p-4">
           <div>
-            <h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
+            <h2 className="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
               {t('sections.unix')}
             </h2>
             <div className="space-y-2">
@@ -118,7 +109,7 @@ export function TimestampConverterLayout() {
           </div>
 
           <div>
-            <h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
+            <h2 className="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
               {t('sections.iso')}
             </h2>
             <div className="space-y-2">
@@ -128,14 +119,14 @@ export function TimestampConverterLayout() {
           </div>
 
           <div>
-            <h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
+            <h2 className="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
               {t('sections.relative')}
             </h2>
             <CopyField label={t('fields.distance')} value={formatted.relative} copyTitle={t('copy')} />
           </div>
 
           <div>
-            <h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
+            <h2 className="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
               {t('sections.human')}
             </h2>
             <div className="space-y-2">
@@ -143,8 +134,8 @@ export function TimestampConverterLayout() {
               <CopyField label={t('fields.local')} value={formatted.localDisplay} copyTitle={t('copy')} />
             </div>
           </div>
-        </Card>
+        </div>
       )}
-    </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/timezone-converter/timezone-converter-layout.tsx b/apps/desktop-ui/src/components/timezone-converter/timezone-converter-layout.tsx
index d2cd4c00..cefa6487 100644
--- a/apps/desktop-ui/src/components/timezone-converter/timezone-converter-layout.tsx
+++ b/apps/desktop-ui/src/components/timezone-converter/timezone-converter-layout.tsx
@@ -4,15 +4,12 @@ import React, { useEffect, useMemo, useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { Badge } from '@/components/ui/badge'
 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 { Slider } from '@/components/ui/slider'
 import { Clock3, Plus, RotateCcw, X } from 'lucide-react'
 import { IconWorld } 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 { cn } from '@/lib/utils'
 import {
   convertParts,
@@ -152,21 +149,9 @@ export function TimezoneConverterLayout() {
     setTargets((prev) => prev.filter((z) => z !== tz))
   }
 
-  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={IconWorld}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Converters}
-        />
-      </RevealItem>
-
-      <Card className="flex flex-wrap items-end gap-4 p-4">
-        <div className="space-y-1.5">
+  const toolbar = (
+    <div className="flex shrink-0 flex-wrap items-end gap-4 rounded-lg border border-border bg-card p-4">
+      <div className="space-y-1.5">
           <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
             {t('dateTimeLabel')}
           </Label>
@@ -219,8 +204,17 @@ export function TimezoneConverterLayout() {
           </div>
           <Slider value={[scrub]} min={-720} max={720} step={15} onValueChange={(v) => setScrub(v[0] ?? 0)} />
         </div>
-      </Card>
+      </div>
+  )
 
+  return (
+    <ToolShell
+      icon={IconWorld}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+      contentClassName="gap-4"
+    >
       <div className="flex items-center justify-between">
         <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
           {t('targetsLabel')}
@@ -257,7 +251,7 @@ export function TimezoneConverterLayout() {
             }).format(effectiveInstant)
             const timeStr = `${String(parts.hh).padStart(2, '0')}:${String(parts.mm).padStart(2, '0')}`
             return (
-              <Card key={tz} className="flex items-center gap-4 px-4 py-3">
+              <div key={tz} className="flex items-center gap-4 rounded-lg border border-border bg-card px-4 py-3">
                 <span
                   className={cn('h-2.5 w-2.5 shrink-0 rounded-full', BAND_DOT[band])}
                   title={t(`bands.${band}`)}
@@ -294,13 +288,13 @@ export function TimezoneConverterLayout() {
                 >
                   <X className="h-3.5 w-3.5" />
                 </Button>
-              </Card>
+              </div>
             )
           })
         ) : (
           <p className="p-4 text-sm text-muted-foreground">{t('invalidDate')}</p>
         )}
       </div>
-    </div>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/token-counter/token-counter-layout.tsx b/apps/desktop-ui/src/components/token-counter/token-counter-layout.tsx
index b0c41495..3bc743fb 100644
--- a/apps/desktop-ui/src/components/token-counter/token-counter-layout.tsx
+++ b/apps/desktop-ui/src/components/token-counter/token-counter-layout.tsx
@@ -17,9 +17,8 @@ import {
 import { Switch } from '@/components/ui/switch'
 import { FileText, Sparkles, Trash2 } from 'lucide-react'
 import { IconAbacus } 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 { IOPanel, ToolTextArea } from '@/components/tools/io-panel'
 import {
   approxClaudeTokens,
   calcCost,
@@ -125,30 +124,24 @@ export function TokenCounterLayout() {
   const fmt = (n: number) => `$${n.toFixed(n < 0.01 ? 6 : 4)}`
 
   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={IconAbacus}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Converters}
-        />
-      </RevealItem>
-
+    <ToolShell
+      icon={IconAbacus}
+      title={t('title')}
+      description={t('subtitle')}
+    >
       <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 overflow-y-auto lg:grid-cols-2">
         {/* Left: input + stats */}
         <div className="flex min-h-0 flex-col gap-4">
-          <Card className="flex min-h-[220px] flex-1 flex-col overflow-hidden">
-            <div className="flex items-center justify-between border-b border-border/50 bg-muted/30 px-3 py-2">
-              <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('inputLabel')}
-                </Label>
-              </div>
-              <div className="flex items-center gap-1.5">
+          <IOPanel
+            className="min-h-[220px] flex-1"
+            label={
+              <>
+                <FileText className="h-3.5 w-3.5" aria-hidden />
+                {t('inputLabel')}
+              </>
+            }
+            actions={
+              <>
                 <Button variant="outline" size="sm" onClick={() => setText(SAMPLE_TEXT)}>
                   <Sparkles className="mr-1.5 h-3.5 w-3.5" />
                   {t('sample')}
@@ -163,16 +156,15 @@ export function TokenCounterLayout() {
                 >
                   <Trash2 className="h-3.5 w-3.5" />
                 </Button>
-              </div>
-            </div>
-            <textarea
+              </>
+            }
+          >
+            <ToolTextArea
               value={text}
               onChange={(e) => setText(e.target.value)}
               placeholder={t('placeholder')}
-              className="min-h-0 flex-1 resize-none bg-transparent p-4 font-mono text-sm placeholder:text-muted-foreground/50 focus:outline-none"
-              spellCheck={false}
             />
-          </Card>
+          </IOPanel>
 
           <div className="space-y-3">
             <div className="flex items-end gap-3">
@@ -212,45 +204,44 @@ export function TokenCounterLayout() {
 
         {/* Right: visualization + cost */}
         <div className="flex min-h-0 flex-col gap-4">
-          <Card className="flex min-h-[180px] flex-1 flex-col overflow-hidden">
-            <div className="flex items-center justify-between border-b border-border/50 bg-muted/30 px-3 py-2">
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                {t('viz.title')}
-              </Label>
-              <div className="flex items-center gap-2">
+          <IOPanel
+            className="min-h-[180px] flex-1"
+            bodyClassName="overflow-y-auto p-3"
+            label={t('viz.title')}
+            actions={
+              <>
                 <Switch checked={showViz} onCheckedChange={setShowViz} id="viz-toggle" />
                 <Label htmlFor="viz-toggle" className="text-xs text-muted-foreground">
                   {t('viz.toggle')}
                 </Label>
-              </div>
-            </div>
-            <div className="min-h-0 flex-1 overflow-y-auto p-3">
-              {!showViz ? (
-                <p className="text-xs text-muted-foreground">{t('viz.hint')}</p>
-              ) : viz ? (
-                <>
-                  <div className="font-mono text-sm leading-relaxed">
-                    {viz.chunks.map((chunk, i) => (
-                      <span
-                        key={i}
-                        className={`rounded-sm ${PASTELS[i % PASTELS.length]}`}
-                        style={{ whiteSpace: 'pre-wrap' }}
-                      >
-                        {chunk}
-                      </span>
-                    ))}
-                  </div>
-                  {viz.truncated && (
-                    <p className="mt-3 text-xs text-muted-foreground">
-                      {t('viz.truncated', { limit: CHUNK_LIMIT, total: viz.totalTokens.toLocaleString() })}
-                    </p>
-                  )}
-                </>
-              ) : (
-                <p className="text-xs text-muted-foreground">{t('viz.empty')}</p>
-              )}
-            </div>
-          </Card>
+              </>
+            }
+          >
+            {!showViz ? (
+              <p className="text-xs text-muted-foreground">{t('viz.hint')}</p>
+            ) : viz ? (
+              <>
+                <div className="font-mono text-sm leading-relaxed">
+                  {viz.chunks.map((chunk, i) => (
+                    <span
+                      key={i}
+                      className={`rounded-sm ${PASTELS[i % PASTELS.length]}`}
+                      style={{ whiteSpace: 'pre-wrap' }}
+                    >
+                      {chunk}
+                    </span>
+                  ))}
+                </div>
+                {viz.truncated && (
+                  <p className="mt-3 text-xs text-muted-foreground">
+                    {t('viz.truncated', { limit: CHUNK_LIMIT, total: viz.totalTokens.toLocaleString() })}
+                  </p>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-muted-foreground">{t('viz.empty')}</p>
+            )}
+          </IOPanel>
 
           <Card className="space-y-3 p-4">
             <div className="flex items-center justify-between">
@@ -333,6 +324,6 @@ export function TokenCounterLayout() {
           </Card>
         </div>
       </div>
-    </div>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/tools/io-panel.tsx b/apps/desktop-ui/src/components/tools/io-panel.tsx
index 6db74255..8df2275d 100644
--- a/apps/desktop-ui/src/components/tools/io-panel.tsx
+++ b/apps/desktop-ui/src/components/tools/io-panel.tsx
@@ -59,14 +59,16 @@ export function IOPanel({
       )}
       {...rest}
     >
-      <div className="flex shrink-0 items-center justify-between gap-2 border-b border-border bg-[hsl(var(--surface-2))] px-3 py-2">
-        <div className="flex min-w-0 items-center gap-2 text-xs font-medium text-muted-foreground">
-          {label}
+      {(label != null || actions != null) && (
+        <div className="flex shrink-0 items-center justify-between gap-2 border-b border-border bg-[hsl(var(--surface-2))] px-3 py-2">
+          <div className="flex min-w-0 items-center gap-2 text-xs font-medium text-muted-foreground">
+            {label}
+          </div>
+          {actions ? (
+            <div className="flex shrink-0 items-center gap-1">{actions}</div>
+          ) : null}
         </div>
-        {actions ? (
-          <div className="flex shrink-0 items-center gap-1">{actions}</div>
-        ) : null}
-      </div>
+      )}
       <div className={cn('relative min-h-0 flex-1', bodyClassName)}>
         {children}
       </div>
diff --git a/apps/desktop-ui/src/components/unit-converter/unit-converter-layout.tsx b/apps/desktop-ui/src/components/unit-converter/unit-converter-layout.tsx
index 7d7b63df..4d5dc960 100644
--- a/apps/desktop-ui/src/components/unit-converter/unit-converter-layout.tsx
+++ b/apps/desktop-ui/src/components/unit-converter/unit-converter-layout.tsx
@@ -4,7 +4,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { ArrowRightLeft, Copy, Check, ChevronsUpDown, Search } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import {
@@ -29,9 +28,7 @@ import {
 } from '@/components/ui/command'
 import { convert, UNIT_CATEGORIES, getCategoryKeys, getUnitKeys } from '@/lib/unit-converter'
 import { IconRuler } 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 formatResult(n: number): string {
   if (!isFinite(n)) return '—'
@@ -88,22 +85,8 @@ export function UnitConverterLayout() {
     })
   }, [resultText])
 
-  return (
-    <div className="relative space-y-5 overflow-hidden dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconRuler}
-          title={t('title')}
-          description={t.rich('subtitle', {
-            strong: (chunks) => <strong>{chunks}</strong>,
-          })}
-          accent={CATEGORY_ACCENT.Converters}
-        />
-      </RevealItem>
-
-      <div className="max-w-2xl mx-auto space-y-5">
+  const toolbar = (
+    <div className="mx-auto w-full max-w-2xl space-y-5 rounded-lg border border-border bg-card px-4 py-4">
       {/* Category — searchable combobox */}
       <div className="space-y-1.5">
         <Label>{t('category')}</Label>
@@ -207,43 +190,54 @@ export function UnitConverterLayout() {
           className="font-mono"
         />
       </div>
+    </div>
+  )
 
+  return (
+    <ToolShell
+      icon={IconRuler}
+      title={t('title')}
+      description={t.rich('subtitle', {
+        strong: (chunks) => <strong>{chunks}</strong>,
+      })}
+      toolbar={toolbar}
+    >
       {/* Result — always rendered so the layout never jumps on invalid input */}
-      <Card aria-live="polite">
-        <CardContent className="pt-5 pb-5">
-          <div className="flex items-center justify-between gap-3">
-            <div className="min-w-0">
-              {result !== null && (
-                <p className="text-sm text-muted-foreground font-mono">
-                  {inputValue.trim()} {fromSymbol} =
-                </p>
-              )}
-              <p className="text-2xl font-mono font-semibold tracking-tight break-all">
-                {result !== null ? (
-                  <>
-                    {resultText}{' '}
-                    <span className="text-base font-normal text-muted-foreground">{toSymbol}</span>
-                  </>
-                ) : (
-                  <span className="text-muted-foreground">—</span>
-                )}
+      <div
+        className="mx-auto w-full max-w-2xl rounded-lg border border-border bg-card p-5"
+        aria-live="polite"
+      >
+        <div className="flex items-center justify-between gap-3">
+          <div className="min-w-0">
+            {result !== null && (
+              <p className="text-sm text-muted-foreground font-mono">
+                {inputValue.trim()} {fromSymbol} =
               </p>
-            </div>
-            <Button
-              variant="outline"
-              size="icon"
-              onClick={copyResult}
-              disabled={result === null}
-              title={t('copyResult')}
-              aria-label={t('copyResult')}
-              className="shrink-0"
-            >
-              {copied ? <Check className="h-4 w-4 text-emerald-500" /> : <Copy className="h-4 w-4" />}
-            </Button>
+            )}
+            <p className="text-2xl font-mono font-semibold tracking-tight break-all">
+              {result !== null ? (
+                <>
+                  {resultText}{' '}
+                  <span className="text-base font-normal text-muted-foreground">{toSymbol}</span>
+                </>
+              ) : (
+                <span className="text-muted-foreground">—</span>
+              )}
+            </p>
           </div>
-        </CardContent>
-      </Card>
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={copyResult}
+            disabled={result === null}
+            title={t('copyResult')}
+            aria-label={t('copyResult')}
+            className="shrink-0"
+          >
+            {copied ? <Check className="h-4 w-4 text-emerald-500" /> : <Copy className="h-4 w-4" />}
+          </Button>
+        </div>
       </div>
-    </div>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/url-encode/url-encode-layout.tsx b/apps/desktop-ui/src/components/url-encode/url-encode-layout.tsx
index d3daba94..dde00d4f 100644
--- a/apps/desktop-ui/src/components/url-encode/url-encode-layout.tsx
+++ b/apps/desktop-ui/src/components/url-encode/url-encode-layout.tsx
@@ -3,8 +3,6 @@
 import React, { useState, useCallback, useRef } from 'react';
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
 import {
   ArrowRightLeft,
   Copy,
@@ -12,7 +10,6 @@ import {
   Trash2,
   Upload,
   Download,
-  FileText,
   AlertCircle,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -20,9 +17,8 @@ import { useTranslations } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
 import { SendToMenu } from '@/components/ui/send-to-menu';
 import { IconLink } 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';
 
 type Mode = 'encode' | 'decode';
 
@@ -135,20 +131,10 @@ export function UrlEncodeLayout() {
   const charCount = input.length;
   const outputCharCount = output.length;
 
-  return (
-    <div className="relative flex flex-col h-full gap-4 overflow-hidden dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconLink}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Converters}
-        />
-      </RevealItem>
-
-      <div className="flex items-center gap-2 shrink-0 md:hidden">
+  const toolbar = (
+    <div className="flex shrink-0 flex-col gap-3">
+      {/* Mobile upload/clear actions */}
+      <div className="flex items-center gap-2 md:hidden">
         <Button
           variant="outline"
           size="sm"
@@ -175,8 +161,9 @@ export function UrlEncodeLayout() {
         </Button>
       </div>
 
-      <div className="flex items-center justify-center shrink-0">
-        <div className="inline-flex items-center gap-1 p-1 rounded-xl bg-muted/50 border border-border/50">
+      {/* Mode toggle */}
+      <div className="flex items-center justify-center">
+        <div className="inline-flex items-center gap-1 rounded-xl border border-border/60 bg-[hsl(var(--surface-2))] p-1">
           <button
             type="button"
             onClick={() => {
@@ -186,9 +173,9 @@ export function UrlEncodeLayout() {
               }
             }}
             className={cn(
-              'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200',
+              'rounded-lg px-4 py-1.5 text-sm font-medium transition-all duration-200',
               mode === 'encode'
-                ? 'bg-background shadow-sm text-foreground border border-border/50'
+                ? 'border border-border bg-card text-foreground shadow-sm'
                 : 'text-muted-foreground hover:text-foreground'
             )}
           >
@@ -197,7 +184,7 @@ export function UrlEncodeLayout() {
           <button
             type="button"
             onClick={toggleMode}
-            className="p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-background/50 transition-colors"
+            className="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-card/50 hover:text-foreground"
             title={t('swapTitle')}
           >
             <ArrowRightLeft className="h-4 w-4" />
@@ -211,9 +198,9 @@ export function UrlEncodeLayout() {
               }
             }}
             className={cn(
-              'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200',
+              'rounded-lg px-4 py-1.5 text-sm font-medium transition-all duration-200',
               mode === 'decode'
-                ? 'bg-background shadow-sm text-foreground border border-border/50'
+                ? 'border border-border bg-card text-foreground shadow-sm'
                 : 'text-muted-foreground hover:text-foreground'
             )}
           >
@@ -221,61 +208,51 @@ export function UrlEncodeLayout() {
           </button>
         </div>
       </div>
+    </div>
+  );
 
-      <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4 min-h-0">
-        <Card
-          className={cn(
-            'flex flex-col overflow-hidden transition-colors',
-            isDragging && 'border-primary/50 bg-primary/5'
-          )}
+  return (
+    <ToolShell
+      icon={IconLink}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
+      <ToolPanels>
+        {/* Input */}
+        <IOPanel
           onDrop={handleDrop}
           onDragOver={handleDragOver}
           onDragLeave={handleDragLeave}
-        >
-          <div className="flex items-center justify-between px-4 py-2.5 border-b border-border/50 bg-muted/30">
-            <div className="flex items-center gap-2">
-              <FileText className="h-3.5 w-3.5 text-muted-foreground" />
-              <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                {mode === 'encode' ? t('panels.plainText') : t('panels.encodedInput')}
-              </Label>
-            </div>
-            <span className="text-[10px] text-muted-foreground tabular-nums">
+          className={cn('transition-colors', isDragging && 'border-primary/50 bg-primary/5')}
+          label={mode === 'encode' ? t('panels.plainText') : t('panels.encodedInput')}
+          actions={
+            <span className="text-[10px] tabular-nums text-muted-foreground">
               {t('charCount', { count: charCount.toLocaleString() })}
             </span>
-          </div>
-          <div className="flex-1 min-h-0 relative">
-            <textarea
-              value={input}
-              onChange={(e) => handleInputChange(e.target.value)}
-              placeholder={
-                mode === 'encode'
-                  ? t('placeholders.encode')
-                  : t('placeholders.decode')
-              }
-              className="absolute inset-0 w-full h-full resize-none bg-transparent p-4 text-sm font-mono focus:outline-none placeholder:text-muted-foreground/50"
-              spellCheck={false}
-            />
-            {isDragging && (
-              <div className="absolute inset-0 flex items-center justify-center bg-primary/5 backdrop-blur-sm">
-                <div className="flex flex-col items-center gap-2 text-primary">
-                  <Upload className="h-8 w-8" />
-                  <span className="text-sm font-medium">{t('dropHere')}</span>
-                </div>
+          }
+        >
+          <ToolTextArea
+            value={input}
+            onChange={(e) => handleInputChange(e.target.value)}
+            placeholder={mode === 'encode' ? t('placeholders.encode') : t('placeholders.decode')}
+          />
+          {isDragging && (
+            <div className="absolute inset-0 flex items-center justify-center bg-primary/5 backdrop-blur-sm">
+              <div className="flex flex-col items-center gap-2 text-primary">
+                <Upload className="h-8 w-8" />
+                <span className="text-sm font-medium">{t('dropHere')}</span>
               </div>
-            )}
-          </div>
-        </Card>
-
-        <Card className="flex flex-col overflow-hidden">
-          <div className="flex items-center justify-between px-4 py-2.5 border-b border-border/50 bg-muted/30">
-            <div className="flex items-center gap-2">
-              <FileText className="h-3.5 w-3.5 text-muted-foreground" />
-              <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                {mode === 'encode' ? t('panels.encodedOutput') : t('panels.decodedText')}
-              </Label>
             </div>
-            <div className="flex items-center gap-2">
-              <span className="text-[10px] text-muted-foreground tabular-nums">
+          )}
+        </IOPanel>
+
+        {/* Output */}
+        <IOPanel
+          label={mode === 'encode' ? t('panels.encodedOutput') : t('panels.decodedText')}
+          actions={
+            <>
+              <span className="text-[10px] tabular-nums text-muted-foreground">
                 {t('charCount', { count: outputCharCount.toLocaleString() })}
               </span>
               <Button
@@ -296,37 +273,26 @@ export function UrlEncodeLayout() {
                 disabled={!output}
                 title={t('copyTitle')}
               >
-                {copied ? (
-                  <Check className="h-3 w-3 text-green-500" />
-                ) : (
-                  <Copy className="h-3 w-3" />
-                )}
+                {copied ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3" />}
               </Button>
-              <div className="ml-2 border-l pl-2 border-border/50">
+              <div className="ml-1 border-l border-border/50 pl-1">
                 <SendToMenu content={output} disabled={!output} />
               </div>
-            </div>
-          </div>
-          <div className="flex-1 min-h-0 relative">
-            {error ? (
-              <div className="absolute inset-0 flex items-center justify-center p-4">
-                <div className="flex flex-col items-center gap-2 text-destructive">
-                  <AlertCircle className="h-6 w-6" />
-                  <p className="text-sm text-center">{error}</p>
-                </div>
+            </>
+          }
+        >
+          {error ? (
+            <div className="absolute inset-0 flex items-center justify-center p-4">
+              <div className="flex flex-col items-center gap-2 text-destructive">
+                <AlertCircle className="h-6 w-6" />
+                <p className="text-center text-sm">{error}</p>
               </div>
-            ) : (
-              <textarea
-                value={output}
-                readOnly
-                placeholder={t('outputPlaceholder')}
-                className="absolute inset-0 w-full h-full resize-none bg-transparent p-4 text-sm font-mono focus:outline-none placeholder:text-muted-foreground/50"
-                spellCheck={false}
-              />
-            )}
-          </div>
-        </Card>
-      </div>
-    </div>
+            </div>
+          ) : (
+            <ToolTextArea value={output} readOnly placeholder={t('outputPlaceholder')} />
+          )}
+        </IOPanel>
+      </ToolPanels>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/url-parser/url-parser-layout.tsx b/apps/desktop-ui/src/components/url-parser/url-parser-layout.tsx
index 36e1b4e6..4c64e7cd 100644
--- a/apps/desktop-ui/src/components/url-parser/url-parser-layout.tsx
+++ b/apps/desktop-ui/src/components/url-parser/url-parser-layout.tsx
@@ -3,15 +3,12 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
-import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/utils'
-import { Check, Copy, Download, FileText, Trash2, Upload } from 'lucide-react'
+import { Check, Copy, Download, Trash2, Upload } from 'lucide-react'
 import { useTranslations } from 'next-intl'
 import { IconLink } 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'
 
 type ParsedParam = {
   key: string
@@ -172,99 +169,84 @@ export function UrlParserLayout() {
     }
   }, [parsed])
 
-  return (
-    <div className="relative flex flex-col h-full gap-4 overflow-hidden dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconLink}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Converters}
-        />
-      </RevealItem>
-
-      <div className="flex items-center gap-2 shrink-0 md:hidden">
-        <Button
-          variant="outline"
-          size="sm"
-          className="gap-1.5 text-xs"
-          onClick={() => fileInputRef.current?.click()}
-        >
-          <Upload className="h-3.5 w-3.5" />
-          {t('upload')}
-        </Button>
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept=".txt,.json,.xml,.html,.md"
-          className="hidden"
-          onChange={(e) => {
-            const file = e.target.files?.[0]
-            if (file) handleFileUpload(file)
-            e.target.value = ''
-          }}
-        />
-        <Button variant="outline" size="sm" className="gap-1.5 text-xs" onClick={handleClear}>
-          <Trash2 className="h-3.5 w-3.5" />
-          {t('clear')}
-        </Button>
-      </div>
+  const toolbar = (
+    <div className="flex items-center gap-2 shrink-0 md:hidden">
+      <Button
+        variant="outline"
+        size="sm"
+        className="gap-1.5 text-xs"
+        onClick={() => fileInputRef.current?.click()}
+      >
+        <Upload className="h-3.5 w-3.5" />
+        {t('upload')}
+      </Button>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".txt,.json,.xml,.html,.md"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0]
+          if (file) handleFileUpload(file)
+          e.target.value = ''
+        }}
+      />
+      <Button variant="outline" size="sm" className="gap-1.5 text-xs" onClick={handleClear}>
+        <Trash2 className="h-3.5 w-3.5" />
+        {t('clear')}
+      </Button>
+    </div>
+  )
 
-      <div className="flex-1 grid grid-cols-1 lg:grid-cols-2 gap-4 min-h-0">
-        <Card
-          className={cn('flex flex-col overflow-hidden transition-colors', isDragging && 'border-primary/50 bg-primary/5')}
+  return (
+    <ToolShell
+      icon={IconLink}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
+      <ToolPanels className="lg:grid-cols-2">
+        <IOPanel
+          className={cn('transition-colors', isDragging && 'border-primary/50 bg-primary/5')}
           onDrop={handleDrop}
           onDragOver={handleDragOver}
           onDragLeave={handleDragLeave}
-        >
-          <div className="flex items-center justify-between px-4 py-2.5 border-b border-border/50 bg-muted/30">
-            <div className="flex items-center gap-2">
-              <FileText className="h-3.5 w-3.5 text-muted-foreground" />
-              <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('panels.input')}</Label>
-            </div>
+          label={t('panels.input')}
+          actions={
             <span className="text-[10px] text-muted-foreground tabular-nums">
               {t('charCount', { count: input.length.toLocaleString() })}
             </span>
-          </div>
-          <div className="flex-1 min-h-0 relative">
-            <textarea
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              placeholder={t('placeholders.input')}
-              className="absolute inset-0 w-full h-full resize-none bg-transparent p-4 text-sm font-mono focus:outline-none placeholder:text-muted-foreground/50"
-              spellCheck={false}
-            />
-            {isDragging && (
-              <div className="absolute inset-0 flex items-center justify-center bg-primary/5 backdrop-blur-sm">
-                <div className="flex flex-col items-center gap-2 text-primary">
-                  <Upload className="h-8 w-8" />
-                  <span className="text-sm font-medium">{t('dropHere')}</span>
-                </div>
+          }
+        >
+          <ToolTextArea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder={t('placeholders.input')}
+          />
+          {isDragging && (
+            <div className="absolute inset-0 flex items-center justify-center bg-primary/5 backdrop-blur-sm">
+              <div className="flex flex-col items-center gap-2 text-primary">
+                <Upload className="h-8 w-8" />
+                <span className="text-sm font-medium">{t('dropHere')}</span>
               </div>
-            )}
-          </div>
-        </Card>
-
-        <Card className="flex flex-col overflow-hidden min-h-0">
-          <div className="flex items-center justify-between px-4 py-2.5 border-b border-border/50 bg-muted/30">
-            <div className="flex items-center gap-2">
-              <FileText className="h-3.5 w-3.5 text-muted-foreground" />
-              <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('panels.output')}</Label>
             </div>
-            <div className="flex items-center gap-2">
-              {outputJson && (
-                <DownloadJsonButton
-                  data={outputJson}
-                  filename={t('download.filename')}
-                  title={t('download.title')}
-                />
-              )}
-            </div>
-          </div>
-
-          <div className="flex-1 min-h-0 overflow-auto p-4">
+          )}
+        </IOPanel>
+
+        <IOPanel
+          label={t('panels.output')}
+          bodyClassName="overflow-auto p-4"
+          actions={
+            outputJson && (
+              <DownloadJsonButton
+                data={outputJson}
+                filename={t('download.filename')}
+                title={t('download.title')}
+              />
+            )
+          }
+        >
+          <>
             {error ? (
               <div className="text-sm text-destructive">{error}</div>
             ) : !parsed ? (
@@ -338,10 +320,10 @@ export function UrlParserLayout() {
                 </div>
               </div>
             )}
-          </div>
-        </Card>
-      </div>
-    </div>
+          </>
+        </IOPanel>
+      </ToolPanels>
+    </ToolShell>
   )
 }