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

Phase 1 of the tool-consistency pass. Every Formatter now renders through
ToolShell + IOPanel/ToolTextArea/CodeEditor instead of hand-rolled Cards +
raw textareas, so they share one visual language (panel surfaces, headers,
borders, spacing, states) with base64/json-formatter.

Refactored (logic preserved — same state, handlers, i18n, editors):
- beautify-minify, json-schema-generator, json-to-code, json-diff,
  jsonpath-playground, yaml-formatter, sql-formatter, format-converter,
  markdown-preview-html, json-visualizer, diff-checker, graphql-formatter,
  regex-tester
- json-formatter kept as the gold reference (unchanged)

Notes:
- CodeEditor panes (sql/yaml/graphql/format-converter) kept as-is inside the
  new panels; json-visualizer's graph pane surface aligned to the kit while
  its canvas + floating node card are untouched.
- markdown-preview-html and graphql keep their tabs; regex-tester keeps its
  highlight-overlay textarea and match navigation.

0 type errors; all 14 pages render.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../beautify-minify-layout.tsx                | 197 ++++++------
 .../diff-checker/diff-checker-layout.tsx      | 128 ++++----
 .../format-converter-layout.tsx               | 174 +++++------
 .../graphql-formatter-layout.tsx              | 283 +++++++++---------
 .../components/json-diff/json-diff-layout.tsx | 197 ++++++------
 .../json-schema-generator-layout.tsx          | 213 ++++++-------
 .../json-to-code/json-to-code-layout.tsx      | 149 +++++----
 .../json-visualizer-layout.tsx                |  58 ++--
 .../jsonpath-playground-layout.tsx            | 202 ++++++-------
 .../markdown-preview-html-layout.tsx          | 147 +++++----
 .../regex-tester/regex-tester-layout.tsx      | Bin 10649 -> 9732 bytes
 .../sql-formatter/sql-formatter-layout.tsx    | 216 +++++++------
 .../yaml-formatter/yaml-formatter-layout.tsx  | 196 ++++++------
 13 files changed, 1011 insertions(+), 1149 deletions(-)

diff --git a/apps/desktop-ui/src/components/beautify-minify/beautify-minify-layout.tsx b/apps/desktop-ui/src/components/beautify-minify/beautify-minify-layout.tsx
index 74b344a9..e04ffe43 100644
--- a/apps/desktop-ui/src/components/beautify-minify/beautify-minify-layout.tsx
+++ b/apps/desktop-ui/src/components/beautify-minify/beautify-minify-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 { Check, Copy, FileText, Trash2 } from 'lucide-react'
+import { Check, Copy, Trash2 } from 'lucide-react'
 import { IconWand } 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 { BEAUTIFY_LANGS, beautify, minify, type BeautifyLang } from '@/lib/beautify-minify'
 
 type Action = 'beautify' | 'minify'
@@ -41,105 +39,118 @@ export function BeautifyMinifyLayout() {
   )
   const inBytes = useMemo(() => (input ? new TextEncoder().encode(input).length : 0), [input])
 
-  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={IconWand}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Formatters}
-        />
-      </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('langLabel')}</Label>
-          <Select value={lang} onValueChange={(v) => setLang(v as BeautifyLang)}>
-            <SelectTrigger className="w-[160px]">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {BEAUTIFY_LANGS.map((l) => (
-                <SelectItem key={l.value} value={l.value}>
-                  {l.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="space-y-1.5">
-          <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('actionLabel')}</Label>
-          <ToggleGroup
-            type="single"
-            value={action}
-            onValueChange={(v) => v && setAction(v as Action)}
-            className="justify-start"
-          >
-            <ToggleGroupItem value="beautify" className="px-4 text-xs">{t('beautify')}</ToggleGroupItem>
-            <ToggleGroupItem value="minify" className="px-4 text-xs">{t('minify')}</ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-      </Card>
+  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-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+          {t('langLabel')}
+        </Label>
+        <Select value={lang} onValueChange={(v) => setLang(v as BeautifyLang)}>
+          <SelectTrigger className="w-[160px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {BEAUTIFY_LANGS.map((l) => (
+              <SelectItem key={l.value} value={l.value}>
+                {l.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-1.5">
+        <Label className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+          {t('actionLabel')}
+        </Label>
+        <ToggleGroup
+          type="single"
+          value={action}
+          onValueChange={(v) => v && setAction(v as Action)}
+          className="justify-start"
+        >
+          <ToggleGroupItem value="beautify" className="px-4 text-xs">
+            {t('beautify')}
+          </ToggleGroupItem>
+          <ToggleGroupItem value="minify" className="px-4 text-xs">
+            {t('minify')}
+          </ToggleGroupItem>
+        </ToggleGroup>
+      </div>
+    </div>
+  )
 
-      <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-2">
-        <Card className="flex flex-col overflow-hidden min-h-0">
-          <div className="flex items-center justify-between border-b border-border/50 bg-muted/30 px-4 py-2.5">
-            <div className="flex items-center gap-2">
-              <FileText className="h-3.5 w-3.5 text-muted-foreground" />
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('panels.input')}</Label>
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="text-[10px] tabular-nums text-muted-foreground">{t('bytes', { count: inBytes.toLocaleString() })}</span>
-              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setInput('')} disabled={!input} title={t('clear')}>
+  return (
+    <ToolShell
+      icon={IconWand}
+      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('bytes', { count: inBytes.toLocaleString() })}
+              </span>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6"
+                onClick={() => setInput('')}
+                disabled={!input}
+                title={t('clear')}
+              >
                 <Trash2 className="h-3.5 w-3.5" />
               </Button>
-            </div>
-          </div>
-          <div className="relative min-h-0 flex-1">
-            <textarea
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              placeholder={t('placeholder')}
-              className="absolute inset-0 h-full w-full resize-none bg-transparent p-4 font-mono text-sm placeholder:text-muted-foreground/50 focus:outline-none"
-              spellCheck={false}
-              autoComplete="off"
-            />
-          </div>
-        </Card>
+            </>
+          }
+        >
+          <ToolTextArea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder={t('placeholder')}
+            autoComplete="off"
+          />
+        </IOPanel>
 
