From 99a67c06c002cc461f60c2c660fd698e0b4f5685 Mon Sep 17 00:00:00 2001
From: anuphilipp3 <anuphilipp3@gmail.com>
Date: Mon, 24 Aug 2026 21:55:10 +0530
Subject: [PATCH] Phase 6-Security

---
 .../bcrypt-generator-layout.tsx               |  28 +-
 .../email-validator/email-validator.tsx       |  87 ++-
 .../encryption-playground-layout.tsx          | 520 +++++++++---------
 .../jwt-decoder/jwt-decoder-layout.tsx        |  83 ++-
 .../pem-cert-decoder-layout.tsx               |  61 +-
 5 files changed, 368 insertions(+), 411 deletions(-)

diff --git a/apps/desktop-ui/src/components/bcrypt-generator/bcrypt-generator-layout.tsx b/apps/desktop-ui/src/components/bcrypt-generator/bcrypt-generator-layout.tsx
index 819bdfe6..7a9bb2cb 100644
--- a/apps/desktop-ui/src/components/bcrypt-generator/bcrypt-generator-layout.tsx
+++ b/apps/desktop-ui/src/components/bcrypt-generator/bcrypt-generator-layout.tsx
@@ -4,7 +4,6 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Badge } from '@/components/ui/badge'
@@ -23,9 +22,7 @@ import {
   TriangleAlert,
 } from 'lucide-react'
 import { IconShieldLock } 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 {
   hashPassword,
   parseBcryptHash,
@@ -323,20 +320,13 @@ export function BcryptGeneratorLayout() {
   const t = useTranslations('BcryptGenerator')
 
   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={IconShieldLock}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Security}
-        />
-      </RevealItem>
-
+    <ToolShell
+      icon={IconShieldLock}
+      title={t('title')}
+      description={t('subtitle')}
+    >
       <div className="min-h-0 flex-1 overflow-y-auto">
-        <Card className="mx-auto max-w-2xl p-5">
+        <div className="mx-auto max-w-2xl rounded-lg border border-border bg-card p-5">
           <Tabs defaultValue="hash">
             <TabsList className="mb-4 grid w-full grid-cols-2">
               <TabsTrigger value="hash">
@@ -355,8 +345,8 @@ export function BcryptGeneratorLayout() {
               <VerifyTab />
             </TabsContent>
           </Tabs>
-        </Card>
+        </div>
       </div>
-    </div>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/email-validator/email-validator.tsx b/apps/desktop-ui/src/components/email-validator/email-validator.tsx
index d2b5d7be..8a32960f 100644
--- a/apps/desktop-ui/src/components/email-validator/email-validator.tsx
+++ b/apps/desktop-ui/src/components/email-validator/email-validator.tsx
@@ -1,13 +1,10 @@
 "use client";
 
 import { useState, useRef, useMemo } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-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 {
     IconCheck,
     IconX,
@@ -409,17 +406,13 @@ export function EmailValidator() {
     };
 
     return (
-        <div className="flex h-full min-h-0 w-full flex-col gap-4 overflow-y-auto">
-            <RevealItem index={0} className="shrink-0">
-                <ToolPageHeader
-                    icon={IconMailCheck}
-                    title={t("header.title")}
-                    description={t("header.description")}
-                    accent={CATEGORY_ACCENT["Security"]}
-                    offline={false}
-                />
-            </RevealItem>
-
+        <ToolShell
+            icon={IconMailCheck}
+            title={t("header.title")}
+            description={t("header.description")}
+            offline={false}
+            contentClassName="overflow-y-auto"
+        >
             <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full space-y-4">
                 <div className="flex justify-center">
                     <TabsList className="grid w-full max-w-md grid-cols-2 p-1">
@@ -505,11 +498,11 @@ export function EmailValidator() {
                             )}
 
                             <div className="grid gap-4 md:grid-cols-12">
-                                <Card className="col-span-12 md:col-span-4 h-full flex flex-col">
-                                    <CardHeader>
-                                        <CardTitle className="text-base font-medium text-center text-muted-foreground">{t("score.reliabilityTitle")}</CardTitle>
-                                    </CardHeader>
-                                    <CardContent className="flex flex-col items-center justify-center flex-1 pb-8">
+                                <div className="col-span-12 md:col-span-4 h-full flex flex-col rounded-lg border border-border bg-card">
+                                    <div className="p-6 pb-0">
+                                        <h3 className="text-base font-medium text-center text-muted-foreground">{t("score.reliabilityTitle")}</h3>
+                                    </div>
+                                    <div className="flex flex-col items-center justify-center flex-1 p-6 pt-4 pb-8">
                                         <div className="relative flex items-center justify-center">
                                             {/* Simple SVG Circular Progress */}
                                             <svg className="h-40 w-40 transform -rotate-90">
@@ -550,14 +543,14 @@ export function EmailValidator() {
                                                 </TooltipProvider>
                                             </div>
                                         </div>
-                                    </CardContent>
-                                </Card>
-
-                                <Card className="col-span-12 md:col-span-8 h-full">
-                                    <CardHeader>
-                                        <CardTitle className="text-base font-medium">{t("details.sectionTitle")}</CardTitle>
-                                    </CardHeader>
-                                    <CardContent>
+                                    </div>
+                                </div>
+
+                                <div className="col-span-12 md:col-span-8 h-full rounded-lg border border-border bg-card">
+                                    <div className="p-6 pb-0">
+                                        <h3 className="text-base font-medium">{t("details.sectionTitle")}</h3>
+                                    </div>
+                                    <div className="p-6 pt-4">
                                         <div className="grid gap-3 sm:grid-cols-2">
                                             <ValidationItem
                                                 label={t("validation.syntaxLabel")}
@@ -594,8 +587,8 @@ export function EmailValidator() {
                                                 tooltip={t("validation.roleBasedTooltip")}
                                             />
                                         </div>
-                                    </CardContent>
-                                </Card>
+                                    </div>
+                                </div>
                             </div>
                         </motion.div>
                     )}
@@ -603,8 +596,8 @@ export function EmailValidator() {
 
                 <TabsContent value="bulk" className="space-y-4 focus-visible:outline-none">
                     {!bulkLoading && bulkResults.length === 0 && (
-                        <Card className={`max-w-2xl mx-auto mt-6 md:mt-10 border-dashed border-2 transition-all cursor-pointer ${dragActive ? "border-primary bg-primary/5 scale-[1.02]" : "bg-muted/20 hover:bg-muted/40"}`}>
-                            <CardContent className="flex flex-col items-center justify-center py-12 px-4 text-center cursor-pointer"
+                        <div className={`rounded-lg border-2 border-dashed max-w-2xl mx-auto mt-6 md:mt-10 transition-all cursor-pointer ${dragActive ? "border-primary bg-primary/5 scale-[1.02]" : "border-border bg-muted/20 hover:bg-muted/40"}`}>
+                            <div className="flex flex-col items-center justify-center py-12 px-4 text-center cursor-pointer"
                                 onClick={() => fileInputRef.current?.click()}
                                 onDragOver={onDragOver}
                                 onDrop={onDrop}
@@ -634,12 +627,12 @@ export function EmailValidator() {
                                         <IconDownload className="mr-2 h-4 w-4" /> {t("bulk.downloadTemplate")}
                                     </Button>
                                 </div>
-                            </CardContent>
-                        </Card>
+                            </div>
+                        </div>
                     )}
 
                     {bulkLoading && (
-                        <Card className="max-w-2xl mx-auto p-8 text-center">
+                        <div className="rounded-lg border border-border bg-card max-w-2xl mx-auto p-8 text-center">
                             <div className="max-w-md mx-auto space-y-6">
                                 <div className="flex flex-col items-center gap-4">
                                     <div className="relative">
@@ -651,31 +644,31 @@ export function EmailValidator() {
                                 </div>
                                 <Progress value={progress} className="h-2 w-full" />
                             </div>
-                        </Card>
+                        </div>
                     )}
 
                     {bulkResults.length > 0 && !bulkLoading && (
                         <div className="space-y-4">
                             <div className="grid gap-4 grid-cols-2 md:grid-cols-4">
-                                <Card className="p-4 flex flex-col justify-between gap-1">
+                                <div className="rounded-lg border border-border bg-card p-4 flex flex-col justify-between gap-1">
                                     <span className="text-sm font-medium text-muted-foreground">{t("stats.totalProcessed")}</span>
                                     <span className="text-2xl font-bold">{bulkStats.total}</span>
-                                </Card>
-                                <Card className="bg-green-500/10 border-green-500/20 p-4 flex flex-col justify-between">
+                                </div>
+                                <div className="rounded-lg border border-green-500/20 bg-green-500/10 p-4 flex flex-col justify-between">
                                     <span className="text-sm font-medium text-green-600 dark:text-green-400">{t("stats.valid")}</span>
                                     <span className="text-2xl font-bold text-green-700 dark:text-green-300">{bulkStats.valid}</span>
-                                </Card>
-                                <Card className="bg-yellow-500/10 border-yellow-500/20 p-4 flex flex-col justify-between">
+                                </div>
+                                <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/10 p-4 flex flex-col justify-between">
                                     <span className="text-sm font-medium text-yellow-600 dark:text-yellow-400">{t("stats.risky")}</span>
                                     <span className="text-2xl font-bold text-yellow-700 dark:text-yellow-300">{bulkStats.risky}</span>
-                                </Card>
-                                <Card className="bg-red-500/10 border-red-500/20 p-4 flex flex-col justify-between">
+                                </div>
+                                <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-4 flex flex-col justify-between">
                                     <span className="text-sm font-medium text-red-600 dark:text-red-400">{t("stats.invalid")}</span>
                                     <span className="text-2xl font-bold text-red-700 dark:text-red-300">{bulkStats.invalid}</span>
-                                </Card>
+                                </div>
                             </div>
 
-                            <Card className="overflow-hidden">
+                            <div className="rounded-lg border border-border bg-card overflow-hidden">
                                 <div className="p-4 border-b border-border/40 bg-muted/20">
                                     <div className="flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center">
                                         <h3 className="font-medium">{t("results.detailedTitle")}</h3>
@@ -796,11 +789,11 @@ export function EmailValidator() {
                                         </TableBody>
                                     </Table>
                                 </div>
-                            </Card>
+                            </div>
                         </div>
                     )}
                 </TabsContent>
             </Tabs>
-        </div>
+        </ToolShell>
     );
 }
diff --git a/apps/desktop-ui/src/components/encryption-playground/encryption-playground-layout.tsx b/apps/desktop-ui/src/components/encryption-playground/encryption-playground-layout.tsx
index 4c3c220f..518bdfb1 100644
--- a/apps/desktop-ui/src/components/encryption-playground/encryption-playground-layout.tsx
+++ b/apps/desktop-ui/src/components/encryption-playground/encryption-playground-layout.tsx
@@ -3,7 +3,6 @@
 import { useCallback, useState } 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 { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
@@ -30,9 +29,8 @@ import {
 import { cn } from '@/lib/utils';
 import { mapEncryptError, mapDecryptError } from './error-mapping';
 import { IconShieldLock } 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';
 
 const AES_BITS: AesBits[] = [128, 192, 256];
 
@@ -118,285 +116,275 @@ export function EncryptionPlaygroundLayout() {
     void copyDecFn(decryptedOut, { silent: true });
   };
 
-  return (
-    <div className="flex h-full min-h-0 w-full flex-col gap-4">
-      <RevealItem index={0} className="shrink-0">
-        <ToolPageHeader
-          icon={IconShieldLock}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT.Security}
-        />
-      </RevealItem>
+  const copyEncAction = (
+    <Button type="button" size="sm" variant="secondary" className="h-7" disabled={!bundleJson} onClick={copyEnc}>
+      {copiedEnc ? (
+        <Check className="mr-1.5 h-4 w-4 text-emerald-600" />
+      ) : (
+        <Copy className="mr-1.5 h-4 w-4" />
+      )}
+      {copiedEnc ? t('copied') : t('copyBundle')}
+    </Button>
+  );
+
+  const copyDecAction = (
+    <Button type="button" size="sm" variant="secondary" className="h-7" disabled={!decryptedOut} onClick={copyDec}>
+      {copiedDec ? (
+        <Check className="mr-1.5 h-4 w-4 text-emerald-600" />
+      ) : (
+        <Copy className="mr-1.5 h-4 w-4" />
+      )}
+      {copiedDec ? t('copied') : t('copyPlaintext')}
+    </Button>
+  );
 
-      <Tabs value={tab} onValueChange={(v) => setTab(v as 'encrypt' | 'decrypt')} className="flex min-h-0 flex-1 flex-col gap-4">
-        <TabsList className="grid w-full max-w-md grid-cols-2">
+  return (
+    <ToolShell icon={IconShieldLock} title={t('title')} description={t('subtitle')}>
+      <Tabs
+        value={tab}
+        onValueChange={(v) => setTab(v as 'encrypt' | 'decrypt')}
+        className="flex min-h-0 flex-1 flex-col gap-4"
+      >
+        <TabsList className="grid w-full max-w-md shrink-0 grid-cols-2">
           <TabsTrigger value="encrypt">{t('tabEncrypt')}</TabsTrigger>
           <TabsTrigger value="decrypt">{t('tabDecrypt')}</TabsTrigger>
         </TabsList>
 
-        <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 xl:grid-cols-2">
-          <Card className="flex flex-col gap-4 overflow-auto p-4">
-            {tab === 'encrypt' ? (
-              <>
-                <div className="space-y-3">
-                  <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                    {t('keyModeLabel')}
-                  </Label>
-                  <RadioGroup
-                    value={mode}
-                    onValueChange={(v) => setMode(v as 'raw' | 'passphrase')}
-                    className="flex flex-wrap gap-4"
-                  >
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="passphrase" id="mode-pass" />
-                      <Label htmlFor="mode-pass" className="cursor-pointer font-normal">
-                        {t('modePassphrase')}
-                      </Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="raw" id="mode-raw" />
-                      <Label htmlFor="mode-raw" className="cursor-pointer font-normal">
-                        {t('modeRawKey')}
-                      </Label>
-                    </div>
-                  </RadioGroup>
-                </div>
+        {tab === 'encrypt' ? (
+          <div className="flex min-h-0 flex-1 flex-col gap-4">
+            <div className="shrink-0 space-y-4 overflow-auto rounded-lg border border-border bg-card p-4">
+              <div className="space-y-3">
+                <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                  {t('keyModeLabel')}
+                </Label>
+                <RadioGroup
+                  value={mode}
+                  onValueChange={(v) => setMode(v as 'raw' | 'passphrase')}
+                  className="flex flex-wrap gap-4"
+                >
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="passphrase" id="mode-pass" />
+                    <Label htmlFor="mode-pass" className="cursor-pointer font-normal">
+                      {t('modePassphrase')}
+                    </Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="raw" id="mode-raw" />
+                    <Label htmlFor="mode-raw" className="cursor-pointer font-normal">
+                      {t('modeRawKey')}
+                    </Label>
+                  </div>
+                </RadioGroup>
+              </div>
 
-                {mode === 'raw' ? (
-                  <>
-                    <div className="space-y-2">
-                      <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                        {t('aesBitsLabel')}
-                      </Label>
-                      <Select value={String(aesBits)} onValueChange={(v) => setAesBits(Number(v) as AesBits)}>
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {AES_BITS.map((b) => (
-                            <SelectItem key={b} value={String(b)}>
-                              {t(`aesBits.${b}` as 'aesBits.256')}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    <div className="space-y-2">
-                      <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                        {t('rawEncodingLabel')}
-                      </Label>
-                      <Select
-                        value={rawKeyEncoding}
-                        onValueChange={(v) => setRawKeyEncoding(v as RawKeyEncoding)}
-                      >
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="auto">{t('encodingAuto')}</SelectItem>
-                          <SelectItem value="hex">{t('encodingHex')}</SelectItem>
-                          <SelectItem value="base64">{t('encodingBase64')}</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="ep-raw-key">{t('rawKeyLabel')}</Label>
-                      <Textarea
-                        id="ep-raw-key"
-                        value={rawKeyInput}
-                        onChange={(e) => setRawKeyInput(e.target.value)}
-                        placeholder={t('rawKeyPlaceholder')}
-                        className="min-h-[88px] resize-y font-mono text-sm"
-                        spellCheck={false}
-                        autoComplete="off"
-                      />
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    <div className="space-y-2">
-                      <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                        {t('aesBitsLabel')}
-                      </Label>
-                      <Select value={String(aesBits)} onValueChange={(v) => setAesBits(Number(v) as AesBits)}>
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {AES_BITS.map((b) => (
-                            <SelectItem key={b} value={String(b)}>
-                              {t(`aesBits.${b}` as 'aesBits.256')}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="ep-pass">{t('passphraseLabel')}</Label>
-                      <Input
-                        id="ep-pass"
-                        type="password"
-                        value={passphrase}
-                        onChange={(e) => setPassphrase(e.target.value)}
-                        placeholder={t('passphrasePlaceholder')}
-                        autoComplete="off"
-                        className="font-mono text-sm"
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="ep-iter">{t('pbkdf2IterLabel')}</Label>
-                      <Input
-                        id="ep-iter"
-                        type="number"
-                        min={10_000}
-                        max={2_000_000}
-                        value={pbkdf2Iter}
-                        onChange={(e) => setPbkdf2Iter(e.target.value)}
-                        className="font-mono text-sm"
-                      />
-                      <p className="text-xs text-muted-foreground">{t('pbkdf2Hint')}</p>
-                    </div>
-                  </>
-                )}
+              {mode === 'raw' ? (
+                <>
+                  <div className="space-y-2">
+                    <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                      {t('aesBitsLabel')}
+                    </Label>
+                    <Select value={String(aesBits)} onValueChange={(v) => setAesBits(Number(v) as AesBits)}>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {AES_BITS.map((b) => (
+                          <SelectItem key={b} value={String(b)}>
+                            {t(`aesBits.${b}` as 'aesBits.256')}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                      {t('rawEncodingLabel')}
+                    </Label>
+                    <Select
+                      value={rawKeyEncoding}
+                      onValueChange={(v) => setRawKeyEncoding(v as RawKeyEncoding)}
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="auto">{t('encodingAuto')}</SelectItem>
+                        <SelectItem value="hex">{t('encodingHex')}</SelectItem>
+                        <SelectItem value="base64">{t('encodingBase64')}</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="ep-raw-key">{t('rawKeyLabel')}</Label>
+                    <Textarea
+                      id="ep-raw-key"
+                      value={rawKeyInput}
+                      onChange={(e) => setRawKeyInput(e.target.value)}
+                      placeholder={t('rawKeyPlaceholder')}
+                      className="min-h-[88px] resize-y font-mono text-sm"
+                      spellCheck={false}
+                      autoComplete="off"
+                    />
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className="space-y-2">
+                    <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                      {t('aesBitsLabel')}
+                    </Label>
+                    <Select value={String(aesBits)} onValueChange={(v) => setAesBits(Number(v) as AesBits)}>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {AES_BITS.map((b) => (
+                          <SelectItem key={b} value={String(b)}>
+                            {t(`aesBits.${b}` as 'aesBits.256')}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="ep-pass">{t('passphraseLabel')}</Label>
+                    <Input
+                      id="ep-pass"
+                      type="password"
+                      value={passphrase}
+                      onChange={(e) => setPassphrase(e.target.value)}
+                      placeholder={t('passphrasePlaceholder')}
+                      autoComplete="off"
+                      className="font-mono text-sm"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="ep-iter">{t('pbkdf2IterLabel')}</Label>
+                    <Input
+                      id="ep-iter"
+                      type="number"
+                      min={10_000}
+                      max={2_000_000}
+                      value={pbkdf2Iter}
+                      onChange={(e) => setPbkdf2Iter(e.target.value)}
+                      className="font-mono text-sm"
+                    />
+                    <p className="text-xs text-muted-foreground">{t('pbkdf2Hint')}</p>
+                  </div>
+                </>
+              )}
 
-                <div className="space-y-2">
-                  <Label htmlFor="ep-plain">{t('plaintextLabel')}</Label>
-                  <Textarea
-                    id="ep-plain"
-                    value={plaintext}
-                    onChange={(e) => setPlaintext(e.target.value)}
-                    placeholder={t('plaintextPlaceholder')}
-                    className="min-h-[120px] resize-y font-mono text-sm"
-                    spellCheck
-                  />
-                </div>
+              <div className="flex flex-wrap items-center gap-3">
                 <Button type="button" onClick={() => void runEncrypt()} disabled={busy}>
                   {t('encryptButton')}
                 </Button>
                 {errEncrypt && <p className="text-sm text-destructive">{errEncrypt}</p>}
-              </>
-            ) : (
-              <>
-                <p className="text-xs text-muted-foreground">{t('decryptKeyHint')}</p>
-                <div className="space-y-2">
-                  <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                    {t('rawEncodingLabel')}
-                  </Label>
-                  <Select
-                    value={rawKeyEncoding}
-                    onValueChange={(v) => setRawKeyEncoding(v as RawKeyEncoding)}
-                  >
-                    <SelectTrigger>
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="auto">{t('encodingAuto')}</SelectItem>
-                      <SelectItem value="hex">{t('encodingHex')}</SelectItem>
-                      <SelectItem value="base64">{t('encodingBase64')}</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="ep-raw-key-dec">{t('rawKeyLabel')}</Label>
-                  <Textarea
-                    id="ep-raw-key-dec"
-                    value={rawKeyInput}
-                    onChange={(e) => setRawKeyInput(e.target.value)}
-                    placeholder={t('rawKeyPlaceholderDecrypt')}
-                    className="min-h-[72px] resize-y font-mono text-sm"
-                    spellCheck={false}
-                    autoComplete="off"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="ep-pass-dec">{t('passphraseLabel')}</Label>
-                  <Input
-                    id="ep-pass-dec"
-                    type="password"
-                    value={passphrase}
-                    onChange={(e) => setPassphrase(e.target.value)}
-                    placeholder={t('passphrasePlaceholderDecrypt')}
-                    autoComplete="off"
-                    className="font-mono text-sm"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="ep-bundle-in">{t('bundleInputLabel')}</Label>
-                  <Textarea
-                    id="ep-bundle-in"
-                    value={decryptBundleInput}
-                    onChange={(e) => setDecryptBundleInput(e.target.value)}
-                    placeholder={t('bundlePlaceholder')}
-                    className="min-h-[160px] resize-y font-mono text-xs"
-                    spellCheck={false}
-                  />
-                </div>
+              </div>
+            </div>
+
+            <ToolPanels className="lg:grid-cols-2">
+              <IOPanel label={t('plaintextLabel')}>
+                <ToolTextArea
+                  id="ep-plain"
+                  value={plaintext}
+                  onChange={(e) => setPlaintext(e.target.value)}
+                  placeholder={t('plaintextPlaceholder')}
+                  spellCheck
+                />
+              </IOPanel>
+
+              <IOPanel label={t('bundleOutputLabel')} actions={copyEncAction}>
+                <ToolTextArea
+                  readOnly
+                  value={bundleJson}
+                  placeholder={t('emptyBundleHint')}
+                  className={cn('text-xs', busy && 'opacity-60')}
+                />
+              </IOPanel>
+            </ToolPanels>
+
+            <p className="shrink-0 text-xs text-muted-foreground">{t('securityNote')}</p>
+          </div>
+        ) : (
+          <div className="flex min-h-0 flex-1 flex-col gap-4">
+            <div className="shrink-0 space-y-4 overflow-auto rounded-lg border border-border bg-card p-4">
+              <p className="text-xs text-muted-foreground">{t('decryptKeyHint')}</p>
+              <div className="space-y-2">
+                <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                  {t('rawEncodingLabel')}
+                </Label>
+                <Select
+                  value={rawKeyEncoding}
+                  onValueChange={(v) => setRawKeyEncoding(v as RawKeyEncoding)}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="auto">{t('encodingAuto')}</SelectItem>
+                    <SelectItem value="hex">{t('encodingHex')}</SelectItem>
+                    <SelectItem value="base64">{t('encodingBase64')}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="ep-raw-key-dec">{t('rawKeyLabel')}</Label>
+                <Textarea
+                  id="ep-raw-key-dec"
+                  value={rawKeyInput}
+                  onChange={(e) => setRawKeyInput(e.target.value)}
+                  placeholder={t('rawKeyPlaceholderDecrypt')}
+                  className="min-h-[72px] resize-y font-mono text-sm"
+                  spellCheck={false}
+                  autoComplete="off"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="ep-pass-dec">{t('passphraseLabel')}</Label>
+                <Input
+                  id="ep-pass-dec"
+                  type="password"
+                  value={passphrase}
+                  onChange={(e) => setPassphrase(e.target.value)}
+                  placeholder={t('passphrasePlaceholderDecrypt')}
+                  autoComplete="off"
+                  className="font-mono text-sm"
+                />
+              </div>
+              <div className="flex flex-wrap items-center gap-3">
                 <Button type="button" onClick={() => void runDecrypt()} disabled={busy}>
                   {t('decryptButton')}
                 </Button>
                 {errDecrypt && <p className="text-sm text-destructive">{errDecrypt}</p>}
-              </>
-            )}
-          </Card>
+              </div>
+            </div>
 
-          <Card className="flex flex-col gap-3 overflow-auto p-4">
-            {tab === 'encrypt' ? (
-              <>
-                <div className="flex flex-wrap items-center justify-between gap-2">
-                  <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                    {t('bundleOutputLabel')}
-                  </Label>
-                  <Button type="button" size="sm" variant="secondary" disabled={!bundleJson} onClick={copyEnc}>
-                    {copiedEnc ? (
-                      <Check className="mr-1.5 h-4 w-4 text-emerald-600" />
-                    ) : (
-                      <Copy className="mr-1.5 h-4 w-4" />
-                    )}
-                    {copiedEnc ? t('copied') : t('copyBundle')}
-                  </Button>
-                </div>
-                <pre
-                  className={cn(
-                    'min-h-[200px] flex-1 overflow-auto whitespace-pre-wrap rounded-md border bg-muted/30 p-3 font-mono text-xs break-all',
-                    busy && 'opacity-60'
-                  )}
-                >
-                  {bundleJson || <span className="text-muted-foreground">{t('emptyBundleHint')}</span>}
-                </pre>
-              </>
-            ) : (
-              <>
-                <div className="flex flex-wrap items-center justify-between gap-2">
-                  <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                    {t('plaintextOutputLabel')}
-                  </Label>
-                  <Button type="button" size="sm" variant="secondary" disabled={!decryptedOut} onClick={copyDec}>
-                    {copiedDec ? (
-                      <Check className="mr-1.5 h-4 w-4 text-emerald-600" />
-                    ) : (
-                      <Copy className="mr-1.5 h-4 w-4" />
-                    )}
-                    {copiedDec ? t('copied') : t('copyPlaintext')}
-                  </Button>
-                </div>
-                <div
-                  className={cn(
-                    'min-h-[200px] flex-1 overflow-auto rounded-md border bg-muted/30 p-3 font-mono text-sm whitespace-pre-wrap break-all',
-                    busy && 'opacity-60'
-                  )}
-                >
-                  {decryptedOut || (
-                    <span className="text-muted-foreground">{t('emptyDecryptHint')}</span>
-                  )}
-                </div>
-              </>
-            )}
-            <p className="text-xs text-muted-foreground">{t('securityNote')}</p>
-          </Card>
-        </div>
+            <ToolPanels className="lg:grid-cols-2">
+              <IOPanel label={t('bundleInputLabel')}>
+                <ToolTextArea
+                  id="ep-bundle-in"
+                  value={decryptBundleInput}
+                  onChange={(e) => setDecryptBundleInput(e.target.value)}
+                  placeholder={t('bundlePlaceholder')}
+                  className="text-xs"
+                />
+              </IOPanel>
+
+              <IOPanel label={t('plaintextOutputLabel')} actions={copyDecAction}>
+                <ToolTextArea
+                  readOnly
+                  value={decryptedOut}
+                  placeholder={t('emptyDecryptHint')}
+                  className={cn(busy && 'opacity-60')}
+                />
+              </IOPanel>
+            </ToolPanels>
+
+            <p className="shrink-0 text-xs text-muted-foreground">{t('securityNote')}</p>
+          </div>
+        )}
       </Tabs>
-    </div>
+    </ToolShell>
   );
 }
 
diff --git a/apps/desktop-ui/src/components/jwt-decoder/jwt-decoder-layout.tsx b/apps/desktop-ui/src/components/jwt-decoder/jwt-decoder-layout.tsx
index 22a4e9ee..ee8a7bb8 100644
--- a/apps/desktop-ui/src/components/jwt-decoder/jwt-decoder-layout.tsx
+++ b/apps/desktop-ui/src/components/jwt-decoder/jwt-decoder-layout.tsx
@@ -3,7 +3,6 @@
 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 { Label } from '@/components/ui/label';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { decodeJwt, type RelativeUnit } from '@/lib/jwt-decode';
@@ -14,9 +13,8 @@ import { useSearchParams } from 'next/navigation';
 import { JwtSignerLayout } from './jwt-signer-layout';
 import { SendToMenu } from '@/components/ui/send-to-menu';
 import { IconKey } 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';
 
 function CopyBtn({ text, title }: { text: string; title: string }) {
   const { isCopied: done, copyToClipboard } = useCopyToClipboard();
@@ -45,7 +43,7 @@ function JsonPanel({
   copyLabel: string;
 }) {
   return (
-    <Card className="flex flex-col overflow-hidden min-h-0">
+    <div className="flex flex-col overflow-hidden min-h-0 rounded-lg border border-border bg-card">
       <div className="flex items-center justify-between px-3 py-2 border-b border-border/50 bg-muted/30 gap-2">
         <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
           {title}
@@ -60,7 +58,7 @@ function JsonPanel({
           {content}
         </pre>
       </div>
-    </Card>
+    </div>
   );
 }
 
@@ -83,11 +81,11 @@ function JwtDecodePanel() {
 
   return (
     <div className="flex flex-col h-full gap-4 min-h-0">
-      <Card className="flex flex-col overflow-hidden shrink-0">
-        <div className="flex items-center justify-between px-3 py-2 border-b border-border/50 bg-muted/30">
-          <Label htmlFor="jwt-input" className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-            {t('tokenLabel')}
-          </Label>
+      <IOPanel
+        className="shrink-0"
+        bodyClassName="min-h-[120px]"
+        label={t('tokenLabel')}
+        actions={
           <Button
             type="button"
             variant="ghost"
@@ -98,16 +96,16 @@ function JwtDecodePanel() {
             <Trash2 className="h-3 w-3" />
             {t('clear')}
           </Button>
-        </div>
-        <textarea
+        }
+      >
+        <ToolTextArea
           id="jwt-input"
           value={input}
           onChange={(e) => setInput(e.target.value)}
           placeholder={t('placeholder')}
-          spellCheck={false}
-          className="min-h-[100px] max-h-[160px] w-full resize-y bg-transparent p-3 text-xs font-mono focus:outline-none placeholder:text-muted-foreground/50"
+          className="text-xs"
         />
-      </Card>
+      </IOPanel>
 
       {!result.ok && input.trim() && (
         <div className="flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm text-destructive">
@@ -118,9 +116,9 @@ function JwtDecodePanel() {
 
       {result.ok && (
         <div className="flex flex-col gap-4 flex-1 min-h-0">
-          <Card
+          <div
             className={cn(
-              'border p-4 space-y-3',
+              'rounded-lg border border-border bg-card p-4 space-y-3',
               result.expiry.kind === 'present' &&
                 (result.expiry.expired
                   ? 'border-destructive/40 bg-destructive/5'
@@ -192,7 +190,7 @@ function JwtDecodePanel() {
                 )}
               </div>
             )}
-          </Card>
+          </div>
 
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 flex-1 min-h-0">
             <JsonPanel title={t('panels.header')} content={result.headerFormatted} copyLabel={t('copy')} />
@@ -208,30 +206,27 @@ export function JwtDecoderLayout() {
   const t = useTranslations('JwtDecoder');
 
   return (
-    <Tabs defaultValue="decode" className="flex h-full min-h-0 w-full flex-col gap-4">
-      <RevealItem index={0} className="shrink-0">
-        <ToolPageHeader
-          icon={IconKey}
-          title={t('title')}
-          description={t.rich('subtitle', {
-            code: (chunks) => <code className="text-foreground">{chunks}</code>,
-          })}
-          accent={CATEGORY_ACCENT.Security}
-        />
-      </RevealItem>
-
-      <TabsList className="shrink-0 w-fit">
-        <TabsTrigger value="decode">{t('tabs.decode')}</TabsTrigger>
-        <TabsTrigger value="sign">{t('tabs.sign')}</TabsTrigger>
-      </TabsList>
-
-      <TabsContent value="decode" className="flex-1 min-h-0 m-0 data-[state=inactive]:hidden">
-        <JwtDecodePanel />
-      </TabsContent>
-
-      <TabsContent value="sign" className="flex-1 min-h-0 m-0 data-[state=inactive]:hidden">
-        <JwtSignerLayout />
-      </TabsContent>
-    </Tabs>
+    <ToolShell
+      icon={IconKey}
+      title={t('title')}
+      description={t.rich('subtitle', {
+        code: (chunks) => <code className="text-foreground">{chunks}</code>,
+      })}
+    >
+      <Tabs defaultValue="decode" className="flex h-full min-h-0 w-full flex-col gap-4">
+        <TabsList className="shrink-0 w-fit">
+          <TabsTrigger value="decode">{t('tabs.decode')}</TabsTrigger>
+          <TabsTrigger value="sign">{t('tabs.sign')}</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="decode" className="flex-1 min-h-0 m-0 data-[state=inactive]:hidden">
+          <JwtDecodePanel />
+        </TabsContent>
+
+        <TabsContent value="sign" className="flex-1 min-h-0 m-0 data-[state=inactive]:hidden">
+          <JwtSignerLayout />
+        </TabsContent>
+      </Tabs>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/pem-cert-decoder/pem-cert-decoder-layout.tsx b/apps/desktop-ui/src/components/pem-cert-decoder/pem-cert-decoder-layout.tsx
index 2a3adf04..b5aaec3b 100644
--- a/apps/desktop-ui/src/components/pem-cert-decoder/pem-cert-decoder-layout.tsx
+++ b/apps/desktop-ui/src/components/pem-cert-decoder/pem-cert-decoder-layout.tsx
@@ -5,15 +5,11 @@ import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import type { DecodedPemBlock } from '@/lib/pem-cert-decode';
 import { decodePemCertificateInput } from '@/lib/pem-cert-decode';
 import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
-import { cn } from '@/lib/utils';
 import { AlertCircle, Check, Copy, Trash2 } from 'lucide-react';
 import { useLocale, useTranslations } from 'next-intl';
 import { IconCertificate } 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';
 
 function CopyBtn({ text, title }: { text: string; title: string }) {
   const { isCopied, copyToClipboard } = useCopyToClipboard();
@@ -59,7 +55,7 @@ function BlockCard({
         : '';
 
   return (
-    <Card className="flex flex-col overflow-hidden min-h-0">
+    <div className="flex min-h-0 flex-col overflow-hidden rounded-lg border border-border bg-card">
       <div className="flex items-center justify-between gap-2 border-b border-border/50 bg-muted/30 px-3 py-2">
         <div className="min-w-0">
           <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
@@ -142,7 +138,7 @@ function BlockCard({
           </dd>
         </div>
       </dl>
-    </Card>
+    </div>
   );
 }
 
@@ -184,56 +180,51 @@ export function PemCertDecoderLayout() {
   }, [input]);
 
   return (
-    <div className={cn('flex flex-col h-full gap-4 min-h-0')}>
-      <RevealItem index={0} className="shrink-0">
-        <ToolPageHeader
-          icon={IconCertificate}
-          title={t('title')}
-          description={t.rich('subtitle', {
-            code: (chunks) => <code className="text-foreground">{chunks}</code>,
-          })}
-          accent={CATEGORY_ACCENT.Security}
-        />
-      </RevealItem>
-
-      <Card className="flex flex-col overflow-hidden shrink-0">
-        <div className="flex items-center justify-between px-3 py-2 border-b border-border/50 bg-muted/30">
-          <Label htmlFor="pem-input" className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-            {t('pemLabel')}
-          </Label>
-          <Button type="button" variant="ghost" size="sm" className="h-7 text-xs gap-1" onClick={() => setInput('')}>
+    <ToolShell
+      icon={IconCertificate}
+      title={t('title')}
+      description={t.rich('subtitle', {
+        code: (chunks) => <code className="text-foreground">{chunks}</code>,
+      })}
+      contentClassName="gap-4"
+    >
+      <IOPanel
+        className="h-[200px] shrink-0"
+        label={t('pemLabel')}
+        actions={
+          <Button type="button" variant="ghost" size="sm" className="h-7 gap-1 text-xs" onClick={() => setInput('')}>
             <Trash2 className="h-3 w-3" />
             {t('clear')}
           </Button>
-        </div>
-        <textarea
+        }
+      >
+        <ToolTextArea
           id="pem-input"
           value={input}
           onChange={(e) => setInput(e.target.value)}
           placeholder={t('placeholder')}
-          spellCheck={false}
-          className="min-h-[120px] max-h-[200px] w-full resize-y bg-transparent p-3 text-xs font-mono focus:outline-none placeholder:text-muted-foreground/50"
+          className="text-xs"
         />
-      </Card>
+      </IOPanel>
 
       {busy && input.trim() && (
-        <p className="text-xs text-muted-foreground px-1">{t('parsing')}</p>
+        <p className="px-1 text-xs text-muted-foreground">{t('parsing')}</p>
       )}
 
       {errorKey && input.trim() && !busy && (
         <div className="flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm text-destructive">
-          <AlertCircle className="h-4 w-4 shrink-0 mt-0.5" />
+          <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
           <p>{t(`errors.${errorKey}` as 'errors.empty')}</p>
         </div>
       )}
 
       {blocks && blocks.length > 0 && (
-        <div className="flex flex-col gap-3 min-h-0 flex-1 overflow-auto">
+        <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-auto">
           {blocks.map((b, i) => (
             <BlockCard key={`${b.kind}-${i}`} block={b} index={i} t={t} locale={locale} />
           ))}
         </div>
       )}
-    </div>
+    </ToolShell>
   );
 }