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

Phase 3 of the tool-consistency pass. Every Generator now renders through
ToolShell + IOPanel/ToolTextArea (output) and kit-surface panels (config),
instead of hand-rolled Cards — sharing one visual language with the
Formatters, Converters, and base64.

Migrated (logic preserved — generation, live displays, workers, i18n):
- uuid-generator, hash-generator, ssh-key-generator, hmac-generator,
  secret-api-key-generator, totp-generator, qr-code-generator, lorem-ipsum,
  gitignore-generator, docker-compose-generator, markdown-table-generator,
  cron-builder, mock-data-generator

Live behaviour verified intact: TOTP countdown still ticks, QR still renders
+ downloads, SSH key blocks preserved, mock-data worker + mobile tabs intact.

Consistent with earlier phases, the per-category header accent color is no
longer applied (ToolShell/ToolPageHeader don't surface it) — cosmetic only.

0 type errors; all 13 pages render.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../cron-builder/cron-builder-layout.tsx      | 105 +++---
 .../docker-compose-generator-layout.tsx       |  57 ++-
 .../gitignore-generator/gitignore-layout.tsx  |  79 ++--
 .../hash-generator/hash-generator-layout.tsx  |  27 +-
 .../hmac-generator/hmac-generator-layout.tsx  | 246 +++++++------
 .../lorem-ipsum/lorem-ipsum-layout.tsx        |  61 ++--
 .../markdown-table-generator-layout.tsx       | 343 +++++++++---------
 .../mock-data-generator-layout.tsx            |  56 ++-
 .../qr-code-generator-layout.tsx              |  35 +-
 .../secret-api-key-generator-layout.tsx       |  91 ++---
 .../ssh-key-generator-layout.tsx              | 124 ++++---
 .../totp-generator/totp-generator-layout.tsx  |  27 +-
 .../uuid-generator/uuid-generator-layout.tsx  |  80 ++--
 13 files changed, 602 insertions(+), 729 deletions(-)

diff --git a/apps/desktop-ui/src/components/cron-builder/cron-builder-layout.tsx b/apps/desktop-ui/src/components/cron-builder/cron-builder-layout.tsx
index cdcbc659..7527ed06 100644
--- a/apps/desktop-ui/src/components/cron-builder/cron-builder-layout.tsx
+++ b/apps/desktop-ui/src/components/cron-builder/cron-builder-layout.tsx
@@ -4,7 +4,6 @@ import { format } from 'date-fns';
 import { useMemo, useState } from 'react';
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
@@ -26,9 +25,7 @@ import {
   validateCron,
 } from '@/lib/cron-utils';
 import { IconRepeat } from '@tabler/icons-react';
-import { CATEGORY_ACCENT } from '@/components/dashboard/types';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
+import { ToolShell } from '@/components/tools/tool-shell';
 import { CopyTextButton } from '@/components/tools/copy-text-button';
 import { ToolErrorBanner } from '@/components/tools/tool-error-banner';
 import { useLocale, useTranslations } from 'next-intl';
@@ -44,12 +41,12 @@ function QuickPick({
 }) {
   return (
     <Select onValueChange={onPick}>
-      <SelectTrigger className="h-8 w-[min(100%,11rem)] text-xs shrink-0">
+      <SelectTrigger className="h-8 w-[min(100%,11rem)] shrink-0 text-xs">
         <SelectValue placeholder={placeholder} />
       </SelectTrigger>
       <SelectContent className="max-h-60">
         {options.map((o) => (
-          <SelectItem key={`${o.value}-${o.label}`} value={o.value} className="text-xs font-mono">
+          <SelectItem key={`${o.value}-${o.label}`} value={o.value} className="font-mono text-xs">
             {o.label}
           </SelectItem>
         ))}
@@ -168,20 +165,15 @@ export function CronBuilderLayout() {
   }, [t, monthShort, weekdayShort]);
 
   return (
-    <div className="relative flex flex-col h-full gap-4 min-h-0 overflow-auto dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconRepeat}
-          title={t('title')}
-          description={t.rich('subtitle', {
-            mono: (chunks) => <span className="font-mono text-foreground">{chunks}</span>,
-            code: (chunks) => <code className="text-foreground">{chunks}</code>,
-          })}
-          accent={CATEGORY_ACCENT.Generators}
-        />
-      </RevealItem>
-
+    <ToolShell
+      icon={IconRepeat}
+      title={t('title')}
+      description={t.rich('subtitle', {
+        mono: (chunks) => <span className="font-mono text-foreground">{chunks}</span>,
+        code: (chunks) => <code className="text-foreground">{chunks}</code>,
+      })}
+      contentClassName="gap-4 overflow-auto"
+    >
       <Tabs
         defaultValue="builder"
         className="flex flex-col gap-4"
@@ -201,8 +193,8 @@ export function CronBuilderLayout() {
         </TabsList>
 
         <TabsContent value="builder" className="mt-0 space-y-4">
-          <Card className="p-4 space-y-3">
-            <Label className="text-xs text-muted-foreground uppercase tracking-wider">{t('presetsLabel')}</Label>
+          <div className="space-y-3 rounded-lg border border-border bg-card p-4">
+            <Label className="text-xs uppercase tracking-wider text-muted-foreground">{t('presetsLabel')}</Label>
             <div className="flex flex-wrap gap-2">
               {CRON_PRESETS.map((p) => (
                 <Button
@@ -210,51 +202,42 @@ export function CronBuilderLayout() {
                   type="button"
                   variant="outline"
                   size="sm"
-                  className="text-xs h-8"
+                  className="h-8 text-xs"
                   onClick={() => commitExpression(p.cron)}
                 >
                   {t(`presets.${p.key}` as never)}
                 </Button>
               ))}
             </div>
-          </Card>
+          </div>
 
-          <Card className="p-4 space-y-4">
-            <Label className="text-xs text-muted-foreground uppercase tracking-wider">{t('fieldsLabel')}</Label>
+          <div className="space-y-4 rounded-lg border border-border bg-card p-4">
+            <Label className="text-xs uppercase tracking-wider text-muted-foreground">{t('fieldsLabel')}</Label>
             <div className="space-y-3">
               {CRON_FIELD_LABELS.map((label, i) => {
                 const idx = i as 0 | 1 | 2 | 3 | 4;
                 const uiLabel = t(`fields.${label}` as never);
                 return (
-                  <div
-                    key={label}
-                    className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3"
-                  >
-                    <span className="text-xs font-medium text-muted-foreground w-36 shrink-0">
-                      {uiLabel}
-                    </span>
+                  <div key={label} className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
+                    <span className="w-36 shrink-0 text-xs font-medium text-muted-foreground">{uiLabel}</span>
                     <Input
                       value={five[idx]}
                       onChange={(e) => updateField(idx, e.target.value)}
-                      className="font-mono text-sm h-9 flex-1 min-w-0"
+                      className="h-9 min-w-0 flex-1 font-mono text-sm"
                       spellCheck={false}
                       aria-label={uiLabel}
                     />
-                    <QuickPick
-                      options={PICKS[idx]!}
-                      onPick={(v) => updateField(idx, v)}
-                      placeholder={t('quickPick')}
-                    />
+                    <QuickPick options={PICKS[idx]!} onPick={(v) => updateField(idx, v)} placeholder={t('quickPick')} />
                   </div>
                 );
               })}
             </div>
-          </Card>
+          </div>
         </TabsContent>
 
         <TabsContent value="expression" className="mt-0 space-y-3">
-          <Card className="p-4 space-y-2">
-            <Label htmlFor="cron-raw" className="text-xs text-muted-foreground uppercase tracking-wider">
+          <div className="space-y-2 rounded-lg border border-border bg-card p-4">
+            <Label htmlFor="cron-raw" className="text-xs uppercase tracking-wider text-muted-foreground">
               {t('rawExpressionLabel')}
             </Label>
             <textarea
@@ -263,18 +246,16 @@ export function CronBuilderLayout() {
               onChange={(e) => setRawDraft(e.target.value)}
               onBlur={() => commitExpression(rawDraft)}
               spellCheck={false}
-              className="w-full min-h-[100px] rounded-md border border-input bg-transparent px-3 py-2 text-sm font-mono shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="min-h-[100px] w-full rounded-md border border-input bg-transparent px-3 py-2 font-mono text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             />
-            <p className="text-[11px] text-muted-foreground">
-              {t('expressionHint', { count: tokenCount })}
-            </p>
-          </Card>
+            <p className="text-[11px] text-muted-foreground">{t('expressionHint', { count: tokenCount })}</p>
+          </div>
         </TabsContent>
       </Tabs>
 
-      <Card className="p-4 space-y-2 shrink-0">
+      <div className="shrink-0 space-y-2 rounded-lg border border-border bg-card p-4">
         <div className="flex flex-wrap items-center justify-between gap-2">
-          <Label className="text-xs text-muted-foreground uppercase tracking-wider">{t('currentExpressionLabel')}</Label>
+          <Label className="text-xs uppercase tracking-wider text-muted-foreground">{t('currentExpressionLabel')}</Label>
           <CopyTextButton
             onCopy={copyExpr}
             copied={copied}
@@ -283,10 +264,10 @@ export function CronBuilderLayout() {
             className="h-8 gap-1 text-xs"
           />
         </div>
-        <p className="font-mono text-sm break-all rounded-md bg-muted/50 px-3 py-2">
+        <p className="break-all rounded-md bg-muted/50 px-3 py-2 font-mono text-sm">
           {expression.trim() || t('emptyExpression')}
         </p>
-      </Card>
+      </div>
 
       {validation.ok === false && (
         <ToolErrorBanner
@@ -296,7 +277,7 @@ export function CronBuilderLayout() {
                 {validation.errorKey === 'invalid' ? t('errors.invalid') : t(`errors.${validation.errorKey}` as never)}
               </p>
               {validation.errorKey === 'invalid' && validation.detail ? (
-                <p className="text-xs text-destructive/80 font-mono">{validation.detail}</p>
+                <p className="font-mono text-xs text-destructive/80">{validation.detail}</p>
               ) : null}
             </div>
           }
@@ -304,27 +285,25 @@ export function CronBuilderLayout() {
       )}
 
       {validation.ok && human && (
-        <Card className="p-4 space-y-2 border-primary/20 bg-primary/5">
-          <Label className="text-xs text-muted-foreground uppercase tracking-wider">{t('plainLanguageLabel')}</Label>
+        <div className="space-y-2 rounded-lg border border-primary/20 bg-primary/5 p-4">
+          <Label className="text-xs uppercase tracking-wider text-muted-foreground">{t('plainLanguageLabel')}</Label>
           <p className="text-sm leading-relaxed">{human}</p>
-        </Card>
+        </div>
       )}
 
       {validation.ok && nextRuns && nextRuns.length > 0 && (
-        <Card className="p-4 space-y-2">
-          <Label className="text-xs text-muted-foreground uppercase tracking-wider">
-            {t('nextRunsLabel')}
-          </Label>
-          <ul className="space-y-1.5 text-sm font-mono text-muted-foreground">
+        <div className="space-y-2 rounded-lg border border-border bg-card p-4">
+          <Label className="text-xs uppercase tracking-wider text-muted-foreground">{t('nextRunsLabel')}</Label>
+          <ul className="space-y-1.5 font-mono text-sm text-muted-foreground">
             {nextRuns.map((d, i) => (
               <li key={i} className="flex gap-2">
-                <span className="text-[10px] w-5 shrink-0 text-muted-foreground/70">{i + 1}.</span>
+                <span className="w-5 shrink-0 text-[10px] text-muted-foreground/70">{i + 1}.</span>
                 <span className="text-foreground">{format(d, 'PPpp')}</span>
               </li>
             ))}
           </ul>
-        </Card>
+        </div>
       )}
-    </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/docker-compose-generator/docker-compose-generator-layout.tsx b/apps/desktop-ui/src/components/docker-compose-generator/docker-compose-generator-layout.tsx
index 7164a22a..8e87ec8a 100644
--- a/apps/desktop-ui/src/components/docker-compose-generator/docker-compose-generator-layout.tsx
+++ b/apps/desktop-ui/src/components/docker-compose-generator/docker-compose-generator-layout.tsx
@@ -3,8 +3,6 @@
 import * as React from 'react'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { useTranslations } from 'next-intl'
-import { Card } from '@/components/ui/card'
-import { Label } from '@/components/ui/label'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Input } from '@/components/ui/input'
@@ -18,10 +16,9 @@ import {
 } from '@/lib/docker-compose-generator'
 import { Download, Search, X } from 'lucide-react'
 import { IconBrandDocker } from '@tabler/icons-react'
-import { CATEGORY_ACCENT } from '@/components/dashboard/types'
-import { RevealItem } from '@/components/dashboard/dashboard-reveal'
-import { ToolPageHeader } from '@/components/tools/tool-page-header'
 import { CopyTextButton } from '@/components/tools/copy-text-button'
+import { ToolShell } from '@/components/tools/tool-shell'
+import { ToolPanels, IOPanel, ToolTextArea } from '@/components/tools/io-panel'
 
 const PRESETS: { id: string; services: string[] }[] = [
   { id: 'stackWeb', services: ['postgres', 'redis', 'nginx'] },
@@ -108,20 +105,14 @@ export function DockerComposeGeneratorLayout() {
   }
 
   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={IconBrandDocker}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Generators}
-        />
-      </RevealItem>
-
-      <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 flex-1 min-h-0 overflow-auto pb-4">
+    <ToolShell
+      icon={IconBrandDocker}
+      title={t('title')}
+      description={t('subtitle')}
+    >
+      <ToolPanels className="md:grid-cols-1 lg:grid-cols-2 overflow-auto pb-4">
         <div className="flex flex-col gap-4 min-h-0">
-          <Card className="p-4 flex flex-col gap-3 shrink-0">
+          <div className="rounded-lg border border-border bg-card p-4 flex flex-col gap-3 shrink-0">
             <div className="flex flex-wrap gap-2">
               {PRESETS.map((p) => (
                 <Button
@@ -140,9 +131,9 @@ export function DockerComposeGeneratorLayout() {
               </Button>
             </div>
             <p className="text-xs text-muted-foreground">{t('hintPorts')}</p>
-          </Card>
+          </div>
 
-          <Card className="p-4 flex flex-col flex-1 min-h-[280px] gap-3 overflow-hidden">
+          <div className="rounded-lg border border-border bg-card p-4 flex flex-col flex-1 min-h-[280px] gap-3 overflow-hidden">
             <div className="relative">
               <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
               <Input
@@ -221,13 +212,13 @@ export function DockerComposeGeneratorLayout() {
                 ))}
               </div>
             ) : null}
-          </Card>
+          </div>
         </div>
 
-        <Card className="flex flex-col flex-1 p-4 overflow-hidden min-h-[320px]">
-          <div className="flex items-center justify-between mb-3 gap-2">
-            <Label className="text-xs text-muted-foreground uppercase tracking-wider">{t('outputTitle')}</Label>
-            <div className="flex gap-2 shrink-0">
+        <IOPanel
+          label={t('outputTitle')}
+          actions={
+            <>
               <Button
                 type="button"
                 variant="ghost"
@@ -247,17 +238,17 @@ export function DockerComposeGeneratorLayout() {
                 copiedLabel={t('copied')}
                 className="h-7 px-2 text-xs"
               />
-            </div>
-          </div>
-          <textarea
+            </>
+          }
+        >
+          <ToolTextArea
             readOnly
             value={yaml}
             placeholder={t('emptyState')}
-            spellCheck={false}
-            className="flex-1 min-h-0 w-full rounded-md border bg-muted/30 p-3 font-mono text-xs leading-relaxed resize-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="text-xs leading-relaxed"
           />
-        </Card>
-      </div>
-    </div>
+        </IOPanel>
+      </ToolPanels>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/gitignore-generator/gitignore-layout.tsx b/apps/desktop-ui/src/components/gitignore-generator/gitignore-layout.tsx
index ba76fa1b..630aa1b8 100644
--- a/apps/desktop-ui/src/components/gitignore-generator/gitignore-layout.tsx
+++ b/apps/desktop-ui/src/components/gitignore-generator/gitignore-layout.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 import { useTranslations } from 'next-intl';
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { isDesktop } from '@/lib/desktop/is-desktop';
-import { Card } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
 import { Check, Download, X, Search, Loader2 } from 'lucide-react';
@@ -14,11 +13,10 @@ import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { cn } from '@/lib/utils';
 import { IconFileMinus } from '@tabler/icons-react';
-import { CATEGORY_ACCENT } from '@/components/dashboard/types';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
 import { CopyTextButton } from '@/components/tools/copy-text-button';
 import { ToolErrorBanner } from '@/components/tools/tool-error-banner';
+import { ToolShell } from '@/components/tools/tool-shell';
+import { ToolPanels, IOPanel, ToolTextArea } from '@/components/tools/io-panel';
 
 export function GitignoreLayout() {
   const t = useTranslations('GitignoreGenerator');
@@ -110,22 +108,16 @@ export function GitignoreLayout() {
   };
 
   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={IconFileMinus}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Generators}
-        />
-      </RevealItem>
+    <ToolShell
+      icon={IconFileMinus}
+      title={t('title')}
+      description={t('subtitle')}
+    >
+      <ToolPanels className="md:grid-cols-1 lg:grid-cols-2 overflow-auto pb-4">
 
-      <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 flex-1 min-h-0 overflow-auto pb-4">
-        
         {/* Left Column: Stack Selection */}
         <div className="flex flex-col gap-4">
-          <Card className="p-4 flex flex-col items-start justify-start flex-1 min-h-[300px]">
+          <div className="rounded-lg border border-border bg-card p-4 flex flex-col items-start justify-start flex-1 min-h-[300px]">
             <Label className="text-xs text-muted-foreground uppercase tracking-wider mb-4">
               {t('searchPlaceholder')}
             </Label>
@@ -226,17 +218,19 @@ export function GitignoreLayout() {
                  </ScrollArea>
                )}
             </div>
-          </Card>
+          </div>
         </div>
 
         {/* Right Column: Output */}
-        <Card className="flex flex-col flex-1 p-4 overflow-hidden relative">
-          <div className="flex items-center justify-between mb-4">
-            <Label className="text-xs text-muted-foreground uppercase tracking-wider flex items-center gap-2">
+        <IOPanel
+          label={
+            <>
               {t('output')}
               {loadingOutput && <Loader2 className="h-3 w-3 animate-spin text-primary" />}
-            </Label>
-            <div className="flex gap-2">
+            </>
+          }
+          actions={
+            <>
               <Button type="button" variant="ghost" size="sm" onClick={downloadFile} disabled={!output || loadingOutput} className="h-7 text-xs gap-1.5 px-2">
                 <Download className="h-3.5 w-3.5" />
                 <span className="hidden sm:inline">{t('download')}</span>
@@ -249,27 +243,24 @@ export function GitignoreLayout() {
                 copiedLabel={t('copied')}
                 className="h-7 px-2 text-xs"
               />
+            </>
+          }
+        >
+          {loadingOutput ? (
+            <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 backdrop-blur-sm bg-background/50 z-10">
+              <Loader2 className="h-6 w-6 animate-spin text-primary" />
+              <p className="text-sm font-medium animate-pulse">{t('generating')}</p>
             </div>
-          </div>
-          
-          <div className="relative flex-1 overflow-hidden rounded-md border bg-muted/30">
-             {loadingOutput ? (
-               <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 backdrop-blur-sm bg-background/50 z-10">
-                 <Loader2 className="h-6 w-6 animate-spin text-primary" />
-                 <p className="text-sm font-medium animate-pulse">{t('generating')}</p>
-               </div>
-             ) : null}
-             
-             <textarea
-              readOnly
-              value={output}
-              placeholder={t('emptyState')}
-              className="h-full w-full bg-transparent p-4 font-mono text-sm resize-none focus-visible:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 overflow-auto"
-              spellCheck={false}
-             />
-          </div>
-        </Card>
-      </div>
-    </div>
+          ) : null}
+
+          <ToolTextArea
+            readOnly
+            value={output}
+            placeholder={t('emptyState')}
+            className="overflow-auto"
+          />
+        </IOPanel>
+      </ToolPanels>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/hash-generator/hash-generator-layout.tsx b/apps/desktop-ui/src/components/hash-generator/hash-generator-layout.tsx
index 5617fcb2..025dcc35 100644
--- a/apps/desktop-ui/src/components/hash-generator/hash-generator-layout.tsx
+++ b/apps/desktop-ui/src/components/hash-generator/hash-generator-layout.tsx
@@ -4,7 +4,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { useTranslations } from 'next-intl';
 import { useDebouncedCallback } from 'use-debounce';
-import { Card } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Input } from '@/components/ui/input';
@@ -25,9 +24,7 @@ import { cn } from '@/lib/utils';
 import { useAutoCopyStore } from '@/store/auto-copy-store';
 import { useSearchParams } from 'next/navigation';
 import { IconHash } from '@tabler/icons-react';
-import { CATEGORY_ACCENT } from '@/components/dashboard/types';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
+import { ToolShell } from '@/components/tools/tool-shell';
 import { CopyTextButton } from '@/components/tools/copy-text-button';
 import { ToolErrorBanner } from '@/components/tools/tool-error-banner';
 
@@ -187,19 +184,9 @@ export function HashGeneratorLayout() {
   const verifyMatch = isBcrypt ? bcryptMatch : digestMatch;
 
   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={IconHash}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Generators}
-        />
-      </RevealItem>
-
+    <ToolShell icon={IconHash} title={t('title')} description={t('subtitle')}>
       <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-2">
-        <Card className="flex flex-col gap-4 overflow-auto p-4">
+        <div className="flex flex-col gap-4 overflow-auto rounded-lg border border-border bg-card p-4">
           <div className="space-y-2">
             <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
               {t('algorithmLabel')}
@@ -294,9 +281,9 @@ export function HashGeneratorLayout() {
               </p>
             </TabsContent>
           </Tabs>
-        </Card>
+        </div>
 
-        <Card className="flex flex-col gap-3 overflow-auto p-4">
+        <div className="flex flex-col gap-3 overflow-auto rounded-lg border border-border bg-card p-4">
           <div className="flex flex-wrap items-center justify-between gap-2">
             <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
               {isBcrypt ? t('outputLabelBcrypt') : t('outputLabel')}
@@ -359,8 +346,8 @@ export function HashGeneratorLayout() {
             )}
           </div>
           <p className="text-xs text-muted-foreground">{isBcrypt ? t('securityNoteBcrypt') : t('securityNote')}</p>
-        </Card>
+        </div>
       </div>
-    </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/hmac-generator/hmac-generator-layout.tsx b/apps/desktop-ui/src/components/hmac-generator/hmac-generator-layout.tsx
index 484bda98..fda2e30f 100644
--- a/apps/desktop-ui/src/components/hmac-generator/hmac-generator-layout.tsx
+++ b/apps/desktop-ui/src/components/hmac-generator/hmac-generator-layout.tsx
@@ -4,9 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { useTranslations } from 'next-intl';
 import { useDebouncedCallback } from 'use-debounce';
-import { Card } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
 import {
   Select,
   SelectContent,
@@ -15,9 +13,8 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { IconCircleKey } from '@tabler/icons-react';
-import { CATEGORY_ACCENT } from '@/components/dashboard/types';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
+import { ToolShell } from '@/components/tools/tool-shell';
+import { ToolPanels, IOPanel, ToolTextArea } from '@/components/tools/io-panel';
 import { CopyTextButton } from '@/components/tools/copy-text-button';
 import { ToolErrorBanner } from '@/components/tools/tool-error-banner';
 import { Input } from '@/components/ui/input';
@@ -101,132 +98,141 @@ export function HmacGeneratorLayout() {
     return compareHashes(expectedMac, signature);
   }, [expectedMac, signature]);
 
-  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={IconCircleKey}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Generators}
-        />
-      </RevealItem>
-
-      <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-2">
-        <Card className="flex flex-col gap-4 overflow-auto p-4">
-          <div className="grid gap-4 sm:grid-cols-3">
-            <div className="space-y-2">
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                {t('algorithmLabel')}
-              </Label>
-              <Select value={digest} onValueChange={(v) => setDigest(v as HmacDigestId)}>
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {HMAC_DIGESTS.map((d) => (
-                    <SelectItem key={d} value={d}>
-                      {t(`algorithms.${DIGEST_MSG[d]}` as 'algorithms.sha256')}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                {t('outputFormatLabel')}
-              </Label>
-              <Select
-                value={outputFormat}
-                onValueChange={(v) => setOutputFormat(v as 'hex' | 'base64')}
-              >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="hex">{t('formatHex')}</SelectItem>
-                  <SelectItem value="base64">{t('formatBase64')}</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                {t('keyEncodingLabel')}
-              </Label>
-              <Select value={keyEncoding} onValueChange={(v) => setKeyEncoding(v as HmacKeyEncoding)}>
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="utf8">{t('keyEncodingUtf8')}</SelectItem>
-                  <SelectItem value="hex">{t('keyEncodingHex')}</SelectItem>
-                  <SelectItem value="base64">{t('keyEncodingBase64')}</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
+  const toolbar = (
+    <div className="grid items-end gap-4 rounded-lg border border-border bg-card px-4 py-3 sm:grid-cols-3">
+      <div className="space-y-2">
+        <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          {t('algorithmLabel')}
+        </Label>
+        <Select value={digest} onValueChange={(v) => setDigest(v as HmacDigestId)}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {HMAC_DIGESTS.map((d) => (
+              <SelectItem key={d} value={d}>
+                {t(`algorithms.${DIGEST_MSG[d]}` as 'algorithms.sha256')}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-2">
+        <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          {t('outputFormatLabel')}
+        </Label>
+        <Select
+          value={outputFormat}
+          onValueChange={(v) => setOutputFormat(v as 'hex' | 'base64')}
+        >
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="hex">{t('formatHex')}</SelectItem>
+            <SelectItem value="base64">{t('formatBase64')}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-2">
+        <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          {t('keyEncodingLabel')}
+        </Label>
+        <Select value={keyEncoding} onValueChange={(v) => setKeyEncoding(v as HmacKeyEncoding)}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="utf8">{t('keyEncodingUtf8')}</SelectItem>
+            <SelectItem value="hex">{t('keyEncodingHex')}</SelectItem>
+            <SelectItem value="base64">{t('keyEncodingBase64')}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
 
-          <div className="space-y-2">
-            <Label htmlFor="hmac-secret">{t('secretLabel')}</Label>
-            <Textarea
+  return (
+    <ToolShell
+      icon={IconCircleKey}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
+      <ToolPanels className="lg:grid-cols-2">
+        <div className="flex min-h-0 flex-col gap-4">
+          <IOPanel
+            label={t('secretLabel')}
+            className="h-[160px] shrink-0"
+            actions={
+              <span className="text-[10px] tabular-nums text-muted-foreground">
+                {t('keyByteCountHint', { count: secretBytes })}
+              </span>
+            }
+          >
+            <ToolTextArea
               id="hmac-secret"
               value={secret}
               onChange={(e) => setSecret(e.target.value)}
               placeholder={t('placeholderSecret')}
-              className="min-h-[100px] resize-y font-mono text-sm"
-              spellCheck={false}
               autoComplete="off"
             />
-            <p className="text-xs text-muted-foreground">{t('keyByteCountHint', { count: secretBytes })}</p>
-          </div>
+          </IOPanel>
 
-          <div className="space-y-2">
-            <Label htmlFor="hmac-message">{t('messageLabel')}</Label>
-            <Textarea
+          <IOPanel
+            label={t('messageLabel')}
+            className="min-h-[180px] flex-1"
+            actions={
+              <span className="text-[10px] tabular-nums text-muted-foreground">
+                {t('byteCountHint', { count: messageBytes })}
+              </span>
+            }
+          >
+            <ToolTextArea
               id="hmac-message"
               value={message}
               onChange={(e) => setMessage(e.target.value)}
               placeholder={t('placeholderMessage')}
-              className="min-h-[140px] resize-y font-mono text-sm"
-              spellCheck={false}
             />
-            <p className="text-xs text-muted-foreground">{t('byteCountHint', { count: messageBytes })}</p>
-          </div>
-        </Card>
+          </IOPanel>
+        </div>
 
-        <Card className="flex flex-col gap-3 overflow-auto p-4">
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              {t('outputLabel')}
-            </Label>
-            <CopyTextButton
-              onCopy={handleCopy}
-              copied={copied}
-              disabled={!signature}
-              label={t('copyOutput')}
-              copiedLabel={t('copied')}
-            />
-          </div>
-          <div
-            className={cn(
-              'min-h-[120px] rounded-md border bg-muted/30 p-3 font-mono text-sm break-all',
-              working && 'opacity-60'
-            )}
-          >
-            {error ? (
-              <ToolErrorBanner
-                message={error === 'invalidKey' ? t('errors.invalidKey') : t('errors.cryptoFailed')}
+        <div className="flex min-h-0 flex-col gap-4">
+          <IOPanel
+            label={t('outputLabel')}
+            className="min-h-[160px] flex-1"
+            bodyClassName="overflow-auto"
+            actions={
+              <CopyTextButton
+                onCopy={handleCopy}
+                copied={copied}
+                disabled={!signature}
+                label={t('copyOutput')}
+                copiedLabel={t('copied')}
               />
-            ) : signature ? (
-              signature
-            ) : (
-              <span className="text-muted-foreground">
-                {!secret ? t('emptyHint') : '…'}
-              </span>
-            )}
-          </div>
-          <div className="space-y-2 border-t pt-3">
+            }
+          >
+            <div
+              className={cn(
+                'min-h-full p-3 font-mono text-sm break-all',
+                working && 'opacity-60'
+              )}
+            >
+              {error ? (
+                <ToolErrorBanner
+                  message={error === 'invalidKey' ? t('errors.invalidKey') : t('errors.cryptoFailed')}
+                />
+              ) : signature ? (
+                signature
+              ) : (
+                <span className="text-muted-foreground">
+                  {!secret ? t('emptyHint') : '…'}
+                </span>
+              )}
+            </div>
+          </IOPanel>
+
+          <div className="rounded-lg border border-border bg-card p-4 space-y-2">
             <Label
               htmlFor="hmac-verify"
               className="text-xs font-medium uppercase tracking-wider text-muted-foreground"
@@ -254,10 +260,10 @@ export function HmacGeneratorLayout() {
                 {verifyMatch ? t('verifyMatch') : t('verifyMismatch')}
               </p>
             )}
+            <p className="text-xs text-muted-foreground">{t('securityNote')}</p>
           </div>
-          <p className="text-xs text-muted-foreground">{t('securityNote')}</p>
-        </Card>
-      </div>
-    </div>
+        </div>
+      </ToolPanels>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/lorem-ipsum/lorem-ipsum-layout.tsx b/apps/desktop-ui/src/components/lorem-ipsum/lorem-ipsum-layout.tsx
index b8b7d83e..cce8772e 100644
--- a/apps/desktop-ui/src/components/lorem-ipsum/lorem-ipsum-layout.tsx
+++ b/apps/desktop-ui/src/components/lorem-ipsum/lorem-ipsum-layout.tsx
@@ -3,7 +3,6 @@
 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 { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
@@ -16,9 +15,8 @@ import {
 import { Switch } from '@/components/ui/switch';
 import { Download, RefreshCw } from 'lucide-react';
 import { IconQuote } from '@tabler/icons-react';
-import { CATEGORY_ACCENT } from '@/components/dashboard/types';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
+import { ToolShell } from '@/components/tools/tool-shell';
+import { IOPanel, ToolTextArea } from '@/components/tools/io-panel';
 import { CopyIconButton } from '@/components/tools/copy-icon-button';
 import {
   generateLorem,
@@ -76,19 +74,13 @@ export function LoremIpsumLayout() {
   };
 
   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={IconQuote}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Generators}
-        />
-      </RevealItem>
-
+    <ToolShell
+      icon={IconQuote}
+      title={t('title')}
+      description={t('subtitle')}
+    >
       <div className="flex-1 grid grid-cols-1 lg:grid-cols-2 gap-4 min-h-0">
-        <Card className="flex flex-col gap-4 p-4 overflow-auto">
+        <div className="flex flex-col gap-4 overflow-auto rounded-lg border border-border bg-card p-4">
           <div className="space-y-2">
             <Label
               htmlFor="lorem-unit"
@@ -144,14 +136,13 @@ export function LoremIpsumLayout() {
             <RefreshCw className="h-3.5 w-3.5" />
             {t('generate')}
           </Button>
-        </Card>
+        </div>
 
-        <Card className="flex flex-col overflow-hidden min-h-[280px]">
-          <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('output')}
-            </Label>
-            <div className="flex items-center gap-1 shrink-0">
+        <IOPanel
+          className="min-h-[280px]"
+          label={t('output')}
+          actions={
+            <>
               <span className="text-[10px] text-muted-foreground tabular-nums mr-1">
                 {output ? `${output.length.toLocaleString()} chars` : '—'}
               </span>
@@ -173,19 +164,17 @@ export function LoremIpsumLayout() {
                 label={t('copy')}
                 className="h-7 w-7"
               />
-            </div>
-          </div>
-          <div className="flex-1 min-h-0 relative">
-            <textarea
-              value={output}
-              readOnly
-              placeholder={t('outputPlaceholder')}
-              className="absolute inset-0 w-full h-full resize-none bg-transparent p-4 text-sm leading-relaxed focus:outline-none placeholder:text-muted-foreground/50"
-              spellCheck={false}
-            />
-          </div>
-        </Card>
+            </>
+          }
+        >
+          <ToolTextArea
+            value={output}
+            readOnly
+            placeholder={t('outputPlaceholder')}
+            className="p-4 font-sans"
+          />
+        </IOPanel>
       </div>
-    </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/markdown-table-generator/markdown-table-generator-layout.tsx b/apps/desktop-ui/src/components/markdown-table-generator/markdown-table-generator-layout.tsx
index 065004cd..1ed7ceef 100644
--- a/apps/desktop-ui/src/components/markdown-table-generator/markdown-table-generator-layout.tsx
+++ b/apps/desktop-ui/src/components/markdown-table-generator/markdown-table-generator-layout.tsx
@@ -5,10 +5,7 @@ import { toast } from 'sonner'
 import { useTranslations } from 'next-intl'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import {
@@ -26,9 +23,8 @@ import {
   X,
 } from 'lucide-react'
 import { IconTable } 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 } from '@/components/tools/io-panel'
 import {
   SAMPLE_ALIGNS,
   SAMPLE_HEADERS,
@@ -111,169 +107,167 @@ export function MarkdownTableGeneratorLayout() {
     }
   }
 
-  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={IconTable}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Generators}
-        />
-      </RevealItem>
-
-      <Card className="flex flex-col gap-3 p-4">
-        <div className="flex flex-wrap items-center gap-2">
-          <Button type="button" variant="outline" size="sm" onClick={addRow}>
-            <Plus className="mr-1.5 h-4 w-4" />
-            {t('addRow')}
-          </Button>
-          <Button type="button" variant="outline" size="sm" onClick={addColumn}>
-            <Plus className="mr-1.5 h-4 w-4" />
-            {t('addColumn')}
-          </Button>
-          <Button type="button" variant="outline" size="sm" onClick={() => setPasteOpen((o) => !o)}>
-            <ClipboardPaste className="mr-1.5 h-4 w-4" />
-            {t('importLabel')}
-            <ChevronDown className={`ml-1.5 h-4 w-4 transition-transform ${pasteOpen ? 'rotate-180' : ''}`} />
-          </Button>
-          <Button type="button" variant="ghost" size="sm" className="ml-auto" onClick={clearAll}>
-            <Trash2 className="mr-1.5 h-4 w-4" />
-            {t('clear')}
-          </Button>
-        </div>
+  const toolbar = (
+    <div className="flex shrink-0 flex-col gap-3 rounded-lg border border-border bg-card p-4">
+      <div className="flex flex-wrap items-center gap-2">
+        <Button type="button" variant="outline" size="sm" onClick={addRow}>
+          <Plus className="mr-1.5 h-4 w-4" />
+          {t('addRow')}
+        </Button>
+        <Button type="button" variant="outline" size="sm" onClick={addColumn}>
+          <Plus className="mr-1.5 h-4 w-4" />
+          {t('addColumn')}
+        </Button>
+        <Button type="button" variant="outline" size="sm" onClick={() => setPasteOpen((o) => !o)}>
+          <ClipboardPaste className="mr-1.5 h-4 w-4" />
+          {t('importLabel')}
+          <ChevronDown className={`ml-1.5 h-4 w-4 transition-transform ${pasteOpen ? 'rotate-180' : ''}`} />
+        </Button>
+        <Button type="button" variant="ghost" size="sm" className="ml-auto" onClick={clearAll}>
+          <Trash2 className="mr-1.5 h-4 w-4" />
+          {t('clear')}
+        </Button>
+      </div>
 
-        {pasteOpen && (
-          <div className="flex flex-col gap-2 border-t border-border/50 pt-3">
-            <textarea
-              value={pasteText}
-              onChange={(e) => setPasteText(e.target.value)}
-              placeholder={t('importPlaceholder')}
-              className="h-24 w-full resize-none rounded-md border border-border/50 bg-transparent p-3 font-mono text-sm placeholder:text-muted-foreground/50 focus:outline-none"
-              spellCheck={false}
-              autoComplete="off"
-            />
-            <div className="flex items-center gap-2">
-              <Button type="button" size="sm" onClick={() => importGrid(pasteText)} disabled={!pasteText.trim()}>
-                {t('importButton')}
-              </Button>
-              <Button type="button" variant="outline" size="sm" onClick={() => void pasteFromClipboard()}>
-                <ClipboardPaste className="mr-1.5 h-4 w-4" />
-                {t('pasteClipboard')}
-              </Button>
-            </div>
+      {pasteOpen && (
+        <div className="flex flex-col gap-2 border-t border-border/50 pt-3">
+          <textarea
+            value={pasteText}
+            onChange={(e) => setPasteText(e.target.value)}
+            placeholder={t('importPlaceholder')}
+            className="h-24 w-full resize-none rounded-md border border-border/50 bg-transparent p-3 font-mono text-sm placeholder:text-muted-foreground/50 focus:outline-none"
+            spellCheck={false}
+            autoComplete="off"
+          />
+          <div className="flex items-center gap-2">
+            <Button type="button" size="sm" onClick={() => importGrid(pasteText)} disabled={!pasteText.trim()}>
+              {t('importButton')}
+            </Button>
+            <Button type="button" variant="outline" size="sm" onClick={() => void pasteFromClipboard()}>
+              <ClipboardPaste className="mr-1.5 h-4 w-4" />
+              {t('pasteClipboard')}
+            </Button>
           </div>
-        )}
-      </Card>
+        </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 gap-2 border-b border-border/50 bg-muted/30 px-4 py-2.5">
+  return (
+    <ToolShell
+      icon={IconTable}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
+      <ToolPanels className="lg:grid-cols-2">
+        {/* Editor */}
+        <div className="min-h-0 overflow-auto rounded-lg border border-border bg-card p-4">
+          <div className="mb-3 flex items-center gap-2">
             <TableIcon className="h-3.5 w-3.5 text-muted-foreground" />
-            <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('panels.editor')}</Label>
+            <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('panels.editor')}</span>
           </div>
-          <ScrollArea className="min-h-0 flex-1">
-            <div className="p-3">
-              <table className="border-separate border-spacing-1">
-                <thead>
-                  <tr>
-                    {headers.map((_, i) => (
-                      <th key={i} className="min-w-[140px] align-middle">
-                        <div className="flex items-center justify-center gap-1">
-                          <ToggleGroup
-                            type="single"
-                            size="sm"
-                            value={aligns[i]}
-                            onValueChange={(v) => v && setAlign(i, v as ColumnAlign)}
-                          >
-                            <ToggleGroupItem value="left" className="h-6 w-6 p-0" title={t('align.left')} aria-label={t('align.left')}>
-                              <TextAlignStart className="h-3 w-3" />
-                            </ToggleGroupItem>
-                            <ToggleGroupItem value="center" className="h-6 w-6 p-0" title={t('align.center')} aria-label={t('align.center')}>
-                              <TextAlignCenter className="h-3 w-3" />
-                            </ToggleGroupItem>
-                            <ToggleGroupItem value="right" className="h-6 w-6 p-0" title={t('align.right')} aria-label={t('align.right')}>
-                              <TextAlignEnd className="h-3 w-3" />
-                            </ToggleGroupItem>
-                          </ToggleGroup>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-6 w-6 text-muted-foreground"
-                            onClick={() => removeColumn(i)}
-                            disabled={headers.length <= 1}
-                            title={t('removeColumn')}
-                          >
-                            <X className="h-3 w-3" />
-                          </Button>
-                        </div>
-                      </th>
-                    ))}
-                    <th />
-                  </tr>
-                  <tr>
-                    {headers.map((h, i) => (
-                      <th key={i}>
-                        <Input
-                          value={h}
-                          onChange={(e) => setHeader(i, e.target.value)}
-                          placeholder={t('headerPlaceholder')}
-                          className="h-8 font-semibold text-sm"
-                          spellCheck={false}
-                        />
-                      </th>
-                    ))}
-                    <th />
-                  </tr>
-                </thead>
-                <tbody>
-                  {rows.map((row, r) => (
-                    <tr key={r}>
-                      {headers.map((_, c) => (
-                        <td key={c}>
-                          <Input
-                            value={row[c] ?? ''}
-                            onChange={(e) => setCell(r, c, e.target.value)}
-                            placeholder={t('cellPlaceholder')}
-                            className="h-8 text-sm"
-                            spellCheck={false}
-                          />
-                        </td>
-                      ))}
-                      <td>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="h-6 w-6 text-muted-foreground"
-                          onClick={() => removeRow(r)}
-                          disabled={rows.length <= 1}
-                          title={t('removeRow')}
-                        >
-                          <X className="h-3 w-3" />
-                        </Button>
-                      </td>
-                    </tr>
+          <table className="border-separate border-spacing-1">
+            <thead>
+              <tr>
+                {headers.map((_, i) => (
+                  <th key={i} className="min-w-[140px] align-middle">
+                    <div className="flex items-center justify-center gap-1">
+                      <ToggleGroup
+                        type="single"
+                        size="sm"
+                        value={aligns[i]}
+                        onValueChange={(v) => v && setAlign(i, v as ColumnAlign)}
+                      >
+                        <ToggleGroupItem value="left" className="h-6 w-6 p-0" title={t('align.left')} aria-label={t('align.left')}>
+                          <TextAlignStart className="h-3 w-3" />
+                        </ToggleGroupItem>
+                        <ToggleGroupItem value="center" className="h-6 w-6 p-0" title={t('align.center')} aria-label={t('align.center')}>
+                          <TextAlignCenter className="h-3 w-3" />
+                        </ToggleGroupItem>
+                        <ToggleGroupItem value="right" className="h-6 w-6 p-0" title={t('align.right')} aria-label={t('align.right')}>
+                          <TextAlignEnd className="h-3 w-3" />
+                        </ToggleGroupItem>
+                      </ToggleGroup>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6 text-muted-foreground"
+                        onClick={() => removeColumn(i)}
+                        disabled={headers.length <= 1}
+                        title={t('removeColumn')}
+                      >
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  </th>
+                ))}
+                <th />
+              </tr>
+              <tr>
+                {headers.map((h, i) => (
+                  <th key={i}>
+                    <Input
+                      value={h}
+                      onChange={(e) => setHeader(i, e.target.value)}
+                      placeholder={t('headerPlaceholder')}
+                      className="h-8 font-semibold text-sm"
+                      spellCheck={false}
+                    />
+                  </th>
+                ))}
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row, r) => (
+                <tr key={r}>
+                  {headers.map((_, c) => (
+                    <td key={c}>
+                      <Input
+                        value={row[c] ?? ''}
+                        onChange={(e) => setCell(r, c, e.target.value)}
+                        placeholder={t('cellPlaceholder')}
+                        className="h-8 text-sm"
+                        spellCheck={false}
+                      />
+                    </td>
                   ))}
-                </tbody>
-              </table>
-            </div>
-          </ScrollArea>
-        </Card>
+                  <td>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 text-muted-foreground"
+                      onClick={() => removeRow(r)}
+                      disabled={rows.length <= 1}
+                      title={t('removeRow')}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
 
-        <Card className="flex flex-col overflow-hidden min-h-0">
-          <Tabs
-            value={tab}
-            onValueChange={(v) => setTab(v as 'markdown' | 'html')}
-            className="flex min-h-0 flex-1 flex-col"
-          >
-            <div className="flex 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">
-                <FileCode 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">
+        {/* Output */}
+        <Tabs
+          value={tab}
+          onValueChange={(v) => setTab(v as 'markdown' | 'html')}
+          className="flex min-h-0 flex-col"
+        >
+          <IOPanel
+            className="flex-1"
+            bodyClassName="overflow-auto"
+            label={
+              <>
+                <FileCode className="h-3.5 w-3.5" aria-hidden />
+                {t('panels.output')}
+              </>
+            }
+            actions={
+              <>
                 <TabsList className="h-8">
                   <TabsTrigger value="markdown" className="px-3 text-xs">{t('tabs.markdown')}</TabsTrigger>
                   <TabsTrigger value="html" className="px-3 text-xs">{t('tabs.html')}</TabsTrigger>
@@ -287,21 +281,18 @@ export function MarkdownTableGeneratorLayout() {
                   {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>
-            <TabsContent value="markdown" className="mt-0 min-h-0 flex-1">
-              <ScrollArea className="h-full">
-                <pre className="p-4 font-mono text-sm">{markdown}</pre>
-              </ScrollArea>
+              </>
+            }
+          >
+            <TabsContent value="markdown" className="mt-0">
+              <pre className="p-4 font-mono text-sm">{markdown}</pre>
             </TabsContent>
-            <TabsContent value="html" className="mt-0 min-h-0 flex-1">
-              <ScrollArea className="h-full">
-                <pre className="p-4 font-mono text-sm">{html}</pre>
-              </ScrollArea>
+            <TabsContent value="html" className="mt-0">
+              <pre className="p-4 font-mono text-sm">{html}</pre>
             </TabsContent>
-          </Tabs>
-        </Card>
-      </div>
-    </div>
+          </IOPanel>
+        </Tabs>
+      </ToolPanels>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/mock-data-generator/mock-data-generator-layout.tsx b/apps/desktop-ui/src/components/mock-data-generator/mock-data-generator-layout.tsx
index fadb2124..6d49be74 100644
--- a/apps/desktop-ui/src/components/mock-data-generator/mock-data-generator-layout.tsx
+++ b/apps/desktop-ui/src/components/mock-data-generator/mock-data-generator-layout.tsx
@@ -8,13 +8,11 @@ import { useTranslations } from 'next-intl'
 import { toast } from 'sonner'
 import { Dices, Download, Plus, Trash2, RefreshCw, CopyPlus, Loader2, FileUp, FileDown } from 'lucide-react'
 import { IconClipboardData } from '@tabler/icons-react'
-import { CATEGORY_ACCENT } from '@/components/dashboard/types'
-import { RevealItem } from '@/components/dashboard/dashboard-reveal'
-import { ToolPageHeader } from '@/components/tools/tool-page-header'
 import { ToolMobileTabs } from '@/components/tools/tool-mobile-tabs'
 import { CopyTextButton } from '@/components/tools/copy-text-button'
+import { ToolShell } from '@/components/tools/tool-shell'
+import { IOPanel, ToolTextArea } from '@/components/tools/io-panel'
 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 {
@@ -244,16 +242,12 @@ export function MockDataGeneratorLayout() {
   const showTypeOptions = (type: FieldType) => TYPES_WITH_OPTIONS.includes(type)
 
   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={IconClipboardData}
-          title={t('title')}
-          description={t('subtitle', { max: MAX_MOCK_ROWS })}
-          accent={CATEGORY_ACCENT.Generators}
-        />
-      </RevealItem>
+    <ToolShell
+      icon={IconClipboardData}
+      title={t('title')}
+      description={t('subtitle', { max: MAX_MOCK_ROWS })}
+      contentClassName="min-h-0"
+    >
 
       {isMobile && (
         <ToolMobileTabs
@@ -268,7 +262,7 @@ export function MockDataGeneratorLayout() {
 
       <div className={`flex-1 min-h-0 ${isMobile ? 'flex flex-col' : 'grid grid-cols-1 xl:grid-cols-[1fr_minmax(280px,38%)] gap-4'}`}>
         {(!isMobile || mobileTab === 'schema') && (
-        <Card className="flex flex-col gap-4 p-4 min-h-0 overflow-hidden flex-1">
+        <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden rounded-lg border border-border bg-card p-4">
           <div className="flex flex-wrap items-end gap-3">
             <div className="space-y-1.5">
               <Label htmlFor={`${baseId}-rows`} className="text-xs text-muted-foreground uppercase tracking-wider">
@@ -551,16 +545,15 @@ export function MockDataGeneratorLayout() {
           <p className="text-[11px] text-muted-foreground">
             {t('rowsHint', { max: MAX_MOCK_ROWS })}
           </p>
-        </Card>
+        </div>
         )}
 
         {(!isMobile || mobileTab === 'output') && (
-        <Card className="flex flex-col gap-3 p-4 min-h-0 flex-1">
-          <div className="flex items-center justify-between gap-2 shrink-0">
-            <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-              {t('output')}
-            </Label>
-            <div className="flex gap-2">
+        <IOPanel
+          label={t('output')}
+          className="min-h-0 flex-1"
+          actions={
+            <>
               <CopyTextButton
                 onCopy={handleCopy}
                 copied={copied}
@@ -573,21 +566,14 @@ export function MockDataGeneratorLayout() {
                 <Download className="h-3.5 w-3.5" />
                 {t('download')}
               </Button>
-            </div>
-          </div>
-          <Textarea
-            readOnly
-            value={output}
-            placeholder={t('outputPlaceholder')}
-            className={cn(
-              'flex-1 min-h-[200px] font-mono text-xs resize-none',
-              'bg-muted/30'
-            )}
-          />
-        </Card>
+            </>
+          }
+        >
+          <ToolTextArea readOnly value={output} placeholder={t('outputPlaceholder')} className="text-xs" />
+        </IOPanel>
         )}
       </div>
-    </div>
+    </ToolShell>
   )
 }
 
diff --git a/apps/desktop-ui/src/components/qr-code-generator/qr-code-generator-layout.tsx b/apps/desktop-ui/src/components/qr-code-generator/qr-code-generator-layout.tsx
index b9df38e7..8ccc94ca 100644
--- a/apps/desktop-ui/src/components/qr-code-generator/qr-code-generator-layout.tsx
+++ b/apps/desktop-ui/src/components/qr-code-generator/qr-code-generator-layout.tsx
@@ -5,7 +5,6 @@ import { useTranslations } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
 import { useDebouncedCallback } from 'use-debounce';
 import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import {
@@ -20,9 +19,7 @@ import { Download, ImageIcon, Trash2, Upload, X } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type QRCodeStyling from 'qr-code-styling';
 import { IconQrcode } from '@tabler/icons-react';
-import { CATEGORY_ACCENT } from '@/components/dashboard/types';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
+import { ToolShell } from '@/components/tools/tool-shell';
 import { ToolErrorBanner } from '@/components/tools/tool-error-banner';
 import { CopyTextButton } from '@/components/tools/copy-text-button';
 
@@ -189,23 +186,15 @@ export function QrCodeGeneratorLayout() {
   };
 
   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={IconQrcode}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Generators}
-          offline={false}
-        />
-      </RevealItem>
-
-      {error && <ToolErrorBanner message={error} className="shrink-0" />}
-
+    <ToolShell
+      icon={IconQrcode}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={error ? <ToolErrorBanner message={error} className="shrink-0" /> : undefined}
+    >
       <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-2">
         {/* Controls Panel */}
-        <Card className="flex flex-col gap-5 overflow-auto p-4">
+        <div className="flex flex-col gap-5 overflow-auto rounded-lg border border-border bg-card p-4">
           {/* Content */}
           <div className="space-y-2">
             <Label htmlFor="qr-content" className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
@@ -388,10 +377,10 @@ export function QrCodeGeneratorLayout() {
               {t('clear')}
             </Button>
           </div>
-        </Card>
+        </div>
 
         {/* Preview Panel */}
-        <Card className="flex flex-col gap-4 overflow-auto p-4">
+        <div className="flex flex-col gap-4 overflow-auto rounded-lg border border-border bg-card p-4">
           <div className="flex flex-wrap items-center gap-2">
             <Button type="button" size="sm" onClick={() => handleDownload('png')} disabled={!hasContent}>
               <Download className="mr-1.5 h-4 w-4" />
@@ -427,8 +416,8 @@ export function QrCodeGeneratorLayout() {
               </div>
             )}
           </div>
-        </Card>
+        </div>
       </div>
-    </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/secret-api-key-generator/secret-api-key-generator-layout.tsx b/apps/desktop-ui/src/components/secret-api-key-generator/secret-api-key-generator-layout.tsx
index 87092f5d..5673c081 100644
--- a/apps/desktop-ui/src/components/secret-api-key-generator/secret-api-key-generator-layout.tsx
+++ b/apps/desktop-ui/src/components/secret-api-key-generator/secret-api-key-generator-layout.tsx
@@ -6,13 +6,11 @@ import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { useTranslations } from 'next-intl';
 import { Download, RefreshCw } from 'lucide-react';
 import { IconCircleKeyFilled } from '@tabler/icons-react';
-import { CATEGORY_ACCENT } from '@/components/dashboard/types';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
 import { CopyIconButton } from '@/components/tools/copy-icon-button';
 import { ToolErrorBanner } from '@/components/tools/tool-error-banner';
+import { ToolShell } from '@/components/tools/tool-shell';
+import { IOPanel, ToolTextArea } from '@/components/tools/io-panel';
 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 { Textarea } from '@/components/ui/textarea';
@@ -141,29 +139,23 @@ export function SecretApiKeyGeneratorLayout() {
   };
 
   return (
-    <div className="relative flex h-full min-h-0 flex-col gap-4 overflow-hidden dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconCircleKeyFilled}
-          title={t('title')}
-          description={t.rich('subtitle', {
-            max: MAX_SECRET_BULK.toLocaleString(),
-            uuid: (chunks) => (
-              <Link
-                href="/app/uuid-generator"
-                className="font-medium text-primary underline underline-offset-2 hover:no-underline"
-              >
-                {chunks}
-              </Link>
-            ),
-          })}
-          accent={CATEGORY_ACCENT.Generators}
-        />
-      </RevealItem>
-
+    <ToolShell
+      icon={IconCircleKeyFilled}
+      title={t('title')}
+      description={t.rich('subtitle', {
+        max: MAX_SECRET_BULK.toLocaleString(),
+        uuid: (chunks) => (
+          <Link
+            href="/app/uuid-generator"
+            className="font-medium text-primary underline underline-offset-2 hover:no-underline"
+          >
+            {chunks}
+          </Link>
+        ),
+      })}
+    >
       <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-2">
-        <Card className="flex flex-col gap-4 overflow-auto p-4">
+        <div className="flex flex-col gap-4 overflow-auto rounded-lg border border-border bg-card p-4">
           <div className="space-y-2">
             <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
               {t('presetsLabel')}
@@ -297,14 +289,13 @@ export function SecretApiKeyGeneratorLayout() {
               {t('generate')}
             </Button>
           </div>
-        </Card>
+        </div>
 
-        <Card className="flex min-h-[280px] flex-col overflow-hidden">
-          <div className="flex items-center justify-between gap-2 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('output')}
-            </Label>
-            <div className="flex shrink-0 items-center gap-1">
+        <IOPanel
+          className="min-h-[280px]"
+          label={t('output')}
+          actions={
+            <>
               <span className="mr-1 text-[10px] tabular-nums text-muted-foreground">
                 {t('lines', {
                   count: output ? output.split('\n').length.toLocaleString() : '0',
@@ -328,25 +319,23 @@ export function SecretApiKeyGeneratorLayout() {
                 label={t('copyTitle')}
                 className="h-7 w-7"
               />
+            </>
+          }
+        >
+          {error ? (
+            <div className="p-4">
+              <ToolErrorBanner message={error} />
             </div>
-          </div>
-          <div className="relative min-h-0 flex-1">
-            {error ? (
-              <div className="p-4">
-                <ToolErrorBanner message={error} />
-              </div>
-            ) : (
-              <textarea
-                value={output}
-                readOnly
-                placeholder={t('outputPlaceholder')}
-                className="absolute inset-0 h-full w-full resize-none bg-transparent p-4 font-mono text-sm placeholder:text-muted-foreground/50 focus:outline-none"
-                spellCheck={false}
-              />
-            )}
-          </div>
-        </Card>
+          ) : (
+            <ToolTextArea
+              value={output}
+              readOnly
+              placeholder={t('outputPlaceholder')}
+              className="p-4"
+            />
+          )}
+        </IOPanel>
       </div>
-    </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/ssh-key-generator/ssh-key-generator-layout.tsx b/apps/desktop-ui/src/components/ssh-key-generator/ssh-key-generator-layout.tsx
index 8feed147..f772af28 100644
--- a/apps/desktop-ui/src/components/ssh-key-generator/ssh-key-generator-layout.tsx
+++ b/apps/desktop-ui/src/components/ssh-key-generator/ssh-key-generator-layout.tsx
@@ -3,7 +3,6 @@
 import { useState, useCallback } from 'react';
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { useTranslations } from 'next-intl';
-import { Card } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -18,9 +17,8 @@ import {
 import { Download, RefreshCw } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { IconFingerprint } from '@tabler/icons-react';
-import { CATEGORY_ACCENT } from '@/components/dashboard/types';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
+import { ToolShell } from '@/components/tools/tool-shell';
+import { IOPanel } from '@/components/tools/io-panel';
 import { CopyTextButton } from '@/components/tools/copy-text-button';
 import { ToolErrorBanner } from '@/components/tools/tool-error-banner';
 
@@ -241,10 +239,10 @@ function KeyBlock({
   const { isCopied: copied, copyToClipboard } = useCopyToClipboard();
   if (!value) return null;
   return (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between gap-2">
-        <Label className="text-sm font-medium">{label}</Label>
-        <div className="flex gap-1.5">
+    <IOPanel
+      label={label}
+      actions={
+        <>
           <CopyTextButton
             onCopy={() => copyToClipboard(value, { silent: true, resetMs: 1600 })}
             copied={copied}
@@ -261,15 +259,16 @@ function KeyBlock({
             <Download className="h-3.5 w-3.5" />
             {downloadLabel}
           </button>
-        </div>
-      </div>
+        </>
+      }
+    >
       <Textarea
         readOnly
         value={value}
         className="font-mono text-xs resize-none h-36 bg-muted/20 border-border/50"
         spellCheck={false}
       />
-    </div>
+    </IOPanel>
   );
 }
 
@@ -297,61 +296,60 @@ export function SshKeyGeneratorLayout() {
 
   const keyName = keyType === 'ed25519' ? 'id_ed25519' : 'id_rsa';
 
-  return (
-    <div className="relative flex min-h-full w-full flex-col gap-4 overflow-hidden dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconFingerprint}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Generators}
-        />
-      </RevealItem>
-      <Card className="p-4 space-y-4">
-        <div className="grid gap-4 sm:grid-cols-2">
-          <div className="space-y-1.5">
-            <Label htmlFor="key-type">{t('keyTypeLabel')}</Label>
-            <Select value={keyType} onValueChange={(v) => setKeyType(v as KeyType)}>
-              <SelectTrigger id="key-type" className="w-full">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="ed25519">Ed25519 ({t('recommended')})</SelectItem>
-                <SelectItem value="rsa-2048">RSA 2048-bit</SelectItem>
-                <SelectItem value="rsa-4096">RSA 4096-bit</SelectItem>
-              </SelectContent>
-            </Select>
-            <p className="text-xs text-muted-foreground">
-              {keyType === 'ed25519'
-                ? t('ed25519Desc')
-                : keyType === 'rsa-2048'
-                ? t('rsa2048Desc')
-                : t('rsa4096Desc')}
-            </p>
-          </div>
+  const toolbar = (
+    <div className="rounded-lg border border-border bg-card p-4 space-y-4">
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div className="space-y-1.5">
+          <Label htmlFor="key-type">{t('keyTypeLabel')}</Label>
+          <Select value={keyType} onValueChange={(v) => setKeyType(v as KeyType)}>
+            <SelectTrigger id="key-type" className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="ed25519">Ed25519 ({t('recommended')})</SelectItem>
+              <SelectItem value="rsa-2048">RSA 2048-bit</SelectItem>
+              <SelectItem value="rsa-4096">RSA 4096-bit</SelectItem>
+            </SelectContent>
+          </Select>
+          <p className="text-xs text-muted-foreground">
+            {keyType === 'ed25519'
+              ? t('ed25519Desc')
+              : keyType === 'rsa-2048'
+              ? t('rsa2048Desc')
+              : t('rsa4096Desc')}
+          </p>
+        </div>
 
-          <div className="space-y-1.5">
-            <Label htmlFor="comment">{t('commentLabel')}</Label>
-            <Input
-              id="comment"
-              value={comment}
-              onChange={(e) => setComment(e.target.value)}
-              placeholder="user@hostname"
-              className="font-mono text-sm"
-            />
-            <p className="text-xs text-muted-foreground">{t('commentHint')}</p>
-          </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="comment">{t('commentLabel')}</Label>
+          <Input
+            id="comment"
+            value={comment}
+            onChange={(e) => setComment(e.target.value)}
+            placeholder="user@hostname"
+            className="font-mono text-sm"
+          />
+          <p className="text-xs text-muted-foreground">{t('commentHint')}</p>
         </div>
+      </div>
 
-        <Button onClick={generate} disabled={generating} className="w-full sm:w-auto gap-2">
-          <RefreshCw className={cn('h-4 w-4', generating && 'animate-spin')} />
-          {generating
-            ? (keyType === 'rsa-4096' ? t('generatingLong') : t('generating'))
-            : t('generateBtn')}
-        </Button>
-      </Card>
+      <Button onClick={generate} disabled={generating} className="w-full sm:w-auto gap-2">
+        <RefreshCw className={cn('h-4 w-4', generating && 'animate-spin')} />
+        {generating
+          ? (keyType === 'rsa-4096' ? t('generatingLong') : t('generating'))
+          : t('generateBtn')}
+      </Button>
+    </div>
+  );
 
+  return (
+    <ToolShell
+      icon={IconFingerprint}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+      contentClassName="gap-4 overflow-auto"
+    >
       <ToolErrorBanner message={error} />
 
       {keys && (
@@ -382,6 +380,6 @@ export function SshKeyGeneratorLayout() {
           </p>
         </div>
       )}
-    </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/totp-generator/totp-generator-layout.tsx b/apps/desktop-ui/src/components/totp-generator/totp-generator-layout.tsx
index 7d62cd18..adcdbe6e 100644
--- a/apps/desktop-ui/src/components/totp-generator/totp-generator-layout.tsx
+++ b/apps/desktop-ui/src/components/totp-generator/totp-generator-layout.tsx
@@ -4,7 +4,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { useTranslations } from 'next-intl';
 import { useDebouncedCallback } from 'use-debounce';
-import { Card } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Input } from '@/components/ui/input';
@@ -23,9 +22,7 @@ import {
 import type QRCodeStyling from 'qr-code-styling';
 import { ChevronDown } from 'lucide-react';
 import { IconClock } from '@tabler/icons-react';
-import { CATEGORY_ACCENT } from '@/components/dashboard/types';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
+import { ToolShell } from '@/components/tools/tool-shell';
 import { CopyTextButton } from '@/components/tools/copy-text-button';
 import { ToolErrorBanner } from '@/components/tools/tool-error-banner';
 import { Button } from '@/components/ui/button';
@@ -200,19 +197,9 @@ export function TotpGeneratorLayout() {
   }, [qrOpen, provisioningUri]);
 
   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={IconClock}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Generators}
-        />
-      </RevealItem>
-
+    <ToolShell icon={IconClock} title={t('title')} description={t('subtitle')}>
       <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-2">
-        <Card className="flex flex-col gap-4 overflow-auto p-4">
+        <div className="flex flex-col gap-4 overflow-auto rounded-lg border border-border bg-card p-4">
           <div className="grid gap-4 sm:grid-cols-3">
             <div className="space-y-2">
               <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
@@ -305,9 +292,9 @@ export function TotpGeneratorLayout() {
             </div>
             {importError && <p className="text-xs text-destructive">{t(importError)}</p>}
           </div>
-        </Card>
+        </div>
 
-        <Card className="flex flex-col gap-4 overflow-auto p-4">
+        <div className="flex flex-col gap-4 overflow-auto rounded-lg border border-border bg-card p-4">
           <div className="flex flex-wrap items-center justify-between gap-2">
             <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
               {t('codeLabel')}
@@ -391,8 +378,8 @@ export function TotpGeneratorLayout() {
               <p className="text-xs text-muted-foreground">{t('qrHint')}</p>
             </CollapsibleContent>
           </Collapsible>
-        </Card>
+        </div>
       </div>
-    </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/uuid-generator/uuid-generator-layout.tsx b/apps/desktop-ui/src/components/uuid-generator/uuid-generator-layout.tsx
index c0b099ef..bfa6281d 100644
--- a/apps/desktop-ui/src/components/uuid-generator/uuid-generator-layout.tsx
+++ b/apps/desktop-ui/src/components/uuid-generator/uuid-generator-layout.tsx
@@ -5,7 +5,6 @@ import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { IdRow } from './id-row';
 import { errorKeyFromGenerateIdsErrorKey } from './error-mapping';
 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 {
@@ -29,11 +28,10 @@ import { decodeIdTimestamp, idHasTimestamp } from '@/lib/id-timestamp';
 import { useTranslations } from 'next-intl';
 import { useAutoCopyStore } from '@/store/auto-copy-store';
 import { IconFingerprint } from '@tabler/icons-react';
-import { CATEGORY_ACCENT } from '@/components/dashboard/types';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
+import { ToolShell } from '@/components/tools/tool-shell';
+import { IOPanel } from '@/components/tools/io-panel';
 import { CopyIconButton } from '@/components/tools/copy-icon-button';
 import { ToolErrorBanner } from '@/components/tools/tool-error-banner';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
 
 const KIND_OPTIONS: { value: IdKind; label: string }[] = [
   { value: 'ulid', label: 'ULID' },
@@ -129,21 +127,14 @@ export function UuidGeneratorLayout() {
   };
 
   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={IconFingerprint}
-          title={t('title')}
-          description={t('subtitle', { max: MAX_BULK.toLocaleString() })}
-          accent={CATEGORY_ACCENT.Generators}
-        />
-      </RevealItem>
-
+    <ToolShell
+      icon={IconFingerprint}
+      title={t('title')}
+      description={t('subtitle', { max: MAX_BULK.toLocaleString() })}
+    >
       <div className="grid flex-1 min-h-0 grid-cols-1 gap-4 overflow-y-auto lg:grid-cols-2 lg:grid-rows-[minmax(0,1fr)] lg:overflow-hidden">
         {/* Config panel */}
-        <Card className="flex flex-col gap-4 p-4 lg:overflow-y-auto">
+        <div className="flex flex-col gap-4 rounded-lg border border-border bg-card p-4 lg:overflow-y-auto">
           {/* Format: chip row on small screens, Select on md+ — same `kind` state */}
           <div className="space-y-2">
             <Label htmlFor="id-kind" className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
@@ -304,15 +295,15 @@ export function UuidGeneratorLayout() {
               {t('generate')}
             </Button>
           </div>
-        </Card>
+        </div>
 
         {/* Output panel */}
-        <Card className="flex min-h-[280px] flex-col overflow-hidden">
-          <div className="flex items-center justify-between gap-2 border-b border-border/50 bg-muted/30 px-4 py-2.5">
-            <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-              {t('output')}
-            </Label>
-            <div className="flex items-center gap-1 shrink-0">
+        <IOPanel
+          className="min-h-[280px]"
+          bodyClassName="overflow-y-auto"
+          label={t('output')}
+          actions={
+            <>
               <span className="text-[10px] text-muted-foreground tabular-nums mr-1">
                 {t('lines', { count: outputLines.length > 0 ? outputLines.length.toLocaleString() : '0' })}
               </span>
@@ -367,28 +358,27 @@ export function UuidGeneratorLayout() {
               >
                 {copiedJson ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Braces className="h-3.5 w-3.5" />}
               </Button>
+            </>
+          }
+        >
+          {error ? (
+            <ToolErrorBanner message={error} className="m-4" />
+          ) : displayLines.length > 0 ? (
+            <div>
+              {displayLines.map((id, i) => (
+                <IdRow key={i} id={id} index={i} timestamp={timestamps[i]} />
+              ))}
             </div>
-          </div>
-          <div className="flex-1 min-h-0 overflow-y-auto">
-            {error ? (
-              <ToolErrorBanner message={error} className="m-4" />
-            ) : displayLines.length > 0 ? (
-              <div>
-                {displayLines.map((id, i) => (
-                  <IdRow key={i} id={id} index={i} timestamp={timestamps[i]} />
-                ))}
-              </div>
-            ) : (
-              <div className="flex h-full flex-col items-center justify-center gap-3 p-8 text-center">
-                <IconFingerprint className="h-8 w-8 text-muted-foreground/30" aria-hidden />
-                <p className="font-mono text-sm text-muted-foreground/50">
-                  {t('outputPlaceholder')}
-                </p>
-              </div>
-            )}
-          </div>
-        </Card>
+          ) : (
+            <div className="flex h-full flex-col items-center justify-center gap-3 p-8 text-center">
+              <IconFingerprint className="h-8 w-8 text-muted-foreground/30" aria-hidden />
+              <p className="font-mono text-sm text-muted-foreground/50">
+                {t('outputPlaceholder')}
+              </p>
+            </div>
+          )}
+        </IOPanel>
       </div>
-    </div>
+    </ToolShell>
   );
 }