@kyro-cms/admin 0.12.3 → 0.12.5

package/src/components/WebhookManager.tsx

@@ -17,12 +17,14 @@ import {
   ExternalLink,
   Zap,
   Shield,
+  Activity,
+  XCircle,
 } from "./ui/icons";
 import { useUIStore, toast } from "../lib/stores";
 import { Modal, ModalContent, ModalActions } from "./ui/Modal";
 import { Badge } from "./ui/Badge";
 import { PageHeader } from "./ui/PageHeader";
-
+import { useTranslation } from "react-i18next";
 
 interface WebhookConfigField {
   name: string;
@@ -52,17 +54,29 @@ interface WebhookItem {
   action?: string;
   config?: Record<string, string>;
   lastTriggered?: string;
+  lastError?: string;
+  createdAt: string;
+}
+
+interface WebhookDelivery {
+  id: string;
+  webhookId: string;
+  event: string;
+  status: "pending" | "success" | "failed" | "retrying";
+  responseStatus?: number;
+  responseBody?: string;
+  error?: string;
+  duration?: number;
   createdAt: string;
 }
 
 const ACTION_ICONS: Record<string, string> = {
   generic: "🔗",
-  "github-dispatch": "⚙️",
-  "dokploy-deploy": "🚀",
-  "coolify-deploy": "🎯",
+  "github-push": "⚙️",
 };
 
 export function WebhookManager() {
+    const { t } = useTranslation();
   const {
     items: webhooks,
     loading,
@@ -97,6 +111,11 @@ export function WebhookManager() {
   });
   const [createError, setCreateError] = useState("");
 
+  const [showHistoryModal, setShowHistoryModal] = useState(false);
+  const [selectedWebhookId, setSelectedWebhookId] = useState<string | null>(null);
+  const [deliveryHistory, setDeliveryHistory] = useState<WebhookDelivery[]>([]);
+  const [loadingHistory, setLoadingHistory] = useState(false);
+
   useEffect(() => {
     loadActions();
   }, []);
@@ -168,9 +187,10 @@ export function WebhookManager() {
       await create(formData);
       resetCreateModal();
       toast.success(`Webhook created: ${formData.name}`);
-    } catch (e) {
-      setCreateError("Failed to create webhook");
-      toast.error("Failed to create webhook");
+    } catch (e: any) {
+      const errorMsg = e.message || "Failed to create webhook";
+      setCreateError(errorMsg);
+      toast.error(errorMsg);
     }
   };
 
@@ -204,6 +224,21 @@ export function WebhookManager() {
     }
   };
 
