claude-ws 0.3.97 → 0.3.99

package/src/components/agent-factory/plugin-detail-dialog.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useRef } from 'react';
+import { useTranslations } from 'next-intl';
 import {
   Dialog,
   DialogContent,
@@ -80,6 +81,8 @@ export function PluginDetailDialog({
   open,
   onOpenChange,
 }: PluginDetailDialogProps) {
+  const t = useTranslations('agentFactory');
+  const tCommon = useTranslations('common');
   const isImported = isImportedPlugin(plugin);
   const [activeTab, setActiveTab] = useState<'details' | 'files' | 'dependencies'>('details');
   const [files, setFiles] = useState<FileNode[]>([]);
@@ -170,7 +173,7 @@ export function PluginDetailDialog({
       let fileData;
       if (isImported) {
         const res = await fetch(`/api/agent-factory/plugins/${plugin.id}/files`);
-        if (!res.ok) throw new Error('Failed to load files');
+        if (!res.ok) throw new Error(t('failedToLoadFiles'));
         fileData = await res.json();
       } else {
         // For discovered plugins, use a different endpoint that reads from sourcePath
@@ -179,12 +182,12 @@ export function PluginDetailDialog({
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ sourcePath: plugin.sourcePath, type: plugin.type }),
         });
-        if (!res.ok) throw new Error('Failed to load files');
+        if (!res.ok) throw new Error(t('failedToLoadFiles'));
         fileData = await res.json();
       }
       setFiles(fileData.files || []);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load files');
+      setError(err instanceof Error ? err.message : t('failedToLoadFiles'));
     } finally {
       setLoadingFiles(false);
     }
@@ -198,7 +201,7 @@ export function PluginDetailDialog({
       if (isImported) {
         const encodedPath = filePath.split('/').map(encodeURIComponent).join('/');
         const res = await fetch(`/api/agent-factory/plugins/${plugin.id}/files/${encodedPath}`);
-        if (!res.ok) throw new Error('Failed to load file');
+        if (!res.ok) throw new Error(t('failedToLoadFile'));
         data = await res.json();
       } else {
         // For discovered plugins
@@ -210,13 +213,13 @@ export function PluginDetailDialog({
             filePath,
           }),
         });
-        if (!res.ok) throw new Error('Failed to load file');
+        if (!res.ok) throw new Error(t('failedToLoadFile'));
         data = await res.json();
       }
       setFileContent(data);
       setMobileFileModalOpen(true);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load file');
+      setError(err instanceof Error ? err.message : t('failedToLoadFile'));
     } finally {
       setLoadingContent(false);
     }
@@ -229,7 +232,7 @@ export function PluginDetailDialog({
       let data;
       if (isImported) {
         const res = await fetch(`/api/agent-factory/plugins/${plugin.id}/dependencies`);
-        if (!res.ok) throw new Error('Failed to load dependencies');
+        if (!res.ok) throw new Error(t('failedToLoadDependencies'));
         data = await res.json();
       } else {
         // For discovered plugins
@@ -238,12 +241,12 @@ export function PluginDetailDialog({
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ sourcePath: plugin.sourcePath, type: plugin.type }),
         });
-        if (!res.ok) throw new Error('Failed to load dependencies');
+        if (!res.ok) throw new Error(t('failedToLoadDependencies'));
         data = await res.json();
       }
       setDependencies(data);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load dependencies');
+      setError(err instanceof Error ? err.message : t('failedToLoadDependencies'));
     } finally {
       setLoadingDeps(false);
     }
@@ -260,7 +263,7 @@ export function PluginDetailDialog({
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ useClaude: true }),
         });
-        if (!res.ok) throw new Error('Failed to re-resolve dependencies');
+        if (!res.ok) throw new Error(t('failedToReResolveDependencies'));
         const data = await res.json();
         setDependencies(data);
       } else {
@@ -274,12 +277,12 @@ export function PluginDetailDialog({
             useClaude: true,
           }),
         });