-        <Card className="flex flex-col overflow-hidden min-h-0">
-          <div className="flex items-center justify-between 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">
-              <span className="text-[10px] tabular-nums text-muted-foreground">{t('bytes', { count: outBytes.toLocaleString() })}</span>
+        <IOPanel
+          label={t('panels.output')}
+          bodyClassName="overflow-auto"
+          actions={
+            <>
+              <span className="text-[10px] tabular-nums text-muted-foreground">
+                {t('bytes', { count: outBytes.toLocaleString() })}
+              </span>
               <Button
                 size="sm"
                 variant="secondary"
+                className="h-7"
                 disabled={!result.output}
                 onClick={() => void copyToClipboard(result.output, { silent: true })}
               >
-                {copied ? <Check className="mr-1.5 h-4 w-4 text-emerald-600" /> : <Copy className="mr-1.5 h-4 w-4" />}
+                {copied ? (
+                  <Check className="mr-1.5 h-4 w-4 text-emerald-600" />
+                ) : (
+                  <Copy className="mr-1.5 h-4 w-4" />
+                )}
                 {copied ? t('copied') : t('copy')}
               </Button>
-            </div>
-          </div>
-          <div className="min-h-0 flex-1 overflow-auto">
-            {result.error ? (
-              <div className="p-4 text-sm text-destructive">{result.error}</div>
-            ) : result.output ? (
-              <pre className="p-4 font-mono text-sm leading-relaxed whitespace-pre-wrap break-words">{result.output}</pre>
-            ) : (
-              <div className="p-4 text-sm text-muted-foreground">{t('outputPlaceholder')}</div>
-            )}
-          </div>
-        </Card>
-      </div>
-    </div>
+            </>
+          }
+        >
+          {result.error ? (
+            <div className="p-3 text-sm text-destructive">{result.error}</div>
+          ) : result.output ? (
+            <pre className="whitespace-pre-wrap break-words p-3 font-mono text-sm leading-relaxed">
+              {result.output}
+            </pre>
+          ) : (
+            <div className="p-3 text-sm text-muted-foreground">{t('outputPlaceholder')}</div>
+          )}
+        </IOPanel>
+      </ToolPanels>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/diff-checker/diff-checker-layout.tsx b/apps/desktop-ui/src/components/diff-checker/diff-checker-layout.tsx
index 7d043316..b060415d 100644
--- a/apps/desktop-ui/src/components/diff-checker/diff-checker-layout.tsx
+++ b/apps/desktop-ui/src/components/diff-checker/diff-checker-layout.tsx
@@ -2,8 +2,6 @@
 
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
 import {
   buildLineDiffRows,
   countDiffRows,
@@ -15,9 +13,9 @@ import { Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useIsMobile } from '@/components/hooks/use-mobile';
 import { IconGitCompare } from '@tabler/icons-react';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
 import { ToolMobileTabs } from '@/components/tools/tool-mobile-tabs';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
+import { ToolShell } from '@/components/tools/tool-shell';
+import { ToolPanels, IOPanel, ToolTextArea } from '@/components/tools/io-panel';
 
 const SAMPLE_A = `function greet(name) {
   console.log("Hello, " + name);
@@ -90,14 +88,13 @@ export function DiffCheckerLayout() {
     </span>
   );
 
-  const diffPanel = (
-    <Card className="flex flex-col flex-1 min-h-[280px] overflow-hidden p-0">
-      <div className="px-3 py-2 border-b border-border/50 bg-muted/30 shrink-0 flex items-center justify-between">
-        <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-          {t('comparisonLabel')}
-        </Label>
-        {statsBadge}
-      </div>
+  const diffResult = (
+    <IOPanel
+      label={t('comparisonLabel')}
+      actions={statsBadge || undefined}
+      className="flex-1 min-h-[280px]"
+      bodyClassName="flex min-h-0 flex-col overflow-hidden"
+    >
       <div className="flex flex-col md:flex-row flex-1 min-h-0 divide-y md:divide-y-0 md:divide-x divide-border">
         <div
           ref={leftScrollRef}
@@ -116,7 +113,7 @@ export function DiffCheckerLayout() {
                 {i + 1}
               </span>
               <pre className="flex-1 py-0.5 pl-2 pr-2 whitespace-pre-wrap break-all m-0 bg-transparent">
-                {row.left === '' ? '\u00a0' : row.left}
+                {row.left === '' ? ' ' : row.left}
               </pre>
             </div>
           ))}
@@ -141,7 +138,7 @@ export function DiffCheckerLayout() {
                 {i + 1}
               </span>
               <pre className="flex-1 py-0.5 pl-2 pr-2 whitespace-pre-wrap break-all m-0 bg-transparent">
-                {row.right === '' ? '\u00a0' : row.right}
+                {row.right === '' ? ' ' : row.right}
               </pre>
             </div>
           ))}
@@ -150,34 +147,35 @@ export function DiffCheckerLayout() {
           )}
         </div>
       </div>
-    </Card>
+    </IOPanel>
   );
 
-  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={IconGitCompare} title={t('title')} description={t('subtitle')} offline={false} />
-      </RevealItem>
-
-      {/* Status + clear row */}
-      <div className="flex flex-wrap items-center gap-3 text-xs shrink-0">
-        {truncated && (
-          <span className="text-amber-600 dark:text-amber-400">
-            {t('truncatedWarning', { max: DIFF_MAX_ROWS.toLocaleString() })}
-          </span>
-        )}
-        {overLimit && (
-          <span className="text-destructive">
-            {t('limitExceeded', { max: DIFF_MAX_INPUT_CHARS.toLocaleString() })}
-          </span>
-        )}
-        <Button type="button" variant="outline" size="sm" className="h-7 text-xs gap-1 ml-auto" onClick={clearAll}>
-          <Trash2 className="h-3 w-3" />
-          {t('clearBoth')}
-        </Button>
-      </div>
+  const toolbar = (
+    <div className="flex flex-wrap items-center gap-3 text-xs shrink-0">
+      {truncated && (
+        <span className="text-amber-600 dark:text-amber-400">
+          {t('truncatedWarning', { max: DIFF_MAX_ROWS.toLocaleString() })}
+        </span>
+      )}
+      {overLimit && (
+        <span className="text-destructive">
+          {t('limitExceeded', { max: DIFF_MAX_INPUT_CHARS.toLocaleString() })}
+        </span>
+      )}
+      <Button type="button" variant="outline" size="sm" className="h-7 text-xs gap-1 ml-auto" onClick={clearAll}>
+        <Trash2 className="h-3 w-3" />
+        {t('clearBoth')}
+      </Button>
+    </div>
+  );
 
+  return (
+    <ToolShell
+      icon={IconGitCompare}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
       {isMobile ? (
         /* ── Mobile: 3-tab layout (Original / Modified / Diff) ── */
         <>
@@ -193,70 +191,52 @@ export function DiffCheckerLayout() {
 
           <div className="flex-1 min-h-0 flex flex-col">
             {mobileTab === 'original' && (
-              <Card className="flex flex-col flex-1 overflow-hidden">
-                <textarea
+              <IOPanel label={t('original')} className="flex-1">
+                <ToolTextArea
                   id="diff-left"
                   value={leftText}
                   onChange={(e) => setLeftText(e.target.value)}
-                  spellCheck={false}
-                  className="flex-1 resize-none w-full bg-transparent p-3 text-sm font-mono focus:outline-none"
                   placeholder={t('originalPlaceholder')}
                 />
-              </Card>
+              </IOPanel>
             )}
             {mobileTab === 'modified' && (
-              <Card className="flex flex-col flex-1 overflow-hidden">
-                <textarea
+              <IOPanel label={t('modified')} className="flex-1">
+                <ToolTextArea
                   id="diff-right"
                   value={rightText}
                   onChange={(e) => setRightText(e.target.value)}
-                  spellCheck={false}
-                  className="flex-1 resize-none w-full bg-transparent p-3 text-sm font-mono focus:outline-none"
                   placeholder={t('modifiedPlaceholder')}
                 />
-              </Card>
+              </IOPanel>
             )}
-            {mobileTab === 'diff' && diffPanel}
+            {mobileTab === 'diff' && diffResult}
           </div>
         </>
       ) : (
         /* ── Desktop: stacked inputs + full diff below ── */
         <>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 shrink-0 min-h-[160px]">
-            <Card className="flex flex-col overflow-hidden">
-              <div className="px-3 py-2 border-b border-border/50 bg-muted/30">
-                <Label htmlFor="diff-left" className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                  {t('original')}
-                </Label>
-              </div>
-              <textarea
+          <ToolPanels className="lg:grid-cols-2 flex-none shrink-0 min-h-[160px]">
+            <IOPanel label={t('original')}>
+              <ToolTextArea
                 id="diff-left"
                 value={leftText}
                 onChange={(e) => setLeftText(e.target.value)}
-                spellCheck={false}
-                className="min-h-[160px] flex-1 resize-y w-full bg-transparent p-3 text-sm font-mono focus:outline-none"
                 placeholder={t('originalPlaceholder')}
               />
-            </Card>
-            <Card className="flex flex-col overflow-hidden">
-              <div className="px-3 py-2 border-b border-border/50 bg-muted/30">
-                <Label htmlFor="diff-right" className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                  {t('modified')}
-                </Label>
-              </div>
-              <textarea
+            </IOPanel>
+            <IOPanel label={t('modified')}>
+              <ToolTextArea
                 id="diff-right"
                 value={rightText}
                 onChange={(e) => setRightText(e.target.value)}
-                spellCheck={false}
-                className="min-h-[160px] flex-1 resize-y w-full bg-transparent p-3 text-sm font-mono focus:outline-none"
                 placeholder={t('modifiedPlaceholder')}
               />
-            </Card>
-          </div>
-          {diffPanel}
+            </IOPanel>
+          </ToolPanels>
+          {diffResult}
         </>
       )}
-    </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/format-converter/format-converter-layout.tsx b/apps/desktop-ui/src/components/format-converter/format-converter-layout.tsx
index 3e3b0377..b5a19288 100644
--- a/apps/desktop-ui/src/components/format-converter/format-converter-layout.tsx
+++ b/apps/desktop-ui/src/components/format-converter/format-converter-layout.tsx
@@ -8,11 +8,9 @@ import { useTheme } from 'next-themes';
 import { useTranslations } from 'next-intl';
 import { ArrowLeftRight, Copy, Check, AlertCircle } from 'lucide-react';
 import { IconFileCode } from '@tabler/icons-react';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
+import { ToolShell } from '@/components/tools/tool-shell';
+import { ToolPanels, IOPanel } from '@/components/tools/io-panel';
 import { ToolMobileTabs } from '@/components/tools/tool-mobile-tabs';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
-import { Card } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { convert, ALL_FORMATS, FORMAT_LABELS, type Format } from '@/lib/format-converter';
@@ -99,79 +97,75 @@ export function FormatConverterLayout() {
   }, [to]);
 
   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={IconFileCode} title={t('title')} description={t('subtitle')} />
-      </RevealItem>
-
-      {isMobile && (
-        <ToolMobileTabs
-          value={mobileTab}
-          onValueChange={setMobileTab}
-          tabs={[
-            { value: 'input', label: t('fromLabel') },
-            { value: 'output', label: t('toLabel') },
-          ]}
-        />
-      )}
-
-      <div className={`min-h-0 flex-1 ${isMobile ? 'flex flex-col' : 'grid grid-cols-2 gap-4'}`}>
+    <ToolShell
+      icon={IconFileCode}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={
+        isMobile ? (
+          <ToolMobileTabs
+            value={mobileTab}
+            onValueChange={setMobileTab}
+            tabs={[
+              { value: 'input', label: t('fromLabel') },
+              { value: 'output', label: t('toLabel') },
+            ]}
+          />
+        ) : undefined
+      }
+    >
+      <ToolPanels className="lg:grid-cols-2">
         {/* Input */}
         {(!isMobile || mobileTab === 'input') && (
-          <Card className="flex flex-col gap-3 overflow-hidden p-4 flex-1">
-            <div className="flex shrink-0 items-center gap-3">
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                {t('fromLabel')}
-              </Label>
-              <Select value={from} onValueChange={(v) => handleFromChange(v as Format)}>
-                <SelectTrigger className="h-7 w-28 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {ALL_FORMATS.map((f) => (
-                    <SelectItem key={f} value={f} className="text-xs">
-                      {FORMAT_LABELS[f]}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="relative flex-1 min-h-[300px]">
-              <MonacoEditor
-                height="100%"
-                className="absolute inset-0"
-                language={MONACO_LANG[from]}
-                value={input}
-                onChange={(v) => {
-                  setInput(v ?? '');
-                  if (isMobile && (v ?? '').trim()) setMobileTab('output');
-                }}
-                theme={monacoTheme}
-                options={{
-                  ...EDITOR_OPTIONS_BASE,
-                  formatOnPaste: true,
-                  formatOnType: true,
-                  placeholder: PLACEHOLDERS[from],
-                }}
-              />
-            </div>
-
-            <p className="shrink-0 text-xs text-muted-foreground">
-              {t('charCount', { count: input.length })}
-            </p>
-          </Card>
+          <IOPanel
+            label={t('fromLabel')}
+            actions={
+              <>
+                <Select value={from} onValueChange={(v) => handleFromChange(v as Format)}>
+                  <SelectTrigger className="h-7 w-28 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {ALL_FORMATS.map((f) => (
+                      <SelectItem key={f} value={f} className="text-xs">
+                        {FORMAT_LABELS[f]}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <span className="text-[10px] tabular-nums text-muted-foreground">
+                  {t('charCount', { count: input.length })}
+                </span>
+              </>
+            }
+          >
+            <MonacoEditor
+              height="100%"
+              className="absolute inset-0"
+              language={MONACO_LANG[from]}
+              value={input}
+              onChange={(v) => {
+                setInput(v ?? '');
+                if (isMobile && (v ?? '').trim()) setMobileTab('output');
+              }}
+              theme={monacoTheme}
+              options={{
+                ...EDITOR_OPTIONS_BASE,
+                formatOnPaste: true,
+                formatOnType: true,
+                placeholder: PLACEHOLDERS[from],
+              }}
+            />
+          </IOPanel>
         )}
 
         {/* Output */}
         {(!isMobile || mobileTab === 'output') && (
-          <Card className="flex flex-col gap-3 overflow-hidden p-4 flex-1">
-            <div className="flex shrink-0 flex-wrap items-center justify-between gap-2">
-              <div className="flex items-center gap-3">
-                <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                  {t('toLabel')}
-                </Label>
+          <IOPanel
+            label={t('toLabel')}
+            bodyClassName="flex flex-col"
+            actions={
+              <>
                 <Select value={to} onValueChange={(v) => setTo(v as Format)}>
                   <SelectTrigger className="h-7 w-28 text-xs">
                     <SelectValue />
@@ -184,9 +178,6 @@ export function FormatConverterLayout() {
                     ))}
                   </SelectContent>
                 </Select>
-              </div>
-
-              <div className="flex gap-2">
                 <Button
                   size="sm"
                   variant="outline"
@@ -203,16 +194,16 @@ export function FormatConverterLayout() {
                     : <Copy className="mr-1.5 h-4 w-4" />}
                   {copied ? t('copied') : t('copy')}
                 </Button>
-              </div>
-            </div>
-
-            {error ? (
-              <div className="flex flex-1 min-h-[300px] gap-2 rounded-md border border-destructive/40 bg-destructive/5 p-4">
-                <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
-                <span className="font-mono text-xs text-destructive break-all">{error}</span>
-              </div>
-            ) : (
-              <div className="relative flex-1 min-h-[300px]">
+              </>
+            }
+          >
+            <div className="relative min-h-0 flex-1">
+              {error ? (
+                <div className="flex h-full gap-2 overflow-auto rounded-md border border-destructive/40 bg-destructive/5 p-4">
+                  <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
+                  <span className="font-mono text-xs text-destructive break-all">{error}</span>
+                </div>
+              ) : (
                 <MonacoEditor
                   height="100%"
                   className="absolute inset-0"
@@ -227,13 +218,14 @@ export function FormatConverterLayout() {
                     renderLineHighlight: 'none' as const,
                   }}
                 />
-              </div>
-            )}
-
-            <p className="shrink-0 text-xs text-muted-foreground">{t('localNote')}</p>
-          </Card>
+              )}
+            </div>
+            <p className="shrink-0 border-t border-border px-3 py-1.5 text-xs text-muted-foreground">
+              {t('localNote')}
+            </p>
+          </IOPanel>
         )}
-      </div>
-    </div>
+      </ToolPanels>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/graphql-formatter/graphql-formatter-layout.tsx b/apps/desktop-ui/src/components/graphql-formatter/graphql-formatter-layout.tsx
index f48450cc..eecdf286 100644
--- a/apps/desktop-ui/src/components/graphql-formatter/graphql-formatter-layout.tsx
+++ b/apps/desktop-ui/src/components/graphql-formatter/graphql-formatter-layout.tsx
@@ -1,21 +1,18 @@
 'use client';
 
-import dynamic from 'next/dynamic';
 import { parse, print, stripIgnoredCharacters } from 'graphql';
 import { AlertCircle, Trash2, Wand2 } from 'lucide-react';
-import { useTheme } from 'next-themes';
 import { useCallback, useState } from 'react';
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { useTranslations } from 'next-intl';
 import { registerGraphqlMonarch } from '@/components/graphql-formatter/register-graphql-monarch';
 import { useIsMobile } from '@/components/hooks/use-mobile';
 import { IconBrandGraphql } from '@tabler/icons-react';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
+import { ToolShell } from '@/components/tools/tool-shell';
+import { IOPanel } from '@/components/tools/io-panel';
 import { ToolMobileTabs } from '@/components/tools/tool-mobile-tabs';
 import { CopyIconButton } from '@/components/tools/copy-icon-button';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
 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 {
@@ -26,7 +23,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-
+import { cn } from '@/lib/utils';
 import CodeEditor from '@/components/ui/code-editor';
 
 const SAMPLE = `query UserPosts($userId: ID!, $first: Int = 10) {
@@ -46,14 +43,10 @@ const SAMPLE = `query UserPosts($userId: ID!, $first: Int = 10) {
 
 const MAX_LEN = 500_000;
 
-// Editor options are now largely handled by CodeEditor internally.
-
 type OutputMode = 'pretty' | 'minify';
 
 export function GraphqlFormatterLayout() {
   const t = useTranslations('GraphqlFormatter');
-  const { resolvedTheme } = useTheme();
-  const monacoTheme = resolvedTheme === 'dark' ? 'vs-dark' : 'light';
   const isMobile = useIsMobile();
   const [mobileTab, setMobileTab] = useState<'input' | 'output'>('input');
   const [panelTab, setPanelTab] = useState<'format' | 'build'>('format');
@@ -126,124 +119,121 @@ export function GraphqlFormatterLayout() {
     void copyToClipboard(output, { silent: true });
   };
 
-  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={IconBrandGraphql} title={t('title')} description={t('subtitle')} />
-      </RevealItem>
-
-      <Card className="p-4 shrink-0 space-y-4">
-        <Tabs value={panelTab} onValueChange={(v) => setPanelTab(v as 'format' | 'build')}>
-          <TabsList className="grid w-full max-w-md grid-cols-2">
-            <TabsTrigger value="format">{t('tabs.format')}</TabsTrigger>
-            <TabsTrigger value="build">{t('tabs.build')}</TabsTrigger>
-          </TabsList>
-          <TabsContent value="format" className="mt-4 space-y-4">
-            <div className="flex flex-wrap items-end gap-3">
-              <div className="space-y-2 w-full sm:w-auto sm:min-w-[140px]">
-                <Label className="text-xs text-muted-foreground uppercase tracking-wider">
-                  {t('outputModeLabel')}
-                </Label>
-                <Select value={outputMode} onValueChange={(v) => setOutputMode(v as OutputMode)}>
-                  <SelectTrigger className="h-9 text-sm w-full sm:w-[160px]">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="pretty">{t('outputModes.pretty')}</SelectItem>
-                    <SelectItem value="minify">{t('outputModes.minify')}</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="flex flex-wrap gap-2 pb-0.5">
-                <Button type="button" size="sm" className="gap-1.5 h-9" onClick={runFormat}>
-                  <Wand2 className="h-3.5 w-3.5" />
-                  {t('format')}
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="gap-1.5 h-9"
-                  onClick={() => {
-                    setInput('');
-                    setOutput('');
-                    setError('');
-                  }}
-                >
-                  <Trash2 className="h-3.5 w-3.5" />
-                  {t('clear')}
-                </Button>
-              </div>
+  const toolbar = (
+    <div className="shrink-0 space-y-4 rounded-lg border border-border bg-card p-4">
+      <Tabs value={panelTab} onValueChange={(v) => setPanelTab(v as 'format' | 'build')}>
+        <TabsList className="grid w-full max-w-md grid-cols-2">
+          <TabsTrigger value="format">{t('tabs.format')}</TabsTrigger>
+          <TabsTrigger value="build">{t('tabs.build')}</TabsTrigger>
+        </TabsList>
+        <TabsContent value="format" className="mt-4 space-y-4">
+          <div className="flex flex-wrap items-end gap-3">
+            <div className="w-full space-y-2 sm:w-auto sm:min-w-[140px]">
+              <Label className="text-xs uppercase tracking-wider text-muted-foreground">
+                {t('outputModeLabel')}
+              </Label>
+              <Select value={outputMode} onValueChange={(v) => setOutputMode(v as OutputMode)}>
+                <SelectTrigger className="h-9 w-full text-sm sm:w-[160px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="pretty">{t('outputModes.pretty')}</SelectItem>
+                  <SelectItem value="minify">{t('outputModes.minify')}</SelectItem>
+                </SelectContent>
+              </Select>
             </div>
-          </TabsContent>
-          <TabsContent value="build" className="mt-4 space-y-4">
-            <p className="text-xs text-muted-foreground">{t('builderHint')}</p>
-            <div className="grid gap-4 sm:grid-cols-2">
-              <div className="space-y-2">
-                <Label className="text-xs text-muted-foreground uppercase tracking-wider">
-                  {t('builder.operation')}
-                </Label>
-                <Select value={opType} onValueChange={(v) => setOpType(v as typeof opType)}>
-                  <SelectTrigger className="h-9 text-sm">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="query">{t('builder.operations.query')}</SelectItem>
-                    <SelectItem value="mutation">{t('builder.operations.mutation')}</SelectItem>
-                    <SelectItem value="subscription">{t('builder.operations.subscription')}</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="space-y-2">
-                <Label className="text-xs text-muted-foreground uppercase tracking-wider">
-                  {t('builder.operationName')}
-                </Label>
-                <Input
-                  value={opName}
-                  onChange={(e) => setOpName(e.target.value)}
-                  placeholder={t('builder.operationNamePlaceholder')}
-                  className="h-9 text-sm"
-                />
-              </div>
+            <div className="flex flex-wrap gap-2 pb-0.5">
+              <Button type="button" size="sm" className="h-9 gap-1.5" onClick={runFormat}>
+                <Wand2 className="h-3.5 w-3.5" />
+                {t('format')}
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-9 gap-1.5"
+                onClick={() => {
+                  setInput('');
+                  setOutput('');
+                  setError('');
+                }}
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+                {t('clear')}
+              </Button>
             </div>
+          </div>
+        </TabsContent>
+        <TabsContent value="build" className="mt-4 space-y-4">
+          <p className="text-xs text-muted-foreground">{t('builderHint')}</p>
+          <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-2">
-              <Label className="text-xs text-muted-foreground uppercase tracking-wider">
-                {t('builder.variableDefs')}
+              <Label className="text-xs uppercase tracking-wider text-muted-foreground">
+                {t('builder.operation')}
               </Label>
-              <Input
-                value={varDefs}
-                onChange={(e) => setVarDefs(e.target.value)}
-                placeholder={t('builder.variableDefsPlaceholder')}
-                className="h-9 text-sm font-mono"
-                spellCheck={false}
-              />
+              <Select value={opType} onValueChange={(v) => setOpType(v as typeof opType)}>
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="query">{t('builder.operations.query')}</SelectItem>
+                  <SelectItem value="mutation">{t('builder.operations.mutation')}</SelectItem>
+                  <SelectItem value="subscription">{t('builder.operations.subscription')}</SelectItem>
+                </SelectContent>
+              </Select>
             </div>
             <div className="space-y-2">
-              <Label className="text-xs text-muted-foreground uppercase tracking-wider">
-                {t('builder.selection')}
+              <Label className="text-xs uppercase tracking-wider text-muted-foreground">
+                {t('builder.operationName')}
               </Label>
-              <textarea
-                value={selection}
-                onChange={(e) => setSelection(e.target.value)}
-                spellCheck={false}
-                rows={6}
-                className="w-full resize-y rounded-md border border-input bg-transparent px-3 py-2 text-sm font-mono shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              <Input
+                value={opName}
+                onChange={(e) => setOpName(e.target.value)}
+                placeholder={t('builder.operationNamePlaceholder')}
+                className="h-9 text-sm"
               />
             </div>
-            <Button type="button" size="sm" onClick={applyBuilder}>
-              {t('builder.apply')}
-            </Button>
-          </TabsContent>
-        </Tabs>
-        <p className="text-[11px] text-muted-foreground">
-          {t('counter', { current: input.length.toLocaleString(), max: MAX_LEN.toLocaleString() })}
-        </p>
-      </Card>
+          </div>
+          <div className="space-y-2">
+            <Label className="text-xs uppercase tracking-wider text-muted-foreground">
+              {t('builder.variableDefs')}
+            </Label>
+            <Input
+              value={varDefs}
+              onChange={(e) => setVarDefs(e.target.value)}
+              placeholder={t('builder.variableDefsPlaceholder')}
+              className="h-9 font-mono text-sm"
+              spellCheck={false}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label className="text-xs uppercase tracking-wider text-muted-foreground">
+              {t('builder.selection')}
+            </Label>
+            <textarea
+              value={selection}
+              onChange={(e) => setSelection(e.target.value)}
+              spellCheck={false}
+              rows={6}
+              className="w-full resize-y rounded-md border border-input bg-transparent px-3 py-2 font-mono text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+          </div>
+          <Button type="button" size="sm" onClick={applyBuilder}>
+            {t('builder.apply')}
+          </Button>
+        </TabsContent>
+      </Tabs>
+      <p className="text-[11px] text-muted-foreground">
+        {t('counter', { current: input.length.toLocaleString(), max: MAX_LEN.toLocaleString() })}
+      </p>
+    </div>
+  );
 
+  return (
+    <ToolShell icon={IconBrandGraphql} title={t('title')} description={t('subtitle')} toolbar={toolbar}>
       {error && (
-        <div className="flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm text-destructive shrink-0">
-          <AlertCircle className="h-4 w-4 shrink-0 mt-0.5" />
+        <div className="mb-4 flex shrink-0 items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm text-destructive">
+          <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
           <p>{error}</p>
         </div>
       )}
@@ -260,45 +250,40 @@ export function GraphqlFormatterLayout() {
       )}
 
       <div
-        className={`flex-1 min-h-0 ${isMobile ? 'flex flex-col gap-4' : 'grid grid-cols-1 lg:grid-cols-2 gap-4'}`}
+        className={cn(
+          'min-h-0 flex-1',
+          isMobile ? 'mt-4 flex flex-col gap-4' : 'grid grid-cols-1 gap-4 lg:grid-cols-2',
+        )}
       >
         {(!isMobile || mobileTab === 'input') && (
-          <Card className="flex flex-col overflow-hidden min-h-[280px] flex-1">
-            <div className="px-4 py-2.5 border-b border-border/50 bg-muted/30">
-              <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                {t('inputPanel')}
-              </Label>
-            </div>
-            <div className="flex-1 min-h-[240px] relative p-1">
-              <CodeEditor
-                language="graphql"
-                value={input}
-                onChange={(v) => setInput(v ?? '')}
-                beforeMount={(monaco) => registerGraphqlMonarch(monaco)}
-              />
-            </div>
-          </Card>
+          <IOPanel label={t('inputPanel')} bodyClassName="p-1" className="min-h-[280px] flex-1">
+            <CodeEditor
+              language="graphql"
+              value={input}
+              onChange={(v) => setInput(v ?? '')}
+              beforeMount={(monaco) => registerGraphqlMonarch(monaco)}
+            />
+          </IOPanel>
         )}
 
         {(!isMobile || mobileTab === 'output') && (
-          <Card className="flex flex-col overflow-hidden min-h-[280px] flex-1">
-            <div className="flex items-center justify-between px-4 py-2.5 border-b border-border/50 bg-muted/30 gap-2">
-              <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                {t('outputPanel')}
-              </Label>
+          <IOPanel
+            label={t('outputPanel')}
+            bodyClassName="p-1"
+            className="min-h-[280px] flex-1"
+            actions={
               <CopyIconButton onCopy={handleCopy} copied={copied} disabled={!output} label={t('copy')} />
-            </div>
-            <div className="flex-1 min-h-[240px] relative p-1">
-              <CodeEditor
-                language="graphql"
-                value={output}
-                beforeMount={(monaco) => registerGraphqlMonarch(monaco)}
-                readOnly
-              />
-            </div>
-          </Card>
+            }
+          >
+            <CodeEditor
+              language="graphql"
+              value={output}
+              beforeMount={(monaco) => registerGraphqlMonarch(monaco)}
+              readOnly
+            />
+          </IOPanel>
         )}
       </div>
-    </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/json-diff/json-diff-layout.tsx b/apps/desktop-ui/src/components/json-diff/json-diff-layout.tsx
index 55e5bab6..aace0214 100644
--- a/apps/desktop-ui/src/components/json-diff/json-diff-layout.tsx
+++ b/apps/desktop-ui/src/components/json-diff/json-diff-layout.tsx
@@ -7,25 +7,20 @@ import { useTranslations } from 'next-intl'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 import { Label } from '@/components/ui/label'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import { Switch } from '@/components/ui/switch'
 import {
   ArrowRight,
   Check,
   CircleCheck,
   Copy,
-  FileText,
-  GitCompare,
   Sparkles,
   Trash2,
   WandSparkles,
 } from 'lucide-react'
 import { IconGitCompare } 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 {
   SAMPLE_A,
   SAMPLE_B,
@@ -68,13 +63,10 @@ function DocPanel({ label, value, onChange, onSample, t }: DocPanelProps) {
     }
   }
   return (
-    <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">{label}</Label>
-        </div>
-        <div className="flex items-center gap-1.5">
+    <IOPanel
+      label={label}
+      actions={
+        <>
           <Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={onSample}>
             <Sparkles className="mr-1 h-3.5 w-3.5" />
             {t('sample')}
@@ -86,19 +78,16 @@ function DocPanel({ label, value, onChange, onSample, t }: DocPanelProps) {
           <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onChange('')} disabled={!value} title={t('clear')}>
             <Trash2 className="h-3.5 w-3.5" />
           </Button>
-        </div>
-      </div>
-      <div className="relative min-h-0 flex-1">
-        <textarea
-          value={value}
-          onChange={(e) => onChange(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={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={t('placeholder')}
+        autoComplete="off"
+      />
+    </IOPanel>
   )
 }
 
@@ -125,50 +114,45 @@ export function JsonDiffLayout() {
     return counts
   }, [result])
 
-  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={IconGitCompare}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Formatters}
-        />
-      </RevealItem>
-
-      <Card className="flex flex-wrap items-center gap-3 p-4">
-        <div className="flex items-center gap-2">
-          <Switch id="ignore-array-order" checked={ignoreArrayOrder} onCheckedChange={setIgnoreArrayOrder} />
-          <Label htmlFor="ignore-array-order" className="text-sm">{t('options.ignoreArrayOrder')}</Label>
-        </div>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          className="ml-auto"
-          onClick={() => {
-            setAText(SAMPLE_A)
-            setBText(SAMPLE_B)
-          }}
-        >
-          <Sparkles className="mr-1.5 h-4 w-4" />
-          {t('loadBothSamples')}
-        </Button>
-      </Card>
+  const toolbar = (
+    <div className="flex flex-wrap items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
+      <div className="flex items-center gap-2">
+        <Switch id="ignore-array-order" checked={ignoreArrayOrder} onCheckedChange={setIgnoreArrayOrder} />
+        <Label htmlFor="ignore-array-order" className="text-sm">{t('options.ignoreArrayOrder')}</Label>
+      </div>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        className="ml-auto"
+        onClick={() => {
+          setAText(SAMPLE_A)
+          setBText(SAMPLE_B)
+        }}
+      >
+        <Sparkles className="mr-1.5 h-4 w-4" />
+        {t('loadBothSamples')}
+      </Button>
+    </div>
+  )
 
+  return (
+    <ToolShell
+      icon={IconGitCompare}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
       <div className="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_minmax(0,1fr)] gap-4">
-        <div className="grid min-h-0 grid-cols-1 gap-4 lg:grid-cols-2">
+        <ToolPanels className="lg:grid-cols-2">
           <DocPanel label={t('panels.left')} value={aText} onChange={setAText} onSample={() => setAText(SAMPLE_A)} t={t} />
           <DocPanel label={t('panels.right')} value={bText} onChange={setBText} onSample={() => setBText(SAMPLE_B)} t={t} />
-        </div>
+        </ToolPanels>
 
-        <Card className="flex flex-col overflow-hidden min-h-0">
-          <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border/50 bg-muted/30 px-4 py-2.5">
-            <div className="flex flex-wrap items-center gap-2">
-              <GitCompare className="h-3.5 w-3.5 text-muted-foreground" />
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('panels.results')}</Label>
+        <IOPanel
+          label={
+            <>
+              {t('panels.results')}
               {result && !result.error && result.changes.length > 0 && (
                 <>
                   <Badge className={`text-[10px] ${TYPE_STYLES.added.badge}`} variant="secondary">
@@ -182,7 +166,10 @@ export function JsonDiffLayout() {
                   </Badge>
                 </>
               )}
-            </div>
+            </>
+          }
+          bodyClassName="overflow-auto"
+          actions={
             <Button
               size="sm"
               variant="secondary"
@@ -192,45 +179,43 @@ export function JsonDiffLayout() {
               {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('copyChanges')}
             </Button>
-          </div>
-
-          <ScrollArea className="min-h-0 flex-1">
-            {!result ? (
-              <div className="p-4 text-sm text-muted-foreground/60">{t('empty')}</div>
-            ) : result.error ? (
-              <div className="p-4 text-sm text-destructive">{result.error}</div>
-            ) : result.changes.length === 0 ? (
-              <div className="flex items-center gap-2 p-4 text-sm text-emerald-600 dark:text-emerald-400">
-                <CircleCheck className="h-4 w-4" />
-                {t('identical')}
-              </div>
-            ) : (
-              <div className="flex flex-col gap-1.5 p-3">
-                {result.changes.map((change, i) => (
-                  <div
-                    key={`${change.path}-${change.type}-${i}`}
-                    className={`flex flex-wrap items-center gap-x-3 gap-y-1 rounded-md border-l-2 bg-muted/30 px-3 py-1.5 ${TYPE_STYLES[change.type].row}`}
-                  >
-                    <Badge className={`text-[10px] uppercase ${TYPE_STYLES[change.type].badge}`} variant="secondary">
-                      {t(`types.${change.type}`)}
-                    </Badge>
-                    <code className="font-mono text-xs font-medium">{change.path}</code>
-                    <span className="flex items-center gap-1.5 font-mono text-xs text-muted-foreground">
-                      {change.type !== 'added' && (
-                        <span className="text-red-600 dark:text-red-400">{previewValue(change.before)}</span>
-                      )}
-                      {change.type === 'changed' && <ArrowRight className="h-3 w-3" />}
-                      {change.type !== 'removed' && (
-                        <span className="text-emerald-600 dark:text-emerald-400">{previewValue(change.after)}</span>
-                      )}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            )}
-          </ScrollArea>
-        </Card>
+          }
+        >
+          {!result ? (
+            <div className="p-4 text-sm text-muted-foreground/60">{t('empty')}</div>
+          ) : result.error ? (
+            <div className="p-4 text-sm text-destructive">{result.error}</div>
+          ) : result.changes.length === 0 ? (
+            <div className="flex items-center gap-2 p-4 text-sm text-emerald-600 dark:text-emerald-400">
+              <CircleCheck className="h-4 w-4" />
+              {t('identical')}
+            </div>
+          ) : (
+            <div className="flex flex-col gap-1.5 p-3">
+              {result.changes.map((change, i) => (
+                <div
+                  key={`${change.path}-${change.type}-${i}`}
+                  className={`flex flex-wrap items-center gap-x-3 gap-y-1 rounded-md border-l-2 bg-muted/30 px-3 py-1.5 ${TYPE_STYLES[change.type].row}`}
+                >
+                  <Badge className={`text-[10px] uppercase ${TYPE_STYLES[change.type].badge}`} variant="secondary">
+                    {t(`types.${change.type}`)}
+                  </Badge>
+                  <code className="font-mono text-xs font-medium">{change.path}</code>
+                  <span className="flex items-center gap-1.5 font-mono text-xs text-muted-foreground">
+                    {change.type !== 'added' && (
+                      <span className="text-red-600 dark:text-red-400">{previewValue(change.before)}</span>
+                    )}
+                    {change.type === 'changed' && <ArrowRight className="h-3 w-3" />}
+                    {change.type !== 'removed' && (
+                      <span className="text-emerald-600 dark:text-emerald-400">{previewValue(change.after)}</span>
+                    )}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </IOPanel>
       </div>
-    </div>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/json-schema-generator/json-schema-generator-layout.tsx b/apps/desktop-ui/src/components/json-schema-generator/json-schema-generator-layout.tsx
index 3a12eaef..3ebef174 100644
--- a/apps/desktop-ui/src/components/json-schema-generator/json-schema-generator-layout.tsx
+++ b/apps/desktop-ui/src/components/json-schema-generator/json-schema-generator-layout.tsx
@@ -6,11 +6,10 @@ import { useIsMobile } from '@/components/hooks/use-mobile';
 import { useTranslations } from 'next-intl';
 import { AlertCircle, Check, Copy, Download, Trash2 } from 'lucide-react';
 import { IconBraces } from '@tabler/icons-react';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
+import { ToolShell } from '@/components/tools/tool-shell';
+import { IOPanel } from '@/components/tools/io-panel';
 import { ToolMobileTabs } from '@/components/tools/tool-mobile-tabs';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
 import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import {
   Select,
@@ -110,59 +109,53 @@ export function JsonSchemaGeneratorLayout() {
     setInput('');
   };
 
-  return (
-    <div className="relative flex h-full flex-col gap-4 overflow-hidden dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-      <RevealItem index={0}>
-        <ToolPageHeader icon={IconBraces} title={t('title')} description={t('subtitle')} />
-      </RevealItem>
-
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
-        <div className="flex flex-col gap-1.5 sm:min-w-[240px]">
-          <Label htmlFor="json-schema-lang" className="text-xs text-muted-foreground">
-            {t('languageLabel')}
-          </Label>
-          <Select
-            value={language}
-            onValueChange={(v) => setLanguage(v as OutputLanguage)}
-          >
-            <SelectTrigger id="json-schema-lang" className="w-full sm:w-[280px]">
-              <SelectValue placeholder={t('languageLabel')} />
-            </SelectTrigger>
-            <SelectContent>
-              {OUTPUT_LANGUAGE_ORDER.map((id) => (
-                <SelectItem key={id} value={id}>
-                  {t(`languages.${id}` as never)}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex flex-wrap gap-2">
-          <Button variant="outline" size="sm" onClick={handleClear}>
-            <Trash2 className="mr-1.5 h-3.5 w-3.5" />
-            {t('clear')}
-          </Button>
-          <Button size="sm" onClick={handleCopy} disabled={!output || !!error}>
-            {copied ? (
-              <Check className="mr-1.5 h-3.5 w-3.5 text-green-500" />
-            ) : (
-              <Copy className="mr-1.5 h-3.5 w-3.5" />
-            )}
-            {t('copy')}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleDownload}
-            disabled={!output || !!error}
-          >
-            <Download className="mr-1.5 h-3.5 w-3.5" />
-            {t('download')}
-          </Button>
-        </div>
+  const toolbar = (
+    <div className="flex flex-col gap-3 rounded-lg border border-border bg-card px-4 py-3 sm:flex-row sm:items-end sm:justify-between">
+      <div className="flex flex-col gap-1.5 sm:min-w-[240px]">
+        <Label htmlFor="json-schema-lang" className="text-xs text-muted-foreground">
+          {t('languageLabel')}
+        </Label>
+        <Select value={language} onValueChange={(v) => setLanguage(v as OutputLanguage)}>
+          <SelectTrigger id="json-schema-lang" className="w-full sm:w-[280px]">
+            <SelectValue placeholder={t('languageLabel')} />
+          </SelectTrigger>
+          <SelectContent>
+            {OUTPUT_LANGUAGE_ORDER.map((id) => (
+              <SelectItem key={id} value={id}>
+                {t(`languages.${id}` as never)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <Button variant="outline" size="sm" onClick={handleClear}>
+          <Trash2 className="mr-1.5 h-3.5 w-3.5" />
+          {t('clear')}
+        </Button>
+        <Button size="sm" onClick={handleCopy} disabled={!output || !!error}>
+          {copied ? (
+            <Check className="mr-1.5 h-3.5 w-3.5 text-green-500" />
+          ) : (
+            <Copy className="mr-1.5 h-3.5 w-3.5" />
+          )}
+          {t('copy')}
+        </Button>
+        <Button variant="outline" size="sm" onClick={handleDownload} disabled={!output || !!error}>
+          <Download className="mr-1.5 h-3.5 w-3.5" />
+          {t('download')}
+        </Button>
       </div>
+    </div>
+  );
 
+  return (
+    <ToolShell
+      icon={IconBraces}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
       {isMobile && (
         <ToolMobileTabs
           value={mobileTab}
@@ -174,83 +167,69 @@ export function JsonSchemaGeneratorLayout() {
         />
       )}
 
-      <div className={`min-h-0 flex-1 ${isMobile ? 'flex flex-col' : 'grid grid-cols-2 gap-4'}`}>
+      <div
+        className={cn(
+          'min-h-0 flex-1',
+          isMobile ? 'mt-4 flex flex-col' : 'grid grid-cols-2 gap-4',
+        )}
+      >
         {(!isMobile || mobileTab === 'input') && (
-          <Card className="flex min-h-[300px] flex-col overflow-hidden">
-            <div className="shrink-0 border-b border-border/50 bg-muted/30 px-4 py-2.5">
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                {t('inputLabel')}
-              </Label>
-            </div>
-            <div className="relative min-h-0 min-h-[260px] flex-1">
-              <JsonSchemaInputEditor
-                value={input}
-                onChange={setInput}
-                ariaLabel={`${t('inputLabel')}. ${t('inputPlaceholder')}`}
-              />
-            </div>
-          </Card>
+          <IOPanel label={t('inputLabel')} className="min-h-[300px]">
+            <JsonSchemaInputEditor
+              value={input}
+              onChange={setInput}
+              ariaLabel={`${t('inputLabel')}. ${t('inputPlaceholder')}`}
+            />
+          </IOPanel>
         )}
 
         {(!isMobile || mobileTab === 'output') && (
-          <Card
-            className={cn(
-              'flex min-h-[300px] flex-col overflow-hidden',
-              error && 'border-destructive/40'
-            )}
-          >
-            <div className="shrink-0 border-b border-border/50 bg-muted/30 px-4 py-2.5 flex items-center justify-between gap-2">
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                {t('outputLabel')}
-              </Label>
-              {!error && formats.length > 0 && (
+          <IOPanel
+            label={t('outputLabel')}
+            className={cn('min-h-[300px]', error && 'border-destructive/40')}
+            actions={
+              !error && formats.length > 0 ? (
                 <div className="flex flex-wrap items-center gap-1">
                   <span className="text-[10px] uppercase tracking-wider text-muted-foreground">
                     {t('detectedFormats')}
                   </span>
                   {formats.map(([fmt, count]) => (
-                    <Badge key={fmt} variant="secondary" className="text-[10px] font-mono">
-                      {fmt}{count > 1 ? ` ×${count}` : ''}
+                    <Badge key={fmt} variant="secondary" className="font-mono text-[10px]">
+                      {fmt}
+                      {count > 1 ? ` ×${count}` : ''}
                     </Badge>
                   ))}
                 </div>
-              )}
-            </div>
-            <div className="relative min-h-0 flex-1 min-h-[260px]">
-              {error ? (
-                <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 p-4 text-center">
-                  <AlertCircle className="h-8 w-8 text-destructive" aria-hidden />
-                  <p className="text-sm text-destructive">{t('parseError')}</p>
-                  <p className="max-w-sm font-mono text-xs text-muted-foreground">{error}</p>
+              ) : undefined
+            }
+          >
+            {error ? (
+              <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 p-4 text-center">
+                <AlertCircle className="h-8 w-8 text-destructive" aria-hidden />
+                <p className="text-sm text-destructive">{t('parseError')}</p>
+                <p className="max-w-sm font-mono text-xs text-muted-foreground">{error}</p>
+              </div>
+            ) : (
+              <ScrollArea className="absolute inset-0 h-full">
+                <div className="json-schema-hl min-h-full" role="region" aria-label={t('outputLabel')}>
+                  {output ? (
+                    <pre className="m-0 font-mono">
+                      <code
+                        className="hljs"
+                        // highlight.js escapes the JSON it is handed.
+                        // threatcrush-disable-next-line js-unescaped-html-sink
+                        dangerouslySetInnerHTML={{ __html: highlightedOutput }}
+                      />
+                    </pre>
+                  ) : (
+                    <p className="p-4 text-sm text-muted-foreground">{t('outputPlaceholder')}</p>
+                  )}
                 </div>
-              ) : (
-                <ScrollArea className="absolute inset-0 h-full">
-                  <div
-                    className="json-schema-hl min-h-full"
-                    role="region"
-                    aria-label={t('outputLabel')}
-                  >
-                    {output ? (
-                      <pre className="m-0 font-mono">
-                        <code
-                          className="hljs"
-                          // highlight.js escapes the JSON it is handed.
-                          // threatcrush-disable-next-line js-unescaped-html-sink
-                          dangerouslySetInnerHTML={{ __html: highlightedOutput }}
-                        />
-                      </pre>
-                    ) : (
-                      <p className="p-4 text-sm text-muted-foreground">
-                        {t('outputPlaceholder')}
-                      </p>
-                    )}
-                  </div>
-                </ScrollArea>
-              )}
-            </div>
-          </Card>
+              </ScrollArea>
+            )}
+          </IOPanel>
         )}
       </div>
-    </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/json-to-code/json-to-code-layout.tsx b/apps/desktop-ui/src/components/json-to-code/json-to-code-layout.tsx
index 1ae40393..f71bc97b 100644
--- a/apps/desktop-ui/src/components/json-to-code/json-to-code-layout.tsx
+++ b/apps/desktop-ui/src/components/json-to-code/json-to-code-layout.tsx
@@ -4,8 +4,6 @@ import React, { useMemo, useState } from 'react'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { useTranslations } from 'next-intl'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
-import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
 import {
   Select,
@@ -14,11 +12,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { Check, Copy, FileText, Trash2 } from 'lucide-react'
+import { Check, Copy, Trash2 } from 'lucide-react'
 import { IconCode } 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 { JSON_TO_CODE_TARGETS, jsonToCode, type JsonToCodeTarget } from '@/lib/json-to-code'
 
 const SAMPLE = `{
@@ -42,91 +39,91 @@ export function JsonToCodeLayout() {
     [input, target, rootName],
   )
 
-  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={IconCode}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Formatters}
-        />
-      </RevealItem>
+  const toolbar = (
+    <div className="flex flex-wrap items-end gap-4 rounded-lg border border-border bg-card px-4 py-3">
+      <Select value={target} onValueChange={(v) => setTarget(v as JsonToCodeTarget)}>
+        <SelectTrigger className="h-8 w-[190px] text-xs">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {JSON_TO_CODE_TARGETS.map((tg) => (
+            <SelectItem key={tg.value} value={tg.value}>
+              {tg.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <Input
+        value={rootName}
+        onChange={(e) => setRootName(e.target.value)}
+        className="h-8 w-[120px] text-xs"
+        placeholder={t('rootName')}
+        aria-label={t('rootName')}
+      />
+    </div>
+  )
 
-      <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-2">
-        <Card className="flex flex-col overflow-hidden min-h-0">
-          <div className="flex items-center justify-between border-b border-border/50 bg-muted/30 px-4 py-2.5">
-            <div className="flex items-center gap-2">
-              <FileText className="h-3.5 w-3.5 text-muted-foreground" />
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('panels.input')}</Label>
-            </div>
-            <div className="flex items-center gap-1">
+  return (
+    <ToolShell
+      icon={IconCode}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
+      <ToolPanels className="lg:grid-cols-2">
+        <IOPanel
+          label={t('panels.input')}
+          actions={
+            <>
               <Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={() => setInput(SAMPLE)}>
                 {t('sample')}
               </Button>
-              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setInput('')} disabled={!input} title={t('clear')}>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-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 flex-wrap items-center justify-between gap-2 border-b border-border/50 bg-muted/30 px-4 py-2">
-            <div className="flex items-center gap-2">
-              <Select value={target} onValueChange={(v) => setTarget(v as JsonToCodeTarget)}>
-                <SelectTrigger className="h-8 w-[190px] text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {JSON_TO_CODE_TARGETS.map((tg) => (
-                    <SelectItem key={tg.value} value={tg.value}>
-                      {tg.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <Input
-                value={rootName}
-                onChange={(e) => setRootName(e.target.value)}
-                className="h-8 w-[120px] text-xs"
-                placeholder={t('rootName')}
-                aria-label={t('rootName')}
-              />
-            </div>
+        <IOPanel
+          label={t('panels.output')}
+          bodyClassName="overflow-auto"
+          actions={
             <Button
               size="sm"
               variant="secondary"
+              className="h-7"
               disabled={!result.code}
               onClick={() => void copyToClipboard(result.code, { silent: true })}
             >
               {copied ? <Check className="mr-1.5 h-4 w-4 text-emerald-600" /> : <Copy className="mr-1.5 h-4 w-4" />}
               {copied ? t('copied') : t('copy')}
             </Button>
-          </div>
-          <div className="min-h-0 flex-1 overflow-auto">
-            {result.error ? (
-              <div className="p-4 text-sm text-destructive">{result.error}</div>
-            ) : result.code ? (
-              <pre className="p-4 font-mono text-sm leading-relaxed whitespace-pre">{result.code}</pre>
-            ) : (
-              <div className="p-4 text-sm text-muted-foreground">{t('outputPlaceholder')}</div>
-            )}
-          </div>
-        </Card>
-      </div>
-    </div>
+          }
+        >
+          {result.error ? (
+            <div className="p-3 text-sm text-destructive">{result.error}</div>
+          ) : result.code ? (
+            <pre className="whitespace-pre-wrap break-words p-3 font-mono text-sm leading-relaxed">{result.code}</pre>
+          ) : (
+            <div className="p-3 text-sm text-muted-foreground">{t('outputPlaceholder')}</div>
+          )}
+        </IOPanel>
+      </ToolPanels>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/json-visualizer/json-visualizer-layout.tsx b/apps/desktop-ui/src/components/json-visualizer/json-visualizer-layout.tsx
index ac67eb49..c100aba4 100644
--- a/apps/desktop-ui/src/components/json-visualizer/json-visualizer-layout.tsx
+++ b/apps/desktop-ui/src/components/json-visualizer/json-visualizer-layout.tsx
@@ -7,7 +7,6 @@ import { useMediaQuery } from '@/hooks/use-media-query'
 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
 import {
@@ -25,7 +24,6 @@ import {
   Copy,
   Crosshair,
   Download,
-  FileText,
   Maximize,
   Route,
   Search,
@@ -35,9 +33,8 @@ import {
   ZoomOut,
 } from 'lucide-react'
 import { IconChartDots3 } 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 { GraphCanvas, type GraphCanvasHandle } from '@/components/json-visualizer/graph-canvas'
 import { NodeTableDialog } from '@/components/json-visualizer/node-table-dialog'
 import {
@@ -202,15 +199,12 @@ export function JsonVisualizerLayout() {
   }, [selectedNode, parsedText])
 
   const editorPane = (
-    <Card className="flex h-full flex-col overflow-hidden min-h-0">
-      <div className="flex items-center justify-between border-b border-border/50 bg-muted/30 px-4 py-2.5">
-        <div className="flex items-center gap-2">
-          <FileText className="h-3.5 w-3.5 text-muted-foreground" />
-          <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-            {t('panels.input')}
-          </Label>
-        </div>
-        <div className="flex items-center gap-1">
+    <IOPanel
+      label={t('panels.input')}
+      className="h-full"
+      bodyClassName="flex flex-col"
+      actions={
+        <>
           <Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={() => setInput(SAMPLE)}>
             {t('sample')}
           </Button>
@@ -224,30 +218,29 @@ export function JsonVisualizerLayout() {
           >
             <Trash2 className="h-3.5 w-3.5" />
           </Button>
-        </div>
-      </div>
+        </>
+      }
+    >
       {error && (
-        <div className="border-b border-destructive/20 bg-destructive/10 px-4 py-2 text-xs text-destructive">
+        <div className="shrink-0 border-b border-destructive/20 bg-destructive/10 px-4 py-2 text-xs text-destructive">
           {error}
         </div>
       )}
       <div className="relative min-h-0 flex-1">
-        <textarea
+        <ToolTextArea
           ref={textareaRef}
           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>
+    </IOPanel>
   )
 
   const graphPane = (
-    <Card className="relative flex h-full flex-col overflow-hidden min-h-0">
-      <div className="flex flex-wrap items-center gap-1.5 border-b border-border/50 bg-muted/30 px-3 py-2">
+    <div className="relative flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-border bg-card">
+      <div className="flex flex-wrap items-center gap-1.5 border-b border-border bg-[hsl(var(--surface-2))] px-3 py-2">
         <div className="relative">
           <Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
           <Input
@@ -321,7 +314,7 @@ export function JsonVisualizerLayout() {
         </div>
       )}
 
-      <div className="relative min-h-0 flex-1 dashboard-grid-bg">
+      <div className="dashboard-grid-bg relative min-h-0 flex-1">
         {graph ? (
           <GraphCanvas
             ref={canvasRef}
@@ -390,22 +383,11 @@ export function JsonVisualizerLayout() {
           </div>
         )}
       </div>
-    </Card>
+    </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={IconChartDots3}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Formatters}
-        />
-      </RevealItem>
-
+    <ToolShell icon={IconChartDots3} title={t('title')} description={t('subtitle')}>
       <div className="min-h-0 flex-1">
         {isDesktop ? (
           <ResizablePanelGroup direction="horizontal" className="h-full min-h-0 gap-0">
@@ -442,6 +424,6 @@ export function JsonVisualizerLayout() {
           title={t('tableTitle')}
         />
       )}
-    </div>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/jsonpath-playground/jsonpath-playground-layout.tsx b/apps/desktop-ui/src/components/jsonpath-playground/jsonpath-playground-layout.tsx
index c371e3f1..13bf407e 100644
--- a/apps/desktop-ui/src/components/jsonpath-playground/jsonpath-playground-layout.tsx
+++ b/apps/desktop-ui/src/components/jsonpath-playground/jsonpath-playground-layout.tsx
@@ -7,7 +7,6 @@ import { useTranslations } from 'next-intl'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 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 {
@@ -17,22 +16,18 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import {
   BookOpen,
-  Braces,
   Check,
   ChevronDown,
   Copy,
-  FileText,
   Sparkles,
   Trash2,
   WandSparkles,
 } from 'lucide-react'
 import { IconZoomCode } 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 {
   CHEATSHEET,
   QUERY_ENGINES,
@@ -82,81 +77,74 @@ export function JsonpathPlaygroundLayout() {
     }
   }
 
-  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={IconZoomCode}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Formatters}
-        />
-      </RevealItem>
+  const toolbar = (
+    <div className="flex flex-col gap-3 rounded-lg border border-border bg-card px-4 py-3">
+      <div className="flex flex-wrap items-end gap-4">
+        <div className="space-y-1.5">
+          <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('engineLabel')}</Label>
+          <Select value={engine} onValueChange={(v) => setEngine(v as QueryEngine)}>
+            <SelectTrigger className="w-[160px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {QUERY_ENGINES.map((e) => (
+                <SelectItem key={e} value={e}>
+                  {t(ENGINE_LABEL_KEY[e])}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
 
-      <Card className="flex flex-col gap-3 p-4">
-        <div className="flex flex-wrap items-end gap-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('engineLabel')}</Label>
-            <Select value={engine} onValueChange={(v) => setEngine(v as QueryEngine)}>
-              <SelectTrigger className="w-[160px]">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {QUERY_ENGINES.map((e) => (
-                  <SelectItem key={e} value={e}>
-                    {t(ENGINE_LABEL_KEY[e])}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
+        <div className="min-w-[240px] flex-1 space-y-1.5">
+          <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('queryLabel')}</Label>
+          <Input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={engine === 'jsonpath' ? '$.store.books[*].title' : 'store.books[*].title'}
+            className="font-mono text-sm"
+            spellCheck={false}
+            autoComplete="off"
+          />
+        </div>
 
-          <div className="min-w-[240px] flex-1 space-y-1.5">
-            <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('queryLabel')}</Label>
-            <Input
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              placeholder={engine === 'jsonpath' ? '$.store.books[*].title' : 'store.books[*].title'}
-              className="font-mono text-sm"
-              spellCheck={false}
-              autoComplete="off"
-            />
-          </div>
+        <Button type="button" variant="outline" size="sm" onClick={() => setCheatsOpen((o) => !o)}>
+          <BookOpen className="mr-1.5 h-4 w-4" />
+          {t('cheatsheet')}
+          <ChevronDown className={`ml-1.5 h-4 w-4 transition-transform ${cheatsOpen ? 'rotate-180' : ''}`} />
+        </Button>
+      </div>
 
-          <Button type="button" variant="outline" size="sm" onClick={() => setCheatsOpen((o) => !o)}>
-            <BookOpen className="mr-1.5 h-4 w-4" />
-            {t('cheatsheet')}
-            <ChevronDown className={`ml-1.5 h-4 w-4 transition-transform ${cheatsOpen ? 'rotate-180' : ''}`} />
-          </Button>
+      {cheatsOpen && (
+        <div className="grid grid-cols-1 gap-1.5 border-t border-border/50 pt-3 sm:grid-cols-2">
+          {CHEATSHEET[engine].map((entry) => (
+            <button
+              key={entry.expression}
+              type="button"
+              onClick={() => setQuery(entry.expression)}
+              className="flex items-baseline justify-between gap-3 rounded-md px-2.5 py-1.5 text-left transition-colors hover:bg-muted"
+            >
+              <code className="shrink-0 font-mono text-xs text-primary">{entry.expression}</code>
+              <span className="truncate text-xs text-muted-foreground">{t(`cheats.${entry.key}`)}</span>
+            </button>
+          ))}
         </div>
+      )}
+    </div>
+  )
 
-        {cheatsOpen && (
-          <div className="grid grid-cols-1 gap-1.5 border-t border-border/50 pt-3 sm:grid-cols-2">
-            {CHEATSHEET[engine].map((entry) => (
-              <button
-                key={entry.expression}
-                type="button"
-                onClick={() => setQuery(entry.expression)}
-                className="flex items-baseline justify-between gap-3 rounded-md px-2.5 py-1.5 text-left transition-colors hover:bg-muted"
-              >
-                <code className="shrink-0 font-mono text-xs text-primary">{entry.expression}</code>
-                <span className="truncate text-xs text-muted-foreground">{t(`cheats.${entry.key}`)}</span>
-              </button>
-            ))}
-          </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-1.5">
+  return (
+    <ToolShell
+      icon={IconZoomCode}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
+      <ToolPanels className="lg:grid-cols-2">
+        <IOPanel
+          label={t('panels.input')}
+          actions={
+            <>
               <Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={loadSample}>
                 <Sparkles className="mr-1 h-3.5 w-3.5" />
                 {t('sample')}
@@ -168,31 +156,30 @@ export function JsonpathPlaygroundLayout() {
               <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setJsonText('')} disabled={!jsonText} title={t('clear')}>
                 <Trash2 className="h-3.5 w-3.5" />
               </Button>
-            </div>
-          </div>
-          <div className="relative min-h-0 flex-1">
-            <textarea
-              value={jsonText}
-              onChange={(e) => setJsonText(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">
-              <Braces className="h-3.5 w-3.5 text-muted-foreground" />
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('panels.results')}</Label>
+            </>
+          }
+        >
+          <ToolTextArea
+            value={jsonText}
+            onChange={(e) => setJsonText(e.target.value)}
+            placeholder={t('placeholder')}
+            autoComplete="off"
+          />
+        </IOPanel>
+
+        <IOPanel
+          label={
+            <>
+              {t('panels.results')}
               {!result.error && result.output && (
                 <Badge variant="secondary" className="text-[10px]">
                   {t('matchCount', { count: result.count })}
                 </Badge>
               )}
-            </div>
+            </>
+          }
+          bodyClassName="overflow-auto"
+          actions={
             <Button
               size="sm"
               variant="secondary"
@@ -202,21 +189,20 @@ export function JsonpathPlaygroundLayout() {
               {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>
+          }
+        >
           {result.error && (
             <div className="border-b border-destructive/20 bg-destructive/10 px-4 py-2 text-xs text-destructive">
               {result.error}
             </div>
           )}
-          <ScrollArea className="min-h-0 flex-1">
-            {result.output ? (
-              <pre className="p-4 font-mono text-sm whitespace-pre-wrap break-words">{result.output}</pre>
-            ) : (
-              <div className="p-4 text-sm text-muted-foreground/60">{t('outputPlaceholder')}</div>
-            )}
-          </ScrollArea>
-        </Card>
-      </div>
-    </div>
+          {result.output ? (
+            <pre className="p-4 font-mono text-sm whitespace-pre-wrap break-words">{result.output}</pre>
+          ) : (
+            <div className="p-4 text-sm text-muted-foreground/60">{t('outputPlaceholder')}</div>
+          )}
+        </IOPanel>
+      </ToolPanels>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/markdown-preview-html/markdown-preview-html-layout.tsx b/apps/desktop-ui/src/components/markdown-preview-html/markdown-preview-html-layout.tsx
index f268f3c6..a3dd48f9 100644
--- a/apps/desktop-ui/src/components/markdown-preview-html/markdown-preview-html-layout.tsx
+++ b/apps/desktop-ui/src/components/markdown-preview-html/markdown-preview-html-layout.tsx
@@ -7,16 +7,13 @@ import { marked } from 'marked';
 import TurndownService from 'turndown';
 import { toast } from 'sonner';
 import { safeFileName } from '@/lib/markdown-preview-html';
-import { Card } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Copy, Check, Download, Eye, Code } from 'lucide-react';
 import { IconMarkdown } from '@tabler/icons-react';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
+import { ToolShell } from '@/components/tools/tool-shell';
+import { IOPanel, ToolTextArea } from '@/components/tools/io-panel';
 
 // Configure marked for safe, synchronous rendering
 marked.setOptions({ async: false });
@@ -73,6 +70,12 @@ ${bodyHtml}
 </html>`;
 }
 
+const footerNote = (text: string) => (
+  <p className="shrink-0 border-t border-border/50 px-3 py-1.5 text-[11px] text-muted-foreground">
+    {text}
+  </p>
+);
+
 export function MarkdownPreviewLayout() {
   const t = useTranslations('MarkdownPreview');
 
@@ -87,7 +90,7 @@ export function MarkdownPreviewLayout() {
   const { isCopied: copiedMd, copyToClipboard: copyMd } = useCopyToClipboard();
 
   const renderedHtml = useMemo(() => renderMarkdown(markdown), [markdown]);
-  const convertedMarkdown = useMemo(() => htmlInput ? htmlToMarkdown(htmlInput) : '', [htmlInput]);
+  const convertedMarkdown = useMemo(() => (htmlInput ? htmlToMarkdown(htmlInput) : ''), [htmlInput]);
 
   const handleCopyHtml = useCallback(() => {
     if (!renderedHtml) return;
@@ -113,74 +116,73 @@ export function MarkdownPreviewLayout() {
   }, [convertedMarkdown, copyMd]);
 
   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={IconMarkdown} title={t('title')} description={t('subtitle')} />
-      </RevealItem>
-
+    <ToolShell icon={IconMarkdown} title={t('title')} description={t('subtitle')}>
       <Tabs defaultValue="md-to-html" className="flex h-full min-h-0 flex-col gap-4">
-        <TabsList className="shrink-0 w-fit">
+        <TabsList className="w-fit shrink-0">
           <TabsTrigger value="md-to-html">{t('tabMarkdownToHtml')}</TabsTrigger>
           <TabsTrigger value="html-to-md">{t('tabHtmlToMd')}</TabsTrigger>
         </TabsList>
 
         {/* ── Markdown → HTML ── */}
-        <TabsContent value="md-to-html" className="flex-1 min-h-0 m-0 data-[state=inactive]:hidden">
+        <TabsContent value="md-to-html" className="m-0 min-h-0 flex-1 data-[state=inactive]:hidden">
           <div className="grid h-full min-h-0 grid-cols-1 gap-4 lg:grid-cols-2">
-
             {/* Input */}
-            <Card className="flex flex-col gap-3 overflow-auto p-4">
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground shrink-0">
-                {t('inputLabel')}
-              </Label>
-              <Textarea
+            <IOPanel
+              label={t('inputLabel')}
+              actions={
+                <span className="text-[10px] tabular-nums text-muted-foreground">
+                  {t('charCount', { count: markdown.length })}
+                </span>
+              }
+            >
+              <ToolTextArea
                 value={markdown}
                 onChange={(e) => setMarkdown(e.target.value)}
                 placeholder={t('inputPlaceholder')}
-                className="flex-1 min-h-[300px] resize-none font-mono text-sm"
-                spellCheck={false}
               />
-              <p className="text-xs text-muted-foreground shrink-0">
-                {t('charCount', { count: markdown.length })}
-              </p>
-            </Card>
+            </IOPanel>
 
             {/* Output */}
-            <Card className="flex flex-col gap-3 overflow-hidden p-4">
-              <div className="flex shrink-0 flex-wrap items-center justify-between gap-2">
+            <IOPanel
+              bodyClassName="flex flex-col"
+              label={
                 <Tabs value={outputTab} onValueChange={(v) => setOutputTab(v as 'preview' | 'html')}>
                   <TabsList className="h-7">
                     <TabsTrigger value="preview" className="h-6 gap-1 px-2 text-xs">
-                      <Eye className="h-3 w-3" />{t('previewLabel')}
+                      <Eye className="h-3 w-3" />
+                      {t('previewLabel')}
                     </TabsTrigger>
                     <TabsTrigger value="html" className="h-6 gap-1 px-2 text-xs">
-                      <Code className="h-3 w-3" />{t('htmlOutputLabel')}
+                      <Code className="h-3 w-3" />
+                      {t('htmlOutputLabel')}
                     </TabsTrigger>
                   </TabsList>
                 </Tabs>
-                <div className="flex items-center gap-2">
+              }
+              actions={
+                <>
                   <div className="flex items-center rounded-md border bg-background pr-2 focus-within:ring-1 focus-within:ring-ring">
                     <Input
                       value={fileName}
                       onChange={(e) => setFileName(e.target.value)}
                       aria-label={t('fileNameLabel')}
                       placeholder={t('fileNamePlaceholder')}
-                      className="h-8 w-28 border-0 bg-transparent px-2 text-xs shadow-none focus-visible:ring-0"
+                      className="h-8 w-24 border-0 bg-transparent px-2 text-xs shadow-none focus-visible:ring-0"
                     />
                     <span className="text-xs text-muted-foreground">.html</span>
                   </div>
-                  <Button size="sm" variant="secondary" disabled={!renderedHtml} onClick={handleCopyHtml}>
+                  <Button size="sm" className="h-8" variant="secondary" disabled={!renderedHtml} onClick={handleCopyHtml}>
                     {copiedHtml ? <Check className="mr-1.5 h-4 w-4 text-emerald-600" /> : <Copy className="mr-1.5 h-4 w-4" />}
                     {copiedHtml ? t('copied') : t('copyHtml')}
                   </Button>
-                  <Button size="sm" variant="secondary" disabled={!renderedHtml} onClick={handleExportHtml}>
-                    <Download className="mr-1.5 h-4 w-4" />{t('exportHtml')}
+                  <Button size="sm" className="h-8" variant="secondary" disabled={!renderedHtml} onClick={handleExportHtml}>
+                    <Download className="mr-1.5 h-4 w-4" />
+                    {t('exportHtml')}
                   </Button>
-                </div>
-              </div>
-
-              <div className="flex-1 min-h-0 overflow-hidden rounded-md border">
+                </>
+              }
+            >
+              <div className="min-h-0 flex-1 overflow-hidden">
                 {outputTab === 'preview' ? (
                   renderedHtml ? (
                     <iframe
@@ -192,70 +194,63 @@ export function MarkdownPreviewLayout() {
                   ) : (
                     <p className="p-4 text-sm text-muted-foreground">{t('emptyHint')}</p>
                   )
+                ) : renderedHtml ? (
+                  <pre className="h-full overflow-auto whitespace-pre-wrap break-all bg-muted/20 p-4 font-mono text-xs">
+                    {renderedHtml}
+                  </pre>
                 ) : (
-                  renderedHtml ? (
-                    <pre className="p-4 text-xs font-mono whitespace-pre-wrap break-all h-full overflow-auto bg-muted/30">
-                      {renderedHtml}
-                    </pre>
-                  ) : (
-                    <p className="p-4 text-sm text-muted-foreground">{t('emptyHint')}</p>
-                  )
+                  <p className="p-4 text-sm text-muted-foreground">{t('emptyHint')}</p>
                 )}
               </div>
-
-              <p className="text-xs text-muted-foreground shrink-0">{t('securityNote')}</p>
-            </Card>
+              {footerNote(t('securityNote'))}
+            </IOPanel>
           </div>
         </TabsContent>
 
         {/* ── HTML → Markdown ── */}
-        <TabsContent value="html-to-md" className="flex-1 min-h-0 m-0 data-[state=inactive]:hidden">
+        <TabsContent value="html-to-md" className="m-0 min-h-0 flex-1 data-[state=inactive]:hidden">
           <div className="grid h-full min-h-0 grid-cols-1 gap-4 lg:grid-cols-2">
-
             {/* HTML Input */}
-            <Card className="flex flex-col gap-3 overflow-auto p-4">
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground shrink-0">
-                {t('htmlInputLabel')}
-              </Label>
-              <Textarea
+            <IOPanel
+              label={t('htmlInputLabel')}
+              actions={
+                <span className="text-[10px] tabular-nums text-muted-foreground">
+                  {t('charCount', { count: htmlInput.length })}
+                </span>
+              }
+            >
+              <ToolTextArea
                 value={htmlInput}
                 onChange={(e) => setHtmlInput(e.target.value)}
                 placeholder={t('htmlInputPlaceholder')}
-                className="flex-1 min-h-[300px] resize-none font-mono text-sm"
-                spellCheck={false}
               />
-              <p className="text-xs text-muted-foreground shrink-0">
-                {t('charCount', { count: htmlInput.length })}
-              </p>
-            </Card>
+            </IOPanel>
 
             {/* Markdown Output */}
-            <Card className="flex flex-col gap-3 overflow-hidden p-4">
-              <div className="flex shrink-0 flex-wrap items-center justify-between gap-2">
-                <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                  {t('mdOutputLabel')}
-                </Label>
-                <Button size="sm" variant="secondary" disabled={!convertedMarkdown} onClick={handleCopyMd}>
+            <IOPanel
+              bodyClassName="flex flex-col"
+              label={t('mdOutputLabel')}
+              actions={
+                <Button size="sm" className="h-8" variant="secondary" disabled={!convertedMarkdown} onClick={handleCopyMd}>
                   {copiedMd ? <Check className="mr-1.5 h-4 w-4 text-emerald-600" /> : <Copy className="mr-1.5 h-4 w-4" />}
                   {copiedMd ? t('copied') : t('copyMarkdown')}
                 </Button>
-              </div>
-
-              <div className="flex-1 min-h-0 overflow-auto rounded-md border">
+              }
+            >
+              <div className="min-h-0 flex-1 overflow-auto">
                 {convertedMarkdown ? (
-                  <pre className="p-4 text-sm font-mono whitespace-pre-wrap break-words h-full overflow-auto bg-muted/30">
+                  <pre className="h-full overflow-auto whitespace-pre-wrap break-words bg-muted/20 p-4 font-mono text-sm">
                     {convertedMarkdown}
                   </pre>
                 ) : (
                   <p className="p-4 text-sm text-muted-foreground">{t('emptyHintHtmlToMd')}</p>
                 )}
               </div>
-
-              <p className="text-xs text-muted-foreground shrink-0">{t('securityNote')}</p>
-            </Card>
+              {footerNote(t('securityNote'))}
+            </IOPanel>
           </div>
         </TabsContent>
       </Tabs>
-    </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/regex-tester/regex-tester-layout.tsx b/apps/desktop-ui/src/components/regex-tester/regex-tester-layout.tsx
index 6beb2f2ec3391da564a82bb4e0ce71710b009187..090321606fa280024b2b9bfda0178ed5fd3c97a6 100644
GIT binary patch
delta 1317
zcmZux-)kII6mB+YCDX3Ev)P@U{gvEoCi_EjvzwUMm~3K0!P43`g%qTu8fJGVn;~~+
zhM8GST!Mn)TZ{F>g4G9~Y!xh(6-4nN3O*|R3&i?vMGy*A#5=p2T@eRn&dj;z+;h(T
zzHi=Nf9w1^*FOJR_6@CXYYgK9(Q(%_nN#qd)ZspsT@v)VW!f%jlCx`<R0Cu{_IILm
zlUk~wwJr<}4fwwMsP*E|x4wXz%Q|Y^V%lYG*Ujczg(n^jjF56eXVvGKT3dH*-Kgc7
z1RoDiw>})c>kAxFnp?e<{Ufc)iKH)7F%8EhUY)XPlVy?<a3d04b+&o>4lNSLQY#wW
zqfZmtY#3FoN?DDRO}nbuT|*DQYP6!-RbtV(^ooE7qJ+nRFoMBZ{5UFOH7E^w{zfnZ
zB_BF=*036`fUkmC{1S}gPbG|yIDwO55xSVdm7~W2F(DRK1k%1rg{uC_iXh;7k>GJE
zg1^KJo*EG`A7X9$Mabp$&G!4jNXPeFn4y;P<C}1NqGXW@Qyu4`TGy7-Tc+XCx@nli
z<>yB?W@fD2mwHV~kr$4Y3YJ%HCz9jk61W#}k&)zN-KE9pd9qFC$gBK5Jg79`o#Lt#
zM=?5zn^FL`B?Ui7m+)*XfL&=67o%xx$WI3N1~a5z9&bbw_%up{JXs`0gRy-9o2f`F
zzb|wrZ`zvEVD7ZJLoykX!|$mjoRLF(vqgLo6LClOC)9F-sWvqlb*D4XmT7CXHe|Rj
zPrn;G+3w?9Yy#P_4Bm@{cxqher{PpEinnDEk75;EjZ1i#ka0aeio0=w`|%_m#uZ#o
z%9!H*gX9$KL>M282XQO0fVET%za^so6JO-9r@C<hMpFeID}gB@UP~SKprL$D58p1l
zgyfgJxoypD*al}~d+jo(r>7i-D}mM1U9v7WyD$4ainN8JvF^DM!ql?Hcw8>)YL4p(
z<-F&~=CO7(QmpF+-R2bEV%jd9N%ykKW_9m$pDCTNjhQ*ToF-fl^~J7dcDBel)6Y{Y
zuFlo8-0bbd$7-#O4f^~w)#9MHnYQa-bNo)|uxCO#^Am!f1999=FZk0$wRM$l>(#1e
z;PrG4rHRD?)6^<gG=1j3`1Tv{&dPE3n6}((;>(G}A+pcObYolwQO@DBun0Zn7fN0m
zs;#L4ZYc^5lq7yq5?p`_n4cWOwaH;@PEK(<Kj@`zidink6Zo62l`@&(ULR017ihou
ozl7R_p)+Es&_l2FYvzxEK&4?jrcEtVH(dS`!Gqig2J<)n0VUL$GXMYp

delta 1868
zcmZ`)L2MgE6jj_brEX(8wY~PPon*XeVh1|$I&CQpPEjaCKm#gmB_f5Qj=f`h+u2=f
zcbz6Ap&%il94gv=0YXBe6d{C!K*&cpzyXN^65@h{R0$yp7piipgg8)`Svz(D?Mn9S
z{+<8-`~Sar`|8}=Cof&xMjZVzk$cO0{p{t@K=3%J(kCd<sdJe~@MU0Erp_(6=9{t)
z2Mx1sJ04m=C+H$2>`9NBe50%rw^p)wkbLJ3J7Pz(Z(DCq-}4PkBU*EJ?^l6D5b?{)
zWnE&{89hapyzDr)HLv&m*>k~viBPFwFnyMh>PgQrtZHthZAYle>=I%7I?qPcvK@Mq
zxU_3C8_YA9VQn($wl~8zxiu`KZ0ns3YvV2N=HSi`0<u7>X?s^H9RO=BQ}g>>>A+5h
zdJV@yxgflfh&}C4Mm%GYq6(u+{vR&e4ApR@!5FHNIzE6*!@@PJA$yTJ6=t8uHAB~_
zg}S|}I);u*Rd_ZeKPRl1m?eW+9>Oo;f~F$k7-YjMf23V~u{#4~SUO#rUeVSzULsUH
zW!tPfPk28yGu!pecb$&}Hv%5z6GUZ3T=yAb(rHzIck84~@iN|z+!`OoIjpHrh$wJ2
z6oUsw2jF681b#`x;nR@3T@~5k=g=5z4@W`bzifCI9t)@8t&9X-cm&=EPr}#SHm~%<
zAK_F2p$;UDIIkOvJ{m|x5FC^ea6B>we+@+8wFvXq-T}{F*9RQFUTEF#VNgwluSC-+
z9;3dw0FToPFBA&(rPFXplESEBTOKxT%WgrPj~?TQi}`vh>qpTX&pHS<qaM5vQzmM>
z{_~;-?aGnqVQu1|x*4>fbCLV=!mq^+!;i5s_&au@S44$(V;ENBDlGGu-^4?k(u+t1
z_#uwqc04A~--ponnivGg(hvtR3-81uurBR`&lAyH3pUk_hKc-|DxCFI$8K0U@<^${
zh=Z+$>B22(0+htzo$aD{xcLO;;r7CZ35kbF!;M5t+T!DPLR0|}KE_yb9?m9{@SCi_
z9T`DdQK6^|!S(cRxRX?1RZ&2blkl-J0iGO#n@SAsC_%U;Pr$)c5^l)pd-zRqpGVvK
z5BqzMrJ_6hvUzTjiVwH%{f_1Z7q>DK9*Ia<ak#`$!-abut9px~!!RceK3-qq%&jlu
zNmQ~OE^D~dx$&P-sfrhBF3T+vCx@}ya4LfDljGy3J7ZTNGn(Q=-?3NpUi}}zmfSY4
z`~eA~iPJFFX{;y+p%pHA9(6q-d2^&hS(Xo+SN=~(76a-NTCrbkev#f52>UbUVTG-r
z2H~nQ2)_@l!@1Nhf3*HNfeA^ze~bQfnzB$hpmEM4*PLpJ&%)#+ur%sX;n(3DTpfNW
zi+uJ_E<2c2RSu+kZBm;cyd)=ki##8^H>5y6nwt49{}}%^aFNCjZViHv>n$@nz0wu$
zb_Q5PQ++MLh2v@h)&}>$x9BP0bO0mO4_YP(vzauU$qd12W{_*g6nvM-z^%+77*P+w
zyc+Ik$m=Q^YFBudl0^^T6EzDzsdGtmSD^VLa3&=U6x)0g5PcbH&X3&gQ8(t`pFjSk
WF$qKEhU3}}uG@y?Q3tHiH~$3zO*aYv

diff --git a/apps/desktop-ui/src/components/sql-formatter/sql-formatter-layout.tsx b/apps/desktop-ui/src/components/sql-formatter/sql-formatter-layout.tsx
index 3913fa40..55ea86d7 100644
--- a/apps/desktop-ui/src/components/sql-formatter/sql-formatter-layout.tsx
+++ b/apps/desktop-ui/src/components/sql-formatter/sql-formatter-layout.tsx
@@ -4,14 +4,13 @@ import type { KeywordCase, SqlLanguage } from 'sql-formatter';
 import { useCallback, 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 { useIsMobile } from '@/components/hooks/use-mobile';
 import { IconSql } from '@tabler/icons-react';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
+import { ToolShell } from '@/components/tools/tool-shell';
+import { IOPanel } from '@/components/tools/io-panel';
 import { ToolMobileTabs } from '@/components/tools/tool-mobile-tabs';
 import { CopyIconButton } from '@/components/tools/copy-icon-button';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
 import {
   Select,
   SelectContent,
@@ -21,6 +20,7 @@ import {
 } from '@/components/ui/select';
 import { AlertCircle, Trash2, Wand2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import { cn } from '@/lib/utils';
 import CodeEditor from '@/components/ui/code-editor';
 
 const DIALECTS: { value: SqlLanguage; key: 'mysql' | 'postgresql' | 'sqlite' }[] = [
@@ -88,91 +88,88 @@ export function SqlFormatterLayout() {
     void copyToClipboard(output, { silent: true });
   };
 
-  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={IconSql} title={t('title')} description={t('subtitle')} />
-      </RevealItem>
-
-      <Card className="p-4 shrink-0">
-        <div className="flex flex-wrap items-end gap-3">
-          <div className="space-y-2 w-full sm:w-auto sm:min-w-[140px]">
-            <Label className="text-xs text-muted-foreground uppercase tracking-wider">{t('dialectLabel')}</Label>
-            <Select value={dialect} onValueChange={(v) => setDialect(v as SqlLanguage)}>
-              <SelectTrigger className="h-9 text-sm w-full sm:w-[180px]">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {DIALECTS.map((d) => (
-                  <SelectItem key={d.value} value={d.value}>
-                    {t(`dialects.${d.key}` as never)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-2 w-full sm:w-auto sm:min-w-[120px]">
-            <Label className="text-xs text-muted-foreground uppercase tracking-wider">{t('keywordsLabel')}</Label>
-            <Select value={keywordCase} onValueChange={(v) => setKeywordCase(v as KeywordCase)}>
-              <SelectTrigger className="h-9 text-sm w-full sm:w-[140px]">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {KEYWORD_CASES.map((k) => (
-                  <SelectItem key={k.value} value={k.value}>
-                    {t(`keywordCase.${k.key}` as never)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-2 w-full sm:w-auto sm:min-w-[80px]">
-            <Label htmlFor="sql-tab" className="text-xs text-muted-foreground uppercase tracking-wider">
-              {t('indentLabel')}
-            </Label>
-            <Select value={tabWidth} onValueChange={setTabWidth}>
-              <SelectTrigger id="sql-tab" className="h-9 text-sm w-full sm:w-[80px]">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {['2', '4'].map((n) => (
-                  <SelectItem key={n} value={n}>
-                    {n}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex flex-wrap gap-2 pb-0.5">
-            <Button type="button" size="sm" className="gap-1.5 h-9" onClick={runFormat}>
-              <Wand2 className="h-3.5 w-3.5" />
-              {t('format')}
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="gap-1.5 h-9"
-              onClick={() => {
-                setInput('');
-                setOutput('');
-                setError('');
-              }}
-            >
-              <Trash2 className="h-3.5 w-3.5" />
-              {t('clear')}
-            </Button>
-          </div>
+  const toolbar = (
+    <div className="rounded-lg border border-border bg-card px-4 py-3">
+      <div className="flex flex-wrap items-end gap-3">
+        <div className="w-full space-y-2 sm:w-auto sm:min-w-[140px]">
+          <Label className="text-xs uppercase tracking-wider text-muted-foreground">{t('dialectLabel')}</Label>
+          <Select value={dialect} onValueChange={(v) => setDialect(v as SqlLanguage)}>
+            <SelectTrigger className="h-9 w-full text-sm sm:w-[180px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {DIALECTS.map((d) => (
+                <SelectItem key={d.value} value={d.value}>
+                  {t(`dialects.${d.key}` as never)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="w-full space-y-2 sm:w-auto sm:min-w-[120px]">
+          <Label className="text-xs uppercase tracking-wider text-muted-foreground">{t('keywordsLabel')}</Label>
+          <Select value={keywordCase} onValueChange={(v) => setKeywordCase(v as KeywordCase)}>
+            <SelectTrigger className="h-9 w-full text-sm sm:w-[140px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {KEYWORD_CASES.map((k) => (
+                <SelectItem key={k.value} value={k.value}>
+                  {t(`keywordCase.${k.key}` as never)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
-        <p className="text-[11px] text-muted-foreground mt-3">
-          {t('counter', { current: input.length.toLocaleString(), max: MAX_LEN.toLocaleString() })}
-        </p>
-      </Card>
+        <div className="w-full space-y-2 sm:w-auto sm:min-w-[80px]">
+          <Label htmlFor="sql-tab" className="text-xs uppercase tracking-wider text-muted-foreground">
+            {t('indentLabel')}
+          </Label>
+          <Select value={tabWidth} onValueChange={setTabWidth}>
+            <SelectTrigger id="sql-tab" className="h-9 w-full text-sm sm:w-[80px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {['2', '4'].map((n) => (
+                <SelectItem key={n} value={n}>
+                  {n}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex flex-wrap gap-2 pb-0.5">
+          <Button type="button" size="sm" className="h-9 gap-1.5" onClick={runFormat}>
+            <Wand2 className="h-3.5 w-3.5" />
+            {t('format')}
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="h-9 gap-1.5"
+            onClick={() => {
+              setInput('');
+              setOutput('');
+              setError('');
+            }}
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+            {t('clear')}
+          </Button>
+        </div>
+      </div>
+      <p className="mt-3 text-[11px] text-muted-foreground">
+        {t('counter', { current: input.length.toLocaleString(), max: MAX_LEN.toLocaleString() })}
+      </p>
+    </div>
+  );
 
+  return (
+    <ToolShell icon={IconSql} title={t('title')} description={t('subtitle')} toolbar={toolbar}>
       {error && (
-        <div className="flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm text-destructive shrink-0">
-          <AlertCircle className="h-4 w-4 shrink-0 mt-0.5" />
+        <div className="mb-4 flex shrink-0 items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm text-destructive">
+          <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
           <p>{error}</p>
         </div>
       )}
@@ -188,42 +185,31 @@ export function SqlFormatterLayout() {
         />
       )}
 
-      <div className={`flex-1 ${isMobile ? 'flex flex-col min-h-0' : 'grid grid-cols-1 lg:grid-cols-2 gap-4 min-h-0'}`}>
+      <div
+        className={cn(
+          'min-h-0 flex-1',
+          isMobile ? 'mt-4 flex flex-col' : 'grid grid-cols-1 gap-4 lg:grid-cols-2',
+        )}
+      >
         {(!isMobile || mobileTab === 'input') && (
-          <Card className="flex flex-col overflow-hidden min-h-[220px] flex-1">
-            <div className="px-4 py-2.5 border-b border-border/50 bg-muted/30">
-              <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                {t('inputPanel')}
-              </Label>
-            </div>
-            <div className="flex-1 min-h-0 relative p-1">
-              <CodeEditor
-                value={input}
-                onChange={setInput}
-                language="sql"
-              />
-            </div>
-          </Card>
+          <IOPanel label={t('inputPanel')} bodyClassName="p-1" className="min-h-[220px] flex-1">
+            <CodeEditor value={input} onChange={setInput} language="sql" />
+          </IOPanel>
         )}
 
         {(!isMobile || mobileTab === 'output') && (
-          <Card className="flex flex-col overflow-hidden min-h-[220px] flex-1">
-            <div className="flex items-center justify-between px-4 py-2.5 border-b border-border/50 bg-muted/30 gap-2">
-              <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                {t('formattedPanel')}
-              </Label>
+          <IOPanel
+            label={t('formattedPanel')}
+            bodyClassName="p-1"
+            className="min-h-[220px] flex-1"
+            actions={
               <CopyIconButton onCopy={handleCopy} copied={copied} disabled={!output} label={t('copy')} />
-            </div>
-            <div className="flex-1 min-h-0 relative p-1">
-              <CodeEditor
-                value={output}
-                readOnly
-                language="sql"
-              />
-            </div>
-          </Card>
+            }
+          >
+            <CodeEditor value={output} readOnly language="sql" />
+          </IOPanel>
         )}
       </div>
-    </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/yaml-formatter/yaml-formatter-layout.tsx b/apps/desktop-ui/src/components/yaml-formatter/yaml-formatter-layout.tsx
index 8796e08b..8e2248a6 100644
--- a/apps/desktop-ui/src/components/yaml-formatter/yaml-formatter-layout.tsx
+++ b/apps/desktop-ui/src/components/yaml-formatter/yaml-formatter-layout.tsx
@@ -4,14 +4,13 @@ import { useCallback, useState } from 'react'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import * as yaml from 'js-yaml'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 import { Label } from '@/components/ui/label'
 import { useIsMobile } from '@/components/hooks/use-mobile'
 import { IconFileCode } from '@tabler/icons-react'
-import { ToolPageHeader } from '@/components/tools/tool-page-header'
+import { ToolShell } from '@/components/tools/tool-shell'
+import { ToolPanels, IOPanel } from '@/components/tools/io-panel'
 import { ToolMobileTabs } from '@/components/tools/tool-mobile-tabs'
 import { CopyIconButton } from '@/components/tools/copy-icon-button'
-import { RevealItem } from '@/components/dashboard/dashboard-reveal'
 import {
   Select,
   SelectContent,
@@ -98,124 +97,109 @@ export function YamlFormatterLayout() {
     void copyToClipboard(output, { silent: true })
   }
 
-  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={IconFileCode} title={t('title')} description={t('subtitle')} />
-      </RevealItem>
-
-      <Card className="p-4 shrink-0">
-        <div className="flex flex-wrap items-end gap-3">
-          <div className="space-y-2 w-full sm:w-auto sm:min-w-[140px]">
-            <Label className="text-xs text-muted-foreground uppercase tracking-wider">{t('outputLabel')}</Label>
-            <Select value={outputMode} onValueChange={(v) => setOutputMode(v as OutputMode)}>
-              <SelectTrigger className="h-9 text-sm w-full sm:w-[180px]">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="yaml">{t('outputModes.yaml')}</SelectItem>
-                <SelectItem value="json">{t('outputModes.json')}</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-2 w-full sm:w-auto sm:min-w-[80px]">
-            <Label htmlFor="yaml-indent" className="text-xs text-muted-foreground uppercase tracking-wider">
-              {t('indentLabel')}
-            </Label>
-            <Select value={indent} onValueChange={setIndent}>
-              <SelectTrigger id="yaml-indent" className="h-9 text-sm w-full sm:w-[80px]">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {['2', '4'].map((n) => (
-                  <SelectItem key={n} value={n}>
-                    {n}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex flex-wrap gap-2 pb-0.5">
-            <Button type="button" size="sm" className="gap-1.5 h-9" onClick={runFormat}>
-              <Wand2 className="h-3.5 w-3.5" />
-              {t('format')}
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="gap-1.5 h-9"
-              onClick={() => {
-                setInput('')
-                setOutput('')
-                setError('')
-              }}
-            >
-              <Trash2 className="h-3.5 w-3.5" />
-              {t('clear')}
-            </Button>
-          </div>
-        </div>
-        <p className="text-[11px] text-muted-foreground mt-3">
-          {t('counter', { current: input.length.toLocaleString(), max: MAX_LEN.toLocaleString() })}
-        </p>
-      </Card>
+  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-2 w-full sm:w-auto sm:min-w-[140px]">
+        <Label className="text-xs text-muted-foreground uppercase tracking-wider">{t('outputLabel')}</Label>
+        <Select value={outputMode} onValueChange={(v) => setOutputMode(v as OutputMode)}>
+          <SelectTrigger className="h-9 text-sm w-full sm:w-[180px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="yaml">{t('outputModes.yaml')}</SelectItem>
+            <SelectItem value="json">{t('outputModes.json')}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-2 w-full sm:w-auto sm:min-w-[80px]">
+        <Label htmlFor="yaml-indent" className="text-xs text-muted-foreground uppercase tracking-wider">
+          {t('indentLabel')}
+        </Label>
+        <Select value={indent} onValueChange={setIndent}>
+          <SelectTrigger id="yaml-indent" className="h-9 text-sm w-full sm:w-[80px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {['2', '4'].map((n) => (
+              <SelectItem key={n} value={n}>
+                {n}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="flex flex-wrap gap-2 pb-0.5">
+        <Button type="button" size="sm" className="gap-1.5 h-9" onClick={runFormat}>
+          <Wand2 className="h-3.5 w-3.5" />
+          {t('format')}
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="gap-1.5 h-9"
+          onClick={() => {
+            setInput('')
+            setOutput('')
+            setError('')
+          }}
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+          {t('clear')}
+        </Button>
+      </div>
+      <p className="w-full text-[11px] text-muted-foreground">
+        {t('counter', { current: input.length.toLocaleString(), max: MAX_LEN.toLocaleString() })}
+      </p>
+    </div>
+  )
 
+  return (
+    <ToolShell
+      icon={IconFileCode}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
       {error && (
-        <div className="flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm text-destructive shrink-0">
+        <div className="flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm text-destructive shrink-0 mb-4">
           <AlertCircle className="h-4 w-4 shrink-0 mt-0.5" />
           <p className="font-mono text-xs">{error}</p>
         </div>
       )}
 
       {isMobile && (
-        <ToolMobileTabs
-          value={mobileTab}
-          onValueChange={setMobileTab}
-          tabs={[
-            { value: 'input', label: t('inputPanel') },
-            { value: 'output', label: t('outputPanel') },
-          ]}
-        />
+        <div className="mb-4">
+          <ToolMobileTabs
+            value={mobileTab}
+            onValueChange={setMobileTab}
+            tabs={[
+              { value: 'input', label: t('inputPanel') },
+              { value: 'output', label: t('outputPanel') },
+            ]}
+          />
+        </div>
       )}
 
-      <div className={`flex-1 ${isMobile ? 'flex flex-col min-h-0' : 'grid grid-cols-1 lg:grid-cols-2 gap-4 min-h-0'}`}>
+      <ToolPanels className="lg:grid-cols-2">
         {(!isMobile || mobileTab === 'input') && (
-          <Card className="flex flex-col overflow-hidden min-h-[220px] flex-1">
-            <div className="px-4 py-2.5 border-b border-border/50 bg-muted/30">
-              <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                {t('inputPanel')}
-              </Label>
-            </div>
-            <div className="flex-1 min-h-0 relative p-1">
-              <CodeEditor
-                value={input}
-                onChange={setInput}
-                language="yaml"
-              />
-            </div>
-          </Card>
+          <IOPanel label={t('inputPanel')} bodyClassName="p-1">
+            <CodeEditor value={input} onChange={setInput} language="yaml" />
+          </IOPanel>
         )}
 
         {(!isMobile || mobileTab === 'output') && (
-          <Card className="flex flex-col overflow-hidden min-h-[220px] flex-1">
-            <div className="flex items-center justify-between px-4 py-2.5 border-b border-border/50 bg-muted/30 gap-2">
-              <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                {t('outputPanel')}
-              </Label>
+          <IOPanel
+            label={t('outputPanel')}
+            bodyClassName="p-1"
+            actions={
               <CopyIconButton onCopy={handleCopy} copied={copied} disabled={!output} label={t('copy')} />
-            </div>
-            <div className="flex-1 min-h-0 relative p-1">
-              <CodeEditor
-                value={output}
-                readOnly
-                language={outputLang}
-              />
-            </div>
-          </Card>
+            }
+          >
+            <CodeEditor value={output} readOnly language={outputLang} />
+          </IOPanel>
         )}
-      </div>
-    </div>
+      </ToolPanels>
+    </ToolShell>
   )
 }