+  const handleViewHistory = async (id: string) => {
+    setSelectedWebhookId(id);
+    setShowHistoryModal(true);
+    setLoadingHistory(true);
+    try {
+      const data = await apiGet<{ docs: WebhookDelivery[] }>(`/api/webhooks/${id}/history`);
+      setDeliveryHistory(data.docs || []);
+    } catch (e) {
+      console.error("Failed to load history:", e);
+      toast.error("Failed to load delivery history");
+    } finally {
+      setLoadingHistory(false);
+    }
+  };
+
   const eventOptions = [
     {
       label: "Create",
@@ -231,7 +266,7 @@ export function WebhookManager() {
   return (
     <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
       <PageHeader
-        title="Webhooks"
+        title={t("tooltips.webhooks", { defaultValue: "Webhooks" })}
         description="Get notified when your content changes."
         icon={Webhook}
         actions={[
@@ -359,16 +394,34 @@ export function WebhookManager() {
                             ? `Last triggered ${new Date(webhook.lastTriggered).toLocaleDateString()}`
                             : "Never triggered"}
                         </div>
+                        {webhook.lastError && (
+                          <div className="text-[10px] text-red-500/80 flex items-center gap-1.5 mt-1">
+                            <XCircle className="w-3 h-3" />
+                            <span className="truncate max-w-[150px]" title={webhook.lastError}>
+                              {webhook.lastError}
+                            </span>
+                          </div>
+                        )}
                       </div>
                     </div>
                   </div>
 
                   <div className="flex items-center gap-1.5 lg:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                    <button
+                      type="button"
+                      onClick={() => handleViewHistory(webhook.id)}
+                      className="p-2 rounded-lg border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)] transition-colors flex items-center gap-1.5"
+                      title={t("tooltips.viewDeliveryHistory", { defaultValue: "View delivery history" })}
+                    >
+                      <Activity className="w-3.5 h-3.5" />
+                      <span className="text-[11px] font-medium hidden sm:inline">History</span>
+                    </button>
+
                     <button
                       type="button"
                       onClick={() => handleTest(webhook.id)}
                       className="p-2 rounded-lg border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)] transition-colors flex items-center gap-1.5"
-                      title="Send test request"
+                      title={t("tooltips.sendTestRequest", { defaultValue: "Send test request" })}
                     >
                       <Send className="w-3.5 h-3.5" />
                       <span className="text-[11px] font-medium">Test</span>
@@ -387,7 +440,7 @@ export function WebhookManager() {
                       type="button"
                       onClick={() => remove(webhook.id, "Webhook")}
                       className="p-2 rounded-lg border border-[var(--kyro-border)] hover:border-red-500/30 hover:bg-red-500/5 transition-colors"
-                      title="Delete"
+                      title={t("tooltips.delete", { defaultValue: "Delete" })}
                     >
                       <Trash2 className="w-3.5 h-3.5 text-red-500/50 hover:text-red-500" />
                     </button>
@@ -403,7 +456,7 @@ export function WebhookManager() {
       <Modal
         open={showCreateModal && step === "action"}
         onClose={() => setShowCreateModal(false)}
-        title="New webhook"
+        title={t("tooltips.newWebhook", { defaultValue: "New webhook" })}
       >
         <ModalContent>
           <div className="space-y-4">
@@ -418,7 +471,7 @@ export function WebhookManager() {
                     type="button"
                     key={key}
                     onClick={() => handleActionSelect(key)}
-                    className="flex flex-col items-start p-4 rounded-xl border border-[var(--kyro-border)] bg-[var(--kyro-surface)] hover:border-[var(--kyro-primary)]/40 transition-all text-left group"
+                    className="flex flex-col items-start p-4 rounded-md border border-[var(--kyro-border)] bg-[var(--kyro-surface)] hover:border-[var(--kyro-primary)]/40 transition-all text-left group"
                   >
                     <div className="text-lg mb-2">{ACTION_ICONS[key] || "🔗"}</div>
                     <h3 className="text-sm font-medium mb-0.5 group-hover:text-[var(--kyro-primary)] transition-colors">
@@ -500,7 +553,7 @@ export function WebhookManager() {
                       type="text"
                       value={formData.secret}
                       onChange={(e) => setFormData({ ...formData, secret: e.target.value })}
-                      placeholder="Optional"
+                      placeholder={t("fields.optional", { defaultValue: "Optional" })}
                       className="w-full px-3 py-2.5 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-lg text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
                     />
                   </div>
@@ -587,7 +640,7 @@ export function WebhookManager() {
       <Modal
         open={showTestModal}
         onClose={() => setShowTestModal(false)}
-        title="Test webhook"
+        title={t("tooltips.testWebhook", { defaultValue: "Test webhook" })}
       >
         <ModalContent>
           <div className="p-6 rounded-xl bg-[var(--kyro-surface)] border border-[var(--kyro-border)] text-center">
@@ -629,7 +682,7 @@ export function WebhookManager() {
       <Modal
         open={showHelpModal}
         onClose={() => setShowHelpModal(false)}
-        title="How webhooks work"
+        title={t("tooltips.howWebhooksWork", { defaultValue: "How webhooks work" })}
       >
         <ModalContent>
           <div className="space-y-6">
@@ -680,6 +733,81 @@ export function WebhookManager() {
           </button>
         </ModalActions>
       </Modal>
+
+      {/* History Modal */}
+      <Modal
+        open={showHistoryModal}
+        onClose={() => setShowHistoryModal(false)}
+        title={t("tooltips.deliveryHistory", { defaultValue: "Delivery History" })}
+      >
+        <ModalContent>
+          <div className="space-y-4">
+            {loadingHistory ? (
+              <div className="flex items-center justify-center p-12 opacity-50">
+                <RefreshCw className="w-5 h-5 animate-spin text-[var(--kyro-primary)]" />
+              </div>
+            ) : deliveryHistory.length === 0 ? (
+              <div className="text-center p-8 text-[var(--kyro-text-secondary)] opacity-60 text-sm">
+                No delivery history available for this webhook.
+              </div>
+            ) : (
+              <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-1">
+                {deliveryHistory.map((delivery) => (
+                  <div key={delivery.id} className="p-4 rounded-md border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-sm">
+                    <div className="flex items-center justify-between mb-2">
+                      <div className="flex items-center gap-2">
+                        {delivery.status === "success" ? (
+                          <CheckCircle2 className="w-4 h-4 text-green-500" />
+                        ) : (
+                          <XCircle className="w-4 h-4 text-red-500" />
+                        )}
+                        <span className="font-medium">{delivery.event}</span>
+                      </div>
+                      <span className="text-[10px] text-[var(--kyro-text-secondary)] opacity-50">
+                        {new Date(delivery.createdAt).toLocaleString()}
+                      </span>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-4 text-xs text-[var(--kyro-text-secondary)] mb-3">
+                      <div>
+                        <span className="opacity-50">Status: </span>
+                        <span className={`font-medium ${delivery.status === "success" ? "text-green-500" : "text-red-500"}`}>
+                          {delivery.responseStatus || delivery.status}
+                        </span>
+                      </div>
+                      <div>
+                        <span className="opacity-50">Duration: </span>
+                        {delivery.duration ? `${delivery.duration}ms` : "-"}
+                      </div>
+                    </div>
+
+                    {delivery.error && (
+                      <div className="text-xs text-red-500 bg-red-500/5 p-2 rounded border border-red-500/10 font-mono break-all mb-2">
+                        {delivery.error}
+                      </div>
+                    )}
+
+                    {delivery.responseBody && (
+                      <div className="text-[10px] font-mono bg-[var(--kyro-bg)] p-2 rounded border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] opacity-70 max-h-24 overflow-y-auto break-all">
+                        {delivery.responseBody}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </ModalContent>
+        <ModalActions>
+          <button
+            type="button"
+            onClick={() => setShowHistoryModal(false)}
+            className="w-full py-2.5 rounded-lg text-sm font-medium bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] hover:bg-[var(--kyro-surface)] transition-colors"
+          >
+            Close
+          </button>
+        </ModalActions>
+      </Modal>
     </div>
   );
 }

package/src/components/autoform/AutoFormApiView.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useAutoFormStore } from "../../lib/autoform-store";
+import { useTranslation } from "react-i18next";
 
 interface AutoFormApiViewProps {
   collectionSlug?: string;
@@ -10,6 +11,7 @@ export function AutoFormApiView({
   collectionSlug,
   globalSlug,
 }: AutoFormApiViewProps) {
+    const { t } = useTranslation();
   const { formData } = useAutoFormStore();
 
   return (
@@ -57,7 +59,7 @@ export function AutoFormApiView({
                         navigator.clipboard.writeText(String(formData.id));
                       }}
                       className="p-1.5 hover:bg-[var(--kyro-bg-secondary)] rounded-lg transition-colors text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
-                      title="Copy ID"
+                      title={t("tooltips.copyId", { defaultValue: "Copy ID" })}
                     >
                       <svg
                         width="14"

package/src/components/autoform/AutoFormEditView.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import type { CollectionConfig, GlobalConfig, Field } from "@kyro-cms/core/client";
 import { useAutoFormStore } from "../../lib/autoform-store";
+import { useTranslation } from "react-i18next";
 
 interface AutoFormEditViewProps {
   config: CollectionConfig | GlobalConfig;
@@ -15,7 +16,8 @@ export function AutoFormEditView({
   collectionSlug,
   renderField,
 }: AutoFormEditViewProps) {
-  const { showPreview, sidebarCollapsed, formData } = useAutoFormStore();
+    const { t } = useTranslation();
+  const { showPreview, sidebarCollapsed, formData, previewUrl } = useAutoFormStore();
 
   if (layout === "single") {
     return (
@@ -65,9 +67,9 @@ export function AutoFormEditView({
               </span>
             </div>
             <iframe
-              src={`/${collectionSlug}/${formData.slug || formData.id}?preview=true`}
+              src={previewUrl || ""}
               className="w-full h-full border-none"
-              title="Live Preview"
+              title={t("tooltips.livePreview", { defaultValue: "Live Preview" })}
             />
             <div className="absolute inset-0 bg-transparent pointer-events-none border-[12px] border-[var(--kyro-surface)] rounded-3xl" />
           </div>

package/src/components/autoform/AutoFormHeader.tsx

@@ -5,6 +5,7 @@ import { SplitButton } from "../ui/SplitButton";
 import type { SplitButtonStatus } from "../ui/SplitButton";
 import { useAutoFormStore } from "../../lib/autoform-store";
 import { adminPath as ADMIN_BASE } from "../../lib/paths";
+import { useTranslation } from "react-i18next";
 
 type View = "edit" | "version" | "api";
 
@@ -41,6 +42,7 @@ export function AutoFormHeader({
   handleSchedulePublish,
   handleConflictOverride,
 }: AutoFormHeaderProps) {
+    const { t } = useTranslation();
   const [now, setNow] = useState(Date.now());
   const [showSchedulePicker, setShowSchedulePicker] = useState(false);
   const scheduleRef = useRef<HTMLDivElement>(null);
@@ -194,7 +196,7 @@ export function AutoFormHeader({
         <button
           type="button"
           className="kyro-btn p-2 md:p-2.5 rounded-xl border border-[var(--kyro-border)] hover:bg-[var(--kyro-bg-secondary)] transition-all"
-          title="More actions"
+          title={t("tooltips.moreActions", { defaultValue: "More actions" })}
         >
           <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
             <circle cx="12" cy="5" r="1.5" />
@@ -377,8 +379,7 @@ export function AutoFormHeader({
               <button
                 type="button"
                 onClick={() => {
-                  setFormData(lastSavedData);
-                  markSaved();
+                  useAutoFormStore.getState().loadDocument(lastSavedData, lastSavedData);
                 }}
                 className="text-[var(--kyro-primary)] text-[10px] font-medium hover:underline"
               >
@@ -424,8 +425,7 @@ export function AutoFormHeader({
                 <button
                   type="button"
                   onClick={() => {
-                    setFormData(lastSavedData);
-                    markSaved();
+                    useAutoFormStore.getState().loadDocument(lastSavedData, lastSavedData);
                   }}
                   className="text-[var(--kyro-primary)] hover:underline"
                 >
@@ -475,7 +475,7 @@ export function AutoFormHeader({
               type="button"
               onClick={() => setShowPreview(!showPreview)}
               className={`kyro-btn p-2.5 rounded-xl transition-all flex items-center gap-2 ${showPreview ? "shadow-lg" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)]"}`}
-              title="Live Preview"
+              title={t("tooltips.livePreview", { defaultValue: "Live Preview" })}
             >
               <ExternalLink className="w-4 h-4" />
               {showPreview && (

package/src/components/blocks/AccordionBlock.tsx

@@ -5,11 +5,13 @@ import {
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "../ui/icons";
 import { AccordionField } from "../fields/AccordionField";
+import { useTranslation } from "react-i18next";
 
 export const AccordionBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
+    const { t } = useTranslation();
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
@@ -36,7 +38,7 @@ export const AccordionBlock: React.FC<{ block: Record<string, unknown>; index: n
             type="button"
             onClick={() => moveBlock(block.id, "up")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move up"
+            title={t("tooltips.moveUp", { defaultValue: "Move up" })}
           >
             <ChevronRight className="w-3 h-3 rotate-90" />
           </button>
@@ -44,7 +46,7 @@ export const AccordionBlock: React.FC<{ block: Record<string, unknown>; index: n
             type="button"
             onClick={() => moveBlock(block.id, "down")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move down"
+            title={t("tooltips.moveDown", { defaultValue: "Move down" })}
           >
             <ChevronRight className="w-3 h-3" />
           </button>
@@ -52,7 +54,7 @@ export const AccordionBlock: React.FC<{ block: Record<string, unknown>; index: n
             type="button"
             onClick={() => removeBlock(block.id)}
             className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
-            title="Remove"
+            title={t("tooltips.remove", { defaultValue: "Remove" })}
           >
             <X className="w-3 h-3" />
           </button>

package/src/components/blocks/ArrayBlock.tsx

@@ -5,11 +5,13 @@ import {
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "../ui/icons";
 import { ChildBlocksTree } from "./ChildBlocksTree";
+import { useTranslation } from "react-i18next";
 
 export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
+    const { t } = useTranslation();
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
@@ -32,7 +34,7 @@ export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: numbe
             type="button"
             onClick={() => moveBlock(block.id, "up")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move up"
+            title={t("tooltips.moveUp", { defaultValue: "Move up" })}
           >
             <ChevronRight className="w-3 h-3 rotate-90" />
           </button>
@@ -40,7 +42,7 @@ export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: numbe
             type="button"
             onClick={() => moveBlock(block.id, "down")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move down"
+            title={t("tooltips.moveDown", { defaultValue: "Move down" })}
           >
             <ChevronRight className="w-3 h-3" />
           </button>
@@ -48,7 +50,7 @@ export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: numbe
             type="button"
             onClick={() => removeBlock(block.id)}
             className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
-            title="Remove"
+            title={t("tooltips.remove", { defaultValue: "Remove" })}
           >
             <X className="w-3 h-3" />
           </button>

package/src/components/blocks/BlockWrapper.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { ChevronRight, X } from "../ui/icons";
 import { useBlockActions } from "../fields/extensions/blocksStore";
+import { useTranslation } from "react-i18next";
 
 interface BlockWrapperProps {
   id: string;
@@ -17,6 +18,7 @@ export const BlockWrapper: React.FC<BlockWrapperProps> = ({
   children,
   className = "",
 }) => {
+    const { t } = useTranslation();
   const { moveBlock, removeBlock } = useBlockActions();
 
   return (
@@ -30,7 +32,7 @@ export const BlockWrapper: React.FC<BlockWrapperProps> = ({
             type="button"
             onClick={() => moveBlock(id, "up")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-muted)] hover:text-[var(--kyro-primary)]"
-            title="Move up"
+            title={t("tooltips.moveUp", { defaultValue: "Move up" })}
           >
             <ChevronRight className="w-3 h-3 rotate-90" />
           </button>
@@ -38,7 +40,7 @@ export const BlockWrapper: React.FC<BlockWrapperProps> = ({
             type="button"
             onClick={() => moveBlock(id, "down")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-muted)] hover:text-[var(--kyro-primary)]"
-            title="Move down"
+            title={t("tooltips.moveDown", { defaultValue: "Move down" })}
           >
             <ChevronRight className="w-3 h-3" />
           </button>
@@ -46,7 +48,7 @@ export const BlockWrapper: React.FC<BlockWrapperProps> = ({
             type="button"
             onClick={() => removeBlock(id)}
             className="p-1 hover:bg-[var(--kyro-error)]/10 rounded text-[var(--kyro-error)]"
-            title="Remove"
+            title={t("tooltips.remove", { defaultValue: "Remove" })}
           >
             <X className="w-3 h-3" />
           </button>

package/src/components/blocks/CodeBlock.tsx

@@ -5,11 +5,13 @@ import {
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X, Code2 } from "../ui/icons";
 import { CodeField } from "../fields/CodeField";
+import { useTranslation } from "react-i18next";
 
 export const CodeBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
+    const { t } = useTranslation();
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
   const data = blockData?.data ?? block.data ?? {};
@@ -39,7 +41,7 @@ export const CodeBlock: React.FC<{ block: Record<string, unknown>; index: number
               type="button"
               onClick={() => moveBlock(block.id, "up")}
               className="p-1.5 hover:bg-[var(--kyro-surface)] rounded-lg transition-all text-[var(--kyro-text-muted)] hover:text-[var(--kyro-primary)]"
-              title="Move up"
+              title={t("tooltips.moveUp", { defaultValue: "Move up" })}
             >
               <ChevronRight className="w-4 h-4 rotate-[-90deg]" />
             </button>
@@ -48,7 +50,7 @@ export const CodeBlock: React.FC<{ block: Record<string, unknown>; index: number
               type="button"
               onClick={() => removeBlock(block.id)}
               className="p-1.5 hover:bg-[var(--kyro-danger-bg)] rounded-lg transition-all text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)]"
-              title="Remove"
+              title={t("tooltips.remove", { defaultValue: "Remove" })}
             >
               <X className="w-4 h-4" />
             </button>

package/src/components/blocks/FileBlock.tsx

@@ -5,11 +5,13 @@ import {
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "../ui/icons";
 import { UploadField } from "../fields/UploadField";
+import { useTranslation } from "react-i18next";
 
 export const FileBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
+    const { t } = useTranslation();
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
@@ -30,7 +32,7 @@ export const FileBlock: React.FC<{ block: Record<string, unknown>; index: number
             type="button"
             onClick={() => moveBlock(block.id, "up")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move up"
+            title={t("tooltips.moveUp", { defaultValue: "Move up" })}
           >
             <ChevronRight className="w-3 h-3 rotate-90" />
           </button>
@@ -38,7 +40,7 @@ export const FileBlock: React.FC<{ block: Record<string, unknown>; index: number
             type="button"
             onClick={() => moveBlock(block.id, "down")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move down"
+            title={t("tooltips.moveDown", { defaultValue: "Move down" })}
           >
             <ChevronRight className="w-3 h-3" />
           </button>
@@ -46,7 +48,7 @@ export const FileBlock: React.FC<{ block: Record<string, unknown>; index: number
             type="button"
             onClick={() => removeBlock(block.id)}
             className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
-            title="Remove"
+            title={t("tooltips.remove", { defaultValue: "Remove" })}
           >
             <X className="w-3 h-3" />
           </button>

package/src/components/blocks/HeroBlock.tsx

@@ -7,11 +7,13 @@ import { ChevronRight, X } from "../ui/icons";
 import { HeroField } from "../fields/HeroField";
 import { UploadField } from "../fields/UploadField";
 import { ChildBlocksTree } from "./ChildBlocksTree";
+import { useTranslation } from "react-i18next";
 
 export const HeroBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
   block,
   index,
 }) => {
+    const { t } = useTranslation();
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
@@ -35,7 +37,7 @@ export const HeroBlock: React.FC<{ block: Record<string, unknown>; index: number
             type="button"
             onClick={() => moveBlock(block.id, "up")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move up"
+            title={t("tooltips.moveUp", { defaultValue: "Move up" })}
           >
             <ChevronRight className="w-3 h-3 rotate-90" />
           </button>
@@ -43,7 +45,7 @@ export const HeroBlock: React.FC<{ block: Record<string, unknown>; index: number
             type="button"
             onClick={() => moveBlock(block.id, "down")}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
-            title="Move down"
+            title={t("tooltips.moveDown", { defaultValue: "Move down" })}
           >
             <ChevronRight className="w-3 h-3" />
           </button>
@@ -51,7 +53,7 @@ export const HeroBlock: React.FC<{ block: Record<string, unknown>; index: number
             type="button"
             onClick={() => removeBlock(block.id)}
             className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
-            title="Remove"
+            title={t("tooltips.remove", { defaultValue: "Remove" })}
           >
             <X className="w-3 h-3" />
           </button>