@kyro-cms/admin 0.9.6 → 0.9.8

package/src/components/DetailView.tsx

@@ -292,57 +292,32 @@ export function DetailView({
         ]}
       />
 
-      {isSingleLayout ? (
-        <div className="md:hidden">
-          <ActionBar
-            status={status}
-            saveStatus={saveStatus}
-            hasChanges={hasChanges}
-            onSave={() => handleSave(false)}
-            onPublish={handlePublish}
-            onUnpublish={status === "published" ? handleUnpublish : undefined}
-            onDuplicate={handleDuplicate}
-            onViewHistory={() => {
-              window.dispatchEvent(new CustomEvent('kyro:show-version-history'));
-            }}
-            onPreview={() =>
-              window.open(`/preview/${slug}/${documentId}`, "_blank")
-            }
-            onDelete={handleDeleteTrigger}
-            onBack={onBack}
-            onToggleSidebar={() => window.dispatchEvent(new CustomEvent("toggle-sidebar"))}
-            publishedAt={publishedAt}
-            updatedAt={updatedAt}
-          />
-        </div>
-      ) : (
-        <ActionBar
-          status={status}
-          saveStatus={saveStatus}
-          hasChanges={hasChanges}
-          onSave={() => handleSave(false)}
-          onPublish={handlePublish}
-          onUnpublish={status === "published" ? handleUnpublish : undefined}
-          onDuplicate={handleDuplicate}
-          onViewHistory={() => {
-            window.dispatchEvent(new CustomEvent('kyro:show-version-history'));
-          }}
-          onPreview={() =>
-            window.open(`/preview/${slug}/${documentId}`, "_blank")
-          }
-          onDelete={handleDeleteTrigger}
-          onBack={onBack}
-          onToggleSidebar={() => window.dispatchEvent(new CustomEvent("toggle-sidebar"))}
-          publishedAt={publishedAt}
-          updatedAt={updatedAt}
-        />
-      )}
+      <ActionBar
+        status={status}
+        saveStatus={saveStatus}
+        hasChanges={hasChanges}
+        onSave={() => handleSave(false)}
+        onPublish={handlePublish}
+        onUnpublish={status === "published" ? handleUnpublish : undefined}
+        onDuplicate={handleDuplicate}
+        onViewHistory={() => {
+          window.dispatchEvent(new CustomEvent('kyro:show-version-history'));
+        }}
+        onPreview={() =>
+          window.open(`/preview/${slug}/${documentId}`, "_blank")
+        }
+        onDelete={handleDeleteTrigger}
+        onBack={onBack}
+        onToggleSidebar={() => window.dispatchEvent(new CustomEvent("toggle-sidebar"))}
+        publishedAt={publishedAt}
+        updatedAt={updatedAt}
+      />
 
       <div
         className={
           isSingleLayout
-            ? "w-full pb-32 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 pb-32"
+            ? "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">

package/src/components/GraphQLPlayground.tsx

@@ -2,6 +2,7 @@ import React, {
   useState,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   Suspense,
   lazy,
@@ -52,6 +53,8 @@ const CodeMirrorEditor = lazy(() =>
   import("@uiw/react-codemirror").then((mod) => ({ default: mod.default })),
 );
 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";
 
 function prettifyQuery(query: string): string {
@@ -71,6 +74,94 @@ function prettifyQuery(query: string): string {
   return result.trim();
 }
 
+function resolveTypeName(type: Record<string, unknown>): string {
+  if (!type) return "Unknown";
+  if (type.name) return type.name as string;
+  if (type.ofType) return resolveTypeName(type.ofType as Record<string, unknown>);
+  return "Unknown";
+}
+
+function isScalarType(typeName: string): boolean {
+  return ["String", "Int", "Float", "Boolean", "ID"].includes(typeName);
+}
+
+function generateSkeletonQuery(field: FieldInfo, schema: SchemaInfo, isMutation: boolean): string {
+  const returnTypeName = resolveTypeName(field.type);
+  const returnType = schema.types.find((t) => t.name === returnTypeName);
+
+  const scalarFields = returnType?.fields
+    ?.filter((f) => !f.isDeprecated && isScalarType(resolveTypeName(f.type)))
+    .map((f) => `    ${f.name}`) || [];
+  const listFields = returnType?.fields
+    ?.filter((f) => resolveTypeName(f.type).startsWith("["))
+    .map((f) => `    ${f.name} { id }`) || [];
+  const docField = returnType?.fields?.find((f) => f.name === "doc");
+  const messageField = returnType?.fields?.find((f) => f.name === "message");
+
+  let selection = "";
+
+  if (docField && isMutation) {
+    const docTypeName = resolveTypeName(docField.type);
+    const docType = schema.types.find((t) => t.name === docTypeName);
+    const docScalars = docType?.fields
+      ?.filter((f) => !f.isDeprecated && isScalarType(resolveTypeName(f.type)))
+      .map((f) => `    ${f.name}`) || ["    id"];
+    selection = ["  doc {", ...docScalars, "  }"]
+      .concat(messageField ? ["  message"] : [])
+      .join("\n");
+  } else {
+    selection = [...scalarFields, ...listFields].join("\n");
+  }
+
+  const args = field.args
+    ?.filter((a) => {
+      const t = renderType(a.type);
+      return t.endsWith("!");
+    })
+    .map((a) => {
+      const t = renderType(a.type).replace("!", "");
+      const val = t === "String" ? '""' : t === "Int" ? "0" : t === "Float" ? "0" : t === "Boolean" ? "false" : '""';
+      return `${a.name}: ${val}`;
+    })
+    .join(", ");
+
+  const fieldCall = `${field.name}${args ? `(${args})` : ""}`;
+
+  if (isMutation) {
+    return `mutation {\n  ${fieldCall} {\n${selection}\n  }\n}`;
+  }
+  return `${fieldCall} {\n${selection}\n}`;
+}
+
+function buildSchemaCompletionOverride(schema: SchemaInfo) {
+  const queryType = schema.types.find((t) => t.name === schema.queryType.name);
+  const mutationType = schema.mutationType
+    ? schema.types.find((t) => t.name === schema.mutationType!.name)
+    : null;
+
+  const queryFields = queryType?.fields || [];
+  const mutationFields = mutationType?.fields || [];
+
+  const operationNames = [...queryFields.map((f) => f.name), ...mutationFields.map((f) => f.name)];
+
+  return (context: CompletionContext) => {
+    const word = context.matchBefore(/\w*/);
+    if (!word || (word.from === word.to && !context.explicit)) return null;
+    return {
+      from: word.from,
+      options: [
+        ...operationNames.map((n) => ({
+          label: n,
+          type: "function" as const,
+          detail: "operation",
+        })),
+        { label: "query", type: "keyword" as const, detail: "operation type" },
+        { label: "mutation", type: "keyword" as const, detail: "operation type" },
+      ],
+    };
+  };
+}
+
 const DEFAULT_QUERY = `# Welcome to Kyro CMS GraphQL Playground
 # Cmd+Enter to run, Cmd+Shift+P to prettify
 
@@ -161,7 +252,9 @@ export function GraphQLPlayground({
   const [lastStatus, setLastStatus] = useState<number>(0);
   const [copied, setCopied] = useState(false);
   const [splitPos, setSplitPos] = useState(50);
+  const [mobilePanel, setMobilePanel] = useState<"editor" | "response">("editor");
   const [isDragging, setIsDragging] = useState(false);
+  const [isDesktop, setIsDesktop] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const cursorPos = useRef({ line: 1, col: 1 });
 
@@ -169,6 +262,13 @@ export function GraphQLPlayground({
     setIsMounted(true);
   }, []);
 
+  useEffect(() => {
+    const check = () => setIsDesktop(window.innerWidth >= 768);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
+
   const fetchSchema = useCallback(async () => {
     setLoadingSchema(true);
     try {
@@ -335,7 +435,24 @@ export function GraphQLPlayground({
     setTab((prev) => ({ ...prev, query: "" }));
   };
 
-  const extensions = [javascript()];
+  const handleInsertQuery = useCallback(
+    (field: FieldInfo) => {
+      const isMutation = schema?.mutationType?.name
+        ? schema.types
+            .find((t) => t.name === schema.mutationType!.name)
+            ?.fields?.some((f) => f.name === field.name)
+        : false;
+      if (!schema) return;
+      const q = generateSkeletonQuery(field, schema, !!isMutation);
+      setTab((prev) => ({ ...prev, query: q }));
+      setRightTab("response");
+    },
+    [schema],
+  );
+
+  const queryExt = useMemo(() => [javascript(), schema ? autocompletion({ override: [buildSchemaCompletionOverride(schema)] }) : []].flat(), [schema]);
+  const jsonExt = useMemo(() => [json()], []);
+  const extensions = activeEditorTab === "query" ? queryExt : jsonExt;
   const theme = aura;
 
   const renderType = (type: Record<string, unknown>): string => {
@@ -393,7 +510,7 @@ export function GraphQLPlayground({
   return (
     <div ref={containerRef} className="h-full flex flex-col bg-[var(--kyro-bg)] overflow-hidden rounded-lg border border-[var(--kyro-border)]">
       {/* Compact top bar */}
-      <div className="flex items-center gap-2 px-3 py-2 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] shrink-0">
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-3 py-2 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] shrink-0">
         <div className="flex items-center gap-1.5 min-w-0">
           <div className="w-7 h-7 rounded-lg bg-[var(--kyro-primary)]/10 flex items-center justify-center text-[var(--kyro-primary)] shrink-0">
             <Zap className="w-3.5 h-3.5" />
@@ -427,7 +544,7 @@ export function GraphQLPlayground({
             </button>
           </div>
         )}
-        <div className="ml-auto flex items-center gap-1">
+        <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-white" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`} title="Schema docs">
             <Book className="w-3.5 h-3.5" />
           </button>
@@ -459,20 +576,35 @@ export function GraphQLPlayground({
       </div>
 
       {/* Main split area */}
-      <div className="flex-1 flex overflow-hidden relative">
+      <div className="flex-1 flex flex-col md:flex-row overflow-hidden relative">
+        {/* Mobile panel switcher */}
+        <div className="flex md:hidden gap-1 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] shrink-0">
+          <button
+            onClick={() => setMobilePanel("editor")}
+            className={`flex-1 px-3 py-1.5 text-[10px] font-semibold rounded-md transition-all ${mobilePanel === "editor" ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`}
+          >
+            Editor
+          </button>
+          <button
+            onClick={() => setMobilePanel("response")}
+            className={`flex-1 px-3 py-1.5 text-[10px] font-semibold rounded-md transition-all ${mobilePanel === "response" ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`}
+          >
+            Output
+          </button>
+        </div>
+
         {/* Left: editor */}
-        <div className="flex flex-col overflow-hidden border-r border-[var(--kyro-border)]" style={{ width: `${splitPos}%` }}>
+        <div className={`${mobilePanel === "editor" ? "flex" : "hidden"} md:flex flex-col overflow-hidden border-r border-[var(--kyro-border)] w-full md:w-auto`} style={{ flex: 'none', width: isDesktop ? `${splitPos}%` : "100%" }}>
           {/* Editor pills */}
           <div className="flex gap-0.5 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
             {editorPills.map((p) => (
               <button
                 key={p.key}
                 onClick={() => setActiveEditorTab(p.key)}
-                className={`px-2.5 py-1 text-[10px] font-semibold rounded-md transition-all ${
-                  activeEditorTab === p.key
+                className={`px-2.5 py-1 text-[10px] font-semibold rounded-md transition-all ${activeEditorTab === p.key
                     ? "bg-[var(--kyro-primary)] text-white"
                     : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
-                }`}
+                  }`}
               >
                 {p.label}
               </button>
@@ -509,7 +641,7 @@ export function GraphQLPlayground({
 
         {/* Drag handle */}
         <div
-          className="absolute top-0 bottom-0 z-10 w-1.5 cursor-col-resize group"
+          className="hidden md:block absolute top-0 bottom-0 z-10 w-1.5 cursor-col-resize group"
           style={{ left: `calc(${splitPos}% - 3px)` }}
           onMouseDown={startDrag}
         >
@@ -517,18 +649,17 @@ export function GraphQLPlayground({
         </div>
 
         {/* Right panel */}
-        <div className="flex-1 flex flex-col overflow-hidden min-w-0" style={{ width: `${100 - splitPos}%` }}>
+        <div className={`${mobilePanel === "response" ? "flex" : "hidden"} md:flex flex-1 flex-col overflow-hidden min-w-0 w-full md:w-auto`} style={{ flex: undefined, width: isDesktop ? `${100 - splitPos}%` : "100%" }}>
           {/* Right pills */}
           <div className="flex gap-0.5 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
             {rightPills.map((p) => (
               <button
                 key={p.key}
                 onClick={() => { setRightTab(p.key); if (p.key === "docs") setShowDocs(true); }}
-                className={`px-2.5 py-1 text-[10px] font-semibold rounded-md transition-all ${
-                  rightTab === p.key
+                className={`px-2.5 py-1 text-[10px] font-semibold rounded-md transition-all ${rightTab === p.key
                     ? "bg-[var(--kyro-primary)] text-white"
                     : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
-                }`}
+                  }`}
               >
                 {p.label}
               </button>
@@ -569,25 +700,33 @@ export function GraphQLPlayground({
                           {selectedType.fields && (
                             <div className="space-y-2">
                               <h4 className="text-[10px] font-semibold tracking-wider text-[var(--kyro-text-muted)] pt-3">Fields</h4>
-                              {selectedType.fields.map(f => (
-                                <div key={f.name} className="p-2.5 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)]">
-                                  <div className="flex items-center justify-between gap-2">
-                                    <span className="font-semibold text-[11px] text-[var(--kyro-text-primary)]">{f.name}</span>
-                                    <span className="text-[9px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1.5 py-0.5 rounded">{renderType(f.type)}</span>
-                                  </div>
-                                  {f.description && <p className="text-[10px] text-[var(--kyro-text-secondary)] mt-1">{f.description}</p>}
-                                  {f.args && f.args.length > 0 && (
-                                    <div className="mt-1.5 pl-3 border-l-2 border-[var(--kyro-border)] space-y-0.5">
-                                      {f.args.map(a => (
-                                        <div key={a.name} className="text-[9px]">
-                                          <span className="text-[var(--kyro-text-muted)]">{a.name}:</span>{" "}
-                                          <span className="text-[var(--kyro-primary)]">{renderType(a.type)}</span>
-                                        </div>
-                                      ))}
+                              {selectedType.fields.map(f => {
+                                const isRootOp = (selectedType.name === "Query" || selectedType.name === "Mutation") && !!schema;
+                                return (
+                                  <button
+                                    key={f.name}
+                                    type="button"
+                                    onClick={isRootOp ? () => handleInsertQuery(f) : undefined}
+                                    className={`w-full text-left p-2.5 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)] transition-all ${isRootOp ? "hover:border-[var(--kyro-primary)] hover:shadow-sm cursor-pointer" : ""}`}
+                                  >
+                                    <div className="flex items-center justify-between gap-2">
+                                      <span className="font-semibold text-[11px] text-[var(--kyro-text-primary)]">{f.name}</span>
+                                      <span className="text-[9px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1.5 py-0.5 rounded">{renderType(f.type)}</span>
                                     </div>
-                                  )}
-                                </div>
-                              ))}
+                                    {f.description && <p className="text-[10px] text-[var(--kyro-text-secondary)] mt-1">{f.description}</p>}
+                                    {f.args && f.args.length > 0 && (
+                                      <div className="mt-1.5 pl-3 border-l-2 border-[var(--kyro-border)] space-y-0.5">
+                                        {f.args.map(a => (
+                                          <div key={a.name} className="text-[9px]">
+                                            <span className="text-[var(--kyro-text-muted)]">{a.name}:</span>{" "}
+                                            <span className="text-[var(--kyro-primary)]">{renderType(a.type)}</span>
+                                          </div>
+                                        ))}
+                                      </div>
+                                    )}
+                                  </button>
+                                );
+                              })}
                             </div>
                           )}
                         </div>
@@ -601,7 +740,7 @@ export function GraphQLPlayground({
                                 <button
                                   key={t}
                                   onClick={() => setSelectedType(found)}
-                                  className="flex items-center justify-between p-3 bg-[var(--kyro-surface-accent)] rounded-xl border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)] transition-all text-left group"
+                                  className="flex items-center justify-between p-3 bg-[var(--kyro-surface-accent)] rounded-md border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)] transition-all text-left group"
                                 >
                                   <div>
                                     <span className="text-[10px] font-semibold text-[var(--kyro-text-muted)] block">{t}</span>
@@ -684,9 +823,8 @@ export function GraphQLPlayground({
                     </span>
                   )}
                   {lastStatus > 0 && (
-                    <span className={`text-[9px] font-semibold px-1.5 py-0.5 rounded ${
-                      lastStatus < 400 ? "bg-[var(--kyro-success-bg)] text-[var(--kyro-success)]" : "bg-[var(--kyro-danger-bg)] text-[var(--kyro-danger)]"
-                    }`}>
+                    <span className={`text-[9px] font-semibold px-1.5 py-0.5 rounded ${lastStatus < 400 ? "bg-[var(--kyro-success-bg)] text-[var(--kyro-success)]" : "bg-[var(--kyro-danger-bg)] text-[var(--kyro-danger)]"
+                      }`}>
                       {lastStatus}
                     </span>
                   )}

package/src/components/RestPlayground.tsx

@@ -91,7 +91,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
     headers: {},
     body: "",
   });
-  const [response, setResponse] = useState<Record<string, unknown> | null>(null);
+  const [response, setResponse] = useState<{ status: number; duration: number; size: number; data: any } | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [activeEditorTab, setActiveEditorTab] = useState<"params" | "headers" | "body">("params");
@@ -102,6 +102,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
   const [saveRequestName, setSaveRequestName] = useState("");
   const [copied, setCopied] = useState(false);
   const [showSidebar, setShowSidebar] = useState(true);
+  const [mobilePanel, setMobilePanel] = useState<"editor" | "response">("editor");
   const [splitPos, setSplitPos] = useState(50);
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -343,7 +344,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
       <div className="flex items-center gap-2 px-3 py-2 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] shrink-0">
         <button
           onClick={() => setShowSidebar(!showSidebar)}
-          className="p-1 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] md:hidden"
+          className="p-1 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
           title="Toggle sidebar"
         >
           <ChevronRight className={`w-4 h-4 transition-transform ${showSidebar ? "rotate-180" : ""}`} />
@@ -365,7 +366,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
           value={currentRequest.url}
           onChange={(e) => setCurrentRequest({ ...currentRequest, url: e.target.value })}
           placeholder="https://api.example.com/endpoint"
-          className="flex-1 px-3 py-1.5 text-xs 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)] font-mono"
+          className="flex-1 min-w-0 px-3 py-1.5 text-xs 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)] font-mono"
         />
         <div className="flex items-center gap-1">
           <button
@@ -385,10 +386,18 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
         </div>
       </div>
 
-      <div className="flex-1 flex overflow-hidden">
+      <div className="flex-1 flex overflow-hidden relative">
+        {/* Mobile sidebar backdrop */}
+        {showSidebar && (
+          <div
+            className="fixed inset-0 bg-black/40 z-10 md:hidden"
+            onClick={() => setShowSidebar(false)}
+          />
+        )}
+
         {/* Left sidebar */}
         {showSidebar && (
-          <div className="w-60 flex-shrink-0 flex flex-col border-r border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
+          <div className="absolute md:relative z-20 h-full w-60 flex-shrink-0 flex flex-col border-r border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
             <div className="flex border-b border-[var(--kyro-border)]">
               {sidebarPills.map((p) => (
                 <button
@@ -557,9 +566,36 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
         )}
 
         {/* Main split area */}
-        <div className="flex-1 flex overflow-hidden">
+        <div className="flex-1 flex flex-col md:flex-row overflow-hidden">
+          {/* Mobile panel switcher */}
+          <div className="flex md:hidden border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] px-3 py-1.5 gap-1">
+            <button
+              onClick={() => setMobilePanel("editor")}
+              className={`flex-1 px-3 py-1 text-[10px] font-semibold rounded-md transition-all ${
+                mobilePanel === "editor"
+                  ? "bg-[var(--kyro-primary)] text-white"
+                  : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
+              }`}
+            >
+              Request
+            </button>
+            <button
+              onClick={() => setMobilePanel("response")}
+              className={`flex-1 px-3 py-1 text-[10px] font-semibold rounded-md transition-all ${
+                mobilePanel === "response"
+                  ? "bg-[var(--kyro-primary)] text-white"
+                  : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
+              }`}
+            >
+              Response
+            </button>
+          </div>
+
           {/* Left: Editor */}
-          <div className="flex flex-col overflow-hidden border-r border-[var(--kyro-border)]" style={{ width: showSidebar ? `${splitPos}%` : "100%" }}>
+          <div
+            className={`${mobilePanel === "editor" ? "flex" : "hidden"} md:flex flex-col overflow-hidden border-r border-[var(--kyro-border)] w-full md:w-auto`}
+            style={{ width: typeof window !== "undefined" && window.innerWidth >= 768 ? `${splitPos}%` : undefined }}
+          >
             {/* Editor pills */}
             <div className="flex gap-0.5 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
               {editorPills.map((p) => (
@@ -614,10 +650,10 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
             </div>
           </div>
 
-          {/* Drag handle */}
+          {/* Drag handle - hidden on mobile */}
           {showSidebar && (
             <div
-              className="absolute top-0 bottom-0 z-10 w-1.5 cursor-col-resize group"
+              className="hidden md:block absolute top-0 bottom-0 z-10 w-1.5 cursor-col-resize group"
               style={{ left: `calc(${splitPos}% - 3px)` }}
               onMouseDown={startDrag}
             >
@@ -626,7 +662,10 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
           )}
 
           {/* Right: Response */}
-          <div className="flex-1 flex flex-col overflow-hidden min-w-0" style={{ width: showSidebar ? `${100 - splitPos}%` : "50%" }}>
+          <div
+            className={`${mobilePanel === "response" ? "flex" : "hidden"} md:flex flex-1 flex-col overflow-hidden min-w-0 w-full md:w-auto`}
+            style={{ width: typeof window !== "undefined" && window.innerWidth >= 768 ? (showSidebar ? `${100 - splitPos}%` : "50%") : undefined }}
+          >
             <div className="flex items-center gap-2 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
               <span className="text-[10px] font-semibold text-[var(--kyro-text-secondary)]">Response</span>
               {response && (

package/src/components/fields/RichTextField.tsx

@@ -572,6 +572,8 @@ export default function RichTextField({
     extensions: [
       StarterKit.configure({
         codeBlock: true,
+        link: false,
+        underline: false,
       }),
       Link.configure({
         openOnClick: false,
@@ -591,7 +593,7 @@ export default function RichTextField({
       TextStyle,
       Color,
     ],
-    content: value || {},
+    content: value || { type: "doc", content: [] },
     editable: !disabled,
     onUpdate: ({ editor }: { editor: any }) => {
       onChange(editor.getJSON());

package/src/components/ui/SplitButton.tsx

@@ -45,7 +45,7 @@ export function SplitButton({
     if (saveStatus === "error")  return `${btnBase} bg-[var(--kyro-error)]   border-[var(--kyro-error)]   text-[var(--kyro-sidebar-text-active)]`;
     if (isPublishedIdle)         return `${btnBase} bg-[var(--kyro-gray-200)] border-[var(--kyro-gray-200)] text-[var(--kyro-text-muted)] cursor-not-allowed`;
     // has changes → accent
-    return `${btnBase} bg-[var(--kyro-primary)] border-[var(--kyro-primary)] hover:bg-[var(--kyro-primary-hover)]`;
+    return `${btnBase} bg-[var(--kyro-primary)] border-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] hover:bg-[var(--kyro-primary-hover)]`;
   };
 
   const chevronBase =

package/src/styles/main.css

@@ -94,6 +94,8 @@
   --kyro-input-border: #1e293b;
 
   --kyro-black: #ffffff;
+  --kyro-black-light: #f3f4f6;
+  --kyro-black-hover: #e5e7eb;
   --kyro-gray-50: #1a2332;
   --kyro-gray-100: #1e293b;
   --kyro-gray-200: #334155;