-        if (!res.ok) throw new Error('Failed to analyze dependencies');
+        if (!res.ok) throw new Error(t('failedToAnalyzeDependencies'));
         const data = await res.json();
         setDependencies(data);
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to re-resolve dependencies');
+      setError(err instanceof Error ? err.message : t('failedToReResolveDependencies'));
     } finally {
       setReResolvingDeps(false);
     }
@@ -466,19 +469,19 @@ export function PluginDetailDialog({
               <Package className="w-6 h-6" />
               {plugin.name}
               {!isImported && (
-                <Badge variant="outline" className="text-xs">Discovered</Badge>
+                <Badge variant="outline" className="text-xs">{t('discovered')}</Badge>
               )}
             </DialogTitle>
             <DialogDescription>
-              {isImported ? 'Plugin details and files' : 'Discovered plugin details and files'}
+              {isImported ? t('pluginDetails') : t('discoveredPluginDetails')}
             </DialogDescription>
           </DialogHeader>
 
           <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'details' | 'files' | 'dependencies')} className="flex-1 flex flex-col overflow-hidden">
             <TabsList>
-              <TabsTrigger value="details">Details</TabsTrigger>
-              <TabsTrigger value="files">Files</TabsTrigger>
-              <TabsTrigger value="dependencies">Dependencies</TabsTrigger>
+              <TabsTrigger value="details">{t('details')}</TabsTrigger>
+              <TabsTrigger value="files">{t('files')}</TabsTrigger>
+              <TabsTrigger value="dependencies">{t('dependencies')}</TabsTrigger>
             </TabsList>
 
             <TabsContent value="details" className="flex-1 overflow-y-auto mt-4">
