@kyro-cms/admin 0.12.3 → 0.12.5

package/src/components/DetailView.tsx

@@ -10,9 +10,12 @@ import { ActionBar, type DocumentStatus, type SaveStatus } from "./ActionBar";
 import { Spinner } from "./ui/Spinner";
 import { Shimmer } from "./ui/Shimmer";
 import { useUIStore, toast } from "../lib/stores";
+import { useAutoFormStore } from "../lib/autoform-store";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
 import { SplitButton } from "./ui/SplitButton";
+import { useTranslation } from "react-i18next";
+import "../lib/i18n";
 import { adminPath } from "../lib/paths";
 import { resolveFieldValue } from "../lib/resolve-field-value";
 
@@ -40,6 +43,7 @@ export function DetailView({
   onError,
   mode = "collection",
 }: DetailViewProps) {
+  const { t } = useTranslation();
   const { confirm, alert } = useUIStore();
   const [data, setData] = useState<Record<string, unknown>>({});
   const [originalData, setOriginalData] = useState<Record<string, unknown>>({});
@@ -53,6 +57,10 @@ export function DetailView({
   const [updatedAt, setUpdatedAt] = useState<string | null>(null);
   const [publishedAt, setPublishedAt] = useState<string | null>(null);
   const [justSaved, setJustSaved] = useState(false);
+  const showPreview = useAutoFormStore((state) => state.showPreview);
+  const setShowPreview = useAutoFormStore((state) => state.setShowPreview);
+  const previewUrl = useAutoFormStore((state) => state.previewUrl);
+  const setPreviewUrl = useAutoFormStore((state) => state.setPreviewUrl);
 
   const fields = global?.fields || collection?.fields || [];
   const label = global?.label || collection?.label || "Document";
@@ -155,18 +163,23 @@ export function DetailView({
 
         if (!isAutosave) {
           const isDraft = status === "draft" || (savedData as any)?.status === "draft";
-          if (isDraft) toast.warning("Draft saved");
-          else toast.success("Updated");
+          if (isDraft) toast.warning(t("toast.draftSaved", { defaultValue: "Draft saved" }));
+          else toast.success(t("toast.updated", { defaultValue: "Updated" }));
         }
 
         setTimeout(() => {
           setSaveStatus("idle");
         }, 2000);
-      } catch {
+        
+        if (showPreview) {
+          refreshPreviewUrl(savedData);
+        }
+
+      } catch (e: any) {
         setSaveStatus("error");
         if (!isAutosave) {
-          onError("Failed to save changes");
-          toast.error("Failed to save changes");
+          onError(t("toast.saveError", { defaultValue: "Failed to save changes" }));
+          toast.error(t("toast.saveError", { defaultValue: "Failed to save changes" }));
         }
       } finally {
         setSaving(false);
@@ -184,11 +197,11 @@ export function DetailView({
       } as any);
       setStatus("published");
       setPublishedAt(new Date().toISOString());
-      toast.success("Published successfully");
+      toast.success(t("toast.published", { defaultValue: "Published successfully" }));
       onSave();
     } catch {
-      onError("Failed to publish");
-      toast.error("Failed to publish");
+      onError(t("toast.publishError", { defaultValue: "Failed to publish" }));
+      toast.error(t("toast.publishError", { defaultValue: "Failed to publish" }));
     } finally {
       setSaving(false);
     }
@@ -202,11 +215,11 @@ export function DetailView({
         headers: { "X-Draft": "false" },
       } as any);
       setStatus("draft");
-      toast.warning("Document unpublished");
+      toast.warning(t("toast.unpublished", { defaultValue: "Document unpublished" }));
       onSave();
     } catch {
-      onError("Failed to unpublish");
-      toast.error("Failed to unpublish");
+      onError(t("toast.unpublishError", { defaultValue: "Failed to unpublish" }));
+      toast.error(t("toast.unpublishError", { defaultValue: "Failed to unpublish" }));
     } finally {
       setSaving(false);
     }
@@ -216,14 +229,14 @@ export function DetailView({
     try {
       setIsDuplicating(true);
       const response = await apiPost(`/api/${slug}/${documentId}/duplicate`, undefined, { autoToast: false }) as { data?: { id?: string } };
-      toast.success("Document duplicated");
+      toast.success(t("toast.duplicated", { defaultValue: "Document duplicated" }));
       if (response?.data?.id) {
         window.location.href = `${adminPath}/${slug}/${response.data.id}`;
       } else {
         window.location.href = `${adminPath}/${slug}`;
       }
     } catch (e) {
-      toast.error((e as Error).message || "Failed to duplicate document");
+      toast.error((e as Error).message || t("toast.duplicateError", { defaultValue: "Failed to duplicate document" }));
     } finally {
       setIsDuplicating(false);
     }
@@ -239,9 +252,9 @@ export function DetailView({
       delete (copyPayload as any).status;
       
       await navigator.clipboard.writeText(JSON.stringify(copyPayload));
-      toast.success("Document data copied to clipboard");
+      toast.success(t("toast.dataCopied", { defaultValue: "Document data copied to clipboard" }));
     } catch (e) {
-      toast.error("Failed to copy document data");
+      toast.error(t("toast.copyError", { defaultValue: "Failed to copy document data" }));
     }
   };
 
@@ -262,16 +275,16 @@ export function DetailView({
         updatedAt: prev.updatedAt,
         status: prev.status,
       }));
-      toast.success("Document data pasted");
+      toast.success(t("toast.dataPasted", { defaultValue: "Document data pasted" }));
     } catch (e) {
-      toast.error("Clipboard does not contain valid document JSON");
+      toast.error(t("toast.pasteError", { defaultValue: "Clipboard does not contain valid document JSON" }));
     }
   };
 
   const handleDeleteTrigger = () => {
     confirm({
-      title: `Delete ${label}?`,
-      message: "This action cannot be undone.",
+      title: t("detailView.deleteTitle", { defaultValue: "Delete {{label}}?", label }),
+      message: t("detailView.deleteMessage", { defaultValue: "This action cannot be undone." }),
       variant: "danger",
       onConfirm: async () => {
         try {
@@ -284,7 +297,37 @@ export function DetailView({
       }
     });
   };
+  const refreshPreviewUrl = async (docData: any = data) => {
+    try {
+      const endpoint = mode === "global" ? `/api/globals/${slug}/preview-url` : `/api/${slug}/preview-url`;
+      console.log("[Kyro Preview] Calling endpoint:", endpoint, "with data keys:", Object.keys(docData || {}), "documentId:", documentId);
+      const res = await apiPost(endpoint, { ...docData, id: documentId }, { autoToast: false });
+      console.log("[Kyro Preview] Response:", JSON.stringify(res));
+      if (res && (res as any).url) {
+        console.log("[Kyro Preview] Setting previewUrl:", (res as any).url);
+        setPreviewUrl((res as any).url);
+      } else {
+        console.warn("[Kyro Preview] No url in response:", res);
+      }
+    } catch (e: any) {
+      console.error("[Kyro Preview] Error:", e.message, e);
+      toast.error(e.message || "Failed to generate preview URL");
+    }
+  };
+
+  useEffect(() => {
+    if (showPreview) {
+      refreshPreviewUrl(data);
+    }
+  }, [showPreview]);
 
+  const togglePreview = () => {
+    const nextState = !showPreview;
+    setShowPreview(nextState);
+    if (nextState) {
+      refreshPreviewUrl(data);
+    }
+  };
   if (loading) {
     return (
       <div className="kyro-detail">
@@ -309,15 +352,15 @@ export function DetailView({
       <PageHeader
         back={{ onClick: onBack }}
         breadcrumbs={[
-          { label: mode === "global" ? "Globals" : "Collections" },
+          { label: mode === "global" ? t("detailView.globals", { defaultValue: "Globals" }) : t("detailView.collections", { defaultValue: "Collections" }) },
           {
             label: label,
             href: mode === "collection" ? `${adminPath}/${slug}` : undefined
           },
-          { label: mode === "global" ? "Edit" : documentId ? "Edit" : "New" }
+          { label: mode === "global" ? t("actions.edit", { defaultValue: "Edit" }) : documentId ? t("actions.edit", { defaultValue: "Edit" }) : t("actions.new", { defaultValue: "New" }) }
         ]}
         title={
-          (mode === "global" ? label : ((resolveFieldValue(collection?.fields as any, data, collection?.admin?.useAsTitle || "title") as string) || data.name as string || documentId || `New ${collection?.singularLabel || label}`))
+          (mode === "global" ? label : ((resolveFieldValue(collection?.fields as any, data, collection?.admin?.useAsTitle || "title") as string) || data.name as string || documentId || t("detailView.newDocument", { defaultValue: "New {{label}}", label: collection?.singularLabel || label })))
         }
         metadata={[
           <Badge
@@ -326,7 +369,7 @@ export function DetailView({
             dot
             className="text-[10px] font-bold "
           >
-            {status}
+            {t(`status.${status}`, { defaultValue: status })}
           </Badge>
         ]}
       />
@@ -344,9 +387,7 @@ export function DetailView({
         onViewHistory={() => {
           window.dispatchEvent(new CustomEvent('kyro:show-version-history'));
         }}
-        onPreview={() =>
-          window.open(`/preview/${slug}/${documentId}`, "_blank")
-        }
+        onPreview={((collection as any)?.admin?.disablePreview || (global as any)?.admin?.disablePreview) ? undefined : togglePreview}
         onDelete={handleDeleteTrigger}
         onBack={onBack}
         onToggleSidebar={() => window.dispatchEvent(new CustomEvent("toggle-sidebar"))}
@@ -356,16 +397,18 @@ export function DetailView({
 
       <div
         className={
-          isSingleLayout
-            ? "w-full pt-4 md:pt-8"
-            : "w-full mx-auto grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-4 md:gap-8 pt-4 md:pt-0"
+          showPreview
+            ? "w-full mx-auto grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8 pt-4 md:pt-0 h-[calc(100vh-140px)]"
+            : isSingleLayout
+              ? "w-full pt-4 md:pt-8"
+              : "w-full mx-auto grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-4 md:gap-8 pt-4 md:pt-0"
         }
       >
-        <div className="space-y-4 md:space-y-8 min-w-0">
+        <div className={`space-y-4 md:space-y-8 min-w-0 ${showPreview ? "overflow-y-auto pr-2 pb-20" : ""}`}>
           <div className="surface-tile p-4 md:p-8">
             <div className="flex items-center justify-between mb-8 px-1">
               <h2 className="text-[10px] font-bold  tracking-[0.2em] opacity-40">
-                Core Configuration
+                {t("detailView.coreConfiguration", { defaultValue: "Core Configuration" })}
               </h2>
               <div className="h-px flex-1 bg-[var(--kyro-border)] ml-6 opacity-30" />
             </div>
@@ -394,7 +437,7 @@ export function DetailView({
                     disabled={isDeleting || saving}
                     className="kyro-btn kyro-btn-sm text-[var(--kyro-danger)] hover:bg-[var(--kyro-danger)]/10 w-full justify-start mt-2"
                   >
-                    {isDeleting ? "Deleting..." : "Delete Document"}
+                    {isDeleting ? t("actions.deleting", { defaultValue: "Deleting..." }) : t("actions.deleteDocument", { defaultValue: "Delete Document" })}
                   </button>
                 )}
                 <SplitButton
@@ -409,16 +452,46 @@ export function DetailView({
           </div>
         </div>
 
-        {!isSingleLayout && (
+        {showPreview && (
+          <div className="surface-tile flex flex-col overflow-hidden h-full border border-[var(--kyro-border)] rounded-xl animate-in fade-in slide-in-from-right-4 duration-500 shadow-xl bg-white dark:bg-black">
+            <div className="bg-[var(--kyro-surface-accent)] border-b border-[var(--kyro-border)] p-2 flex items-center justify-between shrink-0">
+              <div className="flex items-center gap-2 pl-2">
+                <div className="w-3 h-3 rounded-full bg-red-400/80"></div>
+                <div className="w-3 h-3 rounded-full bg-amber-400/80"></div>
+                <div className="w-3 h-3 rounded-full bg-green-400/80"></div>
+              </div>
+              <div className="text-[10px] font-mono opacity-50 truncate max-w-[60%] bg-[var(--kyro-bg)] px-3 py-1 rounded">
+                {previewUrl || t("detailView.generatingPreview", { defaultValue: "Generating preview URL..." })}
+              </div>
+              <div className="w-16"></div>
+            </div>
+            <div className="flex-1 bg-white relative">
+              {!previewUrl ? (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Spinner className="w-6 h-6 text-[var(--kyro-primary)]" />
+                </div>
+              ) : (
+                <iframe
+                  src={previewUrl}
+                  className="w-full h-full border-0 bg-white"
+                  title={t("tooltips.preview", { defaultValue: "Preview" })}
+                  sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+                />
+              )}
+            </div>
+          </div>
+        )}
+
+        {!isSingleLayout && !showPreview && (
           <div className="space-y-4 md:space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
             <div className="surface-tile p-4 md:p-8">
               <h3 className="text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-4 md:mb-6">
-                Metadata
+                {t("detailView.metadata", { defaultValue: "Metadata" })}
               </h3>
               <div className="space-y-4 md:space-y-6">
                 <div className="flex flex-col gap-2">
                   <span className="text-[10px] font-bold  tracking-widest opacity-40">
-                    Dynamic Status
+                    {t("detailView.dynamicStatus", { defaultValue: "Dynamic Status" })}
                   </span>
                   <div>
                     <span
@@ -430,7 +503,7 @@ export function DetailView({
                 </div>
                 <div className="flex flex-col gap-2">
                   <span className="text-[10px] font-bold  tracking-widest opacity-40">
-                    Date Created
+                    {t("detailView.dateCreated", { defaultValue: "Date Created" })}
                   </span>
                   <span className="text-sm font-bold text-[var(--kyro-text-secondary)]">
                     {createdAt
@@ -438,12 +511,12 @@ export function DetailView({
                         dateStyle: "medium",
                         timeStyle: "short",
                       })
-                      : "N/A"}
+                      : t("common.na", { defaultValue: "N/A" })}
                   </span>
                 </div>
                 <div className="flex flex-col gap-2">
                   <span className="text-[10px] font-bold  tracking-widest opacity-40">
-                    Last Modified
+                    {t("detailView.lastModified", { defaultValue: "Last Modified" })}
                   </span>
                   <span className="text-sm font-bold text-[var(--kyro-text-secondary)]">
                     {updatedAt
@@ -451,13 +524,13 @@ export function DetailView({
                         dateStyle: "medium",
                         timeStyle: "short",
                       })
-                      : "Just now"}
+                      : t("detailView.justNow", { defaultValue: "Just now" })}
                   </span>
                 </div>
                 {publishedAt && (
                   <div className="flex flex-col gap-2">
                     <span className="text-[10px] font-bold  tracking-widest opacity-40">
-                      Public At
+                      {t("detailView.publicAt", { defaultValue: "Public At" })}
                     </span>
                     <span className="text-sm font-bold text-[var(--kyro-text-secondary)]">
                       {new Date(publishedAt).toLocaleString("en-US", {
@@ -472,7 +545,7 @@ export function DetailView({
 
             <div className="surface-tile p-4 md:p-8 bg-[var(--kyro-bg-secondary)]">
               <h3 className="text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-3 md:mb-4">
-                Quick Links
+                {t("detailView.quickLinks", { defaultValue: "Quick Links" })}
               </h3>
               <div className="space-y-2 md:space-y-3">
                 <button
@@ -481,21 +554,23 @@ export function DetailView({
                   disabled={isDuplicating || saving}
                   className="kyro-btn kyro-btn-sm kyro-btn-ghost w-full justify-start"
                 >
-                  {isDuplicating ? "Duplicating..." : "Duplicate Document"}
-                </button>
-                <button
-                  type="button"
-                  onClick={() => window.open(`/preview/${slug}/${documentId}`, "_blank")}
-                  className="kyro-btn kyro-btn-sm kyro-btn-ghost w-full justify-start"
-                >
-                  View Public Page
+                  {isDuplicating ? t("actions.duplicating", { defaultValue: "Duplicating..." }) : t("actions.duplicateDocument", { defaultValue: "Duplicate Document" })}
                 </button>
+                {previewUrl && (
+                  <button
+                    type="button"
+                    onClick={() => window.open(previewUrl, "_blank")}
+                    className="kyro-btn kyro-btn-sm kyro-btn-ghost w-full justify-start"
+                  >
+                    {t("detailView.openPreview", { defaultValue: "Open Preview in New Tab" })}
+                  </button>
+                )}
                 <button
                   type="button"
                   onClick={handleDeleteTrigger}
                   className="kyro-btn kyro-btn-sm kyro-btn-ghost w-full justify-start text-[var(--kyro-error)] hover:bg-[var(--kyro-danger-bg)]"
                 >
-                  Delete Entry
+                  {t("actions.deleteEntry", { defaultValue: "Delete Entry" })}
                 </button>
               </div>
             </div>

package/src/components/DeveloperCenter.tsx

@@ -21,6 +21,7 @@ import { useUIStore, toast } from "../lib/stores";
 import { Modal, ModalContent, ModalActions } from "./ui/Modal";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
+import { useTranslation } from "react-i18next";
 
 // @ts-ignore
 const API_BASE = typeof __KYRO_API_PATH__ !== 'undefined' ? __KYRO_API_PATH__ : '/api';
@@ -34,6 +35,7 @@ interface ApiKey {
 }
 
 export function DeveloperCenter({ collections }: { collections: Record<string, unknown> }) {
+    const { t } = useTranslation();
   const [keys, setKeys] = useState<ApiKey[]>([]);
   const [loading, setLoading] = useState(false);
   const [showKey, setShowKey] = useState<string | null>(null);
@@ -114,7 +116,7 @@ export function DeveloperCenter({ collections }: { collections: Record<string, u
   return (
     <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
       <PageHeader
-        title="Developer Center"
+        title={t("tooltips.developerCenter", { defaultValue: "Developer Center" })}
         description="Provision access keys and explore the headless API ecosystem."
         icon={Code2}
         actions={[
@@ -206,7 +208,7 @@ export function DeveloperCenter({ collections }: { collections: Record<string, u
                       type="button"
                       onClick={() => handleRevokeKey(key.id)}
                       className="p-3.5 bg-red-500/5 text-red-500 rounded-2xl hover:bg-red-500/10 transition-all border border-transparent hover:border-red-500/30 self-start md:self-center"
-                      title="Revoke Key"
+                      title={t("tooltips.revokeKey", { defaultValue: "Revoke Key" })}
                     >
                       <Trash2 className="w-5 h-5" />
                     </button>
@@ -367,7 +369,7 @@ export function DeveloperCenter({ collections }: { collections: Record<string, u
       <Modal
         open={showCreateModal}
         onClose={() => setShowCreateModal(false)}
-        title="Generate Access Token"
+        title={t("tooltips.generateAccessToken", { defaultValue: "Generate Access Token" })}
         size="lg"
       >
         <ModalContent>

package/src/components/GraphQLPlayground.tsx

@@ -197,6 +197,7 @@ import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
 import { CompletionContext, autocompletion } from "@codemirror/autocomplete";
 import { aura } from "@uiw/codemirror-theme-aura";
+import { useTranslation } from "react-i18next";
 
 function prettifyQuery(query: string): string {
   let indent = 0;
@@ -421,6 +422,7 @@ export function GraphQLPlayground({
   initialVariables,
   initialShowDocs = false,
 }: GraphQLPlaygroundProps) {
+    const { t } = useTranslation();
   const [token, setToken] = useState<string>("");
   const [showToken, setShowToken] = useState(false);
   const [isConnected, setIsConnected] = useState(false);
@@ -837,7 +839,7 @@ export function GraphQLPlayground({
               type={showToken ? "text" : "password"}
               value={token}
               onChange={(e) => setToken(e.target.value)}
-              placeholder="API key"
+              placeholder={t("fields.apiKey", { defaultValue: "API key" })}
               className="w-24 px-2 py-1 text-[10px] font-mono bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-md text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)] focus:outline-none focus:border-[var(--kyro-primary)]"
             />
             <button onClick={() => setShowToken(!showToken)} className="p-1 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]">
@@ -846,22 +848,22 @@ export function GraphQLPlayground({
           </div>
         )}
         <div className="ml-auto flex items-center gap-1 flex-wrap justify-end">
-          <button onClick={() => { setShowDocs(!showDocs); setRightTab("docs"); }} className={`p-1.5 rounded-lg transition-all ${rightTab === "docs" && showDocs ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`} title="Schema docs">
+          <button onClick={() => { setShowDocs(!showDocs); setRightTab("docs"); }} className={`p-1.5 rounded-lg transition-all ${rightTab === "docs" && showDocs ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`} title={t("tooltips.schemaDocs", { defaultValue: "Schema docs" })}>
             <Book className="w-3.5 h-3.5" />
           </button>
-          <button onClick={() => setRightTab("history")} className={`p-1.5 rounded-lg transition-all ${rightTab === "history" ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`} title="History">
+          <button onClick={() => setRightTab("history")} className={`p-1.5 rounded-lg transition-all ${rightTab === "history" ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`} title={t("tooltips.history", { defaultValue: "History" })}>
             <Clock className="w-3.5 h-3.5" />
           </button>
-          <button onClick={handlePrettify} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title="Prettify (Cmd+Shift+P)">
+          <button onClick={handlePrettify} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title={t("tooltips.prettifyCmdshiftp", { defaultValue: "Prettify (Cmd+Shift+P)" })}>
             <Code2 className="w-3.5 h-3.5" />
           </button>
-          <button onClick={handleCopyResponse} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title="Copy response">
+          <button onClick={handleCopyResponse} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title={t("tooltips.copyResponse", { defaultValue: "Copy response" })}>
             {copied ? <Check className="w-3.5 h-3.5 text-[var(--kyro-success)]" /> : <Copy className="w-3.5 h-3.5" />}
           </button>
-          <button onClick={handleDownloadResponse} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title="Download response">
+          <button onClick={handleDownloadResponse} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title={t("tooltips.downloadResponse", { defaultValue: "Download response" })}>
             <Download className="w-3.5 h-3.5" />
           </button>
-          <button onClick={handleClearEditor} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)] hover:bg-[var(--kyro-danger-bg)]" title="Clear editor">
+          <button onClick={handleClearEditor} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)] hover:bg-[var(--kyro-danger-bg)]" title={t("tooltips.clearEditor", { defaultValue: "Clear editor" })}>
             <Trash2 className="w-3.5 h-3.5" />
           </button>
           <div className="h-4 w-px bg-[var(--kyro-border)] mx-1" />
@@ -977,7 +979,7 @@ export function GraphQLPlayground({
                       type="text"
                       value={searchQuery}
                       onChange={(e) => setSearchQuery(e.target.value)}
-                      placeholder="Search types and fields..."
+                      placeholder={t("fields.searchTypesAndFields", { defaultValue: "Search types and fields..." })}
                       className="w-full pl-7 pr-6 py-1 text-[10px] bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-md text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)] focus:outline-none focus:border-[var(--kyro-primary)]"
                     />
                     {searchQuery && (