fix(clients): resolve WRAITH-Vault TypeScript errors causing white screen

The WRAITH-Vault application was showing a white/blank screen because
the frontend build was failing due to TypeScript errors. This commit
fixes all TypeScript issues:

- Remove unused React imports (use Fragment from 'react' instead)
- Fix createSecret function signature to match secretStore
- Remove non-existent rotateSecret call from SecretDetail
- Fix unused variable warnings (clearError, startTime, sessionId)
- Update React.Fragment to Fragment in JSX

Root Cause: TypeScript errors prevented successful build, resulting
in no JavaScript bundle being generated.

All 8 client frontends now build successfully.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: doublegate

clients/wraith-vault/frontend/src/App.tsx

@@ -1,7 +1,7 @@
 // WRAITH Vault - Main Application Component
 // Distributed Secret Storage with Shamir's Secret Sharing
 
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { SecretList } from "./components/SecretList";
 import { GuardianList } from "./components/GuardianList";
 import { RecoveryWizard } from "./components/RecoveryWizard";

clients/wraith-vault/frontend/src/components/AddGuardianModal.tsx

@@ -1,7 +1,7 @@
 // AddGuardianModal Component for WRAITH Vault
 // Modal for adding new guardians to the vault
 
-import React, { useState } from "react";
+import { useState } from "react";
 import { useGuardianStore } from "../stores/guardianStore";
 
 interface AddGuardianModalProps {
@@ -10,7 +10,7 @@ interface AddGuardianModalProps {
 }
 
 export function AddGuardianModal({ onClose, onAdded }: AddGuardianModalProps) {
-  const { addGuardian, loading, error, clearError } = useGuardianStore();
+  const { addGuardian, loading, error } = useGuardianStore();
 
   const [name, setName] = useState("");
   const [peerId, setPeerId] = useState("");

clients/wraith-vault/frontend/src/components/CreateSecretModal.tsx

@@ -1,10 +1,10 @@
 // CreateSecretModal Component for WRAITH Vault
 // Modal for creating new secrets with Shamir configuration
 
-import React, { useState, useEffect } from "react";
+import { useState, useEffect, Fragment } from "react";
 import { useSecretStore } from "../stores/secretStore";
 import { useGuardianStore } from "../stores/guardianStore";
-import type { SecretType, Guardian } from "../types";
+import type { SecretType } from "../types";
 
 interface CreateSecretModalProps {
   onClose: () => void;
@@ -24,7 +24,7 @@ const SECRET_TYPES: { value: SecretType; label: string; description: string }[]
 ];
 
 export function CreateSecretModal({ onClose, onCreated }: CreateSecretModalProps) {
-  const { createSecret, loading, error, clearError } = useSecretStore();
+  const { createSecret, loading, error } = useSecretStore();
   const { guardians, availableGuardians, loadGuardians, loadAvailableGuardians } = useGuardianStore();
 
   const [step, setStep] = useState<"details" | "config" | "guardians" | "confirm">("details");
@@ -145,13 +145,13 @@ export function CreateSecretModal({ onClose, onCreated }: CreateSecretModalProps
 
       await createSecret(
         name,
-        description || null,
-        Array.from(secretBytes),
+        secretBytes,
         secretType,
+        description || null,
         threshold,
         totalShares,
-        selectedGuardianIds,
-        tagList
+        tagList,
+        null // password
       );
 
       onCreated();
@@ -186,7 +186,7 @@ export function CreateSecretModal({ onClose, onCreated }: CreateSecretModalProps
                 const isPast = steps.indexOf(step) > index;
 
                 return (
-                  <React.Fragment key={label}>
+                  <Fragment key={label}>
                     <div
                       className={`flex items-center gap-2 ${
                         isActive
@@ -216,7 +216,7 @@ export function CreateSecretModal({ onClose, onCreated }: CreateSecretModalProps
                         }`}
                       />
                     )}
-                  </React.Fragment>
+                  </Fragment>
                 );
               }
             )}

clients/wraith-vault/frontend/src/components/GuardianList.tsx

@@ -1,6 +1,7 @@
 // GuardianList Component for WRAITH Vault
 
-import React, { useEffect, useState } from "react";
+import type { MouseEvent } from "react";
+import { useEffect, useState } from "react";
 import { useGuardianStore } from "../stores/guardianStore";
 import type { Guardian, GuardianStatus, TrustLevel } from "../types";
 