@@ -496,7 +499,7 @@ export function PluginDetailDialog({
                   <div>
                     <div className="flex items-center gap-2 mb-2">
                       <FileText className="w-4 h-4 text-muted-foreground" />
-                      <span className="text-sm font-medium">Description</span>
+                      <span className="text-sm font-medium">{t('pluginDescription')}</span>
                     </div>
                     <p className="text-sm text-muted-foreground pl-6">
                       {plugin.description}
@@ -508,7 +511,7 @@ export function PluginDetailDialog({
                 <div>
                   <div className="flex items-center gap-2 mb-2">
                     <Folder className="w-4 h-4 text-muted-foreground" />
-                    <span className="text-sm font-medium">Source Path</span>
+                    <span className="text-sm font-medium">{t('sourcePath')}</span>
                   </div>
                   <code className="text-xs bg-muted px-2 py-1 rounded block pl-6 break-all">
                     {plugin.sourcePath}
@@ -518,7 +521,7 @@ export function PluginDetailDialog({
                 {/* Storage Type - only for imported */}
                 {isImported && (
                   <div className="flex items-center gap-2">
-                    <span className="text-sm text-muted-foreground">Storage:</span>
+                    <span className="text-sm text-muted-foreground">{t('storage')}</span>
                     <Badge variant="secondary">{plugin.storageType}</Badge>
                   </div>
                 )}
@@ -528,7 +531,7 @@ export function PluginDetailDialog({
                   <div>
                     <div className="flex items-center gap-2 mb-2">
                       <FileText className="w-4 h-4 text-muted-foreground" />
-                      <span className="text-sm font-medium">Metadata</span>
+                      <span className="text-sm font-medium">{t('metadata')}</span>
                     </div>
                     <pre className="text-xs bg-muted p-3 rounded overflow-x-auto pl-6">
                       {metadataStr}
@@ -555,7 +558,7 @@ export function PluginDetailDialog({
               {/* File Tree */}
               <div className="border rounded-lg overflow-hidden">
                 <div className="p-2 border-b bg-muted/50 text-sm font-medium">
-                  Files
+                  {t('files')}
                 </div>
                 <div className="p-2 max-h-[400px] overflow-y-auto">
                   {loadingFiles ? (
@@ -565,7 +568,7 @@ export function PluginDetailDialog({
                   ) : error ? (
                     <div className="text-sm text-destructive py-4">{error}</div>
                   ) : files.length === 0 ? (
-                    <div className="text-sm text-muted-foreground py-4">No files found</div>
+                    <div className="text-sm text-muted-foreground py-4">{t('noFilesFound')}</div>
                   ) : (
                     renderFileTree(files)
                   )}
@@ -580,7 +583,7 @@ export function PluginDetailDialog({
                   <div className="text-sm text-muted-foreground">
                     {dependencies && dependencies.resolvedAt
                       ? `Last resolved: ${new Date(dependencies.resolvedAt).toLocaleString()}`
-                      : 'Dependencies'}
+                      : t('dependencies')}
                   </div>
                   <Button
                     size="sm"
@@ -592,12 +595,12 @@ export function PluginDetailDialog({
                     {reResolvingDeps ? (
                       <>
                         <Loader2 className="w-3 h-3 animate-spin" />
-                        Re-resolving...
+                        {t('reResolving')}
                       </>
                     ) : (
                       <>
                         <RefreshCw className="w-3 h-3" />
-                        Re-resolve
+                        {t('reResolve')}
                       </>
                     )}
                   </Button>
@@ -610,18 +613,18 @@ export function PluginDetailDialog({
                 ) : error ? (
                   <div className="text-sm text-destructive py-4">{error}</div>
                 ) : !dependencies ? (
-                  <div className="text-sm text-muted-foreground py-4">No dependencies found</div>
+                  <div className="text-sm text-muted-foreground py-4">{t('noDependenciesFound')}</div>
                 ) : (
                   <>
                     {/* Library Dependencies */}
                     <div>
                       <div className="flex items-center gap-2 mb-3">
                         <PackageSearch className="w-4 h-4 text-muted-foreground" />
-                        <h3 className="text-sm font-medium">Library Dependencies</h3>
+                        <h3 className="text-sm font-medium">{t('libraryDependencies')}</h3>
                         <Badge variant="secondary">{dependencies.libraries.length}</Badge>
                       </div>
                       {dependencies.libraries.length === 0 ? (
-                        <p className="text-sm text-muted-foreground pl-6">No external libraries found</p>
+                        <p className="text-sm text-muted-foreground pl-6">{t('noExternalLibraries')}</p>
                       ) : (
                         <div className="pl-6 space-y-4">
                           {/* Library badges */}
@@ -642,7 +645,7 @@ export function PluginDetailDialog({
                               <div className="mt-4">
                                 <div className="flex items-center gap-2 mb-2">
                                   <Terminal className="w-4 h-4 text-muted-foreground" />
-                                  <h4 className="text-sm font-medium">Install Scripts</h4>
+                                  <h4 className="text-sm font-medium">{t('installScripts')}</h4>
                                 </div>
 
                                 <div className="border rounded-lg overflow-hidden">
@@ -790,13 +793,13 @@ export function PluginDetailDialog({
                     <div>
                       <div className="flex items-center gap-2 mb-3">
                         <Package className="w-4 h-4 text-muted-foreground" />
-                        <h3 className="text-sm font-medium">Plugin Dependencies</h3>
+                        <h3 className="text-sm font-medium">{t('pluginDependencies')}</h3>
                         <Badge variant="secondary">
                           {dependencies.dependencyTree ? countPlugins(dependencies.dependencyTree) : dependencies.plugins.length}
                         </Badge>
                       </div>
                       {(!dependencies.dependencyTree || dependencies.dependencyTree.length === 0) && dependencies.plugins.length === 0 ? (
-                        <p className="text-sm text-muted-foreground pl-6">No plugin dependencies found</p>
+                        <p className="text-sm text-muted-foreground pl-6">{t('noPluginDependencies')}</p>
                       ) : (
                         <div className="pl-6">
                           {dependencies.dependencyTree ? (
@@ -824,7 +827,7 @@ export function PluginDetailDialog({
                         {dependencies.hasCycles && (
                           <div className="text-orange-500">
                             <AlertTriangle className="w-3 h-3 inline mr-1" />
-                            Circular dependencies detected
+                            {t('circularDependencies')}
                           </div>
                         )}
                         {dependencies.resolvedAt && (
@@ -839,7 +842,7 @@ export function PluginDetailDialog({
           </Tabs>
 
           <div className="flex justify-end pt-4 border-t">
-            <Button onClick={() => onOpenChange(false)}>Close</Button>
+            <Button onClick={() => onOpenChange(false)}>{tCommon('close')}</Button>
           </div>
         </DialogContent>
       </Dialog>
@@ -868,7 +871,7 @@ export function PluginDetailDialog({
                   onClick={handleStartEdit}
                 >
                   <Edit3 className="w-3 h-3" />
-                  Edit
+                  {tCommon('edit')}
                 </Button>
               )}
               <Button
@@ -925,7 +928,7 @@ export function PluginDetailDialog({
                       disabled={saving}
                     >
                       <XIcon className="w-3 h-3 mr-1" />
-                      Cancel
+                      {tCommon('cancel')}
                     </Button>
                     <Button
                       size="sm"
@@ -935,12 +938,12 @@ export function PluginDetailDialog({
                       {saving ? (
                         <>
                           <Loader2 className="w-3 h-3 mr-1 animate-spin" />
-                          Saving...
+                          {tCommon('saving')}
                         </>
                       ) : (
                         <>
                           <Save className="w-3 h-3 mr-1" />
-                          Save
+                          {tCommon('save')}
                         </>
                       )}
                     </Button>

package/src/components/agent-factory/plugin-form-dialog.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useMemo } from 'react';
+import { useTranslations } from 'next-intl';
 import {
   Dialog,
   DialogContent,
@@ -31,6 +32,8 @@ export function PluginFormDialog({
   onOpenChange,
   plugin,
 }: PluginFormDialogProps) {
+  const t = useTranslations('agentFactory');
+  const tCommon = useTranslations('common');
   const { createPlugin, updatePlugin, error } = useAgentFactoryStore();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -110,12 +113,12 @@ export function PluginFormDialog({
       <DialogContent className="sm:max-w-[500px]">
         <DialogHeader>
           <DialogTitle>
-            {plugin ? 'Edit Plugin' : 'Create New Plugin'}
+            {plugin ? t('editPlugin') : t('createNewPlugin')}
           </DialogTitle>
           <DialogDescription>
             {plugin
-              ? 'Update the plugin details below.'
-              : 'Add a new plugin to the Agent Factory registry.'}
+              ? t('updatePluginDescription')
+              : t('addPluginDescription')}
           </DialogDescription>
         </DialogHeader>
 
@@ -123,27 +126,27 @@ export function PluginFormDialog({
           {/* Plugin Type (only for new plugins) */}
           {!plugin && (
             <div className="space-y-2">
-              <label className="text-sm font-medium">Type</label>
+              <label className="text-sm font-medium">{t('type')}</label>
               <select
                 value={type}
                 onChange={(e) => setType(e.target.value as 'skill' | 'command' | 'agent')}
                 className="w-full border rounded-md p-2 bg-background"
                 disabled={isSubmitting}
               >
-                <option value="skill">Skill</option>
-                <option value="command">Command</option>
-                <option value="agent">Agent</option>
+                <option value="skill">{t('skill')}</option>
+                <option value="command">{t('command')}</option>
+                <option value="agent">{t('agent')}</option>
               </select>
             </div>
           )}
 
           {/* Name */}
           <div className="space-y-2">
-            <label className="text-sm font-medium">Name *</label>
+            <label className="text-sm font-medium">{t('name')} *</label>
             <Input
               value={name}
               onChange={(e) => setName(e.target.value)}
-              placeholder="Plugin name"
+              placeholder={t('pluginName')}
               disabled={isSubmitting}
               required
             />
@@ -151,11 +154,11 @@ export function PluginFormDialog({
 
           {/* Description */}
           <div className="space-y-2">
-            <label className="text-sm font-medium">Description</label>
+            <label className="text-sm font-medium">{t('pluginDescription')}</label>
             <Input
               value={description}
               onChange={(e) => setDescription(e.target.value)}
-              placeholder="Brief description of the plugin"
+              placeholder={t('pluginDescription')}
               disabled={isSubmitting}
             />
           </div>
@@ -163,7 +166,7 @@ export function PluginFormDialog({
           {/* Source Path - show for editing, read-only preview for new */}
           {plugin ? (
             <div className="space-y-2">
-              <label className="text-sm font-medium">Source Path *</label>
+              <label className="text-sm font-medium">{t('sourcePath')} *</label>
               <Input
                 value={sourcePath}
                 onChange={(e) => setSourcePath(e.target.value)}
@@ -174,27 +177,27 @@ export function PluginFormDialog({
             </div>
           ) : (
             <div className="space-y-2">
-              <label className="text-sm font-medium">Source Path</label>
+              <label className="text-sm font-medium">{t('sourcePath')}</label>
               <div className="text-sm text-muted-foreground bg-muted/50 p-2 rounded border">
                 {previewPath}
               </div>
-              <p className="text-xs text-muted-foreground">Path will be auto-generated based on plugin type and name</p>
+              <p className="text-xs text-muted-foreground">{t('pathAutoGenerated')}</p>
             </div>
           )}
 
           {/* Storage Type (only for new plugins) */}
           {!plugin && (
             <div className="space-y-2">
-              <label className="text-sm font-medium">Storage Type</label>
+              <label className="text-sm font-medium">{t('storageType')}</label>
               <select
                 value={storageType}
                 onChange={(e) => setStorageType(e.target.value as 'local' | 'imported' | 'external')}
                 className="w-full border rounded-md p-2 bg-background"
                 disabled={isSubmitting}
               >
-                <option value="local">Local</option>
-                <option value="imported">Imported</option>
-                <option value="external">External</option>
+                <option value="local">{t('local')}</option>
+                <option value="imported">{t('imported')}</option>
+                <option value="external">{t('external')}</option>
               </select>
             </div>
           )}
@@ -214,10 +217,10 @@ export function PluginFormDialog({
               onClick={() => onOpenChange(false)}
               disabled={isSubmitting}
             >
-              Cancel
+              {tCommon('cancel')}
             </Button>
             <Button type="submit" disabled={isSubmitting || !name.trim()}>
-              {isSubmitting ? 'Saving...' : plugin ? 'Update' : 'Create'}
+              {isSubmitting ? tCommon('saving') : plugin ? t('update') : tCommon('create')}
             </Button>
           </div>
         </form>

package/src/components/agent-factory/plugin-list.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
 import { Package, Plus, RefreshCw, Search, Trash2, Edit, X, Upload } from 'lucide-react';
 import { useAgentFactoryStore } from '@/stores/agent-factory-store';
 import { useAgentFactoryUIStore } from '@/stores/agent-factory-ui-store';
@@ -13,6 +14,8 @@ import { DiscoveryDialog } from './discovery-dialog';
 import { UploadDialog } from './upload-dialog';
 
 export function PluginList() {
+  const t = useTranslations('agentFactory');
+  const tCommon = useTranslations('common');
   const { plugins, loading, error, fetchPlugins, deletePlugin } = useAgentFactoryStore();
   const { setOpen: setAgentFactoryOpen } = useAgentFactoryUIStore();
   const [filter, setFilter] = useState<'all' | 'skill' | 'command' | 'agent' | 'agent_set'>('all');
@@ -43,7 +46,7 @@ export function PluginList() {
   });
 
   const handleDelete = async (id: string) => {
-    if (!confirm('Are you sure you want to delete this plugin?')) return;
+    if (!confirm(t('deletePluginConfirm'))) return;
     try {
       await deletePlugin(id);
     } catch (error) {
@@ -82,7 +85,7 @@ export function PluginList() {
         <div className="flex items-center justify-between sm:justify-normal gap-3">
           <div className="flex items-center gap-3">
             <Package className="w-6 h-6" />
-            <h1 className="text-2xl font-bold">Agent Factory</h1>
+            <h1 className="text-2xl font-bold">{t('title')}</h1>
           </div>
           <Button variant="ghost" size="icon" className="sm:hidden" onClick={() => setAgentFactoryOpen(false)}>
             <X className="w-5 h-5" />
@@ -91,19 +94,19 @@ export function PluginList() {
         <div className="flex flex-wrap gap-2 justify-end">
           <Button variant="outline" size="sm" onClick={() => fetchPlugins()}>
             <RefreshCw className="w-4 h-4 mr-2" />
-            Refresh
+            {tCommon('refresh')}
           </Button>
           <Button variant="outline" size="sm" onClick={() => setDiscoveryOpen(true)}>
             <Package className="w-4 h-4 mr-2" />
-            Discover
+            {tCommon('discover')}
           </Button>
           <Button variant="outline" size="sm" onClick={() => setUploadOpen(true)}>
             <Upload className="w-4 h-4 mr-2" />
-            Upload
+            {tCommon('upload')}
           </Button>
           <Button size="sm" onClick={() => setCreateFormOpen(true)}>
             <Plus className="w-4 h-4 mr-2" />
-            New
+            {tCommon('new')}
           </Button>
           <Button variant="ghost" size="icon" className="hidden sm:flex" onClick={() => setAgentFactoryOpen(false)}>
             <X className="w-5 h-5" />
@@ -113,7 +116,7 @@ export function PluginList() {
 
       {/* Description */}
       <p className="text-sm text-muted-foreground mb-6">
-        This is your plugin pool. To install plugins to a specific project, go to <strong>Project Settings</strong> and select plugins to install.
+        {t('description')}
       </p>
 
       {/* Filters and Search */}
@@ -129,14 +132,14 @@ export function PluginList() {
                   : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
               }`}
             >
-              {type === 'all' ? 'All' : type === 'agent_set' ? 'Agent Sets' : `${type}s`}
+              {type === 'all' ? t('all') : type === 'agent_set' ? t('agentSets') : type === 'skill' ? t('skills') : type === 'command' ? t('commands') : t('agents')}
             </button>
           ))}
         </div>
         <div className="flex-1 relative">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
           <Input
-            placeholder="Search plugins..."
+            placeholder={t('searchPlugins')}
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             className="pl-10"
@@ -154,7 +157,7 @@ export function PluginList() {
       {/* Loading */}
       {loading && (
         <div className="text-center py-12 text-muted-foreground">
-          Loading plugins...
+          {t('loadingPlugins')}
         </div>
       )}
 
@@ -178,7 +181,7 @@ export function PluginList() {
                 </span>
               </div>
               <p className="text-sm text-muted-foreground line-clamp-2 mb-4">
-                {plugin.description || 'No description'}
+                {plugin.description || t('noDescription')}
               </p>
               <div className="flex items-center gap-2 text-xs text-muted-foreground">
                 <span className="capitalize">{plugin.storageType}</span>
@@ -215,25 +218,25 @@ export function PluginList() {
       {!loading && filteredPlugins.length === 0 && (
         <div className="text-center py-12">
           <Package className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
-          <h3 className="text-lg font-semibold mb-2">No plugins found</h3>
+          <h3 className="text-lg font-semibold mb-2">{t('noPluginsFound')}</h3>
           <p className="text-muted-foreground mb-4">
             {searchQuery || filter !== 'all'
-              ? 'Try adjusting your filters or search query'
-              : 'Get started by discovering existing plugins or creating a new one'}
+              ? t('adjustFilters')
+              : t('getStartedDiscover')}
           </p>
           {!searchQuery && filter === 'all' && (
             <div className="flex justify-center gap-2">
               <Button variant="outline" onClick={() => setDiscoveryOpen(true)}>
                 <Package className="w-4 h-4 mr-2" />
-                Discover Plugins
+                {tCommon('discover')}
               </Button>
               <Button variant="outline" onClick={() => setUploadOpen(true)}>
                 <Upload className="w-4 h-4 mr-2" />
-                Upload
+                {tCommon('upload')}
               </Button>
               <Button onClick={() => setCreateFormOpen(true)}>
                 <Plus className="w-4 h-4 mr-2" />
-                New
+                {tCommon('new')}
               </Button>
             </div>
           )}