@sureshdsk/devflow-mcp 3.0.0 → 3.0.1

package/src/app/specs/[name]/page.tsx

@@ -1,16 +1,17 @@
-"use client";
+'use client';
 
-import { useState, useEffect, useCallback, use } from "react";
-import { SpecDetail } from "@/components/specs/spec-detail";
-import Link from "next/link";
+import { use } from 'react';
+import { SpecDetail } from '@/components/specs/spec-detail';
+import Link from 'next/link';
+import { useSpec, useInvalidate } from '@/hooks/use-queries';
+import { useWebSocket } from '@/hooks/use-websocket';
 
 interface SpecData {
   name: string;
   title: string;
-  projectId?: string;
   statuses: Array<{
     id: string;
-    state: "blocked" | "ready" | "in_review" | "in_progress" | "done";
+    state: 'blocked' | 'ready' | 'in_review' | 'in_progress' | 'done';
     description: string;
     requires: string[];
     fileExists: boolean;
@@ -30,63 +31,16 @@ interface SpecData {
 
 export default function SpecPage({ params }: { params: Promise<{ name: string }> }) {
   const { name } = use(params);
-  const [spec, setSpec] = useState<SpecData | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const { data, isLoading, error } = useSpec(name);
+  const { invalidateSpec, invalidateSpecs } = useInvalidate();
+  useWebSocket();
 
-  const loadSpec = useCallback(async function () {
-    try {
-      const response = await fetch(`/api/specs/${name}`);
-      if (!response.ok) {
-        const data = await response.json();
-        setError(data.error || "Spec not found");
-        return;
-      }
-      const data = await response.json();
-      setSpec(data);
-    } catch {
-      setError("Failed to load spec");
-    }
-  }, [name]);
+  const spec = data as SpecData | undefined;
 
-  // eslint-disable-next-line react-hooks/set-state-in-effect
-  useEffect(() => { loadSpec(); }, [loadSpec]);
-
-  // Real-time updates via WebSocket
-  useEffect(() => {
-    let ws: WebSocket | null = null;
-    let reconnectTimeout: ReturnType<typeof setTimeout>;
-    let isUnmounted = false;
-
-    function connect() {
-      if (isUnmounted) return;
-      try {
-        ws = new WebSocket("ws://localhost:3001");
-        ws.onmessage = (event) => {
-          const data = JSON.parse(event.data);
-          if (data.specName === name && (
-            data.type === "artifact_approved" ||
-            data.type === "artifact_updated" ||
-            data.type === "spec_promoted"
-          ) || (data.type === "task_updated" && data.task?.specName === name)) {
-            loadSpec();
-          }
-        };
-        ws.onclose = () => {
-          if (!isUnmounted) reconnectTimeout = setTimeout(connect, 3000);
-        };
-        ws.onerror = () => {};
-      } catch {
-        if (!isUnmounted) reconnectTimeout = setTimeout(connect, 3000);
-      }
-    }
-
-    connect();
-    return () => {
-      isUnmounted = true;
-      clearTimeout(reconnectTimeout);
-      ws?.close();
-    };
-  }, [name, loadSpec]);
+  function handleRefresh() {
+    invalidateSpec(name);
+    invalidateSpecs();
+  }
 
   return (
     <div className="min-h-screen bg-[--color-bg]">
@@ -96,8 +50,12 @@ export default function SpecPage({ params }: { params: Promise<{ name: string }>
             DevFlow
           </Link>
           <nav className="flex gap-4">
-            <Link href="/" className="font-bold uppercase text-sm hover:underline">Board</Link>
-            <Link href="/specs" className="font-bold uppercase text-sm hover:underline">Specs</Link>
+            <Link href="/" className="font-bold uppercase text-sm hover:underline">
+              Board
+            </Link>
+            <Link href="/specs" className="font-bold uppercase text-sm hover:underline">
+              Specs
+            </Link>
           </nav>
         </div>
       </header>
@@ -105,11 +63,13 @@ export default function SpecPage({ params }: { params: Promise<{ name: string }>
       <main className="container mx-auto px-6 py-8">
         {error ? (
           <div className="p-6 bg-red-100 border-4 border-red-500">
-            <p className="font-bold text-red-800">{error}</p>
+            <p className="font-bold text-red-800">Failed to load spec</p>
             <Link href="/specs" className="text-sm underline mt-2 block">
               Back to Specs
             </Link>
           </div>
+        ) : isLoading ? (
+          <p className="font-bold">Loading...</p>
         ) : spec ? (
           <SpecDetail
             specName={spec.name}
@@ -117,11 +77,9 @@ export default function SpecPage({ params }: { params: Promise<{ name: string }>
             statuses={spec.statuses}
             artifacts={spec.artifacts}
             tasks={spec.tasks ?? []}
-            onRefresh={loadSpec}
+            onRefresh={handleRefresh}
           />
-        ) : (
-          <p className="font-bold">Loading...</p>
-        )}
+        ) : null}
       </main>
     </div>
   );

package/src/components/kanban-board.tsx

@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef } from 'react';
 import {
   DndContext,
   DragEndEvent,
@@ -9,167 +9,89 @@ import {
   PointerSensor,
   useSensor,
   useSensors,
-} from "@dnd-kit/core";
-import { Task, Project } from "@/db/schema";
-import { KanbanColumn } from "./kanban-column";
-import { TaskCard } from "./task-card";
-import { ChevronDown, Trash2 } from "lucide-react";
-import { SpecKanbanColumn } from "./specs/spec-kanban-column";
-import { SpecModal } from "./specs/spec-modal";
-
-type TaskStatus = "backlog" | "todo" | "in_progress" | "interrupted" | "done";
+} from '@dnd-kit/core';
+import { Task, Project } from '@/db/schema';
+import { KanbanColumn } from './kanban-column';
+import { TaskCard } from './task-card';
+import { ChevronDown, Trash2 } from 'lucide-react';
+import { SpecKanbanColumn } from './specs/spec-kanban-column';
+import { SpecModal } from './specs/spec-modal';
+import { useProjects, useTasks, useInvalidate } from '@/hooks/use-queries';
+import { useWebSocket } from '@/hooks/use-websocket';
+
+type TaskStatus = 'backlog' | 'todo' | 'in_progress' | 'interrupted' | 'done';
 
 const COLUMNS: { id: TaskStatus; title: string; color: string }[] = [
-  { id: "backlog", title: "Backlog", color: "bg-gray-200" },
-  { id: "todo", title: "To Do", color: "bg-[--color-primary]" },
-  { id: "in_progress", title: "In Progress", color: "bg-[--color-secondary]" },
-  { id: "done", title: "Done", color: "bg-[--color-success]" },
+  { id: 'backlog', title: 'Backlog', color: 'bg-gray-200' },
+  { id: 'todo', title: 'To Do', color: 'bg-[--color-primary]' },
+  { id: 'in_progress', title: 'In Progress', color: 'bg-[--color-secondary]' },
+  { id: 'done', title: 'Done', color: 'bg-[--color-success]' },
 ];
 
 const COLUMN_IDS: Set<string> = new Set(COLUMNS.map((c) => c.id));
 
-const STORAGE_KEY = "devflow-selected-project";
+const STORAGE_KEY = 'devflow-selected-project';
 
 export function KanbanBoard() {
-  const [tasks, setTasks] = useState<Task[]>([]);
-  const [projects, setProjects] = useState<Project[]>([]);
+  const { data: projects = [], isLoading: projectsLoading } = useProjects();
+  const { data: tasks = [], isLoading: tasksLoading } = useTasks();
+  const { invalidateTasks, invalidateProjects } = useInvalidate();
+  useWebSocket();
+
   const [selectedProjectId, setSelectedProjectId] = useState<string | null>(null);
   const [selectedSpecName, setSelectedSpecName] = useState<string | null>(null);
   const [specPanelOpen, setSpecPanelOpen] = useState(false);
   const [activeTask, setActiveTask] = useState<Task | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
 
-  const selectedProjectIdRef = useRef<string | null>(null);
-  selectedProjectIdRef.current = selectedProjectId;
-
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
         distance: 8,
       },
-    })
+    }),
   );
 
   useEffect(() => {
     const saved = localStorage.getItem(STORAGE_KEY);
     if (saved) {
-      setSelectedProjectId(saved === "all" ? null : saved);
+      setSelectedProjectId(saved === 'all' ? null : saved);
     }
     setIsInitialized(true);
   }, []);
 
-  const selectProject = useCallback((projectId: string | null) => {
-    setSelectedProjectId(projectId);
-    setSelectedSpecName(null);
-    localStorage.setItem(STORAGE_KEY, projectId || "all");
-    setIsDropdownOpen(false);
-  }, []);
-
+  // Auto-select project if needed
   useEffect(() => {
-    fetchProjects();
-    fetchTasks();
-
-    const pollInterval = setInterval(() => {
-      fetchTasks();
-      fetchProjects();
-    }, 5000);
-
-    return () => clearInterval(pollInterval);
-  }, []);
-
-  useEffect(() => {
-    let ws: WebSocket | null = null;
-    let reconnectTimeout: NodeJS.Timeout;
-    let isUnmounted = false;
-
-    function connect() {
-      if (isUnmounted) return;
-
-      try {
-        ws = new WebSocket("ws://localhost:3001");
-
-        ws.onopen = () => {
-          console.log("WebSocket connected");
-        };
-
-        ws.onmessage = (event) => {
-          const data = JSON.parse(event.data);
-          if (data.type === "agent_count") return;
-          if (data.type?.includes("project")) {
-            fetchProjects();
-          }
-          fetchTasks();
-        };
-
-        ws.onerror = () => {};
-
-        ws.onclose = () => {
-          if (!isUnmounted) {
-            reconnectTimeout = setTimeout(connect, 3000);
-          }
-        };
-      } catch {
-        if (!isUnmounted) {
-          reconnectTimeout = setTimeout(connect, 3000);
-        }
+    if (!isInitialized || projectsLoading) return;
+    if (selectedProjectId) {
+      const exists = projects.some((p: Project) => p.id === selectedProjectId);
+      if (!exists && projects.length > 0) {
+        selectProject(projects[0].id);
       }
+    } else if (!localStorage.getItem(STORAGE_KEY) && projects.length > 0) {
+      selectProject(projects[0].id);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isInitialized, projectsLoading, projects]);
 
-    connect();
-
-    return () => {
-      isUnmounted = true;
-      clearTimeout(reconnectTimeout);
-      ws?.close();
-    };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const selectProject = useCallback((projectId: string | null) => {
+    setSelectedProjectId(projectId);
+    setSelectedSpecName(null);
+    localStorage.setItem(STORAGE_KEY, projectId || 'all');
+    setIsDropdownOpen(false);
   }, []);
 
-  async function fetchProjects() {
-    try {
-      const response = await fetch("/api/projects");
-      const data = await response.json();
-      setProjects(data);
-
-      if (isInitialized && selectedProjectId) {
-        const exists = data.some((p: Project) => p.id === selectedProjectId);
-        if (!exists && data.length > 0) {
-          selectProject(data[0].id);
-        }
-      } else if (isInitialized && !selectedProjectId && !localStorage.getItem(STORAGE_KEY)) {
-        if (data.length > 0) {
-          selectProject(data[0].id);
-        }
-      }
-    } catch (error) {
-      console.error("Failed to fetch projects:", error);
-    }
-  }
-
-  async function fetchTasks() {
-    try {
-      const response = await fetch("/api/tasks");
-      const data = await response.json();
-      setTasks(data);
-    } catch (error) {
-      console.error("Failed to fetch tasks:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  }
-
   async function updateTaskStatus(taskId: string, newStatus: TaskStatus) {
     try {
       await fetch(`/api/tasks/${taskId}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ status: newStatus }),
       });
-      await fetchTasks();
+      invalidateTasks();
     } catch (error) {
-      console.error("Failed to update task:", error);
+      console.error('Failed to update task:', error);
     }
   }
 
@@ -205,8 +127,8 @@ export function KanbanBoard() {
   function getTasksByStatus(status: TaskStatus) {
     return tasks
       .filter((task) => {
-        if (task.status === "interrupted") {
-          return status === "in_progress";
+        if (task.status === 'interrupted') {
+          return status === 'in_progress';
         }
         return task.status === status;
       })
@@ -216,29 +138,32 @@ export function KanbanBoard() {
 
   async function deleteProject(projectId: string, projectName: string) {
     const taskCount = tasks.filter((t) => t.projectId === projectId).length;
-    const confirmMessage = taskCount > 0
-      ? `Delete "${projectName}" and its ${taskCount} task${taskCount === 1 ? "" : "s"}? This cannot be undone.`
-      : `Delete "${projectName}"? This cannot be undone.`;
+    const confirmMessage =
+      taskCount > 0
+        ? `Delete "${projectName}" and its ${taskCount} task${taskCount === 1 ? '' : 's'}? This cannot be undone.`
+        : `Delete "${projectName}"? This cannot be undone.`;
 
     if (!confirm(confirmMessage)) return;
 
     try {
       const response = await fetch(`/api/projects/${projectId}`, {
-        method: "DELETE",
+        method: 'DELETE',
       });
 
       if (response.ok) {
         if (selectedProjectId === projectId) {
           selectProject(null);
         }
-        await fetchProjects();
-        await fetchTasks();
+        invalidateProjects();
+        invalidateTasks();
       }
     } catch (error) {
-      console.error("Failed to delete project:", error);
+      console.error('Failed to delete project:', error);
     }
   }
 
+  const isLoading = tasksLoading && !tasks.length;
+
   if (isLoading) {
     return (
       <div className="flex items-center justify-center h-screen">
@@ -264,7 +189,7 @@ export function KanbanBoard() {
             <div className="flex items-center gap-6">
               <div className="flex items-center gap-4">
                 <h1 className="text-3xl font-black uppercase tracking-tight">DevFlow</h1>
-                </div>
+              </div>
 
               {/* Project Chooser Dropdown */}
               <div className="relative">
@@ -273,24 +198,23 @@ export function KanbanBoard() {
                   className="flex items-center gap-2 px-4 py-2 bg-[--color-primary] border-4 border-black font-bold text-sm uppercase hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]"
                 >
                   <span className="max-w-[200px] truncate">
-                    {selectedProject ? selectedProject.name : "All Projects"}
+                    {selectedProject ? selectedProject.name : 'All Projects'}
                   </span>
                   <span className="text-xs opacity-70">({totalTasks})</span>
-                  <ChevronDown className={`h-4 w-4 transition-transform ${isDropdownOpen ? "rotate-180" : ""}`} />
+                  <ChevronDown
+                    className={`h-4 w-4 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`}
+                  />
                 </button>
 
                 {isDropdownOpen && (
                   <>
-                    <div
-                      className="fixed inset-0 z-10"
-                      onClick={() => setIsDropdownOpen(false)}
-                    />
+                    <div className="fixed inset-0 z-10" onClick={() => setIsDropdownOpen(false)} />
 
                     <div className="absolute top-full left-0 mt-2 w-64 bg-white border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] z-20 max-h-80 overflow-y-auto">
                       <button
                         onClick={() => selectProject(null)}
                         className={`w-full px-4 py-3 text-left font-bold text-sm uppercase border-b-2 border-black hover:bg-gray-100 flex items-center justify-between ${
-                          !selectedProjectId ? "bg-black text-white hover:bg-gray-800" : ""
+                          !selectedProjectId ? 'bg-black text-white hover:bg-gray-800' : ''
                         }`}
                       >
                         <span>All Projects</span>
@@ -298,12 +222,16 @@ export function KanbanBoard() {
                       </button>
 
                       {projects.map((project) => {
-                        const projectTaskCount = tasks.filter((t) => t.projectId === project.id).length;
+                        const projectTaskCount = tasks.filter(
+                          (t) => t.projectId === project.id,
+                        ).length;
                         return (
                           <div
                             key={project.id}
                             className={`flex items-center border-b border-gray-200 last:border-b-0 ${
-                              selectedProjectId === project.id ? "bg-[--color-primary]" : "hover:bg-gray-100"
+                              selectedProjectId === project.id
+                                ? 'bg-[--color-primary]'
+                                : 'hover:bg-gray-100'
                             }`}
                           >
                             <button
@@ -328,9 +256,7 @@ export function KanbanBoard() {
                       })}
 
                       {projects.length === 0 && (
-                        <div className="px-4 py-3 text-sm text-gray-500">
-                          No projects yet
-                        </div>
+                        <div className="px-4 py-3 text-sm text-gray-500">No projects yet</div>
                       )}
                     </div>
                   </>
@@ -353,8 +279,10 @@ export function KanbanBoard() {
               )}
             </div>
             <div className="flex items-center gap-4 text-sm font-bold">
-              <span>{projectTasks.filter((t) => t.status === "in_progress").length} in progress</span>
-              <span>{projectTasks.filter((t) => t.status === "done").length} done</span>
+              <span>
+                {projectTasks.filter((t) => t.status === 'in_progress').length} in progress
+              </span>
+              <span>{projectTasks.filter((t) => t.status === 'done').length} done</span>
             </div>
           </div>
         </div>
@@ -376,11 +304,7 @@ export function KanbanBoard() {
 
         {/* Kanban columns */}
         <main className="flex-1 min-h-0 overflow-hidden">
-          <DndContext
-            sensors={sensors}
-            onDragStart={handleDragStart}
-            onDragEnd={handleDragEnd}
-          >
+          <DndContext sensors={sensors} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
             <div className="h-full px-6 py-6">
               <div className="grid grid-cols-4 gap-6 h-full min-h-0">
                 {COLUMNS.map((column) => (
@@ -391,7 +315,7 @@ export function KanbanBoard() {
                     color={column.color}
                     tasks={getTasksByStatus(column.id)}
                     features={[]}
-                    onRefresh={fetchTasks}
+                    onRefresh={() => invalidateTasks()}
                   />
                 ))}
               </div>
@@ -404,7 +328,7 @@ export function KanbanBoard() {
                     task={activeTask}
                     feature={undefined}
                     features={[]}
-                    onRefresh={fetchTasks}
+                    onRefresh={() => invalidateTasks()}
                   />
                 </div>
               ) : null}
@@ -414,10 +338,7 @@ export function KanbanBoard() {
 
         {/* Spec modal */}
         {specPanelOpen && selectedSpecName && (
-          <SpecModal
-            specName={selectedSpecName}
-            onClose={() => setSpecPanelOpen(false)}
-          />
+          <SpecModal specName={selectedSpecName} onClose={() => setSpecPanelOpen(false)} />
         )}
       </div>
     </div>

package/src/components/kanban-column.tsx

@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import { useDroppable } from "@dnd-kit/core";
-import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { Task } from "@/db/schema";
-import { TaskCard } from "./task-card";
-import { cn } from "@/lib/utils";
+import { useDroppable } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { Task } from '@/db/schema';
+import { TaskCard } from './task-card';
+import { cn } from '@/lib/utils';
 
 interface KanbanColumnProps {
   id: string;
@@ -20,20 +20,18 @@ export function KanbanColumn({ id, title, color, tasks, onRefresh }: KanbanColum
 
   return (
     <div className="flex flex-col h-full min-h-0">
-      <div className={cn("px-4 py-3 border-3 border-black border-b-0", color)}>
+      <div className={cn('px-4 py-3 border-3 border-black border-b-0', color)}>
         <h2 className="font-black uppercase tracking-wide text-black flex items-center justify-between">
           <span>{title}</span>
-          <span className="text-sm font-bold bg-black text-white px-2 py-1">
-            {tasks.length}
-          </span>
+          <span className="text-sm font-bold bg-black text-white px-2 py-1">{tasks.length}</span>
         </h2>
       </div>
 
       <div
         ref={setNodeRef}
         className={cn(
-          "flex-1 overflow-y-auto p-4 space-y-3 bg-white border-3 border-black transition-colors",
-          isOver && "bg-gray-100"
+          'flex-1 overflow-y-auto p-4 space-y-3 bg-white border-3 border-black transition-colors',
+          isOver && 'bg-gray-100',
         )}
       >
         <SortableContext items={tasks.map((t) => t.id)} strategy={verticalListSortingStrategy}>

package/src/components/markdown-preview.tsx

@@ -1,29 +1,40 @@
-"use client";
+'use client';
 
-import { useEffect, useRef, useMemo } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import rehypeRaw from "rehype-raw";
-import mermaid from "mermaid";
-import { cn } from "@/lib/utils";
-
-mermaid.initialize({ startOnLoad: false, theme: "neutral" });
+import { useEffect, useRef, useMemo, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import { cn } from '@/lib/utils';
 
 let mermaidCounter = 0;
 
 function MermaidBlock({ chart }: { chart: string }) {
   const ref = useRef<HTMLDivElement>(null);
   const id = useMemo(() => `mermaid-${++mermaidCounter}`, []);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     if (!ref.current) return;
-    mermaid.render(id, chart).then(({ svg }) => {
-      if (ref.current) ref.current.innerHTML = svg;
-    }).catch((err) => {
-      if (ref.current) ref.current.textContent = `Mermaid error: ${err.message}`;
-    });
+    let cancelled = false;
+    import('mermaid')
+      .then(({ default: mermaid }) => {
+        if (cancelled) return;
+        mermaid.initialize({ startOnLoad: false, theme: 'neutral' });
+        return mermaid.render(id, chart);
+      })
+      .then((result) => {
+        if (cancelled || !result) return;
+        if (ref.current) ref.current.innerHTML = result.svg;
+      })
+      .catch((err) => {
+        if (!cancelled && ref.current) setError(err.message);
+      });
+    return () => {
+      cancelled = true;
+    };
   }, [id, chart]);
 
+  if (error) return <div className="my-4 text-red-600">Mermaid error: {error}</div>;
   return <div ref={ref} className="my-4 overflow-x-auto" />;
 }
 
@@ -34,7 +45,7 @@ interface MarkdownPreviewProps {
 
 export function MarkdownPreview({ content, className }: MarkdownPreviewProps) {
   return (
-    <div className={cn("markdown-preview", className)}>
+    <div className={cn('markdown-preview', className)}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[rehypeRaw]}
@@ -63,17 +74,23 @@ export function MarkdownPreview({ content, className }: MarkdownPreviewProps) {
             </div>
           ),
           thead: ({ children }) => <thead className="bg-black text-white">{children}</thead>,
-          th: ({ children }) => <th className="px-3 py-2 text-left font-bold uppercase">{children}</th>,
+          th: ({ children }) => (
+            <th className="px-3 py-2 text-left font-bold uppercase">{children}</th>
+          ),
           td: ({ children }) => <td className="px-3 py-2 border-t-2 border-black">{children}</td>,
           // Code blocks + Mermaid
           code: ({ className: cls, children, ...props }) => {
-            const lang = /language-(\w+)/.exec(cls || "")?.[1];
-            if (lang === "mermaid") {
+            const lang = /language-(\w+)/.exec(cls || '')?.[1];
+            if (lang === 'mermaid') {
               return <MermaidBlock chart={String(children).trim()} />;
             }
             // Inline code (no language class)
             if (!cls) {
-              return <code className="inline-code" {...props}>{children}</code>;
+              return (
+                <code className="inline-code" {...props}>
+                  {children}
+                </code>
+              );
             }
             return (
               <pre className="code-block" data-lang={lang}>