Merge tag '1.14.5_cleaned'

project was cleaned

frontend/components/admin/AiManager.tsx

@@ -32,17 +32,17 @@ export default function AiManager({
   onUpdatePrompt
 }: AiManagerProps) {
   return (
-    <section data-testid="ai-config" className="bg-surface/50 border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl space-y-6 transition-all group/ai">
-      <div className="flex items-center justify-between mb-2">
-        <div className="flex items-center gap-4">
+    <section data-testid="ai-config" className="bg-surface/50 border border-slate-800/50 rounded-[2.5rem] p-4 md:p-6 shadow-2xl space-y-4 transition-all group/ai">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
           <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
             <Brain size={20} />
           </div>
-          <h2 className="text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-black text-white tracking-tight">AI Intelligence</h2>
+          <h2 className="text-xl font-normal text-white tracking-tight">AI Intelligence</h2>
         </div>
       </div>
       
-      <div className="grid sm:grid-cols-2 gap-4">
+      <div className="grid sm:grid-cols-2 gap-3">
         {aiConfig?.providers?.map((p: any) => (
           <button
             key={p.id}
@@ -63,9 +63,9 @@ export default function AiManager({
                 {p.id === 'gemini' ? <Cpu size={16} /> : <Zap size={16} />}
               </div>
               <div>
-                <p className={cn("text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-black tracking-tight", p.active ? "text-white" : "text-secondary")}>{p.name}</p>
+                <p className={cn("text-xs font-normal tracking-tight", p.active ? "text-white" : "text-secondary")}>{p.name}</p>
                 <p className={cn(
-                  "text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-bold mt-1 px-0.5 rounded",
+                  "text-xs font-normal mt-1 px-0.5 rounded",
                   p.active 
                     ? (p.configured ? "text-emerald-200" : "text-rose-100") 
                     : (p.configured ? "text-emerald-500" : "text-rose-500")
@@ -75,7 +75,7 @@ export default function AiManager({
               </div>
             </div>
             {p.active && (
-              <div className="bg-white/20 px-2.5 py-1 rounded-full text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-black text-white tracking-tight">
+              <div className="bg-white/20 px-2.5 py-1 rounded-full text-xs font-normal text-white tracking-tight">
                 Active
               </div>
             )}
@@ -83,26 +83,26 @@ export default function AiManager({
         ))}
       </div>
 
-      <div className="bg-primary/5 border border-primary/10 rounded-[2rem] p-6 lg:p-8 xl:p-10 space-y-6">
+      <div className="bg-primary/5 border border-primary/10 rounded-[2rem] p-5 space-y-3">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <div className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-primary/10 rounded-lg text-primary"><Lock size={14} /></div>
-            <h3 className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-bold text-secondary tracking-tight">Provider Access Keys</h3>
+            <div className="p-2 bg-primary/10 rounded-lg text-primary"><Lock size={14} /></div>
+            <h3 className="text-sm font-normal text-secondary tracking-tight">Provider Access Keys</h3>
           </div>
           <button
             onClick={onSaveAiKeys}
             disabled={isSavingKeys}
             data-testid="save-settings-button"
-            className="px-6 py-2 lg:py-3 xl:py-4.5 bg-primary hover:bg-primary text-white rounded-xl text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-black transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2"
+            className="px-5 py-2 bg-primary hover:bg-primary text-white rounded-xl text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2"
           >
             {isSavingKeys ? <RotateCcw size={14} className="animate-spin" /> : <Lock size={14} />}
             {isSavingKeys ? "Storing..." : "Store API Keys"}
           </button>
         </div>
 
-        <div className="grid md:grid-cols-2 gap-6">
-          <div className="space-y-2">
-            <label className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-bold text-secondary tracking-tight ml-1">Gemini Api Key</label>
+        <div className="grid md:grid-cols-2 gap-4">
+          <div className="space-y-1">
+            <label className="text-sm font-normal text-secondary tracking-tight ml-1">Gemini Api Key</label>
             <div className="flex gap-2">
               <input
                 data-testid="ai-api-key-input"
@@ -110,14 +110,14 @@ export default function AiManager({
                 value={aiKeys.gemini}
                 onChange={(e) => setAiKeys({...aiKeys, gemini: e.target.value})}
                 placeholder={aiConfig?.providers?.find((p: any) => p.id === 'gemini')?.masked_key || "Enter Gemini Key..."}
-                className="flex-1 bg-background/80 border border-slate-800 rounded-xl py-3 lg:py-4 xl:py-5 px-4 lg:px-5 xl:px-6 text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl text-white outline-none focus:border-primary/50 transition-all placeholder:text-secondary"
+                className="flex-1 bg-background/80 border border-slate-800 rounded-xl py-1.5 px-4 text-xs text-white outline-none focus:border-primary/50 transition-all placeholder:text-secondary"
               />
               <button
                 onClick={() => onTestAiKey('gemini')}
                 disabled={isTestingKeys.gemini}
                 className={cn(
-                  "px-4 lg:px-5 xl:px-6 py-2 lg:py-3 xl:py-4 rounded-xl text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-bold tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
-                  isTestingKeys.gemini 
+                  "px-3 py-1.5 rounded-xl text-xs font-normal tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
+                  isTestingKeys.gemini
                     ? "bg-slate-800 border-slate-700 text-muted cursor-wait"
                     : "bg-primary border-primary text-white hover:bg-primary"
                 )}
@@ -127,8 +127,8 @@ export default function AiManager({
               </button>
             </div>
           </div>
-          <div className="space-y-2">
-            <label className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-bold text-secondary tracking-tight ml-1">Claude Api Key</label>
+          <div className="space-y-1">
+            <label className="text-sm font-normal text-secondary tracking-tight ml-1">Claude Api Key</label>
             <div className="flex gap-2">
               <input
                 data-testid="ai-api-key-input"
@@ -136,14 +136,14 @@ export default function AiManager({
                 value={aiKeys.claude}
                 onChange={(e) => setAiKeys({...aiKeys, claude: e.target.value})}
                 placeholder={aiConfig?.providers?.find((p: any) => p.id === 'claude')?.masked_key || "Enter Claude Key..."}
-                className="flex-1 bg-background/80 border border-slate-800 rounded-xl py-3 lg:py-4 xl:py-5 px-4 lg:px-5 xl:px-6 text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl text-white outline-none focus:border-primary/50 transition-all placeholder:text-secondary"
+                className="flex-1 bg-background/80 border border-slate-800 rounded-xl py-1.5 px-4 text-xs text-white outline-none focus:border-primary/50 transition-all placeholder:text-secondary"
               />
               <button
                 onClick={() => onTestAiKey('claude')}
                 disabled={isTestingKeys.claude}
                 className={cn(
-                  "px-4 lg:px-5 xl:px-6 py-2 lg:py-3 xl:py-4 rounded-xl text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-bold tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
-                  isTestingKeys.claude 
+                  "px-3 py-1.5 rounded-xl text-xs font-normal tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
+                  isTestingKeys.claude
                     ? "bg-slate-800 border-slate-700 text-muted cursor-wait"
                     : "bg-primary border-primary text-white hover:bg-primary"
                 )}
@@ -156,28 +156,28 @@ export default function AiManager({
         </div>
       </div>
 
-      <div className="space-y-4">
-        <div className="space-y-2">
+      <div className="space-y-2 pt-0">
+        <div className="space-y-1">
           <div className="flex items-center justify-between px-1">
-            <label className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-bold text-secondary tracking-tight">System Prompt (Vision Extraction)</label>
-            <button 
+            <label className="text-sm font-normal text-secondary tracking-tight">System Prompt (Vision Extraction)</label>
+            <button
               onClick={onUpdatePrompt}
               disabled={isSavingPrompt}
-              className="px-6 py-2 lg:py-3 xl:py-4 bg-primary hover:bg-primary text-white rounded-xl text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-black transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2"
+              className="px-5 py-1.5 bg-primary hover:bg-primary text-white rounded-xl text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2"
             >
               {isSavingPrompt ? <RotateCcw size={14} className="animate-spin" /> : <FileText size={14} />}
               {isSavingPrompt ? "Saving..." : "Save Prompt"}
             </button>
           </div>
-          <textarea 
+          <textarea
             value={aiPrompt}
             onChange={(e) => setAiPrompt(e.target.value)}
-            className="w-full bg-background/80 border border-slate-800 rounded-2xl p-6 lg:p-8 xl:p-10 text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-mono font-bold text-secondary leading-relaxed outline-none focus:border-purple-500/50 transition-all min-h-[200px] custom-scrollbar shadow-inner"
+            className="w-full bg-background/80 border border-slate-800 rounded-2xl p-4 text-xs font-mono font-normal text-secondary leading-relaxed outline-none focus:border-purple-500/50 transition-all min-h-[200px] custom-scrollbar shadow-inner"
           />
         </div>
-        <div className="bg-primary/5 border border-purple-500/10 rounded-2xl p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 flex gap-4 items-start">
-          <div className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-primary/10 rounded-lg text-purple-400 shrink-0"><Shield size={14} /></div>
-          <p className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-medium text-secondary leading-relaxed">
+        <div className="bg-primary/5 border border-purple-500/10 rounded-2xl p-4 flex gap-3 items-start">
+          <div className="p-2 bg-primary/10 rounded-lg text-purple-400 shrink-0"><Shield size={14} /></div>
+          <p className="text-xs font-medium text-secondary leading-relaxed">
             This prompt instructs the Vision AI core on label interpretation. Ensure it defines explicit mapping for technical attributes like <span className="text-purple-400">Item</span>, <span className="text-purple-400">Type</span>, and <span className="text-purple-400">Part Number</span> to avoid extraction null-pointers and ensure inventory data integrity.
           </p>
         </div>