@@ -69,14 +70,13 @@ export function GuardianList({
   };
 
   const handleHealthCheck = async (
-    e: React.MouseEvent,
+    e: MouseEvent,
     guardian: Guardian
   ) => {
     e.stopPropagation();
     setCheckingHealth(guardian.id);
 
     // Simulate health check (in real implementation, this would ping the guardian)
-    const startTime = Date.now();
     const success = Math.random() > 0.3; // 70% success rate for demo
     const responseTime = success ? Math.floor(Math.random() * 200) + 50 : null;
     const errorMsg = success ? null : "Connection timeout";

clients/wraith-vault/frontend/src/components/RecoveryWizard.tsx

@@ -1,11 +1,11 @@
 // RecoveryWizard Component for WRAITH Vault
 // Multi-step wizard for recovering secrets from guardian shards
 
-import React, { useState, useEffect } from "react";
+import { useState, useEffect, Fragment } from "react";
 import { useRecoveryStore } from "../stores/recoveryStore";
 import { useGuardianStore } from "../stores/guardianStore";
 import { useSecretStore } from "../stores/secretStore";
-import type { SecretInfo, Guardian, EncryptedShard, RecoveryProgress } from "../types";
+import type { SecretInfo, Guardian, EncryptedShard } from "../types";
 import * as tauri from "../lib/tauri";
 
 type WizardStep = "select-secret" | "select-guardians" | "collect-shards" | "recovering" | "complete" | "error";
@@ -32,7 +32,6 @@ export function RecoveryWizard({
     startRecovery,
     addShard,
     completeRecovery,
-    getProgress,
     cancelRecovery,
     clearResult,
     clearError,
@@ -96,7 +95,7 @@ export function RecoveryWizard({
     if (!selectedSecret) return;
 
     try {
-      const sessionId = await startRecovery(selectedSecret.id);
+      await startRecovery(selectedSecret.id);
       setCurrentGuardianIndex(0);
       setStep("collect-shards");
     } catch (err) {
@@ -249,7 +248,7 @@ export function RecoveryWizard({
                 step === "complete";
 
               return (
-                <React.Fragment key={label}>
+                <Fragment key={label}>
                   <div
                     className={`flex items-center gap-2 ${
                       isActive
@@ -279,7 +278,7 @@ export function RecoveryWizard({
                       }`}
                     />
                   )}
-                </React.Fragment>
+                </Fragment>
               );
             }
           )}

clients/wraith-vault/frontend/src/components/SecretDetail.tsx

@@ -1,7 +1,7 @@
 // SecretDetail Component for WRAITH Vault
 // Displays detailed information about a selected secret
 
-import React, { useState } from "react";
+import { useState } from "react";
 import { useSecretStore } from "../stores/secretStore";
 import type { SecretInfo, SecretType } from "../types";
 
@@ -36,7 +36,7 @@ interface SecretDetailProps {
 }
 
 export function SecretDetail({ secret, onRecover, onClose }: SecretDetailProps) {
-  const { rotateSecret, deleteSecret, loading, error } = useSecretStore();
+  const { deleteSecret, loading, error } = useSecretStore();
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [showRotateConfirm, setShowRotateConfirm] = useState(false);
 
@@ -48,9 +48,9 @@ export function SecretDetail({ secret, onRecover, onClose }: SecretDetailProps)
 
   const handleRotate = async () => {
     try {
-      // In a real implementation, you would prompt for the new secret data
-      // For now, we'll just show a placeholder
-      await rotateSecret(secret.id, []);
+      // In a real implementation, this would trigger key rotation via Tauri
+      // For now, just close the confirmation dialog
+      // TODO: Implement key rotation when backend support is added
       setShowRotateConfirm(false);
     } catch (err) {
       console.error("Failed to rotate secret:", err);

clients/wraith-vault/frontend/src/components/SecretList.tsx

@@ -1,6 +1,6 @@
 // SecretList Component for WRAITH Vault
 
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useSecretStore } from "../stores/secretStore";
 import type { SecretInfo, SecretType } from "../types";
 

clients/wraith-vault/frontend/src/components/ShardStatus.tsx

@@ -1,7 +1,7 @@
 // ShardStatus Component for WRAITH Vault
 // Displays the distribution status of shards across guardians
 
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import type { SecretInfo, Guardian, ShardAssignment, DistributionStatus } from "../types";
 import * as tauri from "../lib/tauri";