Refactor RowboatX configuration and enhance editor features

- Updated `next.config.ts` to scope Turbopack to the app's directory.
- Modified `package.json` and `package-lock.json` to include new dependencies for Tiptap and markdown processing.
- Removed deprecated chat API and added new agent and config routes for file management.
- Introduced `JsonEditor` and `MarkdownViewer` components for improved content editing and display.
- Enhanced `TiptapMarkdownEditor` with additional toolbar options and markdown parsing capabilities.
- Updated layout and page components to integrate new editors and improve user experience.

apps/rowboatx/components/json-editor.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useEditor, EditorContent } from "@tiptap/react";
+import { useEffect, useState } from "react";
+import StarterKit from "@tiptap/starter-kit";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import { common, createLowlight } from "lowlight";
+import "./json-editor.css";
+
+const lowlight = createLowlight(common);
+
+interface JsonEditorProps {
+  content: string;
+  onChange: (content: string) => void;
+  readOnly?: boolean;
+}
+
+export function JsonEditor({ content, onChange, readOnly = false }: JsonEditorProps) {
+  const [lineCount, setLineCount] = useState(1);
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        codeBlock: false, // Disable default code block
+      }),
+      CodeBlockLowlight.configure({
+        lowlight,
+        defaultLanguage: "json",
+      }),
+    ],
+    immediatelyRender: false,
+    editable: !readOnly,
+    editorProps: {
+      attributes: {
+        class: "json-editor-content",
+      },
+    },
+    onUpdate: ({ editor }) => {
+      // Extract text content from the code block
+      const text = editor.getText();
+      onChange(text);
+      // Update line count
+      setLineCount(text.split("\n").length || 1);
+    },
+  });
+
+  // Set initial content and update when content prop changes
+  useEffect(() => {
+    if (!editor) return;
+    
+    const currentText = editor.getText().trim();
+    if (currentText !== content.trim()) {
+      // Set content using ProseMirror JSON structure
+      editor.commands.setContent({
+        type: "doc",
+        content: [
+          {
+            type: "codeBlock",
+            attrs: {
+              language: "json",
+            },
+            content: content ? [
+              {
+                type: "text",
+                text: content,
+              },
+            ] : [],
+          },
+        ],
+      });
+      setLineCount(content.split("\n").length || 1);
+    }
+  }, [editor, content]);
+
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div className="json-editor-wrapper">
+      <div className="json-editor-line-numbers">
+        {Array.from({ length: lineCount }, (_, i) => (
+          <div key={i} className="json-editor-line-number">
+            {i + 1}
+          </div>
+        ))}
+      </div>
+      <EditorContent editor={editor} />
+    </div>
+  );
+}
+